Cara Membuat Label Kategori di Blogspot

By: Rangga0411 on 9:51 AM

Kategori pada sebuah Blog dan website berfungsi untuk mengelompokkan setiap postingan disesuaikan dengan jenis kontenya. Namun pada blogspot kita tidak akan ditemui istilah kategori di-dalam dashboard admin, namun yang ada adalah Tag atau Label. Sebuah situs dengan kerangka website di-halaman dashboard admin biasanya terdapat menu khusus kategori dan tag/label secara terpisah. Dengan kategori pengelompokan postingan artikel atau produk untuk blog toko online akan memudahkan pengunjung mencari konten yang mereka inginkan.

Karena seringnya klien yang setelah memakai jasa pembuatan toko online kami yang menanyakan seputar kategori produk, maka pada kesempatan kali ini saya akan menguraikan bagaimana cara membuat label kategori artikel pada sebuah blog yang dijadikan sebagai toko online. Cara membuat Kategori pada blogspot kita bisa memanfaatkan fungsi label atau Tag, contoh nya ketika Anda menjual barang-barang suvenir, agar tidak tercampur jenis suvenir yang dijual maka Anda perlu mengelompokkan jenis barang tersebut berdasarkan kategorinya seperti souvenir kipas, souvemir dompet, souvenir gantungan kunci, dan lain-lain.

Sebelum Anda membuat kategori silahkan Anda pahami:

1. Struktur artikel yang biasa digunakan untuk sebuah blog:
   
2. Berbeda dengan website, pada blogger sebuah kategori tidak bisa dibuat terlebih dahulu, jadi Anda harus memposting sebuah produk atau artikel dengan kategori tertentu kemudian Anda menuliskan judul kategori tersebut pada kolom label yang sudah disediakan blogger.
3. Kategori yang dibuat bisa ditampilkan melalui Gadget label, dan Anda bisa menempatkannya di sidebar kanan atau kiri sesuai dengan layout blog toko online Anda.
4. Label kategori ini bisa Anda pisah dengan cara manual. seperti contoh di-bawah di pisah dengan judul label yang dipisah.
   
   Contoh kategori yang dipisah berdasarkan judul kategori:
   

Setelah Anda paham dengan 4 point di-atas, sekarang kita lanjutkan dengan cara membuatnya:

1. Log in akun Blogger anda melalui www.blogger.com 
2. Masuk ke menu posting, kemudian masukan artikel atau produk Anda beserta gambar dan spesifikasi nya. Artikel yang Anda masukkan jangan lupa teknik atau trik SEO blogspot sudah Anda terapkan.
3. Pada kolom label sebelah kanan, tuliskan nama kategori produk yang sedang Anda posting.
   Contoh: kategori souvenir kipas pada toko online yang menjual bermacam-macam souvenir
   
4. Kemudian tekan tombol "publikasikan" apabila sudah selesai.
5. Silahkan lanjutkan dengan produk-produk lainnya dengan kategori yang berbeda-beda.
6. Karena tulisan saya diatas disinggung pemisahan kategori produk disesuaikan dengan judul kategori, maka cara membuatnya seperti dibawah ini:
   • Kembali ke menu dashboard blogspot
   • Klik Layout
   • Pada Judul Gadget label yang sudah Anda buat sebelumnya, klik Edit
     
   • Pada kolom konfigurasi label klik "label yang dipilih kemudian Edit
     
   • Centang kategori yang sesuai dengan judul kategori
     
   • Klik "selesai" 
   • Silahkan lakukan hal yang sama pada judul kategori Anda yang lainnya.
   • Lihat hasilnya.
     

Demikian pembahasan singkat tentang cara membuat label kategori di blogspot. Yang sedikit ini semoga bermanfaat untuk Anda. Salam Blogger.

Read More

Membuat Navigation Bar dengan CSS dan Javascript

By: Rangga0411 on 1:36 AM

Kali ini saya mau membagikan tutorial cara membuat Navigation Bar dengan CSS dan Javascript. Navigation Bar itu apa sih? Emm, apa ya? Gw juga nggak tau, itu namanya bener apa nggak aja gw nggak tau. Haha... Tapi yang pasti itu seperti navigasi pada website untuk memudahkan pengunjung ke suatu halaman tertentu. Kira-kira seperti ini screenshoot-nya, pada gambar tersebut halaman yang aktif adalah FAQ.

Navigasi yang akan dibuat hanya dalam bentuk huruf yang nantinya akan aktif (warnanya beda) apabila halamannya dikunjungi (seperti gambar diatas). Sebelum-sebelumnya saya sudah mencoba dengan menggunakan javascript di tutorial-tutorial. Sayangnya apabila dimasukkan URL halaman berbeda, tidak ada perubahan apa-apa. Cuman bisa digunakan di halaman yang sama. 

Sudah minta bantuan dan saran temen-temen yang lebih pengalaman, tapi tidak mendapatkan hasil. Tapi Alhamdulillah berkat bantuan temen saya yang super duper keren aka @mas_pang akhirnya bisa juga dengan menggunakan Javascript. Horeee.... #kembangApi

Berikut bisa code-nya dari HTML, CSS, dan Javascript-nya :

HTML

<div class="submenu">
<ul>
    <li><a class="menuLink active" href="/home">Home</a></li>
    <li><a class="menuLink" href="/freq">FAQ</a></li>
    <li><a class="menuLink" href="/contactus">Contact Us</a></li>
</ul>
</div>

CSS

.active{
    color: orange
}
.submenu ul li{
list-style: none;
display: inline;
font-size: 20px;
padding-right: 20px;
}
.submenu ul li a{
text-decoration: none;
}

Javascript

function getLastURL(){
var pathname = window.location.pathname;
var pathArray = pathname.split('/');
pathArray = pathArray[pathArray.length - 1];
pathArray = pathArray.split('.');
return pathArray[0].toLowerCase();
}
function selectedLink(){
var url = getLastURL();
var elements = $(".menuLink");
$(".menuLink").removeClass("active");
if(url== "home")
elements[0].classList.add("active");
if(url=="freq")
elements[1].classList.add("active");
if(url== "contactus")
elements[2].classList.add("active");
}
window.onload=selectedLink();

Penjelasan sederhana javascript-nya kira-kira pertama baca URL terakhirnya dan dicocokkan dengan URL yang kita definisikan, apabila cocok maka class-nya dijadikan active.

Contohnya bisa diliat JSFiddle, atau download project-nya disini.

Semoga bermanfaat :)

Read More