template 4 blogger: CodingCSS

Tampilkan postingan dengan label CodingCSS. Tampilkan semua postingan

Jumat, 25 Mei 2012

[Blogging] Cara Membuat Meta Deskripsi Disetiap Postingan

Jumat, 25 Mei 2012

Menggunakan meta deskripsi yang unik dan akurat akan membantu postingan anda berada di laman teratas hasil pencarian di mesin telusur. Meta deskripsi memberikan mesin penelusuran google dan lainnya sebuah ringkasan tentang artikel yang anda posting. Meta Deskripsi merupakan salah satu hal yang digunakan untuk menjelaskan isi dari sebuah artikel yang keluar di laman penelusuran, lihat gambar dibawah untuk lebih jelasnya.

Meta Deskripsi yang bagus adalah yang bisa menjelaskan konten pada laman anda misalnya seperti judul postingan ini "Cara Membuat Meta Deskripsi Disetiap Postingan" kita bisa membuat Meta Deskripsi dengan merangkum isi artikel disini seperti "Cara membuat Meta Deskripsi yang akurat dan SEO dalam setiap postingan artikel blog yang bisa menggambarkan isi konten dalam mesin telusur". Dengan adanya Meta Deskripsi pengunjung akan memahami isi keseluruhan dari artikel anda.

Berikut cara membuat kalimat Meta Deskripsi yang bagus:

Ringkasan dari artikel yang anda buat
Kalimat deskripsi yang unik
Jangan mengulang kata
Jangan menggunakan kalimat diskripsi secara umum seperti "Meta Deskripsi Blog" atau "Meta Diskripsi Bagus"
Jangan menggunakan kalimat deskripsi hanya berupa kata kunci

Anda bisa membuat deskripsi penelusuran langsung saat anda sedang menulis artikel di blog yaitu disamping kanan pada setelan entri, untuk yang belum ada menu deskripsi penelusuran bisa mengikuti cara sebagai berikut : Pada menu dasbor blogger pilih menu Setelan >> Preferensi Penelusuran >> pada Tag meta pilih "edit" dan pilih "ya" lalu tulis deskripsi tentang blog anda dan simpan. Deskripsi ini hanya untuk homepage blog anda saja sedangkan untuk deskripsi pada tiap postingan bisa anda lihat dibawah ini..

Pada setiap artikel yang anda tulis anda harus membuat setiap deskripsi yang berbeda sesuai dengan isi artikel yang anda buat. Agar meta deskripsi ini muncul tambahkan pada Template html blog anda kode dibawah ini dan tempatkan setelah kode <head> atau sebelum kode <b:skin>
<meta expr:content='data:blog.metaDescription' name='description'/>

Dengan membuat Meta Deskripsi yang bagus akan membawa penelusuran yang lebih baik pada konten anda dari mesin telusur. Hal ini akan menjadi salah satu cara agar blog sobat lebih SEO friendly dengan mesin telusur milik google atau mesin telusur lainnya. Dengan begitu blog anda lebih diperhatikan saat ada penelusuran dengan kata kunci yang sesuai dengan konten anda dan diberikan hasil pada penelusuran teratas karena google mudah dalam mendeskripsikan isi konten anda.

Selamat mencoba...

NAMA ANDA - 11.13

[Blogging] Membuat Navigasi Blog Lebih Menarik Dan Mudah

Jumat, 18 Mei 2012

Navigasi yang mudah pada blog akan membuat pengunjung menjadi betah untuk melihat postingan anda yang lainnya. Dengan Navigasi yang bagus juga memberikan kesan blog anda menjadi lebih profesional. Kali ini saya akan memberikan cara membuat navigasi di bawah posting blog agar lebih menarik seperti yang saya terakan diblog ini.

Langkah pertama silahkan masuk ke dasbor blog anda dan langsung ke menu Template lalu pilih Edit HTML. (seperti gambar dibawah)

Kenapa ya selalu dikasih langkah pertama diatas apa gak bosan.hehe :-D, padahal itu bagian yang sudah banyak diketahui para blogger sejagat raya, langkah ini mungkin buat yang belum tahu saja atau masih baru di dunia blogging. Untuk yang belum punya blog silahkan buat blog dahulu, untuk panduannya bisa melihat disini Langkah Cepat Membuat Blog Di Blogspot karena nanti anda akan banyak mendapatkan pengalaman menarik dari blog yang anda kelola.

Selanjutnya centang pada bagian Expand Template Widget (lihat gambar dibawah)

Lalu cari kode <b:include name='nextprev'/> agar lebih mudah mencarinya gunakan Ctrl+F lalu masukkan kode tersebut dan cari.
Setelah ketemu ganti dengan kode dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>

Selanjutnya cari kode <b:include data='feedLinks' name='feedLinksBody'/> dan ganti dengan kode dibawah ini :

<style type='text/css'>
.blogpager {
font-size:12x;
color:#000000;
font-weight:bold;
background:#ffffff;
border:1px solid #ccc;
padding:5px;
}
</style>
<div align='center' style='margin:15px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/><span id='vwg-pager-prev'/><input name='showingpage' onfocus='this.select()' size='4' title='Page Number you want to Go' type='text' value='.....'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='.....'/>
<input onclick='checkpager()' type='button' value='Go Page'/>
<span id='vwg-pager-next'/><span id='vwg-pager-last'/>
</form>
</div>
<script type='text/javascript'>
var blogID = "3926587677569576014";
var home_page = "http://namabloganda.blogspot.com/";
var pager_max_main = 10;

var pager_first_text = "First"; //
var pager_last_text = "Last"; //
var pager_prev_text = "Previous"; //
var pager_next_text = "Next"; //
</script>
<script src='http://cinghe.googlecode.com/files/blogger_pag.js' type='text/javascript'/>
<b:include data='feedLinks' name='feedLinksBody'/>

Ganti 3926587677569576014 dengan kode blog id sobat dan http://namabloganda.blogspot.com/ dengan nama blog sobat kemudian simpan. selesai deh..lihat bagaimana tampilan blog anda sekarang lebih bagus bukan...untuk contohnya bisa anda lihat gambar dibawah ini :

Bila masih ada kesulitan dalam menerapkan diblog anda bisa bertanya kepada saya melalui kotak komentar dibawah.
Selamat mencoba...

NAMA ANDA - 00.38

[Blogging] Membuat Widget Popular Post Lebih Menarik

Sabtu, 12 Mei 2012

Setelah memadukan beberapa style dan coba-coba akhirnya saya bisa membuat widget populer post dengan tampilan yang berbeda dari widget bawaannya blogspot. Tampilan pada widget popular post yang akan saya sharing kali ini akan mirip dengan widget komentar yang saya buat kemarin, bila ingin mengganti sekalian widget recent komentar anda silahkan kunjungi Membuat Widget Recent Komentar Bagus Dan Menarik.

Sekarang saya akan memulai tutorial cara membuat Widget Populer Post yang berbeda.
Langkah pertama silahkan login ke akun blogger anda seperti biasanya. kemudian di tampilan antarmuka pilih Tata Letak tambahkan gadget popular post dan silahkan sesuaikan dengan selera anda sendiri untuk banyaknya postingan yang akan muncul dan jangan lupa centang untuk bagian Thumbnail gambar dan Cuplikan lalu Simpan.

Selanjutnya pindah ke bawahnya Tata Letak yaitu Template dan pilih edit HTML kemudian copy kode css dibawah ini sebelum kode ]]></b:skin>

/* Popular Post */
.item-thumbnail img {height: 40px;width:40px; padding:3px; border:1px solid #ddd; float:left; margin-right:5px; -webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.popular-posts {margin: 0 0 10px 0;border:1px solid $bordercolor;}
.popular-posts ul {float: left;list-style: none;height:auto;}
.popular-posts ul li {height: 45px;margin:5px 5px 5px 5px;float: left;overflow:hidden;border:1px solid #ddd;}

Setelah anda copy kode diatas selanjutnya simpan template dan lihat hasilnya di blog anda, mudah dan simpel kan. Sekian dulu dan semoga artikel ini bisa bermanfaat bagi sobat bloger lainnya. Untuk contohnya bisa dilihat dibawah ini:

Selamat Mencoba...

NAMA ANDA - 03.11

[Blogging] Membuat Widget Recent Komentar Unik Dan Menarik

Jumat, 11 Mei 2012

Setelah mencoba dan berkelana kesana kemari akhirnya saya menemukan sebuah widget untuk menampilkan komentar di blog dengan tampilan sedikit berbeda daripada widget yang biasa digunakan oleh para blogger lainnya. Langsung saja simak baik-baik caranya dibawah ini:

Langkah pertama login dulu ke akun blogger sobat, kemudian langsung menuju Tata Letak yang ada di antarmuka tampilan blogger anda lalu tambah gadget dan pilih HTML/Java Script. Kemudian copy seluruh kode text dibawah ini

Keterangan :
Ganti http://template-4-blogger-design.blogspot.com dengan nama blog sobat (yang berwarna merah)
Untuk jumlah komentar yang ditampilkan bisa anda ganti sesuai yang anda inginkan yaitu pada numComment = 5 (ganti angka 5 dengan angka sesuai jumlah komentar yang ingin anda tampilkan)

Sekarang Simpan dan lihat hasilnya pada tampilan blog sobat, untuk contoh gambarnya widget bisa dilihat dibawah ini :

Selamat Mencoba...

NAMA ANDA - 08.18

[Blogging] Membuat Widget Artikel Terbaru Dengan Navigasi

Minggu, 06 Mei 2012

Pengunjung agar betah berlama-lama di blog anda salah satu caranya dengan menggunakan navigasi yang baik dan ini merupakan anjuran dari sang pengembang blog yaitu om google. Dengan navigasi yang baik pengunjung akan lebih mudah dalam mencari artikel yang ingin mereka cari di blog anda. Untuk yang belum mempunyai blog dan ingin membuat blog silahkan lihat panduan Langkah Cepat Membuat Blog di Blogspot

Pada kesempatan ini saya ingin berbagi cara membuat Widget Artikel Terbaru dengan disertai Navigasi. Untuk contohnya anda bisa melihat disamping kanan pada blog ini dan menu navigasinya berada di bawah widget tersebut. Anda merasa tertarik? Berikut cara membuatnya : pada tampilan antarmuka blog anda pilih Tata Letak > Tambah Widget > HTML/java script, kemudian copy kode text dibawah ini lalu simpan.

keterangan:
var jmlfeed = 5; (jumlah postingan yang akan anda tampilkan, ganti terserah anda)
var alamatblog = "http://template-4-blogger-design.blogspot.com"; (ganti dengan alamat blog anda)
var kar = 90; (jumlah entri kata pada setiap postingan, ganti terserah anda)

Silahkan berkomentar saja apabila ada kendala dalam mengaplikasikannya di blog anda.
Selamat Mencoba...

NAMA ANDA - 22.32

[Blogging] Membuat Menu Drop Down Dengan Sub Menu Bergambar

Senin, 30 April 2012

Tutorial kali ini saya akan membahas tentang cara membuat menu drop down di blog dengan submenu bergambar. Judulnya kok sedikit aneh ya... tapi gak apa-apa yang penting anda mengerti maksud dari judul tersebut. Menu pada blogspot biasanya diletakkan diatas header atau dibawah header supaya pengunjung blog kita bisa lebih mudah dalam mencari artikel sesuai dengan kategorinya.

Langkah pertama langsung ke edit Template dan pilih Edit HTML lalu centang Expand Template Widget, biar aman backup dulu template sobat.
Kemudian copy seluruh text css dibawah ini tepat diatas kode ]]></b:skin> biar mudah mencarinya gunakan saja CTRL+F

/* Menu Drop Down By cinghedotcom */
/* Reset */
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}

/* Menu Start*/
.menutop{height: 35px;width: 980px;background: #4c4e5a;}
.menu li {position: relative;list-style: none;float: left;display: block;height: 35px;}
.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 18px;text-decoration: none;border-left: 1px solid #393942;border-right: 1px solid #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 13px;color: #f3f3f3;text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }

/* Sub Menu Start*/
.menu ul {position: absolute;top: 35px;left: 0;opacity: 0;background: #1f2024;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}
.menu li:hover > ul { opacity: 1; }
.menu ul li {height: 0;overflow: hidden;padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;}
.menu li:hover > ul li {height: 30px;overflow: visible;padding: 0;}
.menu ul li a {width: 100px;padding: 4px 0 4px 35px;margin: 0;border: none;border-bottom: 1px solid #353539;}
.menu ul li:last-child a { border: none; }

/* Icon */
.menu a.submenu1 { background: url(.../url gambar anda.png) no-repeat 5px center; }
.menu a.submenu2 { background: url(.../url gambar anda.png) no-repeat 5px center; }

Selanjutnya kita memasang kode navigasinya di blog dengan cara menambahkan text dibawah kode <body> blog kita :

<div class='menutop'>
<ul class='menu'>
<li><a class='home' href='#url blog anda'>Home</a></li>
<li><a href='#url blog anda'>Menu 1</a>
<ul>
<li><a class='submenu1' href='#url blog anda'>Nama sub menu 1</a></li>
<li><a class='submenu2' href='#url blog anda'>Nama sub menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</div>

Keterangan :
height dan width (warna merah) menunjukkan lebar dan panjang menu
.menu a.submenu1 (warna biru) merupakan gambar di submenu, anda bisa menggunakan gambar berukuran 24x24 piksel. untuk menambah submenu dengan gambar lain anda bisa menambahkan dibawahnya .menu a.submenu3 dan seterusnya.
Sedangkan yang berwarna orange adalah submenu dari menu navigasi yang akan muncul dalam blog sobat, tambahkan kode berikut untuk menambahkan submenu lagi.

<li><a class='submenu3' href='#url blog anda'>Nama sub menu 3</a></li>

Tapi harus diingat bahwa di atas ]]></b:skin> juga ditambahkan kode .menu a.submenu3
Selamat mencoba...

NAMA ANDA - 05.44

[Blogging] Membuat Tabel Yang Bagus Dan Menarik

Minggu, 29 April 2012

Hai sob...bagaimana kabarnya hari ini...Kali ini saya akan mencoba memberikan tutorial bagaimana membuat sebuah tabel yang terlihat lebih bagus. Tabel dalam postingan blog biasanya digunakan untuk menunjukkan daftar tertentu. Dengan tampilan tabel yang menarik akan membuat pengunjung blog lebih betah memelototi artikel kita.hehe.
Pertama kita buat dulu style CSSnya dari tabel tersebut seperti dibawah ini :

#tabelku { width: 600px;}
th {font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #222533;border-right: 1px solid #c1c9da;border-bottom: 1px solid #c1c9da;border-top: 1px solid #c1c9da;letter-spacing: 2px;text-transform: uppercase;text-align: center;padding: 6px 6px 6px 6px;background: #c4d6eb;}
td {font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;border-right: 1px solid #c1c9da;
border-bottom: 1px solid #c1c9da;border-left: 1px solid #c1c9da;padding: 6px 6px 6px 6px;}
tr.alt {background: #e0edfa;color: #222533;}
tr.alts {background:#FFF;color: #222533;}

Copy semua text CSS diatas ]]></b:skin> pada template html sobat.
Untuk yang berwarna merah menunjukkan lebar dari tabel tersebut silahkan ganti sesuai keinginan sobat.

Untuk penulisannya di posting sobat caranya sebagai berikut :

<table cellspacing="0" id="tabelku"><tbody>
<tr> <th scope="col">MENU1</th> <th scope="col">MENU 2</th> </tr>
<tr class="alts"><td>Keterangan 1</td><td>Keterangan 2</td></tr>
<tr class="alt"><td>keterangan 1</td><td>Keterangan 2 </td></tr>
</tbody></table>

Menu merupakan nama dari kolom tabel paling atas dan Keterangan merupakan kolom tabel dibawahnya
<tr class='alts'> dan <tr class='alt'> untuk membedakan antar kolom keterangan
jika ingin menambahkan kolom lagi dibawahnya tambahkan

<tr class="alts"><td> </td><td> </td></tr> dan

<tr class="alt"><td> </td><td> </td></tr> secara bergantian agar tampilan tabel sobat lebih menarik.

Untuk contoh tabelnya bisa dilihat dibawah ini :

MENU1	MENU 2
Keterangan1	Keterangan 2
keterangan 1	Keterangan 2

Semoga bisa membantu sobat yang lagi mencari cara membuat tabel dengan tampilan yang menarik

NAMA ANDA - 01.09

[Blogging] Cara Membuat Widget Recomendasi Dengan Random Post

Selasa, 03 April 2012

Sekedar buat berbagi bagaimana cara membuat widget dipojok kanan bawah seperti di blog saya ini. Buat teman-teman blogger yang ingin mempercantik tampilan blognya bisa mencoba widget ini. Pertama masuk di menu blog sobat dan pilih Tata Letak selanjutnya pilih Tambah Gadget => HTML dan copy semua kode dibawah ini lalu Simpan.

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recomended for You</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://sites.google.com/site/cinghedotcom/g/rekomendasi-slide2.js",function(){},"bp-out-slide")},"jQueryjs")}</script>

Widget ini akan muncul ketika pengunjung melihat blog anda sampai ke footer bawah dan akan keluar dari samping kanan. Untuk contoh gambarnya bisa dilihat digambar berikut.

Jika sobat mengalami kesulitan untuk mengaplikasikannya di blognya bisa bertanya ke saya melalui komentar dibawah.

NAMA ANDA - 18.29

[Tutorial Blog] Membuat Total Jumlah Artikel Berdasarkan Tabel

Senin, 26 Maret 2012

Jumlah posting menurut kategori tabel sangat membantu untuk melihat postingan kita. Sehingga pembaca mengetahui isi dari seluruh kategori postingan di blog anda. Disini saya akan menambahkan tanggal update tiap hari agar lebih menarik seperti dalam blog saya. Untuk contohnya bisa dilihat disamping kiri.

Pertama pilih menu Rancangan trus tambah elemen baru pilih HTML dan copy semua kode dibawah ini.

<script type="text/javascript" src="https://sites.google.com/site/cinghedotcom/g/tampil_tanggal.js"></script>
<span style="font-weight:bold;color: rgb(255, 0, 0);">Total Artikel (<script>tampiltanggal();</script>):
</span>
<br/>
<script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script>
<b>Kategori 1 = <script src="/feeds/posts/default/-/Kategori 1?alt=json-in-script&callback=showpostcount"></script></b>
<br/>
<b>Kategori 2 = <script src="/feeds/posts/default/-/Kategori 2?alt=json-in-script&callback=showpostcount"></script></b>

Ganti tulisan Kategori 1 dan kategori 2 dengan kategori yang ada dalam blog anda. Untuk menambahkan kategori lainnya silahkan menambahkan kode berikut:

<br/><b>Kategori 3 = <script src="/feeds/posts/default/-/Kategori 3?alt=json-in-script&callback=showpostcount"></script></b>

Kira - kira tampilannya akan seperti ini:

Total Artikel ():

Kategori 1 = 4
Kategori 2 = 5
Karegori 3 = 16

NAMA ANDA - 01.21

[ Tutorial Blog ] Membuat sitemap blog dengan ringkasan posting

Minggu, 18 Maret 2012

Sitemap atau biasa disebut dengan daftar isi sering digunakan oleh website atau blog agar pembaca bisa lebih mudah dalam mencari artikel di dalam website/blog tersebut. Mungkin sudah banyak para bloger yg menyajikan cara membuat sitemap diblog, tak ada salahnya saya juga menambahkan artikel tentang cara membuat sitemap tapi dengan tampilan yg agak berbeda.

Langsung saja bagaimana caranya simak baik2 tulisan saya:
Pertama pilih laman baru dan copykan kode dibawah ini:

<div style="-moz-border-radius: 7px 7px 7px 7px; background-color: white; border: 1px solid rgb(33, 33, 33); height: auto; margin: 0px;overflow: auto; padding: 10px; text-align: justify; width: auto;" ><div id="cl_option">Loading.... </div><div id="cl_content_list"></div><script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 500;
var cl_summlen = jumlah_kata_dalam_ringkasan;
var all_entries; var entries; var all_labels = []; var json;
function createEntries(json){
    var entries_obj_list = [];
    var entries = json.feed.entry;
    for(var i=0; i<entries.length; i++){
        var entry           = entries[i];
        var entry_obj       = new Object;
        entry_obj.id        = entry.id.$t;
        entry_obj.title     = entry.title.$t;
        entry_obj.href      = getEntryHref(entry);
        entry_obj.content   = getEntryContent(entry);
        entry_obj.labels    = getEntryLabels(entry);
        entry_obj.published = entry.published.$t.substr(0, 10);
        entries_obj_list.push(entry_obj);
    }
    return entries_obj_list;
}
function getEntryById(id){
    for(var i=0; i<all_entries.length; i++){
        if(all_entries[i].id == id){return all_entries[i];}
    } return null;
}
function getEntryContent(entry){
    return entry.content ? entry.content.$t : entry.summary.$t;
}
function getEntryHref(entry){
    var links = entry.link;
    for(var i=0; i<links.length; i++){
        if(links[i].rel == "alternate"){return links[i].href;}
    }
    return null;
}
function getEntryLabels(entry){
    var labels     = [];
    var categories = entry.category;
    if(!categories){return labels;}
    for(var i=0; i<categories.length; i++){
        var label = categories[i].term;
        if(!isExists(all_labels, label)){all_labels.push(label);} // while collecting all labels
        labels.push(label);
    }
    return labels;
}
function getSomeEntries(cmp){
    entries = [];
    for(var i=0; i<all_entries.length; i++){
        var entry = all_entries[i];
        if(cmp(entry)){entries.push(entry);}
    }
    return entries;
}
function isExists(array, val){
    for(var i=0; i<array.length; i++){
        if(array[i] == val){return true;}
    } return false;
}
function onLoadFeed(json_arg){
    json = json_arg;
    setTimeout("onLoadFeedTimeout()", 100);
}
function onLoadFeedTimeout(){
    entries = createEntries(json);
    all_entries = entries;
    showHeaderOption();
    showEntries(entries);
}
function showEntries(entries){
    var s = "";
    for(var i=0; i<entries.length; i++){
        var entry = entries[i];
        s += "<br/>";
        s += titleCode(entry);
        s += "<span style='font-size:90%'>Label: " + labelsCode(entry);
        s += " on " + publishedDateCode(entry) + "</span>";
        s += "<br/>";
    }
    document.getElementById("cl_content_list").innerHTML = s;
}
function showHeaderOption(){
    var s = "";
    s += "<table>";
    s += "<tr>";
    s += "<td style='text-align:left'>Urut Berdasarkan ";
    s += "<td><select onchange='sortBy(this.value.substr(1), this.value.substr(0,1))'>";
    s += "<option value='0published'/>Tanggal Publikasi";
    s += "<option value='1title'/>Judul Posting";
    s += "</select>";
    s += "<tr>";
    s += "<td style='text-align:left'>Pilihan Kategori ";
    s += "<td><select onchange='showPostsWLabel(this.value)' id='cl_labels'>";
    s += "<option value='*'/>Semua Kategori ";
    for(var i=0; i<all_labels.length; i++){
        var label = all_labels[i];
        s += "<option value='"+label+"'/>" + label;
    }
    s += "</select>";
    s += "</table>";
    document.getElementById("cl_option").innerHTML = s;
}
function shortenContent(entry){
    var content = entry.content;
    content = stripHTML(content);
    if(content.length > cl_summlen){
        content = content.substr(0, cl_summlen);
        if(content.charAt(content.length-1) != " "){content = content.substr(0, content.lastIndexOf(" ")+1);}
        content += "...";
    }
    entry.content = content;
    return content;
}
function showHideSummary(obj){
    var p = obj.nextSibling;
    while(p.className != "cl_content"){p = p.nextSibling;}
    var id = p.id;
    var entry = getEntryById(id);
    var content = shortenContent(entry);
    if(p.innerHTML == ""){
        p.innerHTML = content + "<br/>";
        obj.innerHTML = "▼";
        obj.title = "Sembunyikan Ringkasan";
    } else {
        p.innerHTML = "";
        obj.innerHTML = "►";
        obj.title = "Tampilkan Ringkasan";
    }
}
function sortBy(attribute, asc){
    var cmp = function(entry1, entry2){
        if(entry1[attribute] == entry2[attribute]){return 0;}
        else if(asc=='1'){return entry1[attribute].toLowerCase() > entry2[attribute].toLowerCase();}
        else{return entry1[attribute].toLowerCase() < entry2[attribute].toLowerCase();}
    }
    entries.sort(cmp);
    showEntries(entries);
}
function stripHTML(s) {
    var c;
    var intag = false; var newstr = "";
    for(var i=0; i<s.length; i++){
        c = s.charAt(i);
        if(c=="<"){intag = true;}
        else if(c==">"){intag = false;}
        if(c == ">"){newstr += " ";}
        else if(!intag){newstr += c;}
    }
    return newstr;
}

function labelsCode(entry){
    var s = "";
    if(entry.labels.length == 0){return " (tidak berlabel) ";}
    for(var j=0; j<entry.labels.length; j++){
        var label = entry.labels[j];
        s += "<a href='javascript:showPostsWLabel(\""+label+"\")' ";
        s += "title='See post with label \""+label+"\"'>" + label + "</a>";
        s += (j != entry.labels.length-1) ? ", " : "";
    }
    return s;
}
function publishedDateCode(entry){
    var y = entry.published.substr(0, 4);
    var m = entry.published.substr(5, 2);
    var d = entry.published.substr(8, 2);
    var s = "<a href='javascript:showPostsInDate(\""+y+"\")' title='See all post on "+y+"'>" + y + "</a>/";
    s += "<a href='javascript:showPostsInDate(\""+y+"-"+m+"\")' title='See all post on "+y+"/"+m+"'>" + m + "</a>/";
    s += "<a href='javascript:showPostsInDate(\""+y+"-"+m+"-"+d+"\")'title='See all post on "+y+"/"+m+"/"+d+"'>" + d + "</a>";
    return s;
}
function titleCode(entry){
    var s = "<span title='Tampilkan Ringkasan' onclick='showHideSummary(this)' style='cursor:pointer'>►</span> ";
    s += "<b><a href='"+entry.href+"'>" + entry.title + "</a></b> <br/>";
    s += "<span class='cl_content' id='"+entry.id+"'></span>";
    return s;
}

function showPostsInDate(date){
    var cmp = function(entry){return entry.published.indexOf(date) == 0;}
    var entries = getSomeEntries(cmp);
    showEntries(entries);
}
function showPostsWLabel(label){
    var cmp = function(entry){
        if(label == "*"){return true;}
        for(var i=0; i<entry.labels.length; i++){
            if(entry.labels[i] == label){return true;}
        }
        return false;
    }
    var entries = getSomeEntries(cmp);
    showEntries(entries);
    document.getElementById("cl_labels").value = label;
}
</script>
<script src="http://template-4-blogger-design.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script></div>
<a href="http://template-4-blogger-design.blogspot.com/2012/03/tutorial-blog-membuat-sitemap-blog.html" target="_blank">Cara buat sitemap ini</a>

Ganti tulisan yg berwarna merah http://template-4-blogger-design.blogspot.com dengan nama blog sobat. Sekarang sobat sudah punya sitemap baru diblognya.Selamat ya...hehe.
Untuk contohnya bisa anda lihat disini

NAMA ANDA - 21.19

template 4 blogger

Jumat, 25 Mei 2012

[Blogging] Cara Membuat Meta Deskripsi Disetiap Postingan

Jumat, 25 Mei 2012

Jumat, 18 Mei 2012

[Blogging] Membuat Navigasi Blog Lebih Menarik Dan Mudah

Jumat, 18 Mei 2012

Sabtu, 12 Mei 2012

[Blogging] Membuat Widget Popular Post Lebih Menarik

Sabtu, 12 Mei 2012

Jumat, 11 Mei 2012

[Blogging] Membuat Widget Recent Komentar Unik Dan Menarik

Jumat, 11 Mei 2012

Minggu, 06 Mei 2012

[Blogging] Membuat Widget Artikel Terbaru Dengan Navigasi

Minggu, 06 Mei 2012

Senin, 30 April 2012

[Blogging] Membuat Menu Drop Down Dengan Sub Menu Bergambar

Senin, 30 April 2012

Minggu, 29 April 2012

[Blogging] Membuat Tabel Yang Bagus Dan Menarik

Minggu, 29 April 2012

Selasa, 03 April 2012

[Blogging] Cara Membuat Widget Recomendasi Dengan Random Post

Selasa, 03 April 2012

Senin, 26 Maret 2012

[Tutorial Blog] Membuat Total Jumlah Artikel Berdasarkan Tabel

Senin, 26 Maret 2012

Minggu, 18 Maret 2012

[ Tutorial Blog ] Membuat sitemap blog dengan ringkasan posting

Minggu, 18 Maret 2012

Entri Populer

Arsip Blog