Cara Membuat Slide Gambar Posting Otomatis

6 Nov 2013 - -

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>

/*SLIDER MRMUNG.COM */
#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 */

Keterangan: Angka yang saya beri warna merah pada kode diatas, silahkan anda ganti sesuai dengan kebutuhan anda.

4. Copy kode dibawah ini dan letakkan di atas kode </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 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>

5. Langkah terakhir Copy kode dibawah ini dan letakkan didalam widget HTML/ Java Script

<div id='featured'>
<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>

Perhatikan gambar berikut (klik gambar untuk memperbesar):



Demikian, semoga berhasil anda prakatikan dan bermanfaat.

Bagi yang gak ada waktu dan gak  mau repot cara membuat dan mengedit blog, serahkan saja kepada Mung Bisnis | Jasa Pembuatan Blog.