طريقة تركيب أزرار المتابعة داخل الهيدر بطريقة سهلة جداً

بسم الله الرحمن الرحيم

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

أول خطوة وهو الذهاب إلى محرر بلوجر وسنبحث عن هذا الوسم ]]></b:skin> وسنضع الكود التالى قبلة

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

 الخطوة الثانية - إبحث عن هذا 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

وفوقة مباشرة ضع الكود التالى

<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/mdwanblog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26V5ZP4Q4OLYi_GfXDwvQvRd_Kvtrl3_CSbWmnXEIG1fyjeL_NeP4NkoXqs_orqgzRzBk7Zse1uktdrHZbqruueSFYJCL5Z1WA59-yEchgLhVtPq22O5nyO4r8mWns9F1gj76NA2zXCI/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/mdwan-blogger'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMJlXqSZb3xoU94057r1Hoh3q92QYRb4FAYLKIuVdDh9I3vlJDdpnCcGefN9vslF6M0OpbWCvnXgVVuj-njg5-WAYHFZMWdo0cxbjmashrqLtTN1CYCJAlNttpOqHw0Bqm1qp6TuvWTs/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/googleplus/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWbja_KLdW5YNISHPMsbsldBAY02CyPZc05Id_1lJoaE0gPhwvrCw3Q-ZY2c2pNX1erJvSxAjzYCWlCSLUlZQj0OKWMYrPdeNGcWtIRsE9KrK1cDmgdhw9KtNvywPFxqZ6e9uWSEr8jk/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://name-of-rss/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb95QHSCNiJHEH5huWfdQM9lk1Ua8rB17FxeOYbuo0XrFp_umm293YYa512m3kNUwvAJ8QabeY8uQwD3docdKXj9UsIHIe8QodrtNr2AQXfOtgSNYBnCklH_isn4vWB4UneoYPLYUWgg/s1600/RSS.png'/></a></li>
</ul></div>

 أتمنى الإستفادة للجميع 

منشورة في: أزرار|Buttons, اضافات بلوجر