widget contact

Widget contact merupakan suatu widget yang diperlukan para blogger, widget contact yang satu ini merupakan gabungan dari 2 widget yaitu widget contact dan widget profil yang telah di design sedemikian rupa sehingga menghasilkan suatu widget contact yang memiliki tampilan yang unik dan menarik. Widget contact yang hiden show menambahkan suatu kesan tampilan yang begitu elegan pada widget ini. Postingan kali ini terinspirasi dari salah seorang sahabat lama saya yang ingin menampilkan widget profil yang unik dan menarik. semoga beliau merasa senang dengan widget yang sederhana ini. Untuk melihat demonya silahkan klik icon demo dibawah ini jangan lupa sekalian disimak cara pemasangannya mana tau anda suka memasang widget contact ini pada halaman blog kesayangan anda.

Demo

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• 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 Contact with profil
By : Rivai Silaban | Blog Design
Update : Kamis, 17 Oktober 2013
******************************************/
#BDRS-widget {
width: 300px;
background-color: #FFFFFF;
padding:5px;
margin:5px 0;
border:solid #990000 3px;
box-shadow:0 0 7px #000 inset;
}
#BDRS-widget h2 {
font-family: Georgia;
font-size: 16px;
color: #006600;
font-style: italic;
text-shadow: 1px 1px 1px #888;
font-weight: bold;
line-height: 15px;
text-align: center;
}
#BDRS-widget .profil{
width: 100%;
margin:0 0 10px 0;
}
#BDRS-widget .BD_button{
border:none;
color:#990000;
cursor:pointer;
font-family:Georgia;
font-weight:bold;
padding:5px;
width:auto;
background-color: #FFFFFF;
float: right;
font-style: italic;
font-size: 16px;
margin-top:-10px;
}
#BDRS-widget .BD_button:hover,.BD_button:focus{
color: #FF0000;
}
#BDRS-widget .text{
font-family: Georgia;
font-size: 12px;
color: #333333;
line-height: normal;
width: 67%;
text-align: left;
margin:0 5px;
}
#BDRS-widget .link{
color: #0000FF;
font-family: Georgia;
font-size: 12px;
font-style: italic;
text-decoration: none;
text-align: left;
margin:0 10px;
}
#BDRS-widget .link:hover{
color: #990000;
text-decoration: none;
}
#BDRS-widget .gambar{
float: right;
padding: 2px;
}
#BDRS-widget img{
width: 80px;
height: 80px;
border: solid #999 1px;
padding:2px;
}
#BDRS-widget .BD-tac input, textarea {
font-size : 14px;
padding : 5px;
width : 100%;
color : #666666;
font-family : Arial, Helvetica, sans-serif;
margin-bottom : 5px;
border : #666 solid 1px;
background-color: #FFF0F0;
}
#BDRS-widget .BD-tac .mit {
color : #FFFFFF;
cursor : pointer;
font-family : verdana;
font-size : 10px;
padding : 0 0 3px 0;
text-transform : uppercase;
width : 70px;
height : 25px;
background-color : #990000;
border-color : #111;
margin-right:2px;
font-weight: bold;
}
#BDRS-widget .BD-tac .mit:hover {
background-color : #FF0000;
color : #CCCCCC;
border-color : #550000;
}
/* End CSS Code Widget Contact with profil */

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code HTML dibawah ini, paste pada gadget anda.
• edit kode tersebut dan save untuk melihat hasilnya, semoga bermanfaat untuk blog anda.
  

<!-- Rivai Silaban | BLOG DESIGN Widget Contact with profil start -->
<div id="BDRS-widget">
<h2>Admin Profil Card</h2>
<div class="profil">
<div class="gambar">
<img alt="admin" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtg-2IFYC1QFZf6PzeN7I4iiQO2TZDL7_DK_JKTIGbKE0AgwvtucOgGElqSOc6UUzafJfwVkxHHeBJtT83_M0-Dehl9_0baWwtgBhZwqN8xYFJGZWhSdvJsHhtdOVsa-aHct0bk2TdROQ/h120/rivai.jpg" title="Admin" />
</div>
<div class="text">
Tunduk bukannya saya takut tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.
</div>
<span><a class="link" href="LINK PROFIL ANDA " target="_blank" title="profil admin">See more...</a></span></div>
<div style="margin-bottom:35px;"><div style="margin: 2px;text-align:center" >
<div class="smallfont" style="margin-bottom: 2px;"><input type="button" class="BD_button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Contact Admin'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Contact Admin'; }" value="Contact Admin"/>
</div>
<div style="border: 0px inset; margin: 0px; padding: 0px; font-family: 'Courier New', Courier, monospace; font-size: 12px;">
<div style="display: none;text-align: left;padding:0 10px;">
<div class='BD-tac'><form action="mailto:ALAMAT EMAIL ANDA" method="post" enctype="text/plain">
<div >
<input name="name" size="20" onblur="if (this.value == &#39;&#39;) this.value = &#39;Name&#39;;" onclick="if (this.value == &#39;Name&#39;) this.value = &#39;&#39;;" type="text" value="Name" />
</div>
<div>
<input name="email" size="20" onblur="if (this.value == &#39;&#39;) this.value = &#39;Email&#39;;" onclick="if (this.value == &#39;Email&#39;) this.value = &#39;&#39;;" type="text" value="Email" />
</div>
<div><textarea name="comment" cols="15" wrap="physical" ></textarea>
<br/><div style="margin-bottom:-30px;"><input class='mit' type="submit" name="submit" value="Submit" title="Submit" /><input class='mit' type="reset" name="reset" value="Reset" title="Reset"/></div>
</div></form></div> </div></div></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN Widget Contact with profil end -->

Keterangan Gambar

• Code warna MERAH pada CSS merupakan lebar dari widget contact ini. silahkan anda eit CSSnya sesuai dengan selera anda atau template anda.
• Code warna BIRU merupakan link profil dan alamat email .
• Code warna HIJAU merupakan text singkat mengenai admin.
• Code warna KUNING merupakan link gambar admin.
  

Kesimpulan

Widget contact with profil ini merupakan widget yang sangat diperlukan dalam halaman blog, Tampilan yang enik dan menarik serta kode yang ringan menjadikan widget yang satu ini menjadi pilihan para blogger mania.

Bila anda mengalami kesulitan dalam memasang widget contact ini di blog kesayangan anda atau anda menemukan kode yang error silahkan hubungi saya atau share bersama saya dengan fasilitas form komentar dibawah ini. Pergunakan semua fasilitas di blog ini untuk membantu mempermudah anda.

Widget contact with profil admin
Kamis, 17 oktober 2013
Rivai Silaban | Blog Design Owner

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 : 9:31 AM