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

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

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

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

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

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

1.توجه إلى لوحة التحكم الخاصة بمدونتك.

2.إضغط على قالب.

3. ثم تحريرhtml.

4.إضغط على متابعة.

5.إختار توسيع القالب

6. إبحث عن هذا الكود باستعمال Ctrl+F:

</head>

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

<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.أضف الكود التالي:

<ul class="bubblewrap">
<li><a href="رابط مدونتك"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchOr2JfeR9Nl-YGzthVKSOe0aXJc8esz94-gxkwx7ktn3mW6ImABEQiUQo6a4_SFcEn3cjAmJfeMuFFV_woB5umRRio87AkCVUTqT3EIp6M0Z8ZJgveWbASpKG4ymruQfFI2XpHKOesJ8/s320/Charkleons-Blogger.png" title="Blogger" /></a></li>
<li><a href="رابط الخلاصة RSS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_6Ym53IUnoSgmCjWHu1CnWtSbedfYE3MPkMhOt9MNLnI8YerfWnR7xVa3BYOJeIzeNILhnh_8lbtO9-i8wuh6q6uS8-o0x1GdheszCa9f3tVhY0jpim2sFFU6Jh_edGdpJ_RSvn9hvuh/s320/Charkleons-Feedburner.png" title="RSS" /></a></li>
<li><a href="رابط صفحتك على تويتر"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7t8EuPIlGab-L3yf6aEiCbBEI6xMCGT-h9jQVuEbqxTdg4b8ToWq3l72-nC_kgoYJXmz-N1-0odmcfDuj0ArMJi57BIYvAQRDFT4osBnVrHzeoOFsmSl6nIhVw5m2E9IRga229xv3zJug/s320/Charkleons-Twitter.png" title="Twitter" /></a></li>
<li><a href="رابط صفحتك على غوغل +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzNIw-cxKYN2BhrgpGpZsSj3dTDJ9Bx5iIeY-QXhK1rf4Vkwzl003wCV2lhJXqfbbfqMWewqcQypiMSzn302O4_8FdJewY5tVwedMeqtLJwBzke14xOhnbi_QdXh_W0ntXA7E4MjGvat2/s320/Charkleons-Google%252B.png" title="Google+" /></a></li>
<li><a href="رابط صفحتك على فايسبوك"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE7raaeNgk7Syazd21ocdxyXZeW9N1FpQFBnL6lt4mR3UbuCJ3M8QHtGZTIyLp96Y8W1W7jUFma6C_39Jps-ly87euxJCX2JQH4pDHnG7I9k7JZl_0IRT8hpliPB9IiOZzXyik7luqTXFD/s320/Charkleons-Facebook.png" title="Facebook" /></a></li>

<li><a href="رابط قناتك على يوتيوب"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNRrx34zu8dQMLTZcwVRxiAxOQOG1fAp11oAftSkv3W9ch5ifJUQX3vHOyjfO1L7e-qpv4wsohbBRCR3XbpAR8lsdGtV8Uhz6xtS5x5VwMYpjZGuyk4Tog-FFgXWSQ9WyoZyzu0GNdv_W/s320/Charkleons-YouTube.png" title="Youtube" /></a></li>

</ul>

ملاحظة:

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

12.قم بحفظ الأداة.
تمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..