Created (c) by Princexells Seyka (Princelling Saki)

Minima Green Fragmentary Blogger Layout

Kali ini dapat kiriman Template Blogger dari rekan Aris Asmara owner
dari
Optimasi-blog.blogspot.com




Template blogger ini merupakan hasil pengeditan dari template Minima.
Ditampilkan berwarna hijau (green) dan bagian konten tetap dipertahankan dengan
warna putih. Yang membuat unik template ini adalah elemen posting, komentar dan
sidebar terbagi dalam bagian yang terpisah-pisah (fragmentary), dimana elemen
sidebar dimodifikasi menjadi 3 kolom. Dari penjelasan di atas, maka tidak salah
apabila template blogger ini diberi nama "Minima Green Fragmentary".





Minima Green Fragmentary memiliki struktur padat, sehingga memudahkan anda untuk
memasukkan berbagai widget/gadget dari berbagai posisi elemen. Pengguna template
ini juga sedikit memerlukan keahlian untuk mengatur keserasian serta
keseimbangan perataan widget/gadget, terutama pada sidebar yang memiliki 2 kolom.






DEMO
|
Download





Support Template Minima Green Fragmentary:




1. Meta tags SEO friendly (o-om)

2. Favicon included (o-om)

3. Horizontal Navigation plus Search box (kang rohman)

4. Readmore + Title Post included (o-om + kang rohman)

5. Emoticon (o-om)

6. Highlight author comment (o-om)

7. RSS reader and email included

8. Penomoran Label dengan icon & bergaris bawah putus-putus ready (o-om)

9. Google translate

10. Recents posts and Recents Comments (o-om)

11. 125 x 125 ads banner (o-om)

12. Follower

13. Bottom widget 3 column ready (o-om)

14. Bottom animation include

15. Sidebar 3 column

16. Uncustomizable font and color

17. Zoom image style + show image text include

18. Click the label showing the post title only (o-om)

19. Dropcaps (Huruf besar awal posting) include (kang rohman)





Pengen hasil karya template anda direview di o-om.com? Silahkan simak caranya

disini


Description: Minima Green Fragmentary Blogger Layout Rating: 5.0 Reviewer: Unknown ItemReviewed: Minima Green Fragmentary Blogger Layout

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.

<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...


Description: Menu Turunan dalam Horizontal Navigasi Kode CSS Rating: 5.0 Reviewer: Unknown ItemReviewed: Menu Turunan dalam Horizontal Navigasi Kode CSS

Website Monitoring yang handal via Binarycanary.com


BinaryCanary.com
merupakan layanan khusus yang menawarkan cara terbaik bagi anda yang memerlukan
sistem website monitoring yang cukup handal. Layanan yang dikemas dalam
satu paket monitoring all in one ini sangat berguna bagi anda serius dalam
memantau segala hal yang berhubungan dengan website terutama jika anda ingin
mendapatkan laporan secara berkala jika  status server anda mengalami
Downtime dan Uptime.








Mungkin ini alasan utama mengapa anda harus memantau situs dalam rangka
menjaga kredibilitas pada setiap kunjungan. Solusi dari Binary Canary
benar-benar menawarkan pilihan menarik untuk mengurangi status downtime hampir
ke titik nol. Laporan demi laporan dalam bentuk statistik akan anda terima
secara berkala, sehingga anda dapat mempelajari lebih lanjut dan mengurangi jika
situs anda mengalami Downtime.




Cara kerja layanan ini sebenarnya sederhana, selain memiliki fasilitas Alert
message pada pilihan laporannya, anda hanya perlu memilih layanan apa saja yang
akan ingin anda monitoring, melakukan sedikit konfigurasi dan setelah itu
menentukan siapa saja yang berhak menerima laporan. Pesan Alert message ini bisa
dikirim melalui Email, SMS, SMS Gateway dan Phone Call (Cooming Soon).




Bisa disimpulkan layanan
website monitoring
ini sangat membantu bagi pemilik website dan operator.
Jadi tunggu apa lagi, walaupun aplikasi ini berbayar senilai $5/bulan anda masih
bisa kok mencoba versi gratisnya :)


Description: Website Monitoring yang handal via Binarycanary.com Rating: 5.0 Reviewer: Unknown ItemReviewed: Website Monitoring yang handal via Binarycanary.com

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/AVvXsEjJ9ehL_K2A3rhawVzDZ-wLtW3fX3GhufIHNOTtrI_loQpk_2FLuB8e61kHxiQWFHoX4CuQyi0FOfk-ecz6N2rUMWtrfyO5pLrtHBCaRKbfxsCMDXlg2cITgJTRR-juJQiBtxjnk0R682k/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/AVvXsEi-lfHxdRcOHF5BJOI7EhBKPCYw4-zFrxu9xeBL6GPcDZgOQC0nhOQjpVvUbC3g7wcQWnzbXzOIz004yGe5nSPfsA_KADr8Yv0sxOyskkkMjhHdXyKTRPY2mQ0UJdTWRNydw_eI81fdP1U/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/AVvXsEin7HNObMa9KvQfoXb1l_E8A8fFptASm1pjUojnaEerK_Uj3Pw_HBlozphJIf9FZ7dUSDM1IpJwOzlEgNlgQqNrY6E0Jc8Wt_yXwHSB_loX046Mog5OiQkAvnuutRYTxUsudwLOPbGgT_o/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/AVvXsEio-xAE8vFrtFEaHGlZlDouNlj6A9AmFcyxO2A66Wjxmtv2swcWQl3pshydD6j0YRuCKyQRoEPchTPiw77Bsb6NBN0r86MXZrbQxdJkEIYjEpMV-DQ5v-hWOHu6ExlZJklNhMCcTXO2f1o/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/AVvXsEin7HNObMa9KvQfoXb1l_E8A8fFptASm1pjUojnaEerK_Uj3Pw_HBlozphJIf9FZ7dUSDM1IpJwOzlEgNlgQqNrY6E0Jc8Wt_yXwHSB_loX046Mog5OiQkAvnuutRYTxUsudwLOPbGgT_o/s800/SpryMenuBarDownHover.gif", imgRight:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-xAE8vFrtFEaHGlZlDouNlj6A9AmFcyxO2A66Wjxmtv2swcWQl3pshydD6j0YRuCKyQRoEPchTPiw77Bsb6NBN0r86MXZrbQxdJkEIYjEpMV-DQ5v-hWOHu6ExlZJklNhMCcTXO2f1o/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...

Description: Varian Menu Horizontal menggunakan Javascript Rating: 5.0 Reviewer: Unknown ItemReviewed: Varian Menu 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...


Description: Menambah Smiley Galery dalam Shoutmix Rating: 5.0 Reviewer: Unknown ItemReviewed: Menambah Smiley Galery 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...

Description: Pasang Script Kursor Ular-Ularan Rating: 5.0 Reviewer: Unknown ItemReviewed: Pasang Script Kursor Ular-Ularan

ByTagg: Cara Mudah Men-Track Blog Favorite Anda


ByTagg bisa dikatakan sebagai solusi terbaru
yang berguna untuk mempermudah kita mem-follow halaman blog favorite.
ByTagg juga dilengkapi dengan berbagai fitur fungsionalis yang yang memiliki
kemampuan sebagai Feed Reader, Twitter Reader dan dapat juga digunakan sebagai
Search Engine. Setiap kali kita melakukan pencarian, maka setiap kata kunci yang
digunakan akan simpan dalam tag tertentu, cara ini tentu saja untuk mempermudah
kita melakukan pencarian dilain waktu.








Selain itu jika kita memiliki alamat blog,
ByTagg
dapat kita manfaatkan sebagai cara efektif untuk beriklan. Dimana tools ini juga
memiliki fitur program Affiliate. Caranya kita tinggal memasang saja kode
pilihan Link atau Banner yang sudah disediakan. Ok nya lagi kita juga diperbolehkan memasang
iklan banner dengan size gambar 234x60.




Untuk saat ini ByTagg telah tersedia pada Sistem Operasi Windows, kemungkinan
yang akan datang tersedia juga untuk Linux dan MAC.




Silahkan Download langsung Aplikasi ByTagg disini http://download.bytagg.com

Description: ByTagg: Cara Mudah Men-Track Blog Favorite Anda Rating: 5.0 Reviewer: Unknown ItemReviewed: ByTagg: Cara Mudah Men-Track Blog Favorite Anda

Tips Menaikkan SERP dengan Link

search engineSERP 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...
Description: Tips Menaikkan SERP dengan Link Rating: 5.0 Reviewer: Unknown ItemReviewed: Tips Menaikkan SERP dengan Link

DMAGZ Personal Wordpress Template

Kali ini dapat kiriman Template Wordpress dari rekan blogger Yoki Dhinata
owner dari Dhinata.com


 



DMAGZ PERSONAL adalah theme (tema desain) gratis untuk blog self hosting dengan
blog engine WordPress. Theme ini merupakan versi minimalis dari theme DMAGZ 2
yang saat ini digunakan oleh Majalah Blog DHINATACOM. Berbagai fitur dan
layout disesuaikan agar sesuai dengan kebutuhan blogger. Langkah pertama untuk
menggunakan theme ini adalah silahkan BACA dokumen ini sampai habis sebelum
menggunakannya pada blog Anda.




Karena instalasi cukup rumit, DHINATACOM merekomendasikan theme ini untuk
pengguna WordPress tingkat medium-advanced, tidak untuk pemula.





DEMO |
Download via

Ziddu
| BOX




Kelebihan:

+ Desain unik, rapi, dan modern ciri khas majalah versi cetak

+ Multibrowser. Dapat ditampilkan dengan baik pada browser modern seperti
Firefox, Opera, dan Internet Explorer. Tampilan terbaik adalah pada browser
Firefox 3+.

+ Mendukung penggunakan Gravatar untuk author dan komentator

+ Mendukung engine WordPress 2.7+

+ Ada 10 Warna berbeda pada header dan judul artikel yang dapat berubah secara
dinamis

+ Tetap optimal untuk SEO

+ GRATIIIIISSSSSSS :D

+ Ada yang mau menambahkan?



Kekurangan:

- Waktu load homepage mungkin akan lebih lambat bagi yang memiliki koneksi
Internet lambat.

- Instalasi theme bagi blogger newbie (pemula) mungkin akan cukup sulit karena
harus sedikit memodifikasi skrip PHP dan CSS sesuai dengan kondisi blognya.
Tenang.. gak susah banget kok :D

- Tidak ada widget sidebar pada versi ini :)

- Tidak ada slot banner pada versi ini, namun tetap dpt dibuat secara manual

- Tag coding yang agak aneh hehehe.. harap maklum :)

- Ada yang mau menambahkan?





CARA PENGGUNAAN


1. Edit file [style.css] pada baris ke 12. Sesuaikan URL gambar background cover
blog Anda. Gunakan gambar background dengan warna dasar gelap/tua dengan ukuran
800x600 px, tidak boleh kurang/lebih. Usahakan ukuran file background tidak
lebih dari 50 kb.

2. Edit file [panelcover.php] pada baris ke 61-82. Sesuaikan URL kategori dan
nama kategori yang sesuai dengan blog Anda. Jika ada baris yang tidak terpakai
silahkan dihapus.

3. Jika ingin menggunakan Google Analytics, letakkan skripnya pada file [footer.php]
pada baris ke 12 dan [index.php] pada baris ke 67.

4. Skrip widget/chicklet feedburner, feedblitz dan alexa dapat Anda letakan pada
file [panel.php] dan [panelcover.php].

5. Jangan lupa isi identitas Anda pada halaman profile di dashboard wordpress.
Isi semua kotak termasuk "Biographical Info" karena deskripsi penulis akan
ditampilkan pada halaman artikel (single.php).

6. Masuk ke dashboard blog Anda, lalu telusuri halaman [Reading] yang ada pada
bagian [Setting]. Ganti pilihan [Blog pages show at most] menjadi 8. jangan lupa
klik tombol [Save].

7. Jangan menggunakan judul artikel yang terlalu panjang karena sedikit banyak
akan berpengaruh pada desain template




Pengen hasil karya template anda direview di o-om.com? Silahkan simak caranya

disini


Description: DMAGZ Personal Wordpress Template Rating: 5.0 Reviewer: Unknown ItemReviewed: DMAGZ Personal Wordpress Template

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 TemankuKelasHobby
A6Makan bakso
B6Makan bakso
C4Sepak bola
D5Tidur


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...


Description: Cara Membuat Tabel dalam Blog Rating: 5.0 Reviewer: Unknown ItemReviewed: Cara 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.

Description: Paradise Valley Real Estate Rating: 5.0 Reviewer: Unknown ItemReviewed: Paradise Valley Real Estate

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 :









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/AVvXsEg1oncbrD0ZzwseyBF0pAiuDaBGIL1KlSsCUtZzoVq5l0TijOWURjknrOlbMytvEb1D3eB2ThVOef0KZ7esunH5wTH-Nrv0q95XZBmsDyoyiOScNk92YMMrg2a9-k37Ho1xA8uuqIpsS4c/s800/Chicklet%20OB.png" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oncbrD0ZzwseyBF0pAiuDaBGIL1KlSsCUtZzoVq5l0TijOWURjknrOlbMytvEb1D3eB2ThVOef0KZ7esunH5wTH-Nrv0q95XZBmsDyoyiOScNk92YMMrg2a9-k37Ho1xA8uuqIpsS4c/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/AVvXsEieY1MU6XHzPBmJx3Zm11GD2VhMrll7YEAVKVTxPH6SXcMALIqIwpQ6zzbMsuqJ69iEQDr3LeyZaHr_hKlkKzwc2yITh4HntzxPyY31uZ-FvUvZq7IP-SpgXvhvy1fDAUaRqV9N6pyAUQM/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...

Description: Menampilkan Image dalam Efek Zoom Image Rating: 5.0 Reviewer: Unknown ItemReviewed: Menampilkan Image dalam Efek Zoom Image

Perbaiki Posisi Ranking di Search Engine via Automatic Backlinks

Automatic Backlinks
menawarkan suatu konsep baru untuk bertuker link yang ditujukan bagi para
Blogger (bukan platform), Webmaster dan SEO Profesional. Dengan konsep sistem link exchange yang semuanya dilakukan secara otomatis, layanan ini
benar-benar memberikana kemudahan dalam hal tukar menukar link dan mungkin cara
ini salah satu cara terbaik untuk memperbaiki posisi Web/Blog anda dimata search
Engine (SERP).








Automatic
Backlinks
yang saya ketahui bekerja berdasarkan "Link Credit", dimana
semakin banyak link yang anda tampilkan dihalaman anda, maka akan semakin banyak pula
jumlah kredit yang anda peroleh, tentu saja imbasnya anda akan semakin banyak
lagi
mendapatkan jumlah backlink. Jika anda memiliki nilai Page Ranking yang cukup tinggi,
ini tentu saja sangat menguntungkan, karena anda akan memperoleh lebih banyak
Credit tentunya. Jika nilai Credit anda tidak terlalu mencukupi, jangan kawatir..anda
dapat membeli nilai Link Credit ini lagi, dimana untuk 1 link Credit dihargai
sebesar $1 (USD) dan sistem pembayaran bisa menggunakan PayPal.








Sayang sampai saat
tulisan ini dipublish ternyata layanan ini belum mendukung untuk Platform
Blogger. Namun anda jangan khawatir, karena
AutomaticBacklinks

cukup berkerja dengan baik pada beberapa Platform diantaranya Wordpress, Joomla,
Drupal, .Net dan PHP.  Tunggu apalagi? yang penting layanan ini Gratis dan
layak dicoba :)


Description: Perbaiki Posisi Ranking di Search Engine via Automatic Backlinks Rating: 5.0 Reviewer: Unknown ItemReviewed: Perbaiki Posisi Ranking di Search Engine via Automatic Backlinks

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...


Description: Menambah Dropdown Menu dalam Horizontal Navigasi Rating: 5.0 Reviewer: Unknown ItemReviewed: Menambah Dropdown Menu dalam Horizontal Navigasi

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/AVvXsEhvysulv3Omv8Gkp5i2d6OSwTxHPyXP7wplZioHG8zq5SL4KUt5uhgfkY_bMrKrQUUVhMGdJvCIbCFd8SM89jvsMT_0wCS6PRQ16Ne8V50XlWq-w04abOyw7ohRNHfhhUjgsomzmu2n6V4/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/AVvXsEhvysulv3Omv8Gkp5i2d6OSwTxHPyXP7wplZioHG8zq5SL4KUt5uhgfkY_bMrKrQUUVhMGdJvCIbCFd8SM89jvsMT_0wCS6PRQ16Ne8V50XlWq-w04abOyw7ohRNHfhhUjgsomzmu2n6V4/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...


Description: Menambah Widget Tiga Kolom Sejajar di Atas Footer Rating: 5.0 Reviewer: Unknown ItemReviewed: Menambah Widget Tiga Kolom Sejajar di Atas Footer