Modifikasi Template SEO Friendly Simple Slider (5 Warna)

pada tanggal

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)
<b:widget id='Label1' locked='true' title='Labels' type='Label'>
  • 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 <!-- Lenu START --> pada Ctrl+f untuk memudahkan pencarian)
    <!-- Lenu START -->
    <div class='second-row'> <b:section class='menuatas' id='menuatas' maxwidgets='1' showaddelement='no'/></div>
    <!-- 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
<div id="RickyMenu">
       <div id="Rickybox">
      <ul id="punch">
        <li><a href="URL HOMEPAGE">Home</a></li>
        <li>
          <a href="#">Sample Page</a>
          <ul>
            <li>
              <a href="#">Sub Page #1</a>
              <ul>
                <li><a href="#">Sub Sub Page #1</a></li>
                <li><a href="#">Sub Sub Page #2</a></li>
                <li><a href="#">Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Page #2</a></li>
            <li><a href="#">Sub Page #3</a></li>
            <li><a href="#">Sub Page #4</a></li>
            <li><a href="#">Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Post</a></li>
        <li><a href="#">Blog Page</a></li>
      </ul>
    </div>
  </div>
  • 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)
<ul class='ui-tabs-nav'> 
        <li class='ui-tabs-nav-item ui-tabs-selectdd' id='nav-fragment-1'><a href='#fragment-1'><img alt='' src='http://2.bp.blogspot.com/-rQprxEJLjdk/T8W9Loi8ZwI/AAAAAAAABuw/H9jeLODSyqs/s000/image1-small.jpg'/></a></li> 
        <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='' src='http://3.bp.blogspot.com/-0QoTxQeo4OY/T8W9L5DDw-I/AAAAAAAABu4/AHry-rQzqZ8/s000/image2-small.jpg'/></a></li> 
        <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='' src='http://1.bp.blogspot.com/-yt10AkQPYeI/T8W9MKmKJtI/AAAAAAAABvA/E3FUOj3qos8/s000/image3-small.jpg'/></a></li> 
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='' src='http://1.bp.blogspot.com/-JVJzIv4OYRQ/T8W9MeZAVuI/AAAAAAAABvI/YkpV3QXVySQ/s000/image4-small.jpg'/></a></li>   
    </ul> 
  • 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)
<!-- First Content --> 
    <div class='ui-tabs-panel' id='fragment-1' style=''> 
        <img alt='' src='http://1.bp.blogspot.com/-23bDDUTGyHo/T8W9MsTSX0I/AAAAAAAABvQ/yyZq0F3rbl4/s000/1.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 1 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div>
    <!-- Second Content --> 
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> 
        <img alt='' src='http://1.bp.blogspot.com/-W8iolvCCqzU/T8W9MzfsSeI/AAAAAAAABvY/JLnSEkmJWms/s000/2.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 2 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div> 
    <!-- Third Content --> 
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> 
        <img alt='' src='http://3.bp.blogspot.com/-262uSol16k0/T8W9NDaR2uI/AAAAAAAABvg/MlUM_DRob2E/s000/3.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 3 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div> 
   <!-- Fourth Content --> 
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> 
        <img alt='' src='http://3.bp.blogspot.com/-RH8N03tSKsk/T8W9NzFMq6I/AAAAAAAABvo/BRuxPGLd0CI/s000/4.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 4 di sini</a></h2> 
        <p>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</p> 
  • 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.
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  • Ubah kode h2 menjadi h3 sehingga akan terlihat seperti di bawah
  <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'><data:title/></h3>
  </b:if>
  • 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
<div id='content'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured'> 
   <ul class='ui-tabs-nav'> 
        <li class='ui-tabs-nav-item ui-tabs-selectdd' id='nav-fragment-1'><a href='#fragment-1'><img alt='' src='http://2.bp.blogspot.com/-rQprxEJLjdk/T8W9Loi8ZwI/AAAAAAAABuw/H9jeLODSyqs/s000/image1-small.jpg'/></a></li> 
        <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='' src='http://3.bp.blogspot.com/-0QoTxQeo4OY/T8W9L5DDw-I/AAAAAAAABu4/AHry-rQzqZ8/s000/image2-small.jpg'/></a></li> 
        <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='' src='http://1.bp.blogspot.com/-yt10AkQPYeI/T8W9MKmKJtI/AAAAAAAABvA/E3FUOj3qos8/s000/image3-small.jpg'/></a></li> 
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='' src='http://1.bp.blogspot.com/-JVJzIv4OYRQ/T8W9MeZAVuI/AAAAAAAABvI/YkpV3QXVySQ/s000/image4-small.jpg'/></a></li>   
    </ul> 
    <!-- First Content --> 
    <div class='ui-tabs-panel' id='fragment-1' style=''> 
        <img alt='' src='http://1.bp.blogspot.com/-23bDDUTGyHo/T8W9MsTSX0I/AAAAAAAABvQ/yyZq0F3rbl4/s000/1.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 1 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div>
    <!-- Second Content --> 
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> 
        <img alt='' src='http://1.bp.blogspot.com/-W8iolvCCqzU/T8W9MzfsSeI/AAAAAAAABvY/JLnSEkmJWms/s000/2.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 2 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div> 
    <!-- Third Content --> 
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> 
        <img alt='' src='http://3.bp.blogspot.com/-262uSol16k0/T8W9NDaR2uI/AAAAAAAABvg/MlUM_DRob2E/s000/3.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 3 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div> 
   <!-- Fourth Content --> 
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> 
        <img alt='' src='http://3.bp.blogspot.com/-RH8N03tSKsk/T8W9NzFMq6I/AAAAAAAABvo/BRuxPGLd0CI/s000/4.jpg'/> 
        <div class='info'> 
        <h2><a href='#'>Masukkan Judul Artikel 4 di sini</a></h2> 
        <p>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</p> 
        </div> 
    </div> 
</div>
</b:if>
  • 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....
 <div class='sidebar box-subscribe'>
<div class='box-interior'>
<div class='box-interior-wrapper'>
<ul>
<li class='rss'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='rss feed'>Get the lastest via RSS</a></li>
<li class='twitter'><a class='icon-twitter' href='http://www.twitter.com/YOUR_USERNAME'>Want to know my tweets?</a></li>
<li class='facebook'><a class='icon-facebook' href='http://www.facebook.com/YOUR_USERNAME'>Join me at Facebook</a></li>
</ul>
</div>
</div>
</div>
  • 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

Komentar

Posting Komentar