أزرار الشبكات الإجتماعية بشكل جذاب لبلوجر
السلام عليكم و رحمة الله تعالى و بركاته
مرحبا بكم مرة أخرى في إضافة جديدة لبلوجر , في هذا الدرس سأقدم إضافة أزرار الشبكات الإجتماعية بشكل جديد و حصري
هذه الإضافة إحترافية يمكنكم معاينتها من الصورة
أو معاينتها على المدونة من هذا الرابط : Smarton
هذه الإضافة إحترافية يمكنكم معاينتها من الصورة
أو معاينتها على المدونة من هذا الرابط : Smarton
تركيب الإضافة في بلوجر
نقوم بالدخول إلى محرر قالب بلوجر و نبحث عن الوسم </head>
و نضيف الكود التالي فوقه مباشرة :
<!--Smarton-->
<style type='text/css'>
.metro-social {
padding-top:10px;
padding-bottom:10px;
}
.metro-height-extend {
height:145px;
}
.metro-height {
height:142px;
padding-Bottom: 30px;
}
.metro-social li {
position:relative;
cursor:pointer;
list-style:none;
margin:1px;
}
.metro-social .metro-facebook,.metro-twitter,.metro-googleplus,.metro-pinterest,.metro-linkedin,.metro-youtube,.metro-rss,.rss-feed,.googleplus-one,.twitter-one,.linkedin-one,.pinterest-one,.twitter-one-extend,.pinterest-one-extend,.youtube-one,.twitter-extend-one {
float:left;
margin:1px;
position:relative;
display:block;
}
.metro-social .metro-facebook {
background:url(http://i.imgur.com/vviy9lL.png) no-repeat center center #1f69b3;
width:58%;
height:80px;
padding:0;
border-top-left-radius: 20px;
}
.metro-social .metro-twitter {
background:url(http://i.imgur.com/bzkJhks.png) no-repeat center center #43b3e5;
width:150px;
height:80px;
padding:0;
border-bottom-left-radius: 20px;
}
.metro-social .metro-googleplus {
background:url(http://i.imgur.com/dWuqfyl.png) no-repeat center center #da4a38;
width:40%;
height:80px;
padding:0;
border-top-right-radius: 20px;
}
.metro-social .metro-youtube {
background:url(http://i.imgur.com/wh1m6XB.png) no-repeat center center #e64a41;
width:150px;
height:80px;
padding:0;
border-bottom-right-radius: 20px;
}
.metro-social .youtube-one {
background: url(http://i.imgur.com/wh1m6XB.png) no-repeat center center #e64a41;
width: 98.4%;
padding: 0;
border-bottom-right-radius: 20px;
height: 80px;
border-bottom-left-radius: 20px;
}
.metro-social .googleplus-one {
background:url(http://i.imgur.com/dWuqfyl.png) no-repeat center center #da4a38;
width:40%;
height:80px;
padding:0;
}
.metro-social .twitter-one {
background:url(http://i.imgur.com/bzkJhks.png) no-repeat center center #43b3e5;
width:150px;
height:80px;
padding:0;
border-bottom-left-radius: 20px;
}
.metro-social .twitter-one-extend {
background:url(http://i.imgur.com/bzkJhks.png) no-repeat center center #43b3e5;
width:150px;
height:80px;
padding:0;
border-bottom-left-radius: 20px;
}
.metro-social .twitter-extend-one {
background:url(http://i.imgur.com/bzkJhks.png) no-repeat center center #43b3e5;
width:150px;
height:80px;
padding:0;
border-bottom-left-radius: 20px;
}
.metro-social li:hover {
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
}
.metro-social .fbhover, .twitterhover, .googlehover, .linkedinhover, .pinteresthover{
visibility:hidden;
opacity:0;
transition:visibility 2.5s linear 0.5s,opacity 0.5s linear;
}
.metro-facebook:hover .fbhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.metro-twitter:hover .twitterhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.twitter-one-extend:hover .twitterhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.metro-googleplus:hover .googlehover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.metro-youtube:hover .googlehover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.youtube-one:hover .googlehover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.googleplus-one:hover .googlehover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.twitter-one:hover .twitterhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.twitter-extend-one:hover .twitterhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.metro-linkedin:hover .linkedinhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.linkedin-one:hover .linkedinhover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.metro-pinterest:hover .pinteresthover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.pinterest-one:hover .pinteresthover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.pinterest-one-extend:hover .pinteresthover{
opacity:1;
transition-delay:0s;
visibility: visible;
}
.place3 {
margin-top: 30px;
}
.place4 {
margin-top: 29px;
}
.place2 {
margin-top: 12px;
}
.place1 {
margin-top: 9px;
}
.twitter-one:hover {
background: #43b3e5;
}
.metro-facebook:hover {
background: #1f69b3;
}
.metro-googleplus:hover {
background: #da4a38;
}
.youtube-one:hover {
background: #e64a41;
}
</style>
<!--Smarton-->
و الآن نمر إلى تخطيط و نضيف أداة جافاسكريب جديدة و نكتب فيها الكود التالي :
<!--By Smarton.ml-->
<div class='metro-social metro-height'>
<li class='metro-facebook'>
<center>
<div class='place1'>
<iframe allowtransparency='true' class='fbhover' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2F3oqool&send=false&layout=box_count&width=450&show_faces=false&font&colorscheme=light&action=like&height=21&appId=408184442589211' style='border:none; overflow:hidden; width:75px; height:65px;'>
</iframe></div>
</center>
</li>
<li class='metro-googleplus'>
<div class='googlehover'>
<center>
<div class='place2'>
<div class='g-follow' data-annotation='vertical-bubble' data-height='15' data-href='//plus.google.com/u/0/+WiseSword' data-rel='publisher'>
</div><script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</center>
</div>
</li>
<li class='youtube-one'>
<div class='googlehover'>
<center>
<div class='place4'>
<div class='g-ytsubscribe' data-channel='MsBay1998' data-layout='default'/>
</div></center>
</div>
</li>
</div>
<!--by Smarton.ml-->
و هنا أنهي معكم هذا الدرس أتمنى أن تعمل الإضافة لكم
إلى اللقاء في درس جديد حول دروس بلوجر
17 سنة مؤسس مدونة ستروكس للمعلوميات انشأت مدونة ستروكس للمعلوميات سنة 2015 يقتصر عملي على الدعم وتقديم الشروحات المجانية على المدونة