I Love You: Modifikasi Template SEO Friendly Simple Slider (5 Warna)

Modifikasi Template SEO Friendly Simple Slider (5 Warna)

Artikel ini dibuat sebagai kelanjutan dari template SEO friendly Simple Slider. Dalam template ini, tepat di bawah header digunakan label karena sangat membantu Google untuk mengenali struktur website. Hanya saja jika sebuah blog menggunakan terlalu banyak label, tentu saja widget ini terlihat tidak elok lagi.

Tutorial template ini terbagi menjadi 6 bagian:

1. Menghapus widget Label

2. Memasang menu horizontal di bawah header

3. Mengganti gambar dan keterangan pada widget slider
4. Mengganti heading widget dari H2 menjadi H3
5. Menghapus Slider
6. Modifikasi atau Hapus Twitter, Facebook, dan RSS

#1 Menghapus Widget Label

Masuk ke Menu Template dan pilih Edit HTML
Di atas kolom Edit HTML ada checkbox Expand Template Widget silahkan dicentang
Jika sudah silahkan cari kode di bawah ini (gunakan Ctrl f pada browser Mozilla untuk mempermudah menemukan kode)

Ganti nilai true dengan false, setelah itu klik Simpan Template
Sekarang masuk ke menu Tata Letak untuk mengatur layout widget.
Di bawah header anda akan melihat widget Labels. Sekarang klik Edit pada widget tersebut.
Akan muncul jendela baru untuk widget ini. Pada bagian bawah jendela baru ini dan klik Hapus.
Kembali ke Edit HTML lalu centang expand widget template dan cari kode di bawah kemudian hapus. (masukkan pada Ctrl+f untuk memudahkan pencarian)

< div class='second-row'>

< !-- Menu END -->Jika sudah silahkan klik SIMPAN TEMPLATE. Sekarang widget Labels ini sudah hilang. Silahkan pasang widget apa saja yang anda inginkan di bawah header. Kalau punya HTML menu horizontal bisa juga ditaruh sebagai pengganti Labels tadi.

#2 Memasang Menu Horizontal Di Bawah Header

Kalau saudara belum punya menu horizontal sendiri, bisa memasang menu yang saya buat berikut ini.

Buka Edit HTML, lalu cari dengan Ctrl f kode /* CONTENT */
Jika sudah silahkan paste tepat di atasnya kode di bawah ini:

#RickyMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
#Rickybox {
    width: 875px;
    float: left;
    margin: 0;
    padding: 0;
}

#punch {
    margin: 0;
    padding: 0;
}
#punch ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
    color: warna2;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
    background: warna2;
    color: warna1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
    background: warna1;
    width: 150px;
    color: warna2;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
    background: warna2;
    color: warna1;
    padding: 7px 10px;
}
#punch li {
    float: left;
    padding: 0;
}
#punch li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#punch li ul a {
    width: 140px;
}
#punch li ul ul {
    margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
    left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
    left: auto;
}
#punch li:hover, #punch li.sfhover {
    position: static;
}

Jika sudah, maka silahkan ganti warna1 dan warna2 dengan kode warna di bawah ini

Slider Hitam
warna1 = #555555
warna2 = #FFFFFF

Slider Biru
warna1 = #66bbdd
warna2 = #004661

Slider Hijau
warna1 = #38761d
warna2 = #FFFFFF

Slider Abu-abu
warna1 = #d4d4d4
warna2 = #555555

Slider Kuning
warna1 = #ffd966
warna2 = #d4812a

Kemudian klik Simpan Template
Setelah itu buka menu Tata Letak atau Layout
Klik Tambah Gadget di bagian bawah header.
Pilih widget HTML/Javascript
Masukkan kode di bawah ini ke dalam kotak HTML dan biarkan nama widget kosong

Home



          Sample Page




              Sub Page #1



Sub Sub Page #1


Sub Sub Page #2


Sub Sub Page #3






Sub Page #2


Sub Page #3


Sub Page #4


Sub Page #5






Sample Post


Blog Page

Silahkan Edit HTML di atas dengan memasukkan link dan anchor text yang anda inginkan lalu klik SIMPAN

#3 Mengganti Gambar dan Keterangan pada Slider

Silahkan masuk ke Template bagian Edit HTML
Silahkan centang Expand Template Widget
Pada slider ada gambar besar dan gambar kecil, untuk mengganti gambar kecil silahkan cari kode berikut dan ganti URL gambar yang berwarna merah (Pastikan Gambar Pengganti berukuran 80px X 50px)

Lalu untuk mengganti gambar besar beserta judul dan keterangan, tepat di bawah kode sebelumnya anda akan menemukan kode berikut. Silahkan ubah URL gambar yang berawarna merah; ganti Judul Gambar yang berwarna biru; ganti juga Keterangan Gambar yang berwarna Hijau. Terakhir, masukkan link artikel pada tanda # di dalam HTML link (Pastikan Gambar pengganti berukuran 450px X 250px)

Masukkan Judul Artikel 1 di sini

        Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda













Masukkan Judul Artikel 2 di sini

        Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda













Masukkan Judul Artikel 3 di sini</a>

        Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda













Masukkan Judul Artikel 4 di sini

        Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda

Setelah selesai silahkan klik Simpan Template,dan slider anda sudah selesai diedit

#4 Mengganti Heading Widget Dari H2 menjadi H3

Ini bisa anda lakukan jika widget anda terlalu banyak dan dikuatirkan akan mengganggu persentase kata kunci pada heading H2 yang ditampilkan di artikel. Bagaimana cara menggantinya? Mudah saja....

Masuk ke dalam Template dan pilih Edit HTML
Centang Expand Widget Template
Gunakan Ctrl-F untuk mencari nama Widget yang ingin diubah heading tagnya. Jika widget itu bernama "STATISTIK BLOG" maka ketik seperti itu pada kotak pencarian browser Ctrl-F tadi.
Di bawah nama widget tersebut anda akan menemukan kode di bawah.

<h2 class='title'></h2>

Ubah kode h2 menjadi h3 sehingga akan terlihat seperti di bawah

<h3 class='title'></h3>

Jika sudah mengubah semua nama widget yang dikehendaki silahkan klik Simpan Template.
Lebih jelasnya lihat gambar di bawah.

Ini akan membuat penekanan pada poin h2 menjadi lebih kuat di mata Googlebot.

#5 Menghapus Slider

Beberapa rekan blogger rupanya menyukai template yang sederhana saja dan ingin slider dari template ini dihapus. Baiklah ikuti prosedur sederhana di bawah ini....

Masuk ke Template > Edit HTML
Klik untuk mencentang Edit Widget Template
Cari dan hapus kode berwarna merah. Hati-hati, jangan sampai kode berwarna hijau ikut terhapus

Klik Simpan Template dan slider akan lenyap dari Template anda.

6. Modifikasi atau Hapus Twitter, Facebook, dan RSS

Masuk ke akun blogger anda
Pilih MENU TEMPLATE lalu EDIT HTML
Aktifkan/centang EXPAND TEMPLATE WIDGET
Cari kode di bawah ini....

Get the lastest via RSS

Want to know my tweets?

Join me at Facebook

Jika ingin digunakan, maka edit yang berwarna biru sesuai URL akun twitter atau facebook anda
Jika tidak ingin digunakan, maka HAPUS SEMUA kode yang ada di atas
Setelah itu simpan perubahan