Cara Membuat Tampilan Form Berlangganan FeedBurner Blog Menjadi Lebih Menarik

komputerdia.com - Banyak sekali cara yang bisa di lakukan untuk membuat situs kesayangan kalian menjadi lebih responsive dan menarik untuk dikunjungi orang lain, salah satunya adalah dengan cara mempercantik tampilan halaman situs, baik secara keseluruhan ataupun pada beberapa bagian saja.

Dalam tutorial kali ini, saya akan menjelaskan bagaimana cara membuat tampilan widget berlangganan feedburner situs menjadi lebih menarik dan trik yang saya bagika ini bisa kalian tata ulang kembali sesuai dengan tema situs yang kalian miliki.

Baca Juga Artikel Menarik Lainnya :

• Cara Mudah Membuat Semua Link Open New Tab Otomatis Di Blogger
• Cara Memasang dan Mengalihkan Http ke Https Untuk Blogger Custom Domain
• Cara Mudah Menghilangkan Kode ?m=1 dan ?m=0 Pada Platform Blogger

Pengertian FeedBurner / RSS

FeedBurner merupakan sebuah layanan yang dikhususkan untuk tehnologi internet dimana salah satu peranannya adalah bisa menopang para blogger atau yang memiliki website untuk memfasilitasi dalam hal mempublikasikan serta mempromosikan dengan segera pada tiap-tiap artikel yang telah mereka publikasikan.

Sementara penjelasan resmi dari situs resminya menerangkan bahwa feedburner merupakan sebuah web-based tools yang memberikan kita kemudahan untuk mempromosikan dan memanage blog secara utuh. FeedBurner didirikan pada 2004 silam. Awalnya merupakan layanan tersendiri, namun akhirnya diakusisi oleh Google khusus buat pengguna blogger.

Jika merujuk pada penjelasan Wikipedia, FeedBurner merupakan layanan manajemen umpan web (web feed), yang terdiri dari RSS feed dan alat pengelola (management tools) untuk blogger dan podcaster serta aplikasi publikasi lain yang berbasis web.

Cara Mempercatik Tampilan Form Feedburner Blogspot

• Langkah pertama silahkan kalian masuk ke akun blogger
• Setelah itu, kalian masuk pada menu Tata Letak kemudian pilih menu Tambahkan Gadget

• Selanjutnya kalian pilih menu HTML/JavaScript

• Kemudian kalian copy kode berikut ini pada kotak javaScript tersebut, setelah itu silahkan simpan widget tersebut dan lihat perubahannya

 <style>
#subscribe-css {margin:0;padding:0;float:right;display:block;position:relative;}
.subscribe-wrapper {background:#00008B;width:260px;height:200px;color:#fff;font-size:14px;font-family:'Arial';line-height:20px;padding:40px 20px 10px 20px;text-align:center;border-radius:3px;}
.subscribe-wrapper p {margin:0;margin-bottom:30px;}
.subscribe-form {clear:both;display:block;margin:10px 0;overflow:hidden;}
form.subscribe-form {clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden;}
.subscribe-css-email-field {background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mc8vL2L9PQffCMizE_QeVGGHYWY76OiMXnaShPPLodqJeEBU5USTMjJEq01KCA2t3NYg_nFRvWFDZHuyR7hriZeOknjrUgQKD5J3YgcUCAAfnd588TtJFZmJcX1Lj6IA2qGH1ASBYlLZ/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}
.subscribe-css-email-button {background:#30abd5;color:#fff;cursor:pointer;font-weight:700;
padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;}
.subscribe-css-email-button:hover {background:#0099cc;color:#fff;}
</style>

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p><b>If you like the content of articles on this site, you can get the latest updates by following this site</b></p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=KomputerdiaBerbagiTutorial" class="subscribe-form" method="post" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=KomputerdiaBerbagiTutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="KomputerdiaBerbagiTutorial" /><input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="subscribe-css-email-field" name="email" placeholder="Input Your Email in Here " /><input class="subscribe-css-email-button" title="" type="submit" value="FOLLOW THIS SITE" /></form>
</div>
</div>
</div>

Keterangan Script :

1. Tulisan berwarna biru, silahkan ganti dengan id Feedburner kalian
2. Tulisan berwarna merah, silahkan kalian ganti dengan kalimat-kalimat yang kalian inginkan
3. Tulisan berwarna pink, silahkan kalian ganti dengan warna background yang kalian inginkan

• Selesai dan semoga bermanfaat untuk kalian semuanya

Share this post