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

Tuesday, August 6, 2013

cara membuat widget kontak email valid html5

Membuat kontak email dihalaman blog valid html 5 , dapat mempermudah pengunjung blog untuk menghubungi admin blog tersebut. Fasilitas yang satu ini dapat anda pergunakan untuk pengunjung setia halaman blog anda untuk tetap dapat menghubungi anda secara langsung dan pribadi, sebab pengunjung akan mengirimkan pesan email langsung kepada anda, pabila pengunjung membutuhkan sesuatu hal yang kurang dimengerti tentang artikel yang telah diposting pada halaman blog. Untuk melihat DEMOnya silahkan lihat dihalaman bawah blog ini klik " CONTACT ADMIN " untuk melihat tampilannya. dan berikan apresiasi anda tentang tampilan kontak email tersebut. Oke untuk mewujudkan hal tersebut saatnya kita menuju TKP.


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

  5. .BD-tac input, textarea {
    border : rgb(9, 149, 223) solid 1px;
    font-size : 14px;
    padding : 5px;
    text-shadow : 1px 1px 0 #FFF;
    width : 100%;
    color : #666666;
    font-family : Arial, Helvetica, sans-serif;
    margin-bottom : 5px;
    border : rgb(9, 149, 223) solid 1px;
    border-color : #0066FF;background-color: #F2FDFD;
    }
    .BD-tac .mit {
    color : #000000;
    cursor : pointer;
    font-family : verdana;
    font-size : 10px;
    padding : 0 0 3px 0;
    text-shadow : none;
    text-transform : uppercase;
    width : 70px;
    height : 25px;
    background-color : #0099FF;
    border-color : #0000CC;margin-right:2px;
    }
    .BD-tac .mit:hover {
    background-color : #00CCFF;
    color : #000000;
    border-color : #550000;
    }
    .BD-tac .mit:active {
    box-shadow : 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    outline : 0;
    }



  6. Setelah CSSnya terpasang saatnya kita memanggil kode HTMLnya dengan memasang dibagian mana saja pada halaman blog anda,
    Untuk tutorial kali ini saya mencoba untuk memasangnya pada widget blog dibawah halaman .
  7. Untuk memasang di widget blog pilih " Tata Letak "
  8. Dalam postingan kali ini saya mimilih widget dibawah halaman.
  9. klik " Add Gadget " setelah anda klik kemudian pilih " HTML/JavaScript "
  10. Copy code dibawah ini dan pastekan kedalam widget tersebut.

  11. <div><div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input value="Contact Admin" style="margin: 0px; padding: 0px; width: auto; font-size: 15px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Contact Admin'; }" type="button"/>
    </div>
    <div class="alt2" style="border: 0px inset ; margin: 0px; padding: 0px;">
    <div style="display: none;">
    <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><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>


  12. Save perubahan dan lihat hasilnya.



Kesimpulan

Ganti tulisan warna MERAH dengan alamat email anda.

Untuk lebih kreative silahkan edit code CSS nya baik itu warna dan tampilannya sesuai dengan tampilan halaman blog anda agar lebih serasi.
Contact Email ini tidak mempengaruhi loading blog anda jadi anda jangan terlalu cemas untuk masalah loading sebab saya selalu memperhitungkan hal itu dalam membuat suatu tutorial blog. salam Bloger, semoga tutorial ini bermanfaat untuk anda.

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 : 10:26 PM

0 komentar :

Post a Comment

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