Membuat Artikel Terkait Dengan Ringkasan Artikel

Untuk mengobati kerinduan saya kepada teman-teman blogger, kali ini saya akan menulis sebuah tutorial baru tentang artikel terkait atau related post. Sebelumnya saya sudah membahas cara membuat artikel terkait itu pada versi 1 dan versi 2. Dari kedua artikel terkait yang pernah saya tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, di samping tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan saya tentang bahasa JSON Feed sehingga proses penulisan script cukup memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Untuk demonya lihat blog saya disini dan gambarnya anda bisa lihat di bawah ini :


Artikel terkait dengan fasilitas gambar mini dan ringkasan artikel ini memiliki beberapa kelengkapan yang sangat menarik yaitu :
  • Menggunakan bahasa JSON Feed turunan JavaScript
  • Mampu menampilkan gambar yang diambil atau diupload pada artikel
  • Jika artikel tidak mengandung gambar maka gambar akan digantikan dengan gambar default yang sudah dituliskan pada script
  • Mampu menampilkan ringkasan artikel sehingga mempermudah para pengunjung untuk menemukan artikel terkait yang dibutuhkan
  • Artikel terkait ini kedepannya akan dikembangkan dalam versi Ticker dan versi Accordion yang tentunya menggunakan sentuhan animasi jQuery
  • Lebih ringan karena versi ini hanya akan diload pada saat artikel yang dituju sedang dibuka, sedangkan pada saat membuka halaman utama script ini tidak akan diload
  • Konfigurasinya sangat mudah
  • Blog lebih tampak profesional
Bagaimana cantik kan? Baiklah jika anda ingin segera memasangnya di blog langsung saja saya berikan langkah-langkah pembuatannya :
  1. Login dulu ke blogger dengan akun anda
  2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
  3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
  4. Letakkan kode berikut sebelum tag </head>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related_posts h4 {
    background: none repeat scroll 0 0 #333;
    color: #FFF;
    font-family: Arial,Tahoma,Verdana;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 2px 5px 1px 8px;
    text-shadow: 1px 1px #000000;
    text-transform: uppercase;
    }
    #relpost_img_sum {
    /* height: 320px;
    overflow: auto; */
    margin: 0;
    padding: 4px;
    line-height: 16px;
    }

    #relpost_img_sum:hover {
    background: none;
    }

    #relpost_img_sum ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    #relpost_img_sum li {
    border: 1px solid #DDD;
    margin: 0;
    padding: 5px;
    height: 65px;
    list-style: none;
    }

    #relpost_img_sum li:hover {
    background-color: #E6E6E6;
    }

    #relpost_img_sum a {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    }

    #relpost_img_sum .news-title {
    display: block;
    font-weight: bold !important;
    margin-bottom: 4px;
    }

    #relpost_img_sum .news-text {
    display: block;
    text-align: justify;
    font-weight: normal;
    text-transform: none;
    color: #333;
    }

    #relpost_img_sum img {
    float: left;
    margin-right: 14px;
    padding: 4px;
    border: solid 1px #DDD;
    width: 55px;
    height: 55px;
    }
    </style>
    <script type='text/javascript'>//<![CDATA[
    var relnojudul = 0;
    var relmaxtampil = 10;
    var numchars = 200;
    var morelink = "readmore";
    /*
    Related Post with Thumbnail & Summary 1.0 (June 17, 2011)
    */
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
    //]]></script>
    </b:if>
  5. Kemudian cari kode ini (rekomendasi)
    <div class='post-footer-line post-footer-line-3'/>
    atau ini (alternatif) 
    <data:post.body/>
  6. Lalu ubah kode (jika menggunakan kode rekomendasi) menjadi seperti dibawah ini: 
    <div class='post-footer-line post-footer-line-3'>
    <!-- Untuk kode artikel terkait -->
    </div>
  7. Masukan (copy paste) kode dibawah ini menggantikan kode <!-- Untuk kode artikel terkait --> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related_posts'>
    <h4>Related Posts</h4>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
    </b:loop>
    <a href='http://creatingwebsite-maskolis.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
    <ul id='relpost_img_sum'>
    <script type='text/javascript'>artikelterkait();</script>
    </ul>
    </div>
    </b:if>
  8. Kemudian save template dan lihat hasilnya.
Keterangan:
  • var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
  • var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
  • var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
  • var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik.
Demikian tadi tutorial singkat cara membuat artikel terkait dengan thumbnail disertai uraian singkat, mungkin agak sedikit membingungkan, jika ada yang mau ditanyakan silahkan isi kolom komentar yanga da dibawah, sekian dan semoga bermanfaat.

Script source by : modification-blog.blogspot.com
Label:

Saya Minta Maaf Karena Jarang Blogwalking

Selamat siang sahabat bloggers semua dimanapun anda berada. Terus terang saya merasa kangen kepada kalian karena sudah hampir satu bulan blog ini menganggur, dan saya jarang menyapa temen-temen semua. Artikel ini khusus saya buat sebagai permintaan maaf saya kepada teman-teman bloggers yang tetap rajin untuk mengingatkan saya blogwalking. Mohon dimaafkan karena belakangan ini (hampir sebulan lebih) saya sudah tidak pernah lagi blogwalking dan membalas komentar yang masuk ke blog ini. Please forgive me, I must do another thing to fill my needs. Saya masih baru dan butuh bimbingan dari teman-teman bloggers agar bisa menjadi blogger yang handal seperti teman-teman. Jika ada teman yang mengatakan saya sombong, saya mau gimana lagi. Saya hanya ingin meminta maaf. Jika ada sobat yang mengatakan saya sibuk, sebenarnya bisa ia dan bisa juga enggak. Terimakasih atas perhatian teman-teman blogger yang selalu rajin untuk memperhatikan saya melalui blog ini. Sebenarnya ada apa dengan Maskolis sehingga dirinya menghilang selama sebulan?

Baiklah, langsung saja saya tidak ingin mencari-cari alasan, namun pada kenyataannya memang ada alasan mengapa sampai saya menghilang. Mulai dari masalah template blog. Template blog ini aslinya adalah Techstop. Setelah mencoba beberapa bulan, saya menemukan beberapa bagian yang sepertinya aneh dan tidak bisa diubah. Karena ketidakpuasan di hati, akhirnya template ini pun saya bongkar habis-habisan dan mulai lagi dari nol. Akhirnya jadilah template blog Creating Website seperti yang anda lihat ini. Mungkin teman-teman sudah terbiasa dengan desain template blogger, kurang tertarik dengan postingan desain template yang ada di blog ini, namun tidak bagi saya karena saya suka mengutak-atik dan mempelajari desain template blogger. Utak-atik desain template ini cukup menyita waktu juga. Akhirnya saya pun jarang blogwalking.

Nah alasan yang lain adalah karena saya juga sedang belajar sambil membuat sebuah website komunitas. Sampai sekarang belum jadi, padahal waktu launching sudah dekat dan saya dikejar-kejar waktu. Pusing juga nih ceritanya. Tapi kalo ada yang mau ngintip boleh ini linknya http://planetkenthir.com Trus saya mau fokus kemanakah? Ya karena hal itu tadi, saya jadi jarang blogwalking dan membalas komentar yang masuk. Belum lagi teman-teman yang minta tukaran link. Nggak tau lah, udah berapa banyak yang masang link saya namun saya belum memasang linknya. Nah, yang paling repot kalau permintaan tukaran link disampaikan di shoutbox. Kan bisa hilang pesannya. Nah, jika ada teman-teman yang sudah memasang link saya,  maaf yah kalo saya belum sempat pasang juga link anda. Saya juga minta maaf buat teman-teman yang sudah ikut followers blog ini. Jika ada yang belum saya follow, bisa meninggalkan pesan di kolom komentar blog ini. Kenapa mesti disitu? Karena kalau teman-teman meningalkan pesan di shoutbox, pesan tersebut tidak akan bertahan lama karena otomatis pesan akan terhapus jika telah menampung seratus pesan chat yang masuk.

Nah, dari berbagai alasan lainnya yang membuat saya jadi jarang blogwalking. Sekali lagi saya yang masih pemula atau newbie perkenankanlah untuk menghaturkan permintaan maaf kepada Antena Bugil (Om Ajim), Lora Malunk, Lulus Gita, Gilanx (Doraemon), Hobbies (Yudy), Rezdown7, Ichsan Afriandi, Abgteror, Wancikgumuzik, dan semua teman-teman yang baik-baik dan manis-manis yang telah bersedia meluangkan waktu untuk berkunjung dan meninggalkan komentar di blog ini. Saya juga meminta maaf kepada teman-teman yang sudah bertanya pada beberapa artikel di blog ini, baik yang melalui email maupun komentar yang masuk dan belum sempat saya jawab satu persatu. Sebisanya akan saya bantu jika memang saya mampu. Saya akan berusaha sebisa mungkin untuk menjadi blogger baik, ramah dan rajin blogwalking. Saya mohon bimbingan dan arahannya.
Label: ,
Langganan: Postingan (Atom)