Selasa, 18 Desember 2012

Cara Membuat Artikel Terkait Dengan Gambar Vertikal

19.04  ,  1 comment

Kembali Herlan Blog ingin share seputar trik Blogspot yaitu Cara Membuat Atrikel Terkait Dengan Gambar atau Thumbnail tapi yang ini vertikal loh . artikel terkait ini sebetulnya cukup efektif meningkatkan pageview halaman kita oiya seperti inilah penampakannya atau bisa di lihat setiap artikel halaman saya di bawah. 
Oke langsung aja ya tipsnya ....
  • masuk ke akun blogger sobat lalu pilih template
  • setelah masuk ke halaman template jangan lupa untuk backup dulu tenplate sobat ,jaga2 takut ada eyoy
  •  Lalu pilih edit HTML , klik centang ,lalu pada keyboard tekan Ctrl + F car kode </head>
  • setelah ketemu letakan kode di bawah ini tepat di atas kode  </head> 
  • <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <style>
    #main-wrapper {width: 610px;}
    .post {border-bottom: 1px solid #ddd;}
      }
    </style>
    </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:#fff; 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 = 5;
    var numchars = 200;
    var morelink = "readmore";

    eval(function(p,a,c,k,e,d){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--)d[e(c)]=k[c]||e(c);k=[function(e){return d[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=g f();2 5=g f();2 b=g f();2 c=g f();z O(N,R){2 7=N.1G("<");l(2 i=0;i<7.3;i++){8(7[i].M(">")!=-1){7[i]=7[i].S(7[i].M(">")+1,7[i].3)}}7=7.1x("");7=7.S(0,R-1);K 7}z 1w(J){l(2 i=0;i<J.Q.6.3;i++){2 6=J.Q.6[i];4[s]=6.v.$t;x="";8("P"F 6){x=6.P.$t}B 8("L"F 6){x=6.L.$t}b[s]=O(x,1D);8("10$12"F 6){H=6.10$12.1s}B{H="18://1i.1j.19/1k/1g/1h/1p/d/1r.1l"}c[s]=H;l(2 k=0;k<6.I.3;k++){8(6.I[k].T==\'1n\'){5[s]=6.I[k].q;C}}s++}}z 13(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)K 1T;K 20}z 1Y(){2 m=g f(0);2 p=g f(0);2 n=g f(0);2 o=g f(0);l(2 i=0;i<5.3;i++){8(!13(m,5[i])){m.3+=1;m[m.3-1]=5[i];p.3+=1;p[p.3-1]=4[i];n.3+=1;n[n.3-1]=b[i];o.3+=1;o[o.3-1]=c[i]}}4=p;5=m;b=n;c=o;l(2 i=0;i<4.3;i++){2 9=y.V((4.3-1)*y.14());2 W=4[i];2 X=5[i];2 Y=b[i];2 U=c[i];4[i]=4[9];5[i]=5[9];b[i]=b[9];c[i]=c[9];4[9]=W;5[9]=X;b[9]=Y;c[9]=U}2 w=0;2 r=y.V((4.3-1)*y.14());2 15=r;2 h;2 Z=E.1L;1O(w<17){8(5[r]!=Z){h="<1b A=\'D-v 1X\'>";h+="<a q=\'"+5[r]+"\' T=\'1P\' u=\'G\' v=\'"+4[r]+"\'><22 1U=\'"+c[r]+"\' /></a>";h+="<a q=\'"+5[r]+"\' u=\'G\'>"+4[r]+"</a>";h+="<1d A=\'D-1f\'>"+b[r]+" ... <a q=\'"+5[r]+"\' u=\'G\'>"+1S+"</a><1d A=\'D-1f\'>";h+="</1b>";E.1a(h);w++;8(w==17){C}}8(r<4.3-1){r++}B{r=0}8(r==15){C}}E.1a(\'<1c 1N="1e-1R:1Q; 1e-1M:1I%; 1H-1J:1V;"><a q="18://1K.1Z.19/21/11/1W-1o-1q-1m-1C.1B" v=" 1A 1F 1E 1v 16" u="1u">16 1t 1z 1y</a></1c>\')}',62,127,'||var|length|reljudul|relurls|entry|cuplik|if|informasi||relcuplikan|relgambar|||Array|new|relhasil||||for|tmp|tmp3|tmp4|tmp2|href||relnum||target|title|rangkumanPosts|postcontent|Math|function|class|else|break|news|document|in|_top|postimg|link|json|return|summary|indexOf|suchas|saringtags|content|feed|panjang|substring|rel|tempGambar|floor|tempJudul|tempUrls|tempCuplikan|dirURL|media||thumbnail|contains|random|rini|Widget|relmaxposts|http|com|write|li|div|span|font|text|SnamIh0KTCI|AAAAAAAADMA|lh3|ggpht|_xcD4JK_dIjU|gif|gambar|alternate|terkait|hLjqmEbdtkw|dengan|noimagethumb|url|By|_blank|this|relpostimgthum|join|Lesmana|Herlan|klik|html|vertikal|numchars|get|here|split|margin|85|top|herlanlesmana26|URL|size|style|while|nofollow|Arial|family|morelink|true|src|5px|artikel|clearfix|relatpost|blogspot|false|2012|img'.split('|'),0,{}))


    //]]></script>
    </b:if>
  •  kode yang berwarna merah bisa di sesuaikan dengan lebar template anda 
  • langkah terakhir cari kode <data:post.body/>
  • setelah ketemu letakan kode di bawah ini di bawah kode <data:post.body/> tadi
  • <b:if cond='data:blog.pageType == &quot;item&quot;'><script>
    <div id='related_posts' style='margin-top:35px;'>
    <h4 style='color:#fff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#000;'>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=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>
  • kode yng warna merah bisa di ganti terserah selera sobat ...klik tombol simpan template ..dan selesai deh
Semoga bermanfaat.....

1 komentar: