Cara Menambah Dua [2] Kolom Dibawah Posting Blog

Viyan Pradita Minggu, Maret 27, 2011

Next topik sob, kali ini saya akan membahas bagaimana cara membuat dua (2) kolom di bawah posting blog, lihat contoh gambar dibawah sob, kiranya seperti itulah yang kali ini akan saya buat.
Sebelum kita praktek, saya jelaskan terlebih dahulu apa kiranya fungsi dari kotak box dibawah posting itu. pertama, dengan kotak box tersebut, kita bisa menambahkan elemen-elemen penting agar pengunjung blog bisa lebih mudah menemukan apa yang mereka cari, bisa juga kita menaruh artikel-artikel penting didalamnya. tapi tentunya semua itu tergantung sama kreatifitas kita masing-masing. intinya mempermudah.

Oke, seperti yang sobat lihat pada gambar dibawah, kolom kiri berisi "langganan RSS FEED" sedangkan kotak ke dua berisi "artikel terkait/related post.

Demo


Cara membuatnya sebagai berikut:
  • Login ke akun blogger sobat
  • Masuk Rancangan/Layout
  • Edit HTML
  • Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
  • Beri tanda centang "Expand Template Widget"
  • Carilah Kode: ]]></b:skin>
  • Lalu taruh kode dibawah ini, di atas kode: ]]></b:skin>
#related{background:#eee url(http://lh6.ggpht.com/_pt7i0nbIOCY/SuPuxFn6_FI/AAAAAAAACXU/z314-b9H97c/dot_thumb.gif) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
#related .related-posts{font-weight:400;width:53%;float:right}
#related .related-posts p{margin:0}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
#related .related-posts ol{font-weight:400;margin:2px 0 0}
#related .subscribe{width:43%;float:left;color:#000}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;
height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
  • Kemudian cari kode beririkut:
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>
  • Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if>
<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini letakkan Link Feed Sobat/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Sobat</p></div>
<div class='related-posts'>disini letakan kode Related Post Sobat</div></div>
  • Perhatikan text berwarna biru, gantilah dengan alamat feed sobat, dan untuk text warna merah ganti dengan kode script form berlangganan sobat, dan untuk warna hijau, ganti dengan kode script related post sobat. Buat tambahan, kode di atas di template saya, saya taruh di bawah kode:
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>


Penting!!
Karena setiap template mempunyai kode script yang berbeda-beda, Bila sobat mendapat kesulitan menaruh kode di atas, sobat bisa tinggalkan komentar disini, sebisa mungkin insya4JJL, saya akan bantu.
Cukup sekian dari saya, semoga bermanfaat.

Ditulis Oleh :

Artikel Cara Menambah Dua [2] Kolom Dibawah Posting Blog ini dipublish pada hari: Minggu, Maret 27, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

14 komentar
Terjun Ke Kolom Komentar

  1. belum pernah main di edit html sih. tapi ane coba dulu ya gan.

    BalasHapus
  2. @Blog Sederhana : Yoi Sob... silahkan dicoba, bila mengalami kesulitan jgn segan2 buat nanya :)

    BalasHapus
  3. Ane udah lama kagat main Blogger

    BalasHapus
  4. @Naruto-R : hehe, pakek bhs mana itu sob ??

    @Fadel : Knp emank sob, bosan kah ??

    BalasHapus
  5. @Viyan Pradita

    Iya, ane udah sering migrasi, kalau posting tetap jalan :D

    BalasHapus
  6. @Fadel :Ohh.. gak masalah lah, wajar kalo kadang ngeblog itu bosen, yg penting posting masih tetep jalan... keep blogging sob !!

    BalasHapus
  7. bingung mas buatnya....
    kode

    ga ada gmn y mas....?

    BalasHapus
  8. Bingung Naruh Script na kah??
    Di Blog Sobat kan udah dipasang ReadMore, coba cari saja kode <data:post.body/> (biasanya ada 2) taruh di bawah kode yang kedua.

    BalasHapus
  9. owh begitu ya caranya!! Terima kasih mas

    BalasHapus
  10. @arsega: Sama2 mas, makasih komentarnya :)

    BalasHapus
  11. tx bro, infonya bermanfaat banget,,!

    BalasHapus
  12. @SERGAP NTT ONLINE: Sip, sama2 masbro :)

    BalasHapus
  13. kalau yang ini ane mau sob, ntar melem ya sob bikinin,

    masih donk garansine ;))

    BalasHapus
  14. @tigefa dot info: Beres bos,,, :D

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers