Mempercantik Formulir Berlangganan

Mempercantik Formulir Berlangganan. Mungkin judulnya sedikit alay y sobat? tidak apa-apalah yang penting saya bisa berbagi dengan kalian semua. Widget ini menurut saya menarik dan cantik deh pokoke tidak menyesal buat sobat yang suka mempercantik blog. Di dalam widget ini sobat dapat menaruh link berupa gambar dan keterangannya, seperti Facebook, Twitter dan Langganan Artikel via Email. Dari pada penasaran mendingan lihat aja demonya dibawah ini.

• 

  Follow Me

  Ikuti jejak oketrik di Twitter.
• 

  Via E-Mail

  Trik yang di oketrik ke email kamu?? buruan langganan...!!!.
• 

  Fans Facebook

  Buruan gabung oketrik Di facebok.

bagaimana pendapat sobat? bagus bukan? kalau sobat ingin memasangnya sobat dapat mengikuti langkah di bawah ini.

1. Login ke blogger
   
   
   
2. masuk ke Rancangan (dulunya tata letak)
   
   
   
3. setelah itu tambahkan sebuah gadget, untuk penempatannya saya sarankan pasang di sidebar
   
   
   
4. setelah itu pilih yang HTML/Javascript
   
   
   
5. lalu masukan kode di bawah ini ke dalamnya
   
   
   <style type="text/css">#langganan {list-style: none;margin: 0px;}
   
   #langganan li {list-style: none; padding: 10px; position: relative; margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; height: 50px;}
   
   #langganan li h4 {list-style: none; margin: 0 0 0 45px; font-size: 24px; line-height: 26px; color: #333333; font-family: Helvetica, Arial, sans-serif; font-weight: bold; display: block; clear: none; border: none;}
   
   #langganan li p {list-style: none; margin: 0 0 0 45px; font-size: 13px; letter-spacing: -0.02em; clear: none;}
   
   #langganan li img {list-style: none; float: left; position: relative; padding: 0px; margin: 0px 20px 0px 0px;}
   
   #langganan li a.linkblock {list-style: none; background: none;border: none; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; position: absolute; z-index: 50;}
   
   #langganan li:hover {list-style: none; background-color: #F5F5F5;}</style>
   
   <ul id="langganan">
   
   <li> <a class="linkblock" href="ALAMATTWITTERSOBAT" title="My Twitter"></a><img alt="Twitter" src="ALAMATICONGAMBARTWITTERSOBAT" /> <h4>Follow Me</h4> <p>KETERANGAN UNTUK TWITTER SOBAT.</p> </li>
   
   <li> <a class="linkblock" href="http://feedburner.google.com/fb/a/mailverify?uri=oketrik" title="Via E-Mail"></a><img alt="E-Mail Delivery" src="ALAMATICONBERLANGGANANSOBAT" /> <h4>Via E-Mail</h4> <p>KETERANGAN UNTUK BERLANGGANAN.</p> </li>
   
   <li> <a class="linkblock" href="ALAMATFACEBOOKSOBAT" title="Fans Facebook"></a><img alt="Facebook Fans" src="ALAMATICONGAMBARFACEBOOKSOBAT" /> <h4>Fans Facebook</h4> <p>KETERANGANUNTUKFACEBOOK</p> </li> </ul>
   
   
   
   
   Penjelasan :
   
   • background-color: #F5F5F5 >> ini menunjukan warna background apabila disentuh, sobat dapat menyesuaikan warna background tersebut dengan warna template sobat.
   • http://feedburner.google.com/fb/a/mailverify?uri=oketrik >> ini menunjukan alamat untuk berlangganan (untuk mengisi email untuk berlangganan), sobat dapat mengganti dengan alamat berlangganan sobat, biasanya terdapat pada tombol berlangganan dari feedburner.
6. setelah itu sobat dapat menyimpannya

Mungkin Mempercantik Formulir Berlangganan hanya segitu saja cara yang bisa saya sampaikan, oiya maaf kesempatan kali ini saya tidak berbagi tentang css3 karena g ada waktu buat experimen dan mencari triknya. oiya mungkin untuk lamat form berlangganan akan sulit di dapatkan apabila sobat tidak mempunyai akun feedburner, jadi buat dulu y. Sekian dari saya, Terima kasih dan Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg