إضافة قائمة أزرار تابعني علي الفيس وتويتر و جوجل بلس

السلام عليكم ورحمة الله وبركاته في هذا الدرس سوف نتعلم إضافة قائمة مميزة لأزرار تابعني علي الفيس بوك وتويتر وجوجل بلس والخلاصات كل هذه الازرار في قائمة واحدة للتسهيل علي الزوار في متابعة مدونتك بصورة دورية. ولاضافة هذه القائمة اتبع الاتي
1- الذهاب الي لوحة تحكم مدونتك من هنا
2- ثم نذهب الي قالب ثم تحرير html ثم نضع علامة صح لتوسيع الادوات
3- ثم نقوم بالبحث عن هذا الكود ]]></b:skin>
4-ثم نضع هذا الكود قبله مباشرة

/* The CSS Code for the menu starts here */
div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{
background: none;border: none;margin: 0;padding: 0;}

div#socialbox{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:300px;}

div#socialbox ul{
background: url() repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
list-style: none;
margin: 0 !important;
padding: 0;}
    
div#socialbox ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 59px;
list-style: none;}
    
div#socialbox ul li:last-child{
border-bottom: none;}
        
div#socialbox ul li p{
padding: 19px 9px 0 9px;}
        
div#socialbox ul li p img{
border: none;
margin-right: 10px;
position: relative;
top: 3px;
vertical-align: baseline;}
            
div#socialbox ul li p span{
color: #425763;
font-weight: bold;}
                
div#socialbox ul li p a.socialbox-button{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMm0IohnB2NBOeor69GABKmKUx1hX4sXEoshxOlnE5VPKGLX-i_Nne8dfH6pOHJEot2IAFK9YklOKJe7uIzG2pqXLiJgp_dJSb-BObI0M6t4oddSxbfF2lgcRzG17JilUM5Ov0LBq32Q/s1600/bloggertrix-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -2px;}
                
div#socialbox ul li p a.socialbox-button:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMm0IohnB2NBOeor69GABKmKUx1hX4sXEoshxOlnE5VPKGLX-i_Nne8dfH6pOHJEot2IAFK9YklOKJe7uIzG2pqXLiJgp_dJSb-BObI0M6t4oddSxbfF2lgcRzG17JilUM5Ov0LBq32Q/s1600/bloggertrix-button.png) 0 -27px no-repeat;}
                
div#socialbox ul li p a.socialbox-button:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMm0IohnB2NBOeor69GABKmKUx1hX4sXEoshxOlnE5VPKGLX-i_Nne8dfH6pOHJEot2IAFK9YklOKJe7uIzG2pqXLiJgp_dJSb-BObI0M6t4oddSxbfF2lgcRzG17JilUM5Ov0LBq32Q/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

5- نذهب إلي تخطيط ونضيف أداة html ثم نضع بها هذا الكود

<br />
<div id="socialbox">
<ul>
<li><a href="ضع هنا رابط صفحتك علي الفيس بوك" target="_blank" title="Like on Facebook"><img alt="Facebook" src="http://up13.up-images.com/up/viewimages/885d545a51.png" /></a>2,563 معجب علي الفيس بوك                                                                      
<a class="socialbox-button" href="ضع هنا رابط صفحتك علي الفيس بوك" target="_blank" title="Like on Facebook">Like</a><br />

</li>
<li><a href="ضع هنا رابط صفحتك علي تويتر" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="http://up13.up-images.com/up/viewimages/b709a02e70.png" /></a>5,365 متابع علي تويتر                                                                        
<a class="socialbox-button" href="ضع هنا رابط صفحتك علي تويتر" target="_blank" title="Follow on Twitter">Follow</a>
</li>
<li><a href="ضع هنا رابط الخلاصات" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://up13.up-images.com/up/viewimages/a6573ee119.png" /></a>1,094  متابع عبر الخلاصات                                                                      
<a class="socialbox-button" href="ضع هنا رابط الخلاصات" target="_blank" title="Subscribe to Feed">Subscribe</a>
</li>
<li><a href="ضع هنا رابط جوجل بلس" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://up13.up-images.com/up/viewimages/23960a6a19.png" /></a>1,151 متابع علي جوجل بلس
                                    
<a class="socialbox-button" href="ضع هنا رابط جوجل بلس" target="_blank" title="Subscribe to Feed">Follow</a>
</li>
</ul>
</div> 

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