Cara Membuat Subscribe Box Inside Post

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.

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

  /* Subscribe Box Inside Post */
  .feeds{float:right;width:300px;line-height:18px;font-size:15px}
  .feeds a{color:#fff!important}
  .feeds a:hover{color:#000!important}
  .feeds{float:right;width:65%;}
  .feeds{float:right;width:55%;}
  .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}

• 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-0786727941001288' data-ad-format='rectangle' data-ad-slot='7113734205' style='display:block'/>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
  </div>
  
  <div class='feeds'>
   <strong>Berlangganan :</strong> <br/>Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari <a href='//suka56.blogspot.com' title='Terry Hakim'><strong><a class='author-meta g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author'><data:post.author/></a></strong></a> langsung di pesan kotak masuk.
  
  <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='suka56'/>
  <input name='loc' type='hidden' value='en_US'/></form>
  
  <div style='float:left; padding-left:0px; padding-top:0px'> 
  <a href='//feeds.feedburner.com/suka56' rel='nofollow' target='_blank' title='feedburner'><img alt='feedburner' src='//feeds.feedburner.com/~fc/suka56?bg=ffffff&amp;amp;fg=000000&amp;amp;anim=0'/></a>
  </div>
  
  <div style='float:right; padding-left:0px; padding-top:0px'> 
  <a href='//feeds.feedburner.com/suka56' rel='nofollow' target='_blank' title='Berlangganan'>RSS FEED</a>
  </div>
  <br/><br/>
  <div style='float:left; padding-left:0px; padding-top:5px'>
  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>
  <div style='clear: both;'/>

• Selesai, simpan pekerjaan Anda 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 Suka Suka adalah Suka56. Jadi Anda tinggal mengganti Suka56 dengan nama rss feeds Anda.

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

Share :

Tweet

More

Related Post

• 11 Cara Memutihkan Gigi Secara Alami 11 Cara Memutihkan Gigi Secara Alami Cepat dan Mudah! Cara Memutihkan Gigi Secara Alami dan Cepat
• Cara Membuat Footer Multi Kolom FleksibelBagi anda yang kesulitan dan ingin memperbanyak ruang kolom pada bagian footer template anda dengan
• Movie On Blogger Template Demo: See it Live Description Movie On adalah tema yang sempurna untuk review film dan situs ber
• Menebak Kepribadian Lewat 4 Macam Bentuk Jari Kaki Meski jadi bagian tubuh yang jarang sekali diperhatikan, tapi nyatanya, jari kaki setiap orang bis