Cara membuat Artikel Terkait dengan Thumnail Gambar dan Ringkasan Artikel

Diposting oleh Unknown on Minggu, 19 Agustus 2012

Bagaimana sob tertarikah dengan artikel Cara membuat Artikel Terkait dengan Thumnail Gambar dan Ringkasan Artikel? sebenarnya membuat artikel terkait itu banyak sekali seperti artikel terkait biasa, yakni hanya berupa teks, ada juga artikel terkait dengan thumnail gambar, dan kali ini saya akan mencoba membahas  tentang bagaimana Cara membuat Artikel Terkait dengan Thumnail Gambar dan Ringkasan Artikel. Yang tentunya ini berbeda dengan yang lainnya terlihat sedikit unik dan menarik karena di serat dengan ringkasa artikel.

Ini dia screen shotnya

 

Gimana sob tertarik untuk dapat membuatnya? Baiklah langsung saja kepada turitorialnya

Cara membuat Artikel Terkait dengan Thumnail Gambar dan Ringkasan Artikel:

Silahkan sobat log in dulu ke blog sobat ya, jangan ke blog orang lain....!!! hehe.. becanda brow...
1. Log in Ke Blog sobat
2. Pada laman Dashboard Click Rancangan > Edit HTML
Ada baiknya sobat mendownload/back-up Template blog sobat dulu mana tau nanti ada kesalahan
setelah sobat download template blog sobat, silahkan centang Expand Template Widget
Setelah itu letakkan kode dibawah ini sebelum kode </head>
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style media='screen' type='text/css'>
/*----- Blog.AhmadRifai.Net Related Post -----*/
#ahmadrifai-related {width:100%;margin-left:5px}
.reltit {color: #333;font-family: Arial,Tahoma,Verdana;font-size: 16px;font-weight: bold;margin: 5px 0 0 0;padding: 5px 0;text-shadow: 1px 1px #eee;text-transform: uppercase;text-align:center;}
#ar-related {float-left;margin: 0;padding: 5px 0;line-height: 16px;}
#ar-related ul {list-style-type: none;margin: 0;padding: 0;}
#ar-related li {width:46%;float:left;margin: 0 3px 0 3px;padding: 5px;height:auto;
list-style: none;border:1px solid #D3D3D3 !important;-moz-border-radius: 4px;
-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;height:145px;}
#ar-related li:hover {background-color: #f9f9f9;}
#ar-related a {text-shadow: 0 1px 1px #aaa;}
#ar-related .news-title {display: block;margin-bottom: 5px;display: block;font-size: 14px;text-align: left;}
#ar-related .news-text {display: block;font-size: 12px;text-align: justify;font-weight: normal;text-transform: none;color: #333;}
#ar-related img {float: left;margin-right: 5px;padding: 4px;width: 70px;height: 70px;
border:1px solid #D3D3D3 !important;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "Selengkapnya ...";
/**/
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|ahmadrifairelated|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if> 


Catatan :
  • 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, contohnya Baca selengkapnya, Read full dan lain-lain.
Setelah itu, sisipkan kode berikut setelah kode <div class='post-footer-line post-footer-line-3'/> atau kode <data:post.body/>

<div id='ahmadrifai-related'>
<p class='reltit'>Artikel Terkait Lainnya :</p>
<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://blog.ahmadrifai.net/' style='display:none;'>Blogger Tutorial + Template</a>
<ul id='ar-related'>
<script type='text/javascript'>ahmadrifairelated();</script>
</ul>
</div>

Setelah itu silahkan sobat preview blog sobat dan lihat hasilnya



Ditulis Oleh : Unknown ~ Turitorial Blog

Anda sedang membaca sebuah artikel yang berjudul Cara membuat Artikel Terkait dengan Thumnail Gambar dan Ringkasan Artikel . Terimakasih atas kunjungannya dan semoga artikel ini dapat bermanfa'at.

:: Thank you for visiting ! ::

Comments
0 Comments

{ 0 komentar... read them below or add one }

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Bagaimana Pendapat Sobat Semua Tentang Artikel Di Atas???

Untuk menambahkan yahoo emotion pada komentar sobat adalah dengan cara menyertakan kode yahoo emotion diatas pada komentar yang sedang ditulis contohnya kode seperti ini :) yang terdapat di atas kotak komentar ini

Panduan Memberi Komentar
1.Masukan komentar anda
2.Lalu pada kata 'beri komentar sebagai' , pilih account yang anda punya, bagi yang belum mempunyai account pilih Name/url, isi nama anda dan Kosongkan URL atau isi dengan alamat facebook anda(untuk mengetahui alamat facebook anda silahkan login ke facebook dan pilih profile anda, anda dapat melihat alamat Facebook anda di atas, contoh alamat Facebook punya saya http://www.facebook.com/profile.php?id=1823916177
3.dan kemudian Publikasikan
4.Selesai dan anda tinggal menunggu komentar anda muncul
Semoga bermanfa'at.

 
^ Back to Top