Cara Menciptakan Slide Gambar Posting Otomatis

Pada tutorial ini kita akan berguru 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 dapat 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, ialah compressing kode, dan beberapa saya non aktifkan, sebagai citra lihat demo di link berikut: mungdemo1.blogspot.com

Oke, eksklusif ke tutorial Cara Membuat Slide Gambar Posting Otomatis di Blogger:
WARNING!   Biasakan backup template anda supaya kalau terjadi kesalahan, anda dapat 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 arahan dibawah ini sempurna diatas arahan ]]></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 arahan diatas, silahkan anda ganti sesuai dengan kebutuhan anda.

4. Copy arahan dibawah ini dan letakkan di atas arahan </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 arahan 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, supaya berhasil anda prakatikan dan bermanfaat.

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

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: