Cara Menciptakan Widget Subscribe Di Blog

Cara Membuat Widget Subscribe di Blog - Widget subscribe merupakan salah satu widget yang wajib di tambahkan ke dalam blog, kenapa saya bilang wajib karna dengan adanya widget ini pengunjung blog Anda sanggup dengan gampang berlangganan artikel-artikel blog Anda melalui email mereka.

Sebuah kotak/ Box dengan tombol subscribe ini mempunyai banyak fungsi, selain untuk berlangganan widget ini sanggup menciptakan blog Anda mendapat banyak pengunjung dengan cepat. Dan juga sanggup membantu menyebarkan blog Anda dengan trafik yang tergolong stabil.

Setiap kali pengunjung gres di blog Anda dan mereka menambahkan email mereka ke dalam kotak subscribe Anda maka otomatis setiap kali Anda update sesuatu atau memposting sesuatu ke dalam blog Anda maka mereka akan pribadi mendapat pesan berupa pemberitahuan bahwa ada sesuatu yang gres di alog Anda.

Bagaimana Anda tertarik menambahkannya ke dalam blog Anda?

Sebenarnya di dalam hidangan widget blogger sudah terdapat kotak subscribe ini, dan cara membuatnya pun sangat lah gampang kalian hanya perlu masik ke Dashboard => Tata Letak => Tambahkan Widget => Pilih Tautan Berlangganan.  Namun tampilanya masih kurang menarik dan keren berdasarkan saya. Nah untuk membuatnya lebih keren dan menarik silahkan ikuti kangka saya di bawah ini untuk membuatnya :

Cara Membuat Widget Subscribe Box Menjadi Keren dan Menarik

1. Masuk ke akun Blogger Anda, dan di hidangan Blogger silahkan pilih layout/tata letak.
2. Klik tambah widget / Add a Gadget.
3. Pilih HTML/JavaScribe.

4. Copy dan pate aba-aba scribe di bawah ini ke dalam widget HTML/JavaScribe.

<div id='subscribe-css'>

<h4><p class='subscribe-note'>

<span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p></h4>

<div class='subscribe-wrapper'>

<div class='subscribe-form'>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/######' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/####', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>

<input name='uri' type='hidden' value='http://feeds.feedburner.com/#####'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>

</div>

</div>

</div>

5. Klik save dan masuk ke hidangan blogger pilih tema => edit HTML.

6. Copy dan paste aba-aba CSS ini di atas kode ]]></b:skin> atau </style>.

/* Subscribe Box */
#subscribe-css{position:relative;padding:5px 0;background:#edeff1;overflow:hidden;border-top:2px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:#58585a;font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:#777;text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

7. Simpan tema dan lihat hasilnya.

Keterangan :

• Silahkan ganti tanya ### dengan ID FeedBurner, kalau belum punya silahkan ikuti panduan saya cara menciptakan ID FeedBurner
• Untuk ukuran tidak perlu Anda ubah karna sudah resposive.
• Jika warna goresan pena atau kotaknya kurang sesuai dengan template blog Anda silahkan Anda ganti sesuka hati.

Itu tadi cara saya menciptakan widget subscribe di blog, cukup gampang bukan, kalau masih ada kekurangan silahkan berkomentar dengan memberi saran, semoga sama-sama sanggup menyebarkan blog ini lebih baik lagi.

Berbagi :