Membuat Menu Vertikal Pelangi Di Blogspot

Membuat Menu Vertikal Pelangi Di Blogspot adalah menu tegak yang biasa dipakai di blogger akan tetapi menampilkan tampilan yang berwarna-warni. Sebenarnya membuat menu pelangi di blogspot sangat mudah sekali. Yuk membuat menu pelangi di blog kita!

Sebenarnya kelebihan dari menu vertikal pelangi di blog ini adalah untuk menarik pengunjung dengan warna-warna pelangi untuk menjelajahi isi blog kita. Benar bukan?

Dalam membuat menu pelangi di blogspot kita hanya membutuhkan kode CSS dan HTML sebagai kunci utamanya. Dengan cara ini kemungkinan penggunaan gambar sebagai background untuk membuat menu juga bisa kita lakukan.

Sejuta Trik Blogger berharap blog ini tidak seperti kelemahan pelangi. Yaitu bentuknya cantik tapi cepat menghilang. Wah jangan sampai ya! Kalau itu terjadi, saya hanya bilang TERLALU!ha ha ha. Untuk yang sudah master CSS mohon dibetulkan jika saya keliru dalam kodenya!

Baik langsung saja kita membuatnya.

A. Pada bagian EDIT HTML (Design) kita akan taruh kode CSS di bawah ini :

Untuk CSSnya kita hanya menambahkan "request" warna untuk menjadikannya pelangi. Kodenya adalah sebagai berikut:

#leftnav {
width: 200px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #12366A;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;
color: #000;
}

#leftnav a.request

{
color: #12366A;
background-color: #F5A9A9;
}






#leftnav a:hover, #leftnav a.request2:hover
{
background-color: #FE9A2E;
color: #000;
}
#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}







#leftnav a:hover, #leftnav a.request3:hover
{
background-color: #F4FA58;
color: #000;
}
#leftnav a.request3
{
color: #12366A;
background-color: #F3F781;
}






#leftnav a:hover, #leftnav a.request4:hover
{
background-color: #ACFA58;
color: #000;
}
#leftnav a.request4
{
color: #12366A;
background-color: #ACFA58;
}





#leftnav a:hover, #leftnav a.request5:hover
{
background-color: #58FA58;
color: #000;
}
#leftnav a.request5
{
color: #12366A;
background-color: #A9F5A9;
}

Keterangan :

1) background-color: #12366A;  (Warna Kepala Menu)
2) width: 200px; (Lebar kotak)
3) font-family: Arial, Helvetica, sans-serif; : (Jenis Huruf)
4) 1 sampai 5 adalah menu 1 sampai 5
5) 

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;

dan seterusnya adalah warna yang tampil

6)

#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}

adalah warna perubahan

7) Selanjutnya edit sendiri ya? Jika butuh kode warna silakan kunjungi KODE WARNA HTML. Atau jika menemukan kode dan tidak tahu warnanya silakan gunakan tool PARSE KODE WARNA. Tinggal masukkan kodenya kemudian enter!

8) Paste kode di atas di atas ]]></b:skin>

9) Warna hover paling akhir mempengaruhi perubahan pada kepala menu vertikal tersebut. Jadi apabila warna perubahan atau hover paling akhir berwarna hijau, maka kepala menu vertikal akan berubah hijau pula.

10) Untuk menambah link silakan tambah ke request 6, dan seterusnya.

B. Jika sudah masukkan kode HTML di Add Widget seperti biasa

<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request2" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request3" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request4" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request5" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>

Happy Blogging! by. Sejuta Trik Blogger

Nah, sekarang sudah jelas kan cara membuat menu vertikal pelangi di blogspot? Semoga trik sederhana ini membantu sahabat semua.

Demo :

• Home
• Request a Quote
• Request a Quote
• Request a Quote
• Request a Quote
• Request a Quote

Cara Compress Blogspot Yang Benar

Cara Compress Blogspot Yang Benar menurut Sejuta Trik Blogger adalah suatu cara optimasi blogspot menggunakan alat-alat website baik itu software (ofline) ataupun situs penyedia jasa compress (online) dengan maksud untuk mempercepat loading atau muat secara utuh suatu blog.

Di dalam SEO tentunya kecepatan atau loding suatu blog atau website menjadi pertimbangan bagi search engine agar tampil di posisi utama hasil pencarian. Memang saat blog kita lama memuat secara penuh juga akan membuat pengunjung blog kita kabur karena jengkel dengan loading blog yang sangat lama. Nah sahabat tidak ingin semua itu terjadi kan?

Setelah mondar-mandir di mbah google ternyata tutorial yang disajikan semuanya asal-asalan. Kenapa saya bilang asal-asalan, karena tidak mementingkan keselamatan dari blog pengunjung. (Mohon maaf jika kata-kata saya ini menyinggung blogger lain).

Saya sempat emosi, dikarenakan saya sudah percaya 100% eh ternyata setelah dipraktekkan blog menjadi rusak alias kurang sesuai harapan. Tapi tidak apa-apa dengan begitu saya jadi semangat menulis artikel ini. Bagi sahabat yang sudah mengalami kejadian seperti itu, saya harap setelah membaca artikel Cara Compress blogspot yang benar ini, kerusakan tidak terjadi lagi. Dan tujuan untuk mengkompress blogspot untuk mempercepat loading blogspot sesuai harapan.

Mari kita bahas dari langkah-langkahnya. Sebelum memulai kompresi blogspot diharapkan membaca ini :

a. Element Blogspot
Element Blogspot penyusun template kurang lebih ada tiga (3) pilar utama yaitu Cascading Style Sheet (CSS), Java Script, dan HTML.
b. Dari ketiga (3) macam element tadi harus dikompresi tersendiri.
c. Perhatian! Jangan mengcopy seluruh kode mulai dari <b:skin><![CDATA[ hingga ]]></b:skin> secara total dan mengcompress nya di tool compressor.
d. Backup dulu Template Sahabat sebelum melakukan kompresi
e. Kesabaran dan Ketelitian
f. Berdo'a

Jika dirasa sudah paham dan dilakukan, kita mulai dari CSS

1. Cascading Style Sheet (CSS)

Untuk kode CSS biasanya ditunjukkan/ dimulai dengan tanda bintang (*), Dot (.) dan Pagar (#). Untuk melakukan kompresi, Silakan copy semua kode yang ditunjukkan dengan tanda di atas. Jangan Centang satupun tool CSS Compressor. Dan pastikan hanya Kode CSS yang dimasukkan. Tool yang digunakan untuk mengkompress CSS Blogspot yaitu CSS Compressor.

Jika sudah, Copy paste dan Klik Compress.

TIPS
1) Untuk CSS sebenarnya dengan cara manual sudah bisa yaitu menghapus spasi dan enter di setiap kode CSS. Contoh :

#header-wrapper{

width:940px;

margin:10px auto;

padding:10px 0;

}

Menjadi :

#header-wrapper{width:940px;margin:10px auto;padding:10px 0;}        dan seterusnya. Hasinya pun hanya sekitar 2-5 Kb saja. Apakah kamu kurang kerjaan? he...he..

2) Jangan gunakan background gambar di bagian .body { url  kalaupun ada, ukuran gambar kira-kira 15-25 Kb saja dan jangan terlalu mencolok.

3) Usahakan jangan ada CSS yang ganda, selain eror juga menambah berat loading

2. Java Script atau Javascript code

Didalam javascrit juga harus memperhatikan kode javascript yaitu dimulai dengan tanda <script type='text/javascript'> atau <script> bisa juga <script scr='alamat js.'>. Untuk mengkompres javascript kita memerlukan tool yaitu yang bernama Javascript Compressor. Pastikan hanya kode javascript yang dimasukkan! Setelah itu compress.

TIPS
1) Untuk melakukan commpres javascript yang benar jangan compres memua kode, Hanya kode didalamnya saja yaitu kode yang diapit antara <script type='text/javascript'> atau <script> kode javasript yang dicompress </script> atau //]]>
2) Usahakan jangan menaruh javascript dari tempat hosting lain. Ini akan membuat loading berjalan lama.

3. HTML

Seperti halnya langkah Mengkompres CSS. Penggunaan backdash dan spasi dalam html blog akan membuat loading lama. Jadi disarankan penggunaan backdash dan spasi yang sewajarnya. Tool yang digunakan adalah HTML Kompressor

TIPS
1) Penggunaan backdash dan spasi di HTML Blog juga berpengaruh pada loading dan tampilan blogspot. Penggunaan backdash dan spasi biasanya digunakan sebagai batas antara element. Biasanya penggunaan paling banyak ada di bagian komentar Blogspot. Maka dari itu tampilan komentar mengandung rongga atau spasi ke bawah yang lebar.
2) Hapus di bagian yang menurut sahabat banyak menggandung lebar ke bawah yang tidak penting.

Tips lain berkaitan dengan Cara Compress Blogspot Yang Benar

* Upload gambar yang ukuran tidak terlalu besar

* Kurangi penggunaan flash yang berat

* Isi widget yang tidak terlalu banyak penggunaan javascript

* Hilangkan widget-widget yang sekiranya tidak bermanfaat seperti jam dll

* Tempatkan widget-widget yang memudahkan pengunjung menelusuri isi blog kita

* Jangan menampilkan Posting di halaman depan lebih dari 5 posting (solusinya tampilkan hanya judul saja)

* Jangan menggunakan emotion yang berlebihan pada kotak komentar

* Verifikasi kata pada kotak komentar

* Memasang auto musik dapat memberatkan blog

* Jangan menggunakan Jquery lebih dari 4 macam dalam 1 blog

* Compress setiap gambar sebelum diupload ke tempat hosting menggunakan Software Fast Photo Resizer 

Sekiranya itu saja yang sejuta trik blogger share tentang Cara Compress Blogspot Yang Benar. Mudah-mudahan artikel ini bermanfaat bagi pengunjung setia blog ini. Akhir kata, ayo semangat blogger Indonesia!

Image loading by : alexander-zulkarnain.blogspot.com

Happy Blogging! by. Sejuta Trik Blogger

Google Pagerank Checker Tools

Google Pagerank Checker Tools adalah alat online untuk mengetahui tingkat Pagerank Google yang selalu update setidaknya paling cepat setiap triwulan sekali. Nah untuk memudahkan mengecek Google Pagerank di blog sobat gunakan Google pagerank checker tools di bawah ini.

Cara penggunaan Google Pagerank Checker Tools :

1. Klik kanan setiap link yang dipilih kemudian open new tab

2. Sahabat diminta untuk memasukkan link homepage di kotak url setiap alamat Google pagerank checker tools tersebut. 

3. Tunggu beberapa saat dan kemudian akan terlihat hasilnya.

Baik langsung saja pilih dari salah satu Google pagerank checker tools di bawah ini

http://mypagerank.net/service_pagerankbutton_index

http://www.prchecker.info/

http://www.seocentro.com/tools/search-engines/pagerank.html

http://pagerank.databot.nl/

http://www.smallseotools.com/google-pagerank-checker/

http://www.page-rank.pl/

http://pagerank.my-addr.com/

http://www.masspagerank.com/

http://www.whatsmypagerank.com/pagerank-checker.php

Untuk lebih lengkapnya akan selalu saya update agar memudahkan para sahabat SEO blogger mengetahui tingkat pagerank menggunakan tools ini. Akhir kata semoga Google Pagerank Tools ini bermanfaat untuk blogger semua.

Happy Blogging! by. Sejuta Trik Blogger

Tips Ganti-ganti Template

Bagi sebagian blogger seperti saya ganti-ganti template adalah hal yang menyenangkan. Akan tetapi masalah yang timbul dari ganti-ganti template adalah posisi serp yang tidak menentu. Belum lagi kalau kata kunci yang kita bidik sudah menjadi black list google. Seperti blog ini, nah bagi teman-teman yang sering ganti-ganti template, mulai sekarang berhentilah.

Seperti blog ini sudah berganti template sebanyak 7 kali. Dengan begitu kata kunci yang saya bidik dulu pada posisi pertama, sekarang merosot entah dimana. Apa mungkin karena update alogaritma atau bagaimana yang jelas ganti-ganti template sungguh sangat merugikan blog itu sendiri.

Nah untuk sobat yang biasa ganti-ganti template seperti saya. Sejuta trik blogger ada tips ringan yang bisa mengurungkan niat sobat-sobat untuk mengganti template dengan cara menggunakan fitur blogger yang baru.

Ok langsung saja kita view blog kita dengan tampilan bawaan blogger tapi kita tidak mengganti template blog. Wah-wah-wah emang bisa? Emmn bagi sobat yang belum tahu, yuk lihat gambarnya dulu.

1. Classic

2. Flipcard

3. Magazine

4. Mosaic

5. Sidebar

6. Snapsot

7. Timeslide

Dari pada kita ganti-ganti template, kita gunakan saja fitur baru google yaitu dinamic view. Dalam fitur barunya itu kita tidak mengganti template hanya saja kita dapat memilih layout yang kita inginkan. Memang baru sebatas 7 macam. Saya rasa sudah cukup mengobati penasaran kita untuk gonta-ganti template blogspot.

Nah untuk menjalankannya kita hanya menaruh view di belakang blog kita. Contoh

http://sejutatrik.blogspot.com/view

Dengan begitu kita bisa melihat tampilan yang menarik dari layanan blogger tersebut. Nah mudah-mudahan tips ganti-ganti template menggunakan dinamic view ini bisa mengobati rasa penasaran kita dalam ganti-ganti template.

Happy Blogging! by. Sejuta Trik Blogger