Tanpa Kategori. Widget subscribe dengan hover effect untuk blogger

Widget subscribe dengan hover effect untuk blogger

Aditya Nugraha Cyber | | Tidak ada komentar







Widget subscribe dengan hover effect untuk blogger
widget ini Terlihat berukuran besar, namun karena ukurannya yang besar dan menawan jika dilihat dan disentuh oleh kursor maka dari pada itu Widget ini akan menambah daya tarik para pengunjung untuk melakukan klik dan menambah para pengunjung di blog kita,


Contoh diatas adalah hasil yang langsung saya gabungkan antara HTML dan CSS,
jadi apabila anda ingin membuatnya langsung tanpa perlu Edit Template itu bisa anda lakukan,,

Untuk CSS-nya lihat Dibawah ini :
.widget-item-control a {
        display: none;
    }
    .widget-item-control a {
        display: none;
    }
    #supportive {
        width: 300px;
        float: left;
        margin-top: 10px;
    }
    #supportive li {
        position: relative;
        cursor: pointer;
        padding: 0!important;
    }
    #supportive .facebook,.googleplus,.rss,.twitter {
        position: relative;
        -moz-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 5;
        display: block;
        float: left;
        margin: 1px;
    }
    #supportive .icon {
        overflow: hidden;
    }
    #supportive .facebook {
        width: 147px;
        height: 150px;
        background: rgba(59,89,152,1) url(https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png) no-repeat center center;
    }
    #supportive .twitter {
        width: 148px;
        height: 74px;
        background: rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSv0v645WNOeu2OkODUkrfNMnVDB1YSVCfDP6YTNFt69iH92qHoyr4eWzxwq0PuJUTYZW2kLFUPqKtWQYgK30r3_nJk_sfSUyLSkY_NRSGY5b6F9PDKz1mv0TFhSEWIMQP31w-pVZoko-i/s1600/Twitter.png) no-repeat center center;
    }
    #supportive .googleplus {
        width: 148px;
        height: 74px;
        background: rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIQlo59mzBvsOmoi_3FAsVzTfp6O2xuhE7KGi0yPEz5vxcUeMf0G3XFMo8mmb1rqMh17DADCdq8WVaE6ni9Hq-HpBNoaPS1wL7j57jOG5bwLU1AzaXTTz9_5wwoHHuIcFWPFY4OY8WwQl/s1600/google+plus.png) no-repeat center center;
    }
    #supportive .rss {
        width: 299px;
        height: 74px;
        background: rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdTAVntiiCSIyS1MBE4JosoIigT9JoJqQToYC2ZEktJ_L8eEd6HNYSttviHT5cRXpMnN7kQQ2uF8BMy9WAs-pl_J3ZBThd26mfOTfKHYIvWzV8Y-RGBHrzLmYOdslV7kbYuJxeXCL71IE/s1600/rss.png) no-repeat center center;
    }
    #supportive li:hover .facebook {
        background-color: #3468B6;
        -moz-transition: all .1s ease-in-out;
        -webkit-transition: all .1s ease-in-out;
    }
    #supportive li:hover .twitter {
        background: rgba(64,153,255,1) url(https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png) no-repeat center center;
        -moz-transition: all .1s ease-in-out;
        -webkit-transition: all .1s ease-in-out;
    }
    #supportive li:hover .googleplus {
        background: rgba(228,69,36,1) url(https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png) no-repeat center center;
        -moz-transition: all .1s ease-in-out;
        -webkit-transition: all .1s ease-in-out;
    }
    #supportive li:hover .rss {
        background: rgba(255,102,0,1) url(https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png) no-repeat center center;
        -moz-transition: all .1s ease-in-out;
        -webkit-transition: all .1s ease-in-out;
    }

Code diatas bisa anda tambahkan di tempatlate anda sendiri, caranya :
  • Cari kode ]]></b:skin> gunakan ctrl+f untuk mempermudah pencarian.
  • Sekarang copy kode di bawah ini
  • Dan pastekan tepat di atas ]]></b:skin>
Sekarang kita Menuju Ke Code HTML-nya :
<ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUserID/'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
</ul>
Dan Code yang ditas bisa anda tambahkan ke dalam Gagdet HTML :
  • Perhatikan untuk Code berwarna Biru FaceBookPage anda ganti dengan Url profile FB page anda
  • dan untuk TwitterUserName ganti dengan username twitter anda
  • Dan seterusnya :
untuk Full Code silahkan langsung gunakan yang dibawah ini :
<style script="text/javascript">
 .widget-item-control a {
    display: none;
}
.widget-item-control a {
    display: none;
}
#supportive {
    width: 300px;
    float: left;
    margin-top: 10px;
}
#supportive li {
    position: relative;
    cursor: pointer;
    padding: 0!important;
}
#supportive .facebook,.googleplus,.rss,.twitter {
    position: relative;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    z-index: 5;
    display: block;
    float: left;
    margin: 1px;
}
#supportive .icon {
    overflow: hidden;
}
#supportive .facebook {
    width: 147px;
    height: 150px;
    background: rgba(59,89,152,1) url(https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png) no-repeat center center;
}
#supportive .twitter {
    width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSv0v645WNOeu2OkODUkrfNMnVDB1YSVCfDP6YTNFt69iH92qHoyr4eWzxwq0PuJUTYZW2kLFUPqKtWQYgK30r3_nJk_sfSUyLSkY_NRSGY5b6F9PDKz1mv0TFhSEWIMQP31w-pVZoko-i/s1600/Twitter.png) no-repeat center center;
}
#supportive .googleplus {
    width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIQlo59mzBvsOmoi_3FAsVzTfp6O2xuhE7KGi0yPEz5vxcUeMf0G3XFMo8mmb1rqMh17DADCdq8WVaE6ni9Hq-HpBNoaPS1wL7j57jOG5bwLU1AzaXTTz9_5wwoHHuIcFWPFY4OY8WwQl/s1600/google+plus.png) no-repeat center center;
}
#supportive .rss {
    width: 299px;
    height: 74px;
    background: rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdTAVntiiCSIyS1MBE4JosoIigT9JoJqQToYC2ZEktJ_L8eEd6HNYSttviHT5cRXpMnN7kQQ2uF8BMy9WAs-pl_J3ZBThd26mfOTfKHYIvWzV8Y-RGBHrzLmYOdslV7kbYuJxeXCL71IE/s1600/rss.png) no-repeat center center;
}
#supportive li:hover .facebook {
    background-color: #3468B6;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}
#supportive li:hover .twitter {
    background: rgba(64,153,255,1) url(https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png) no-repeat center center;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}
#supportive li:hover .googleplus {
    background: rgba(228,69,36,1) url(https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png) no-repeat center center;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}
#supportive li:hover .rss {
    background: rgba(255,102,0,1) url(https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png) no-repeat center center;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}</style>
<br />
<ul id="supportive">
<li><a class="icon facebook" href="http://www.facebook.com/FaceBookPage/"></a></li>
<li><a class="icon twitter" href="http://twitter.com/TwitterUserName"></a></li>
<li><a class="icon googleplus" href="https://plus.google.com/GooglePlusUserID/"></a></li>
<li><a class="icon rss" href="http://feeds.feedburner.com/FeedBurnerUserName"></a></li>
</ul>

Sekarang simpan dan lihat ke Dasyatannya :
no image
Item Reviewed: Widget subscribe dengan hover effect untuk blogger 9 out of 10 based on 10 ratings. 9 user reviews.

0 komentar

Emoticon? nyengir

Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^

Komentar Terbaru

Just load it!