Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu

Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.

memasang menu navigasi horizontal
menu navigasi horizontal bercabang

Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

cara menambahkan menu navigasi drop down bercabang
add menu navigasi



    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
   
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

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

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi &#9660;</a>                 <ul>
                    <li><a href='URL'>Sub Menu 1</a></li>
                    <li><a href='Url'>Sub Menu 2</a></li>
                    <li><a href='Url'>Sub Menu 3</a>
                   <ul>
                    <li><a href='#'>Sub Sub Menu 1</a></li>
                    <li><a href='#'>Sub Sub Menu 2</a></li>
                    <li><a href='#'>Sub Sub Menu 3</a></li>
                  </ul>
                  </li>
                  </ul>             </li>
          </ul>
        </div>



Pengaturan dan modifikasi;

1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE

2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru
                  <ul>
                    <li><a href='#'>Sub Sub Menu 1</a></li>
                    <li><a href='#'>Sub Sub Menu 2</a></li>
                    <li><a href='#'>Sub Sub Menu 3</a></li>
                  </ul>
bisa juga sobat tambahkan di item menu lainnya jika ingin.

3.  Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .

4.  Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.


Oke saya kira sudah cukup jelas dan mudah, untuk live  demo silahkan buka di sini

Selamat mencoba.

Update:

Buat sobat yang bermasalah saat memasang di elemen header cari kode berikut ini (warna merah):
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Sample Blog (Header)' type='Header'>
<b:includable id='main'>
ganti 1 menjadi 3 no menjadi yes sehingga menjadi seperti ini.
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Setelah itu pindahkan kode HTML/javascriptnya diatas atau di bawah elemen header.



Buka juga CSS 3 drop down menu navigasi yang saya pakai ini

Baca Selengkapnya →

Cara Mengganti Background Blog Dengan Gambar Sendiri

Cara Mengganti Background Blog Dengan Gambar Sendiri

Sebelumnya saya ucapkan Assalamualaikum buat sobat semua !!! Kali ini kita akan bahas Cara Mengganti Background Blog Dengan Gambar Sendiri, sebenarnya tutorial Cara Mengganti Background Blog Dengan GambarSendiri udah banyak sekali bertebaran di google,,hehehe. Tapi gk apa lah,, semoga artikel saya nangkrik di no.1 hasil pencarian,,gkgkgkgk ngarep yang gk mungkin neh,, becanda aja sob. Sebenarnya saya posting Cara Mengganti Background Blog Dengan Gambar Sendiri hanya untuk mengisi waktu luang aja. OK deh tanpa  banyak cing cong langsung aja ke TKP

Pertama-tama sobat Login di blog sobat, Pilih Template, Pilih Edit Html, Centang pada Expand Template Widget. Tekan Ctrl+F untuk memudahkan sobat mencari kode nantinya.
 http://www.deddysaputro.tk/
Berhubung setiap template berbeda-beda, sobat hanya perlu mencari kode yang mirip saja,,kalo ada yang sama ya bagus deh.. Cari kode :

body{background:

Kalo template sobat sebelumnya udah menggunakan background dengan gambar maka biasanya akan tampil Url gambarnya, seperti ini :

body{background: url(http://i1062.photobucket.com/albums/t489/fidian1/jkkkk.jpg) 

nah yang berwarna biru itu adalah Url gambar background blog sobat, sobat ganti aja urlnya dengan Url gambar baru sobat yang mau dijadikan background.
http://www.deddysaputro.tk/
Kalo template sobat sebelumnya menggunakan kode warna sebagai backgroundnya, maka akan tampil kode warnanya, seperti ini contohnya :body{background:#ded8c0; ,nah yang warna biru adalah kode warnanya sob,,kalo sobat mau ganti dengan warna lain tinggal ubah aja kodenya, sobat bisa liat kode warna lengkap Disini . Kalo sobat mau ganti dengan gambar tinggal tambah aja url gambarnya, jadi seperti ini :

body{background:#ded8c0 url(http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) 

Yang berwarna biru adalah tambahan untuk Url gambar sobat, ganti dengan url gambar sobat sendiri.
Sampe disini Background blog sudah selsai di ganti, sobat hanya tinggal mensave saja. Tetapi saya ada catatan sedikit.

Biasanya ada background yang jika kita scroll halaman sampe ke bawag]h, backgroundnya gk gerak alias tetap, nah kalo sobat mau yang kaya gitu sobat cari aja kode repeat-x; atau yang mirip, sobat ganti menjadi repeat-x top left fixed;


SAVE DAN SELESAI,
Sekian catatan kecil dari saya terkait denganCara Mengganti Background Blog Dengan Gambar Sendiri

Baca Selengkapnya →

Cara Memaksimalkan SEO di Blogger

Di bawah ini adalah tutorial lengkap bagaimana cara memaksimalkan SEO di blogger agar blog sobat lebih disayang oleh Google.

Jika blog sobat disayang Google maka blog sobat akan diberi ranking yang bagus, dan jika ranking udah bagus maka otomatis pengujung blog sobat akan meningkat.

Siapa sih yang ngga mau pengunjung blognya meningkat?

Langsung saja pada postingan ini sobat akan mempelajari beberapa hal berikut ini:

• RSS Feed
• Tag Meta Deskripsi
• Pengalihan khusus
• robots.txt
• Tag Meta Robot
• Gambar postingan
• Meta tag deskripsi postingan
• Tautan permanen
• Template Blogger

RSS Feed

Seperti halnya layanan blogging pada umumnya, blogger juga menyediakan fitur RSS feed untuk memudahkan pembaca blog kita berlangganan artikel-artikel yang kita publikasikan. Fitur ini sebenernya sangat bagus, terutama untuk menjaring pembaca. Namun di lain sisi RSS feed juga bisa berdampak buruk untuk SEO blog kita. Kenapa bisa begitu?

Seperti yang kita tahu, di zaman sekarang banyak sekali blogger-blogger pemalas yang maunya serba instan yang sering mencuri konten-konten blog milik orang lain. Nah, RSS Feed ini akhir-akhir ini sering digunakan oleh para pencuri konten sebagai jalan untuk mengambil konten-konten yang ada di blog kita tanpa harus susah-susah CTRL+C danCTRL+V.

Bayangkan sob, copy paste pun sekarang sudah pada males, sekarang mainannya serba otomatis.

Jika blog kita menjadi korban pencurian konten melalui RSS Feed maka bisa berdampak buruk bagi blog kita karena akan mengakibatkan yang namanya konten duplikat. Nah, untuk sedikit mengatasi masalah ini, kita bisa mengoptimalkan pengaturan RSS Feed yang ada di blogger.

Caranya sangat mudah sekali, sobat cukup masuk ke Dashboard > Setelan > Lainnya. Setelah itu sobat fokus pada bagian Umpan Situs

Pada bagian “Izinkan Umpan Blog” sobat pilih “Singkat”

Jika sobat memilih opsi ini sebenarnya akan kurang bagus bagi pembaca blog kita yang berlangganan menggunakan RSS, karena setiap kali kita update maka pembaca mau tidak mau harus membuka blog kita untuk membaca secara keseluruhan artikel yang kita publikasikan. Tapi mau gimana lagi. ini dilakukan untuk mencegah terjadinya duplikat konten gara-gara ulah pencuri konten.

Tag Meta Deskripsi

Salah satu fitur keren yang ada di blogger adalah fitur Tag meta. Fitur ini memungkinkan kita memasukan meta deskripsi blog tanpa harus memasukannya secara manual ke dalam template. Fitur ini sebenarnya sudah ada di blogger sejak awal tahun 2012 yang lalu, tapi mungkin masih banyak yang tidak tahu atau belum menggunakannya.

Untuk mengaktifkan fitur ini sangatlah mudah, sobat cukup masuk ke Dashboard >Setelan > Preferensi penelusuran. Setelah itu fokus pada bagian Tag meta dan klik “Edit“. Setelah itu muncul pertanyaan “Aktifkan deskripsi penelususran?” pilih Ya. Terakhir tinggal sobat masukan deskripsi blog sobat.

Jangan lupa untuk mengklik “Simpan perubahan”

Pengalihan khusus

Fitur ini berfungsi untuk mengarahkan link yang menuju ke blog kita namun link tersebut tidak benar-benar ada alias halaman 404. Saya sendiri kurang menggunkan fitur ini, tapi di situasi tertentu fitur ini bisa sangat bermanfaat.

Sebagai contoh dalam kejadian nyata, tapi mungkin jarang terjadi, kita sedang semangat-semangatnya mencari backlink, dan karena terlalu semangat kita salah menulis link URL di social bookmarking misalnya, yang seharusnya seperti ini:

http://www.deddysaputro.tk/ganteng-banget.html

kita salah nulis jadi:

http://www.deddysaputro.tk/jelek-banget.html

Nah di saat seperti inilah fitur pengalihan khusus tersebut menjadi berguna. Kita bisa mengalihkan link yang salah tulis tadi ke URL yang benar. Jadi backlink yang sudah terlanjur kita taruh di social bookmarking misalnya menjadi tidak sia-sia.

Untuk cara menggunkan fitur ini silakan sobat masuk ke Dashboard > Setelan > Preferensi penelusuran. Setelah itu fokus pada bagian Kesalahan dan pengalihan dan klik “Edit” pada Pengalihan khusus. Setelah itu tinggal sobat isi URL yg salah (Dari) dan URL yg benar(Kepada):

Jangan lupa centang “Permanen” agar link yang salah tersebut dialihkan secara permanen. Jika sudah klik Simpan terlebih dahulu dan klik Simpan perubahan.

robots.txt

Update: Custom file robots.txt ini sudah tidak bagus untuk diterapkan di tahun 2015. Baca alasannya DI SINI.

Untuk fitur robots.txt sebenarnya sudah pernah saya singgung di postingan cara mengatasi duplikat konten, tapi akan saya tulis ulang biar lengkap dan mantab.

Robots.txt itu apa sob? robots.txt adalah sebuah file text (.txt) di dalam sebuah halaman web yang berisi perintah-perintah halaman mana yang boleh di index dan mana yang tidak boleh diindex oleh spider mesin pencari. Untuk penjelasaan lebih bagus KLIK DI SINI.

Di blogger file robots.txt ini sudah otomatis ada dan bisa sobat lihat melalui URL ini:

http://namablogmu.blogspot.com/robots.txt

Penampakan file robots.txt tersebut kurang lebih seperti ini:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://namablogmu.blogspot.com/feeds/posts/default?orderby=UPDATED

Seperti yang sudah pernah saya jelaskan pada postingan saya dulu, robots.txt ini bisa kita optimalkan lebih bagus lagi untuk mencegah terjadinya duplikat konten.

Caranya masuk ke Dashboard >  Setelan > Preferensi penelusuran > Klik “Edit” pada bagian “robots.txt khusus” setelah itu akan muncul pertanyaan “Aktifkan robots.txt khusus” pilih Ya. Selanjutnya tinggal sobat masukan kode robots.txt berikut ini:

User-agent: Mediapartners-Google
Disallow: 

User-agent: Googlebot
Disallow: /search
Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0

User-agent: *
Disallow: /search


Sitemap: http://www.deddysaputro.tk/feeds/posts/default?orderby=UPDATED

Ganti http://www.deddysaputro.tk dengan URL blog sobat.

Kode robots.txt di atas bersisi perintah agar spider mesin pencari tidak mengindex halaman versi seluler yang dalam keadaan default halaman versi seluler sering ikut terindex mesin pencari dan menyebabkan duplikat konten.

Tag Meta Robot

Meta tag robot pada dasarnya fungsinya hampir sama seperti robots.txt, yaitu untuk memberitahu robot perayap halaman mana yang boleh diindex dan halaman mana ya tidak boleh. Selain itu juga ada beberapa perintah-perintah lain.

Nah fitur meta robot yang ada di blogger ini bisa kita manfaatkan untuk mengatasi duplikat konten, terutama duplikat konten yang terjadi karena halaman arsip dan pencarian.Caranya masuk ke Dashboard > Setelan > Preferensi penelusuran > Aktifkan tag header robot khusus. Selanjutnya tinggal sesuaikan seperti gambar di bawah ini:

Jangan lupa klik Simpan perubahan

Gambar Postingan

Jika sobat membuat postingan yang disertai dengan gambar maka sobat sangat disarankan untuk menggunakan fitur keren yang ada di blogger yang satu ini, yaitu fitur untuk menambahkan atribut “alt” dan “title” secara otomatis pada gambar di dalam postingan.

Caranya sangat mudah, ketika sobat memasukan gambar ke dalam postingan maka cukup klik gambarnya > klik Properties > masukan kata kunci untuk gambar tersebut:

Tag Meta Deskripsi Postingan

Dulu sebelum adanya fitur ini, banyak sekali blogger yang menggunakan sebuah kode meta tag deskripsi otomatis untuk postingan dan sampai sekarang pun masih cukup banyak yang menggunakannya.

Nah karena di blogger sudah ada fitur untuk memasukan meta deskripsi postingan secara manual, maka akan sangat keren jika sobat menggunakan fitur ini agar setiap postingan di blog sobat memilki meta deskipsi yang bervariasi.

Untuk menggunakan fitur ini pertama-tama sobat perlu mengaktifkan fitur tag meta deskripsi yang sudah dibahas di atas. Jika sudah mengaktifkannya maka setiap kali sobat menulis postingan, di bagian kanan akan ada menu tempat memasukan deskripsi postingan:

Tautan permanen

Fitur yang bisa disebut juga sebagai fitur custom permalink ini berguna bagi sobat yang mungkin ingin menembak kata kunci panjang atau bahasa kerennya long tail keyword.Secara default permalink di blogger hanya dibatasi sampai 6 kata, kurang lebih seperti ini:

http://www.deddysaputro.tk/2015/04/cara-memaksimalkan-seo-di-blogger.html

Jika lebih dari 6 kata, maka permalink akan otomatis terpotong dan hanya menampilkan 6 kata awal dari judul postingan. Nah, jika sobat menginginkan lebih dari 6 kata maka sobat bisa menggunakan fitur ini.

Caranya, saat sobat menulis postingan klik menu Tautan Permanen pada bagian kanan dan pilih Tautan Permanen Khusus, setelah itu tinggal sobat masukan permalink sepanjang yang sobat inginkan.

Template Blogger

Yang terakhir untuk memaksimalkan SEO di blogger adalah template. Pemilihan template yang bagus juga dapat membantu memaksimalkan SEO di blog sobat. Banyak sekali penyedia template blogger gratis yang bagus di luar sana, tapi sangat sedikit yang bisa dibilang SEO Friendly.

Kriteria template yang bagus untuk SEO itu seperti apa sih sob? hmm.. berhubung postingan ini sudah lumayan panjang, hampir 4jam lebih saya menulis postingan ini, jadi untuk masalah template Insya Allah akan saya bahas pada postingan selanjutnya.

Mungkin hanya segitu saja yang bisa saya tulis kali ini. kurang lebihya silakan bisa sobat tambahkan.

Baca Selengkapnya →

CARA MEMBUAT TAMPILAN POSTING LEBIH CANTIK DAN FRESH

Nah... Untuk membuat warna yang berbeda pada setiap paragraf di dalam posting, sobat blogger kudu menyisipkan kode di bawah ini SEBELUM dan SETELAH paragraf dalam mode HTML (Bukan dalam mode compuse).

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Letakkan teks atau paragraf sobat disini
</div>

Contoh :
<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Jadilah yang terdepan dalam melakukan segalanya. Lihat rekan kerja atau mitra yang mengunggah foto, memperbarui spreadsheet, atau menyempurnakan paragraf, dalam waktu nyata, dari jarak ribuan kilometer. Layanan Google Documents dapat dipakai dengan memiliki Akun Google.
</div>

Hasilnya akan terlihat seperti ini :

Jadilah yang terdepan dalam melakukan segalanya. Lihat rekan kerja atau mitra yang mengunggah foto, memperbarui spreadsheet, atau menyempurnakan paragraf, dalam waktu nyata, dari jarak ribuan kilometer. Layanan Google Documents dapat dipakai dengan memiliki Akun Google.

Kalau sobat blogger ingin menambahkan bingkai, sobat blogger tinggal menambahkan kodeborder-style: ridge; pada kode pertama. Sehingga bentuk dari kode di atas seperti ini :

<div style="background:#FFE1FF; border-style: ridge; padding:5px 8px 5px 8px;">Letakkan teks atau paragraf sobat disini</div> 


 Dan hasilnya akan terlihat seperti ini! 


Jadilah yang terdepan dalam melakukan segalanya. Lihat rekan kerja atau mitra yang mengunggah foto, memperbarui spreadsheet, atau menyempurnakan paragraf, dalam waktu nyata, dari jarak ribuan kilometer. Layanan Google Documents dapat dipakai dengan memiliki Akun Google.

Tambahan :
Untuk mengganti warna background tersebut, silahkan ganti #FFE1FF dengan kode warna yang lain. Untuk melihat kode warna silahkan klik salah satu link di bawah ini!

1. Hex Color Code Generator

Baca Selengkapnya →

Menghilangkan link pada gambar header

Link dalam pengertiannya di bidang web blog disebut sebagai tautan.  Dengan link inilah alamat satu dengan lainnya dapat terhubung, sehingga dengan sekali klik browser akan membawa kita ke suatu tujuan.  Dalam penerapannya link tidak hanya berupa text saja melainkan dapat pula berupa sebuah gambar atau juga tombol.

Link yang berupa gambar sering disebut oleh kalangan neter sebagai Banner.  Contohnya gambar yang terpasang di bagian header blog.  Bisa juga banner blog yang terpasang di bagian sidebar, biasanya banner untuk iklan yang sering kita jumpai di sidebar maupun di tempat lain yang dianggap strategis oleh pemasang iklan.  Link yang berupa tombol misalnya tombol download, ketika diklik akan menuju ke tempat penyimpanan file di internet.

Ketika sebuah gambar header blog diupload maka yang terjadi gambar tersebut mengandung link, coba amati header blog anda dekatkan mouse di atasnya jika mouse pointer berubah menjadi gambar jari tangan menunjuk itu artinya ada link yang tertanam di dalam gambar tersebut.  Blogger menerapkan itu semua bukan tanpa alasan, sudah barang tentu ada mempunyai maksud tersendiri.  Header blog di dalamnya mengandung link yang mengarah kepada halaman homepage  blog. Mungkin maksud blogger menyertakan link pada gambar header adalah sebagai navigasi bagi pengunjung yang ingin melihat tampilan halaman awal sebuah blog atau website cukup dengan mengkilk gambar header.

Di sisi lain, blog sekarang beda dengan dulu.  Sekarang sudah mulai komplit, penyedia blog sudah mencantumkan fitur navigasi.  Blogspot menyediakan widget navigasi di bawah header yaitu PageList dan LinkList. Dan jika pemilik blog mengaktifkan fitur PageList maka secara otomatis Blogspot memberikan link tab dengan nama Home atau Beranda.  Home atau Beranda adalah link yang apabila diklik akan menuju ke halaman awal blog.

Setelah navigasi tersebut diaktifkan maka fungsi link pada gambar header menjadi mubadzir, karena sudah digantikan oleh tab link dengan nama Home atau Beranda.  Selain itu gambar header yang mengandung link hanya akan mengganggu pengunjung jika sedang konsentrasi membaca artikel blog tiba-tiba halaman berganti dengan sendirinya karena tanpa sengaja mengklik gambar header.

Link gambar header bisa di-nonaktifkan dengan cara menghapus url-nya. Untuk menghapusnya agar tidak berakibat fatal, perhatikan susunan kode berikut ini:

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

Yang perlu anda lakukan adalah mengganti kode tersebut dengan kode berikut ini:

<div style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</div>

Setelah itu simpan atau save dan lihat hasilnya, jika anda melakukannya dengan benar maka hasilnya akan seperti gambar berikut:

Baca Selengkapnya →

Cara mudah membuat update tahun otomatis pada footer

Cara mudah membuat update tahun otomatis pada footer
Cara kali ini bisa diterapkan pada semua platform blog/website semisal wordpress, blogger, joomla dan sebagainya.
Karena kita tinggal menempelkan kodenya pada footer.

Selain untuk mempermanis tampilan footer, blog pun kelihatan menjadi update.
Karena kebanyakan pengunjung khususnya yang menggunakan handphone dengan tampilan satu kolom akan terus men-scroll sampai kebawah dan akhirnya akan ketemu dengan copyright dan tahun pada footer.
kurang menarik bila pada footer tersebut masih tertulis tahun 2012 padahal sekarang sudah tahun 2015
Dengan kode ini teks tahun akan selalu update otomatis.
Berikut ini cara yang mudah membuat update tahun otomatis pada footer.

Login pada blog sobat.
Pada footernya pastekan kode ini:

Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script>

Seperti yang sudah saya terapkan pada blog saya ini. :)
Semoga artikel cara mudah membuat update tahun otomatis pada footer ini bermanfaat..
Selamat mencoba..

Baca Selengkapnya →

Cara Kompres Template Blog Agar Ringan

Cara Kompres Template Blog Agar Ringan Cara Mengkompres Template Blog Agar Ringan Loadingnya Percepat Loading Blog Dengan Cara Compress Template Cara Compress CSS, HTML dan JS Template Blogger Cara Compress CSS Blog Agar Loadingnya Cepat Cara Kompres CSS, HTML dan JavaScript Template Blog Kompres CSS dan HTML Agar Loading Ringan Mengkompress CSS Dapat Mempercepat Loading Blog Cara Kompres Template Blogger Agar Ringan Cara Kompres Css, Cara Mengkompress, cara meringankan blog, tips template ringan, loading ringan. 

Mengkompres HTML template adalah salah satu cara ampuh untuk mengurangi beban loading blog anda. Seperti kita ketahui  bahwa loading blog yang berat akan membuat turunnya pageview dan menghambat naiknya trafik visitor karena tentu saja visitor tidak suka dengan blog yang loading berat. Perlu dipertimbangkan bahwa blog yang berat loadingnya dapat menyebabkan visitor kabur sebelum membaca artikel kita. Kalau sudah seperti itu maka hal ini juga memicu yang dinamakanBouncerate sehingga blog kita semakin turun peringkat disearch engine. Baca juga Cara mengatasi thumbnail gambar yang tidak muncul 

Cara mengkompres

Langkah Pertama;

Yang harus dilakukan pertama adalah login ke blogger anda dan langsung buka HTML Template blog yang ingin dikompres. Baca juga Cara agar postingan blog berada di hasil pencarian pertama google

Langkah Kedua;

Selanjutnya anda buka HTML Template blog anda, kemudian copy semua kode HTML Template anda. Untuk mempermudah maka gunakan,  Ctrl+A. Jangan lupa baca cara agar postingan blog berada di urutan teratas

Langkah Ketiga;

Kemudian masuk ke situs ini; Compres HTML dan pastekan kode HTML Template anda tadi di situs tesebut, contohnya anda dapat lihat pada penampakan  gambar dibawah ini: 

Langkah Keempat

Anda harus mencentang "Don't compress HTML head of document", lalu klik Compres HTML. Maka kode script HTML hasil kompresan akan muncul di bagian bawahnya. Kemudian copy kode tersebut dan pastekan di HTML Template anda tadi sebagai ganti kode HTML Template lama anda secara keseluruhan. Baca juga menjadi rangking 1 google dengan google adword

Langkah Terakhir Simpan Template.

Sebenarnya ada banyak layanan yang menyediakan kompres Kode HTML , silahkan sobat pilih sesuai selera dan caranya sama dengan penjelasan diatas. Berikut situs kompres tersebut: 

http://cssoptimiser.com

http://mabblog.com/cssoptimizer/compress.html

http://tools.arantius.com/css-compressor

http://iceyboard.no-ip.org/projects/css_compressor

http://www.cssdrive.com/index.php/main/csscompressor

Kata kunci terkait : Cara Kompres Template Blog Agar Ringan Cara Mengkompres Template Blog Agar Ringan Loadingnya Percepat Loading Blog Dengan Cara Compress Template Cara Compress CSS, HTML dan JS Template Blogger Cara Compress CSS Blog Agar Loadingnya Cepat Cara Kompres CSS, HTML dan JavaScript Template Blog Kompres CSS dan HTML Agar Loading Ringan Mengkompress CSS Dapat Mempercepat Loading Blog Cara Kompres Template Blogger Agar Ringan Cara Kompres Css, Cara Mengkompress, cara meringankan blog, tips template ringan, loading ringan.

Baca Selengkapnya →

Bagaimana Mengendalikan Pengeluaran Anda

Selain tekanan dari luar yang kita hadapi dari pemasaran, perasaan dan kebiasaan kita sendiri bisa turut menyebabkan pengeluaran yang berlebihan. Berikut enam saran untuk membantu agar pengeluaran Anda tetap terkendali.

1. Tahan keinginan untuk membeli seturut dorongan hati.
Apakah Anda menyukai serunya berbelanja dan mencari barang diskon? Jika demikian, Anda mungkin cenderung membeli seturut dorongan hati. Untuk melawannya, jangan terburu-buru dan pikirkanlah secara realistis konsekuensi jangka panjang dari membeli, memiliki, dan merawat barang yang Anda rencanakan untuk beli. Merenunglah sejenak dan ingat saat terakhir kali Anda membeli seturut dorongan hati yang belakangan Anda sesali. Tenangkan diri Anda untuk beberapa waktu sebelum membuat keputusan akhir.
2. Jangan belanja untuk mengubah suasana hati.
Berbelanja bisa untuk sementara menyingkirkan suasana hati yang buruk. Tetapi, sewaktu perasaan negatif muncul kembali, Anda mungkin merasakan tekanan yang lebih kuat untuk mencari kelegaan dengan berbelanja. Alih-alih berbelanja untuk memperbaiki suasana hati, cari teman-teman yang mendukung atau lakukan gerak badan, seperti berjalan kaki.
3. Jangan belanja untuk rekreasi.
Mal yang mewah telah mengubah berbelanja menjadi hiburan. Meski Anda mungkin datang ke mal atau berselancar di Internet sekadar untuk hiburan, kebanyakan dari apa yang Anda lihat dirancang untuk memicu hasrat berbelanja Anda. Berbelanjalah hanya jika memang ada yang perlu Anda beli, dan berpeganglah pada rencana Anda.
4. Hati-hati memilih teman bergaul.
Gaya hidup dan obrolan teman-teman Anda sangat memengaruhi hasrat Anda. Jika Anda royal berbelanja agar bisa sama seperti teman-teman Anda, pilihlah teman-teman yang tidak terlalu mementingkan uang dan hal materi.
5. Gunakan kartu kredit dengan bijak.
Kartu kredit membuat Anda lebih gampang membeli tanpa memedulikan konsekuensinya. Upayakan untuk membayar lunas tagihan kartu kredit tiap bulan. Ketahuilah suku bunga dan iuran kartu kredit Anda, dan bandingkan berbagai tawaran kredit untuk mencari tahu kartu yang paling terjangkau. Waspadailah kartu premium yang biaya pinjamannya lebih tinggi dan menawarkan manfaat yang tidak Anda butuhkan. Alih-alih membeli secara kredit, menabunglah untuk pembelian yang lebih besar dan bayarlah secara tunai.
6. Ketahui kondisi keuangan Anda.
Pengeluaran Anda cenderung berlebihan jika Anda tidak tahu pasti kondisi keuangan Anda. Simpan catatan terkini, dan ketahuilah seluruh kondisi keuangan Anda. Buat anggaran pengeluaran bulanan yang realistis berdasarkan pendapatan Anda dan pengeluaran sebelumnya. Catat pengeluaran Anda, dan bandingkan itu dengan anggaran Anda. Minta seorang teman tepercaya membantu Anda memahami seluk-beluk keuangan yang belum Anda ketahui

Baca Selengkapnya →