أكواد Template تومبيلايت تعديل جميل جدا لمشاركة مواضيع منتتداك فى facebook،digg والمزيد

اقدم اليكم تعديل بسيط جدا ولكن جميل ..عبارة عن
اضافة اسفل مواضيع وردود منتداك ..لمشاركة المواضيع فى المواقع المشهورة
Facebook
diGG
delicious
StumbleUpon
تظهر هذه (مشاركة الموضوع فى)
بمجرد وضع الماوس على الصورة
اليكم مثال::

اليكم شرح لعمل هذا التعديل
اولا ندخل الى ...
لوحة الادارة _مظهر المنتدى _التومبيلايت والقوالب
ونضغط تعديل لقالب VIewTopic_body
,ونبحث عن

الرمز:
<div>{postrow.displayed.MESSAGE}</div>

او نبحث عن
الرمز:
{postrow.displayed.MESSAGE}


ونضيف اسفلها هذا الكود
ضع رد لكي يظهر لك الكود
الرمز:
<br><br>


<div id="lkbtn_1.1971322.17637444" class="hima_buttons">
<ul class="hima_links" style="visibility: visible;">
<li class="hima_share">
<img border="0" src="https://i.servimg.com/u/f48/12/78/95/70/icon_s10.gif">
</a>
<ul class="hima_share_body">
<li class="share_header">مشاركة هذا الرد في </li>
<li class="right">
<img height="18px" width="18px" alt="" src="https://i.servimg.com/u/f48/12/78/95/70/digg10.gif">
<div
id="ati_digg" class="at_item" onclick="return addthis_sendto('digg');"
onmouseout="_atw.hov(this)" onmouseover="_atw.hov(this)">
<span class="at15t at15t_digg">Digg</span>
</div></a>
</li>
<li class="left">
<img height="18px" width="18px" alt="" src="https://i.servimg.com/u/f48/12/78/95/70/delici10.gif">
<div
id="ati_delicious" class="at_item" onclick="return
addthis_sendto('delicious');" onmouseout="_atw.hov(this)"
onmouseover="_atw.hov(this)">
<span class="at15t at15t_delicious">Delicious</span>
</div></a>
</li>
<li class="right">
<img height="30px" width="30px" alt="" src="http://cdn.stumble-upon.com/i/bg/logo_su.png">
<div
id="ati_stumbleupon" class="at_item" onclick="return
addthis_sendto('stumbleupon');" onmouseout="_atw.hov(this)"
onmouseover="_atw.hov(this)">
<span class="at15t at15t_stumbleupon">StumbleUpon</span>
</div></a>
</li>
<li class="left">
<img height="16px" width="16px" alt="" src="http://static.ak.fbcdn.net/rsrc.php/yC/r/xTje5Xisi1_.ico">
<div
id="ati_facebook" class="at_item" onclick="return
addthis_sendto('facebook');" onmouseout="_atw.hov(this)"
onmouseover="_atw.hov(this)">
<span class="at15t at15t_facebook">Facebook</span>
</div></a>
</li>
</ul>
</li>


ونسجل وننشر التعديل
ونذهل الى ورقية تصميم css
من مظهر المنتدى _الوان
ونضع هذا الكود فى بداية الحقل

الرمز:


.hima_buttons {
clear: both;
font-family: tahoma;
font-size: 11px;
margin: 10px 0;
position: relative;
}
.hima_buttons .hima_links {
margin: 0;
padding: 10px;
visibility: hidden;
width: auto;
}
.hima_buttons .hima_share, .hima_buttons .hima_like, .hima_buttons .seperator {
display: inline-block;
float: right;
}

.hima_share_body {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 4px 7px;
background: none repeat scroll 0 0 #F7F7F7;
border: 1px solid #E0E0E0;
list-style: none inside none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
visibility: hidden;
width: 281px;
z-index: 999;
}
.hima_share:hover .hima_share_body {
visibility: visible;
}
.hima_share_body li {
border: medium none;
width: 140px;
}
.hima_share_body li:hover {
background: none repeat scroll 0 0 #FFEB90;
}
.hima_share_body li.share_header {
-moz-border-radius: 5px 5px 0 0;
background: none repeat scroll 0 0 #DDDDDD;
font-size: 120%;
margin-bottom: 3px;
padding: 3px 5px;
width: 270px;
}
.hima_share_body li.header:hover {
background: none repeat scroll 0 0 #DDDDDD;
}
.hima_share_body li.left {
border-right: 1px solid #E0E0E0;
clear: left;
float: left;
}
.hima_share_body li.right {
clear: right;
float: right;
}
.hima_share_body li img {
float: left;
padding: 4px;
position: relative;
top: -2px;
}
.hima_share_body li > a {
color: #343434;
display: block;
padding: 4px;
text-decoration: none;
}



ثم نضغط قدم...ومبروك التعديل

كود رائع ننتظر جديدك
بتوفيق

شكرا اخى الكريم تقبل مرورى

شكرا لك كود مميز وطرح رائع