بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ اارَّØِيم
Blog Mas Rifky - Yang pasti adalah artikel terkait ini telah Valid HTML5. namun berbeda adalah ini telah dibumbuhi efek Toggle Hide dan Show, Untuk lebih jelas silahkan klik (Klik To Show Artikel Terkait) dibawah postingan ini.
- Kalian juga dapat memplajari beberapa efek Toggle di Blog Mas Adhy KLIK DISINI
Pertama yang harus ada di blg kalian adalah JQuery versi seperti dibawah ini. Abaikan langkah ini jika diblog kalian sudah terpasang JQuery dibawah ini.
- Letakan JQuery ini tepat diatas kode
</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'/>
Karena saya menggunakan font Oswald dan Roboto, maka kalianharus pastikan blog anda sudah terpasang font dibawah ini, jika blog anda sudah terpasang font ini, abaikan langkah ini..
- Simpan kode font ini tepat dibawah kode
</head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>
- Simpan CSS dibawah ini tepat diatas kode
]]></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;}
- Simpan JavaScript ini tepat diatas kode
</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>
var relnojudul = 0;
var relmaxtampil = 5; /Jumlah Pos yang mau ditampilkan/
var numchars = 150; /Jumlah Cuplikan Karatek/
var morelink = "readmore";
- Simpan HTML ini dibawah kode
<div class='post-footer'> , Yang Kedua
lt;b:if cond='data:blog.pageType == "item"'>
<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<div id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</div>
</div>
</div>
</div>
</b:if>
- Silahkan simpan JavaScript ini diatas
</body>
<script type='text/javascript'>
$(function() {
$("#run").click(function () {
$("#box").toggle("shake")
});
});
</script>
Kalian bisa mengubah Efek Toggle (shake) dengan Efek lain, silahkan buka postingan Kompi Ajaib yang telah saya sisipkan diatas.
