cara membuat widget contact di blog

Tehnik membuat widget contact yang satu ini adalah permainan CSS yang dipoles sehingga tampilannya begitu keren berada di halaman blog. Widget contact keren untuk blog ini valid HTMl 5 serta menganut sistem SEO Friendly sebab penulisan kode tag html dan CSSnya sesuai standart.Tampilan widget contact ini didesign buat para bloger mania yang menginginkan tampilan tampilan widget pada halaman blognya terlihat keren dan unik. Untuk menempatkan widget contact ini halaman blog anda harus memiliki ruang 280px x 280px agar sesuai dengan DEMO dan tidak mempengaruhi kode widget tersebut.
Oke saya anggap hal ini sudah biasa anda dengar tentang widget contact ini, saatnya menyimak tutorial cara pembuatanya di halaman blog kesayangan anda, kita menuju TKP.

Untuk DEMO silahkan " KLIK DISINI " Lihat bagian sebelah kanan halaman yang mempunyai gambar dan tulisan "Contact", bagaimana menurut anda ?

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </style>
4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </style> yang tadi

/*****************************************
Name : widget contact hover image
By : Rivai Silaban | Blog Design
Update : 19/08/2013
******************************************/
.BDimage-box {
width:280px;height:280px;overflow:hidden;background-color:white;
float:left;margin:1px 0 5px;
}
.image-container,
.image-details {height:280px;background-color:#FFFFFF;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:280px;height:280px;padding:0 0;margin:0 0 ;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.BDimage-box:hover {border-color:#bbb; width:280px;
height:280px;}
.BDimage-box:hover .image-container {margin-top:-220px}
.image-details .more:hover {background-color:black}
.BDRS-box1{
border-radius:10px;
margin-top:-10px;
margin-bottom:15px;
padding:2px;
text-align:center;
background-color: #FFFFFF;
height: 150px;
}
.BDRS-box1 h2{
color:#990000;
font-family:georgia;
font-size:12px;
margin-bottom:5px;
padding:0;
font-weight: bold;
}
.BDRS-box1 .inputxx{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:180px; color:#990000; font-family:georgia; margin-bottom:5px;border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #A21009;}
.BDRS-box1 .BDRSsubmit{background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: border-radius:10px 10px 10px 10px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100px;
height:36px;
background-color: #990000;
border-color: #FF0000;
}
.BDRS-box1 .BDRSsubmit:hover{background-color: #DD0000;
color: #000000;
border-color: #550000;}
.BDsosial a {
display : block;
height : 50px;
width : 50px;
padding : 0 4px;
float : right;
background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixcEU8h_dAWvDOJL1oj2hY1tOqvjgatJXBDQ8Fn3weLV6wFbHyKaYS1_Wm8ZUV9P_xXpqujbBY_q-yGl-3dXYYLCPNPv19Jc5jN3eOMhxZ-Gd8Ofi4zY_aO-r_8DZprnlxTWDWVlN0dNQ/s1600/Sharing+buttons.png') no-repeat transparent;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
transition : all 0.2s ease-in;
cursor : pointer;
}
.BDsosial a.googleplus {
background-position : 0 -58px;
}
.BDsosial a.googleplus:hover {
background-position : 0 0;
}
.BDsosial a.twitter {
background-position : 0 -290px;
}
.BDsosial a.twitter:hover {
background-position : 0 -232px;
}
.BDsosial a.facebook {
background-position : 0 -406px;
}
.BDsosial a.facebook:hover {
background-position : 0 -348px;
}
.BDsosial a.rss {
background-position : 0 -174px;
}
.BDsosial a.rss:hover {
background-position : 0 -116px;
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- Rivai Silaban | BLOG DESIGN widget contact start -->
<div class="image-box-wrapper" id="image-box-wrapper">
<div class="BDimage-box" align="left" >
<div class="image-container">
<img alt="contact" width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhByJTYBtOgsq8WZsUwhP0EbbqZQ1ZpGvk_N5AUS5BYAHfVh1je-fWKISj3gFmCveq7y3ophPJDgir5YyAJsgnqJQjT8Y3zHvlVG8KQ7GcC6DnmvG2Um3DzFn3PrDSkRmrbMYSV-s_U0BQ/s1600/contact.gif" title="contact" /></div>
<div class="image-details">
<div class="details">
<div class='BDRS-box'><h2> Daftarkan Email anda untuk berlangganan artikel Update terbaru dengan GERATIS</h2>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input class='input1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter Your Email Address...'/>
<input class='BDsubmit' name='submit' type='submit' value='Subcribe'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></div> </div>
<div class='BDsosial' style='padding:0 20px 5px 0;margin-top:-5px;'>
<a class='rss' href='URL RSS' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='URL Google' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='URL Facebook' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='URL Twitter' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div></div></div></div>
<div style="clear:both;"></div></div>
<!-- Rivai Silaban | BLOG DESIGN widget contact End -->

Keterangan Code

• Untuk kode tulisan warna HIJAU merupakan pesan judul subscribe
• Tulisan kode warna MERAH ganti dengan ID Feedburner anda.
• Kode tulisan warna BIRU ganti dengan link sosial media anda sesuai yang tertulis pada tutorial diatas.
• Kode warna KUNING adalah link gambar tampilan awal widget contact sebelum tersentuh mouse, Ukuran 280px x 280px.
• Silahkan anda edit CSSnya sesuai dengan thems halaman blog anda.

sumber : http://rivai-silaban.blogspot.com/

Tweet