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

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

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

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

شكل جديد إضافة أقسام المدونة بخاصية ميترو المحترف للمعلوميات http://www.4thepf.com

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

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- استبدل روابطي بروابط أقسام المدونتك

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

الموضوع من قسم:

bloger

ads

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