Template Seperti Kapanlagi.com Free

Hallo sobat kali ini ciboy pengen bagi-bagi template gratis nih. Dan template kali ini bukan sembrangan karena di rancang langsung oleh mas Andik dari Blog facewoman. Dia sengaja membagikannya secara cuma-cuma template hasil karyanya. Dan menurut saya template itu bagus untuk blog portal berita, karena selain letak widgetnya yang banyak template ini juga Seo friendly, langsung aja deh kebawah ini, Oh ya jangan lupa minta like dan komennya kalau menurut agan artikel ini bermanfaat. Makasih

Demo <> Download

Note: Credit Link dibagian Footer paling bawah mohon jangan diganti atau dihapus, sebagai blogger sejati hargailah karya orang lain. Thanks

Cara Membuat Slide Show Berita Foto Berdasarkan Label

Selamat Malem Sobat blogger. Kali ini Theciboy pengen bagi2 trik nih tentang bagaimana cara membuat Slide Show Berita Foto Berdasarkan Label. Demo nya bisa dilihat disini di halaman depan www.blaxbox.net . Oke tanpa basa basi langsung aja deh kita buat, cekidot.

1. Login ke blogger >> Rancangan >> Edit HTML

2. Centang Expand template widget

3. Cari kode ]]></b:skin>
4. Letakan kode berikut 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}
.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}

5. Lalu Cari kode </head>, Dan letakkan kode berikut diatas kode </head>

<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjIbpKit0zf7VVdQEBVgRgqC9mF7q_1WQ9v1Z6z9tbwkNmEESOqwHNlsKTfTJXrsSrTt1BZRWybV7Om7AVPP8DSTGQpuMcXUpsUw5CIWniwTeXo4Qeboi4kzm4dA7eDEMu4Xtf9sMl_8/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "berita";

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="370" height="240" 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>

Catatan: Silahkan ganti tulisan yang berwarna hijau dengan nama label anda.

6. Cari kode </body>, Lalu letakkan script berikut diatas 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. Untuk menyimpan widgetnya tepat diatas Postingan silahkan cari kode <div id='main-wrapper'> , lalu pastekan script berikut di bawah <div id='main-wrapper'>

<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. Pratinjau terlebih dahulu jika sukses baru simpan.

Dalam penulisan nama label diatas harus sesuai dengan label anda tidak boleh beda huruf ataupun besar kecilnya karena akan mempengaruhi slide nya. Sekian trik kali ini semoga bermanfaat. Thanks