Friday, 30 November 2012

Cara Membuat SlideShow di blog

Slide show
Tutorial
1. Masuk ke akun blog anda
2. Jangan lupa untuk unduh lengkap template anda untuk berjaga-jaga bila ada kegagalan.
3. Mulai edit HTML - lanjutkan
4. Ok, langsung saja sobat cari kode ]]></b:skin>
 (gunakan Ctrl + F untuk lebih mempercepat pencarian) Setelah ketemu, letakkan kode dibawah ini tepat diatas kode tadi

  #featured{margin-bottom:8px;padding:5px;background: -moz-linear-gradient(top, #000, #006600); background: -webkit-gradient(linear, center top, center bottom, from(#000), to(#006600));}
.sliderwrapper{position: relative;overflow: hidden;height: 220px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}

.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:270px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px} 

Catatan : Bila gagal, coba letakkan kode diatas tepat dibawah kode #sidebar-wrapper 
Keterangan : yang diblok warna merah adalah tinggi yang saya gunakan pada slide di blog ini, ganti sesuai keinginan anda.

5. Lanjut, sekarang cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>

<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "News";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
     
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="290" height="220" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';   
document.write(trtd);    
j++;
}}
//]]>
</script>


Keterangan : Warna biru adalah jumlah slide yang akan ditampilakan dan label yang akan ditampilkan pada slide show, ganti sesuai keinginan anda.
Blok warna merah adalah lebar dan tinggi gambar yang saya gunakan pada blog ini, silahkan sesuaikan dengan lebar dan tinggi sidebar anda.

6. Sekarang cari kode </body> dan letakkan kode dibawah ini tepat diatasnya kode </body>

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>


7. Langkah terakhir cari kode ini <div id='sidebar-wrapper'>
jika sudah ketemu, letakkan kode dibawah ini tepat dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if> 

8. Sekarang simpan dan lihatlah hasilnya
Demikian tadi tutorial bagaimana cara membuat slide show otomatis di atas sidebar. Anda dapat mengotak-atik lagi kode diatas tadi dan lakukan pernyesuaian sesuai yang anda inginkan. Semoga bermanfaat 
Demo : SlideShow

Ditulis Oleh : dep edodoe

dep edodoe Anda Sedang Membaca Artikel Cara Membuat SlideShow di blog. Author Membolehkan Anda mengcopy paste atau menyebar-luaskan artikel ini (hasil kopas atau bukan), namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

17 komentar:

terimakasih banyak ya atas tipsnya

kalau untuk wordpress bisa nggak ya memakai cara ini?

kode nya banyak banget ya, saya jadi bingung

INFO PARA PECINTA TOGEL & RIWAYAT SAYA SELAMA SAYA KENAL NAMANYA JUDI TOGEL/KUPON PUTIH.SAYA BAPAK FERY DARI BANJARMASIN INGIN BERBAGI PENGALAMAN MENGENAI TOGEL,DARI AWAL SAYA KENAL NAMANYA TOGEL DARI LINGKUNGAN SEKITAR ISTRI SAYA PADA HAL KLAU DI LIHAT DARI SEGI EKONOMI KELUARGA SAYA LUMAYAN PENGHIDUPAN SEHARI2 SAYA KARENA SAYA DIWARISKAN BEBERAPA HARTA DARI ORANG TUA & BISNIS SAYA LUMAYAN OMSET PERBULANNYA BISA MENAFKAHI KEBUTUHAN KELUARGA SAYA JADI SELAMA SAYA MENGGULUTI TOGEL SAMPAI SAAT INI KEBUTUHAN KELUARGA SAYA PASANG SURUT BISNIS SAYA MENGALAMI PENURUNAN ATAU PAILIT HARTA WARISAN SUDAH TERJUAL JADI PENGHIDUPAN SAYA MELAMPAUI KELUARGA MISKIN DAN HUTANG2 SAYA BERTAMBAH BANYAK KARENA SAYA LIHAT DI INTERNET BANYAK DUKUN TOGEL BISA TAU ANGKA TEMBUS PUTARAN TOGEL TERNYATA MINTA UANG TERLEBIH DAHULU KATANYA (MAHAR).SAYA SUDAH BERULANG KALI MENGHUBUNGI BAIK MBAH MAUPUN AKI TERNYATA SEMUANYA PENIPU PADA HAL SAYA SUDAH KETIPU LEBIH DARI 200JT MAKANYA SAYA NGAK LAGI PERCAYA NAMANYA MBAH ATAU AKI DI INTERNET SEMUANYA PENIPU,DI SUATU HARI SAYA DI AJAK TEMAN KE BANTEN MENEMUI PARANORMAL YANG TIDAK ASING DI TELIBGA ANDA YAITU KI GENDENG PAMUNGKAS & DISITULAH SAYA DI BRIKAN ANGKA TEMBUS 4D TAMPA MAHAR ATAU UANG TERLEBIH DAHULU JIKA ANDA SELAMA INI SERING KETIPU & INGIN MERUBAH NASIB ANDA HUBUNGI KI GENDENG PAMUNGKAS 0823-4443-6933.MAHAR DI BAYAR SETELAH TEMBUS

terimakasih atas semmua infonya gan

kunjungan pertama gan salam kenal

It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.

Very informative, keep posting such good articles, it really helps to know about things.

Artikel Yang Bagus Kaka :D Di tunggu Updetannya :D

Nitip pasang backlink ya bro....

Agen Togel Terpercaya | Agen Togel Online | Agen Bola Online | Agen Bola Indonesia| Agen Judi Bola | Agen Bola Terbaik | Cara Daftar Sbobet

Agen togel

Post a Comment

 

Home | Info Ads | Page Rank | SEO | Blog | Sitemap

COPAZZ ABIESS © Template Design by Herro | Publisher : Templatemu| Modified by : Dep Agoes
Related Posts Plugin for WordPress, Blogger...