MENAMPILKAN POSTING BERDASARKAN KATEGORI PADA HALAMAN BLOG

 TAMPILKAN POSTING BERDASARKAN KATEGORI PADA HALAMAN BLOG

Salah satu dasar sebuah blog adalah cara menampilkan posting. Contohnya saja Blogspot, setiap posting baru yang kita tulis akan ditampilkan secara berurutan berdasarkan tanggal pembuatan posting. Posting yang baru akan muncul paling atas. Alhasil, semua posting dari semua kategori atau label akan bercampur pada halaman utama website.

Bagaimana caranya agar posting-posting tersebut terbagi berdasarkan label atau kategori tertentu?  Pada contoh dibawah ini, posting-posting yang termasuk ke dalam kategori "Curhat" hanya akan muncul pada bagian "Curhat". Sementara posting-posting yang termasuk kategori "CSS Tutorial" hanya akan muncul pada bagian "CSS Tutorials", bukan pada bagian "Curhat" atau lainnya.
Cara membuat tampilan seperti contoh tersebut adalah cukup dengan memanfaatkan Gadget Feed yang disediakan oleh Blogspot. Langkah-langkahnya seperti berikut:

1. Login pada Blogspot Anda. Kemudian klik link "Rancangan". Anda akan masuk ke halaman "Rancangan". Pilih submenu "Elemen Halaman".
2. Klik link "Tambah Gadget" pada bagian dimana Anda ingin menampilkan kelompok kategori atau label posting Anda.
   
3. Akan muncul window untuk memilih gadget baru. Cari dan pilihkan gadget Feed.
   
4. Masukkanlah alamat feed kategori seperti berikut ini:
   http://USERNAME_BLOG_ANDA.blogspot.com/feeds/posts/default/-/NAMA_LABEL_POSTING
5. Gantilah "USERNAME_BLOG_ANDA" dengan username blog milik Anda. Kemudian ganti "NAMA_LABEL_POSTING" dengan nama label atau kategori yang ingin Anda tampilkan. Contohnya:
   http://tutorial-website.blogspot.com/feeds/posts/default/-/Curhat
   Bentuk lengkapnya akan seperti ini:
   
   
6. Jika berhasil memanggil feed, maka tampilannya akan menjadi seperti berikut:
   
   
   Gantilah judul dengan nama kategori yang ingin Anda tampilkan. Kemudian silahkan atur bagian-bagian lain seperlunya. Setelah itu klik tombol Simpan.
7. Hal yang perlu diperhatikan adalah penulisan "NAMA_LABEL_POSTING". Tuliskan sesuai dengan karakter aslinya. Jika ada spasi, gantikan spasi dengan "%20". Contoh, jika kita ingin menampilkan posting dari kategori "CSS Tutorials", maka alamat feed-nya adalah:
   http://tutorial-website.blogspot.com/feeds/posts/default/-/CSS%20Tutorials
8. Hebatnya lagi, Anda bisa menampilkan posting-posting dari blog Anda yang lain. Cukup mengganti alamat feed tersebut.
9. Jangan lupa Simpan perubahan template setelah melakukan langkah-langkah diatas

Blogspot Tutorial

Pasang Statistik dan Tracker

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situs http://www.sitemeter.com.
2. klik tulisan Sign Up untuk melakukan pendaftaran
3. klik tombol bertuliskan Next
4. Klik tombol Next lagi
5. Isi semua tabel yang ada lalu klik tombol Next lagi
6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
7. klik tombol Next lagi
8. klik tombol Next lagi ( cape dech next..next melulu    )
9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
11. Silahkan login dengan id anda
12. Bila sudah login, Klik menu Manager
13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
14. Pilih style yang anda sukai, kemudian klik tombol Select
15. Klik menu HTML Code
16. Klik tulisan Adding site Meter to a Blogger.com Site
17. copy semua kode HTML yang di berikan lalu paste pada Notepad
18. Klik menu Logout untuk keluar dari situs tersebut
19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
    
    
    

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

1. Sign in di blogger dengan id anda
2. Klik menu TEMPLATE
3. Klik Edit HTML
4. Klik Edit (yang ada pada bar menu browser anda)
5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian
6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center>


Untuk blog dengan Template baru :

1. Login di blogger dengan ID anda
2. Klik menu layout
3. Klik Elemen Halaman
4. Klik Tambahkan sebuah Elemen Halaman
5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
7. Copy & paste kode Site meter pada kolom isian
8. Klik tombol Simpan Perubahan
9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
12. Selesai

Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....     
Selamat mencoba

Blogspot Tutorial

Cara Mengganti Template di blogspot

Sekilas tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.
Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan. Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat di http://blogtemplate4u.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis.
Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan template yang disediakan blogspot, atau mengganti template dengan template yang didapat dari penyedia template. kita. Berikut ulasannya :

Mengganti Template dengan Template yang disediakan blogger

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Silahkan login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.
4. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6 template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template,  klik APPLY TO BLOG.
   
5. Selesai.

Mengganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di blogger templates.
2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di Wobzip.
3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
4. Silahkan login ke blogger dengan ID anda.
5. Klik Rancangan.
6. Klik menu Edit HTML.
7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.
   
9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET.
10. Selesai.

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya
Selamat mencoba!

Blogspot Tutorial

Blogspot Tutorial ( Menu Drop Down Dengan CSS )

Untuk memasang  menu maknan hari ini,hanyalah memerlukan ayam dan tepung,Lohh??/ ko jadi lari kemakanan jadinya (lapar ini kayaknya),Ok kita serius aja mang.Langsung saja kita membahas Cara Memasang Menu Drop Down Dengan CSS
Nah, sekarang kita akan mempraktekkan bagaimana memasang menu drop down dengan CSS pada blog, dan kali ini tentu masih pada blogspot. Kebetulan saya  kemarin ngeNet dan menemukan sebuah situs yang meyediakan struktur menu drop down CSS yang sangat bagus menurut saya. Oleh karena itu, saya akan memberikan tips bagaimana memasang menu tersebut pada blog pembaca. Jika pembaca ingin melihat struktur lain, silahkan kunjungi situsnya langsung di www.cssmenumaker.com. Untuk membuat menu drop down tersebut pada blogspot caranya CSS lainnya. Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca.
2. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
3. Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template
4. Beri centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari struktur ]]></b:skin> pada kotak Edit Template tersebut
6. Jika sudah ketemu, copy paste struktur CSS berikut ini tepat diatas struktur ]></b:skin>.
   @charset "utf-8";
/* CSS Document */
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://nestoriko.googlepages.com/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://nestoriko.googlepages.com/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(http://nestoriko.googlepages.com/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
   
7. Temukan struktur berikut pada template pembaca:
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
8. Copy paste struktur menu berikut ini tepat dibawah struktur yang Anda temukan pada langkah 7:
   <div class="nav-container-outer">
<img src="http://nestoriko.googlepages.com/nav-bg-l.jpg" alt="" class="float-left" />
<img src="http://nestoriko.googlepages.com/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#" target="_self">MENU1</a>
<ul style="width:150px;">
<li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#" target="_self">MENU2</a>
<ul style="width:150px;">
<li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li class="clear"> </li>
</ul>
</div>
   
9. Perhatikan bagian yang diberi warna merah. Bagian tersebut merupakan struktur untuk 1 buah menu beserta sub menu-seb menu di dalamnya. Jika pembaca ingin menambah menu baru, silahkan buat lagi struktur seperti yang berwarna merah tersebut dan letakkan setelah struktur menu yang lain, misalnya setelah struktur "MENU2", dan seterusnya. Kemudian ganti "URL" dengan alamat halaman yang akan dituju jika sub menu diklik.
   
10. Setelah itu klik tombol SIMPAN TEMPLATE