أزرار المواقع الاجتماعية بشكل أنيق

لاشك ان المواقع الاجتماعية تلعب دورا كبيرا في نشر محتوي مدونتك
وتخفيض ترتيب موقعك عالميا اليوم ان شاء الله سوف أشرح لكم طريقة اضافة هذه الاضافة الرائعة جدا وهي أزرار المواقع الاجتماعية بشكل أنيق جدا هذه الاضافة تحمل بين طياتها
facebook - twitter - google plus - pinterest - rss feedds هناك العديد من المواقع الاخري ولكني أخترت لكم هذه المواقع الأن زوارها كثيرون جدا لن أطيل عليكم اكثر تابعو الشرح .

طريقة التركيب

من لوحة بلوجر >> تخطيط >> اضافة آداة نختارHTML/JavaScript ونضع بها الكود التالي

<div id="mbl-social-hover"> <div class="tota2"><img src="" /></div> <div id="links"><a href="http://twitter.com/moutavaele" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGx2IJ2h0v8FhxlaKBeo_r-B9aqTZlH25yzvW3irmzTz8mytcPasrOqDD3jHqAMIA1JYOl2nKS7RYJqKC-W0OkbFeNSAZ81kECtssoTMpiH-wqq2i01lUpAEhFrkFX-lwzcso5Jz6RegQ/s1600/twitter.png" /></div></a> <a href="http://www.facebook.com/cnmotvaele" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEkS0xjkwjepVhV8OtFO23mnN29DszPp2392qitsSRR0tY2ndf5ZCsTdLqLZoBo3O19c_9nWLREZmQiRUL-I3GIPbc1VcaUkMwqirJ-cXMOtkhPn35JZvOlZlDrdicUptwR6eKUPPVxb0/s1600/FB.png" /></div></a> <a href="https://plus.google.com/u/0/111631038678757507895" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhfmOeXJH0B_J8nbm4Uvn26RtQZRscxSPeFWG9twHIVIu1xg24WjmSViWCRkV-nlfVzKdnL65___VHhilvepPEZLsMjsXtXHc5AvA_L0UpoTfiDtt5mn0aDcDOmf1_4Jh_TD299B4eSbU/s1600/google.png" /></div></a> <a href="http://pinterest.com/cnmoavaele/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ5K_U2g9M63RvrCVguWAsiLOvqBJn_rBWmmF9nY5ga9zTGtEw8yGnDxUjfvPlD00MG_BgZ09-kbsAriYNfkpYQ5ToF7N8qYpNuqC801RQFBTXb9u2voU9GivE8JdeYIdb97FAlb60E4o/s1600/pin.png" /></div></a> <a href="http://feeds.feedburner.com/cnmot" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWaTgbEAoiXlPR6ANfr3RB5qyiN2nDsQ1TMt3uzvrIRBAvLyti46vjS3Nhm0hZTlS91y9Pji5GX9T-dqXFa5PnL3vIbMr2-OB6Bs4GPmGYGpuaU9POYjDvDVJScIaspE-2OcrZWCGtB8Q/s1600/rss.png" /></div></a> </div></div> <style>.tota2 { margin-left:15px; margin-top:0px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:215px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GsdCIIWCRph6-NIOOT30kfrNpSqlBy1kbSPvfzL4bsgXeiaI6xH01ccAW3InCTQzsM6GzXJMWLt5XnctIyGxr4AZMCRqUAtwMBZX-C1wauh20f6_MtU1r82KsKpPD0be050YLLh1vFM/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>

تغيرات بسيطة علي الكود نبحث عن

moutavaele: غيره با اسم حسابك علي التويتر

cnmotvaele: وغيره برلبط صفحتك علي الفيسبوك

111631038678757507895: وغيره يا المعرف الخاص بك علي جوجل بلس

cnmoavaele: غيره برابط صفحتك علي pinterest

cnmot:غيره برابط حسابك علي فيدبورنر

وأضغط حفظ ومبروك عليك الاضافة الأنيــــــــــــــــــــــــــــــــــــــقة

كن متفائل