cara membuat widget share image hover

Widget share dengan sistem image hover ini sangat unik, cara membuat widget share image hover ini juga masih tergolong simple sehingga para bloger pemula sekali pun mampu untuk memasangnya dihalaman blog kesayangannya. Tampilan yang simple dan lebih keren menjadikan widget share image hover ini pilihat buat para bloger mania untuk tetap menjaga design tampilan halaman blognya lebih menarik dimata para pengunjungnya. Widget share image hover ini valid html 5 dan CSS 3 serta menganut sistem penulisan tag yang SEO Friendly. Oke langsung saja menuju TKP klik icon demo dibawah ini , lihat bagian social share dengan tulisan " Join Us With Social Media ". Dekatkan cursor anda dan lihat hasilnya. Bila anda menginginkan tampilan widget related post dalam tampilan lainnya silahkan kunjungi referensi artikel dibawah, selamat mencoba.

Demo

Referensi Artikel

• Cara membuat related post with email subscribe
• Widget related post minimalis

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Widget Share image hover
By : Rivai Silaban | Blog Design
Update : Selasa, 17 September 2013
******************************************/
.bdrsimage-box {
width:580px;height:63px;overflow:hidden;background-color:white;
float:left;margin:1px 0 5px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.bdrsimage-cont,
.bdrsimage-details {height:63px;background-color:#FFFFFF;
transition:margin-top .4s ease-out .4s;
}
.bdrsimage-cont img {
width:580px;height:63px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.bdrsimage-details .bdrsdetails {
padding:10px 12px;
overflow:hidden;
background-color: #666666;
}
.bdrsimage-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}
.bdrsimage-box:hover {border-color:#bbb; width:580px;
height:63px;}
.bdrsimage-box:hover .bdrsimage-cont {margin-top:-55px}
.bdrsimage-details .more:hover {background-color:black}
#bdrs-sos {
overflow:auto;
width:auto;
height:60px;
padding:5px;
font-family:arial;
font-size:15px;
font-color:#0000FF;
background-color: #666666;
}
.bdrs-facebook {
line-height : 20px;
color : #fff !important;
text-decoration : none !important;
border : #111 solid 1px;
padding : 3px 10px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
border-radius : 2px;
background : #3b5998;
cursor: default;
box-shadow: 0 0 2px 2px #3b5998 inset;
}
.bdrs-facebook:hover {
color : #fff !important;
text-decoration : none !important;
border : #111 solid 1px;
border-radius : 2px;
box-shadow: 0 0 2px 1px #333;
background-color: #333333;
}
.bdrs-twitter {
color : #fff !important ;
text-decoration : none !important ;
border : #111 solid 1px;
padding : 3px 10px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
line-height : 20px;
border-radius : 2px;
background : #4099FF;
cursor: default;
box-shadow: 0 0 2px 2px #4099FF inset;
}
.bdrs-twitter:hover {
color : #FFFFFF!important;
text-decoration : none !important;
box-shadow: 0 0 2px 1px #333;
border : #111 solid 1px;
border-radius : 2px;
background-color: #333333;
}
.bdrs-gplus {
color : #fff !important ;
background : #c0361a;
text-decoration : none !important ;
border : #111 solid 1px;
padding : 3px 10px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
border-radius : 2px;
cursor: default;
}
.bdrs-gplus:hover {
color : #fff !important ;
background : #333;
text-decoration : none !important ;
border : #111 solid 1px;
border-radius : 2px;
box-shadow: 0 0 2px 1px #333;
}
.bdrs-linkedin {
color : #fff !important ;
background : #005a87;
text-decoration : none !important ;
font-family : arial, verdana, sans-serif;
font-size : 12px;
border : #111 solid 1px;
border-radius : 2px;
cursor: default;
padding : 3px 10px;
}
.bdrs-linkedin:hover {
color : #fff !important ;
background : #333;
text-decoration : none !important ;
border : #111 solid 1px;
border-radius : 2px;
border : #111 solid 1px;
box-shadow: 0 0 2px 1px #333;}
.bdrs-Technorati {
color : #fff !important ;
background : #157501;
text-decoration : none !important ;
border : #105901 solid 1px;
padding : 3px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
line-height : 20px;
border-radius : 2px;
border : #111 solid 1px;
padding : 3px 10px;
cursor: default;
}
.bdrs-Technorati:hover {
color : #fff !important ;
background : #333;
text-decoration : none !important ;
border : #105901 solid 1px;
border-radius : 2px;
border : #111 solid 1px;
box-shadow: 0 0 2px 1px #333;
}/* CSS code End */

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
  
  
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
• Save template anda dan lihat hasilnya, selamat berkreatif.

<!-- Rivai Silaban | BLOG DESIGN CODE SHARE start -->
<div class="bdrsimage-box" style="text-align: center;" >
<div class="bdrsimage-cont">
<img alt="share" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHHXDFy-GixYPKg5Zz3gw-k-198Kro7zfrOhqQbnS4Gtn2ZGus7sZmTlocymNbIDuzbg2Sh7KcouMudgox4Ou61Mc9CSDuSepwkGVrtylRSUNBulkAom7wygWEWQswiq1aI9mkdaogqY/s1600/bdshare.png" width="580" height="63" title="share this article"/> </div>
<div class="bdrsimage-details">
<div class="bdrsdetails">
<div id="bdrs-sos"><div style=' padding: 3px 0 5px 0; text-transform:uppercase'>
<span style="color:#CCCCCC; font-family:Georgia; ">Share This :</span>
<a class='bdrs-gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Gplus'>Google+</a>
<a class='bdrs-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='facebook'>Facebook</a>
<a class='bdrs-twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='twitter'>Twitter</a>
<a class='bdrs-linkedin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='linkedin'>Linkedin</a>
<a class='bdrs-Technorati' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank' title='technorati'>Technorati</a>
</div></div>
</div>
</div>
</div> <div style="clear:both;"></div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE start -->

Kesimpulan

Widget share image hover ini sangat bagus anda pasang di halaman blog anda selain untuk mempercantik tampilan dapat juga meningkatkan trafik pengunjung halaman blog anda melalui berbagai sosial media.. Widget share image hover ini valid html 5 dan CSS 3.

Bila anda mengalami masalah dalam pemasangan widget share image hover ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Wiget Share Image Hover
Selasa, 17 September 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 11:20 AM