بسم الله الرحمن الرحيم السلام عليكم و رحمة الله وبركاته أهلا بكم إخواني و أخواتي
زوار موقع سكوريتي تيم إن شاء الله تكونوا بخير في هذا الدرس سنتطرق إلى كيفية
تركيب إضافة تابعنا على شبكاتنا الإجتماعية لمدونات سواء وردبريس او بلوجر
و المثال على الإضافة الصورة اعلاه .
لإضافة هاته الأداة نقوم بالذهاب إلى Layot
نختار Add a Gadget
و بعدها نقوم بإختيار HTML/JavaScript
ونضيف الشفرة التالية :
<style>
/* Bloggertrix */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width:70px; /* width of each image.*/
height: 70px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.facebook.com/*****"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCk6x2paZEWvXffvPXyR0HSHBpVFndzkPnJUqKc3LObWFivTb8GeOVUs8wTDFC2r0X0DtZGuZ2JIznhgbHsM6HLOqCk9EAC23Pb_1YMF6EVQ0ESfYsEC1sYnUxrZEV0SgNoOmSFPpFyLE/s1600/rb+facebook+icon.png" title="facebook تابعنا على " /></a></li>
<li><a href="https://www.youtube.com/*****"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6I-4jTELiys7W5MaM4gHhlJHZcYGpqhvOIqMB41px2ehzm0vGaLd4Y4xdfOYnqeZ_z5N1fx1zF3uR9YV4RXSCNd3EIRksTm5ms_VjwYiC4Fin9AJthfqhlh4pdxR7FldyyM9CbMREaI/s1600/rb+youtube+icon.png" title=" تابعنا على اليوتوب " /></a></li>
<li><a href="http://feeds2.feedburner.com/*****"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IgnH2x9D7_XMywgvvQZJhN9dxrbyvUomyneQ8eiCwP0WUW2828J8YNR-ISqWCX5RFcOB8d4ry5p3mDQud7W18krzVoyqSbyNNmmrMF09G8ejvJvVrNaa3HmOji0OLhU5y8pvJZpAZ3Y/s1600/rb+rss+feed+icon.png" title="RSS Feed تابعنا على" /></a></li>
</ul>
</center>
غير ***** إلى مايناسب حساباتك و بعدها إضغط على Save
و ستضاف القائمة بهذا الشكل :
/* Bloggertrix */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width:70px; /* width of each image.*/
height: 70px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.facebook.com/*****"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCk6x2paZEWvXffvPXyR0HSHBpVFndzkPnJUqKc3LObWFivTb8GeOVUs8wTDFC2r0X0DtZGuZ2JIznhgbHsM6HLOqCk9EAC23Pb_1YMF6EVQ0ESfYsEC1sYnUxrZEV0SgNoOmSFPpFyLE/s1600/rb+facebook+icon.png" title="facebook تابعنا على " /></a></li>
<li><a href="https://www.youtube.com/*****"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6I-4jTELiys7W5MaM4gHhlJHZcYGpqhvOIqMB41px2ehzm0vGaLd4Y4xdfOYnqeZ_z5N1fx1zF3uR9YV4RXSCNd3EIRksTm5ms_VjwYiC4Fin9AJthfqhlh4pdxR7FldyyM9CbMREaI/s1600/rb+youtube+icon.png" title=" تابعنا على اليوتوب " /></a></li>
<li><a href="http://feeds2.feedburner.com/*****"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IgnH2x9D7_XMywgvvQZJhN9dxrbyvUomyneQ8eiCwP0WUW2828J8YNR-ISqWCX5RFcOB8d4ry5p3mDQud7W18krzVoyqSbyNNmmrMF09G8ejvJvVrNaa3HmOji0OLhU5y8pvJZpAZ3Y/s1600/rb+rss+feed+icon.png" title="RSS Feed تابعنا على" /></a></li>
</ul>
</center>
غير ***** إلى مايناسب حساباتك و بعدها إضغط على Save
و ستضاف القائمة بهذا الشكل :
و مبروك الإضافة
نلتقي معكم في دروس أخرى إن شاء الله أجمل التحيات و التقدير
ليست هناك تعليقات :
إرسال تعليق