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

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

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

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

كيفية اضافة هذه القطعه الى مدوناتكم

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

<div class="widget-content"> <center> <div class="metro-social"> <li><a class="fb" href="http://www.4thepf.com"></a></li> <li><a class="ot" href="http://www.4thepf.com"></a></li> <li><a class="tw" href="http://www.4thepf.com"></a></li> <li><a class="gp" href="http://www.4thepf.com"></a></li> <li><a class="ra" href="http://www.4thepf.com"></a></li> <li><a class="fd" href="http://www.4thepf.com"></a></li> <li><a class="ka" href="http://www.4thepf.com"></a></li> <li><a class="ma" href="http://www.4thepf.com"></a></li> <li><a class="id" href="http://www.4thepf.com"></a></li> <li><a class="do" href="http://www.4thepf.com"></a></li> <li><a class="ca" href="http://www.4thepf.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> <div class="clear"> </div>

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

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

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

 

 

منقول للفائدة 

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

بقلم أسامة بويردن

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

قسم : دروس بلوجر