شرح إضافة زر البحث في مدونات بلوجر

بسم الله والصلاة والسلام على رسول الله , أخواني الكرام سلام الله عليكم ورحمته وبركاته , أتيت اليكم اليوم بإضافة مهمة ورائعة حيث تعطي مدونتك رونقا من الجمال ,
شرح إضافة زر البحث في مدونات بلوجر, إضافة رائعة تمكن زائرك من البحث عن ما تحتويه مدونتك . وهذه الإضافة متوفرة أصلا في مدونات بلوجر كإضافة أساسية من لوحة التحكم , ولكن سبب وضع هذه التدوينة هو ليس الإضافة ولكن شكل محرك
البحث الخاص بمدونتك , فكفانا أشكال تقليدية , أجمل ما يكون هو التغيير دائما , وسأعرض عليك الآن بفضل الله مجموعة مميزة من أشكال محركات البحث, فهيا بنا ندخل الى الموضوع

الاستايل العادي:

Code:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="بحــث" type="submit"/></form>

استايل متغير :

Code:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #f7f7f7; border: 2px solid black"/><input id="search-btn" value="بحـــث" type="submit" style="background: black; border: 2px outset #414446; color: #ffffff; font-weight: bold;"/></form>

وفي هذا الكود تستطيع تغيير لون المحرك حيث أن
f7f7f7 : لون كلمة " بحــث "
414446 : لون الإطار المحيط بكلمة " بحث "
ffffff : لون خلفية محرك البحث وهو اللون الأبيض

محرك بحث مختلف :

Code:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="ضع كلمات بحثك هنا"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

أختر ما تشاء منها .. ولتركيب الإضافة
1. ادخل الى لوحة تحكم المدونة .. ثم الى التصميم ثم الى إضافة آداة " HTML Java Script "
2. انسخ الكود الذي اخترته ليكون محرك بحث خاص بك ثم الصقه .
3. احفظ القالب .
تم بحمد الله , أخوكم : باسم .

شرح إضافة زر البحث في مدونات بلوجر

بسم الله والصلاة والسلام على رسول الله , أخواني الكرام سلام الله عليكم ورحمته وبركاته , أتيت اليكم اليوم بإضافة مهمة ورائعة حيث تعطي مدونتك رونقا من الجمال ,
شرح إضافة زر البحث في مدونات بلوجر, إضافة رائعة تمكن زائرك من البحث عن ما تحتويه مدونتك . وهذه الإضافة متوفرة أصلا في مدونات بلوجر كإضافة أساسية من لوحة التحكم , ولكن سبب وضع هذه التدوينة هو ليس الإضافة ولكن شكل محرك
البحث الخاص بمدونتك , فكفانا أشكال تقليدية , أجمل ما يكون هو التغيير دائما , وسأعرض عليك الآن بفضل الله مجموعة مميزة من أشكال محركات البحث, فهيا بنا ندخل الى الموضوع

الاستايل العادي:

Code:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="بحــث" type="submit"/></form>

استايل متغير :

Code:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #f7f7f7; border: 2px solid black"/><input id="search-btn" value="بحـــث" type="submit" style="background: black; border: 2px outset #414446; color: #ffffff; font-weight: bold;"/></form>

وفي هذا الكود تستطيع تغيير لون المحرك حيث أن
f7f7f7 : لون كلمة " بحــث "
414446 : لون الإطار المحيط بكلمة " بحث "
ffffff : لون خلفية محرك البحث وهو اللون الأبيض

محرك بحث مختلف :

Code:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="ضع كلمات بحثك هنا"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

أختر ما تشاء منها .. ولتركيب الإضافة
1. ادخل الى لوحة تحكم المدونة .. ثم الى التصميم ثم الى إضافة آداة " HTML Java Script "
2. انسخ الكود الذي اخترته ليكون محرك بحث خاص بك ثم الصقه .
3. احفظ القالب .
تم بحمد الله , أخوكم : باسم .
المصدر : مدونة الباسم .

شرح إضافة زر تابعني على تويتر " Follow Me " كنص متحرك لمدونات بلوجر

شرح إضافة زر تابعني على تويتر  " Follow Me " كنص متحرك لمدونات بلوجر. أخواني الكرام السلام عليكم ورحمة الله جئت اليكم اليوم بإضافة رائعة تستطيع من خلالها إعطاء المدونة شكل أفضل وأجمل ألا وهي شرح إضافة زر تابعني على تويتر  " Follow Me " كنص متحرك لمدونات بلوجر ولتركيب هذه اللإضافة أتبع الآتي :
أولا لرؤية مثال على الإضافة من هنا : مدونة الباسم
1. ادخل الى لوحة التحكم ثم التصميم ثم إضافة أداة جديدة ألا وهي " Html JavaScript "
والصق بداخلها هذا الكود
ملحوظة لتكون هذه الإضافة على اليمين أضف هذا الكود

<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'elbasem';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 150;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

 ولتكون هذه الإضافة على اليسار أضف هذا الكود

<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'elbasem';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'l';
tfb.top = 150;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

مع تغيير  elbasem باسم حسابك على تويتر 
ثم اضغط حفظ .. تم بحمد الله 
أخوكم .. باسم

شرح إضافة زر " Facebook Share " مشاركة في الفيس بوك لمدونات بلوجر

شرح إضافة زر " Facebook Share " مشاركة في الفيس بوك لمدونات بلوجر.
بسم الله الرحمن الرحيم أخواني الكرام . جئت اليكم اليوم بإضافة " Facebook Share " مشاركة في الفيس بوك فهي إضافة رائعة تمكن زوارك من مشاركة التدوينة في موقع الفيسبوك الشهير ومنها ستحصل على زوار كثيرون وباك لينكس كثير
إن شاء الله . ولتركيب هذه الإضافة يرجى اتباع التالي :
1. ادخل الى لوحة التحكم ثم التصميم ثم تحرير ال HTML ثم قم بتوسيع القالب .
2. لا تنسى بأخذ نسخة احتياطية من قالبك الخاص .
3. ابحث عن هذا الكود <data:post.body/> ثم قم بإضافة الكود التالي بعده مباشرة

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">مشاركة</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

وأمامك عدة أشكال تستطيع من خلالها تغيير اللوجو الخاص بالإضافة

الكود الأول :

<div style='float:right; margin-left:10px;'>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>

النتيجة :


الكود الثاني :

<div style='float:right; margin-left:10px;'>
<script>var fbShare = {
url: 'http://YOURBLOG.blgospot.com/',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>

النتيجة :


الكود الثالث :

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

النتيجة :


الكود الرابع :

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

النتيجة :



ثم احفظ القالب .. تم بحمد الله .. تحياتي أخوكم  : باسم 

شرح إظهار عناوين المواضيع فقط في الصفحة الرئيسية لمدونات بلوجر

شرح إظهار عناوين المواضيع فقط في الصفحة الرئيسية لمدونات بلوجر  . هاك بسيط يعمل على إظهار العناوين فقط وليس العنوان والموضوع معا .. حيث يظهر العنوان في الصفحة الرئيسية للمدونة فقط وعد الضغط عليه يحولك الى الموضوع الرئيسي . ولكي تستطيع تركيب هذا الهاك في مدونتك اتبع الآتي

1. ادخل الى لوحة التحكم ثم التصميم ثم تحرير ال HTML وقم بتوسيع القالب .
2. لا تنسى بأخذ نسخة احتياطية من القالب الخاص بك .
3. ابحث عن هذا الكود </head>
ثم أضف قبله " فوقه " مباشرة هذا الكود

<style type='text/css'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>

والآن قم بحفظ القالب ..
تم بحمد الله .. أخوكم : باسم

شرح إضافة 3 أعمدة في الفوتر لمدونات بلوجر

شرح إضافة 3 أعمدة في الفوتر لمدونات بلوجر . زواري الكرام الأعزاء درسنا اليوم هو عبارة عن شرح إضافة 3 أعمدة في الفوتر لمدونات بلوجر . وقد أردت شرحه بعد أن جائتني بعض الاستفسارات بخصوص هذه الإضافة لقوالب بلوجر فأبدأ والله المستعان ؛؛
1. ادخل الى لوحة التحكم ثم الى تصميم ثم تحرير ال HTML ثم قم بتوسيع القالب .

2. قم بأخذ نسخة احتياطية من القالب خاصتك .
3. قم بالبحث عن هذا الكود

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

وقم باستبداله بهذا الكود

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

 ثم قم بعمل استعراض للقالب . عند عدم وجود أية أخطاء تابع معي لابد من إضافة هذا الكود لتظبيط ال CSS
قم بالبحث عن </b:skin>
 وقم  بإدراج هذا الكود قبله مباشرة 

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

الآن احفظ القالب واذهب الى لوحة التحكم ثم التصميم ثم عناصر الصفحة .. ستجد أن ال 3 أعمدة تم إدراجهم في القالب .
ملحوظة هامة :  شكل الأعمدة يعتمد على شكل قالبك الخاص .
تم بحمد الله .. تحياتي أخوكم : باسم

إضافة " إقرأ المزيد " مع المصغرات للبلوجر مع مجموعة رائعة لصور " إقرأ المزيد "

إضافة " إقرأ المزيد " مع المصغرات  للبلوجر مع مجموعة رائعة لصور " إقرأ المزيد " . زواري الكرام ما وضعت هذا الموضوع لكي أوضح هذه الخاصية لان كثيرا منا يعرف الطريقة وقد شرحها الكثير والكثير من أساتذتنا في علم البلوجر ومنهم الأستاذ ذؤيب . الذي تعلمت منه الكثير والكثير . ولكني وضعت الموضوع لكي أسرد لكم بعض أشكال كلمة إقرأ المزيد " Read More " .
مبدئيا لمن لم يضف خاصية إقرأ المزيد عنده لابد من إضافتها باتباع الآتي
1. الدخول الى لوحة التحكم ثم الى التخطيط ثم الى تحرير ال HTML ثم قم بتوسيع القالب .
2. لا تنسى أخذ نسخة أحتياطية من القالب أولا .
3. أبحث عن كلمة </head> ثم أضف هذا الكود قبلها " فوقها " مباشرة .

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

ثم بعد ذلك ابحث عن <data:post.body/> وقم باستبدالها بهذا الكود

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

 وقم بتغيير http://i37.tinypic.com/351icqx.jpg برابط الصورة التي تختارها أنت
واليك مجموعة من روابط الصور وبجوارها شكل الصور .. كل ما عليك هو تغيير رابط الصورة ووضعه مكان رابط الصورة السابق باللون الأحمر 

http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/black.png
http://i643.photobucket.com/albums/uu153/nirav07/black1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue.png
http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif
http://i643.photobucket.com/albums/uu153/nirav07/bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/brown.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif
http://i643.photobucket.com/albums/uu153/nirav07/green.png
http://i643.photobucket.com/albums/uu153/nirav07/green1.gif
http://i643.photobucket.com/albums/uu153/nirav07/greenish.png
http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/grey.png
http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif
http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png
http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/orange.png
http://i643.photobucket.com/albums/uu153/nirav07/original.gif
http://i643.photobucket.com/albums/uu153/nirav07/pink.png
http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/purple.png
http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red.png
http://i643.photobucket.com/albums/uu153/nirav07/red1.gif

واليك مجموعة من صور إقرأ المزيد في ملف مضغوط . كل ما عليك هو رفع الصورة ووضعه مكان رابط الصورة السابق باللون الأحمر .
حمل من هنا
http://www.box.net/shared/ug0kgvd0uq

تم بحمد الله .. أخوكم باسم

شرح إضافة زر " المفضلات الإجتماعية " كنص متحرك في جانب المدونة

إضافة متميزة لمدونتك . لتسهيل إضافة المواضيع الخاصة بالمدونة الى مواقع النشر الاجتماعية بسهولة عن طريق زوارك وأعضاء مدونتك . حيث هناك عدة طرق لإضافة هذا الكود . حيث منه من في نهاية الموضوع ومنه من هو بجانب الموضوع ومتحرك مع المدونة
كالآتي :

1. ادخل إلى لوحة التحكم ثم الى التخطيط ثم تحرير ال HTML
2. قم بعمل نسخة احتياطية من القالب الخاص بيك .
3. قم بعمل بحث (CTRL+F) عن هذا الكود

]]></b:skin>

وقم بإستبداله بهذا الكود مباشرة

#share_scroller {
left:0;
position:fixed;
top:700px;
}
#share_button {
left:0;
position:fixed;
top:700px;
width:80px;
}
#shares {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-topleft:3px;
background-color:#CCCCFF;
border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;
border-style:solid;
border-width:1px;
bottom:100px;
margin-top:10px;
position:fixed;
width:63px;
}
#shares .SMVote {margin:7px}
div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}
/* FB button (shrink width) */
.fb_share_count_top {width:48px!important}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}
]]></b:skin>

ثم قم بعمل بحث عن

<body>

ثم قم بوضع هذا الكود تحته مباشرة

<div id='share_scroller'>
<div id='share_button'>
<div id='shares'>
<div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='DiggThisButton'/><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>
        <div class='SMGap'/>
<div class='SMVote'><script src='http://www.reddit.com/button.js?t=2' type='text/javascript'/></div>
     <div class='SMGap'/>
<div class='SMVote'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><script src='http://nirav07.110mb.com/blogger.php' type='text/javascript'/></div>
</div>
</div>

ثم احفظ القالب .
تم بحمد الله

شرح إضافة زر " Delicious Bookmark " لمدونات بلوجر

شرح إضافة زر " Delicious Bookmark " لمدونات بلوجر . أداة رائعة تساعد زوار مدونتك على نشر المواضيع في مفضلاتهم الإجتماعية بسهولة . فهي تشبه تمام زر " Tweet Me " وزر الخاص بالفيسبوك . وقد قام المبرمجين بهذه الإضافة الرائعة حتى أستطاعوا تطويرها للبلوجر .
ولمعرفة كيفية تركيب هذه الإضافة فضلا أتبع الآتي
ادخل إلى لوحة التحكم ثم إلى التخطيط ثم الى تحرير ال HTML وقم بتوسيع القالب
وقم بأخذ نسخة أحتياطية من القالب أولا .
ثم ابحث عن

]]></b:skin>

 وقم بوضع هذا الكود قبله مباشرة 

.share-delicious{
width:50px;
height:63px;
text-align:center;
}

.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ZKWt2MCMYszvBt8aDUkHRgH0EN8EnBEQzp4D6X4fpGy6BgWMaS0v99kinOE2Tp8bSK2bBz2E-2fZyNl9A3CEeDKIwz3_mySvU9QPRwHTOQPa6qNzoR0pnRSIKFG41vJloYZUANIC-3w/s1600/del+above.png) no-repeat;
font-weight: bold;
font-size: 16px;
font-family:arial;
color:#adadad;
margin:0 auto;
line-height:36px;
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvosFYPoqJkjxJFp8ElTGo_dVSajGG3D5cB2me7war-4NK-K9RLAC0QzJnCve0_27DuQEBit4BbFIAW_A9-miljqC9jmnYs7ShWTZaBQl8Vs8RayuBZevbP63ljX56EFghPTLdpaA2MyI/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvosFYPoqJkjxJFp8ElTGo_dVSajGG3D5cB2me7war-4NK-K9RLAC0QzJnCve0_27DuQEBit4BbFIAW_A9-miljqC9jmnYs7ShWTZaBQl8Vs8RayuBZevbP63ljX56EFghPTLdpaA2MyI/s1600/del+new.png) no-repeat center -17px;
display: block;
}

 ثم ابحث عن


    <data:post.body/>


وقم بوضع هذا الكود قبله مباشرة " أي فوقه "

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='blank'>delicious</a></div>
<script type='text/javascript'>
function delic(info) {
if(!info[0]) return;
var num = info[0].total_posts;
if(!num) return;
var delic = document.getElementById(&#39;delic&#39;);
delic.innerHTML = &#39;&#39; + num;
delic.style.textIndent = 0;
delic.style.paddingRight= &#39;6px&#39;;
}
</script>
<script expr:src='&quot;http://badges.del.icio.us/feeds/json/url/data?url= &quot; + data:post.url + &quot;&amp;callback=delic&quot;'/>
</div>

</b:if>

<div class='clear'/>

ثم احفظ القالب
 تم بحمد الله .. لا نرجو غير دعوة صالحة بظهر الغيب

شرح عمل تحديث " Refresh " للمدونة أتوماتيكيا

شرح عمل تحديث " Refresh " للمدونة أتوماتيكيا . درس سهل وبسيط جدا . حيث أهميته تكمن في جعل زائرك يعرف جديد مدونتك كل لحظة . حيث ستكنك هذه الخاصية من عمل تحديث لمدونتك أتوماتيكيا . ولن يكون الزائر بحاجة الى عمل تحديث " Refresh " للمدونة
أو أي شيء من هذا القبيل.
ولإضافة هذه الخاصية لمدونتك اتبع الآتي
أولا الدخول الى لوحة التحكم >> ثم الى التخطيط >> ثم تحرير ال HTML
ثم بعد ذلك : خطوة مهمة قم بعمل نسخة باك أب للقالب " أي احتفظ بنسخة من القالب "
1. قم بتوسيع القالب
2. قم بعمل بحث عن  

<head> 

3. ثم أضف فوقه مباشره هذا الكود

<meta HTTP-EQUIV='refresh' content='15;URL=http://elbasem.blogspot.com'/> 

مع تغيير اسم elbasem باسم مدونتك
 4. قم بعمل حفظ للقالب 
تم بحمد الله .. أي إستفسارات يرجى وضعها بالتعليقات 
أخوكم باسم
مدونة الباسم 

شرح إضافة خلاصة التصنيفات بجانب أقسام المدونة

درسنا اليوم بإذن الله شرح إضافة خلاصة التصنيفات أو الأقسام بجانب التصنيف في المدونة .. فهي إضافة رائعة تمكن زائرك من متابعة خلاصة مواضيعك من خلال التصنيفات الخاصة بها .. ولتركيب هذه الإضافة في مدونتك فضلا اتبع الآتي

أولا : أخذ نسخة إحتياطية من القالب 

ثانيا : ادخل الى لوحة التحكم .. ثم الى التخطيط .. ثم الى تحرير HTML
.. ثم قم بعمل توسيع للقالب

أكيد انت طبعا عملت كل ده إذن فاستعد لتركيب الإضافة في مدونتك 

1. ابحث عن هذا الكود

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

وقم بتحديده
ثم الصق هذا الكود مكانه

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

والآن مبارك الإضافة قم بعمل حفظ للقالب وشوف النتيجة
ملحوظة هامة
من الممكن أن يكون شكل الإضافة في التصنيفات هكذا

ولتعديل الإضافة الى هذا الشكل

قم بلصق هذا الكود مكان الكود السابق

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

</li>
</b:loop>

وقم بعمل حفظ للقالب
تم بحمد الله
تحياتي أخوكم باسم
المصدر : مدونة الباسم

شرح فتح الرابط في نافذة منبثقة

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

الخطوة الرابعة اضغط ctrl +f للبحث ثم ابحث عن الكود التالي

هذا هو الكود
<head>

الخطوة الخامسة نضيف الكود  التالي تحت الكود الذي بحثنا عنه

هذا هو الكود

<base target='_blank'/>

الخطوة الاخيرة قم بحفظ القالب ونكون انهينا العمل

لاتنسى اذا اعجبك الموضوع ان تترك تعليقك

هاك عدد المواضيع والتعليقات للبلوجر

هذه إضافة خفيفة ، تعرض عدد المواضيع وعدد التعليقات بمدونات بلوجر (بلوغر) ، و تعتمد في ذلك على خلاصة المدونة . لتنصيبها اذهب الى ( لوحة تحكم مدونتك ) ثم انتقل إلى ( صفحة التخطيط ) ثم ( عناصر الصفحة ) ثم ( اضافة اداة ) واختر الاداة هذه من القائمة ( أداة Html/Javascript ) لاضافة العداد في مدونتك وضع فيها الكود الذي تجده في آخر الموضوع مع إدراج رابط مدونتك بدل الرابط المشار إليه باللون الاحمر ، و إن أحببت أضف عنوانا ليكن مثلا ( ارقام او احصائيات المدونة ) ثم اضغط زر الحفظ . كما يمكنك معاينة الإضافة على مدونتي .

1

2

   ثم اضف هذا الكود

<script style="text/javascript">
function numberOfPosts(json) {
document.write('عدد المواضيع: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('عدد التعليقات: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://elbasem.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>

<script src="http://3rab-bloggers.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>
 

 لا تنسى تغيير رابط مدونتي برابط مدونتك