Cara Menciptakan Kotak Berlangganan Keren Di Blog

Baca Juga

Cara Membuat Kotak Berlangganan Keren Di Blog: Baiklah shobat kali ini akan coba membahasas tutorial keren untuk blogger shobat.
Kotak Berlangganan atau biasa di sapa Box Subscribe, nah Kotak Berlangganan yang kita bahas kali ini iyalah Kotak berlangganan Via Email, bahwasanya sebelumnya aku juga sudah pernah membagikan Tutorial-tutorial yang temanya sama membahas Box Subscribe/Kotak Berlangganan.

Artikel Terkait: 
- Widget Box Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
- Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog

Sebenernya artikel ini sudah usang aku buat tetapi waktu publikasinya kurang sempurna hee, mengingat kemaren juga ada pengunjung yang menanyakan cara pembuatan kotak berlangganan yang kita bahas ketika ini, yaa aku bagikan.
Untuk melihat demonya silahkan lihat di homepage blog ini.
Bagaimana dengan kau tertarik memasangnya di blog kamu?, Silahkan ikuti tutorialnya di bawah ini.

Cara Membuat Kotak Berlangganan Keren Di Blogger

1. Silahkan kau masuk terlebih dahulu ke Blogger>Tema>Edit Html blog kamu, kemudian pastekan instruksi berikut sempurna sebelum instruksi ]]></b:skin> atau </style>, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

 .iddzgn-subscribe-form{clear:both;display:block;overflow:hidden} form.iddzgn-subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}.iddzgn-subscribe-css-email-field:focus{box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);} .iddzgn-subscribe-css-email-field{transition:all .3s;background:transparent;color:rgb(21, 74, 74);margin:10px 0;padding:15px 20px;width:99%;max-width:250px;border:2px solid;} .iddzgn-subscribe-css-email-button{width:99%;max-width:150px; background:transparent;color:rgb(255, 122, 122);cursor:pointer;font-weight:710;padding:13px 30px;margin-left:15px;text-transform:none;font-size:17px;border:2px solid;transition:all .6s} .iddzgn-subscribe-css-email-button:hover{background: rgba(0,0,0,0.8);border: 2px solid rgb(255, 255, 153);box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);font-weight: bold;}.newsletter-box{;color:#1a4042;text-align:center}.newsletter-box__title,.newsletter-box__subtitle{text-shadow:1px 1px 1px rgba(0,0,0,0.3)}.newsletter-box__title{margin-top:0;font-size:2.9em}.newsletter-box__subtitle{font-size:1.2em}.newsletter-box__form{margin:25px auto 0 auto;max-width:380px;font-size:1.3rem}.newsletter-box__input{font-size:1rem} 

2. Lalu silahkan kau cari instruksi <div id='post-wrapper'> atau <div class='post-inner'>, dan pastekan instruksi berikut di bawahnya. Perlu di ingat strukture instruksi Html pada template tidak selalu sama jadi jikalau kau tidak menemukan instruksi di atas, kau dapat berkomentar di kolom komentar di bawah.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='newsletter-box'> <div class='l-container-center'> <h3 class='newsletter-box__title'>INSPIRING YOUR CREATIVITY !</h3> <p class='newsletter-box__subtitle'>GET EXCLUSIVE CONTENT BY SUBSCRIBING TO OUR DAILY NEWSLETTER !</p> <div class='iddzgn-subscribe-form'> <form action='https://feedburner.google.com/fb/a/mailverify?uri=iddzgn' class='iddzgn-subscribe-form' method='post' onsubmit='window.open (&#39;https://feedburner.google.com/fb/a/mailverify?uri=iddzgn&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'> <input name='uri' type='hidden' value='iddzgn'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='iddzgn-subscribe-css-email-field' name='email' placeholder='Enter your Email..'/><input class='iddzgn-subscribe-css-email-button' title='SIGN UP' type='submit' value='SUBSCRIBE'/></form> </div> </div> </div></b:if></b:if>

Silahkan kau ganti iddzgn dengan ID Feed Bunner kamu.

Jika kau ingin menampilan Kotak berlangganan ini di semua halamana kau dapat hapus tag berikut

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
..........................
........................
.....................
.....................
....................
</b:if></b:if>

Titik-titik di atas yaitu bayangan instruksi yang ada di bungkus oleh tag pengecualian (Jangan Di Hapus)
Silahkan kau hapus instruksi yang sudah di warnai di atas untuk menampilkan Kotak berlanganan di semua halaman.

Oky jikalau sudah silahkan kau save/simpan template, kemudian lihat kembali blog/web kau boommmm selamat kau berhasil.
Nah mungkin sampe di sini saja ya, salam semua agar bermanfaat.