Ad 468 X 60

Sabtu, Mei 04, 2013

Widget subscribe dengan hover effect untuk blogger

Posted By Unknown , Sabtu, Mei 04, 2013 Be the first to comment!


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/AVvXsEg6rzEnMi8AD0dPfqZhjw2woDDHGLLrBVBrGp-Fe66nQzFJs1ZJP38A71GQ-fn0Fl1fVa8xvvhmijrQPONj-p6YhKy0hzehDm9XI4vSQCbbkGQdsxV3wLwT5Q_LNfsAUa1McBJ2nU75Q5Ts/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/AVvXsEg8PojkUHoyoMbR-_ZOEH8XHIyWFz7TWsB5X9QZg1t5ORh04D1-xDYA62gt-pKesODw-TrIMBLETmvxoEW6pTfzZL5EAqbESlhpxjpiG0LB1373knBkfYCcX2Q6F8g_Ni0tilGe3dboTnGV/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/AVvXsEjN3n0qMDuzv0dawnKOROSHqn2Qo0vv1nnP-jGBpit7zckFnWH1TBdMRCbIDB_oWLJ3bSKyVskCr95AqgNA-1VBSO1KM9lFFSATTL2pBaEkRGZ3IXchlkHxROoFQuhlQWS5mIPDsL2dYws_/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/AVvXsEg6rzEnMi8AD0dPfqZhjw2woDDHGLLrBVBrGp-Fe66nQzFJs1ZJP38A71GQ-fn0Fl1fVa8xvvhmijrQPONj-p6YhKy0hzehDm9XI4vSQCbbkGQdsxV3wLwT5Q_LNfsAUa1McBJ2nU75Q5Ts/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/AVvXsEg8PojkUHoyoMbR-_ZOEH8XHIyWFz7TWsB5X9QZg1t5ORh04D1-xDYA62gt-pKesODw-TrIMBLETmvxoEW6pTfzZL5EAqbESlhpxjpiG0LB1373knBkfYCcX2Q6F8g_Ni0tilGe3dboTnGV/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/AVvXsEjN3n0qMDuzv0dawnKOROSHqn2Qo0vv1nnP-jGBpit7zckFnWH1TBdMRCbIDB_oWLJ3bSKyVskCr95AqgNA-1VBSO1KM9lFFSATTL2pBaEkRGZ3IXchlkHxROoFQuhlQWS5mIPDsL2dYws_/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 :
Widget subscribe dengan hover effect untuk blogger|Andoelsean

Get Free Email Updates Daily!
Label: , ,

0 komentar:

Langganan: Posting Komentar (Atom)