Cara Buat Widget Profil Social Dengan Efek Hover di Blogger

Tweet

D-Copy Blog | Sekarang Anda dapat menambahkan ikon sosial dengan widget efek hover ke WordPress dan Blogger yang pada widget full sebelumnya yang mungkin Anda dapat mencobanya. Anda dapat dengan mudah menambahkan ini ke sidebar Anda yang merupakan pilihan yang lebih baik untuk mengambil perhatian pengunjung. Ini ikon sosial dengan efek hover hanya tersedia pada AllBlogggingTips . Saya membuatnya bekerja untuk kedua Blogger dan Blog WordPress. Saya akan menunjukkan Bagaimana TO Tambahkan Ikon Sosial Keren Dengan Widget Efek Hover Untuk Wordpress dan Blogger.

Fitur :  Google+, Facebook, Twitter, RSS dan Email
Langkah :

1. Buka Akun Blogger Anda
2. Masuk ke Menu Edit HTML > centang Expand Template Widget
3. Cari kode dibawah ini :

]]></b:skin>

    4.  Pastekan kode dibawah ini, diatas pada kode diatas :

#subscribe2 {
background:#f3f3f3;
border: 1px solid #ECEDE8;
font-size: 90%;
margin: 0 0 15px 0;
padding: 7px 5px 3px 5px;
width: 288px;
}
.subscribe-icons2 {
margin: 0 auto;
width: 286px;     background: #f7f7f7;
}
.subscribe-icons2 li {     -moz-border-radius:6px;
display: inline;
float: left;
font-size: 11px;
margin: 0 2px 10px 2px;
width: 52px;
text-align: center;
}
.subscribe-icons2 a {
color: #444 !important;
display: block;
padding: 56px 0 2px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
.subscribe-icons2 a:hover {     -moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
color: #369 !important;
text-decoration: none;
}
.subscribe-icons2 .subscribe-youtube a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_googleplus.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-twitter a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_twittert.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-facebook a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_facebook.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-rss a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_rss.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-email a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZpEFh8ZcqjKOms_q3yFTAZs386zVtmzzqbeanXbTLp6ggklmgo5sdgUEHyRpiGjxmUHYIj_6kii9qk2T9jWVT9kc9wPzj_NrIJjzoEjUU0UztZPFwNMT0i_Pea1cdZ6sjl5XY5n4om4/s320/gmail-email+21.png) center top no-repeat;
}

    5.  Save Template Anda.
    6.  Masuk ke Menu Layout > Add Gadget
    7.  Pastekan kode dibawah ini :

<div class='subscribe2'>
        <ul>
            <li><a target="_blank" rel="nofollow" href="https://plus.google.com/ID Google+ Anda">Google+</a></li>
            <li><a target="_blank" rel="nofollow" href="http://twitter.com/Username Twitter Anda">Twitter</a></li>
            <li><a target="_blank" rel="nofollow" href="http://www.facebook.com/Id Facebook Anda">Facebook</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/Username Feed Burner Anda">RSS</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda&amp;loc=en_US"> Email</a></li>
        </ul> <!--end .subscribe-icons-->
        <div/>
    </div>

     8.  Ganti kode berwarna biru dengan ID Anda dan Save.