Assalamu'alaikum sodara, kali ini ane kembali lagi ngeshare mengenai trick membuat Slide Show Foto Pribadi, Teman, dan Keluarga Pada Blog. Tentunya akan sangat menarik dan keren jika kita bisa memasukan slide foto pribadi, keluarga, dan teman kita kedalam blog, selain untuk memperjelas identitas yang punya blog, maksudnya gini, dengan adanya foto kita terpampang pada blog, mungkin dari sekian banyak pengunjung ada teman dekat kita entah itu teman sekelas, teman main, dan lain sebagainya, tentunya mereka akan lebih mengenal yang punya blog dengan slide foto-foto tersebut.
Selain itu dengan Adanya slide foto kenangan pribadi kita pada blog, kita akan selalu mengingat teman-teman kita yang mungkin sudah berpisah dengan kita sambil membuat postingan tentunya, Intinya yah tergantunglah pendapat sodaraku semua, apakah ini punya manfaat atau nggak, Ok langsung saja, berikut tutorialnya.
Berikut Langkah-Langkahnya :
Langkah Pertama :
Pertama sodara nasuk ke akun blogger sodara, dan tentunya dengan paswor dan email sodara yang langsung menuju ke dasbor blog sodara.
selanjutnya sodara klik Tata Letak, klik Edit HTML, selanjutnya sodara masuk ke format HTML Blog sodara yang berbentuk xml.
Sodara Klik semua tanda panah hitam kecil pada format HTML blog sodara untuk membukanya, sehingga kode-kode yang akan kita cari nantinya bisa ditemukan dan akan terlihat.
Setelah semua format HTML Blog terbuka, Sodara Klik Edit HTML, Kemudian sodara tekan CTRL+F
dan sodara cari kode berikut ]]></b:skin> setelah sodara menemukannya, sodara kemudian pastekan kode di bawah ini tepat di atas kode ]]></b:skin>
#featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.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:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
Langkah Kedua
Sodara Masih berada dalam posisi Edit HTML. Sekarang sodara cari kode </head> , setelah ketemu, sodara letakan kode di bawah ini juga tepat di atas kode </head>
<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVerQsBGrSQakjYbcsz6yTTfBsZ3Wmh7UcpVHNcSLiHn8AGI8W788vWTXn0HD7zvTAoBnyNi1qH4UfYkfeMYFPk8IKK7UClCUCzT4SrDw0dGFuvA2dDaegE0C3pp05eoqhdVCeXAnh_4/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 200;
numposts1 = 30;
label1 = "Kenang-Kenangan";
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="300" 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>
Perhatian : Sodara Bisa Mengatur summaryPost = 200; (Penjelasan Tentang Foto lide Show Postingan Anda. numposts1 = 30; ( Jumlah Slide Show yang akan di Tampilkan ), kode img width="300" height="220" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template dan keinginan sodara. Selanjutnya, sodara letakkan kode di bawah ini sebelum kode </body> (Letakan di atasnya)
<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>
Langkah KeTiga : Silahkan sodara mencari kode berikut <div class='navcontainer'> setelah ketemu, kemudian sodara letakan kode dibawah ini di atas kode <div class='navcontainer'>
<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
Langkah terakhir
Sodara selanjutnya silahkan Klik Save/simpan template, dan lihat hasilnya pada blog sodara.
Catatan : Yang Perlu Sodara Lakukan adalah memposting Foto-foto kenangan/ foto-foto yang sodara inginkan sebanyak yang sodara bisa. Dan perhatikan kode label1 = "Kenang-kenangan" pada langkah kedua point pertama, Kenang-kenangan adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang sodara inginkan.
Dekian Tutorial singkat ini, semoga bermanfaat, dan yang terpenting silahkan dipraktekan. Ok Sodara.
Kalau ada yang tidak jelas sodara bisa menanyakannya pada kolom komentar.
Wassalam...
Tidak ada komentar:
Posting Komentar