Setahun sudah usia blog CARA GAMPANG ini, sudah banyak makan asam garam di dunia blogging, sampai kadang-kadang kehabisan thema (berkualitas) yang akan diusung menjadi suatu postingan blog. Kadang otak ini rasanya penuh dan sulit menemukan thema artikel blog yang pantas diusung untuk blog yang tidak terlalu bagus ini.
Ditengah kegalauan yang panjang ini, aku ingin berbagi sesuatu kepada para sahabat blogger sekalian, aku ingin bagikan sebuah template blogger hasil modifikasi (otak-atik) aku yang paling akhir. Modifikasi mana telah aku lakukan sebulan yang lalu, dan telah aku lakukan uji coba kepada blog-blog aku yang lainnya. Hasilnya ..........., cukup memuaskan. Template hasil modifikasi ini aku beri nama BARU COBA 2013 free blogger template. Tampilannya seperti gambar di bawah ini :
Baru Coba 2013 Free Blogger Template
Template hasil modifikasi ini telah dilengkapi dengan fitur-fitur baru berupa Slider Carousel yang langsung menampilkan 12 postingan blog terbaru, Menu Nav-Bar statis pada bagian atas, Widget Slider Postingan berdasarkan kategori (label) tertentu, Widget Recent Post berdasarkan kategori (label) tertentu dengan hanya menampilkan 1 thumbnail, Widget Tabber View otomatis pada bagian kanan atas dan masih banyak fitur-fitur pendukung yang lainnya.
Untuk melihat demo dari template ini, silahkan anda mengunjungi salah satu dari 2 link berikut ini :
DEMO 1 | DEMO 2
Berikut ini akan aku bahas sedikit perihal cara-cara menampilkan beberapa fitur yang ada :
1. Widget Slider Postingan
Widget ini akan menampilkan postingan-postingan artikel unggulan sesuai yang anda inginkan secara bergantian, cara memasangnya adalah, log-in ke dashboard blog anda, pilih tata-letak kemudian tambahkan fitur Gadget HTML dan copykan rangkaian script di bawah ini :
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/seo?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/-/seo?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>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/seo?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/-/seo?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>
Keterangan :
Kode yang berwarna merah adalah label (kategori) postingan blog yang ingin ditampilkan pada widget ini, gantilah label tersebut sesuai dengan keinginan anda, sesuaikan dengan kategori-kategori artikel blog yang telah anda miliki. Widget ini secara otomatis akan menampilkan 4 postingan secara bergantian.
Kode yang berwarna merah adalah label (kategori) postingan blog yang ingin ditampilkan pada widget ini, gantilah label tersebut sesuai dengan keinginan anda, sesuaikan dengan kategori-kategori artikel blog yang telah anda miliki. Widget ini secara otomatis akan menampilkan 4 postingan secara bergantian.
2. Widget Recent Post
Widget ini akan menampilkan 6 postingan terbaru berdasarkan label (kategori) tertentu yang kita inginkan. Widget ini hanya akan menampilkan 1 thumbnail dari ke enam postingan tersebut, untuk menampilkannya, lakukan hal yang sama dengan ola nomor 1 di atas, kemudian copy pastekan rangkaian script html berikut ini :
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/blogging?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://semangat888.blogspot.com/feeds/posts/summary/-/blogging?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://semangat888.blogspot.com/search/label/blogging" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
<script type="text/javascript" src="/feeds/posts/default/-/blogging?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://semangat888.blogspot.com/feeds/posts/summary/-/blogging?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://semangat888.blogspot.com/search/label/blogging" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan :
Kode yang berwarna merah adalah kode label (kategori) sedangkan kode yang berwarna biru adalah merupakan alamat url blog anda. Ganti atau sesuaikan kedua-duanya dengan blog anda.
Kelebihan utama template ini adalah tidak banyak mempergunakan text java script (karena telah aku compress atau sederhanakan), sehingga mempercepat proses loading blognya. Bila anda masih ragu silahkan anda tes kecepatan loading template ini lewat link : TEST SPEED
Demikianlah uraian aku tentang BARU COBA 2013 free blogger template, semoga bermanfaat, bilamana masih mengalami masalah, silahkan anda menghubungi aku lewat kotak komentar di bawah ini.
This post first appeared on Cara Gampang | Cara Gampang Tutorial | Cara Gampang Tips-Trik, please read the originial post: here
