Pada kesempatan kali ini TCIDs akan memberikan kalian sedikit informasi mengenai Cara Mudah Membuat Slider Otomatis Pada Blog. Tampilah slider ini menurut TCIDs akan membuat blog kalian semakin cantik.
Admin TCIDs pun pernah menggunakan Slider ini pada template sebelumnya. Ya, karena menurut TCIDs tampilannya sangat cantik dan pas sekali dengan tema TCIDs yang mengusung tema Teknologi dan akan terkesan mewah. Maka dari itu admin TCIDs menggunakan template yang ada slidernya. Namun, karena beberapa alasan admin TCIDs mengganti tampilan blog ini menjadi lebih sederhana.
Slider Otomatis yang akan TCIDs bagikan ini maksudnya adalah kalian tidak perlu lagi mensetting posting mana yang akan masuk kedalam slider, karena secara otomatis postingan yang kalian update atau posting terbaru akan masuk kedalam slider ini. Nah, maka kalian tidak perlu lagi memasukkan link satu persatu untuk membuat slider ini.
Perlu kalian perhatikan, salin atau backup template kalian terlebih dahulu sebelum menggunakan slider ini, karena admin TCIDs tidak akan bertanggung jawab, namun jika kalian membutuhkan bantuan mengedit, admin TCIDs akan tetap membantu.
Langsung saja, Berikut adalah Cara Mudah Membuat Slider Otomatis Pada Blog :
1. Masuklah kedalam Dasbor blog kalian
2. Pilih menu Template -> Edit HTML
3. Carilah kode ]]></b:skin> dengan menekan CTRL + F
4. Copy dan Pastekan kode berikut tepat dibawah kode ]]></b:skin>
Note : Kode width dan height adalah lebar dan tinggi dari slider tersebut, silahkan untuk menyesuaikan dengan template yang kalian gunakan.
5. Cari kode </head>
6. Pastekan kode berikut tepat diatas kode </head>
Note : Perhatikan URL berikut : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Script tersebut adalah kode script jQuery.min.js. Jika pada template anda sudah ada script tersebut walaupun berbeda versi, maka anda tidak perlu lagi memasukkan kode berwarna merah (lebar dan tinggi) karena script jQuery.min.js hanya boleh 1 saja di blog anda.
7. Yan terakhir cari kode <div id='main-wrapper'> dan pastekan kode berikut tepat dibawahnya :
8. Save template kalian dan lihat hasilnya
Note : Jika hasilnya tidak sesuai dengan harapan kalian silahkan kalian edit sendiri lebar dan tingginya. Namun, jika tidak berhasil dan gagal maka kalian tinggal restore saja hasil backup dari template kalian tadi.
Demikianlah Cara Mudah Membuat Slider Otomatis Pada Blog. Tampilan slider memang akan mempercantik blog kalian, tapi perlu diingat bahwa memasang slider akan membuat kecepatan loading blog kalian semakin menurun.
Admin TCIDs pun pernah menggunakan Slider ini pada template sebelumnya. Ya, karena menurut TCIDs tampilannya sangat cantik dan pas sekali dengan tema TCIDs yang mengusung tema Teknologi dan akan terkesan mewah. Maka dari itu admin TCIDs menggunakan template yang ada slidernya. Namun, karena beberapa alasan admin TCIDs mengganti tampilan blog ini menjadi lebih sederhana.
Slider Otomatis yang akan TCIDs bagikan ini maksudnya adalah kalian tidak perlu lagi mensetting posting mana yang akan masuk kedalam slider, karena secara otomatis postingan yang kalian update atau posting terbaru akan masuk kedalam slider ini. Nah, maka kalian tidak perlu lagi memasukkan link satu persatu untuk membuat slider ini.
Perlu kalian perhatikan, salin atau backup template kalian terlebih dahulu sebelum menggunakan slider ini, karena admin TCIDs tidak akan bertanggung jawab, namun jika kalian membutuhkan bantuan mengedit, admin TCIDs akan tetap membantu.
Langsung saja, Berikut adalah Cara Mudah Membuat Slider Otomatis Pada Blog :
1. Masuklah kedalam Dasbor blog kalian
2. Pilih menu Template -> Edit HTML
3. Carilah kode ]]></b:skin> dengan menekan CTRL + F
4. Copy dan Pastekan kode berikut tepat dibawah kode ]]></b:skin>
/*Slider http://www.technocenterid.com */#featuredSlider {background:#fff;float:left;margin:0; padding:0 0 10px;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px #c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px #c3c3c3;box-shadow:1px 1px 5px #c3c3c3;border:1px solid #fff; width:99%; position:relative;color:#666;}#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}#featuredSlider .container {height:266px; margin:0 10px 0 0;overflow:hidden; position:relative;}.featuredTitle{padding-top:15px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}.featuredTitle a{color:#f7441a}.featuredTitle a:hover{color:#000}.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}ul.pagination {list-style-type:none; margin:0 auto; padding:0;}ul.pagination a { float:left; margin:0 5px; display:inline; }ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo46u-8YgeZFPuLd-EfyGoYww01Mgnw8YD8MO-O_4GphO7XdR4B8OxTwtIru184zX5nUTYnBHzXpDdOQlfV-l12NAuSgiVAEq14WgsXdlq50ViYBClVbxIBA20Y1ZdMZyt_OvC7Z8-CU0/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }ul.pagination a:hover { background-position:0 -12px; }ul.pagination a:hover { background-position:0 -12px; }ul.pagination a.activeSlide { background-position:0 -12px }a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8QUZhc2bT8jM7TFowvwK2zPNw9fK6kD3YjPWDX0GzuGR_7clf-6eYnXgUJv3h45V67bE4033vLa80Yb6_3LRXZZHOGyWgUW4BT1IvIrIlk1GEbWrRDCmvlLvg24vTzEXQme7SJvzwTs/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}a.readmore:hover {color:#ff0}Note : Kode width dan height adalah lebar dan tinggi dari slider tersebut, silahkan untuk menyesuaikan dengan template yang kalian gunakan.
5. Cari kode </head>
6. Pastekan kode berikut tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdu0jeEIyQUc_nMp7mJUCnv4ZRY_xWG3rocQxWlTTNtl3mATuHSruptEXFAzVKojK2J17q6x_ocvUI5Uf12znIALHj5-64e2-t6h_zclviBG3Pj_nYSZ5QoG9yI-hc1cUPnAMvzf5P9U/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts = 7;
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
}
else
{
maxpost=json.feed.entry.length;
}
for (var i = 0; i < maxpost; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="350" height="262" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more »</a></div>';
document.write(trtd);
j++;
}
document.write('</div>')
}
//]]>
</script>
Note : Perhatikan URL berikut : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Script tersebut adalah kode script jQuery.min.js. Jika pada template anda sudah ada script tersebut walaupun berbeda versi, maka anda tidak perlu lagi memasukkan kode berwarna merah (lebar dan tinggi) karena script jQuery.min.js hanya boleh 1 saja di blog anda.
7. Yan terakhir cari kode <div id='main-wrapper'> dan pastekan kode berikut tepat dibawahnya :
<b:if cond='data:blog.pageType != "item"'><div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$('.slides').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
</div> </div> <!--end .container-->
</div>
</b:if>8. Save template kalian dan lihat hasilnya
Note : Jika hasilnya tidak sesuai dengan harapan kalian silahkan kalian edit sendiri lebar dan tingginya. Namun, jika tidak berhasil dan gagal maka kalian tinggal restore saja hasil backup dari template kalian tadi.
Demikianlah Cara Mudah Membuat Slider Otomatis Pada Blog. Tampilan slider memang akan mempercantik blog kalian, tapi perlu diingat bahwa memasang slider akan membuat kecepatan loading blog kalian semakin menurun.
EmoticonEmoticon