Cara Membuat Subscribe Box Bengkel Blog

Oleh Syafdillah

22 Februari 2016

Sebenarnya Blogspot sudah mengediakan gadget Subscribe Box yang siap disematkan pada blog dan biasanya hanya bisa diletakkan pada sisi bagian kiri atau kanan (sidebar) pada sebuah template. Namun untuk lebih mempercantik atau terlihat profesional blognya, biasanya dimodivikasi baik boxnya maupun penempatannya.

Kali ini saya mau membagi tips cara membuat subscribe box seperti yang dipakai pada Bengkel Blog ini.

1. Login ke Blogger lalu pilih blog sobat yang akan dipakai untuk percobaan memasang widget subscribe box seperti yang digunakan pada Bengkel Blog ini
2. Sudah dipilih blognya, lalu pilih "TEMPLATE" dan "EDIT HTML" kemudian tempatkan kode CSS dibawah ini
   
   

   /*Subscribe box footer*/
   .feeds{float:right;width:200px;line-height:20px;font-size:15px}
   .feeds a{color:#fff!important}
   .feeds a:hover{color:#000!important}
   .feeds{float:right;width:40%;}
   .feeds{float:right;width:40%;}
   .feeds{float:right;width:300px;}
   .ads{float:left;width:300px;height:250px;line-height:250px;text-align:center;overflow:hidden;background-color:#fff}
   .content-bottom{color:#fff;background:#3498db;margin:0px -0px 0px;padding:20px;overflow:hidden}

3. Lalu Anda cari kode </article> dan tempatkan kode HTML berikut ini persis di bawah kode </article>
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='content-bottom'>
   <div class='ads'>
   <ins class='adsbygoogle' data-ad-client='ca-pub-078672xxxxxxxxxx' data-ad-format='rectangle' data-ad-slot='711xxxxxxx' style='display:block'/>
   <script>
   (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
   </div>
   <div class='feeds'>
   <p><strong>Berlangganan :</strong> <br/>Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari <a href='//bengkel-blog.blogspot.com' title='Terry Hakim'><strong>Terry Hakim</strong></a> langsung di pesan kotak masuk.</p>
   <form action='//feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;//feedburner.google.com/fb/a/mailverify?uri=&quot;+this.uri.value+&quot;&amp;amp;loc=&quot;+this.loc.value+&quot;&amp;amp;email=&quot;+this.email.value,&quot;_blank&quot;,&quot;scrollbars=yes,width=570,height=520&quot;);return false;' target='_blank'>
   <input name='email' placeholder='Masukan e-mail Anda disini....' style='width:300px' type='email'/>
   <input name='uri' type='hidden' value='blogspot/Bengkel-Blog'/>
   <input name='loc' type='hidden' value='en_US'/></form>
   <div style='float:left; padding-left:0px; padding-top:10px'> 
   <a href='//feeds.feedburner.com/blogspot/Bengkel-Blog' rel='nofollow' target='_blank' title='feedburner'><img alt='feedburner' src='//feeds.feedburner.com/~fc/blogspot/Bengkel-Blog?bg=ffffff&amp;amp;fg=000000&amp;amp;anim=0'/></a>
   </div>
   <div style='float:right; padding-left:0px; padding-top:10px'> 
   <a href='//feeds.feedburner.com/blogspot/Bengkel-Blog' rel='nofollow' target='_blank' title='Berlangganan'>RSS FEED</a>
   </div>
   <br/><br/>
   <div style='float:left; padding-left:0px; padding-top:10px'>
   Jangan lupa Jempolnya atau dishare ya.<br/>
   <div style='float:left;margin:5px 20px 5px 5px;'>
   <div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
   </div>
   <div style='float:left;margin:7px; 0 0 0'>
   <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
   </div>
   <div style='float:left;margin:7px; 0 0 0'>
   <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
   </div>
   <br/>Terima kasih, ditunggu kunjungan balik.
   </div>
   </div>
   </div>
   </b:if>

4. Simpan pekerjaan Anda, selesai dan lihat hasilnya. Kalau ada pertanyaan bisa langsung ke kotak komen aja.

Ada beberapa perbaikan yang perlu Anda ketahui, pada kotak atau box sebelah kiri adalah iklan Google Adsense. Anda tinggal mengganti kode ca-pub dan kode slot-nya. Kemudian pada kotak atau box sebelah kanan, Anda perlu mengganti nama feed rss Anda, disini feeds Bengkel Blog adalah Bengkel-Blog. Jadi Anda tinggal mengganti Bengkel-Blog dengan nama rss feeds Anda.

Penampakannya bisa Anda lihat pada Subscribe box Bengkel Blog ini atau pada peraga di bawah ini.

See the Pen Subscribe Box Footer by Suka Suka (@NKOB) on CodePen.

Ayo Like Facebooknya

Tag : Blogging