Cara Membuat Artikel Terkait Dengan Gambar Valid HTML5

Cara Membuat Artikel Terkait Dengan Gambar Valid HTML5

Cara Membuat Artikel Terkait atau Related Post Dengan Gambar Valid HTML5 - Masih tentang artikel tentang Tutorial membikin atau mempercantik tampilan blog, yang setelah sebelumnya saya memposting artikel saya tentang Cara Mengganti Favicon Blogger Versi Terbaru Kali ini saya akan menuliskan postingan SEO tentang Artikel Terkait Dengan Gambar di Bawah Postingan. Artikel Terkait merupakan suatu halaman yang menampilkan postingan yang masih terkait satu kategory atau label dengan artikel lainya yang tampil tepat di bawah postingan blog kita . Rata rata para blogger newbie maupun profesional selalu menggunakan cara ini untuk menarik hati pengunjungnya.

Artikel terkait kali ini berbeda dengan Related post yang saya posting sebelumnya, ( Baca => Artikel Terkait (Related Post) Valid HTML5 Style 1 ) perbedaanya terletak pada tampilanya, yang kemarin tidak disertai  dengan thumbnail/gambar, tapi kali ini dilengkapi dengan gambar dan bukan hanya itu saja, tampilan kali ini sudah dilengkapi dengan tombol Show/hide sehingga cocok untuk mempercantik tampilan postingan blog anda. Nah tutorial Blogger kali ini juga sudah dilengkapi dengan Valididasi HTML5, sehingga kita tidak usah lagi mengoptimasi related post ini agar menjadi Valid HTML 5.

Artikel Terkait Dengan Gambar Valid HTML5

Cara Membuat Related Post Valid HTML5
1. Masuk Pada Edit HTML blogger dan Simpan Jquery ini di atas </head>
<script src='//code.jquery.com/jquery-2.0.2.js' type='text/javascript'/>
<script src='//code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
NOTE : Abaikan cara pertama jika di template anda sudah terpasang jQuery Library

2. Simpan Css Font Style ini tepat dibawah <head>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>

3. Selanjutnya Simpan kode berikut ini di atas ]]></b:skin> atau </style>

.terkait_artikel{width:98.70%;height:40px;background:#2c3e50;color:#fff;border:4px double #ddd;text-align:center;margin:0 auto;margin-top:20px;text-transform:uppercase;font:20px Oswald;border-radius:3px;line-height:40px;vertical-align: middle;position:relative;}
#box {display:none}
#relpost_img_sum{line-height:16px;margin-top:5px;padding:0}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none;margin:0;padding:0}
#relpost_img_sum li{background:#ddd;height:60px;list-style:none;margin:6px;padding-bottom:10px;padding-top:5px;border-bottom:1px solid #BFC4FE;border-radius:3px;transition:all .4s ease-out;}
#relpost_img_sum li:hover{background-color:#D3C6D1;transition:all .4s ease-out;}
#relpost_img_sum a{font: 14px Oswald;color:#111;text-transform:uppercase}
#relpost_img_sum a:hover{text-shadow:none}
#relpost_img_sum .news-title{font:13px Roboto !important;margin-bottom:0px}
#relpost_img_sum .news-text{display:block;color:#444}
#relpost_img_sum img{float:left;margin-right:8px;margin-left:4px;width:100px;height:55px;border:5px solid #fff;background-clip:padding-box;box-shadow:4px 4px 2px -2px #D0C5C5;}

4. Lalu sobat Simpan kode JavaScript ini tepat diatas </head>

<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 150;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
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\' A=\'"+4[r]+"\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <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>
NOTE:
  • var relnojudul = 0;
  • var relmaxtampil = 5; /Jumlah Postingan yang mau ditampilkan/
  • var numchars = 150; /Jumlah Cuplikan pada Karatek/
  • var morelink = "readmore";
5. Dan Simpan HTML ini tepat dibawah postingan, biasanya tepat dibawah kode
<div class='post-footer'> yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
  <div class='terkait_artikel' id='run'>Show Artikel Terkait</div>
  <div id='box'>
<div class='related_posts_title'>
<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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<div id='relpost_img_sum'>
  <script type='text/javascript'>artikelterkait();</script>
</div>
</div>
</div>
</div>
</b:if>

6. Dan Silahkan sobat blogger simpan JavaScript ini diatas </body>

<script type='text/javascript'>
$(function() { 
    $(&quot;#run&quot;).click(function () { 
    $(&quot;#box&quot;).toggle(&quot;shake&quot;)
}); 
 });
</script>
7. Simpan Template anda dan lihat hasilnya.

Demikianlah artikel saya kali ini tentang Artikel Terkait Dengan Gambar Valid HTML5 dan jika anda masih ingin mendesain tampilan blog anda, saya merekomendasikan artikel berikut untuk anda Cara Membuat Widget Email Subscribe Flat Ui Semoga Bermanfaat, dan jangan lupa untuk mempercantik tampilanya dengan keinginan anda.

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »