شرح تفصيلي يوضح طريقة تركيب اضافات بلوجر اضافة ازرار التوصل الاجتماعي المميزة والرائعة
الى مدونة بلوجر بطريقة وكيفية سهلة وسريعة جدا، من جديد اليوم نقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو ايقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه اليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :
و الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات:
أولا سنقوم بأخذ بعض الإحتياطات، سنقوم بحفظ القالب من اجل تفادي حصول أي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : ]]></b:skin>
ثم نضيف الكود التالي قبله .
/*sus code by abdelmoumene-blog */
.abdelmoumene-blog {
border-radius: 50%; /* الحدود الدائرية */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.abdelmoumene-blog:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
.abdelmoumene-blog-center {
text-align: center /*لتوسيط الأزرار */
}
/*sus code by abdelmoumene-blog */
قم بحفظ القالب
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :
<div class="abdelmoumene-blog-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="abdelmoumene-blog" src="http://cdn1.iconfinder.com/data/icons/metallic/64%20PNG/facebook_02.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="abdelmoumene-blog" src="http://cdn1.iconfinder.com/data/icons/metallic/64%20PNG/twitter_01.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="abdelmoumene-blog" src="http://cdn1.iconfinder.com/data/icons/BrushedMetalIcons_meBaze/64/YouTube-01.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="abdelmoumene-blog" src="http://cdn1.iconfinder.com/data/icons/metallic/64%20PNG/RSS_02.png" /></a>
</div>
لربطه بصفحات مدونتك
اللون الازرق ضع رابط صفحتك على الفايسبوك
اللون الاخضر رابط صفحتك على التويتر
اللون الاحمر رابط قناتك على يوتوب
اللون البرتقالي رابط الخلاصة
وأخيرا قم بحفظ الأداة