إضافة أزرار تابعني في مواقع التواصل الاجتماعي بطريقة احترافية Bookmarks Button

إضافة أزرار تابعني في مواقع التواصل الاجتماعي

بطريقة احترافية

وعند وضع هذه الاضافة ستلاحظ التأثير الجميل الذي يظهر عند التأشير

على إحدى هذه الأزرار لتكون أكثر احترافية،

ولإضافة هذه الأداة الاحترافية الجميلة في مدونتك اتبع الخطوات التالية :

الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript

ثم أضف الكود التالي لها

<div class="flt-wdt"> <style>#floatingbookmarks { right:25px; top:40px; margin-top:10px; position:fixed; width:40px; } #floatingbookmarks .float {margin:7px} .FBConnectButton_Text { font-size: 8px; padding:2px 4px 3px !important; } </style> <b:if cond='data:blog.pagetype == "item"'> <div id='floatingbookmarks'> <a style="text-decoration:none;" href="http://www.facebook.com/bloggrworld" rel="nofollow" onclick="window.open('http://www.facebook.com/bloggrworld');return false;" title="تابعيني عبر الفايسبوك (للفتيات فقط)"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر الفايسبوك" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyyDTOvK7isN0XZM8mKh_vCqwJUkq0tA6PmdowQVYpBTMFDS1TTW79aI2qwxPrnaZ8n3Xsq3C3uiuY0eLusa-oF5PKZPAZ4m7c7brlnMqNEajki-d8929QqcvnQoQ8vuO0K-0zfZgluck/s1600/FB-OMNIDAL.png" name="Facebook"/> </a>
<a style="text-decoration:none;" href="https://twitter.com/#!/bloggrworld" target="_Blank" rel="nofollow" onclick=" window.open('https://twitter.com/#!/bloggrworld'); return false;" title="تابعني على توتير"> <img border="0" id="Twitter" style="padding-bottom:1px;" alt="تابعني عبر تويتر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvyTA0oeBDISGumo2tv1yAMBUq29bgAOjNskAyCtDAvMiQKhgSfZ0SqnfWiyosRaZQc8PymAKdFhbkg-qvIYEf_gNbgKXIuK0AG7RU8CarjryGYdtti7vKxIv1V0oSiupC18QCjKUaMo8/s1600/twtr-OMNIDAL.png" name="Twitter"/> </a> <a style="text-decoration:none;" href="http://bloggrworld.blogspot.com/feeds/posts/default" rel="nofollow" onclick="window.open('http://bloggrworld.blogspot.com/feeds/posts/default');return false;" title="تابعني عبر خلاصات المدونة"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر فليكر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlxXR-sEettqsMlrisXJy2l6EqOOQXDhyphenhyphenDEmU75q00QPSe24RyMjFTiZOMUwGGKEFnSmIfbF4rwI4nNoGOogfwTzLeyzyApFiG0NlDLJEBdLY7QrB1Rm9860v2-xf_sI77po1YPNNWrE/s1600/RSS-OMNIDAL.png" name="RSS"/> </a> <a style="text-decoration:none;" href="http://www.flickr.com/photos/bloggrworld" rel="nofollow" onclick="window.open('http://www.flickr.com/photos/bloggrworld');return false;" title="تابعني عبر فليكر"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="Bookmark Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuU5bdBUhJswlq4d1dMGa-ZQ4gq_D4xVgSyeYhJ7dMLbEA1fAam19jowjhOXvmyM6HmaCRYagImooEcEo3bPqFk0TpRCf2fudCnYT_aNf7fMFhiF4Hc9yCk63rd_d0rkM_3Lc7r-GwY4/s1600/flickr-omnidal.png" name="flickr"/> </a> <a style="text-decoration:none;" href="https://plus.google.com/109791937662333407989" rel="nofollow" onclick="window.open('https://plus.google.com/109791937662333407989');return false;" title="تابعني عبر جوجل +"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر جوجل +" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5pCmy-oxps0dpopyys544VsNUO3CiqLzEN31cTJT6vWxDNxLeek59BQZ_UW_eMspdYJpeLQ1DXPjMaC3qI5akEUDSRiGbfhBSPIMJYHuRGbcgLVJztuJcRX0kIvbgXx46GFzB6il-0/s1600/google%252Bomnidal.png" name="Google +"/> </a> <a href="javascript:window.external.AddFavorite

('http://bloggrworld.blogspot.com/', 'مدونة أسماء || أم نضال ||');" title=" أضف المدونة لمفضلتك"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrxbvA1D2BaoBLg8UkdyNvP4ufIUVK8UpeerjgGIEW8JSLmR0HniMYMp7f-3Jo9l0mscpGGoNUSZwJ0BKa5n0pkG18PW52toh7Ig3VA67M5LuHkUI8gpXAZHMYDYvpqy7NARpJipuz944/s1600/a-omnidal.png" /></a> </div> </b:if>
</div>

الخطوة الثانية :

قم بتغيير روابط المواقع الخاصة بي في الكود بالروابط الخاصة بمدونتك او موقعك
وبإمكانك حذف وإزالة أي موقع لست مشترك به بحذف الكود الخاص به
وذلك لان أكواد كل موقع منفصلة عن الآخر.

الخطوة الثالثة :

توجه الآن إلى :

تصميم > تحرير html > وابحث عن الوسم

]]></b:skin>

ثم أضف الكود التالي قبله مباشرة (فوقه - أعلاه)

   .flt-wdt{
    position:fixed; right:10px; top:40%;
    }
    .flt-wdt img{
    float:right;
    clear:right;
    margin:5px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    .flt-wdt img:hover{
    -moz-transform: scale(1.2) rotate(6deg);
    -webkit-transform: scale(1.2) rotate(6deg);
    -o-transform: scale(1.2) rotate(6deg);
    -ms-transform: scale(1.2) rotate(6deg);
    transform: scale(1.2) rotate(6deg);
    }

واخيرا قم بحفظ التغيرات التي قمت بها على قالبك واستمتع بأزرار المواقع الاجتماعية الخاصة بحساباتك

رابط تحميل الكود

اضغط هنااااااااااااااااااااااااا

برامج سوفت

القائمة الرئيسية

الصفحات

إضافة أزرار تابعني في مواقع التواصل الاجتماعي بطريقة احترافية Bookmarks Button

أخر المواضيع من قسم : بلوجر