Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, October 17, 2013

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://lh5.googleusercontent.com/-fHSdEJbVsm4/Ufd7AMNBd1I/AAAAAAAABmg/sfn_THiakGM/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 9:31 AM

8 comments :

  1. blog yg mantap, master class...xixixi
    Salam ti Beben Koben si bloglang anu ganteng kalem tea \m/

    Horas...by Sitepu boru Sembiring...akakakak Mamak awak KARO brooo :P

    ReplyDelete
    Replies
    1. salam kenal dari saya pribadi
      owner Blog Design Rivai Silaban buat lae dan keluarga..

      thx atas pendapatnya dan kunjungannya...

      Delete
  2. kalau mau pasang di laman bisa nggak mas ?

    ReplyDelete
    Replies
    1. sebenarnya boleh sih tapi kekecilan ukurannya nanti kalo di besarin kurang menarik..

      tapi silahkan di lihat dulu link dibawah ini untuk membuat satu halaman kontact with admin profil..

      http://rivai-silaban.blogspot.com/2013/09/cara-membuat-halaman-kontak-di-blog.html

      Delete
  3. Apa kabar nya Bang Rivai semoga baik-baik saja
    Keren Bang Artikel nya ijin simak dan belajar
    Terima kasih atas artikelnya, salam sukses

    ReplyDelete
    Replies
    1. alhamdullillah sehat bang...
      amin bang..
      makasih atas pendapatnya.
      silahkan disimak bang saud

      Delete
  4. tanks atas artikel yang bermanfaat ......horasss

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog