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

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

  بلوجروتزيدها احترافيه

لن أطيل عليكم
مثال  لإضافة

 

 

1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي 

<div class="widget-content">
<center>
<div class="metro-social">
<li><a class="fb" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="ot" href="http://www.4thepf.com"></a></li>
<li><a class="tw" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="gp" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="ra" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="fd" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="ka" href="hhttp://mrcteck.blogspot.com/"></a></li>
<li><a class="ma" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="id" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="do" href="http://mrcteck.blogspot.com/"></a></li>
<li><a class="ca" href="http://mrcteck.blogspot.com/"></a></li>
<span style="font-size: x-small;"><a href="http://goo.gl/yytzj" rel="nofollow" target="_blank">أحصل عليها</a></span></div>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://www.4thepf.com
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.ot,.tw,.gp,.ra,.fd,.ka,.ma,.id,.do,.ca{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(http://im41.gulfup.com/e1RBM.png) no-repeat center center #66FF33;width:140px;height:90px}
.metro-social .ot{background:url(http://im38.gulfup.com/fPfve.png) no-repeat center center #1f69b3;width:140px;height:45px}
.metro-social .tw{background:url(http://im42.gulfup.com/zeHmr.png) no-repeat center center #43b3e5;width:140px;height:45px}
.metro-social .gp{background:url(http://im31.gulfup.com/GwJEq.png) no-repeat center center #da4a38;width:140px;height:45px}
.metro-social .ra{background:url(http://im34.gulfup.com/Bwbp0.png) no-repeat center center #CC99FF;width:140px;height:45px}
.metro-social .fd{background:url(http://im38.gulfup.com/A9CWY.png) no-repeat center center #FF6699;width:280px;height:45px}
.metro-social .ka{background:url(http://im33.gulfup.com/H3tQX.png) no-repeat center center #9933FF;width:140px;height:45px}
.metro-social .ma{background:url(http://im39.gulfup.com/1tPgi.png) no-repeat center center #0099CC;width:140px;height:45px}
.metro-social .id{background:url(http://im38.gulfup.com/2NkuC.png) no-repeat center center #303030;width:280px;height:45px}
.metro-social .do{background:url(http://im42.gulfup.com/G5gZd.png) no-repeat center center #993333;width:140px;height:45px}
.metro-social .ca{background:url(http://im36.gulfup.com/4o6Ub.png) no-repeat center center #FF3300;width:140px;height:45px}
.metro-social li:hover .fb{background:url(http://im31.gulfup.com/Xn4vG.png) no-repeat center center #1f69b3}
.metro-social li:hover
.ot{background:url(http://im36.gulfup.com/4RTQz.png) no-repeat center center #993399}
.metro-social li:hover
.tw{background:url(http://im37.gulfup.com/KA3M9.png) no-repeat center center #996600}
.metro-social li:hover .gp{background:url(http://im33.gulfup.com/ETtba.png) no-repeat center center #7E889A}
.metro-social li:hover
.ra{background:url(http://im36.gulfup.com/ndfAr.png) no-repeat center center #0000FF}
.metro-social li:hover
 .fd{background:url(http://im34.gulfup.com/9JgL6.png) no-repeat center center #e9a01c}
.metro-social li:hover
.ka{background:url(http://im40.gulfup.com/Y7N5K.png) no-repeat center center #A3A300}
.metro-social li:hover
.ma{background:url(http://im32.gulfup.com/s2RHK.png) no-repeat center center #339933}
.metro-social li:hover
.fr{background:url(http://im36.gulfup.com/qziDp.png) no-repeat center center #848382}
.metro-social li:hover
</style>
<br></center>
</div>

 

  استبدل روابطي بروابط أقسام المدونتك