قوالب Blogger بتقنية css+jquery
22/03/2011

السلام عليكم
قوالب رائعة و استثنائية اقدمها لكل مدون او مطور او حتى مصمم ليتفنن فيها و يطورها
في غاية الجمال و الهدوء و الجمال
جاهزة للتحميل..

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)

تحميل (Download) مثال (Demo)
إظهار و إخفاء 3 إضافات في قائمة واحدة
18/03/2011
السلام عليكم و رحمة الله تعالى وبركاته
موضوعنا اليوم هو كيفية إظهار و إخفاء 3 إضافات في قائمة واحدة لمدونات Blogger
بمكتبة ال jquery فهذه المكتبة صغيرة تستطيع بها فعل أشياء كثيرة وبكفائه عالية،
أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم
ثم تحرير HTML
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثالثا : ضع علامة في خانة توسيع القوالب .
ابحث عن هذا الوسم اذا كانت مدونتك تحتوي على الاطار العلوي
NAVBAR
فان من الافضل حذفها و ذالك بالبحث عن هذا الوسم
]]></b:skin>
و نضع قبله تماما هدا الكود
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
الان ننتقل الى الأهم..
البحث عن هذا الوسم
]]></b:skin>
و نضع قبله تماما هدا الكود
/*Sliding Login Panel with jQuery 1.3.2*/
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http://www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: white;
}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 190px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
/*newsletter*/
#newsletter { }
#newsletter p { font-size:14px; font-weight: bold; color: #555; float:left; padding:8px 5px 0px 30px; }
#newsletter form { float:right; padding:0 30px 0 0; }
#newsletter form input.email { width:150px; color:#888; border: 1px solid #ddd; padding:5px 8px 4px; height: 32px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:3px; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }
#newsletter form input.submit { margin:0 0 0 5px; padding:0; background: url(http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/btn-submit.png) no-repeat; width:89px; height: 31px; border:0; cursor: pointer; color:#fff; text-shadow: 0 -1px 0px #777; font-family: sans-serif; font-weight: bold; font-size:13px; }
#newsletter form input.submit:hover { opacity:0.85; }
/*fade-spin-css3-jquery*/
#followIcons a {
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:3;
}
#followIcons a {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/RSS.png); }
#iconTwitter { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/twitter.png); }
#iconDelicious { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/delicious.png); }
#iconFacebook { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/facebook.png); }
/*submenu*/
#submenu {
width: 160px;
float: left;
}
#submenu2 {
width: 160px;
float: right;
}
#submenu ul, #submenu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#submenu ul li a, #submenu2 ul li a {
background:url(http://cdn2.iconfinder.com/data/icons/circular%20icons/bullet_green.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#submenu li, #submenu2 li {display: inline;}
#submenu a, #submenu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#submenu a:link, #submenu a:visited, #submenu2 a:link, #submenu2 a:visited {
color: #999;
text-decoration: none;
}
#submenu a:hover, #submenu2 a:hover {
color: #FFFFFF;
}
رابعا :
ابحث عن هذا الوسم
</head>
نقوم بتضليله و نعوضه بهذا الكود
</head>
<script src='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script>jQuery(document).ready(function() {
/*
* Create Spinning, Fading Icons with CSS3 and jQuery for blogger.com
* Script combined from http://davidwalsh.name
* used By khaled ( http://blogspacetech.blogspot.com )
*/
// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 150, availableHeight = 25;
// Get the proper CSS prefix
if(jQuery.browser.webkit) {
cssPrefix = "webkit";
}
else if(jQuery.browser.mozilla) {
cssPrefix = "moz";
}
else if(jQuery.browser.opera) {
cssPrefix = "o";
}
// Apply opacity
var zIndex = 1000;
// Randomize each link
jQuery.each(jQuery("#followIcons a"),function(index) {
var startDeg = $random(360);
var element = jQuery(this);
var resetPlace = function() {
element.fadeTo(200,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
};
element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");
},resetPlace);
resetPlace();
});
});
</script>
<link href='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/css/style.sliding-panel.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/supersleight-min.js"></script>
<![endif]-->
<script src='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/slide.js' type='text/javascript'/>
خامسا :
الان ننتقل الى الخطوة الاخيرة
و نبحث عن هذا الوسم
<body>
او هذا الوسم
<body expr:class='"loading" + data:blog.mobileClass'>و نضع بعد احد الوسم الذي وجدته هذا الكود:
<!--top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<!-- First section -->
<div class='left' style='width:250px !important'>
<h4>To connect</h4>
<p>للتواصل عبر الشبكات الاجتماعية او الاشتراك في خلاصات RSS</p>
<div id='followIcons'>
<a href='http://feeds2.feedburner.com/blogspacetech' id='iconRSS'>RSS Feed</a>
<a href='http://twitter.com/infokhaled31' id='iconTwitter'>@infokhaled31 Twitter</a>
<a href='http://del.icio.us/' id='iconDelicious'>infokhaled31</a>
<a href='http://facebook.com/infokhaled31' id='iconFacebook'>infokhaled31 Facebook</a>
</div>
</div>
<!-- Section Two -->
<div class='left' style='width:330px !important'>
<h4>Categories</h4>
<div id='submenu'>
<ul>
<li><a href='your URL here'>The first link</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
</ul>
</div>
<div id='submenu2'>
<ul>
<li><a href='your URL here'>Second link</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
<li><a href='your URL here'>Link, corresponding</a></li>
</ul>
</div>
</div>
<!-- Section Three -->
<div class='left right'>
<h4>إشترك في القائمة البريدية ليصلك جديدنا</h4>
<div id='newsletter'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='newsletter-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspacetech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='email' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "Enter email address";}' onfocus='if (this.value == "Enter email address") {this.value = "";}' type='text' value='Enter email address'/>
<input name='uri' type='hidden' value='blogspacetech'/>
<input name='title' type='hidden' value='Placeholder'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' name='submit' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>! مرحبا بالضيف </li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>show /إظهار </a>
<a class='close' href='#' id='close' style='display: none;'>Hide / إخفاء</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fin top sliding menu -->
أخيرا : استعرض مدونتك ثم احفظ قالبك
شرح المعلومات الأساسية للمكتبة و مبدا عملها
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
قبل كل شيء التطبيق كان على div
و العناصر التي قمت بمطابقتها اي التاثير عليها
<div id='toppanel'>
<div id='panel'>
في ملف الجافاسكريبت السابق سوف تجد بعض الخصائص..
و شرحها كالتالي و على الترتيب :
open : تستخدم لإظهار جميع العناصر التي تمت مطابقتها
close : تستخدم لاخفار جميع العناصر التي تمت مطابقتها
toggle : تستخدم للإظهار والاخفار في آن واحد
slideDown : تستخدم لإظهار العناصر بتغير خاصية الارتفاع (سوف تنزلق للاسفل وتظهر)
slideUp : تستخدم لإخفاء العناصر بتغير الارتفاع (سوف تنزلق للاعلى وتحتفي)
slideDown : تستخدم لإظهار العناصر بتغير خاصية الارتفاع (سوف تنزلق للاسفل وتظهر)
slideToggle : تستخدم للاخفاء بالانزلاق للاعلى و الاظهار بالنزلاق للاسفل بالعتماد على الارتفاع
كما يمكن اضافة هذه الخواص
fadeIn : سوف تظهر تدريجيا بتغير الخاصية opacity "الشفافية" تدريجيا
fadeOut : سوف تختفي تدريجيا بتغير الخاصية opacity "الشفافية" تدريجيا
هذا كل شيئ أتمنى لكم الاستفادة.
مصدر : web-kreation
إضافة مقطع صوتي بتقنية HTML5
13/01/2011
السلام عليكم
بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال HTML5
حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع
فالأن وبعد طول انتظار اتت لنا خاصية ال HTML5 لتسريع الاستماع من جهة
و من جهة أخرى نجد متصفحات اكثر تعقيدا و أكثر ذكاءا ...
لكن هذا ليس معنى أن تكون لغة HTML5 في غير صالحنا
لأن الذي برمج audiojs جعل هذه الاخيرة تتوافق مع كل من
Mobile Safari iOS 3
Android2.2+, w/Flash
Safari 4
Chrome 7
Firefox 3+, w/ Flash
Opera 10+, w/ Flash
IE 6, 7, 8, w/ Flash
هل يمكنني استعمال هته الخاصية في مدونتي؟
نعم يمكن و اليوم سنضع شرح بسيط
أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم " تحرير HTML "
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثالثا : ضع علامة في خانة توسيع القوالب .
ثم ابحث عن هذا الوسم
</head>
و ضع فوقه هدا كود
<script src="http://dl.dropbox.com/u/17686000/blogspacetech/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>
أو يمكنك تحميل الملف من الموقع الاصلي
و اعادة رفعه...
الان نبحث عن هدا الوسم
]]></b:skin>
و نضع فوقه هدا الكود
.audiojs {
width: 460px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}
أخيرا : استعرض مدونتك ثم احفظ قالبك.
شرح كيفية الإستخدام
قم بكتابة تدوينتك بالطريقة المعتادة
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,
أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة
<div> <audio src="رابط الملف الصوتي." preload="auto" /> </div>
هناك خاصيتان اساسيتان في الاضافة
التشغيل التلقائي للملف الصوتي autoplay
او تشغيل الى غير مسمى loop
<audio src="رابط الملف الصوتي" autoplay />
<audio src="رابط الملف الصوتي" loop />
<audio src="رابط الملف الصوتي" loop />
كما يمكنك اختيار احد المواقع لرفع ملفات mp3
هذا كل شيئ أتمنى لك الاستفادة
اجعل مدونتك متوافقة على الأجهزة النقالة
17/12/2010

كما تعلمون ، فإن الملايين من الناس يستعملون هواتفهم النقالة إلى الوصول إلى الإنترنت.
سرعة الانترنت المتنقلة هي أيضا سريعة جدا في هذه الأيام مع الجيل الثالث 3G ،
من هذا ، يمكننا أن نقول الكثير من القراء يأتون لمدونتك الخاص بك عن طريق الهواتف النقالة..
ولكن ، إذا كنت لا تجعل هاتفك النقال ودي لمدونتك ،.
قد تفقد كل ما بذلته من القراء بسبب الجوال
أي مدونتك ليست مناسبة بشكل صحيح في شاشة الجوال.
لذلك ، هنا كيفية جعل مدونتك ودية مع الهاتف النقال..
فقط سجل دخولك إلى الحساب الخاص بك في مسودة بلوجر
تستطيع الآن تفعيل عرض إصدار الجوال النموذجي على أجهزة الجوال
بالضغط على تشغيل نمادج الجوال
و من ثم سيتم تحويلك الى > اعدادات > البريد الإلكتروني والجوّال أخيرا
احفظ الاعدادات
و هذه من أحد المميزات الجديدة من بلوجر و هو دعمها لمختلف اصدار الجوال
هدا كل شيئ..
و هكدا لن تفقد زوارك.
اختيار لفتح الروابط في صفحة مستقلة
16/12/2010
السلام عليكم
كلنا نعلم أن الروابط الخارجية تمنع من الحفاظ على الزوار وابقائهم في المدونة
لأطول فترة ممكنة،،وقد نفقد الكثير من الزوار.
خاصة من يستخدمون الروابط في الـ anchor text أو الاعلانات بأنواعها
وقد تكون موجودة حتى في تعليقات الزوار،
وهذا كله قد يساهم في خروج الزائر من المدونة.
هذه المشكلة عولجت في مدونات الووردبريس باستخدام اضافة
Open in New Window Plugin .
أما بالنسبة لبلوجر فهناك عدة طرق منها عن طريق تقنية الجيوكري
أما بالنسبة لبلوجر فهناك عدة طرق منها عن طريق تقنية الجيوكري
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery('a').each(function() { // Let's make external links open in a new window. var href = jQuery(this).attr('href'); if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) { jQuery(this).attr("target", "_blank"); } }); //]]> </script> لكن احيانا نجد ان الزوار قد ينزعجون من هته الطريقة
لدالك لجانا الى بحث عن دالة لوضع اختيار للزائر
مادا اذا كان يريد فتح هته الروابط الخارجية في صفحة مستقلة
يكفي فقط الانتقال الى تصميم من لوحة التحكم ثم الى اضافة أداة جديدة Html
و انسخ الكود التالي
<div class="linkprefs"> <p style="border:1px solid #cccccc;font-family:Arial,helvetica,sans-serif;font-size:12px;padding-bottom:4px;padding-top:4px;background:#f4f4f4;display: block;"><input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox" /> <label for="linkprefs">لفتح الروابط في صفحة مستقلة</label></p><span></span> <script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script> </div> <script language="JavaScript" type="text/javascript"> <!-- /* Link Target Preferences v.1.1 http://www.noscope.com/journal/2004/10/link-target-preferences */ // BEGIN Configuration // The following URLs are considered "on-site", and will be ignored // Consider adding both your main URL and the no-ww URL var url_1 = "http://www.example.com"; var url_2 = "http://example.com"; // Default link-target preference. What should be default for new users? // Value true opens in _blank by default, false opens in _top by default var open_blank_default = false; // Website title - used only for cookie name to prevent cookie conflicts with other sites using this // No spaces, no special characters, just a unique name var site_title = "example"; // END Configuration // Cookie Functions function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } // Checkbox Loader function loadLinkPrefs () { if (readCookie(site_title+"_linkprefs_cookie")) { initVal = readCookie(site_title+"_linkprefs_cookie"); // Load cookied preference } else { createCookie(site_title+"_linkprefs_cookie", true, 20000) initVal = open_blank_default; // If no cookie is set } openBlank = initVal; setCheckbox(eval(initVal)) } // Set Checkbox State function setCheckbox(state) { openBlank = state; document.getElementById('linkprefs').checked = state; setTargets(); createCookie(site_title+"_linkprefs_cookie", state, 20000) } // Configure Link Targets function setTargets() { var link, l = 0; if (openBlank == true) { while (link = document.links[l++]) { // Open in _blank, except all links starting with... if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_blank'; } } else { while (link = document.links[l++]) { // Open in _top, except all links starting with... if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_top'; } } } // Event Listener, by Scott Andrew function addEvent(obj, evType, fn) { if (obj.addEventListener) { obj.addEventListener(evType, fn, true); return true; } else if (obj.attachEvent) { var r = obj.attachEvent('on'+evType, fn); return r; } else { return false; } } //--> </script>
هذه الطريقة ليست مقتصرة فقط على المدونات
وإنما يمكن تطبيقها أيضا على كل المواقع بمختلف أنواعها.
مصدر الدالة
و السلام خير ختام.








