Cara Mudah Membuat Box SUBSCRIBE




Cara Mudah Membuat Box SUBSCRIBE

Cara Mudah Membuat Box SUBSCRIBE 


Selamat datang kembali di blog ini, Nah kesempatan kali ini saya akan berbagi cara membuat box berlangganan di blog. Fungsi Kotak berlangganan ini adalah untuk memasukan email yang biasanya terdapat pada Blog atau Website yang bertujuan adalah untuk agar para pengunjung bisa mengetahui update artikel melalui email mereka. dan tidak jauh berbeda juga dengan tombol berlangganan pada Youtube, cara kerjanya sama tetapi untuk blog kita memasukkan Emailnya secara manual di Blog atau website.
saya rasa anda pasti sering melihat box email berlangganan ini pada saat anda membuka postingan orang lain.
FUngsi dari kita pasang kotak berlangganan ini saya rasa sangat lah bermanfaat bagi si pemilik situs tersebut, kenapa saya katakan sangat bermanfaat? karena apa bila pengunjung sudah berlangganan artikel blog anda, maka dari itu pengunjung tersebut akan menegetahui jika ada artikel baru dari blog yang anda buat, dan maka akan otomatis juga bisa menambah visitor blog.
Nah apabila anda ingin memasang subscribe box ini, maka terlebih dahulu blog anda harus didaftarkan ke Feedburner, kalau anda sudah punya ID feedburner baru bisa memasang ID tersebut ke Subscribe Box. jika belum mendaftar klik disini.
Dan kalau anda memang tertarik untuk membuat Subscribe BOX seperti gambar diatas bisa langsung saja anda ikuti cara dibawah ini.

Untuk Demo nya anda bisa klik  di bawah ini ya!!! dan anda scroll ke bawah maka akan terlihat Subscribe Box .

# Langkah-langkahnya Memasangnya.

1. Pertama anda login ke Blog seperti biasa
2. Kemudian anda klik Template dan klik Edit HTML
2. Selanjutnya Copy kode CSS Dibawah ini , kemudian Pastekan tepat di atas kode ]]></b:skin> atau kode </style>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px 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:#2BA6E1;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:#98DEFE;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);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:rgba(255,255,255,.6);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:&#39;&#39;;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%;}
4. Kemudian anda Carilah lagi Kode <div id='footer'>, (cara cepat pencarian tekan CTRL+F) selanjutnya anda letakan code di bawah ini tepatnya di atas atau di bawah kode <div id='footer'> anda tes saja satu persatu.
Karena di blog saya yang satu lagi saya tidak menggunakan kode seperti ini <div id='footer'> 
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Mizipediacom' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Mizipediacom&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Mizipediacom'/><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. Jika sudah dapat maka anda bisa klik save.
==> untuk yang bewarna Orange  anda bisa mengubah text tersebut terserah anda
         dan unutk yang bewarna hijau anda bisa mengubah Id feedburner anda.
Note; jika anda mahir, maka anda bisa meletakan kode di atas sesuka anda , bisa ke samping atas dan bawah.

Mungkin cukup dulu penjelasannyasampai disini, semoga bisa bermanfaat untuk anda. Jika anda kesulitan bisa berkomentar di bawah ini. terimaksih sudah berkunjung di blog ini. salam blogger.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect