Cara Membuat Slide Gambar Posting Otomatis
Pada tutorial ini kita akan belajar bagaimana Cara Membuat Slide Gambar Posting Otomatis pada blog dengan engine blogger.com, dan bagi anda yang telah berhasil mempraktikan tutorial Membuat Slide Gambar di Blog Dengan JQuery pada posting saya terdahulu saya ucapkan SELAMAT, dan anda bisa mencoba tutorial saya kali ini pada blog kesayangan anda.
Beberapa klien MungBisnis.com | Jasa Pembuatan Blog Elegant Keren dan Murah ada yang menghendaki blog hasil redesain MungBisnis diberi slide gambar dan posting otomatis yang posisinya diletakan diatas posting, dibawah header, browsing cari-cari yang cocok, ketemulah di blognya mas kholis, hanya sedikit perubahan yang saya lakukan, yaitu compressing kode, dan beberapa saya non aktifkan, sebagai gambaran lihat demo di link berikut: mungdemo1.blogspot.com
Oke, langsung ke tutorial Cara Membuat Slide Gambar Posting Otomatis di Blogger:
WARNING! Biasakan backup template anda supaya jika terjadi kesalahan, anda bisa mengembalikan template blog sebelum di edit (klik gambar dibawah untuk memperbesar tampilan).
Cara backup template blog anda perhatikan gambar diatas.
1. Login Blogger.com
2. Buka Template dan klik EDIT HTML perhatikan gambar berikut:
3. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
#featured{width:530px;height:300px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{display:none;position:absolute;top:0;right:0;list-style:none;width:240px;height:300px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:530px;height:300px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:530px;height:300px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:none;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:228px;left:0;height:71px;width:530px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}
/*END SLIDER MRMUNG.COM */
4. Copy kode dibawah ini dan letakkan di atas kode </head>
<script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true);
});
</script>
<script type='text/javascript'>
//<![CDATA[
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}('w=Z T();w[0]="1Y://2.1Z.1X.1W/-1U/1V-21/22/27/26/25+23.1T";V=17;28=17;19=1K;1I=20;X=4;14 15(18,1a){e s=18.q("<");u(e i=0;i<s.h;i++){g(s[i].z(">")!=-1){s[i]=s[i].N(s[i].z(">")+1,s[i].h)}}s=s.1M("");s=s.N(0,1a-1);1Q s}14 1L(C){j=(V)?M.1i((w.h+1)*M.1d()):0;n=Z T();u(e i=0;i<X;i++){e f=C.O.f[i];e G=f.R.$t;e P;e A;g(i==C.O.f.h)v;u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1e\'){A=f.l[k].D;v}}u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1f\'&&f.l[k].1g==\'1h/1c\'){P=f.l[k].R.q(" ")[0];v}}g("Q"E f){e r=f.Q.$t}J g("H"E f){e r=f.H.$t}J e r="";x=f.16.$t;g(j>w.h-1)j=0;n[i]=w[j];s=r;a=s.z("<n");b=s.z("F=\\"",a);c=s.z("\\"",b+5);d=s.1j(b+5,c-b-5);g((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))n[i]=d;e B=[1,2,3,4,5,6,7,8,9,10,11,12];e K=["1E","1F","1D","1B","1p","1q","1r","1o","1n","1k","1l","1m"];e 1s=x.q("-")[2].N(0,2);e m=x.q("-")[1];e y=x.q("-")[0];u(e o=0;o<B.h;o++){g(1t(m)==B[o]){m=K[o];v}}e I=\'<L 13="Y-U-1R Y-U-1P" 1z="W-\'+i+\'"><a D="\'+A+\'"><n 1A="24" 1y="1O" F="\'+n[i]+\'"/></a><L 13="1N"><1b><a D="\'+A+\'">\'+G+\'</a></1b><p>\'+15(r,19)+\'...<a D="\'+A+\'"></a></p></L></L>\';1v.1w(I);j++}}14 1H(C){j=(V)?M.1i((w.h+1)*M.1d()):0;n=Z T();u(e i=0;i<X;i++){e f=C.O.f[i];e G=f.R.$t;e P;e A;g(i==C.O.f.h)v;u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1e\'){A=f.l[k].D;v}}u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1f\'&&f.l[k].1g==\'1h/1c\'){P=f.l[k].R.q(" ")[0];v}}g("Q"E f){e r=f.Q.$t}J g("H"E f){e r=f.H.$t}J e r="";x=f.16.$t;g(j>w.h-1)j=0;n[i]=w[j];s=r;a=s.z("<n");b=s.z("F=\\"",a);c=s.z("\\"",b+5);d=s.1j(b+5,c-b-5);g((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))n[i]=d;e B=[1,2,3,4,5,6,7,8,9,10,11,12];e K=["1E","1F","1D","1B","1p","1q","1r","1o","1n","1k","1l","1m"];e 1s=x.q("-")[2].N(0,2);e m=x.q("-")[1];e y=x.q("-")[0];u(e o=0;o<B.h;o++){g(1t(m)==B[o]){m=K[o];v}}e I=\'<1u 1z="1C-W-\'+i+\'" 13="Y-U-1C-1J"><a D="#W-\'+i+\'"><n 1A="1G" 1y="1S" F="\'+n[i]+\'"/><1x>\'+G+\'</1x></a></1u>\';1v.1w(I);j++}}',62,133,'||||||||||||||var|entry|if|length||||link||img|u2||split|postcontent|||for|break|imgr|postdate||indexOf|posturl|month|json|href|in|src|posttitle|summary|trtd|else|month2|div|Math|substring|feed|pcm|content|title|rel|Array|tabs|showRandomImg|post|numposts1|ui|new||||class|function|removeHtmlTag|published|true|strx|summaryPost|chop|h2|html|random|alternate|replies|type|text|floor|substr|Oct|Nov|Dec|Sep|Aug|May|Jun|Jul|day|parseInt|li|document|write|span|height|id|width|Apr|nav|Mar|Jan|Feb|80|showrecentposts5|summaryTitle|item|70|showrecentposts4|join|info|246|hide|return|panel|50|jpg|uitX7ROPtTU|Tyv|com|blogspot|http|bp||G4NA_uI|AAAAAAAAFBY|image|400|no|s1600|NcWLPVnYEnU|aBold'.split('|'),0,{}))
//]]>
</script>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>

Demikian, semoga berhasil anda prakatikan dan bermanfaat.
Tidak ada komentar: