cara membuat slider image / slide show otomatis posting terbaru

Postingan kali ini saya akan membagikan cara membuat slider image / slide show otomatis posting terbaru dengan thumbnail mini dibawahnya pada template blogger/blogspot. Seperti contoh gambar di bawah ini.

DEMO

Berminat? Silahkan anda coba!

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, login ke akun blogger anda.
2. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
3. Demi keamanan dan kenyamanan anda backup dulu template anda.
4. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :                      
   #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
   #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
   #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6puAkQ_JpspAwovftIXza1jpMcpEEcOk06HP1QaISjKD3NxXpZqBXSi9sU-K3wOHnHau-DL24EYndk3Ts3fylVLqojDN9qhMrHkv9zdJWlz-KUS6WFtcopTOCiiQ4kPAvoojBLSaQCDwV/s1600/transparant.png)}
   #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
   #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
   #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
   #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
   #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
   #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
   #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
   #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} 
   .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} 
   .slide .widget {margin:0px 0px 6px 0px;}
   Tulisan warna Orange diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
5. Cari Kode </head> lalu letakan kode di bawah ini tepat diatasnya!             
   
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'type='text/javascript'/><script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/><script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvdNgALNPjPiFE8LB799NFkoidhsg779jPLYblqrQ7t8dWT5PKtGsYepB1WJYMhMgbWHfztVIHJfum1UgXIuWgSizsJDwC_QUIGi0bY1iRinFba1XuqO-SDiYoyy6dbP9DRXl7jabt1E/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 100;
   summaryTitle = 25;
   numposts3 = 5;
   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 showrecentposts3(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   for (var i = 0; i < numposts3; 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 daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
   document.write(trtd);
   
   j++;
   }
   }
   function showrecentposts4(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   for (var i = 0; i < numposts3; 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 daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
   document.write(trtd);
   j++;
   }
   }
   //]]>
   </script>

   
   

   Keterangan :
   Kode script warna merah (paling atas) adalah kode script jQuery.min.js  yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js, walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Angka 5 yang berwarna Ungu : Jumlah post yang ditampilkan dalam slider
   Angka 407 dan 240 yang berwarna hijau : Panjang dan lebar image besar
   Angka 75 dan 50 yang berwarna kuning : Panjang dan lebar image kecil
6. Kemudian cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya : 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
</div>
 </b:if> 
7. Setelah langkah diatas, save templates. Kemudian klicklayout >> add gadget yang berada di atas posting blog masukkan kode ini pada kotak HTML/Javascript :    
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[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>
</div>
8. Simpan 

Simbah : Pemuda Ber-Pakarti Luhur & Tut Wuri Handayani bila Dibelakang, Bukan Mengeluh

Simbah : Pemuda Ber-Pakarti Luhur & Tut Wuri Handayani bila Dibelakang, Bukan Mengeluh

Inget Pesan Simbah : Pemuda harus ber-pakarti luhur & Tut Wuri Handayani bila dibelakang bukannya mengeluh, ungkapan sangat dalam artinya bagi kepribadian pemuda dimasa akan datang nantinya , lebih-lebih bagi pemuda tersebut ingin jadi pemimpin kelompok/ golongan  atau lainnya. Pakarti

Sikap seorang Pemuda harus cepat tanggap terhadap berbagai persoalan yang ada disekitarlingkungannya sehingga nantinya menjadi pemimppin yang peduli terhadap lingkungan dan dicintai rakyatnya. Sehingga pemuda mestinya jauh dari budaya hura-hura yang tidak berguna tapi harus mempunyai kegiatan yang positif yang dapat mengembangkan daya inytelektualnya serta bakat dan minatnya sehingga nantinya bisa menjadi bekal di masa depan.

Ingat, Indonesia adalah negara yang sangat kaya sehingga perlu kemauan dan keilmuan yang cukup untuk menggali kekayaan tersebut, bukan ikut budaya barat yang hanya melemahkan bahkan membahayakan Bangsa dan negara dari berbagai  ATHG ( ancaman, tantangan , hambatan dan gangguan)

Sudah banyak pemuda Indonesia yang jadi penghianat bangsa dan bahkan menjual bangsanya sendiri demi keuntungan pribadi dan golongan yang hanya sesaat.

Pidato Presiden : 5 Langkah Gerakan Penghematan Energi Nasional tahun 2012

Pidato Presiden : 5 Langkah Gerakan Penghematan Energi Nasional tahun 2012

Pidato Presiden mengenai Gerakan Penghematan Energi Nasional beberapa kali ditunda akhirnya malam ini (selasa, 29 Mei 2012) jadi dilaksanakan. pidato presiden kali bertema ” Gerakan Penghematan Energi Nasional tahun 2012″

Dari Pidato Presiden Susil Bambang Yudoyono menyampaikan 5 langkah penting mengenai penghematan energi nasional.

Dari Pidato Presiden dititikberatkan akan mengambil langkah-langkah penting yaitu

• Mencegah Devisit Anggaran
• Melakukan Penghematan BBM

Langkah-langkah Gerakan Penghematan Energi Nasional tahun 2012 tersebut yaitu

1.  Pengendalian distribusi di SPBU
2. Pelarangan Kendaraan Pemerintah memakai BBM bersubsidi
3. Pelarangan BBM Bersubsidi untuk perkebunan , pertambangan dan industri
4. Konversi BBM ke BBG khususnya transportasi
5. Penghematan Listrik dan Air serta penerangan di jalan-jalan

Kebijakan lainnya adalah untuk meningkatkan pipa gas dan pencairan LNG di nusantara serta membangun perusahan eksploasi Gas Bumi dan mengembangkan energi lainnya (energi air, cahaya, biogas dll) sebagai pengganti pemakaian BBM.

Dari pidato Presiden bolak-balik hanya mengeluh mengenai subsidi kepada rakyat tapi subsidi ke pemilik Bank yang di rekap masih berjalan tidak dipersoalkan, padahal mereka menghabiskan trilyunan rupiah per tahunnya, harusnya hal ini merupakan langkah pertama untuk mengurangi Devisit Anggaran. Anggaran tersebut bisa digunakan untuk pendidikan pemuda, kesehatan masyarakat, Kesejahteraan Masyarakat, bantuan modal UKM atau usaha mikro rakyat,  dll

 Jangan Rakyat yang hanya menjadi alasan atas beban subsidi, tugas pemerintah adalah mengurus rakyat kecil bukan mengeluh atas beban subsidi pada yang ada.

Sumber : Raras Wuri Miswandaru, SPdI

Pendidikan Itu Penting

Pendidikan adalah suatu cara untuk meningkatkan kemampuan kita dalam menghadapi masalah dan menjalani tugas atau kewajiban. jadi karena pentingya pendidikan tersebut mari kita tingkatkan mutu pendidikan bangsa kita dengan peduli kepada pendidikan generasi muda kita, agar mereka benar-benar mendapatkan pendidikan yang layak.

kita bisa membantu generasi muda bangsa Indonesia dengan membangun dan mendirikan sekolah formal maupun non formal juga yang informalnya yang sekarang dikenal Home schooling.

pemerintah juga seharusnya benar-benar memperhatikan dunia pendidikannya, anggaran pendidikan yang 20% dari APBN harus benar-benar dijalankan agar akses pendidikan menjadi lebih baik dan merata ke seluruh pelosok negeri ini.

disamping itu para pelaku pendidikan khususny guru, dosen dan tenaga kependidikannya juga diperhatikan benar-benar.baik yang bekerja pada lembaga pendidikan formal maupun yang non formal.

admin