Cara Membuat Artikel Terkait Dengan Thumbnail Vertikal

Unknown

Trik Blog

18 Nov 2013

Belum ada komentar

Berikut langkah-langkah Membuat Artikel
1.Pertama sekali tentunya terlebih dahulu login keakun Blogger Anda
2. Kemudian langkah selanjutnya silahkan masuk ke menu template, edit HTML dan centang expand  template widget
3. Cari kode </head>
4. Kemudian Pastekan kode berikut tepat diatasnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <style type='text/css'>
          #related_posts h4              {background:#1e4a76;color: #FF00FF;font:bold 14px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
          #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
          #relpost_img_sum:hover         {background:none;}
          #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
          #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:transparent;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
          #relpost_img_sum li:hover      {background-color: #1e4a76;}
          #relpost_img_sum .news-title a {color: #FF00FF;}
          #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
          #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
          #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
     </style>
     <script type='text/javascript'>
          var relnojudul = 0;
          var relmaxtampil = 30;
          var numchars = 0;
          var morelink = "baca selengkapnya";

     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#related_posts{}

#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}

#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; 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 #ccc; background:transparent; margin:0 0 5px; padding:5px; height:65px; list-style:none}

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

#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:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

</style>

<script type='text/javascript'>//<![CDATA[

var relnum = 0;

var relmaxposts = 30;

var numchars = 0;

var morelink = "";

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|relnum|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|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))

//]]></script>

</b:if>

5. Langkaht berikutnya yakni cari salah satu kode dibawah ini :

<data:post.body/> atau <div class='post-footer'>

Sekarang cari kode  <data:post.body/> nomor dua dari bawah.
Copy kode di bawah ini dan taruh tepat di bawah  <data:post.body/> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#FF00FF; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#1e4a76;'>Artikel Terkait</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=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>