إضافة أيقونات المواقع الإجتماعية

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

لإضافتها اتبع الخطوات التالية :

1- اذهب الى لوحة التحكم تم اضغط على تخطيط

2- تم اضغط على اضافة أداة ، HTML/JavaScript

ثم الصق الكود التالي:

 

<div class="widget-content"> <a href="http://www.facebook.com/thepro.informatique"><div class="social"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLAcGq-L0sscducXG30_Frt_VwV7Egtv-q3DfKQRkt6cpCcxXvJ6LIgWu8Bf-GbsdB49nmDPcIWC7hcgT0fteAWvMDyXZejCbaFhPsjAMs2SlBN8rsmmsB7RCKWVzjf65BpiXbm9HQV1c/s1600/face.png" /> <b>6,000</b> <span>معجب على الفيس بوك</span> </div> </a> <a href="http://www.youtube.com/hakimsar"><div class="social"> <img src="http://i.imgur.com/fpVI8Rf.png" /> <b>300</b> <span>مشترك على القناة</span> </div> </a> <a href="http://www.twitter.com/thepro.info"><div class="social"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsMNYTX5m0aBmAW9aBtWZ3nymwOWBxMD3T2HOObmERaWtgq7mLYHXVgdhdAQ9BizVbiNuYD710qeMLE1WyhtwpRzUTwbkGuxUfP4eo1EPqSaOlzXCVK9nS4Dr_ijBMJvby2ijMANIJRGU/s1600/twi.png" /> <b>3,000</b> <span>متابع على تويتر</span> </div> </a> <a href="http://feedburner.google.com/4thepro"><div class="social"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP63fybstAmGjfhHPWRxMo91JGGBCpgMEqA8ExxFRaY3euVAohppEZjH9_poMq4aABbK6OyY97O-KwzdV1LwWFBKVSWprtuRC7LVLvrGO9oBPdcX9aQKI7rozrPlW7RnAKn5A3LDU30O0/s1600/RSS.png" /> <b>5000</b> <span>مشاركة</span> </div> </a> <style> .social{ height:48px; text-align:right; margin: 6px 0;} .social:hover{opacity:0.7;} .social img{float:right;border-radius: 51px;} .social b{ float:right; padding-left:10px; padding-right:16px; font:19px Arial, Helvetica, sans-serif; font-weight:bold; color:#575757; line-height:47px; } .social span{ float:right; padding-left:10px; font:12px Tahoma, Geneva, sans-serif; color:#9f9d9d; line-height:47px; } </style> </div>

لا تنسو يا إخوان روابطي بروابطكم 
أتمنى إن تعجبكم الإضافة

إقرأ المزيـــد

إضافة شريط دائري إلى سطح المكتب في ويندوز عبر برامج ” Dock”

يتوفر لنظام ويندوز العديد من أشرطة البرامج أو التي تُعرف بالـ “Dock” المُستوحاة من نظام ماك، ولكن هذه الأشرطة غالباً ماتحاول محاكاة تصميم شريط البرامج الموجود في نظام ماك.

إضافة شريط  دائري إلى سطح المكتب في ويندوز عبر برامج ” Dock”

إلا أن برنامج “Circle Dock” المجاني لنظام ويندوز، يُغيّر هذا المفهوم من خلال تقديمه شريط برامج ولكن بشكل دائري وتفاعلي على سطح المكتب.

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

إقرأ المزيـــد

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

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

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

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

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

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

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

 

 

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

إقرأ المزيـــد

اكسب أكثر من 2500 باك لينك لموقعك أو مدونتك

بسم الله الرحمن الرحيم , والصلاة والسلام على أشرف المرسلين , سيدنا محمد امام المتقين , وسيد العالمين , أما بعد , أحبائي في الله السلام عليكم ورحمة الله وبركاته , مرحبا بكم من جديد , وتدوينتنا اليوم هي عبارة عن شرح غضافة موقعك أو مدونتك الى أكثر من 2500 موقع لكسب المزيد من الباك لينكس , والباك لينكس هي عدد الروابط التي تشير الى مدونتك في مواقع الويب الأخرى , وكلما كانت هذه الروابط في مواقع ذات باك لينك عالي يؤدي الى ثقة محرك بحث جوجل اليك , وتدخل كنتيجة بحث أول في جوجل , ويعطيك بيج رانك عالي إن شاء الله , ونأتي لشرح الدرس , .. أولا ادخل الى هذا الموقع وتابع الشرح بالصور
ملحوظة : للدخول الى الموقع من هنا .

إقرأ المزيـــد