Minggu, 31 Maret 2013

Mengisi dan Menampilkan Artikel Tertentu di Halaman Blog

Mengisi dan Menampilkan Artikel Tertentu di Halaman Blog - Artikel ini merupakan artikel update-an dari artikel yang pernah saya bahas sebelumnya yaitu membuat isi halaman blog berdasarkan label yang sama-sama memiliki fungsi menampilkan artikel tertentu di halama blog.
Menampilkan artikel tertentu ini maksudnya adalah menampilkan artikel berdasarkan label dan memasukkannya ke halaman blog seperti yang ada di menu halaman blog ini atau seperti yang terlihat pada gambar berikut ini

Mengisi dan Menampilkan Artikel Tertentu di Halaman Blog

Mengisi dan menampilkan artikel tertentu di halaman blog ini memiliki tampilan yang sama dengan tampilan artikel yang ada di halaman depan blog, lengkap dengan gambar artikel (thumbnail) dan hanya menampilkan berdasarkan kategori label yang terpasang didalamnya yaitu yang terpasang pada kode script dari feed blog artikel yang sudah ada. Sebelum mengisi halaman blog dengan artikel tertentu, anda harus membuat halaman blog terlebih dahulu dan memasukkan kode html ini kedalamnya.

Cara Mengisi dan Menampilkan Artikel Tertentu di Halaman Blog
Kode yang ada dibawah ini merupakan hasil salinan yang saya ambil dari blogger senior kita, Kang Rohman yang terbit pada 23 Desember 2010 dan sedikit saya modifikasi agar tampilannya seperti yang terlihat pada gmbar diatas.
  1. Masuk ke akun Blogger anda
  2. Pilih menu Template >> Edit HTML >> tekan tombol Ctrl+F di keyboard
  3. Cari kode ]]></b:skin> Jika sudah ketemu, salin kode berikut tepat diatas atau sebelum kode ]]></b:skin>
    img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; margin-bottom:15px;height:100px; width:100px}
    img.label_thumb:hover{background:#f7f6f6}
    .label_with_thumbs{float:left; width:100%; min-height:110px; margin:0px 10px 2px 0px; adding:0}
    ul.label_with_thumbs li{padding:8px 0; min-height:105px; margin-bottom:15px}
    .label_with_thumbs a{font-size:20px;font-weight:bold;}
    .label_with_thumbs strong{}
    Keterangan :
    img.label_thumb adalah ID yang menampilkan gambar artikel (thumbnail), untuk mengatur besar kecil tampilan gambar, ganti ukurannya di bagian height dan width
    .label_with_thumbs adalah mengatur tampilan gambar agar sesuai dengan yang lainnya. Jika ukuran gambar di img.label_thumb 100px, maka ukuran di .label_with_thumbs harus lebih besar
    ul.label_with_thumbs li adalah mengatur tampilan gambar agar sesuai dengan yang lainnya. Jika ukuran gambar di img.label_thumbs 110px, maka ukuran di ul.label_with_thumbs harus lebih kecil
    .label_with_thumbs a adalah ID yang digunakan untuk menampilkan ukuran font pada judul artikel, disini saya menggunakan ukuran 20px dengan karakter font besar (bold)
    margin-bottom:15px adalah mengatur jarak di bagian bawah antar artikel
  4. Cari kode </head> dan salin kode berikut tepat diatas atau sebelum kode </head>
    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
    var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
    document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
    else
    if("summary"in entry){var postcontent=entry.summary.$t;}
    else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
    else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
    var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
    if(showcommentnum==true)
    {if(flag==1){towrite=towrite+' | ';}
    if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
    document.write(towrite);document.write('</li>');if(displayseparator==true)
    if(i!=(numposts-1))
    document.write('');}document.write('</ul>');}
    //]]>
    </script>
    Catatan :
    karena diatas merupakan kode script dan mungkin terlalu banyak untuk ditampilkan kedalam template, silahkan anda kompres kode tersebut agar lebih kecil. Jika di kompres, kode script diatas akan menjadi link script seperti contoh http://namaanda.googlecode.com/files/namakode.js dan untuk panduannya, silahkan buka artikel membuat link kode javascript
  5. Kalau sudah, simpan template
  6. Selanjutnya, buka menu Laman dan buatlah judul laman sesuai dengan label yang akan ditampilkan kedalaman halaman blog nantinya
  7. Masukkan kode berikut kedalam area penulisan artikel
    <script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/label?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <a href="http://judulbloganda.blogspot.com/search/label/template" style="float: right; font: normal 12px Arial; padding: 5px 0;">Artikel berikutnya »</a>
    Keterangan :
    var numposts » menampilkan jumlah postingan
    var showpostthumbnails » menampilkan gambar artikel (thumbnail)
    var displaymore » menampilkan readmore
    var showcommentnum » menampilkan jumlah komentar
    var showpostdate » menampilkan tanggal terbit
    var showpostsummary » menampilkan ringkasan artikel
    var numchars » menampilkan jumlah kata dalam ringkasan artikel
    label » ganti dengan label blog
  8. Jika laman blog sudah berhasil dibuat, klik pulish atau terbitkan
  9. Selesai. Lihat hasilnya..
  10. Tambahan:
    Pada hasil akan menampilkan 5 artikel sesuai dengan jumlah yang terpasang pada var numposts = 5, agar pengungjung bisa melihat artikel yang lainnya yang sesuai dengan label yang terpasang, silahkan anda tambahkan kode berikut ini dibagian bawah kode yang ada di laman artikel
    <a href="http://judulbloganda.blogspot.com/search/label/template" style="float: right; font: normal 12px Arial; padding: 5px 0;">Artikel berikutnya »</a>
Itulah cara mengisi dan menampilkan artikel tertentu di halaman blog yang jika dikembangkan lagi sesuai kreatifitas anda, tidak hanya digunakan di halaman blog tapi bisa digunakan dimanapun yang anda inginkan terpasang berdasarkan label blog yang telah anda. Okey, jika masih ada yang belum jelas mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Mengisi dan Menampilkan Artikel Tertentu di Halaman Blog

Mengisi dan Menampilkan Artikel Tertentu di Halaman Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

79 komentar:

  1. Apakah ini sama dengan artikel random yah Mbak,,,atau menampilkan artikel tertentu berdasarkan pageviewnya ? :)

    BalasHapus
  2. @Abed Saragih tidak, tapi berdasarkan label dan menampilkannya secara berurutan berdasarkan tanggal postingan

    BalasHapus
  3. mksh atas info'x sob sangat membantu sekali bagi saya yang pemula..

    BalasHapus
  4. gan izin copas yah.. di sertain sumbernya kok.. :)

    BalasHapus
  5. mantap nichh...
    thnak's gan...

    BalasHapus
  6. artikel ini sangat bermafaat bagi semua pengunjung, termasuk saya

    BalasHapus
  7. ok gan, trimakasih untuk ilmunya

    BalasHapus
  8. Terima kasih atas ilmunya, sangat bermanfaat u saya.
    Tetapi ada yang ingin sy tanyakan, hasil di blog sy tidak rata kiri, tampilan artikel di setiap hal menjadi spt bertangga dan ada beberapa artikel berubah menjadi "Normal 0 false false false EN-US X-NONE X-NONE". Bagaimana memperbaikinya ya, mba?

    BalasHapus
    Balasan
    1. coba ganti margin-bottom:15px ke angka yang lebih besar, misalnya 20px

      Hapus
    2. Selain itu bisa diakalin dengan copy text ke wordpad dulu baru paste kembali ke blog mbak/mas

      Hapus
  9. wah mantap nichh..
    thank's gan..

    BalasHapus
  10. Mbakk....
    tolong Di Perjelas cara.a(maklum Bocah Pemula)...
    Gmna Cra Buat Laman naruto Dan Isi.a ttg artikel Naruto Smua...

    BalasHapus
    Balasan
    1. silahakan anda baca lagi artikel diatas, pasti bisa kok, halaman blog ini menggunakan cara diatas..

      Hapus
    2. Kami belum berhasil nih mbak, hehe lg ulik2 dulu. thanks banget buat share tutorialnya

      Hapus
  11. sudah aq coba tapi ga muncul artikelnya :(

    BalasHapus
    Balasan
    1. silahkan di coba lagi, pasti bisa..

      Hapus
  12. pendatang baru di dunia blog,
    kalau mau postingan hanya di halaman tertentu saja,
    misal mau posting foto di halaman GALERI, dan artikel di halaman ARTIKEL, gmn ya?
    postingan saya masih numpuk di halaman depan semua...
    tolong dibantu ya,
    thnks.

    BalasHapus
    Balasan
    1. untuk halaman artikel bisa menggunakan cara yang ada pada artikel ini, untuk menampilkan foto gallery belum saya update artikelnya..

      Hapus
    2. Masalah saya sama dengan Leaf Shop ni..,Mbak.

      Hapus
  13. postingan kita yang masuk ke label tertentu supaya tidak tampil di beranda bagaimana caranya ya?
    mohon dibantu...karena saya pinginnya langsung masuk di halaman tertentu saja...
    matur nuwun...

    BalasHapus
    Balasan
    1. dengan cara menyembunyikan tampilan artikel yang ada di beranda dan selanjutnya menggunakan cara yang saya bahas di artikel ini. untuk menyembunyikan artikel di beranda gunakan "cara menampilkan widget di halaman tertentu", untuk panduannya bisa cari google.

      Hapus
  14. Makasih banyak infonya
    ternyata banyak juga yah kode scriptnya ! ^___^

    BalasHapus
  15. hasilnya seperti ini mbak, http://amirhamzahporang.blogspot.com/p/pclaptop.html
    MOHON PENCERAHANNYA ?

    BalasHapus
  16. thanks tipsnya mba...

    BalasHapus
  17. oh iya bagaimana cara agar kalimat dalam postnya lebih banyak mba? saya cuma satu baris, tidak seimbang dengan gambarnya...
    jika smpat, mhon lihat di http://hazanahilmu.blogspot.com/p/artikel.html
    maksih sblumnya mba...

    BalasHapus
  18. sayang jika di lewatkan sangat menarik tulisan anda.

    BalasHapus
  19. mba... jika sempat, mohon lihat blog saya...
    semua saran di atas sudah dikerjakan. tapi postingnya gak muncul.

    di www.kuliner-bisnis.blogspot.com

    trimakasih sebelumnya.

    BalasHapus
  20. Mas ! nanya ,, gimana ya caranya agar postingan tampil pada gambar diatas cuma tampil gambar sama judulnya saja + sedikit deskirpsi .. ? kayak gambar diatas

    BalasHapus
  21. masih bingung,pusing lebih di singkat lagi
    mine: anakisengbanget.blogspot.com

    trims atas infonya....

    BalasHapus
  22. Terima kasih sudah memberikan kesempatan untuk berkomentar, postingan ini sangat bermanfaat buat saya ;).
    Silahkan di hapus jika kurang berkenan :)

    Lowongan Kerja
    Ramalan Zodiak Hari Ini
    Tips Kerja
    Lowongan Kerja
    Prediksi Bola Togel
    Prediksi Togel
    Togel Hari Ini
    Resep Lezat

    BalasHapus
  23. Sist mau tanya nih
    1.klu yang Step no 4, jika saya tidak "kompres" , tidak masalahkan?tetap berfungsi?
    2.apakah Kode html no 4 saya langsung "copy n Save di note" bis itu saya masuk k http://code.google.com/ is itu ikutin petunjuk seterusnya n "copy link location"

    BalasHapus
  24. jawaban
    1. tidak apa-apa, saran saya lebih baik di kompress saja mas
    2. code.google.com sudah tidak bisa digunakan untuk menyimpan file script atau lainnya, gunakan host space yang lain untuk menyimpan kode script atau yang lainnya. bisa menggunakan Google Drive.
    untuk penggunaan: copy dan simpan kode menggunakan notepad dengan ekstensi .js untuk penjelasannya sudah saya buatkan artikelnya di panduantemplateblog.com/2013/01/Cara-Membuat-Link-Kode-JavaScript-Blog.html

    BalasHapus
  25. Mba Ana mau tanya...
    ko link 'artikel berikutnya' tidak hidup yaa...?
    terus gimana supaya tepilan deretan artikelnya lurus. karena hasilnya punya saya malah zigzag.

    mohon bantuannya yaa mba Ana yang baik......hehe
    ini urlnya: http://www.sebelasmeter.com/p/filsafat.html

    BalasHapus
    Balasan
    1. coba perbesar ukuran margin bawahnya mbak Iim
      img.label_thumb{margin-bottom:15px;} --> 20px
      .label_with_thumbs{margin-bottom:15px} --> 20px

      maaf telat balas..

      Hapus
  26. Terima kasih sudah memberikan kesempatan untuk berkomentar, postingan ini sangat bermanfaat buat saya ;).
    Silahkan di hapus jika kurang berkenan :)

    ITUPOKER.COM AGEN POKER ONLINE INDONESIA TERPERCAYA

    BalasHapus
    Balasan
    1. sama-sama dan terimakasih atas kunjungan serta komentarnya,,

      Hapus
  27. thank ........ brmanfaat bnget in

    BalasHapus
  28. Terima kasih atas trik dan tifnya yang sangat bermanfaat, mba Ana...

    BalasHapus
  29. Ilmunya tinggi sekali master,terimakasih untuk share artikelnya,sangat bermanfaat buat saya.

    BalasHapus
  30. mba mau tanya nih,
    cara agar postingan nya keluar g mna yah ??
    mohon penjelasannya... Terima Kasih Sebelumnya

    BalasHapus
    Balasan
    1. postingan akan otomatis keluar jika menerapkan cara-cara yang telah saya jelaskan diatas

      Hapus
  31. Kok ga bisa ya bu??cuma ada tulisan artikel berikut

    BalasHapus
    Balasan
    1. bisa kok, cara diatas sudah saya terapkan di beberapa blog termasuk blog teman-teman yang lain.. :)

      Hapus
    2. udah aku coba, tapi tetep kosong laman yg udah baru dibikin itu mbak :( mohon pencerahannya ya~

      Hapus
    3. script dan css di artikel masih tetap bekerja dengan baik dan beberapa blog teman sudah saya bantu pasang dan lebih bagus dari gambar di artikel
      contoh blog teman yang memasang trik ini: jakarta-container.blogspot.com/p/modifikasi-kontainer.html

      Hapus
  32. UPDATE CSS

    ganti kode css diatas dengan kode berikut ini:
    img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; margin-bottom:15px;height:100px; width:100px}
    img.label_thumb:hover{background:#f7f6f6}
    .label_with_thumbs{float:left; width:90%; min-height:110px; margin:0px 10px 2px 0px; adding:0}
    ul.label_with_thumbs li{padding:8px 0; min-height:105px; margin-bottom:15px}
    ul.label_with_thumbs li{list-style:none;}
    .label_with_thumbs a{color:#e74c3c;font-size:16px;font-family:Arial;text-transform:uppercase;}

    :)

    BalasHapus
  33. Artikelnya nanti muncul diberanda atau langsung dihalaman pagenya ya mba..?
    Kalau masih muncul diberanda, bagaimana caranya supaya langsung ke halaman page saja..

    Terima kasih.
    http://blogoonline.blogspot.com/

    BalasHapus
    Balasan
    1. langsung muncul di halaman page mas dan secara otomatis berada disana :)

      Hapus
  34. Saya coba dulu ya mba..

    Mohon maaf untuk memasang link diatas..
    Matur nuwun.

    BalasHapus
    Balasan
    1. silahkan mas dicoba, semoga berhasil ya :)
      untuk link aktif tidak kan muncul mas, kalau link tidak aktif komentar tidak kan diterbitkan :)

      Hapus
    2. Kok masih belum bisa ya mba Ana..? Saya sudah mengikuti langkah-langkahnya, apa mungkin ada yang masih kurang..?

      Untuk halamannya memang sudah bisa, tetapi untuk artikelnya kok masih tampil diberanda..? Tidak otomatis langsung ke halaman tersebut..?

      Solusinya gimana ya mba Ana..?

      Hapus
    3. kalau untuk artikel yang di Beranda selalu pasti muncul sesuai update artikelnya, namun jika ingin agar artikel tidak muncul di Beranda harus menggunakan tag kondisional
      namun jika menggunakan tag kondisional akan menyebabkan fungsi review saat pembuatan artikel akan hilang

      Hapus
    4. Sudah saya coba lagi, bisa tapi tampilan tulisannya kok kurang ke atas ya mba..? apanya yang perlu diedit..? Terima kasih..

      Hapus
    5. atur jarak antara gambar dan artikelnya mas, gunakan pengaturan padding pada sebelah kanan menjadi lebih besar, misalnya padding-right:15px;

      Hapus
  35. tolong saya minta template dari orang tapi gak ada kode ininya ]]> saya baru di dunia blog

    BalasHapus
    Balasan
    1. templatenya menggunakan kode berikut ini mas..

      <style type='text/css'>
      kode CSS
      </style>

      memasukkan kode css berada diantara kode tersebut

      Hapus
  36. Assalamu'alaikum..
    Sy buat laman blogspot makai dr widget (bukan buat sendiri lewat edit html), ko cara di atas ga bisa ya?yg muncul cuma artikel berikutnya saja..Pernah sy coba dg laman yg buat sendiri lewat edit html,justru malah work..apanya yg kurang mba?mohon bantuannya..(penasaran)

    BalasHapus
    Balasan
    1. Waalaikumsalam..
      bolehkah saya lihat blognya?

      Hapus
  37. Assalamualaikum, mbak
    saya sudah mencoba step by step diatas.. seperti
    1. mengcopykan css yang di step awal diatas ]].../b:skin..
    2. mengcopykan script pertama di step kedua diatas /head
    3. membuat laman baru sesuai dengan nama label dan mengisi dibagian html nya dengan script ke dua.
    tapi masih belum bisa menampilkan postingan sesuai dengan suatu label di homepage..
    mohon pencerahannya mbak.. mumet tingkat tinggi sudahan hehe..
    trimakasih mbak

    BalasHapus
  38. Assalamualaikum, mbak
    saya sudah mencoba step by step diatas.. seperti
    1. mengcopykan css yang di step awal diatas ]].../b:skin..
    2. mengcopykan script pertama di step kedua diatas /head
    3. membuat laman baru sesuai dengan nama label dan mengisi dibagian html nya dengan script ke dua.
    tapi masih belum bisa menampilkan postingan sesuai dengan suatu label di homepage..
    mohon pencerahannya mbak.. mumet tingkat tinggi sudahan hehe..
    trimakasih mbak

    BalasHapus
    Balasan
    1. boleh minta alamat blognya mbak?

      Hapus
    2. saya sudah lihat blognya pak dan ada 3 kategori/label yang menggunakan Sekapur Sirih didalam artikel blognya bapak, untuk menampilkan sekapur sirih seperti di artikel ini, silahkan buat seperti yang telah saya jelaskan diatas karena saya lihat di kode template blognya belum ada kode yang terpasang

      Hapus
    3. iya maaf mbak kemarin karena tidak berhasil maka saya hapus hehe
      ini sudah saya setting ulang mbak sesuai dengan stepnya.. dan belum menampilkan hasil
      mohon mbak tinjau lagi apakah ada kesalahan dalam step saya
      matur nuwun mbak

      Hapus
    4. iya maaf mbak kemarin saya mencoba dan tidak bisa akhirnya saya hapus..
      sudah saya pasang lagi mbak code nya sesuai dengan step nya tapi masih tetap tidak berhasil, mohon ditinjau lagi. terima kasih atas bantuannya mbak

      Hapus
    5. minta alamat blognya lagi bu,, maaf blognya tidak saya simpan :)

      Hapus
    6. halaman blognya yang mana bu? saya lihat sudah terisi sesuai isian halaman pada umumnya dan tidak ada pemasangan seperti artikel diatas
      saran saya, coba ibu buat halaman baru sebagai contoh saya dan gunakan cara diatas
      contoh blog teman yang saya buatkan sesuai cara diatas : jakarta-container.blogspot.com/p/modifikasi-kontainer.html

      Hapus
  39. ass, mbak kenapa yang muncul (sebelum readmore di klik) tulisannya gk ada spasinya ya?
    mohon arahan :)

    BalasHapus
    Balasan
    1. sebelum readmore? yang mana ya mbak?

      Hapus
  40. mau tanya nih, kalau pas kita ngeklik laman kita, kok harus ngeklik artikel berikutnya?
    gimana caranya supaya pas kita klik laman kita ga harus ngeklik artikel berikutnya dulu?

    BalasHapus
    Balasan
    1. contohnya ada pada halaman artikel blog ini mas, kalau hanya muncul Artikel berikutnya berarti belum betul..

      Hapus
  41. mau tanya nih mbak, kalau mau memposting artikel tntang kesehatan, entar postingan nya otomatis ke halaman khusus tentang kesehatan jga gmna yaa cara nya mbak ? mohon kasih petunjuk nya :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia