Menu Turunan dalam Horizontal Navigasi Kode CSS

Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi OB mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari OB. Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini OB akan sedikit menambahkah tentang "bagaimana membuat menu turunan dalam horizontal navigasi CSS, terutama menu turunan yang kedua?". Jangan kedipkan mata kamu dan mari kita mulai trik bloggernya.

Bagi yang belum kebagian baca posting menu horizontal menggunakan kode CSS, silakan baca di menu horizontal ini.

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.

#nav li ul a {

width: 100px;

}

#nav li ul ul {

position: absolute;

margin: -30% 0 0 95%;

}

#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 li li.sfhover ul {

left:auto;

}

#nav li:hover, #nav li.sfhover {

position:static;

}

• Cari kode HTML <div id='navleft'>.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a>

<ul>

<li><a href='URL sub 1'>teks kamu</a></li>

<li><a href='URL sub 2'>teks kamu</a></li>

<li><a href='URL sub 3'>teks kamu</a>



<ul>

<li><a href='URL sub 3.1'>teks kamu</a></li>

<li><a href='URL sub 3.2'>teks kamu</a></li>

</ul>

</li>



</ul>

</li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

</ul>

</div>

</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.


2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.


3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Selamat menambah sub sub menu dalam sub menu horizontal navigasi kode CSS...

Menu Turunan dalam Horizontal Navigasi Kode CSS

Posted by rike No comments

Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi OB mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari OB. Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini OB akan sedikit menambahkah tentang "bagaimana membuat menu turunan dalam horizontal navigasi CSS, terutama menu turunan yang kedua?". Jangan kedipkan mata kamu dan mari kita mulai trik bloggernya.

Bagi yang belum kebagian baca posting menu horizontal menggunakan kode CSS, silakan baca di menu horizontal ini.

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.

#nav li ul a {

width: 100px;

}

#nav li ul ul {

position: absolute;

margin: -30% 0 0 95%;

}

#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 li li.sfhover ul {

left:auto;

}

#nav li:hover, #nav li.sfhover {

position:static;

}

• Cari kode HTML <div id='navleft'>.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a>

<ul>

<li><a href='URL sub 1'>teks kamu</a></li>

<li><a href='URL sub 2'>teks kamu</a></li>

<li><a href='URL sub 3'>teks kamu</a>



<ul>

<li><a href='URL sub 3.1'>teks kamu</a></li>

<li><a href='URL sub 3.2'>teks kamu</a></li>

</ul>

</li>



</ul>

</li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

</ul>

</div>

</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.


2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.


3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Selamat menambah sub sub menu dalam sub menu horizontal navigasi kode CSS...

Varian Menu Horizontal menggunakan Javascript

Menu Horizontal yang bagaimana lagi nih OB? Kalau sebelumnya OB telah memposting trik blogger cara membuat menu horizontal dengan kode CSS, maka di posting ini kita akan membuat menu horizontal menggunakan javascript. Kamu silakan memilih, apakah memakai menu horizontal yang menggunakan kode CSS atau dirombak ke javascript. Dan kalau OB ditanya "mana yang lebih baik?" Semua berpulang kepada penilaian masing-masing individu, karena tiap menu horizontal memiliki kelebihan serta kekurangannya.

Supaya keingintahuan tak lekang dimakan waktu dan ruang, berikut :

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari Kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar

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



#bg_nav

{

background: #ffffff;

width: 660px;

height:29px;

margin:0;

padding:0;

border:1px solid #333;

}

#navright

{

width: 200px;

float: right;

margin: 0px;

padding: 3px 5px 0 0;

}

#navright a img

{

border: none;

margin: 0px;

padding: 3px 5px 0 0;

}

#navleft

{

width: 440px;

float: left;

margin: 1px;

padding: 0px;

}

ul.MenuBarHorizontal

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

cursor: default;

width: auto;

}

ul.MenuBarActive

{

z-index: 1000;

}

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font: bold 12px Arial, Helvetica, sans-serif;

position: relative;

text-align: left;

cursor: pointer;

width: 100px;

float: left;

text-transform: uppercase;

border-right: 1px solid #333;

}

ul.MenuBarHorizontal ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

z-index: 1020;

cursor: default;

width: 100px;

position: absolute;

left: -1000em;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

{

left: auto;

}

ul.MenuBarHorizontal ul li

{

width: 100px;

border: 1px solid #CCC;

}

ul.MenuBarHorizontal ul ul

{

position: absolute;

margin: -5% 0 0 95%;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

{

left: auto;

top: 0;

}





ul.MenuBarHorizontal ul

{

border: 1px solid #FFF;

}

ul.MenuBarHorizontal a

{

display: block;

cursor: pointer;

background-color: #FFF;

padding: 0.5em;

color: #000;

text-decoration: none;

}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

{

background-color: #c06000;

color: #FFF;

}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #c06000;

color: #FFF;

}





ul.MenuBarHorizontal a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAXkaWbCpcrsWaYv2TyG076AbTDNmSBG6zTUyqbW9eFkEk3ZWXaBAh_30LMDUQOTYUkOkbC3u7klMqedICsXHoGJOJ5GFbEW95-96vrEzRIFfMXEPMqH-Q6_tU2cHbsrqnMLscfGec1G0/s800/SpryMenuBarDown.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDq7vn-kJ90oKp2kOwLJ1TwbMzWjDdDsrlsDyzV41rA47NqAohqj6iVSQYC8hM_GSNyjlo6-itgB9ZlDbHBv-RvaZXg61MIGRjn6YT2Uj-NM3eWyfUSXJhdpaSV2XVGBSpLrFWkgZz2JY/s800/SpryMenuBarRight.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}





ul.MenuBarHorizontal iframe

{

position: absolute;

z-index: 1010;

filter:alpha(opacity:0.1);

}



@media screen, projection

{

ul.MenuBarHorizontal li.MenuBarItemIE

{

display: inline;

f\loat: left;

background: #FFF;

}

}

Catatan :

1. Sesuaikan terlebih dulu kode yang berwarna hijau kedap-kedip dengan lebar (width) template kamu.


2. Kemudian sesuaikan lebar (width) pada #navright dan #navleft agar menu horizontal kamu tidak berantakan.


3. Ganti kode yang berwarna merah dengan kode warna sesuai template blog kamu.


4. Kode warna biru merupakan lebar tiap menu dalam navigasi horizontal. Ex : jika lebar (width) #navleft 440px berarti bisa memuat 4 buah menu yang memiliki lebar 100px (warna biru).

• Kemudian cari lagi kode </head>, dan copas kode berikut di atasnya.

<script src='http://blogoptimization.googlecode.com/files/SpryMenuBar.js' type='text/javascript'/>

• Untuk ketiga kalinya cari kode di bawah 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'/>



... dan seterusnya ...



</b:section>

</div>

• Kalau sudah ketemu, copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>

<div id='navleft'>

<ul class='MenuBarHorizontal' id='MenuBar1'>

<li><a href='http://alamat blog kamu'>Home</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 2</a>

<ul>

<li><a href='Edit me'>Item 2.1</a></li>

<li><a href='Edit me'>Item 2.2</a></li>

<li><a href='Edit me'>Item 2.3</a></li>

</ul>

</li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3</a>

<ul>

<li><a href='Edit me'>Item 3.1</a></li>

<li><a href='Edit me'>Item 3.2</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3.3</a>

<ul>

<li><a href='Edit me'>Item 3.3.1</a></li>

<li><a href='Edit me'>Item 3.3.2</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='Edit me'>Item 4</a></li>

</ul>

<script type='text/javascript'>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif", imgRight:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif"});

</script>

</div>



<div id='navright'>

<form action='http://alamat blog kamu/search' id='searchform' method='get' name='searchform'>

<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Search'/> </form>

</div>



</div><!-- akhir bg_nav -->

Catatan :

1. Ganti kode yang berwarna merah dengan alamat yang akan kamu tuju.


2. Kode yang berwarna hijau merupakan kode tambahan jika kamu ingin membuat menu turunan pertama.


3. Sedangkan kode yang berwarna biru adalah struktur kode HTML apabila kamu ingin menambahkan menu turunan, baik pertama (warna biru saja) maupun kedua (warna biru kedap-kedip).


4. Ganti juga yang ada tulisan "Item plus angka-angka" dengan teks kamu sendiri.


5. Jika kamu telah menggunakan trik menu horizontal menggunakan kode CSS terdahulu, silakan ganti semua kode CSS, masukkan javascript, dan rombak kode HTML-nya.
   
   

• Jangan lupa disimpan.

Sumber : SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1, Copyright (c) 2006. Adobe Systems Incorporated.

Selamat membuat menu navigasi horizontal menggunakan javascript...

Varian Menu Horizontal menggunakan Javascript

Posted by rike No comments

Menu Horizontal yang bagaimana lagi nih OB? Kalau sebelumnya OB telah memposting trik blogger cara membuat menu horizontal dengan kode CSS, maka di posting ini kita akan membuat menu horizontal menggunakan javascript. Kamu silakan memilih, apakah memakai menu horizontal yang menggunakan kode CSS atau dirombak ke javascript. Dan kalau OB ditanya "mana yang lebih baik?" Semua berpulang kepada penilaian masing-masing individu, karena tiap menu horizontal memiliki kelebihan serta kekurangannya.

Supaya keingintahuan tak lekang dimakan waktu dan ruang, berikut :

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari Kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar

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



#bg_nav

{

background: #ffffff;

width: 660px;

height:29px;

margin:0;

padding:0;

border:1px solid #333;

}

#navright

{

width: 200px;

float: right;

margin: 0px;

padding: 3px 5px 0 0;

}

#navright a img

{

border: none;

margin: 0px;

padding: 3px 5px 0 0;

}

#navleft

{

width: 440px;

float: left;

margin: 1px;

padding: 0px;

}

ul.MenuBarHorizontal

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

cursor: default;

width: auto;

}

ul.MenuBarActive

{

z-index: 1000;

}

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font: bold 12px Arial, Helvetica, sans-serif;

position: relative;

text-align: left;

cursor: pointer;

width: 100px;

float: left;

text-transform: uppercase;

border-right: 1px solid #333;

}

ul.MenuBarHorizontal ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

z-index: 1020;

cursor: default;

width: 100px;

position: absolute;

left: -1000em;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

{

left: auto;

}

ul.MenuBarHorizontal ul li

{

width: 100px;

border: 1px solid #CCC;

}

ul.MenuBarHorizontal ul ul

{

position: absolute;

margin: -5% 0 0 95%;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

{

left: auto;

top: 0;

}





ul.MenuBarHorizontal ul

{

border: 1px solid #FFF;

}

ul.MenuBarHorizontal a

{

display: block;

cursor: pointer;

background-color: #FFF;

padding: 0.5em;

color: #000;

text-decoration: none;

}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

{

background-color: #c06000;

color: #FFF;

}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #c06000;

color: #FFF;

}





ul.MenuBarHorizontal a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAXkaWbCpcrsWaYv2TyG076AbTDNmSBG6zTUyqbW9eFkEk3ZWXaBAh_30LMDUQOTYUkOkbC3u7klMqedICsXHoGJOJ5GFbEW95-96vrEzRIFfMXEPMqH-Q6_tU2cHbsrqnMLscfGec1G0/s800/SpryMenuBarDown.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDq7vn-kJ90oKp2kOwLJ1TwbMzWjDdDsrlsDyzV41rA47NqAohqj6iVSQYC8hM_GSNyjlo6-itgB9ZlDbHBv-RvaZXg61MIGRjn6YT2Uj-NM3eWyfUSXJhdpaSV2XVGBSpLrFWkgZz2JY/s800/SpryMenuBarRight.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}





ul.MenuBarHorizontal iframe

{

position: absolute;

z-index: 1010;

filter:alpha(opacity:0.1);

}



@media screen, projection

{

ul.MenuBarHorizontal li.MenuBarItemIE

{

display: inline;

f\loat: left;

background: #FFF;

}

}

Catatan :

1. Sesuaikan terlebih dulu kode yang berwarna hijau kedap-kedip dengan lebar (width) template kamu.


2. Kemudian sesuaikan lebar (width) pada #navright dan #navleft agar menu horizontal kamu tidak berantakan.


3. Ganti kode yang berwarna merah dengan kode warna sesuai template blog kamu.


4. Kode warna biru merupakan lebar tiap menu dalam navigasi horizontal. Ex : jika lebar (width) #navleft 440px berarti bisa memuat 4 buah menu yang memiliki lebar 100px (warna biru).

• Kemudian cari lagi kode </head>, dan copas kode berikut di atasnya.

<script src='http://blogoptimization.googlecode.com/files/SpryMenuBar.js' type='text/javascript'/>

• Untuk ketiga kalinya cari kode di bawah 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'/>



... dan seterusnya ...



</b:section>

</div>

• Kalau sudah ketemu, copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>

<div id='navleft'>

<ul class='MenuBarHorizontal' id='MenuBar1'>

<li><a href='http://alamat blog kamu'>Home</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 2</a>

<ul>

<li><a href='Edit me'>Item 2.1</a></li>

<li><a href='Edit me'>Item 2.2</a></li>

<li><a href='Edit me'>Item 2.3</a></li>

</ul>

</li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3</a>

<ul>

<li><a href='Edit me'>Item 3.1</a></li>

<li><a href='Edit me'>Item 3.2</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3.3</a>

<ul>

<li><a href='Edit me'>Item 3.3.1</a></li>

<li><a href='Edit me'>Item 3.3.2</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='Edit me'>Item 4</a></li>

</ul>

<script type='text/javascript'>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif", imgRight:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif"});

</script>

</div>



<div id='navright'>

<form action='http://alamat blog kamu/search' id='searchform' method='get' name='searchform'>

<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Search'/> </form>

</div>



</div><!-- akhir bg_nav -->

Catatan :

1. Ganti kode yang berwarna merah dengan alamat yang akan kamu tuju.


2. Kode yang berwarna hijau merupakan kode tambahan jika kamu ingin membuat menu turunan pertama.


3. Sedangkan kode yang berwarna biru adalah struktur kode HTML apabila kamu ingin menambahkan menu turunan, baik pertama (warna biru saja) maupun kedua (warna biru kedap-kedip).


4. Ganti juga yang ada tulisan "Item plus angka-angka" dengan teks kamu sendiri.


5. Jika kamu telah menggunakan trik menu horizontal menggunakan kode CSS terdahulu, silakan ganti semua kode CSS, masukkan javascript, dan rombak kode HTML-nya.
   
   

• Jangan lupa disimpan.

Sumber : SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1, Copyright (c) 2006. Adobe Systems Incorporated.

Selamat membuat menu navigasi horizontal menggunakan javascript...

Menambah Smiley Galery dalam Shoutmix

Kamu pasti tahu shoutmix. Itu..tu.. kotak chatting yang biasa nangkring di blog yang berguna untuk menyampaikan pesan, baik dari pengunjung maupun dari pemilik blog sendiri. Nah, dalam shoutmix terdapat smiley yang akan tampil jika kamu meng-klik tanda "+" atau mengetik . Memang shoutmix atau shout box lain sudah menyertakan icon smiley secara default, namun tidak menutup kemungkinan bagi user shoutmix untuk menambah smiley lain. Trik blogger kali ini kita akan membicarakan tentang menambah smiley di shoutmix.

Agar tak padam smiley dalam hati shoutmix kamu, langsung kita review trik menambah icon smiley dalam shoutmix :

• Kunjungi terlebih dulu website Get Smiley Face atau website lain yang menyediakan fasilitas smiley.


• Pilih link smiley dan kamu bisa melihat image dari link smiley tersebut. Kalau OB pilih yang smiley aja, seperti yang ditunjuk panah kuning dalam gambar berikut :

• Pada jendela yang baru kamu pilih akan muncul pilihan smiley dan "Click on the smiley to see the code" di dropdown ke [image]

• Kemudian pilih smiley yang kamu inginkan dan secara otomatis linknya akan muncul di "Click on the smiley to see the code". Di bawah ini merupakan contoh link-link image smiley yang OB masukkan dalam shoutmix :

http://www.getsmileyface.com/new/smileys/20.gif

http://www.getsmileyface.com/new/smileys/18.gif

http://www.getsmileyface.com/new/smileys/15.gif

http://www.getsmileyface.com/new/smileys/5.gif

http://www.getsmileyface.com/new/smileys/11.gif

http://www.getsmileyface.com/new/smileys/12.gif

http://www.getsmileyface.com/new/smileys/19.gif

http://www.getsmileyface.com/new/smileys/7.gif

http://www.getsmileyface.com/new/smileys/33.gif

http://www.getsmileyface.com/new/smileys/9.gif

• Copy-paste (Copas) link smiley tersebut dalam notepad, ingat pilih 10 smiley aja.


• Selanjutnya Login ke shoutmix, Jika kamu belum punya akun silakan sign-up dulu.


• Klik tab "Setting". Kamu akan melihat empat kotak pilihan yang terdiri dari Quick Start, General, Display, dan Security.


• Karena pokok bahasan kita adalah smiley, maka kamu harus memilih kotak Display --> Smiley


• Akan muncul icon smiley default dan perhatikan dibawahnya pada "Custom Smiley", seperti yang ditunjukkan oleh gambar berikut :

• Copas satu persatu link smiley dalam notepad ke dalam box "Smiley image URL", jangan lupa klik "Add" (sampai 10 kali).


• Setelah ke 10 smiley sudah di "Add", tambahkan kode ke dalam box code (kodenya terserah kamu, asal ngga sama)


• Save settings.


• Klik back to settings (pojok kanan atas) --> login di kotak shoutmix. Hasilnya akan langsung diaplikasikan ke dalam kotak shoutmix dalam blog kamu.

Catatan :

Bagi yang baru akan menambahkan shoutmix ke dalam blog, cukup dengan meng-klik "Get codes" dalam kotak "Quick Start". Kemudian Copas kodenya ke salah satu elemen dalam blog kamu.

Selamat menambah smiley dalam shoutmix...

Menambah Smiley Galery dalam Shoutmix

Posted by rike No comments

Kamu pasti tahu shoutmix. Itu..tu.. kotak chatting yang biasa nangkring di blog yang berguna untuk menyampaikan pesan, baik dari pengunjung maupun dari pemilik blog sendiri. Nah, dalam shoutmix terdapat smiley yang akan tampil jika kamu meng-klik tanda "+" atau mengetik . Memang shoutmix atau shout box lain sudah menyertakan icon smiley secara default, namun tidak menutup kemungkinan bagi user shoutmix untuk menambah smiley lain. Trik blogger kali ini kita akan membicarakan tentang menambah smiley di shoutmix.

Agar tak padam smiley dalam hati shoutmix kamu, langsung kita review trik menambah icon smiley dalam shoutmix :

• Kunjungi terlebih dulu website Get Smiley Face atau website lain yang menyediakan fasilitas smiley.


• Pilih link smiley dan kamu bisa melihat image dari link smiley tersebut. Kalau OB pilih yang smiley aja, seperti yang ditunjuk panah kuning dalam gambar berikut :

• Pada jendela yang baru kamu pilih akan muncul pilihan smiley dan "Click on the smiley to see the code" di dropdown ke [image]

• Kemudian pilih smiley yang kamu inginkan dan secara otomatis linknya akan muncul di "Click on the smiley to see the code". Di bawah ini merupakan contoh link-link image smiley yang OB masukkan dalam shoutmix :

http://www.getsmileyface.com/new/smileys/20.gif

http://www.getsmileyface.com/new/smileys/18.gif

http://www.getsmileyface.com/new/smileys/15.gif

http://www.getsmileyface.com/new/smileys/5.gif

http://www.getsmileyface.com/new/smileys/11.gif

http://www.getsmileyface.com/new/smileys/12.gif

http://www.getsmileyface.com/new/smileys/19.gif

http://www.getsmileyface.com/new/smileys/7.gif

http://www.getsmileyface.com/new/smileys/33.gif

http://www.getsmileyface.com/new/smileys/9.gif

• Copy-paste (Copas) link smiley tersebut dalam notepad, ingat pilih 10 smiley aja.


• Selanjutnya Login ke shoutmix, Jika kamu belum punya akun silakan sign-up dulu.


• Klik tab "Setting". Kamu akan melihat empat kotak pilihan yang terdiri dari Quick Start, General, Display, dan Security.


• Karena pokok bahasan kita adalah smiley, maka kamu harus memilih kotak Display --> Smiley


• Akan muncul icon smiley default dan perhatikan dibawahnya pada "Custom Smiley", seperti yang ditunjukkan oleh gambar berikut :

• Copas satu persatu link smiley dalam notepad ke dalam box "Smiley image URL", jangan lupa klik "Add" (sampai 10 kali).


• Setelah ke 10 smiley sudah di "Add", tambahkan kode ke dalam box code (kodenya terserah kamu, asal ngga sama)


• Save settings.


• Klik back to settings (pojok kanan atas) --> login di kotak shoutmix. Hasilnya akan langsung diaplikasikan ke dalam kotak shoutmix dalam blog kamu.

Catatan :

Bagi yang baru akan menambahkan shoutmix ke dalam blog, cukup dengan meng-klik "Get codes" dalam kotak "Quick Start". Kemudian Copas kodenya ke salah satu elemen dalam blog kamu.

Selamat menambah smiley dalam shoutmix...

Pasang Script Kursor Ular-Ularan

Sebenarnya banyak sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik melalui website penyedia layanan javascript atau saat kamu blog walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut mem-follow OB apa belum?

Kembali ke trik blogger kursor ular-ularan...

Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode </head>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Kalau sudah ketemu, copas kode berikut diatasnya.

<style type='text/css'>

/* Circle Text Styles */

#outerCircleText {

/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #000;

/* End Optional */



/* Start Required - Do Not Edit */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

/* End Required */

/* End Circle Text Styles */

</style>

<script type='text/javascript'>

//<![CDATA[

/* Circling text trail- Tim Tilton

Website: http://www.tempermedia.com/

Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts

Modified Here for more flexibility and modern browser support

Modifications as first seen in http://www.dynamicdrive.com/forums/

username:jscheuer1 - This notice must remain for legal use

*/



;(function(){



// Your message here (QUOTED STRING)

var msg = "Masukkan teks kamu disini";



/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */



// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 24;



// Set both to 1 for plain circle, set one of them to 2 for oval

// Other numbers & decimals can have interesting effects, keep these low (0 to 3)

var circleY = 0.75; var circleX = 2;



// The larger this divisor, the smaller the spaces between letters

// (decimals allowed, not negative numbers)

var letter_spacing = 5;



// The larger this multiplier, the bigger the circle/oval

// (decimals allowed, not negative numbers, some rounding is applied)

var diameter = 10;



// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.4;



// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)

var speed = 0.3;



////////////////////// Stop Editing //////////////////////



if (!window.addEventListener && !window.attachEvent || !document.createElement) return;



msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :



document.body,



mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},



makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +



'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},



drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},



init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},



ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};



o.id = 'outerCircleText'; o.style.fontSize = size + 'px';



if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};



})();

//]]>

</script>

Catatan :

1. Ganti kode yang berwarna merah berturut-turut dengan gaya teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new roman, verdana, georgia, de-el-el), dan warna teks


2. Ganti tulisan yang berwarna merah dan berkedap-kedip dengan teks yang akan kamu tampilkan (mengikuti kursor).


3. Ganti kode yang berwarna hijau, apabila kamu ingin merubah ukuran teks.

• Jangan lupa disimpan.

Selamat main ular-ularan...

Pasang Script Kursor Ular-Ularan

Posted by rike No comments

Sebenarnya banyak sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik melalui website penyedia layanan javascript atau saat kamu blog walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut mem-follow OB apa belum?

Kembali ke trik blogger kursor ular-ularan...

Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode </head>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Kalau sudah ketemu, copas kode berikut diatasnya.

<style type='text/css'>

/* Circle Text Styles */

#outerCircleText {

/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #000;

/* End Optional */



/* Start Required - Do Not Edit */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

/* End Required */

/* End Circle Text Styles */

</style>

<script type='text/javascript'>

//<![CDATA[

/* Circling text trail- Tim Tilton

Website: http://www.tempermedia.com/

Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts

Modified Here for more flexibility and modern browser support

Modifications as first seen in http://www.dynamicdrive.com/forums/

username:jscheuer1 - This notice must remain for legal use

*/



;(function(){



// Your message here (QUOTED STRING)

var msg = "Masukkan teks kamu disini";



/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */



// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 24;



// Set both to 1 for plain circle, set one of them to 2 for oval

// Other numbers & decimals can have interesting effects, keep these low (0 to 3)

var circleY = 0.75; var circleX = 2;



// The larger this divisor, the smaller the spaces between letters

// (decimals allowed, not negative numbers)

var letter_spacing = 5;



// The larger this multiplier, the bigger the circle/oval

// (decimals allowed, not negative numbers, some rounding is applied)

var diameter = 10;



// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.4;



// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)

var speed = 0.3;



////////////////////// Stop Editing //////////////////////



if (!window.addEventListener && !window.attachEvent || !document.createElement) return;



msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :



document.body,



mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},



makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +



'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},



drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},



init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},



ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};



o.id = 'outerCircleText'; o.style.fontSize = size + 'px';



if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};



})();

//]]>

</script>

Catatan :

1. Ganti kode yang berwarna merah berturut-turut dengan gaya teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new roman, verdana, georgia, de-el-el), dan warna teks


2. Ganti tulisan yang berwarna merah dan berkedap-kedip dengan teks yang akan kamu tampilkan (mengikuti kursor).


3. Ganti kode yang berwarna hijau, apabila kamu ingin merubah ukuran teks.

• Jangan lupa disimpan.

Selamat main ular-ularan...

Tips Menaikkan SERP dengan Link

SERP merupakan kependekan dari Search Engine Result Page. Coba sekarang buka situs search engine google yang beralamat di http://www.google.co.id. Kemudian ketik dalam form pencarian dengan keyword "optimasi blog", next "enter". Kamu akan melihat sederetan daftar pencarian secara defaulnya akan memunculkan 10 alamat web dalam satu halaman. Uraian di atas adalah sebagai deskripsi tentang apa yang dinamakan SERP. Sedangkan link adalah kata atau serangkaian kata (kalimat) yang jika diklik akan menuju suatu alamat web tertentu. Jadi apa hubungannya antara SERP dengan Link?



Salah satu cara agar blog kamu masuk dalam daftar SERP adalah dengan membangun link. Tapi kalau linknya sembarangan, sudah barang tentu tidak akan berpengaruh dalam SERP. Berikut trik agar link blog kamu mendapat lirikan dari search engine :



Inbound Link. Yakni mengundang minat website/blog lain untuk me-link ke posting/konten blog kamu. Semakin banyak inbound link, maka semakin bagus pula blog kamu di SERP google. Dengan kata lain posting blog kamu laku di pasaran. Disamping itu, apabila blog kamu mendapat link dari sebuah blog yang banyak di link oleh blog lain, maka akan lebih berpengaruh di posisi SERP ketimbang di link oleh blog yang lebih sedikit inbound link-nya. Namun perlu diingat, jangan pernah mengabaikan blog-blog yang mempunyai inbound link sedikit.



Link Berkualitas. Search engine google lebih mengutamakan link yang berkualitas dibandingkan dengan kuantitas. Loh, katanya semakin banyak yang nge-link ke blog kita, SERP semakin bagus? Maksudnya begini, google lebih mengutamakan satu link yang mempunyai kesamaan topik/tema dengan blog kita, daripada satu link namun berbeda topik/tema.

Contoh:

• blog kamu bertema tips seo, kemudian di link oleh blog lain yang bertema belajar seo.


• blog kamu bertema tips seo, kemudian di link oleh blog lain yang bertema olah raga.

Dari kedua contoh di atas, menurut kamu mana yang lebih berkualitas...???



Link Building. Terkadang apabila blog kamu telah memiliki posisi top SERP, tidak jarang malas untuk membangun link kembali. Padahal semakin top blog kamu di SERP google, seharusnya semakin gencar usaha untuk membangun satu atau lebih link. Hal tersebut dimaksudkan agar blog kamu tetap berada di posisi teratas SERP. Jadi link building merupakan proyek link yang kontinue dan berkelanjutan.



Hindari paid link. Why...why...??? Uang...uangku sendiri. Blog...blogku sendiri. Ngapain susah...susah. Wah, yang kaya ini..ni disebut mau seenaknya sendiri. Paid link merupakan link-link yang memiliki pagerank (PR) tinggi, tapi fungsinya untuk diperjualbelikan/sewa. Jadi apabila blog kamu pengen nyantol di link mereka, terlebih dulu kamu harus membayarnya. Selanjutnya mengapa perlu dihindari? karena jika blog kamu ketahuan melakukan hal tersebut di atas oleh google, maka bersiap-siaplah untuk mendapatkan pinalti penurunan posisi di SERP.



Sumber : Membangun link, naikkan SERP by Tabloid Mingguan Komputek Edisi 624 Hal. 8.



Terus bangun link blog kamu, karena dengan link maka salam hangat antar blog akan tersampir dalam senyuman...

Tips Menaikkan SERP dengan Link

Posted by rike No comments

SERP merupakan kependekan dari Search Engine Result Page. Coba sekarang buka situs search engine google yang beralamat di http://www.google.co.id. Kemudian ketik dalam form pencarian dengan keyword "optimasi blog", next "enter". Kamu akan melihat sederetan daftar pencarian secara defaulnya akan memunculkan 10 alamat web dalam satu halaman. Uraian di atas adalah sebagai deskripsi tentang apa yang dinamakan SERP. Sedangkan link adalah kata atau serangkaian kata (kalimat) yang jika diklik akan menuju suatu alamat web tertentu. Jadi apa hubungannya antara SERP dengan Link?



Salah satu cara agar blog kamu masuk dalam daftar SERP adalah dengan membangun link. Tapi kalau linknya sembarangan, sudah barang tentu tidak akan berpengaruh dalam SERP. Berikut trik agar link blog kamu mendapat lirikan dari search engine :



Inbound Link. Yakni mengundang minat website/blog lain untuk me-link ke posting/konten blog kamu. Semakin banyak inbound link, maka semakin bagus pula blog kamu di SERP google. Dengan kata lain posting blog kamu laku di pasaran. Disamping itu, apabila blog kamu mendapat link dari sebuah blog yang banyak di link oleh blog lain, maka akan lebih berpengaruh di posisi SERP ketimbang di link oleh blog yang lebih sedikit inbound link-nya. Namun perlu diingat, jangan pernah mengabaikan blog-blog yang mempunyai inbound link sedikit.



Link Berkualitas. Search engine google lebih mengutamakan link yang berkualitas dibandingkan dengan kuantitas. Loh, katanya semakin banyak yang nge-link ke blog kita, SERP semakin bagus? Maksudnya begini, google lebih mengutamakan satu link yang mempunyai kesamaan topik/tema dengan blog kita, daripada satu link namun berbeda topik/tema.

Contoh:

• blog kamu bertema tips seo, kemudian di link oleh blog lain yang bertema belajar seo.


• blog kamu bertema tips seo, kemudian di link oleh blog lain yang bertema olah raga.

Dari kedua contoh di atas, menurut kamu mana yang lebih berkualitas...???



Link Building. Terkadang apabila blog kamu telah memiliki posisi top SERP, tidak jarang malas untuk membangun link kembali. Padahal semakin top blog kamu di SERP google, seharusnya semakin gencar usaha untuk membangun satu atau lebih link. Hal tersebut dimaksudkan agar blog kamu tetap berada di posisi teratas SERP. Jadi link building merupakan proyek link yang kontinue dan berkelanjutan.



Hindari paid link. Why...why...??? Uang...uangku sendiri. Blog...blogku sendiri. Ngapain susah...susah. Wah, yang kaya ini..ni disebut mau seenaknya sendiri. Paid link merupakan link-link yang memiliki pagerank (PR) tinggi, tapi fungsinya untuk diperjualbelikan/sewa. Jadi apabila blog kamu pengen nyantol di link mereka, terlebih dulu kamu harus membayarnya. Selanjutnya mengapa perlu dihindari? karena jika blog kamu ketahuan melakukan hal tersebut di atas oleh google, maka bersiap-siaplah untuk mendapatkan pinalti penurunan posisi di SERP.



Sumber : Membangun link, naikkan SERP by Tabloid Mingguan Komputek Edisi 624 Hal. 8.



Terus bangun link blog kamu, karena dengan link maka salam hangat antar blog akan tersampir dalam senyuman...

Cara Membuat Tabel dalam Blog

Tabel merupakan salah satu assesoris yang mungkin dapat menjadikan blog kamu tampil lebih menawan. Tapi karena caranya yang agak sedikit sulit, tidak jarang hal ini diabaikan. Tabel dalam optimasi suatu blog berfungsi untuk menguraian kata-kata atau kalimat dalam bentuk kotak-kotak agar lebih mudah dimengerti dan dipahami. Coba ambil contoh dalam postingan area link exchange dan menampilkan kode HTML dalam postingan. Sekarang mari kita telaah secara seksama sebuah illustrasi di bawah ini.



Aku mempunyai 4 (empat) teman dari kelas yang berbeda beda. Si A dan B di kelas 6 kegemarannya makan bakso. Si C berada di kelas 4 sukanya sepak bola. Sedangkan si D di kelas 5, hobbynya tidur melulu.



Dari kalimat di atas seandainya kita buat ke dalam tabel mungkin bentuknya seperti ini.

Nama Temanku	Kelas	Hobby
A	6	Makan bakso
B	6	Makan bakso
C	4	Sepak bola
D	5	Tidur

Nah, selanjutnya bagaimana trik blogger membuat tabel seperti di atas ke dalam blog kamu. Singkat kata berikut kode untuk membuat tabel dalam blog.

<table border="1" width="300">

<tr bgcolor="#E0F8E0"><td align="center"><b>Nama Temanku</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td></tr>

<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>

<tr><td align="center">B</td><td align="center">6</td><td align="left">Makan bakso</td></tr>

<tr><td align="center">C</td><td align="center">4</td><td align="left">Sepak bola</td></tr>

<tr><td align="center">D</td><td align="center">5</td><td align="left">Tidur</td></tr>

</table>

Catatan :

1. Kode dasar dalam tabel adalah <table> ... </table>.


2. Kode untuk membuat baris tabel <tr> ... </tr>.


3. Kode untuk membuat kolom tabel <td> ... </td>, ingat satu baris bisa terdiri dari beberapa kolom.


4. Kode umum yang menyertai dalam kode tabel adalah width (...px), border (...px), align (center, left, right) dan bgcolor (kode warna/#......).

Selamat membuat tabel dalam blog...

Cara Membuat Tabel dalam Blog

Posted by rike No comments

Tabel merupakan salah satu assesoris yang mungkin dapat menjadikan blog kamu tampil lebih menawan. Tapi karena caranya yang agak sedikit sulit, tidak jarang hal ini diabaikan. Tabel dalam optimasi suatu blog berfungsi untuk menguraian kata-kata atau kalimat dalam bentuk kotak-kotak agar lebih mudah dimengerti dan dipahami. Coba ambil contoh dalam postingan area link exchange dan menampilkan kode HTML dalam postingan. Sekarang mari kita telaah secara seksama sebuah illustrasi di bawah ini.



Aku mempunyai 4 (empat) teman dari kelas yang berbeda beda. Si A dan B di kelas 6 kegemarannya makan bakso. Si C berada di kelas 4 sukanya sepak bola. Sedangkan si D di kelas 5, hobbynya tidur melulu.



Dari kalimat di atas seandainya kita buat ke dalam tabel mungkin bentuknya seperti ini.

Nama Temanku	Kelas	Hobby
A	6	Makan bakso
B	6	Makan bakso
C	4	Sepak bola
D	5	Tidur

Nah, selanjutnya bagaimana trik blogger membuat tabel seperti di atas ke dalam blog kamu. Singkat kata berikut kode untuk membuat tabel dalam blog.

<table border="1" width="300">

<tr bgcolor="#E0F8E0"><td align="center"><b>Nama Temanku</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td></tr>

<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>

<tr><td align="center">B</td><td align="center">6</td><td align="left">Makan bakso</td></tr>

<tr><td align="center">C</td><td align="center">4</td><td align="left">Sepak bola</td></tr>

<tr><td align="center">D</td><td align="center">5</td><td align="left">Tidur</td></tr>

</table>

Catatan :

1. Kode dasar dalam tabel adalah <table> ... </table>.


2. Kode untuk membuat baris tabel <tr> ... </tr>.


3. Kode untuk membuat kolom tabel <td> ... </td>, ingat satu baris bisa terdiri dari beberapa kolom.


4. Kode umum yang menyertai dalam kode tabel adalah width (...px), border (...px), align (center, left, right) dan bgcolor (kode warna/#......).

Selamat membuat tabel dalam blog...

Paradise Valley Real Estate

Everyone definitely want to get a decent place to live and get comfortable. Plus the international facilities, such as golf courses, Contry club, and a sustainable environment. Hospitality community to ensure that the value itself. Do you live in Arizona or you want to live there, and until now have not found a place to live in accordance with the description above? our suggestions, please visit the Paradise Valley Real Estate.

The Holm Group is located in Scottsdale, Arizona and represents buyers and sellers in a variety of Arizona and Paradise Valley Real Estate transactions. Whether it's a residential purchase, re-sale, investment property, or a commercial purchase / lease that you are looking for, The Holm Group is there to assist you. Also equipped with the latest technology MLS Virtual Mapping, provides a facility to search for locations that truly heaven for you. You will see several places that may be one of them is your dream through various 2D and 3D Views, Aerial and Bird's Eye. So why wait so long, if you've seen Heaven in front of the residence of, that is in the Paradise Valley Real Estate.

Paradise Valley Real Estate

Posted by rike No comments

Everyone definitely want to get a decent place to live and get comfortable. Plus the international facilities, such as golf courses, Contry club, and a sustainable environment. Hospitality community to ensure that the value itself. Do you live in Arizona or you want to live there, and until now have not found a place to live in accordance with the description above? our suggestions, please visit the Paradise Valley Real Estate.

The Holm Group is located in Scottsdale, Arizona and represents buyers and sellers in a variety of Arizona and Paradise Valley Real Estate transactions. Whether it's a residential purchase, re-sale, investment property, or a commercial purchase / lease that you are looking for, The Holm Group is there to assist you. Also equipped with the latest technology MLS Virtual Mapping, provides a facility to search for locations that truly heaven for you. You will see several places that may be one of them is your dream through various 2D and 3D Views, Aerial and Bird's Eye. So why wait so long, if you've seen Heaven in front of the residence of, that is in the Paradise Valley Real Estate.

Update Software

Pengguna komputer rame-rame berlomba untuk berburu software-software terbaru baik membeli compact disk maupun diperoleh dengan cara download software berbayar maupun software gratisan bahkan trial melalui internet.



Mungkin karena takut ketinggalan atau bahkan dibilang kuno atau tidak gaul sehingga tanpa berpikir panjang, apapun yang dikatakan baru maka software tersebut langsung diinstall ke

Update Software

Posted by rike No comments

Pengguna komputer rame-rame berlomba untuk berburu software-software terbaru baik membeli compact disk maupun diperoleh dengan cara download software berbayar maupun software gratisan bahkan trial melalui internet.



Mungkin karena takut ketinggalan atau bahkan dibilang kuno atau tidak gaul sehingga tanpa berpikir panjang, apapun yang dikatakan baru maka software tersebut langsung diinstall ke

Menampilkan Image dalam Efek Zoom Image

Tidak jarang dalam sebuah blog, kamu memasukkan berbagai macam image, baik yang berukuran kecil maupun besar. Semakin besar ukuran suatu image, maka semakin besar pula waktu yang dibutuhkan untuk meloadingnya. Sehingga alangkah baiknya apabila image tersebut kamu optimasi dalam ukuran kecil yang jika didekati oleh kursor mouse akan menampilkan image yang relatif besar. Yah, lumayanlah apalagi blogku banyak gambarnya (khusus yang punya blog bergambar porno dan mau menggunakan trik ini. Jangan bilang-bilang bahwa kamu dapat triknya dari OB he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Nah, trik blogger ini didapatkan setelah OB jalan-jalan ke Dynamic Drive CSS Library. Sebagai illustrasi, silakan dekatkan kursor pada image dan teks berikut :

Icon OB

Apabila kamu tertarik dengan trik blogger ini, mari kita review cara menampilkan image dalam efek zoom Image tersebut.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* Zoom Efek */



.thumbnail{

position: relative;

z-index: 0;

}



.thumbnail:hover{

background-color: transparent;

z-index: 50;

}



.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: lightyellow;

padding: 5px;

left: -1000px;

border: 1px dashed gray;

visibility: hidden;

color: black;

text-decoration: none;

}



.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 2px;

}



.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */

}

• Simpan template kamu

Cara penggunaan :

Kode HTML untuk image zoom.

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfvVLszs9Czzaah8UCIIePa2tQQCEHHtrZ0F8E6z0uy4bW1OvfzE5jp-N5BYG79WeQF8YDNcXTbti1AbnRo-pqaA5K0LNn4QiwCobkhJJ_q0O3s36sc25e3A9_0O5QqF-4_aJoaQQ-cM/s800/Chicklet%20OB.png" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfvVLszs9Czzaah8UCIIePa2tQQCEHHtrZ0F8E6z0uy4bW1OvfzE5jp-N5BYG79WeQF8YDNcXTbti1AbnRo-pqaA5K0LNn4QiwCobkhJJ_q0O3s36sc25e3A9_0O5QqF-4_aJoaQQ-cM/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.

<a class="thumbnail" href="#thumb">Icon OB<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVk6Msoou0SgqFwn7Xu6E43Aa3W2xrFB82UiEbYpFtsxNJIbJUXDJ0CwIKUjx7MoAYStXhYV9cXC2o5gNafFM5LRBNOZJ1zlv2YYt6YduTK4GE63f_yEsGB0C7qEPDqVS8aroU-Jqkgw/s144/Chicklet%20OB2.png" /></span></a>

Catatan :

1. Kode yang berwarna merah merupakan default image dan teks yang akan kamu tampilkan.


2. Kode yang berwarna hijau merupakan sisipan kode, agar default image akan menampilkan efek zoom.


3. Kode berwarna biru merupakan sisipan kode, agar default teks akan menampilkan image.


4. Jika ingin memperbesar zoom, silakan atur kode yang berwarna hijau dan berkedap-kedip (width dan height).
   
   

Selamat menampilkan image dalam zoom efek...

Menampilkan Image dalam Efek Zoom Image

Posted by rike No comments

Tidak jarang dalam sebuah blog, kamu memasukkan berbagai macam image, baik yang berukuran kecil maupun besar. Semakin besar ukuran suatu image, maka semakin besar pula waktu yang dibutuhkan untuk meloadingnya. Sehingga alangkah baiknya apabila image tersebut kamu optimasi dalam ukuran kecil yang jika didekati oleh kursor mouse akan menampilkan image yang relatif besar. Yah, lumayanlah apalagi blogku banyak gambarnya (khusus yang punya blog bergambar porno dan mau menggunakan trik ini. Jangan bilang-bilang bahwa kamu dapat triknya dari OB he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Nah, trik blogger ini didapatkan setelah OB jalan-jalan ke Dynamic Drive CSS Library. Sebagai illustrasi, silakan dekatkan kursor pada image dan teks berikut :

Icon OB

Apabila kamu tertarik dengan trik blogger ini, mari kita review cara menampilkan image dalam efek zoom Image tersebut.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* Zoom Efek */



.thumbnail{

position: relative;

z-index: 0;

}



.thumbnail:hover{

background-color: transparent;

z-index: 50;

}



.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: lightyellow;

padding: 5px;

left: -1000px;

border: 1px dashed gray;

visibility: hidden;

color: black;

text-decoration: none;

}



.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 2px;

}



.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */

}

• Simpan template kamu

Cara penggunaan :

Kode HTML untuk image zoom.

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfvVLszs9Czzaah8UCIIePa2tQQCEHHtrZ0F8E6z0uy4bW1OvfzE5jp-N5BYG79WeQF8YDNcXTbti1AbnRo-pqaA5K0LNn4QiwCobkhJJ_q0O3s36sc25e3A9_0O5QqF-4_aJoaQQ-cM/s800/Chicklet%20OB.png" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfvVLszs9Czzaah8UCIIePa2tQQCEHHtrZ0F8E6z0uy4bW1OvfzE5jp-N5BYG79WeQF8YDNcXTbti1AbnRo-pqaA5K0LNn4QiwCobkhJJ_q0O3s36sc25e3A9_0O5QqF-4_aJoaQQ-cM/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.

<a class="thumbnail" href="#thumb">Icon OB<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVk6Msoou0SgqFwn7Xu6E43Aa3W2xrFB82UiEbYpFtsxNJIbJUXDJ0CwIKUjx7MoAYStXhYV9cXC2o5gNafFM5LRBNOZJ1zlv2YYt6YduTK4GE63f_yEsGB0C7qEPDqVS8aroU-Jqkgw/s144/Chicklet%20OB2.png" /></span></a>

Catatan :

1. Kode yang berwarna merah merupakan default image dan teks yang akan kamu tampilkan.


2. Kode yang berwarna hijau merupakan sisipan kode, agar default image akan menampilkan efek zoom.


3. Kode berwarna biru merupakan sisipan kode, agar default teks akan menampilkan image.


4. Jika ingin memperbesar zoom, silakan atur kode yang berwarna hijau dan berkedap-kedip (width dan height).
   
   

Selamat menampilkan image dalam zoom efek...

Menambah Dropdown Menu dalam Horizontal Navigasi

Diposting trik blogger terdahulu OB telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya OB jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

<ul>

<li><a href='URL sub 1'>Sub menu 1</a></li>

<li><a href='URL sub 2'>Sub menu 2</a></li>

<li><a href='URL sub 3'>Sub menu 3</a></li>

</ul>

Contoh :

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a>

<ul>

<li><a href='URL sub 1'>Sub menu 1</a></li>

<li><a href='URL sub 2'>Sub menu 2</a></li>

<li><a href='URL sub 3'>Sub menu 3</a></li>

</ul>

</li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.


2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.



#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px; <!-- lebar dropdown menu -->

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff; <!-- warna latar dropdown menu -->

width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->

border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->

border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->

<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->

}

#nav li li a:hover, #nav li li a:active {

background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->

padding: 7px 30px 7px 10px;

}





Selamat berdropdown dengan menu horizontal...

Menambah Dropdown Menu dalam Horizontal Navigasi

Posted by rike No comments

Diposting trik blogger terdahulu OB telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya OB jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

<ul>

<li><a href='URL sub 1'>Sub menu 1</a></li>

<li><a href='URL sub 2'>Sub menu 2</a></li>

<li><a href='URL sub 3'>Sub menu 3</a></li>

</ul>

Contoh :

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a>

<ul>

<li><a href='URL sub 1'>Sub menu 1</a></li>

<li><a href='URL sub 2'>Sub menu 2</a></li>

<li><a href='URL sub 3'>Sub menu 3</a></li>

</ul>

</li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.


2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.



#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px; <!-- lebar dropdown menu -->

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff; <!-- warna latar dropdown menu -->

width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->

border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->

border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->

<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->

}

#nav li li a:hover, #nav li li a:active {

background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->

padding: 7px 30px 7px 10px;

}





Selamat berdropdown dengan menu horizontal...

Menambah Widget Tiga Kolom Sejajar di Atas Footer

Bagaimana menambahkan 3 kotak lagi di bawah main wrapper? Pertanyaan ini dilontarkan oleh sobat OB Ad4m San dalam komentarnya di posting membuat menu horizontal. Mungkin singkatnya, yakni menambah widget tiga kolom sejajar di atas footer (sama aja he.. he.. he..). Untuk kode CSS dalam trik blogger ini harus disesuaikan dengan template blog kamu.

Berikut trik blogger menambah widget tiga kolom sejajar di atas footer :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* -- bottom -- */



#bottom {

width:850px;

clear:both;

margin:0 auto;

float:left;

padding:10px 0;

color:#333;

background:#ffffff;

border-top:#ffffff;

border-bottom:#ffffff;

}



#bottom a:link {

color:#006699;

text-decoration:none;

}



#bottom a:hover {

color:#c06000;

text-decoration:underline;

}



#bottom a:visited {

color:#808080;

text-decoration:none;

}



#bottom h2 {

color:#000000;

padding:10px 0 2px 0;

margin:0 0 10px 0;

border-bottom:1px dotted #333;

font-size:11px;

font-weight:bold;

line-height:1.4em;

text-transform:uppercase;

}



#bottom ul {

padding:0;

margin:0;

color:#333;

}



#bottom ul li {

list-style-type:none;

border-bottom:1px dotted #333;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;

margin-top:2px;

}



#bottom1 {

width:260px;

float:left;

padding-left:15px;

}



#bottom2 {

width:260px;

float:left;

padding:0 20px 0 20px;

}



#bottom3 {

width:260px;

float:right;

padding-right:15px;

}

Catatan :

1. Ganti kode yang berwarna hijau sesuai dengan lebar template blog kamu.


2. Untuk variabel width di kode #bottom harus sesuai dengan lebar template blog kamu.


3. Untuk variabel width di kode #bottom1, #bottom2, dan #bottom3 dapat kamu ubah dengan lebar yang kamu inginkan, tapi harus memperhatikan point nomor 2.
   
   


4. Ganti kode yang berwarna merah dengan karakter blog kamu.


5. Khusus untuk kode background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px; merupakan kode untuk menambahkan icon panah biru dalam teks kamu jika menggunakan metode penomoran, baik angka maupun butir-butir. Kalau kamu kurang suka silakan hapus kode tersebut atau ganti url dalam tanda kurung dengan icon kamu sendiri.
   
   

• Cari kembali kode HTML <div id='footer-wrapper'> atau kode yang sejenis. Kemudian copas kode di bawah ini di atas kode tersebut.

<div id='bottom'>

<b:section class='bottom' id='bottom1' preferred='yes'/>

<b:section class='bottom' id='bottom2' preferred='yes'/>

<b:section class='bottom' id='bottom3' preferred='yes'/>

</div>

• Jangan lupa disimpan.

Catatan : Sekarang coba kamu klik Tata Letak --> Elemen Halaman. Sekarang kamu akan melihat ada tampilan widget baru di bawah template blog kamu dan sudah bisa menambah beberapa gadget didalamnya.

Revisi :



Pantesan banyak teman-teman OB yang gagal menerapkan trik blogger ini, ternyata karena pengaruh kode <!-- ... --> yang ikut diterjemahkan dalam bahasa pemprograman. Sekarang kodenya telah diupdate dengan meniadakan kode yang OB sebutkan di atas.

Atas perhatian teman-teman yang terlanjur kecewa dengan kegagalan trik ini, OB haturkan maaf yang sebesarnya.



Tertanda,



OB

http://optimasi-blog/blogspot.com

Sebagai tambahan OB akan sedikit mencoba untuk menjelaskan modifikasi kode CSS pada variabel width (#bottom1, bottom2, bottom3) agar sesuai dengan width di kode #bottom (kode yang berkedap-kedip).

Misal :

1. #bottom { width:850px;}


2. Trik perubahan variabel width dalam kode #bottom1, #bottom2, #bottom3 adalah dengan memperhatikan lebar (padding) yang terpakai yakni 15px (#bottom1), 20px + 20px (#bottom2), 15px (#bottom3). Jadi total lebar yang telah digunakan adalah 70px.


3. Sisa lebar (width) adalah 850px-70px = 780px.


4. Sekarang tinggal memvariasikan 780px ke dalam 3 kolom. Sebagai contoh untuk membuat 3 kolom sama lebarnya, maka lebar (width) dalam kode #bottom1, #bottom2, #bottom3 masing-masing sebesar 260px.

Selamat menambah widget tiga kolom sejajar di atas footer...

Menambah Widget Tiga Kolom Sejajar di Atas Footer

Posted by rike No comments

Bagaimana menambahkan 3 kotak lagi di bawah main wrapper? Pertanyaan ini dilontarkan oleh sobat OB Ad4m San dalam komentarnya di posting membuat menu horizontal. Mungkin singkatnya, yakni menambah widget tiga kolom sejajar di atas footer (sama aja he.. he.. he..). Untuk kode CSS dalam trik blogger ini harus disesuaikan dengan template blog kamu.

Berikut trik blogger menambah widget tiga kolom sejajar di atas footer :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* -- bottom -- */



#bottom {

width:850px;

clear:both;

margin:0 auto;

float:left;

padding:10px 0;

color:#333;

background:#ffffff;

border-top:#ffffff;

border-bottom:#ffffff;

}



#bottom a:link {

color:#006699;

text-decoration:none;

}



#bottom a:hover {

color:#c06000;

text-decoration:underline;

}



#bottom a:visited {

color:#808080;

text-decoration:none;

}



#bottom h2 {

color:#000000;

padding:10px 0 2px 0;

margin:0 0 10px 0;

border-bottom:1px dotted #333;

font-size:11px;

font-weight:bold;

line-height:1.4em;

text-transform:uppercase;

}



#bottom ul {

padding:0;

margin:0;

color:#333;

}



#bottom ul li {

list-style-type:none;

border-bottom:1px dotted #333;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;

margin-top:2px;

}



#bottom1 {

width:260px;

float:left;

padding-left:15px;

}



#bottom2 {

width:260px;

float:left;

padding:0 20px 0 20px;

}



#bottom3 {

width:260px;

float:right;

padding-right:15px;

}

Catatan :

1. Ganti kode yang berwarna hijau sesuai dengan lebar template blog kamu.


2. Untuk variabel width di kode #bottom harus sesuai dengan lebar template blog kamu.


3. Untuk variabel width di kode #bottom1, #bottom2, dan #bottom3 dapat kamu ubah dengan lebar yang kamu inginkan, tapi harus memperhatikan point nomor 2.
   
   


4. Ganti kode yang berwarna merah dengan karakter blog kamu.


5. Khusus untuk kode background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px; merupakan kode untuk menambahkan icon panah biru dalam teks kamu jika menggunakan metode penomoran, baik angka maupun butir-butir. Kalau kamu kurang suka silakan hapus kode tersebut atau ganti url dalam tanda kurung dengan icon kamu sendiri.
   
   

• Cari kembali kode HTML <div id='footer-wrapper'> atau kode yang sejenis. Kemudian copas kode di bawah ini di atas kode tersebut.

<div id='bottom'>

<b:section class='bottom' id='bottom1' preferred='yes'/>

<b:section class='bottom' id='bottom2' preferred='yes'/>

<b:section class='bottom' id='bottom3' preferred='yes'/>

</div>

• Jangan lupa disimpan.

Catatan : Sekarang coba kamu klik Tata Letak --> Elemen Halaman. Sekarang kamu akan melihat ada tampilan widget baru di bawah template blog kamu dan sudah bisa menambah beberapa gadget didalamnya.

Revisi :



Pantesan banyak teman-teman OB yang gagal menerapkan trik blogger ini, ternyata karena pengaruh kode <!-- ... --> yang ikut diterjemahkan dalam bahasa pemprograman. Sekarang kodenya telah diupdate dengan meniadakan kode yang OB sebutkan di atas.

Atas perhatian teman-teman yang terlanjur kecewa dengan kegagalan trik ini, OB haturkan maaf yang sebesarnya.



Tertanda,



OB

http://optimasi-blog/blogspot.com

Sebagai tambahan OB akan sedikit mencoba untuk menjelaskan modifikasi kode CSS pada variabel width (#bottom1, bottom2, bottom3) agar sesuai dengan width di kode #bottom (kode yang berkedap-kedip).

Misal :

1. #bottom { width:850px;}


2. Trik perubahan variabel width dalam kode #bottom1, #bottom2, #bottom3 adalah dengan memperhatikan lebar (padding) yang terpakai yakni 15px (#bottom1), 20px + 20px (#bottom2), 15px (#bottom3). Jadi total lebar yang telah digunakan adalah 70px.


3. Sisa lebar (width) adalah 850px-70px = 780px.


4. Sekarang tinggal memvariasikan 780px ke dalam 3 kolom. Sebagai contoh untuk membuat 3 kolom sama lebarnya, maka lebar (width) dalam kode #bottom1, #bottom2, #bottom3 masing-masing sebesar 260px.

Selamat menambah widget tiga kolom sejajar di atas footer...

Tampilan Huruf Awal Posting bergaya Koran

Coba kamu perhatikan postingan ini,... Apa yang beda dengan posting lainnya? Betul sekali, huruf awal tampil besar sampai mengawali 3 baris kalimat. Nah itu yang dimaksud dengan tampilan bergaya koran atau surat kabar. Jika kamu ingin mengadopsi tampilan seperti ini, maka kamu harus menggunakan trik blogger tertentu. Bagaimana OB triknya? OK, triknya adalah sebagai berikut.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin> atau dalam kode CSS.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Copy paste kode di bawah diatas kode ]]></b:skin> atau dalam kode CSS.

/*-- hurup awal bergaya koran --*/
.first-letter {
float:left;
color: #333333;
line-height:0.5em;
padding:0.13em 0.05em 0.05em 0;
font-family:Georgia, Serif;
font-size:5.5em;
}

• Jangan lupa disimpan

Perhatikan untuk padding — atas (0.13em), kanan (0.05em), bawah (0.05em), kiri (0) — sesuaikan dengan line-height & font-size. Kode line-height merupakan besaran jarak vertikal white space di atas & di bawah huruf awal.

Cara penggunaan kode di atas :

1. Ketika kamu melakukan posting (buat), silakan ketik tulisan kamu sampai selesai.


2. Masih dalam "buat posting", klik pilihan "Edit HTML". Letaknya di atas sebelah kanan form "buat posting". Hasilnya kamu akan melihat postingan kamu dalam kode HTML.


3. Tambahkan kode <span class="first-letter"> ... </span>, diantara huruf awal postingan.


4. Terakhir pilih "Terbitkan Entri".

Contoh :

<span class="first-letter">O</span>ptimasi Blog merupakan blog yang berbicara tentang optimasi dalam blog melalui tips SEO dan trik blogger serta optimasi lainnya. Jadi jangan lupa untuk selalu mengikuti update posting optimasi blog, caranya cukup dengan meng-klik "Berlangganan posting via RSS FEED" dan tambahkan optimasi-blog.blogspot dalam reader kamu. Atau masukkan email kamu dan klik "Berlangganan" via email.

Hasil :

Optimasi Blog merupakan blog yang berbicara tentang optimasi dalam blog melalui tips SEO dan trik blogger serta optimasi lainnya. Jadi jangan lupa untuk selalu mengikuti update posting optimasi blog, caranya cukup dengan meng-klik "Berlangganan posting via RSS FEED" dan tambahkan optimasi-blog.blogspot dalam reader kamu. Atau masukkan email kamu dan klik "Berlangganan" via email.

Sumber : Make Magazine Style Drop Caps by Kang Rohman.

Tampilan Huruf Awal Posting bergaya Koran

Posted by rike No comments

Coba kamu perhatikan postingan ini,... Apa yang beda dengan posting lainnya? Betul sekali, huruf awal tampil besar sampai mengawali 3 baris kalimat. Nah itu yang dimaksud dengan tampilan bergaya koran atau surat kabar. Jika kamu ingin mengadopsi tampilan seperti ini, maka kamu harus menggunakan trik blogger tertentu. Bagaimana OB triknya? OK, triknya adalah sebagai berikut.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin> atau dalam kode CSS.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Copy paste kode di bawah diatas kode ]]></b:skin> atau dalam kode CSS.

/*-- hurup awal bergaya koran --*/
.first-letter {
float:left;
color: #333333;
line-height:0.5em;
padding:0.13em 0.05em 0.05em 0;
font-family:Georgia, Serif;
font-size:5.5em;
}

• Jangan lupa disimpan

Perhatikan untuk padding — atas (0.13em), kanan (0.05em), bawah (0.05em), kiri (0) — sesuaikan dengan line-height & font-size. Kode line-height merupakan besaran jarak vertikal white space di atas & di bawah huruf awal.

Cara penggunaan kode di atas :

1. Ketika kamu melakukan posting (buat), silakan ketik tulisan kamu sampai selesai.


2. Masih dalam "buat posting", klik pilihan "Edit HTML". Letaknya di atas sebelah kanan form "buat posting". Hasilnya kamu akan melihat postingan kamu dalam kode HTML.


3. Tambahkan kode <span class="first-letter"> ... </span>, diantara huruf awal postingan.


4. Terakhir pilih "Terbitkan Entri".

Contoh :

<span class="first-letter">O</span>ptimasi Blog merupakan blog yang berbicara tentang optimasi dalam blog melalui tips SEO dan trik blogger serta optimasi lainnya. Jadi jangan lupa untuk selalu mengikuti update posting optimasi blog, caranya cukup dengan meng-klik "Berlangganan posting via RSS FEED" dan tambahkan optimasi-blog.blogspot dalam reader kamu. Atau masukkan email kamu dan klik "Berlangganan" via email.

Hasil :

Optimasi Blog merupakan blog yang berbicara tentang optimasi dalam blog melalui tips SEO dan trik blogger serta optimasi lainnya. Jadi jangan lupa untuk selalu mengikuti update posting optimasi blog, caranya cukup dengan meng-klik "Berlangganan posting via RSS FEED" dan tambahkan optimasi-blog.blogspot dalam reader kamu. Atau masukkan email kamu dan klik "Berlangganan" via email.

Sumber : Make Magazine Style Drop Caps by Kang Rohman.

SEO secara Singkat dan Padat

Kalau kamu sering mengunjungi blog Optimasi Blog ini, tentu tidak asing lagi dengan tag tips SEO. Yoi, cukup banyak posting OB mengenai tips SEO diantaranya : apa itu SEO?, Optimasi kata kunci, optimasi blog, optimasi title, optimasi posting, optimasi link, cara mendaftar di google, yahoo, dan MSN. Tapi kalau si bosan datang, rasanya agak sulit jika kamu mereview satu-persatu. Betul tidak? Apalagi mata sudah mengantuk ditambah dengan koneksi internet yang batuk-batuk, sehingga enaknya lebih baik langsung bertanya dengan si empu-nya blog. Namun yang perlu digarisbawahi, ulasan ini hanya berisi point-point penting dari sekian posting yang telah disebutkan di atas. Jadi mohon maklum kalau ada yang masih kurang bumbu-bumbunya. Dan sebagai rekomendasi coba kunjungi juga blog di link favorit OB agar lebih memahami SEO di blog kamu.

Pertama, kenalilah blog kamu! Apa yang akan kamu angkat dalam blog tersebut (ex: trik blogger)? Jika kamu telah memahami point-point apa saja yang akan diangkat, itu artinya kamu telah bisa mengambil benang merahnya, berupa tema dalam blog kamu. Dan berawal dari tema tersebut, maka kamu nantinya akan mengetahui ke arah mana blog tersebut dikemudikan.

Kedua, tentukan keyword atau kata kunci blog kamu. Apabila keyword blog berbicara tentang "trik blogger", tapi yang banyak diulas malahan mengenai "trik menangkap nyamuk" berarti kamu kurang konsekuen menerapkan keyword. Jadi inti dari keyword adalah konsekuen dan komitmen. Bagaimana cara memasang keyword di blogger dapat kamu baca dalam posting memasang meta tags.



Ketiga, mulai membuat posting yang sesuai dengan tema dan keyword minimal 10 posting. Why? Sebab dengan memperbanyak postingan, maka akan menyaring lebih banyak pula kata-kata kunci (keyword) yang nantinya akan di crawl oleh search engine. Bahasa sederhananya mungkin seperti ini "kata kunci yang akan diserap dan dimasukkan dalam database search engine". Dilain pihak mungkin ada posting blog kamu yang bersumber dari blog lain. Nah, jangan segan-segan untuk meletakkan link sumber posting blog kamu, karena hal ini akan lebih memurnikan isi posting kamu dari unsur-unsur copy-paste.



Keempat, jangan lupa disimpan..ups!!? Maksudnya jangan lupa membuat tautan/link antar posting di blog kamu, supaya jika "posting A" mulai terindeks maka diharapkan ia akan mengajak posting-posting lainnya (dalam link tersebut) untuk ikut diindeks oleh search engine. Yah, semacam jaring laba-laba (spider).



Kelima, jangan pernah melakukan spammer di blog kamu terlebih-lebih di blog orang lain. Tapi ngomong-ngomng tentang spam, kaya apa sih rupanya? Bentuknya bisa bermacam-macam (tolong kalau salah, dibenarkan dan kalau kurang, mohon ditambahkan), seperti: title yang diulang dengan kata yang sama sebanyak 3 kali, memasukkan keyword sebanyak 3 kali, menyamarkan tulisan keyword sama dengan warna latar (tempatnya tertentu), menggunakan bahasa pemprograman "noscript", meredirect (memindahkan) alamat blog sesungguhnya, meletakkan berbagai link di komentar, dan sebagainya.



Keenam, daftarkan blog kamu ke search engine dan blog directory. Dengan mendaftarkan blog kamu di search engine, diharapkan blog segera muncul dalam daftar pencarian. Sedangkan blog directory sangat membantu dalam mempromosikan blog kamu. Disamping itu, jika blog kamu masuk dalam database blog directory, maka dukungan mereka dapat menjadi referensi yang potensial untuk merayu search engine agar cepat mendeteksi keberadaan blog kamu.



Ketujuh, perbanyak komentar di blog lain. Nah, ini mungkin yang belum membudaya, karena biasanya apabila sudah membaca postingan, kamu alfa untuk memberikan komentar di blog tersebut. Padahal dengan memberikan komentar dalam suatu postingan, maka kamu telah meninggalkan jejak positif terhadap blog kamu. Dan ingat-ingat "jangan sekali-kali meletakkan spam".



Kedelapan, berhubungan dengan point ketujuh, sering-sering melakukan blog walking. Kunjungilah blog-blog tetangga [Blog Berikut (Next Blog) dalam navbar blogger] atau blog sobat atau blog lainnya, walau hanya sekedar melihat-lihat. Namun jika sudah membaca posting saat kamu blog walking, maka berlaku prosedur point ketujuh.



Kesembilan, tetap berusaha dan dilampiri dengan do'a. Jika blog kamu belum juga terindeks oleh search engine, jangan putus asa tetap berusaha (pahlawan kita dulu aja berani berjuang sampai titik darah penghabisan, masa kita yang kerjanya hanya menulis dengan mudahnya mengeluarkan kata "menyerah") maju terus, sambil ingat Allah yang maha rohman dan maha rohiim tentunya tidak lain serta tidak bukan diiringi dengan do'a.



Kesepuluh, Wah sudah sampai 10 nih, panjang juga yah. Eit... rasanya ada yang kelupaan. Apa yaa? Gini nih sambil bisik-bisik aja, kamu tentu masih ingat prosedur ketujuh khan he..he..he.. Yap, ditunggu komentarnya.





Selamat berkomentar dalam SEO singkat Optimasi Blog...

SEO secara Singkat dan Padat

Posted by rike No comments

Kalau kamu sering mengunjungi blog Optimasi Blog ini, tentu tidak asing lagi dengan tag tips SEO. Yoi, cukup banyak posting OB mengenai tips SEO diantaranya : apa itu SEO?, Optimasi kata kunci, optimasi blog, optimasi title, optimasi posting, optimasi link, cara mendaftar di google, yahoo, dan MSN. Tapi kalau si bosan datang, rasanya agak sulit jika kamu mereview satu-persatu. Betul tidak? Apalagi mata sudah mengantuk ditambah dengan koneksi internet yang batuk-batuk, sehingga enaknya lebih baik langsung bertanya dengan si empu-nya blog. Namun yang perlu digarisbawahi, ulasan ini hanya berisi point-point penting dari sekian posting yang telah disebutkan di atas. Jadi mohon maklum kalau ada yang masih kurang bumbu-bumbunya. Dan sebagai rekomendasi coba kunjungi juga blog di link favorit OB agar lebih memahami SEO di blog kamu.

Pertama, kenalilah blog kamu! Apa yang akan kamu angkat dalam blog tersebut (ex: trik blogger)? Jika kamu telah memahami point-point apa saja yang akan diangkat, itu artinya kamu telah bisa mengambil benang merahnya, berupa tema dalam blog kamu. Dan berawal dari tema tersebut, maka kamu nantinya akan mengetahui ke arah mana blog tersebut dikemudikan.

Kedua, tentukan keyword atau kata kunci blog kamu. Apabila keyword blog berbicara tentang "trik blogger", tapi yang banyak diulas malahan mengenai "trik menangkap nyamuk" berarti kamu kurang konsekuen menerapkan keyword. Jadi inti dari keyword adalah konsekuen dan komitmen. Bagaimana cara memasang keyword di blogger dapat kamu baca dalam posting memasang meta tags.



Ketiga, mulai membuat posting yang sesuai dengan tema dan keyword minimal 10 posting. Why? Sebab dengan memperbanyak postingan, maka akan menyaring lebih banyak pula kata-kata kunci (keyword) yang nantinya akan di crawl oleh search engine. Bahasa sederhananya mungkin seperti ini "kata kunci yang akan diserap dan dimasukkan dalam database search engine". Dilain pihak mungkin ada posting blog kamu yang bersumber dari blog lain. Nah, jangan segan-segan untuk meletakkan link sumber posting blog kamu, karena hal ini akan lebih memurnikan isi posting kamu dari unsur-unsur copy-paste.



Keempat, jangan lupa disimpan..ups!!? Maksudnya jangan lupa membuat tautan/link antar posting di blog kamu, supaya jika "posting A" mulai terindeks maka diharapkan ia akan mengajak posting-posting lainnya (dalam link tersebut) untuk ikut diindeks oleh search engine. Yah, semacam jaring laba-laba (spider).



Kelima, jangan pernah melakukan spammer di blog kamu terlebih-lebih di blog orang lain. Tapi ngomong-ngomng tentang spam, kaya apa sih rupanya? Bentuknya bisa bermacam-macam (tolong kalau salah, dibenarkan dan kalau kurang, mohon ditambahkan), seperti: title yang diulang dengan kata yang sama sebanyak 3 kali, memasukkan keyword sebanyak 3 kali, menyamarkan tulisan keyword sama dengan warna latar (tempatnya tertentu), menggunakan bahasa pemprograman "noscript", meredirect (memindahkan) alamat blog sesungguhnya, meletakkan berbagai link di komentar, dan sebagainya.



Keenam, daftarkan blog kamu ke search engine dan blog directory. Dengan mendaftarkan blog kamu di search engine, diharapkan blog segera muncul dalam daftar pencarian. Sedangkan blog directory sangat membantu dalam mempromosikan blog kamu. Disamping itu, jika blog kamu masuk dalam database blog directory, maka dukungan mereka dapat menjadi referensi yang potensial untuk merayu search engine agar cepat mendeteksi keberadaan blog kamu.



Ketujuh, perbanyak komentar di blog lain. Nah, ini mungkin yang belum membudaya, karena biasanya apabila sudah membaca postingan, kamu alfa untuk memberikan komentar di blog tersebut. Padahal dengan memberikan komentar dalam suatu postingan, maka kamu telah meninggalkan jejak positif terhadap blog kamu. Dan ingat-ingat "jangan sekali-kali meletakkan spam".



Kedelapan, berhubungan dengan point ketujuh, sering-sering melakukan blog walking. Kunjungilah blog-blog tetangga [Blog Berikut (Next Blog) dalam navbar blogger] atau blog sobat atau blog lainnya, walau hanya sekedar melihat-lihat. Namun jika sudah membaca posting saat kamu blog walking, maka berlaku prosedur point ketujuh.



Kesembilan, tetap berusaha dan dilampiri dengan do'a. Jika blog kamu belum juga terindeks oleh search engine, jangan putus asa tetap berusaha (pahlawan kita dulu aja berani berjuang sampai titik darah penghabisan, masa kita yang kerjanya hanya menulis dengan mudahnya mengeluarkan kata "menyerah") maju terus, sambil ingat Allah yang maha rohman dan maha rohiim tentunya tidak lain serta tidak bukan diiringi dengan do'a.



Kesepuluh, Wah sudah sampai 10 nih, panjang juga yah. Eit... rasanya ada yang kelupaan. Apa yaa? Gini nih sambil bisik-bisik aja, kamu tentu masih ingat prosedur ketujuh khan he..he..he.. Yap, ditunggu komentarnya.





Selamat berkomentar dalam SEO singkat Optimasi Blog...

Trik Menjadikan Blog Kamu "DoFollow"

Telah diulas sebelumnya bahwa secara default blogger menganut paham nofollow, karena kemurnian sebuah blog akan terjamin dari makhluk-makhluk yang beratribut "SPAM". Yang pada akhirnya akan memberikan reaksi positif terhadap daftar pencarian di search engine google. Dilain sisi, blog yang dofollow bukan berarti kemurnian sebuah blog ternoda, melainkan oknum penyebablah yang menjadikan blog tersebut menjadi agak kurang disukai oleh search engine google. Oleh karena himbauan bagi para komentator "berpromosilah dengan sehat dan jangan dijadikan sebuah blog teman kamu menjadi gudang SPAM".

Karena secara default blogger menganut paham nofollow dan ketika kamu akan menjadikan blog kamu dofollow, maka kamu perlu melakukan trik-trik tertentu. Agar tidak berbelit-belit, mari bersama-sama kita cangkok trik blogger menjadikan blog agar dofollow.

• Login dulu ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode rel='nofollow', pada kode-kode di bawah ini.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Kode I :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Kode II :

<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>

• Hapus kode yang berwarna merah.
• Jangan lupa disimpan

Update: Apabila sebuah blog telah menggunakan threaded comments, umumnya blog itu tidak lagi “dofollow”.

Trik Menjadikan Blog Kamu "DoFollow"

Posted by rike No comments

Telah diulas sebelumnya bahwa secara default blogger menganut paham nofollow, karena kemurnian sebuah blog akan terjamin dari makhluk-makhluk yang beratribut "SPAM". Yang pada akhirnya akan memberikan reaksi positif terhadap daftar pencarian di search engine google. Dilain sisi, blog yang dofollow bukan berarti kemurnian sebuah blog ternoda, melainkan oknum penyebablah yang menjadikan blog tersebut menjadi agak kurang disukai oleh search engine google. Oleh karena himbauan bagi para komentator "berpromosilah dengan sehat dan jangan dijadikan sebuah blog teman kamu menjadi gudang SPAM".

Karena secara default blogger menganut paham nofollow dan ketika kamu akan menjadikan blog kamu dofollow, maka kamu perlu melakukan trik-trik tertentu. Agar tidak berbelit-belit, mari bersama-sama kita cangkok trik blogger menjadikan blog agar dofollow.

• Login dulu ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode rel='nofollow', pada kode-kode di bawah ini.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Kode I :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Kode II :

<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>

• Hapus kode yang berwarna merah.
• Jangan lupa disimpan

Update: Apabila sebuah blog telah menggunakan threaded comments, umumnya blog itu tidak lagi “dofollow”.