Membuat Widget Sosial Media Dengan Effect Hover

Membuat Widget Sosial Media Dengan Effect Hover | Hai, Sobat... Pada artikel ini saya selaku (admin), ingin berbagi widget keren yang berjudul Membuat Widget Sosial Media Dengan Effect Hover, Menu Sosial media memang diperlukan untuk pengunjung untuk bisa berhubungan dengan admin di sosial media dan bisa saling mengikat pertemanan antar sesama blogger

Widget ini kalau keliatannya biasa saja pertamanya, tapi kalau sobat mengarahkan kursor kepada salah satu sosial media akan berubah dan ada warnanya sesuai sosial medianya.. sobat tertarik dengan widget dan ingin menggunakan widgetnya di blog sobat ? kalau memang begitu, lihat demonya dibawah ini dan langsung saja kita coba membuat dibawah ini 

Demo

Membuat Widget Sosial Media Dengan Effect Hover

--------------------------------------------------------------------------------

• Login ke Blogger
• Pergi ke Menu ''Tata Letak''
• Selanjutnya klik ''Tambah Gadget''
• Sekarang, pilih Gadget ''HTML/JavaScript
• Taruhlah code dibawah ini, di kotak yang tersedia

<style>

a.btrix1_twitter

{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6d5HBvMSm1ImBeWPuy0X4w_oRuid845qI6ZBgy9lcqOhLrTCbo_CUZVULyWIcDWCsnDP9E2fmC32pSUQPFzAunHJDvkw0T2Q7TzJQ-Cu8A4zEMArPnd6FPn6xQt3wQzDZhXy01Srz00/s1600/btrix_twitter.jpg);

    background-position:0 0px;

    width:255px;

    height:51px;

    text-indent:-9999px;

    display:block;

    background-repeat: no-repeat;

    border:0px;

    float:left;}

a.btrix1_facebook

{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwm9JVKqX3cxRIZMMJQPDsrX_bFjaUfCJ1XbBjEVn4tHTtYvZvmUYdVEpD04_2v1BVxNorxxoogZbuVY5DWjiorQ1TlzRxcqwzQp6nXCB-1G-GRDgMTSla4sbr9fKruNBDo_HbGNHGgco/s1600/btrix_facebook.jpg);

    background-position:0 0px;

    width:255px;

    height:51px;

    text-indent:-9999px;

    display:block;

    background-repeat: no-repeat;

        border:0px;

        float:left;}

a.btrix1_linkedin

{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4VRafteUkOL_GYiYV9b_bh1m1UObgthgE8rjC0SYGtTf8SXsWRFVV1OD4Ilx2DDPdCs02ZEwA1kpY0veX5SdRYC1fECKYRJlVSXUR-c5hRzc7mDv21ItPtrQKsxrouqC2DFSZ4SYXGg/s1600/btrix_linkedin.jpg);

    background-position:0 0px;

    width:255px;

    height:51px;

    text-indent:-9999px;

    display:block;

    background-repeat: no-repeat;

        border:0px;

        float:left;

}

a.btrix1_stumbleupon

{   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwr5KGXxENwRY4MjvumdjcbQwo11KAYFIIdcN4vi72OYHtVAmz_KUcW6px6693v7N7sBH_N3q_z8NybY8o8zo0ibyBBN2SuZIcC250I6UlEggomTtE1UCFJgObwzq65x82iXJP5GPFomA/s1600/btrix_stumbleupon.jpg);

    background-position:0 0px;

    width:255px;

    height:50px;

    text-indent:-9999px;

    display:block;

    background-repeat: no-repeat;

        border:0px;

        float:left;

}

.btrix11social a:hover

{

    background-position:0 -51px;

}

.btrix11social

{

    width:255px;

}

</style>

<br />

<div class="textwidget">

<div class="btrix11social">

<a class="btrix1_linkedin" href="http://in.linkedin.com/Username" target="_blank">linkedin</a>

<a class="btrix1_stumbleupon" href="http://www.stumbleupon.com/Username" target="_blank">stumbleupon</a>

<a class="btrix1_twitter" href="http://twitter.com/Username" target="_blank">twitter</a>

<a class="btrix1_facebook" href="http://www.facebook.com/Username" target="_blank">facebook</a>

</div>

</div>

• Ganti Username Dengan username linkedin anda
• Ganti Username Dengan username stumble anda
• Ganti Username Dengan username Twitter anda
• Ganti Username Dengan username Facebook anda
• Kalau sudah di ganti, sekarang klik simpan

Dan demikianlah artikel yang berjudul Membuat Widget Sosial Media Dengan Effect Hover semoga artikel ini bermanfaat bagi sobat semua dan sobat boleh bertanya atau pendapat sobat tentang artikel di atas di kolom komentar di bawah ini

Keep Blogging