معهد خبراء بلوجر - طريقة رائعة لإضافة أيقونات المواقع الإجتماعية على شكل قنينات مشروبات غازية

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

درس اليوم هو عن طريقة رائعة لإضافة أيقونات المواقع الإجتماعية على شكل قنينات مشروبات غازية بتقنية CSS.
هذه الأيقونات يمكنك من خلالها عرض مختلف صفحاتك على المواقع الإجتماعية,في شكل أقل ما يقال عنه أنه جذاب و إحترافي ,بحيث بمجرد أن تضع مؤشر الماوس فوق إحدى الأيقونات يكبر حجمها بحرك سلسة.

معاينة الأداة

نمر لشرح الطريقة:

1.توجه إلى لوحة التحكم الخاصة بمدونتك.
2.إضغط على قالب.
3. ثم تحريرhtml.
4.إضغط على متابعة.
5.إختار توسيع القالب
6. إبحث عن هذا الكود باستعمال Ctrl+F:

كود بلغة HTML:

</head>

تم ضع قبله مباشرة الكود التالي:

كود بلغة HTML:

<style type="text/css">



.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{

display:inline;

width: 60px;

height:60px;

}



.bubblewrap li img{

width: 64px; /*Ancho de cada imagen*/

height: 64px; /*Alto de cada imagen*/

border:0;

margin-right: 1px; /*Espacio entre cada imagen al crecer*/

-moz-transition:-moz-transform 0.1s ease-in;

-webkit-transition:-webkit-transform 0.1s ease-in;

-o-transition:-o-transform 0.1s ease-in;

}



.bubblewrap li img:hover{

-moz-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/

-webkit-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/

-o-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/

}



</style>

7.الآن التوجه ألى لوحة التحكم الخاصة بمدونتك.
8. تخطيط.
9.إضافة أداة.
10.اختار Html/Javascript.
11.أضف الكود التالي:

كود بلغة HTML:

<ul class="bubblewrap">

<li><a href="رابط مدونتك"><img src="http://4.bp.blogspot.com/-TybeiH7audI/UJ3d0rF6jEI/AAAAAAAAAV4/Vt-G3-H6aDY/s320/Charkleons-Blogger.png" title="Blogger" /></a></li>

<li><a href="رابط الخلاصة RSS"><img src="http://3.bp.blogspot.com/-IL1pnsEFHZM/UJ3d81icELI/AAAAAAAAAWQ/i_X2zR2ZKnE/s320/Charkleons-Feedburner.png" title="RSS" /></a></li>

<li><a href="رابط صفحتك على تويتر"><img src="http://2.bp.blogspot.com/-nzMT2yzNA3E/UJ3eGhycdgI/AAAAAAAAAWo/1kWXFNy4MqA/s320/Charkleons-Twitter.png" title="Twitter" /></a></li>

<li><a href="رابط صفحتك على غوغل +"><img src="http://4.bp.blogspot.com/-HIJIRQ5l1UM/UJ3eBUZrUWI/AAAAAAAAAWc/4c8B3BSpOGI/s320/Charkleons-Google%252B.png" title="Google+" /></a></li>

<li><a href="رابط صفحتك على فايسبوك"><img src="http://3.bp.blogspot.com/-S6Mv6aKvEjQ/UJ3d4uFpqwI/AAAAAAAAAWE/yijuuNzmRr0/s320/Charkleons-Facebook.png" title="Facebook" /></a></li>



<li><a href="رابط قناتك على يوتيوب"><img src="http://2.bp.blogspot.com/-FAiC6s9ZZio/UJ3eLqtsjfI/AAAAAAAAAW0/i_RVgi15nUc/s320/Charkleons-YouTube.png" title="Youtube" /></a></li>

</ul>

-قم بتعديل ما يناسبك.
-يمكنك سحب الإضافة للمكان الذي يناسبك.

12.قم بحفظ الأداة.

للمزيد من الدروس زوروا موقع Trucsinformatique للمعلوميات بأضغط هنا