Cara Membuat Tiga Kolom Elemen Baru di Bawah Header

hello....sobat blogerz...pada kali ini saya akan membahas tentang cara membuat tiga kolom elemen dibawah header,  Untuk membuatanya hampir sama dengan cara membuat kolom elemen di atas footer. Silakan ikuti langkah-langkah di bawah ini :

Read More

Membuat tombol auto install widget di blog

Membuat tombol auto install widget di blog. Sobat blogerz pada kesempatan Kali ini saya akan memebirikan sedikit  tips ringan tentang cara membuat tombol auto install widget blogger, kang salman yakin kode akan sangat berguna bagi para Blogger untuk mempermudah penambahan gadget secara otomatis ke dalam blog. Seperti yang kita tau secara umum biasanya para blogger yang sering memberikan  Tips and Trik bagaimana membuat sebuah widget diblog hanya dengan memberikan kodenya saja. Mungkin bagi para blogger yang sudah agak lama tidak akan mengalmai masalah dengan kode HTML, namun berbeda bagi para Blogger baru yang membutuhkan waktu bermenit-menit bakah ada yang kebingugan,  hal ini sering kita temukan khususnya pada Blogger pemula yang mungkin masih awam soal kode HTML. Nah sobat iblogerz, jika Anda ingin membuat sebuah tutorial blog bagi pemula saya sarankan untuk menambahkan tombol ini agar memudahkan penginstallan widget di Blogger.

Read More

cara membuat artikel populer di blog

Sobat bloger ketemu lagi aja ya,,,, :). ok. kali ini  saya tertarik untuk mengulas artikel paling populer atau lebih dikenal dengan Top Post atau Artikel populer. Widget ini memiliki fungsi seberapa populerkah artikel-artikel kita di blog sendiri. Banyak parameter yang digunakan untuk menyusun artikel terpopuler ini, mulai dari jumlah berapa kali artikel tersebut dibaca atau berapa jumlah komentar pada artikel tersebut. Jika di blog berbasis WordPress sudah tersedia widget Tulisan Teratas, maka di blogspot anda sudah bisa menampilkan widget sejenis. Widget ini disusun berdasarkan lalu-lintas komentar terakhir yang masuk di blog kita, sehingga kita bisa menyimpulkan artikel manakah yang paling banyak mendapat tanggapan dari pembaca blog kita.
Untuk membuatnya di perlukan langkah-langkah seperti di bawah ini:

Read More

Cara Membuat Scroll Pada Archive Blog

Cara Membuat Scroll Pada Archive Blog ini hampir sama dengan membuat Fungsi Scroll Pada Label / Kategori yang telah saya posting sebelumnya, perbedaannya hanya terletak pada kata label dengan archive saja.

 Untuk  jelasnya langsung saja langkahnya seperti ini :

Read More

cara membuat simbol/logo TM dll

Membuat Simbol / Logo TradeMark ( TM ), Registered, Copyright,  Derajat, dan simbol-simbol lain di Website dan Blog. Dari tema tersebut kang salman mempuntai beberapa tips sederhana mengenai cara membuat Logo Trademark (TM) untuk di aplikasikan di blog atau website kita. Ada yang bilang dengan memasang simbol ini membuat blognya menjadi lebih mantap dan profesional. Kalau menurut kalian bagaimana?

Read More

Cara Membuat Sitemap /Daftar Isi 1

Cara membuat sitemap atau daftar isi blogger sungguh sangat mudah. Ikuti langkah-langkah saya dibawah ini:

1. Sign in di blogger dengan ID anda
2. Bila sudah berada di halaman dashboard, klik Layout.
3. Klik tab Edit HTML
4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).

Read More

Cara Membuat Link Membuka Tab Baru

Kode link di klik open tab bar atau kode link di klik membuka tab baru.

Pernah ga saat sobat membuka atau meng klik link seseorang, tiba-tiba saat di klik membuka tab baru. Biar ga pusing nie contoh silakan anda  klik disini

Ingin tau cara buatnya? 

Read More

Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger

Hallo Sobat bloger ketemu lagi dengan caviqshare  :) ..... mudah-mudahan artikel kali ini bisa bermanfaat bagi sobat bloger semua.... AMIEN...

Di bawah ini adalah langkah-langkah yang benar silakan di ikuti.

Langsung Aja yuk kita praktik  bagaimana cara membuat Horizontal Menu Blog :

1.      Cari Kode kode ]]></b:skin>

2.      Copy paste kode berikut simpan persis di atas kode ]]></b:skin>

Code

/* navbar

================== */

#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

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

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

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

3.    Tuju bagian bawah, lalu cari seperti berikut ini :

<div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
          <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
          </b:section>
          </div>

4.  Copy paste code berikut persis di bawah kode yang tadi :

<div id='bg_nav'>
          <div id='navleft'>
          <div id='nav'>
          <ul>
          <li><a href='http://caviqshare.blogspot.com/'>home</a></li>

    <li><a href='#'>Info Serba-Serbi</a></li>

<ul>

<li><a href='Namaanda.blogspot.com'>Serba-serbi</a></li>

<li><a href='http://Namaanda.blogspot.com/'>lifestyle</a></li>

<li><a href='http://Namaanda.blogspot.com/'>Other</a></li>

</ul>

</li>

    <li><a href='#'>Internet</a></li>

    <ul>

    <li><a href='http://caviqshare.blogspot.com/'>Jaringan</a></li>

    <li><a href='http://caviqshare.blogspot.com/'>Tips SEO Backlink </a></li>

    <li><a href='http://caviqshare.blogspot.com/'>Tips and Trick </a></li>

   <li><a href='http://caviqshare.blogspot.com/'>Bisnis Online </a></li>

   </ul>

   </li>

    <li><a href='#'>Teknologi Informasi </a></li>

 <ul>

<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>

<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>

<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>

  </li>

<li><a href='#'>Belajar Ilmu Komputer</a></li>

<ul>

<li><a href='portal-komputer.blogspot.com/'>Belajar Komputer</a></li>

<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>

<li><a href='http://caviqshare.blogspot.com/2006/11/cara-membuat-navigasi-horizontal.html'>Anti Virus </a></li>

</ul>

          </ul>
          </div>
          </div>
          <div id='navright'>
          <form action='http://alamat-url-anda.blogspot.com.blogspot.com/search' id='searchform' method='get' name='searchform'>
          <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
              </div>
          </div><!-- akhir bg_nav -->

5.    Klik tombol SIMPAN TEMPLATE.
6.    Selesai.

*Gantilah tulisan yang berwarna merah sesuai alamat blog yang anda inginkan.
Catatan :
Navbar yang saya buat  sudah saya modifikasi sehingga memiliki fungsi dropdown menu. Jika anda ingin menghilangkan fungsi dropdownnya hapus saja <ul> dan </ul></li> contoh :

<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>

<ul>    <= hapus

<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>

<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>

<li><a href='alamat-url-anda.blogspot.com’>Multimedia'></a></li>

</ul>   <= hapus

</li>    <= hapus

*Hapuslah Kode Yang telah saya beri tanda Merah  hapus untuk menghilangkan fungsi dropdown menu!

Sehingga hasilnya akan menjadi seperti di bawah ini :

<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>

<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>

<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>

<li><a href='#’>Multimedia'></a></li>

Untuk sementara percobaan ini sudah selesai, namun tentunya jika kamu menerapkan pada template kamu, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

/*  navbar

    ==================  */

    #bg_nav {

        background: #000000;

        width: 660px;
        height: 29px;

        font-size: 11px;

        font-family: Arial, Tahoma, Verdana;

        color: #FFFFFF;

        font-weight: bold;

        margin: 0px auto 0px;

        padding: 0px;

        border-top: 1px solid #333333;

        border-bottom: 1px solid #333333;

        overflow: hidden;

kamu juga harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template kamu. misal : width:990px.

#navleft {
        width: 440px;
        float: left;
        margin: 0px;
        padding: 0px;
        }
    #navright {
        width: 200px;
        font-size: 11px;
        float: right;
        margin: 0px;
        padding: 6px 5px 0px 0px;
        }

Catatan : Untuk Membuat Vertikal Menu Navigasi :

Tambahkan kode dibawah ini sesudah kode <style type="text/css"> dan sebelum kode </style>, tempatnya di mana saja asalkan di antara kode tadi.

.caviqshare{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i811.photobucket.com/albums/zz36/asksalman/menu.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.caviqshare:hover{ background:#97A4B9 url( http://i811.photobucket.com/albums/zz36/asksalman/menu.gif) top right no-repeat;
text-decoration:none;
}

Catatan : kedua alamat url photobucket di atas adalah bentuk dari tombol navigasi yang saya buat, kamu bisa mengubahnya sendiri.
1. yang pertama adalah tampilan button dasar dari navigasi. terlihat saat mouse tidak di arahkan kesana

2. adalah tampilan button 2 terlihat saat mouse di arahkan menyentuh tombol navigasi, sehingga bisa berubah warna dan da bentuk. (tergantug kita membutnya)

3.  jika di samakan seperti contoh di atas navigasi tersebut tidak akan berubah warna.

Setelah selesai Simpan Tamplate

Langkah berikutnya adalah.
1.  Pilih Tata Letak
2.  Tambahkah Widget/Gedget Baru
3.  Pilih HTML / Javascript
4.  Silakan Copy kode Di bawah ini dan Pastekan Widget baru tadi kamu pilih !

Yang inipun sama, kamu harus mengubahnya sesuai dengan nilai yang pas untuk template kamu

<a class="kang-salman" alamatBlogAnda.blogspot.com">Menu</a><span class="hide"> | </span>
<a class="kang-salman" alamatBlogAnda.blogspot.com">Bisnis Online</a><span class="hide"> | </span>
<a class="kang-salman" alamatBlogAnda.blogspot.com">Tukar Link</a><span class="hide"> | </span>
<a class="kang-salman" alamatBlogAnda.blogspot.com">Tips Anda Trick</a><span class="hide"> | </span>
<a class="kang-salman" href="alamatBlogAnda.blogspot.com">Nama Menu Anda</a><span class="hide"> | </span>

Setelah itu Simpan dan lihat hasilnya. sekarang anda sudah memiliki navigasi horizontal Menu.huh,,,cpe juga ya,,, :)

selamat mencoba.....

Read More

caviqshare

Read More