Blog Personal tentang tips Blogging dan Internet Marketing

Cara Membuat Subscribe Box Bengkel Blog

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.

Cara Membuat Subscribe Box Bengkel Blog

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

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Membuat Subscribe Box Bengkel Blog
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 komentar

sangat bermanfaat infonya.

Balas

Back To Top