إدراج أيقونات المفضلة تحت مواضيع المدونة في بلوجر Social Bookmark

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

القاعدة الذهبية :
قبل تعديل القالب ، من الضروري حفظ نسخة احتياطية منه لاستعادتها عند الضرورة !
أولا : كالعادة من لوح تحكم المدونة نضغط " التخطيط " ثم " تحرير Html " و نؤشر على خانة توسيع القالب .
ثم نبحث عن هذا الكود

]]></b:skin>

ثم مباشرة فوقه نضع كود css هذا

.bookmark{
padding:0px;
margin-top:15px;
background:#ddd;
}
.bookmark a:hover {
position: relative;
top: 1px;
left: 1px;
}
.bookmark img { border: 0;
padding:0px;
margin-top:15px;
}

ثم مباشرة فوق

</head>

نضع هذا الكود

<script type='text/javascript'>

//<![CDATA[
// Beautiful Beta Javascript Library
// -------------------------------------------
// Version: 1.04
// Date: 2006-12-21
// Website: http://beautifulbeta.blogspot.com
// -------------------------------------------

function showsbtext(id,index) {
var bookmarktext=document.getElementById(id);
var sbValues= new Array();
sbValues[0] = 'أضف الموضوع إلى مفضلتك';
sbValues[1] = 'أضف إلى <strong>Digg</strong>';
sbValues[2] = 'أضف إلى <strong>Delicious</strong>';
sbValues[3] = 'أضف إلى <strong>Blinklist</strong>';
sbValues[4] = 'أضف إلى <strong>Yahoo Web</strong>';
sbValues[5] = 'أضف إلى <strong>Netvouz</strong>';
sbValues[6] = 'أضف إلى <strong>Ma.gnolia</strong>';
sbValues[7] = 'أضف إلى <strong>Fark</strong>';
sbValues[8] = 'أضف إلى <strong>Furl</strong>';
sbValues[9] = 'أضف إلى <strong>Technorati</strong>';
sbValues[10] = 'أضف إلى <strong>Simpy</strong>';
sbValues[11] = 'أضف إلى <strong>Spurl</strong>';
sbValues[12] = 'أضف إلى <strong>Newsvine</strong>';
sbValues[13] = 'أضف إلى <strong>Blinkbits</strong>';
sbValues[14] = 'أضف إلى <strong>Smarkings</strong>';
sbValues[15] = 'أضف إلى <strong>Segnalo</strong>';
sbValues[16] = 'أضف إلى <strong>De.lirio.us</strong>';
sbValues[17] = 'أضف إلى <strong>Reddit</strong>';
sbValues[18] = 'أضف إلى <strong>Wists</strong>';
sbValues[19] = 'أضف إلى <strong>Google</strong>';
sbValues[20] = 'أضف إلى <strong>Stumbleupon</strong>';
document.getElementById(bookmarktext.id).innerHTML = sbValues[index];
}

function getPostTitle(fullpath) {
var splitinput = fullpath.split("/");
var lastpart = splitinput[5];
var linktext = lastpart.split(".html");
var postlink = fullpath.split("#");
var outputstring = linktext[0].replace(/-/g," ");
outputstring = "\"" + outputstring + "\"";
outputstring = outputstring.link(postlink[0]);
document.write(outputstring);
return;
}

function getCommentLink(clink) {
var splitinput = clink.split("#");
var commentlink = splitinput[0];
commentlink = commentlink.concat("#comment-",splitinput[1]);
var outputstring = "(more)";
outputstring= outputstring.link(commentlink);
document.write(outputstring);
}

function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
var comment = entry.content.$t;
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');
if (showposttitle == true) document.write(' on ' + posttitle);
document.write(':<br/>');
if (comment.length < numchars)
document.write('<i>' + comment + '</i><br/><br/>');
else
document.write('<i>'+ comment.substring(0, numchars) + '...</i><br/><br/>');
}
<br/>
document.write('<span >Widget by <a href="http://hackosphere.blogspot.com">Hackosphere</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span><br/><br/>');
}

//]]>
</script>

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

<div class='post-footer-line post-footer-line-1'>

و قد تجده على هذا الشكل كذلك

<p class='post-footer-line post-footer-line-1'>

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

<span class='bookmark'>
<table align='left' border='0' cellpadding='0' width='100%'>
<tr>
<td style='vertical-align:middle' valign='middle' width='25%'>
<div expr:id='&quot;sbtxt&quot;+data:post.id'>أضف الموضوع إلى مفضلتك :</div><script
type='text/javascript'>showsbtext(&quot;sbtxt&quot; +
&quot;<data:post.id/>&quot;,0)</script>
</td>
<td>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url
+ &quot;&amp;title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,20);&quot;' rel='nofollow' target='_blank'><img
alt='StumpleUpon' src='http://files.bloggerplugins.org/icon_sb_stumb.gif'/></a>
<a expr:href='&quot;http://ma.gnolia.com/bookmarklet/add?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,6);&quot;' rel='nofollow' target='_blank'><img alt='Ma.gnolia'
border='0' src='http://home.kpn.nl/oosti468/images/icon_sb_mag.gif'/></a>
<a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; +
data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; +
data:post.id + &quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank'><img alt='DiggIt!'
src='http://home.kpn.nl/oosti468/images/icon_sb_dig.gif'/></a> <a
expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url +
&quot;&amp;title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank'><img alt='Del.icio.us'
src='http://home.kpn.nl/oosti468/images/icon_sb_del.gif'/></a> <a
expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot;
+ data:post.url + &quot;&amp;Title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank'><img alt='Blinklist'
src='http://home.kpn.nl/oosti468/images/icon_sb_bli.gif'/></a> <a
expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; +
data:post.url + &quot;&amp;=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank'><img alt='Yahoo'
src='http://home.kpn.nl/oosti468/images/icon_sb_yah.gif'/></a> <a
expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url +
&quot;&amp;t=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank'><img alt='Furl'
src='http://home.kpn.nl/oosti468/images/icon_sb_fur.gif'/></a> <a
expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; +
data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; +
data:post.id + &quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank'><img alt='Technorati'
src='http://home.kpn.nl/oosti468/images/icon_sb_tec.gif'/></a> <a
expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,10);&quot;' rel='nofollow' target='_blank'><img alt='Simpy'
src='http://home.kpn.nl/oosti468/images/icon_sb_sim.gif'/></a> <a
expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url +
&quot;&amp;title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank'><img alt='Spurl'
src='http://home.kpn.nl/oosti468/images/icon_sb_spu.gif'/></a> <a
expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url +
&quot;&amp;title=&quot; + data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,17);&quot;' rel='nofollow' target='_blank'><img alt='Reddit'
src='http://home.kpn.nl/oosti468/images/icon_sb_red.gif'/></a> <a
expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; +
data:post.url + &quot;&amp;title=&quot;+data:post.title'
expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id +
&quot;\&quot;,0);&quot;'
expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id
+ &quot;\&quot;,19);&quot;' rel='nofollow' target='_blank'><img alt='Google'
src='http://home.kpn.nl/oosti468/images/icon_sb_goo.gif'/></a>
</td>
</tr>
</table>
</span>

و أخيرا احفظ القالب و مبروك عليك !
روابط ذات صلة :
هاك مقدم من طرف Beautifulbeta
موضوع الاقتباس Blogspottutorial
تم تعريب محتويات الكود للمدونات العربية .