اضافة ازرار المواقع الاجتماعية بطريقة احترافية

السلام عليكم ورحمة الله وبركاته

اليوم حبيت اقدم لكم اضافة رائعة وانيقة وبسيطة لمدونات بلوجر اضافة ازرار المواقع الاجتماعية بشكل احترافي الصراحة شكل الازرار اكثر من رائع

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

1- نذهب الى لوحة تحكم المدونة  ثم الى التخطيط

2- ثم اضافة اداة HTML/Javascript جديدة ثم ضع الكود التالي داخل المستطيل واضغط على حفظ

<div class="abt-social-slide">

<ul>

<li><a class="facebook" href="###" target="_blank">فيس بوك</a></li>

<li><a class="twitter" href="###" target="_blank">تويتر</a></li>

<li><a class="google-p" href="###" target="_blank">جوجل بلس</a></li>

<li><a class="rss" href="###" target="_blank">خلاصات المواضيع</a></li>

</ul>

</div>

<style>

.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}

.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}

.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqy51ya7j6t8670Rw9doa0GBxMVr3HswgM3Y56DMs6uYFlIvCp58xhNOX2ToU_cNeDSU5uYOV_onjoPqdShEu6ZO5bvIdIfLaBIZfaVt4Dtgx4dfBU3uXzP1kL78R_KuWIZPLPRYMGUQ/s1600/facebook.png) no-repeat 0 -88px}

.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqy51ya7j6t8670Rw9doa0GBxMVr3HswgM3Y56DMs6uYFlIvCp58xhNOX2ToU_cNeDSU5uYOV_onjoPqdShEu6ZO5bvIdIfLaBIZfaVt4Dtgx4dfBU3uXzP1kL78R_KuWIZPLPRYMGUQ/s1600/facebook.png) no-repeat 0 0}

.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizOQc8ista9YFVyt0cx2Tdgur6SYHv3MtYlwp3KTiWwH7fkbyaEzmkhvNmWUZT9cNHRbjadSNULCu46Uvys19HAgp46FId46k5DnUDuEYHPVG_OOsOVHsOd53mG2_8RGjngU_54_tepg/s1600/twitter-1.png) no-repeat 0 -88px}

.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizOQc8ista9YFVyt0cx2Tdgur6SYHv3MtYlwp3KTiWwH7fkbyaEzmkhvNmWUZT9cNHRbjadSNULCu46Uvys19HAgp46FId46k5DnUDuEYHPVG_OOsOVHsOd53mG2_8RGjngU_54_tepg/s1600/twitter-1.png) no-repeat 0 0}

.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnooou_CEdxk_PdRPl11VEdgitwXN5rLhMnsRn4npUxJRORZvX0YduIbE4B9JyUnY4BDovYXDVZxvZ5oCyBUbptRH7mGH51qr7kM_nriVFpSpQEK1iMozN-rnUsGf-Y3oRbJMTnTomew/s1600/google.png) no-repeat 0 -88px}

.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnooou_CEdxk_PdRPl11VEdgitwXN5rLhMnsRn4npUxJRORZvX0YduIbE4B9JyUnY4BDovYXDVZxvZ5oCyBUbptRH7mGH51qr7kM_nriVFpSpQEK1iMozN-rnUsGf-Y3oRbJMTnTomew/s1600/google.png) no-repeat 0 0}

.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohmrhAOJjVyiCHk93GG6Qgw83gdnehNH8wyOPBBTWC-TlflXCaOGC1s2310a5_N1PdMm8VHI6rtUQDgrlbsaXxSlWChNFN8Xjca0E7leqjYtOsWZhoQd6G68EvYK5tJVy5Kjqe-S89g/s1600/twitter.png) no-repeat 0 -88px}

.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohmrhAOJjVyiCHk93GG6Qgw83gdnehNH8wyOPBBTWC-TlflXCaOGC1s2310a5_N1PdMm8VHI6rtUQDgrlbsaXxSlWChNFN8Xjca0E7leqjYtOsWZhoQd6G68EvYK5tJVy5Kjqe-S89g/s1600/twitter.png) no-repeat 0 0}

</style>

 غير الرمز (###) الي بلون الاحمر بالروابط الخاصة بك واضغط على حفظ ومبروووك عليك الاضافة الرائعة

 √ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق √