Sebelumnya dari kategori ini adalah bagaimana cara menginstall mod 2B dari game Nier: Automata untuk DOA 5 Last Round, yang bisa kalian lihat tutorialnya disini. Dan untuk kali ini, saya akan memberikan tutorial singkat lagi mengenai bagaimana cara membuat dan menambahkan pop up email subscription box pada Blogger. Biasanya, pop up ini akan secara otomatis tambil ketika kita mengunjungi suatu blog. Namun kali ini saya akan buat berupa tombol layaknya form registrasi. Fungsinya sendiri sama dengan tombol subscribe atau berlangganan pada Youtube. Dengan kata lain, jika kita subscribe dengan memasukkan alamat email aktif kita pada subscribe tersebut, maka jika admin telah memposting atau mempublish artikel dari blog tersebut maka kita akan mendapatkan sebuah email masuk yang terdapat sebuah tautan yang mengarah pada posting terbaru, dan seterusnya. Kita pun tidak akan ketinggalan berita dari blog yang kita anggap bermanfaat.

Nah bagaimana cara membuat dan menambahkannya? Check this out guys!

Pertama, kalian harus memiliki blog. Dan saya yakin semua di antara kalian sudah pernah membuat blog dan memiliki blog.
Masuk ke blogger kalian, pilih blog yang ingin kalian pasang fitur ini, lalu pilih Theme dan pilih Edit HTML yang ada di sebelah kanan menu ini.


Perlu diingat! Sebelum mengubah atau mengedit coding dari template, ada baiknya kalian menbackup terlebih dahulu tema dari blog kalian.

Cari HTML tag </body> dan masukan kode ini sebelum tag tersebut (diatas </body>):

<div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>Subscribe to Newsletter</h3>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Hentainojo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
<input name='uri' type='hidden' value='Hentainojo'/>
</form></div></div></div></div>
*Ganti value "Hentainojo" dengan feedburner kalian.

Agar kode ini berfungsi, kalian harus menambahkan link tombol. Disini saya menambahkan link untuk tombol "signup":
*didalam menu navigasi
<a href='#signup'>Signup</a>


Nah, untuk mempercantik tampilannya. Kalian hanya perlu menambahkan hiasan CSS seperti ini:

Cari tag ]]></b:skin>, copy dan paste code berikut sebelum tag tersebut (diatas tag ]]></b:skin>):

 
.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block!important;line-height:50px!important;text-align:center;font-size:24px!important;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px;box-sizing: border-box;}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;box-sizing: border-box;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/s1600/bg.png) no-repeat;box-sizing: border-box;padding:20px;margin:0 -20px -20px;height:80px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;box-sizing: border-box;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;box-sizing: border-box;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}

Lalu jangan lupa disimpan.

Tampilannya akan menjadi seperti ini:



Nah, bagaimana? Kereeeen kaaannn! xD Ok, cukup sekian tutorial kali ini. Semoga bermanfaat, dan sampai jumpa di tutorial Sena How to selanjutnya.

Terima kasih sudah mengunjungi blog ini, jika ada kritik, saran, dan masukan, kalian bisa tinggalkan pesan di komentar atau langsung DM di twitter saya. #chaoo