Mempercantik tampilan blog mungkin diharapkan apalagi blog Anda sudah mempunyai pengunjung tetap. Karena selain harus membaca konten yang sifatnya buletin secara bersiklus pembacapun wajib disuguhi tampilan widget blog yang memberi kesan berbeda, semoga tidak membosankan.
Caranya sangat simpel Sobat blogger cukup sedikit mendesain Kotak berlangganan default Blogger menjadi kelihatan cool dengan trik berikut.
Pada kesempatan postingan ini Saya akan mengajak Sobat blogger untuk menciptakan modifikasi tampilan satu widget berlangganan FeedBurner atau bahasa kerennya Subscribe/follow newsletters via Email atau semacamnya yang awalnya default blogger menjadi tampilan menarik dengan pemanis CSS style dan JavaScript.
Tidak perlu berlatih bagaimana cara merubah tampilan? Dibawah ini saya beri referensi contoh Kotak berlangganan FeedBurner bermacam gaya dari bawaan blogger hingga desain sendiri menggunakan aba-aba khusus.
Style 1 Gambar Asli Kotak berlangganan FeedBurner defailt blogger.
Style 2. Gambar Modifikasi dengan pemanis CSS style di HTML tema ala desainer blog.
Style 3. Gambar Modifikasi kreatif pada sidebar tanpa harus mengedit HTML template.
Style 4. Gambar Modifikasi Subscribe box dengan pemanis Sosial Media yang dipasang pada Sidebar juga tanpa capek edit Tema blog sobat.
Silahkan sahabat lihat satu-persatu secara perlahan.
Mulai dengan Gaya yang pertama yaitu:
Sobat sudah niscaya tahu semua tapi untuk pemula ibarat saya ini tak ada salahnya kalau dijelaskan lagi.
Cara simpel memasang susbcribe pada blogger?
1. Login ke blogspot.
2. Pilih hidangan Layout/Tata Letak > kemudian pilih Tambahan widget (Add gadget) > Pilih konfigurasi Ikuti lewat Email.
Caranya sangat simpel Sobat blogger cukup sedikit mendesain Kotak berlangganan default Blogger menjadi kelihatan cool dengan trik berikut.
Pada kesempatan postingan ini Saya akan mengajak Sobat blogger untuk menciptakan modifikasi tampilan satu widget berlangganan FeedBurner atau bahasa kerennya Subscribe/follow newsletters via Email atau semacamnya yang awalnya default blogger menjadi tampilan menarik dengan pemanis CSS style dan JavaScript.
Tidak perlu berlatih bagaimana cara merubah tampilan? Dibawah ini saya beri referensi contoh Kotak berlangganan FeedBurner bermacam gaya dari bawaan blogger hingga desain sendiri menggunakan aba-aba khusus.
Style 1 Gambar Asli Kotak berlangganan FeedBurner defailt blogger.
Style 2. Gambar Modifikasi dengan pemanis CSS style di HTML tema ala desainer blog.
Style 3. Gambar Modifikasi kreatif pada sidebar tanpa harus mengedit HTML template.
Style 4. Gambar Modifikasi Subscribe box dengan pemanis Sosial Media yang dipasang pada Sidebar juga tanpa capek edit Tema blog sobat.
 |
| How to Create a Subscription Widget by Email on Blog |
4 Style Membuat Widget Subscribe by Email Keren di blog
Silahkan sahabat lihat satu-persatu secara perlahan.
Mulai dengan Gaya yang pertama yaitu:
Style 1. Membuat Kotak Berlangganan Artikel FeedBurner default blogger
Sobat sudah niscaya tahu semua tapi untuk pemula ibarat saya ini tak ada salahnya kalau dijelaskan lagi.
Cara simpel memasang susbcribe pada blogger?
1. Login ke blogspot.
2. Pilih hidangan Layout/Tata Letak > kemudian pilih Tambahan widget (Add gadget) > Pilih konfigurasi Ikuti lewat Email.
- Pada tahap ini, coba lihat <🔍> kalau sudah mendaftarkan email blog sahabat pada kolom URL? blog Anda secara otomatis akan mempunyai URL dan User ID FeedBurner hafalkan ID tersebut kalau nanti diharapkan untuk menciptakan design atau subscribe box modifikasi ibarat cara menciptakan style 2,3,4 dibawah.
- Anda sanggup merubah judul tertera dari Follow by Email menjadi "Dapatkan Artikel Terbaru dari Blog ini" atau dengan bahasa lainnya yang bersifat seruan atau musim berdasarkan anda.
Widget ini tampilannya terbilang sederhana pada sidebar blog. Jika sahabat ingin menciptakan sebuah kreasi ibarat yang telah dibicarakan dimuka sanggup melaksanakan modifikasi ibarat style 2, 3,4.
Style 2. Membuat Subscribe by Email Keren ala Arlinadesign
Widget subscribe ibarat ini umumnya sanggup dipasang dibawah postingan, sidebar atau fotter blog, kalau Anda ingin melaksanakan modifikasi ala Arlinadesign keren bergaya clasik responsive tampilan Kotak berlangganan sanggup menjadi cool.
Langkahnya dengan Memasang pemanis aba-aba CSS style dari Arlinadesign pada Template. Catatan style Arlinadesign sangat aneka macam namun inilah yang versi clasik, simpel, menarik namun simpel dimodifikasi lagi.
Caranya?
Langkah Pertama...
1. Buka blogger anda.
2. Masuk ke hidangan Tema > Klik Edit HTML.
3. Pada tab HTML cari aba-aba ]]></b:skin> (gunakan trik Ctrl+F supaya gampang)
4. Setelah ditemukan pasang aba-aba CSS style berikut ini diatas aba-aba ]]></b:skin>
/* 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:#3cc091;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:#37b185;}
#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:'';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%;}
5. Langkah Selanjutnya... Memasang aba-aba widget Markup berikut di bawah aba-aba <body> pembuka atau diatas </body> penutup, berikut kodenya:
<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=mudahrizki/ID' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=mudahrizi/ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='mudahrizki/ID'/><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>
Ganti semua User ID blog (mudahrizki/ID) yang telah diberi warna merah dengan ID FeedBurner blog Anda.
6. Tinggal Anda klik Simpan Tema.
Untuk kesudahannya silahkan coba lihat pada sidebar blog Anda, tampilan Kotak berlangganan menjadi keren ibarat di blog Arlinadesign banget.
Source: https://caricarawow.blogspot.com//search?q=cara-membuat-subscription-box-di-blog?m=1
Style 3. Widget Berlangganan Modifikasi pada sidebar tanpa harus mengedit HTML template
- Sfesifikasi: Widget ini simpel masukan Tulisan pada subjek Titel
- Objek kolom masukan email dan
- Tombol Berlangganan menjadi "Subscribe" atau sesuaikan.
- Juga sanggup dirubah warna background dll.
Langkah menciptakan widget responsive versi ini sangat simpel sekali, cukup memasang melalui pemanis gadget HTML/JavaScript:
Untuk menciptakan widget ini Caranya?
1. Masuk ke blogger, Pilih hidangan Tata Letak > Klik Tambahan Gadget > Pilih Rancangan HTML/JavaScript.
2. Silahkan Copy+Paste (copas) aba-aba dibawah ini pada kolom konten:
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBarFFi7BqwW6XfBHw6Fx5on4IUzfDn95tibMXoIl87WbXpPlS5FAPoxreveD4g-wLi0mFpIMMxPxt-Wkq0-USRWqEc_upC23rE7PrVtwif6vK5TnZqfqoHplqgdor7jFonABZwfxjDBM/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF698VaD84HkAJ463LWjfU2uheepCqM3h27GZrckiNJoqdokxHpdmwQe3qfQIJfbaFdQU-Em4gnet7DLWV4ExSnVU3-h8qaA5I5rf5ROIDMZEBsxUOHCqD9KR76Bc8gtadwRnkwxwmkzo/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>Dapatkan Update Terbaru dari Blog Mudahrizki</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mudahriki/ID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="mudahrizki/ID" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini..."/>
<input class="sidebar-subscribe-box-email-button" title="Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBarFFi7BqwW6XfBHw6Fx5on4IUzfDn95tibMXoIl87WbXpPlS5FAPoxreveD4g-wLi0mFpIMMxPxt-Wkq0-USRWqEc_upC23rE7PrVtwif6vK5TnZqfqoHplqgdor7jFonABZwfxjDBM/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF698VaD84HkAJ463LWjfU2uheepCqM3h27GZrckiNJoqdokxHpdmwQe3qfQIJfbaFdQU-Em4gnet7DLWV4ExSnVU3-h8qaA5I5rf5ROIDMZEBsxUOHCqD9KR76Bc8gtadwRnkwxwmkzo/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>Dapatkan Update Terbaru dari Blog Mudahrizki</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mudahriki/ID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="mudahrizki/ID" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini..."/>
<input class="sidebar-subscribe-box-email-button" title="Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>
3. Jangan lupa, sebelum menyimpan. Ganti ID berwarna Merah dengan User ID FeedBurner milik Anda, kalau sudah klik Simpan.
Kode diatas (Style 3) sanggup ditambahkan aba-aba Script untuk sosial media kalau anda ingin memasang silahkan pasang Script Sosial media dibawah sempurna dibawah kode:
<div id="sidebar-subscribe-box">
Berikut misalnya ibarat ini:
<div id="sidebar-subscribe-box">
<!-- social media button start -->
<ul class='nav-social'>
<li><a class='fcb' href='https://m.facebook.com/mas.asep.5872/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></i></a>
</li>
<li><a class='igicon' href='https://www.instagram.com/warmanchannel/' rel='nofollow'><i class='fa fa-instagram fa-2x'/></i></a>
</li>
<li><a class='gpl' href='https://plus.google.com/101746174877156401129' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></i></a>
</li>
<li><a class='twt' href='https://mobile.twitter.com/WarmanIstiqomah' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></i></a>
</li>
<li><a class='ytb' href='https://www.youtube.com/channel/UC0DBdunisTeTA08O1kI03Gg' rel='nofollow'><i class='fa fa-youtube fa-2x'/></i></a>
</li>
</ul>
<!-- social media button end -->
Tinggal mengganti Link/url sosmed anda.
Bagi sahabat yang ingin menambahkan tidak perlu susah susah menyatukan sendiri, berikut aba-aba yang berhasil disatukan pada (style 4) berikut:
Style 4. Membuat Kotak Subscribe dengan pemanis Widget Sosial Media Button
Widget ini masih sama cara memasang widget ini, perbedaan terdapat pada tampilnya Icon Sosial Media seperti Facebook, Twitter, Google+, Feed RSS atau YouTube dll... sebagai pemanis modifikasi semoga pengunjung juga sanggup mendapat update dari media umum dari share artikel oleh blogger.
 |
| Widget Subscribe by email plus Sosial Media |
Langsung ke langkahnya...
1. Masuk pada blogger.
2. Pilih hidangan Tata Letak > Pilih HTML/JavaScript.
3. Silahkan copas aba-aba berikut ini pada kolom masukan konten HTML/JavaScript:
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBarFFi7BqwW6XfBHw6Fx5on4IUzfDn95tibMXoIl87WbXpPlS5FAPoxreveD4g-wLi0mFpIMMxPxt-Wkq0-USRWqEc_upC23rE7PrVtwif6vK5TnZqfqoHplqgdor7jFonABZwfxjDBM/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF698VaD84HkAJ463LWjfU2uheepCqM3h27GZrckiNJoqdokxHpdmwQe3qfQIJfbaFdQU-Em4gnet7DLWV4ExSnVU3-h8qaA5I5rf5ROIDMZEBsxUOHCqD9KR76Bc8gtadwRnkwxwmkzo/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://www.facebook.com/pages/warman"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoOYtotImkyAJs1PvH1WAJcBMlgr36MG9zSW9BzJenmN8L4WH9LAtkLwol3Dd9XBI9FWaPK4UOJe7eWbQbRkvQECmw17oZkUNZs866ID0FxDqmm6JYIH33VhWfCi_MapokS5mLDINcTOLg/s1600/mudahriki-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/warman/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj29mTBYrdPNp3NuAgZ7S52zJ_rJ-3J-aPsAV6cXV0QW3Gz20v8S5c9vhMeYTKTrN2uPrUP6CU_i7Yu2TufUkDyA_z16-sMcpGQ6wyEro3IGzhKkILtX8Ll9bI2EaZynUUGr57E3DyGsBv_/s1600/-twitter.png" /></a>
<a class="social-icons" href="http://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielpm4-dUJkRfO6dng7gwh8DPPgKMjoL3jp20dv0WqvTLx5BEq3kIypBgJYTbybcM_NbnHr54pxn7UNgSBehy6d_qscdapDHDr0VDDKJOeEsBcpMpbALC7Q3i8bjG_6PRZ651pVtcg1nAo/s1600/mudahriki-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/blog.mudahrizki/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xYP7KfTxBHLhDS3m0UIAqqBatIjro-Q9SjPJuQK_2yC9e2uEnNz-0EjXP7jIFhShg-Wqq3MFc1c5F836bwkyrvwQAziiNqzbdDdxyc-Kz9jphYv7me5Rb2GfDT1QJ6OuFVlm9CPfSZU0/s1600/mudahriki-Rss.png" /></a>
<p> Mulai Berlangganan Artikel Terbaru Gratis dari Blog Mudahriki !</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/ID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="mudahrizki/ID" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda di sini.."/>
<input class="sidebar-subscribe-box-email-button" title="Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBarFFi7BqwW6XfBHw6Fx5on4IUzfDn95tibMXoIl87WbXpPlS5FAPoxreveD4g-wLi0mFpIMMxPxt-Wkq0-USRWqEc_upC23rE7PrVtwif6vK5TnZqfqoHplqgdor7jFonABZwfxjDBM/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF698VaD84HkAJ463LWjfU2uheepCqM3h27GZrckiNJoqdokxHpdmwQe3qfQIJfbaFdQU-Em4gnet7DLWV4ExSnVU3-h8qaA5I5rf5ROIDMZEBsxUOHCqD9KR76Bc8gtadwRnkwxwmkzo/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://www.facebook.com/pages/warman"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoOYtotImkyAJs1PvH1WAJcBMlgr36MG9zSW9BzJenmN8L4WH9LAtkLwol3Dd9XBI9FWaPK4UOJe7eWbQbRkvQECmw17oZkUNZs866ID0FxDqmm6JYIH33VhWfCi_MapokS5mLDINcTOLg/s1600/mudahriki-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/warman/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj29mTBYrdPNp3NuAgZ7S52zJ_rJ-3J-aPsAV6cXV0QW3Gz20v8S5c9vhMeYTKTrN2uPrUP6CU_i7Yu2TufUkDyA_z16-sMcpGQ6wyEro3IGzhKkILtX8Ll9bI2EaZynUUGr57E3DyGsBv_/s1600/-twitter.png" /></a>
<a class="social-icons" href="http://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielpm4-dUJkRfO6dng7gwh8DPPgKMjoL3jp20dv0WqvTLx5BEq3kIypBgJYTbybcM_NbnHr54pxn7UNgSBehy6d_qscdapDHDr0VDDKJOeEsBcpMpbALC7Q3i8bjG_6PRZ651pVtcg1nAo/s1600/mudahriki-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/blog.mudahrizki/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xYP7KfTxBHLhDS3m0UIAqqBatIjro-Q9SjPJuQK_2yC9e2uEnNz-0EjXP7jIFhShg-Wqq3MFc1c5F836bwkyrvwQAziiNqzbdDdxyc-Kz9jphYv7me5Rb2GfDT1QJ6OuFVlm9CPfSZU0/s1600/mudahriki-Rss.png" /></a>
<p> Mulai Berlangganan Artikel Terbaru Gratis dari Blog Mudahriki !</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/ID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="mudahrizki/ID" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda di sini.."/>
<input class="sidebar-subscribe-box-email-button" title="Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>
Keterangan kode:
- Ganti aba-aba URL berwarna " Hijau " dengan Link/URL profil Sosial Media Sobat. (Agar kalau di klik menuju sosial media milik Sobat)
- Ganti Tulisan berwarna " Biru " kalau diperlukan.
- Ganti aba-aba User ID FeedBurner berwarna " Merah " dengan User ID FeedBurner blog Anda.
Sebenarnya masih banyak gaya atau style dalam menciptakan tombol subscribe di blogger dari yang tertanam pada Template hingga tampilan Pop-up mungkin pada kesempatan berikutnya akan diulas secara eksklusif.
Kesimpulan menciptakan subscribe by mail dengan style
Memasang Tombol atau Widget berlangganan merupakan satu hal penting untuk sebuah blog sebagai alat bantu untuk menciptakan situs menjadi banyak pengunjung secara bersiklus itu terbukti pada blog ini. Bahkan pada template terbaru blogger yang di update tahun 2017 desain pemasangan widget subscribe ditampilkan pada header itu artinya widget ini begitu penting.
Dalam menciptakan tombol subscribe sanggup dilakukan bermacam gaya atau desain style ibarat yang diajarkan oleh master Blogger juga oleh pihak Google sendiri semoga menarik perhatian pengunjung ibarat menambahkan tombol sosial media kesayangan.
Demikian informasi dan cara menciptakan hingga memasang widget berlangganan via email bergaya menarik di blogger semoga bermanfaat.