Mempercantik tampilan blog mungkin diharapkan apalagi blog Anda sudah mempunyai pengunjung tetap. Karena selain harus membaca konten yang sifatnya buletin secara terpola 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 aksesori CSS style dan JavaScript.
Tidak perlu berlatih bagaimana cara merubah tampilan? Dibawah ini saya beri teladan contoh Kotak berlangganan FeedBurner bermacam gaya dari bawaan blogger hingga desain sendiri menggunakan isyarat khusus.
Style 1 Gambar Asli Kotak berlangganan FeedBurner defailt blogger.
Style 2. Gambar Modifikasi dengan aksesori 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 aksesori Sosial Media yang dipasang pada Sidebar juga tanpa capek edit Tema blog sobat.
Silahkan teman lihat satu-persatu secara perlahan.
Mulai dengan Gaya yang pertama yaitu:
Sobat sudah niscaya tahu semua tapi untuk pemula menyerupai saya ini tak ada salahnya kalau dijelaskan lagi.
Cara simpel memasang susbcribe pada blogger?
1. Login ke blogspot.
2. Pilih sajian 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 aksesori CSS style dan JavaScript.
Tidak perlu berlatih bagaimana cara merubah tampilan? Dibawah ini saya beri teladan contoh Kotak berlangganan FeedBurner bermacam gaya dari bawaan blogger hingga desain sendiri menggunakan isyarat khusus.
Style 1 Gambar Asli Kotak berlangganan FeedBurner defailt blogger.
Style 2. Gambar Modifikasi dengan aksesori 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 aksesori 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 teman 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 menyerupai saya ini tak ada salahnya kalau dijelaskan lagi.
Cara simpel memasang susbcribe pada blogger?
1. Login ke blogspot.
2. Pilih sajian Layout/Tata Letak > kemudian pilih Tambahan widget (Add gadget) > Pilih konfigurasi Ikuti lewat Email.
- Pada tahap ini, coba lihat <🔍> kalau sudah mendaftarkan email blog teman 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 menyerupai 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 permintaan atau ekspresi dominan berdasarkan anda.
Widget ini tampilannya terbilang sederhana pada sidebar blog. Jika teman ingin menciptakan sebuah kreasi menyerupai yang telah dibicarakan dimuka sanggup melaksanakan modifikasi menyerupai style 2, 3,4.
Style 2. Membuat Subscribe by Email Keren ala Arlinadesign
Widget subscribe menyerupai 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 aksesori isyarat 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 sajian Tema > Klik Edit HTML.
3. Pada tab HTML cari isyarat ]]></b:skin> (gunakan trik Ctrl+F supaya gampang)
4. Setelah ditemukan pasang isyarat CSS style berikut ini diatas isyarat ]]></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 isyarat widget Markup berikut di bawah isyarat <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 alhasil silahkan coba lihat pada sidebar blog Anda, tampilan Kotak berlangganan menjadi keren menyerupai di blog Arlinadesign banget.
Source: https://mamankdzgn.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 aksesori gadget HTML/JavaScript:
Untuk menciptakan widget ini Caranya?
1. Masuk ke blogger, Pilih sajian Tata Letak > Klik Tambahan Gadget > Pilih Rancangan HTML/JavaScript.
2. Silahkan Copy+Paste (copas) isyarat 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/AVvXsEjOanUzj9wvZkzDM-p0qvkGDNnYygiYD9mij4Mc0AZiZTR7WjKiGphyphenhyphentO8q4TOJ6ZEb-6dFdB-G9LwC2qCMonSVMU3Y_cN6YXSj_UIMKFaC0eAkwuSkiMsh17OwG7wgEFMRWi7Xnw__7d8/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/AVvXsEjGQG6Ow-Q7AljGsQTO7eqwvIOHtPpRu-6uKa50rdM7xBbWUY7DOppaQi81pNtG_HC4_gDqK6ck69rkIvAfmsRkFawFWBHEMqHbaNcDnEcRYxkL2l-2wXydCVifFlWT2ZNAllt-xrMprf4/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/AVvXsEjOanUzj9wvZkzDM-p0qvkGDNnYygiYD9mij4Mc0AZiZTR7WjKiGphyphenhyphentO8q4TOJ6ZEb-6dFdB-G9LwC2qCMonSVMU3Y_cN6YXSj_UIMKFaC0eAkwuSkiMsh17OwG7wgEFMRWi7Xnw__7d8/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/AVvXsEjGQG6Ow-Q7AljGsQTO7eqwvIOHtPpRu-6uKa50rdM7xBbWUY7DOppaQi81pNtG_HC4_gDqK6ck69rkIvAfmsRkFawFWBHEMqHbaNcDnEcRYxkL2l-2wXydCVifFlWT2ZNAllt-xrMprf4/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 isyarat Script untuk sosial media kalau anda ingin memasang silahkan pasang Script Sosial media dibawah sempurna dibawah kode:
<div id="sidebar-subscribe-box">
Berikut misalnya menyerupai 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 teman yang ingin menambahkan tidak perlu susah susah menyatukan sendiri, berikut isyarat yang berhasil disatukan pada (style 4) berikut:
Style 4. Membuat Kotak Subscribe dengan aksesori 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 aksesori 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 sajian Tata Letak > Pilih HTML/JavaScript.
3. Silahkan copas isyarat 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/AVvXsEjOanUzj9wvZkzDM-p0qvkGDNnYygiYD9mij4Mc0AZiZTR7WjKiGphyphenhyphentO8q4TOJ6ZEb-6dFdB-G9LwC2qCMonSVMU3Y_cN6YXSj_UIMKFaC0eAkwuSkiMsh17OwG7wgEFMRWi7Xnw__7d8/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/AVvXsEjGQG6Ow-Q7AljGsQTO7eqwvIOHtPpRu-6uKa50rdM7xBbWUY7DOppaQi81pNtG_HC4_gDqK6ck69rkIvAfmsRkFawFWBHEMqHbaNcDnEcRYxkL2l-2wXydCVifFlWT2ZNAllt-xrMprf4/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/AVvXsEiEfymk_jS2LzF6lRTvShOL9rGbK0ump92dHJnrcLECJzUhmGmYFvu29vSJcfrpJgHjQEQjGTVxdl4DwUHrjWTA24JTjOnp1lQB9zQ5zKPPlnkgubXlZySfPSUaqLqrMyM9LlZqUL3o_nD_/s1600/mudahriki-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/warman/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXrbkgu00wYVaVJS_OjC1ogjdNgzPj_Gif1vlpkNisRrI6tMD37P8wSbMjoBml6zxfTRSvE1F-0xUa72Cq2oPBlBtnBoSChyphenhyphenh9LV4Kbja1hJnyg0XInLWm8NEtZUB-8c_D0D2AZZnCKqu/s1600/-twitter.png" /></a>
<a class="social-icons" href="http://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_3ZRUgwQvJRJzzXeAjlsTmRsvRbU23z91b69Y8TpZEk82dE00eYvOa_-gLcen-WubxMuEWG3GnKeNF8wx0te4LIBQTL-yaP5_MR7mTdcVudtlALs6nTm_WfgjBm-5HsJQ535o-G2ZVW_/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/AVvXsEhsNVutiS3B4T1DF6OnIBeUzCA6AS1GlDj8HgLLUPCUyItltyG7F33IviCK1TWB31wuJOkHgWBs30ABD7Sy4D_DnrKlqvQIrZTwpZ1u_AbUdAQAq7NxVlmLtiGwifKQFPIuf15-sutFpNc3/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/AVvXsEjOanUzj9wvZkzDM-p0qvkGDNnYygiYD9mij4Mc0AZiZTR7WjKiGphyphenhyphentO8q4TOJ6ZEb-6dFdB-G9LwC2qCMonSVMU3Y_cN6YXSj_UIMKFaC0eAkwuSkiMsh17OwG7wgEFMRWi7Xnw__7d8/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/AVvXsEjGQG6Ow-Q7AljGsQTO7eqwvIOHtPpRu-6uKa50rdM7xBbWUY7DOppaQi81pNtG_HC4_gDqK6ck69rkIvAfmsRkFawFWBHEMqHbaNcDnEcRYxkL2l-2wXydCVifFlWT2ZNAllt-xrMprf4/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/AVvXsEiEfymk_jS2LzF6lRTvShOL9rGbK0ump92dHJnrcLECJzUhmGmYFvu29vSJcfrpJgHjQEQjGTVxdl4DwUHrjWTA24JTjOnp1lQB9zQ5zKPPlnkgubXlZySfPSUaqLqrMyM9LlZqUL3o_nD_/s1600/mudahriki-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/warman/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXrbkgu00wYVaVJS_OjC1ogjdNgzPj_Gif1vlpkNisRrI6tMD37P8wSbMjoBml6zxfTRSvE1F-0xUa72Cq2oPBlBtnBoSChyphenhyphenh9LV4Kbja1hJnyg0XInLWm8NEtZUB-8c_D0D2AZZnCKqu/s1600/-twitter.png" /></a>
<a class="social-icons" href="http://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_3ZRUgwQvJRJzzXeAjlsTmRsvRbU23z91b69Y8TpZEk82dE00eYvOa_-gLcen-WubxMuEWG3GnKeNF8wx0te4LIBQTL-yaP5_MR7mTdcVudtlALs6nTm_WfgjBm-5HsJQ535o-G2ZVW_/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/AVvXsEhsNVutiS3B4T1DF6OnIBeUzCA6AS1GlDj8HgLLUPCUyItltyG7F33IviCK1TWB31wuJOkHgWBs30ABD7Sy4D_DnrKlqvQIrZTwpZ1u_AbUdAQAq7NxVlmLtiGwifKQFPIuf15-sutFpNc3/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 isyarat 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 isyarat 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 terpola 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 menyerupai yang diajarkan oleh master Blogger juga oleh pihak Google sendiri semoga menarik perhatian pengunjung menyerupai menambahkan tombol sosial media kesayangan.
Demikian informasi dan cara menciptakan hingga memasang widget berlangganan via email bergaya menarik di blogger semoga bermanfaat.
