This is a Magazine type three column blogger Template with simple white and color designed by Technology tricks, converted to blogger by free blogger template.You can look at the Demo and Download if you like it.
Pororo Blogger Template is 3 columns Free Blogger Template using Pororo a little penguin, animated cartoon series from Korea as a main theme. On this template you can see pororo and friends on sidebar and on the header section.
If you want to use adsense, use this color code #437eba in main bar, and #d0e6f4 for the sidebar.
DEMO | DOWNLOAD
General Info:
- 3 Columns
- Ads Ready
- By BloggerStyles
- By BloggerStyles - Pro
- Fixed Width
- Gold Templates
- Right Sidebar
- Support Available
Fast Loading Blogger Template merupakan salah satu faktor yang juga menentukan reputasi dan peringkat blog kita di search engine seperti Google, karena algoritma search engine Google telah lama diperbarui dan mulai memperhitungkan loading speed dari tiap website/blog yang di-indexnya sebagaimana seperti yang telah dijelaskan oleh Official Google Webmaster Central dan seorang Pakar SEO terkemuka yaitu Aaron Wall, karena itu agar peringkat blogspot kita dapat terdongkrak di Hasil Pencarian Mesin Pencari, saya sarankan kepada anda untuk segera mengoptimasi loading speed blog anda atau bila anda masih kesulitan untuk mengoptimasinya sendiri, anda bisa menggunakan Fast Loading Blogger Template.
Directus Fast Loading Blogger Template:
- Desain yang responsif
- Cross Browser Compability
- Sudah tersedia Page Navigation
- Sidebar yang bebas anda pasangi widget apapun
- Sudah tersedia Widget Related Post tersendiri
- Sistem komentar yang keren dan stylish dengan Circular Avatars
- Judul Postingan yang atraktif dengan hover dan active states
- Desain Header menggunakan jQuery dan CSS3
- Tersedia 3 kolom pada bagian Footer
- Tersedia fasilitas reply atau balas pada sistem komentar
- Desain template sudah mendekati W3C Valid
- 95% Google Speed Score
- SEO Friendly
- Fasilitas "Read More" dengan hover dan active states
- Gambar responsif
- Font menggunakan jenis font Trade Wind dan Playball
- Ada Facebook dan Twitter Icon
- Intergrated Menu dan Search Box
Jika sobat ingin membuat image slider berdasarkan label tertentu,
seperti template blogger yang lain.
Berikut ini caranya:
1. Login Blog
2. Rancangan
3. Edit html dan centang "expand widget template"
4. Letakkan 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. Letakkan kode berikut diatas </head>
<script>//<![CDATA[/* Script from:http://simplexdesign.blogspot.com/ */imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhu3pwsIvZ6nrzpbCoaQEkhXqND8KZlYWY-92dBstJdBMScXE1gkoXQR5XHhtIPV0oQnLeBBunpEniKxyt1nP9AXVPvZlek92POueNkyxVskWdks-UJ-MxweYrzf8ih_dwzSOcrvCEHP0/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost = 100;numposts1 = 5;label1 = "software";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;}elseif ("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>
Kode berwarna merah adalah label yang ingin ditampilkan.
Ubah sesuai keinginan sobat
6. Selanjutnya letakkan kode berikut di atas </body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/><script>//<![CDATA[featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["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. Letakkan kode berikut dibawah <div id='main-wrapper'> agar slider hanya tampil di homepage saja.
<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><div class='pagination' id='paginate-slider1'></div></div></b:if>
8. Simpan template dan lihat hasilnya.
Semoga tutorial cara membuat gambar slide berdasarkan label tertentu bermanfaat.
