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.
If you want serve ads on this blog.
Terms of requirements:
1. banner 125x125
2. Rp. 30,000, -/bulan.
3. Attach banner url and url links that will be advertised.
eg:
<a href="http://adf.ly/?id=1357226" target="_blank"> <img src = "http://adf.ly/images/banners/adfly.125x125.2.gif" / > </ a>
In an email sent to us,
just click the "contact us" on the homepage www.mig33eagle.com
Ads will be displayed after all the conditions have been met.
Payment can be by credit / BRI account.
Thank you for your attention.
Bosan dengan font style yang itu2 aja sob?
Sobat dapat menggantinya dengan mudah.
Berikut ini cara mengganti fonti font blog:
1. Kunjungi Google web font.
2. Pilih font style keinginan dan klik "add to collection"
3. Kemudian klik use setelah itu muncul script font yang sobat pilih.
misal:
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
Tempatkan kode tersebut dibawah <head> dan tambah simbol "/"
dan jadinya seperti dibawah ini:
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>
4. Edit font-family di template sobat dengan mengganti font yg baru sobat pilih tadi
misal:
.post h3{
font-size:28px;
font-family:'Oregano ';
color:#333;
text-shadow:0px 2px 1px #000;
text-align:center
}
5. Simpan template jika pengeditan sudah selesai.
Lihat hasilnya dan semoga infonya bermanfaat
Pada kesempatan kali imi saya ingin membagi cara membuat thumbnail atau gambar
pada popular berputar saat di sorot mouse.
Langsung aja sobat blogger coba dengan cara berikut ini:
1. Login blog
2. Rancagan
3. Add gadget "popular post"
4. Edit html
5. Letakkan kode diatas ]]></b:skin>
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
6. Cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
dan ganti kode script tersebut dengan kode berikut:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable></b:widget>
7. Simpan template dan lihat hasilnya.
Demikian tutorial cara membuat thumbnail atau gambar
pada popular berputar saat di sorot mouse.
Semoga infonya bermanfaat.