Cara Membuat Menu Navigasi Horizontal Vertikal pada blogspot

kali ini ribuan-cara.blogspot.com akan membahas tentang Cara Membuat Menu Navigasi Horizontal - Vertikal pada blogspot.

Pada beberapa template Blogger hasil mengunduh dari layanan penyedia template Blogger gratisan kita dapat menemukan adanya menu navigasi horizontal dengan sub menu-sub menu vertikal. Namun, hal berbeda kita temui saat menggunakan template yang disediakan oleh pihak Blogger. Di sana belum tersedia menu navigasi yang dimaksud. Akan tetapi, kita dapat menambahkan menu navigasi horizontal dengan sub menu-sub menu vertikal pada template tersebut. Bagaimana cara membuatnya? Silakan simak langkah-langkahnya di bawah ini.

Sekadar mengingatkan, tutorial di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Backup template dulu dengan mengeklik Download Template Lengkap.

4. Cari kode ]]></b:skin> gunakan tombol Ctrl + F untuk mempercepat pencarian.

5. Selanjutnya copy kode di bawah ini dan paste di atas kode tersebut.

#NavbarMenu {
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 400px;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;}

#nav li a:hover, #nav li a:active {
background: #222222;
color: #ffffff;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
font-size: 11px;
font-family: trebuchet ms,;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #ffffff;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

6. Klik tombol SIMPAN TEMPLATE.

7. Kemudian ke menu Elemen Laman dan klik Tambah Gadget yang ada di bawah header.

8. Pilih HTML/JavaScript.

9. Lalu copy kode di bawah ini dan paste di Konten.

<div class=menuhorisontal>
<ul id=nav>

<li><a href=url menu 1>MENU 1</a></li>

<li><a href=url menu 2>MENU 2</a>
<ul>
<li><a href=url sub menu 2.1>SUB MENU 2.1</a></li>
<li><a href=url sub menu 2.2>SUB MENU 2.2</a> </li>
<li><a href=url sub menu 2.dst>SUB MENU 2.dst</a></li>
</ul>
</li>

<li><a href=url menu 3>MENU 3</a>
<ul>
<li><a href=url sub menu 3.1>SUB MENU 3.1</a></li>
<li><a href=url sub menu 3.2>SUB MENU 3.2</a> </li>
<li><a href=url sub menu 3.dst>SUB MENU 3.dst</a></li>
</ul>
</li>

<li><a href=url menu 4>MENU 4</a>
<ul>
<li><a href=url sub menu 4.1>SUB MENU 4.1</a></li>
<li><a href=url sub menu 4.2>SUB MENU 4.2</a> </li>
<li><a href=url sub menu 4.dst>SUB MENU 4.dst</a></li>
</ul>
</li>

<li><a href=url menu dst>MENU dst</a></li>

</ul>
</div>

• Silakan diganti tulisan-tulisan yang berwarna merah dengan yang Anda inginkan.

10. Klik tombol SIMPAN.


semoga bermanfaat... silahkan di coba.

Read More..

CARA CUSTOM DOMAIN DENGAN SUBDOMAIN DI BLOGGER BLOGSPOT MELALUI CPANEL !

Custom domain dengan subdomain juga bisa diterapkan untuk blog berplatform blogger (blogspot). Custom domain ialah mengganti alamat blog asli blogspot dengan domain anda sendiri. Namun, yang akan kita lakukan untuk custom domain tidaklah menggunakan domain utama melainkan menggunakan subdomain yang telah kita buat sebelumnya di cpanel hosting.

Custom domain dengan subdomain merupakan tips mudah bagi anda yang tidak ingin membeli domain baru sebagai alamat blog, tapi cukup memanfaatkan subdomain dari domain utama yang sudah dimiliki sebelumnya. Tentu saja ini juga bisa lebih hemat dalam pengeluaran dari pada membeli domain baru. Dari satu domain utama saja, kita bisa membuat banyak subdomain. Hal tersebut juga bagus untuk efeknya untuk domain utama anda.

Hal penting yang harus dipersiapkan adalah sebuah blog dari blogger, jika belum mempunyai blog gratis dari blogger anda bisa membuatnya terlebih dahulu (lihat cara : panduan membuat blog di blogger). Setelah itu, yang harus dilakukan ialah membuat subdomain di cpanel hosting. Apabila kedua hal tersebut sudah dilakukan, maka berikut ini langkah langkahnya :

1. Buatlah sebuah subdomain terlebih dahulu (anda bisa melihat cara membuat subdomain di cpanel hosting)

2. Masuk pada Dasbor Menu Blogger blog Anda - kemudian pilih menu SETELAN - lalu klik SIAPKAN URL PIHAK KE-3 UNTUK BLOG ANDA.

2. Ketikkan alamat subdomain yang telah dibuat sebelumnya. Kemudian klik SIMPAN.

3. Setelah itu akan muncul pemberitahuan kesalahan 12. Itu artinya Anda harus merubah record / CNAME subdomain di cpanel hosting. Perhatikan gambar dibawah ini :
Kotak merah pertama (copy pastekan ke CNAME 1 pada subdomain anda di Cpanel)
Kotak merah kedua (copy pastekan ke CNAME 2 pada subdomain anda di Cpanel)
Jangan klik SIMPAN sebelum edit Record di Cpanel Hosting.

4. Buka tab baru, kemudian LOG IN ke Cpanel Hosting Anda, pada menu Domains, pilih ADVANCED DNS ZONE EDITOR.

5. Scrol kebawah dan klik EDIT recordnya pada subdomain yang ingin dicustomkan ke blogger...

6. Pada opsi kolom TIPE, cari dan pilih CNAME. Dan isikan ghs.google.com pada kotak CNAME (kode yang terlihat pada cara nomor 3 diatas)

7. Jika berhasil maka akan nampak seperti gambar dibawah ini. Kemudian klik EDIT RECORD.

8. Sekarang untuk CNAME kedua. Pada kolom NAME isikan kode kombinasi huruf yang tertulis pada "kesalahan 12" di dasbor blogger (lihat gambar pada cara nomor 3). Contoh kode kombinasinya fljmnk3qrwxxxx.... Kemudian pada kolom TYPE pilih CNAME, dan masukkan ....dv.googlehosted.com (seperti yang tertera pada gambar cara nomor 3) pada kolom CNAME tersebut.

9. Terakhir klik EDIT RECORD.

10. Kembali lagi ke Dasbor blogger dan klik SIMPAN.

10. Custom / setting domain blogspot dengan subdomain sendiri sudah selesai.

Demikianlah cara custom domain dengan subdomain di blogger melalui Cpanel. Biasanya membutuhkan waktu tidak sampai 5 menit, agar blog dengan alamat subdomain anda sendiri bisa diakses. Cara yang cukup mudah bukan ?
semoga bermanfaat :)

Read More..

Download Gratis Template Toko Online Blogspot

Berikut template gratis toko online untuk blogspot, dari posting sebelumnya (klik DISINI) untuk melihat DEMO-nya masih sederhana, bisa dikembangkan untuk dasar membangun toko online yang lebih menarik.






Untuk membuatnya silahkan mengikuti langkah-langkah berikut :

• Download tamplate toko online blogspot klik DISINI.
• Kemudian upload file template tersebut ke website blogspot.

Cara upload template ke website blogspot :
KlikTemplate --> klik Cadangkan / Pulihkan --> klik Telusuri --> klik Unggah

Perhatian : Sebelum upload template, backup terlebih dahulu, template sebelumnya.

Read More..

Mengatur Template Toko Online Blogspot

Melanjutkan posting artikel sebelumnya tentang template toko online. Berikut cara mengatur template toko online blogspot (bagi yang belum membaca artikel sebelumnya, silahkan klik DISINI).





Cara Mengatur Template Toko Online Blogspot :

Klik Setelan --> Pilih Pos dan Komentar
1. Pada tampilkan sebanyak mungkin, isikan 9 posting.
2. Pada tempat Entri, tambahkan kode script berikut dibawah :

<table border="1" style="width: 660px;"><br><tbody><br><tr><br><th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHuR2hDHshTrU0vPyNGn312t0pbNbVmLNS1rpQxbk1o1tlRlVx_HrJ8SZk26YaCGNanhA6YmaFAm3KCZcgv_MYxdOALLVp8GS1GB_UfBAhiFnoj18YZTZZDxhlLyBoK_M0E0uN7xnNh1bY/s320/cozy-nest-3.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHuR2hDHshTrU0vPyNGn312t0pbNbVmLNS1rpQxbk1o1tlRlVx_HrJ8SZk26YaCGNanhA6YmaFAm3KCZcgv_MYxdOALLVp8GS1GB_UfBAhiFnoj18YZTZZDxhlLyBoK_M0E0uN7xnNh1bY/s320/cozy-nest-3.jpg" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th><br><td><input class="item_add" type="button" value="Add to Cart" /></td><br></tr><br><tr><br><th><b>Nama Product</b></th><br><td class="Nama Product">Product Name Goes here!</td><br></tr><br><tr><br><th><b>Harga</b></th><br><td class="item_price">Rp 99.99</td><br></tr><br><tr><br><th><b>Keterangan</b></th><br><td class="item_Description">Your product description here!</td><br></tr><br><tr><br><th><b>Available Stock</b></th><br><td>Stock count here!</td><br></tr><br></tbody><br></table>

3. Simpan Setelan

Read More..

Cara Membuat Toko Online Gratis Dengan Blogspot

Cara membuat toko online menggunakan blogspot. Mengapa menggunakan blogspot? disamping gratis, mudah untuk membuatnya tidak perlu mahir bahasa HTML. Selain itu juga simple, mudah penggunaanya, cukup sedikit modifikasi. Berikut juga link download template toko online untuk blogspot. Cara posting product pada template toko online blogspot.


Berikut contoh toko online blogspot (DEMO)

Untuk melihat bisa visit ke ( www.tupperware-she-can.blogspot.com )

Bagaimana membuatnya? silahkan ikuti buka artikel berikut link artikelnya dibawah :

1. Cara Memasang Template Toko Online Blogspot (klik DISINI)
2. Cara Mengatur Setting Template Toko Online Blogspot (klik DISINI)
3. Cara Mengatur Posting Template Toko Online Blogspot (klik DISINI)

Semoga bermanfaat

Read More..