Salah satu untuk mendapat pengunjung setia yaitu memasang tombol subscribe di Blogger. Tombol subscribe ini sangat penting untuk sebuah blog alasannya yaitu dengan adanya tombol ini pengunjung dapat berlangganan artikel dikala anda sedang update dan pengunjung dapat mendapat update'an terbaru tersebut melalui email mereka. Nantinya dikala anda menciptakan artikel baru, maka artikel tersebut akan terkirim ke email pengunjung dan kemungkinan mereka akan melihat notifikasi email tersebut dan mengunjungi blog anda. Kali ini aku akan membagikan Tombol Subscribe Newsletter dimana tombol ini dapat anda letakan dibagian Footer, dibawah postingan, atau di Sidebar. Ok, pribadi saja ke proses pembuatan.
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema
3. Edit HTML.
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste isyarat berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* Top Subscribe */ #subscribe{ display:block; background-color:#374760; position:relative; width:100%; padding-top:25px; padding-bottom:25px; z-index:9; } input#wq{ background:#fff; color:#333; font:400 15px/12px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin:0; padding:21px; width:60%; height:22px; outline:0; border:none; border-radius:4px; box-shadow:initial; transition:all .1s; } #subscribe p{ float:none; width:100%; margin-top:10px; margin-bottom:-10px; font-weight:bold; text-align:center; text-transform:uppercase; font-size: 15px; letter-spacing:0.07em; color:#fff; } #subscribe p::selection{ color:#333; } input#wq:focus{ color:#333; box-shadow:inset 0 2px 2px rgba(0,0,0,0.15); } form.subscribe-form{ position:relative; width:80%; margin:20px auto; text-align:center; } form.subscribe-form:focus { box-shadow:inset 0 2px 2px rgba(0,0,0,0.15); } .sidebar-subscribe-box-form{ clear:both; display:block; margin:15px 0; } form.sidebar-subscribe-box-form{ clear:both; display:block; margin:10px 0 0; width:auto; } input#subscribesubmit{ background-color:#36a7f2; border:1px solid transparent; color:#fff; display:inline-block; position:absolute; right:25%; top:0; padding:10px 20px; border-radius:0 4px 4px 0; transition:.2s all; font-weight:600; text-transform:uppercase; font-size:14px; } input#subscribesubmit:hover, input#subscribesubmit:focus , input#subscribesubmit:active{ background-color:#1f6b9a; color:#fff; cursor:pointer; outline:0; } @media only screen and (max-width:768px){ input#subscribesubmit{ top:10px; width:100%; border-radius:4px; float:none; position:relative; right:0; } #subscribe{ padding-bottom:30px; } input#wq{ width:100%; } p#subscribe{ font-size:14px; letter-spacing:0.15em; } @media screen and (max-width: 768px){ #subscribe-email{ width:85%!important; }<footer id='footer-wrapper'> Jika ingin meletakkan di footer, letakkan isyarat berikut ini sempurna diatasnya goresan pena copyright.
<data:post.body/> Jika ingin meletakkan dibawah postingan, pilih isyarat yang ke-2 atau anda dapat meletakkan isyarat berikut ini dibawah tombol share <div class='sharepost'>
4. Copy & Paste isyarat berikut ini, dan letakkan sesuai dengan selera anda dimana saja.
<div id='subscribe'> <p>SUBSCRIBE TO NEW ARTICLE</p> <form action='https://feedburner.google.com/fb/a/mailverify?uri=/HBiCa' class='subscribe-form emailsubscribe' data-code='p4s8z2' method='POST'> <input id='subscribe-email' onblur='if (this.value == "") {this.value = "Masukan Email . . .";}' onfocus='if (this.value == "Masukan Email . . .") {this.value = "";}' pattern='[a-zA-Z0-9.!#$%�*+/=?^_`{|} -]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*' required='required' style='background:#fff;color:#333;font:400 15px/12px"Roboto",Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;padding:9px 20px;width:40%;outline:0;border:1px solid transparent;border-radius:4px;box-shadow:initial;transition:all .1s;' type='email' value='Masukan Email . . .'/> <input id='subscribesubmit' type='submit' value='Daftar'/> </form> </div>Demikian Tutorial Blogger kali ini, jikalau terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage atau postingan anda, widget tersebut udah muncul atau belum. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Tombol Subscribe Responsive di Blogger
