Pasang Widget Get Update Via email Di Bawah Posting

Pada posting sebelumnya kang Rohman telah mengulas tentang bagaimana cara membuat widget Get Update Via Email, ternyata muncul pertanyaan lain seputar widget ini yaitu bagaimana cara memasang widget Get Update Via Email di bawah posting? hmmmm… boleh juga nih di jadikan bahan untuk di bahas.

Untuk membuat widget Get Update Via Email di bawah posting pada prinsipnya sama saja seperti membuat widget Get Update Via Email yang di simpan di sidebar, namun perbedaannya yaitu yang di bawah posting harus melalui Edit HTML dan tidak bisa melalui Elemen Halaman serta kodenya perlu di parse terlebih dahulu.

Catatan pertama yang perlu di ingat adalah Widget ini sebaiknya di pasang pada blog yang telah memakai fugsi read more seperti trik yang telah kang Rohman posting pada artikel Trik Mudah Membuat Read more  karena jika tidak, maka semua widget  Get Update Via Email akan terlihat langsung di halaman depan sehingga tidak sedap di pandang mata.

Tanpa banyak basa basi, berikut langkah-langkahnya :

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak
  3. Klik tab Edit HTML.
  4. Silahkan klik tulisan Download Template Lengkap.
  5. Silahkan backup dulu template anda (penting)
  6. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

    expand-template

  7. Cari kode seperti ini  ]]></b:skin> , copy lalu paste kode berikut persis di atas kode  ]]></b:skin>

    #kotak {
    background: #fff;
    width: 200px;
    color: #000000;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    padding: 3px;
    border-top: 1px solid #666666;
    border-right: 1px solid #ddd;
    border-left: 1px solid #666666;
    border-bottom: 1px solid #ddd;
    display: inline;
    }
    #tombol {
    background: #2B74B4;
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0px 0px 0px 5px;
    padding: 2px;
    border: 1px solid #234B69;
    font-weight: bold;
    }
    #email{
    background: #FFFFFF;
    color: #000000;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0px;
    padding: 4px;
    border-top: 1px solid #666666;
    border-right: 1px solid #DDDDDD;
    border-left: 1px solid #666666;
    border-bottom: 1px solid #DDDDDD;
    }
    #submit {
    background: #2B74B4;
    color: #FFFFFF;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    padding: 4px;
    margin: 0px;
    border: 1px solid #234B69;
    }

  8. Scroll ke bagian bawah dan temukan kode berikut ( ingat bahwa template anda sudah memakai sitem read more seperti yang kang rohman terangkan )

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
    </b:if>




  9. Hapus kode di atas, lalu ganti dengan kode di bawah ini ( silahkan ganti ID feedburner  sesuai dengan milik anda ) :

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/>



    <div style='padding:10px;margin:10px 0px 10px 0px;background:#eee;text-align:left;border:1px solid #ddd'>

    <p>Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.</p>

    &lt;form id=&quot;subscribe&quot; action=&quot;http://www.feedburner.com/fb/a/emailverify&quot; target=&quot;popupwindow&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&#39;http://www.feedburner.com&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&quot;&gt;&lt;input id=&quot;kotak&quot; onfocus=&quot;if (this.value == &#39;Masukan alamat Email anda...&#39;) {this.value = &#39;&#39;;}&quot; value=&quot;Masukan alamat Email anda...&quot; name=&quot;email&quot; onblur=&quot;if (this.value == &#39;&#39;) {this.value = &#39;Masukan alamat Email anda...&#39;;}&quot; type=&quot;text&quot;/&gt;&lt;input value=&quot;http://feeds.feedburner.com/~e?ffid=892815&quot; name=&quot;url&quot; type=&quot;hidden&quot;/&gt;&lt;input value=&quot;daftar kolom tutorial&quot; name=&quot;title&quot; type=&quot;hidden&quot;/&gt;&lt;input id=&quot;tombol&quot; value=&quot;Langganan&quot; type=&quot;submit&quot;/&gt;&lt;/form&gt;   
    </div>

    </p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>
    </b:if>




  10. Klik tombol SIMPAN TEMPLATE


  11. Selesai.



Bagi yang sudah mengikuti tutorial kang Rohman pada artikel Membuat Widget Get Update Via Email, anda tidak perlu lagi memasang kode pada langkah ke 7 karena sama dengan yang kemarin.



Selamat mencoba!


Share on Google Plus

About Admin

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

Labels

blogspot tutorial ( 112 ) blog tutorial ( 110 ) blogging tutorial ( 34 ) download gratis ( 27 ) guest post ( 26 ) free tool ( 24 ) free template ( 23 ) SEO ( 17 ) wordpress ( 17 ) blogger tutorial ( 9 ) the mez template ( 9 ) Belajar SEO Blogger ( 8 ) freeware ( 8 ) Blogging relax Tips ( 7 ) Dokumentasi The Mez template ( 7 ) download template ( 7 ) website info ( 7 ) google adsense ( 6 ) google service ( 6 ) modifikasi blog ( 6 ) aksesori blog ( 5 ) asal posting ( 5 ) blogger isu ( 5 ) browser ( 5 ) free icons ( 5 ) menu navigasi css ( 5 ) sahabat ( 5 ) software gratis ( 5 ) Blog ( 4 ) SEO khusus blogger ( 4 ) cool website ( 4 ) edit template ( 4 ) komputer ( 4 ) Blogspot ( 3 ) Firefox ( 3 ) Kampanye Damai Pemilu Indonesia 2009 ( 3 ) Riset Keyword ( 3 ) SEO Contest ( 3 ) Tanya Saja ( 3 ) anti virus ( 3 ) google docs ( 3 ) kotak komentar ( 3 ) navigasi dengan css ( 3 ) opera ( 3 ) template 3 kolom ( 3 ) Bisnis Online ( 2 ) Iklan anda ( 2 ) PhotoShop ( 2 ) SEO Khusus blogspot ( 2 ) Template support ( 2 ) Yahoo ( 2 ) add-on ( 2 ) alexa rank ( 2 ) backup widget ( 2 ) blog tools ( 2 ) drop down menu ( 2 ) fitur blogger ( 2 ) hosting ( 2 ) read more ( 2 ) tutor wordpress ( 2 ) uang gratis ( 2 ) unek-unek ( 2 ) virus ( 2 ) weatern union ( 2 ) wordpress tutorial ( 2 ) yahoo icon ( 2 ) Biisnis Internet ( 1 ) English ( 1 ) Google chrome ( 1 ) HUT RI ( 1 ) I'm is back ( 1 ) Info Browser ( 1 ) Jasa Pembuatan Blog ( 1 ) Link Building ( 1 ) avatar ( 1 ) banner ( 1 ) bisnis ( 1 ) cari duit di internet ( 1 ) domain ( 1 ) ebook ( 1 ) favicon ( 1 ) free ebook ( 1 ) google talk ( 1 ) hiasan blog ( 1 ) internet business-RM ( 1 ) kasus ( 1 ) kontes ( 1 ) langka tapi nyata ( 1 ) membuat navbar ( 1 ) membuat readmore ( 1 ) mencari uang di internet ( 1 ) menu dropdown ( 1 ) panduan bisnis online ( 1 ) panduan blogger ( 1 ) pasang iklan ( 1 ) plugin wordpress ( 1 ) rss button ( 1 ) search engine ( 1 ) shoutbox ( 1 ) sosok favorit ( 1 ) table of content ( 1 ) uang kopi ( 1 ) video ( 1 ) video comedy ( 1 ) wallpapers ( 1 ) wordpress plugin ( 1 )