أزرار الشبكات الإجتماعية بشكل جذاب لبلوجر

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


أو معاينتها على المدونة من هذا الرابط : 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&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;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(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[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-->



و هنا أنهي معكم هذا الدرس أتمنى أن تعمل الإضافة لكم
إلى اللقاء في درس جديد حول دروس بلوجر


نحاول قدر الإمكان في كوداتي وضع أفضل تصاميم بلوجر سواء من ناحية الإضافات أو قوالب بلوجر , كما نشارك طرق تحسين المواقع في ما يتعلق بالسيو

avatar
غير معرف



التعابير