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

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

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

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

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

<div class="widget-content">

<center>

<div class="metro-social">

<li><a class="fb" href="http://www.psf-foryou.tk"></a></li>

<li><a class="ot" href="http://www.psf-foryou.tk"></a></li>

<li><a class="tw" href="http://www.psf-foryou.tk"></a></li>

<li><a class="gp" href="http://www.psf-foryou.tk"></a></li>

<li><a class="ra" href="http://www.psf-foryou.tk"></a></li>

<li><a class="fd" href="http://www.psf-foryou.tk"></a></li>

<li><a class="ka" href="http://www.psf-foryou.tk"></a></li>

<li><a class="ma" href="http://www.psf-foryou.tk"></a></li>

<li><a class="id" href="http://www.psf-foryou.tk"></a></li>

<li><a class="do" href="http://www.psf-foryou.tk"></a></li>

<li><a class="ca" href="http://www.psf-foryou.tk"></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.psf-foryou.tk

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>

<div class="clear">

</div>

تخصيص الاضافه

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

وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق.

هل أعجبك الموضوع ؟

Share

Tweet