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

هذه الأداة قمت ( بإعادة صياغتها ) إذا صح التعبير



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



لتكون أكثر احترافية، كما قمت بإعادة تصميم معظم الأزرار لتناسب مدونتي والمواقع التي أشترك بها  ^_^

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



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



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



تصميم > عناصر الصفحة > إضافة أداة > أداة 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 == &quot;item&quot;'>

<div id='floatingbookmarks'>



<a style="text-decoration:none;" href="http://www.facebook.com/omnidal" rel="nofollow" onclick="window.open('http://www.facebook.com/omnidal');return false;" title="تابعيني عبر الفايسبوك (للفتيات فقط)"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر الفايسبوك" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibzSuPv-U7ytyub8Y3aRxG0h2IP-LmH2mxLaqsgxlNVdrvCGamvmx8k2sLvX4zsh702DdkUqp3psCheVM2KU6xGGJp5yEQqRY8za5XjidCAa-k6clT7urS4x4RN8vEBTIfJOez4luZ2uM/s1600/FB-OMNIDAL.png" name="Facebook"/> </a>



  <a style="text-decoration:none;" href="https://twitter.com/#!/omnidal" target="_Blank" rel="nofollow" onclick=" window.open('https://twitter.com/#!/omnidal'); return false;" title="تابعني على توتير"> <img border="0" id="Twitter" style="padding-bottom:1px;" alt="تابعني عبر تويتر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9qCEIBseX-J5XM9dDdqaZqXZ4RxtZEpxqxwZcTuWQFzSoMgGLFLp0PbOp5GfWf9vGmqMxDnQy6ZljzuVE7MASutO12yHAf-_Avg5XzvfvENRft63YLeqelICcZjbXjkHqBt2hBFlHmg/s1600/twtr-OMNIDAL.png" name="Twitter"/> </a>



<a style="text-decoration:none;" href="http://a-omnidal.blogspot.com/feeds/posts/default" rel="nofollow" onclick="window.open('http://a-omnidal.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/AVvXsEiTitkryJtvY_Tvcal4puZeIvj2zqEKCnEeWu0CZtNlLeQ-HvNrkUOvcg8sAQum0RRwqEVu4WfhJqZrnQIUw6ZgYt4cQ1-NFz9arDqRvZG8Au1lY4UUwvt2lQRB0zkju01h80-wPqMzFtU/s1600/RSS-OMNIDAL.png" name="RSS"/> </a>



<a style="text-decoration:none;" href="http://www.flickr.com/photos/a_omnidal" rel="nofollow" onclick="window.open('http://www.flickr.com/photos/a_omnidal');return false;" title="تابعني عبر فليكر"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="Bookmark Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP4yeaFNX892aV024RWUwRBRLtUXakZQS7UH2_FJkQ24Go-qyVG5l6b6LrEstSDcyN5DD4TvL6UumsJxTG3nijPrBg2xRSxjhN8JJd3-3xD4Jh_n_St_qTMajkhzmbKfI6QZh6sdX7q3g/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/AVvXsEgJ_sbIo5Mw4W_XVCkp6efYGPKxAfu1xrYMVoBxjCWA4kz4tktfD9fdwwNyxEDwZPknbpmr59AgI4AjrkE-5MHPjUgqODZfUhDk2sRtw1Mtw1nLK6ZiInZAi3ufVqor868U14na3xFLwAs/s1600/google%252Bomnidal.png" name="Google +"/> </a>



<a href="javascript:window.external.AddFavorite('http://a-omnidal.blogspot.com/', 'مدونة أسماء || أم نضال ||');" title=" أضف المدونة لمفضلتك"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBkcI5fao-TYBmvCsmd06GaYWovuq2KhVWz3RYyBE2BesVJnI1lJIge8Io5HRtC-l3bOuOv86I0WCkcu3XoELBKZgxZpv0Bph-E6ZmRm1lGkVyOMKp1KFz6yKvgV-UjYUZ51YkEx-5gQ/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);

    }

قم بحفظ التغيرات على قالبك



واستمتع بأزرار المواقع الاجتماعية الخاصة بحساباتك تطفو على سطح مدونتك مع تأثير جميل ^_^

Filed Under: اضافات البلوجر on الأربعاء، 19 فبراير 2014