Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Desain blog

Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog

4 komentar
Mempercantik tampilan blog mungkin diperlukan apalagi blog Anda sudah memiliki pengunjung tetap. Karena selain harus membaca konten yang sifatnya buletin secara berkala pembacapun wajib disuguhi tampilan widget blog yang memberi kesan berbeda, agar tidak membosankan.

Caranya sangat mudah 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 membuat modifikasi tampilan satu widget berlangganan FeedBurner atau bahasa kerennya Subscribe/follow newsletters via Email atau semacamnya yang awalnya default blogger menjadi tampilan menarik dengan tambahan CSS style dan JavaScript.

Tidak perlu berlatih bagaimana cara merubah tampilan? Dibawah ini saya beri contoh contoh Kotak berlangganan FeedBurner bermacam gaya dari bawaan blogger sampai desain sendiri memakai kode khusus.

Style 1 Gambar Asli Kotak berlangganan FeedBurner defailt blogger.

Style 2. Gambar Modifikasi dengan tambahan 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 tambahan Sosial Media yang dipasang pada Sidebar juga tanpa capek edit Tema blog sobat.

4 Style untuk Membuat Widget Subscribe kotak berlangganan Modifikasi Bergaya Khusus HTML Blog
How to Create a Subscription Widget by Email on Blog


4 Style Membuat Widget Subscribe by Email Keren di blog


Silahkan sobat lihat satu-persatu secara perlahan.

Mulai dengan Gaya yang pertama yaitu:


Style 1. Membuat Kotak Berlangganan Artikel FeedBurner default blogger


Sobat sudah pasti tahu semua tapi untuk pemula seperti saya ini tak ada salahnya jika dijelaskan lagi.

Cara mudah memasang susbcribe pada blogger?

1. Login ke blogspot.

2. Pilih menu Layout/Tata Letak > kemudian pilih Tambahan widget (Add gadget) > Pilih konfigurasi Ikuti lewat Email.
  • Pada tahap ini, coba lihat <🔍> jika sudah mendaftarkan email blog sobat pada kolom URL? blog Anda secara otomatis akan mempunyai URL dan User ID FeedBurner hafalkan ID tersebut jika nanti diperlukan untuk membuat design atau subscribe box modifikasi seperti cara membuat style 2,3,4 dibawah.
Cara Membuat Widget Subscribe sampai mendapatkan Username ID untuk Modifikasi Bergaya Khusus HTML Blog

  • Anda bisa merubah judul tertera dari Follow by Email menjadi "Dapatkan Artikel Terbaru dari Blog ini" atau dengan bahasa lainnya yang bersifat ajakan atau trend menurut anda.

3. Selesai tinggal klik Simpan.

Widget ini tampilannya terbilang sederhana pada sidebar blog. Jika sobat ingin membuat sebuah kreasi seperti yang telah dibicarakan dimuka bisa melakukan modifikasi seperti style 2, 3,4.


Style 2. Membuat Subscribe by Email Keren ala Arlinadesign


Widget subscribe seperti ini umumnya bisa dipasang dibawah postingan, sidebar atau fotter blog, jika Anda ingin melakukan modifikasi ala Arlinadesign keren bergaya clasik responsive tampilan Kotak berlangganan bisa menjadi cool.
Cara Membuat kotak berlangganan lewat email Modifikasi Bergaya Khusus dengan HTML Blog

Langkahnya dengan Memasang tambahan kode CSS style dari Arlinadesign pada Template. Catatan style Arlinadesign sangat banyak sekali namun inilah yang versi clasik, simpel, menarik namun mudah dimodifikasi lagi.

Caranya?

Langkah Pertama...

1. Buka blogger anda.

2. Masuk ke menu Tema > Klik Edit HTML.

3. Pada tab HTML cari kode ]]></b:skin> (gunakan trik Ctrl+F supaya gampang)

4. Setelah ditemukan pasang kode CSS style berikut ini diatas kode ]]></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 kode widget Markup berikut di bawah kode <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 (&apos;http://feedburner.google.com/fb/a/mailverify?uri=mudahrizi/ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 hasilnya silahkan coba lihat pada sidebar blog Anda, tampilan Kotak berlangganan menjadi keren seperti di blog Arlinadesign banget.

Source: https://www.arlinadzgn.com/2016/04/cara-membuat-subscription-box-di-blog.html?m=1


Style 3. Widget Berlangganan Modifikasi pada sidebar tanpa harus mengedit HTML template


  • Sfesifikasi: Widget ini mudah masukan Tulisan pada subjek Titel
  • Objek kolom masukan email dan 
  • Tombol Berlangganan menjadi "Subscribe" atau sesuaikan.
  • Juga dapat dirubah warna background dll.

Langkah membuat widget responsive versi ini sangat simpel sekali, cukup memasang melalui  tambahan gadget HTML/JavaScript:

Cara Membuat Widget berlangganan Modifikasi Bergaya Khusus HTML Blog

Untuk membuat widget ini Caranya?

1. Masuk ke blogger, Pilih menu Tata Letak > Klik Tambahan Gadget > Pilih Rancangan HTML/JavaScript.

2. Silahkan Copy+Paste (copas) kode 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/AVvXsEjga_gz9l-5GA9ENdPXiwbIZVk4x795M5a-_W_m3wpabQA09FhoPqloEVRLVtosmxg0E3VsZm_ZgxokVRX7wxwQR3AELYB0Fidspq9oqZNOM9dk2f8KSwTxzt8sMUQejmYmPOEoYB7-9Fw/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/AVvXsEhW8Y_GKdgbrcenhC4qvL448Y5OjE6OqQg7fbJ2ZG5i5zs45JRxlDgGrotfNZnPOkBnQwOO6NfrQs4y0VK8BPlNeZtI6gmINDIq-HZ4LnU-bAvjbF0VdBI7IhQHy2Ht2L_8tpCk9Rvr76I/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="" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>


3. Jangan lupa, sebelum menyimpan. Ganti ID berwarna Merah dengan User ID FeedBurner milik Anda, jika sudah klik Simpan.

Kode diatas (Style 3) bisa ditambahkan kode Script untuk sosial media jika anda ingin memasang silahkan pasang Script Sosial media dibawah tepat dibawah kode:
<div id="sidebar-subscribe-box">

Berikut contohnya seperti 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 sobat yang ingin menambahkan tidak perlu susah susah menyatukan sendiri, berikut kode yang berhasil disatukan pada (style 4) berikut:

Style 4. Membuat Kotak Subscribe dengan tambahan 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 tambahan modifikasi agar pengunjung juga bisa mendapatkan update dari media sosial dari share artikel oleh blogger.

Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog
Widget Subscribe by email plus Sosial Media


Langsung ke langkahnya...

1. Masuk pada blogger.

2. Pilih menu Tata Letak > Pilih HTML/JavaScript.

3. Silahkan copas kode 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/AVvXsEjga_gz9l-5GA9ENdPXiwbIZVk4x795M5a-_W_m3wpabQA09FhoPqloEVRLVtosmxg0E3VsZm_ZgxokVRX7wxwQR3AELYB0Fidspq9oqZNOM9dk2f8KSwTxzt8sMUQejmYmPOEoYB7-9Fw/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/AVvXsEhW8Y_GKdgbrcenhC4qvL448Y5OjE6OqQg7fbJ2ZG5i5zs45JRxlDgGrotfNZnPOkBnQwOO6NfrQs4y0VK8BPlNeZtI6gmINDIq-HZ4LnU-bAvjbF0VdBI7IhQHy2Ht2L_8tpCk9Rvr76I/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/AVvXsEjU6llZi8b95PsRUEK-gYLPUE7XDeq1K-7aOkJ3WLQ7iVz5U5MZx1wNz8uwQgrXdelVHMrmt6hcGVj_yt4FrJVilzW2-a2se_57o-xE9jWDRLfmMPePmuOo6Y7Ry4UpvvILdcchWYqnphyphenhyphenC/s1600/mudahriki-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/warman/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYlzIie9_bkX9QL-2rDJpduHqBAlo9StHHMRBBbXllpnueJED11Oq9ArXo5vINw714CJB7mn6lZcesBrnVh78U6wtPZGNPMM1e2LWo4Dhi_pGz5r0kvJzTwE1Lhgvl-FvHW6Htm11tZVS/s1600/-twitter.png" /></a>
<a class="social-icons" href="http://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-H_vVzxfwZ4sB9CUl63vtNwpdmopwEk5EWey9O_jMQMflxd907qMDO3llpZwKQTLRfZ2QqE0MomghDzwul32CeWjy93nY7s87xEtzC_qjmo4zYhdqj0YgSTuTYal8OcZ691LTJceQlBp1/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/AVvXsEh2PqjKBhm__DAFKceSIKmbWz81c53iyQQgwBqjn0l05Dk7-5Hn4j0JoJyDd3LiS5Pi2rXRWRJHAmqiSKNVZh_s50UYkqr4FyMfqA_XQjsC0IvujFT8NibOzun4vXzQVR_-MFx-yHK4eFYL/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="" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>


Keterangan kode:
  • Ganti kode URL berwarna " Hijau " dengan Link/URL profil Sosial Media Sobat. (Agar jika di klik menuju sosial media milik Sobat)
  • Ganti Tulisan berwarna " Biru " jika diperlukan.
  • Ganti kode User ID FeedBurner berwarna " Merah " dengan User ID FeedBurner blog Anda.
4. Jika dirasa selesai klik Simpan.

Sebenarnya masih banyak gaya atau style dalam membuat tombol subscribe di blogger dari yang tertanam pada Template sampai tampilan Pop-up mungkin pada kesempatan berikutnya akan diulas secara eksklusif.

Kesimpulan membuat subscribe by mail dengan style


Memasang Tombol atau Widget berlangganan merupakan satu hal penting untuk sebuah blog sebagai alat bantu untuk membuat situs menjadi banyak pengunjung secara berkala 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 membuat tombol subscribe bisa dilakukan bermacam gaya atau desain style seperti yang diajarkan oleh master Blogger juga oleh pihak Google sendiri agar menarik perhatian pengunjung seperti menambahkan tombol sosial media kesayangan.

Demikian informasi dan cara membuat sampai memasang widget berlangganan via email bergaya menarik di blogger semoga bermanfaat.


4 komentar untuk "Cara Membuat Widget Subscribe Modifikasi Bergaya Khusus HTML Blog"

  1. Detunglikong17/7/18 12:56 PM

    Sumpah keren-keren tulisan mas, sepertinya saya harus sediakan waktu khusus buat eksplor blognya mas hehhe. Btw mas kalau taruh ling youtube di postingan blog itu buat berat apa ngak ya. maaf pertanyaannya tidak nyambung dengan ulasannya...

    BalasHapus
    Balasan
    1. Warman17/7/18 9:14 PM

      Sebaiknya jangan Link tautan untuk YouTube di postingan mas karena para blogger profesional tidak pernah melakukan, jika memang perlu untuk memperkaya artikel lebih baik langsung embed saja mas.

      Jadi videonya langsung tampil seperti Widget di postingan, caranya mudah kok, kebetulan saya belum menulis mas bisa browsing saja.

      Hapus
  2. Made Gelgel25/5/19 7:40 PM

    terimakasih, akan saya coba mas

    BalasHapus
  3. blog15/6/19 5:15 AM

    Mantap

    BalasHapus

Form komentar untuk diskusi, bertanya, apresiasi sesuai topik bahasan perhalaman.