Cara Membuat Kotak Subscribe Pada Blog Dengan Keren, yup kali ini saya ingin membagikan sebuah tutorial yang dimana akan mempunyai kegunaan bagi blog anda yakni menciptakan kotak subscribe untuk berlangganan pada blog anda.
Kotak subscribe ini sama halnya menyerupai tombol subscribe pada youtube fungsinyapun sama, tetapi yang membedakan kalau youtube sudah otomatis tersedia tanpa dibentuk lagi sedangkan kalau pada blog harus dibentuk dengan cara khusus.
Tenang cara membuatnyapun tidak begitu sulit, kalau ingin cara sederhana dan tampilannya sederhana anda tinggal mengaaktifkannya dimenu tatak letak kemudian tambahkan gadget dan disitu pilihan mengikuti memakai email, igu cara sederhananya dan tampilannyapun sangat sederhana.
Kalo anda ingin menciptakan kotak subscribe dengan tampilan keren dan menarik anda sanggup kok, tetapi anda harus mempunyai akun feedburner silakan anda buat terlebih dahulu akun feedburnernya atau anda sanggup baca disini
Cara Membuat Akun Feedburner Dengan Mudah.
Oh iyaa disni saya menawarkan beberapa tampilan kotak yang berbeda silakan anda pilih sesuai selera.
Cara Membuat Kotak Subscriber Keren
1. Silaka anda buka blog anda tambahkan gadget dimana saja, saya sarankan paling bawah kemudian anda pilih HTML/Javasript kemudian copy arahan dibawah ini.
<style> #dgenera-blog { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } #email-news-subscribe .email-box{ padding: 5px 5px; font-family: "Arial","Helvetica",sans-serif; height:38px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#666 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333)); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:white; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background-image:-moz-linear-gradient(top,#333,#666); background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:#FFFFFF; } #other-social-bar { padding: 0px; overflow: hidden; height:37px; margin-top:-8px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; overflow: hidden; padding:5px; width: 270px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow li { display:inline; border:0; } #other-social-bar .other-follow li a { font-size: 12px; color:#666; font-weight: bold; font-family:arial; display:inline; } #other-social-bar .other-follow li.my-rss { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzE5crpVNA5MuNOkCNh6mzCC4bgGt1uPNSW1I7gX6x2oXtmKMmivrE_IEXqV6YiHex1azqeXIrBlId9jHaCLRupoU2IYmBlPdN-nauGPkGNT95Q8oxJKuxSmZHiPvYGg5l14-jmXrsMOs/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-twitter { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPqx82e96yTSiJ2j8Mw4X95AuE9e2hzpHhnxLZqbhN98qo5BdrAkFhpiJdUiiev8PMh_PLUbRFfPBT4LwYzTYGTCXrhGyjifDU1h__Pj9BuyKaA_tvmtckIwpnhTKgAndcLWSY_vTDXo/s400/twitter%2527.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9k4WcVRYYqYah3_ZN8pcYzwFYzoYSnojpFOkScMpC9zuXGncpmAY0xUxDBrrSZLHK5Y4HTFVBbjA7aonJUzjbcukvRuO-czX5FtJTVeuMwzN3TnJFPoDhk1BwwtYVlcnp1npXCIxT8EA/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} .emailicon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkiY5vF-mZePecEZ89DXytWwgZ1oigS6yFW_tffkN_RL4PIHdzSxH71Dh5WjKPa9RVUicSSqa5R40ZVp8TONYuq_Kvx2kT1JNL3OXecTMjBe0NPBIAH1lxPtsSspS11BaInayYtVy6FoS/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent; padding: 0px 20px 0px 95px; min-height:100px; margin: 0px; width: 183px; line-height: 20px; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); } .emailicon p { color:#FF8604; font-size: 20px; font-weight: normal; font-family: impact; padding:40 0px 10px 0px; margin:0; padding-top: 20px; line-height: 25px; text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6; } </style> <!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #333; } </style> <![endif]--> <div id="Blogoooblok-blog" > <div class="emailicon"><p>Dapatkan Update Artikel Gratis! </p></div> <div id="email-news-subscribe"> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Blogoooblok', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter Email Anda Disini..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /> <input type="hidden" value="duarebu" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="Cara Membuat Kotak Subscribe Pada Blog Dengan Keren" href="http://feeds.feedburner.com/duarebu" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="Cara Membuat Kotak Subscribe Pada Blog Dengan Keren" rel="author" href="https://twitter.com/duarebu" target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Cara Membuat Kotak Subscribe Pada Blog Dengan Keren" rel="author" href=https://plus.google.com/u/0/duarebu/posts target="_blank">Google Plus</a> </li> </ul> </div> </div>
Penjelasan:
Tulisan yang berwarna merah ganti dengan id feedburner anda.
Tulisan berwarna hijau ganti dengan almat akun twitter
Tulisan yang berwarna kuning ganti dengan alamat google+ kalian.
Tulisan berwarna biru ganti sesuka anda.
● Jika semua sudah tamat simpan gadget dan lihat hasilnya. Contoh dibawah ini
Sample yang kedua caranya masih sama dengan yang diatas hanya beda arahan html.
2. Silakan copy arahan dibawah ini dan paste di gadget => HTML/Javascript.
<style type='text/css'> #subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #E0E0DF;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px} #subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #95A5A6;text-align: center;background: #F1F1F1;text-transform:uppercase;border-radius:2px 2px 0 0;} #subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;} #subscribe-box .emailfield {padding: 0px 20px 10px;} #subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;} #subscribe-box .emailfield input:focus {outline: none;} #subscribe-box .emailfield .submitbutton {background: #008287;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;box-shadow: 0px 3px 0px 0px #00686C} #subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;} #subscribe-box .emailfield .submitbutton:hover{background: #00686C;} </style> <div id='subscribe-box'> <div class='title'> Duarebu.com </div> <p> Bagi sobat yang ingin menerima gosip terkini seputar blogger, silakan isi form berikut.</p> <div class='emailfield'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=duarebu/zfxc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/> <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input name='uri' type='hidden' value='duarebu/zfxc'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now'/> </form> </div> </div>
Penjelasan:
Tulisan berwarna hijau ganti sesuai impian anda.
Tulisan berwarna merah ganti dengan id feedburner milik anda.
Sebagai teladan yang kedua silakan lihat milik saya.
3. Untuk yang ketiga ini agak sedikit ribet anda perlu meletakkan beberapa arahan pada template.
● Masuk pada blog => Tema => Edit Html dan cari arahan </style> letakan arahan dibawah ini sempurna diatas arahan </style>.
#nubz-two {background:#4d9fd6;color:#fff;padding:20px;margin:0} #nubz-two h4 {background:transparent;color:#fff;padding:0;border:0;margin:0 0 20px 0} #nubz-two form {margin:0;} #nubz-two input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#fff;border:2px solid #fff;color:#333;padding:9px 11px;width:100%} #nubz-two input[type="submit"]{background:rgba(255,255,255,.2);color:#fafafa;margin:0;width:100%;border:none;cursor:pointer;font-size:15px;padding:12px 20px;font-weight:700;transition:all .3s;} #nubz-two input[type="submit"]:hover{background:#79beed}
Simpan tema.
● Buat gadget gres menyerupai cara nomor satu diatas. Lalu copy arahan dibawah ini dan paste digadget.
<div class="widget nubz-widget" id="nubz-two"> <div class="widget-wrap"> <div class="nubz"> <h4 class="widget-title widgettitle">Email Berlangganan</h4> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=nubietheme/KZPo','.popupwindow','scroollbars=yes,width=550,height=520');return true"> <p>Berlangganan artikel terbaru dari blog ini pribadi via email</p> <input type="text" name="email" placeholder="Alamat Email"/> <input type="hidden" value="nubietheme/KZPo" name="uri"/> <input name='loc' type='hidden' value='en _US'/> <input type='submit' value='Subscribe'/> </form></div></div></div>
Simpan gadget.
Penjelasan:
Ganti yang berwarna merah dengan id feedburner anda.
Ganti yang berwarna merah ganti sesuai impian anda.
Sebagai teladan dibawah ini.
Nah hingga disni pembahasan saya kali ini, biar sanggup membantu anda.
Kenapa kode-kode html gk saya rapihin ? Blog-blog saya ini.
Jika ada yang perlu ditanyakan silakan komentar dibawah ini. Sumber https://www.duarebu.com/
