Cara Melakukan Edit pada Template Slider

By On 16:02 , ,
Artikel ini saya buat untuk keperluan mengedit daripada template yang sudah pernah saya bagikan sebelumnya. Ada 2 template yang sudah saya bagikan yaitu SIMPLE BLUE LINE TEPLATE dan SLIDER TEMPLATE.. Untuk mengedit keduanya sama saja. Karena dasar kode kedua template tersebut ialah sama, yang membedakan hanyalah bentuk desainnya saja.

Langsung saja kita menuju point pertama yaitu bagaimana untuk mengubah gambar dan keterangan pada slider..

1. Mengubah Gambar dan Keterangan pada Slider

  • Masuk ke dashboard blogger anda
  • Pilih menu TEMPLATE, lalu pilih EDIT HTML
  • Di dalam slider ada 2 model gambar. Gambar yang pertama adalah gambar yang kecil dan yang kedua adalah gambar yang besar. Kita akan mengganti gambar yang kecil terlebih dahulu.. 
  • Anda lihat pada kode yang saya beri warna merah di bawah ini. Silahkan ganti dengan link gambar anda. Jumlahnya ada 4, jadi anda urutkan saja mulai dari yang pertama sampai dengan yang keempat. (Gambar pengganti haruslah berukuran 80px X 50px)
Untuk memudahkan, silahkan gunakan CTRL + F dan cari kode "<ul class='ui-tabs-nav'>"  

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJyFf0wG45q_ShV6QeMTYpTuqv5C6q1vlKKd71ossgpfbrshlxYxfT-qdTkyEoU5ERy5BfYxCRtR3nNZkhFItTHih25VSPnA9iuhjienW7Te24-Cu4TyLUBYKAtUA5sEjWjrwrLwrsUmD5/s0/image1-small.jpg'/></a></li>  
        <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5L4pfmFC_lMMy53cVk5NL67uTx1LU2lbtEISOLQvxNwfzhsjDf-xJ45wgqvtfoLJmR6XAsD1BbcFMEw2pYArE9VFHIAhQsaK7VK0QSszRXRS53LWW8PMLR0aSv89z8zcnVs0uRXhxAfU/s0/image2-small.jpg'/></a></li>  
        <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIA86Ioc2V8Zsp3Kgs1wNjSSUwzj2B7LgZkPZjP9IZHrw2kIGbuPPeMBDkORoZk6zXpt210Z7A-LLvQA6Xcv7D3G6wcFnu2E4rkJg5XF9qRdoLZZZeAI8rHc1YALfDITz0Sg14BTkykkj5/s0/image3-small.jpg'/></a></li>  
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwYVt79mRSbMJipMQtrQ7ZzjYq3hm21Of0Dsekp8X0dCWOx-f3h2SvQmOljNqRKJLD7R1x-MNUiwVdh1VE5iL3U95fiG8oj2WQW2UHgm3kzlfGhcqE-2BZpcs5Q7QWNVKiRkH96SjJRJF/s0/image4-small.jpg'/></a></li>    
    </ul>


  • Setelah itu tinggal mengubah gambar yang besar beserta judul artikel dan keterangannya. Caranya hampir sama dengan yang di atas.. Silahkan ganti kode yang berwarna merah dengan URL gambar anda, lalu ganti kode berwarna biru dengan judul artikel yang anda inginkan dan terakhir ganti kode berwarna hijau dengan keterangan dari artikel tersebut..
  • Jumlah keseluruhannya ada 4, jadi urutkan saja mulai dari yang pertama sampai dengan yang keempat. (Gambar pengganti haruslah berukuran 450px X 250px)

  • Silahkan pilih menu TEMPLATE lalu pilih EDIT HTML
  • Cari kode <!-- First Content --> dengan menggunakan CTRL + F
  • Nantinya akan ketemu barisan kode seperti di bawah.. Silahkan diganti sesuai petunjuk di atas.
<!-- First Content -->  
    <div class='ui-tabs-panel' id='fragment-1' style=''>  
        <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9IWzag6oIM4qftD7djMVsVD6d5jXDs5WXbkTQe5ULy0D0V27DF-4Wi5j63viLDFml8cPMZ_bcnkxsw0x9ML3FF7awciSr-RjjQ3BIflt7NdGSfpmlqjICGm2WnqhQe9NmmQkjGEuaD5z/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpPcwXecsIn0ch89brLlJ1it5KuYNkNjy-_pirgpg0ZJsuSMQX0AciBinYsvYDeKVUj3FbkMBToFksIszuvjLSJTYdG2TOTm8iHZV-A_GGF50DsOlIUsOj-LzhdwCdAFfMgqoUJ52PBOb/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcobfZ0KLEKQHJ_uej_CrL0mrqYw7fopoUNe7IuIx7r39oQROplgCXfYmFTOkTdDZKlDCQ5GKv3zKh5noJ0AI4agq75Cynb-JZkk8lSAzwjICgNEz-apVvCkFesnoQqzCS5pmh013O4Vd2/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutWMGxS06MAy47C4wWQIKOOM7fMB6joq4LQiGgYSwJk40fDkpeiysTeNhK7w7EbBNAToMYUZQOJ5ZJk_tSIV9ERFS1G7_-tB-Hhem19hcjEhGFMF7VLJxev4ArTOM1-5iw2oxM7iFi5mf/s0/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>


  • SIMPAN TEMPLATE anda dan lihat hasilnya.

2. Cara Menghapus Slidernya

Jika anda merasa kurang nyaman dengan slider yang ada pada template yang saya berikan, anda bisa menghapusnya. Silahkan perhatikan langkah berikut :

  • Masuk ke dashboard blogger anda
  • Pilih menu TEMPLATE lalu pilih EDIT HTML
  • Cari kode <div id='content'> dengan menggunakan CTRL + F
  • Nantinya akan muncul sebaris kode dengan 2 variasi warna.. HAPUS KODE YANG BERWARNA MERAH SAJA !! Untuk yang HIJAU jangan di hapus..
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJyFf0wG45q_ShV6QeMTYpTuqv5C6q1vlKKd71ossgpfbrshlxYxfT-qdTkyEoU5ERy5BfYxCRtR3nNZkhFItTHih25VSPnA9iuhjienW7Te24-Cu4TyLUBYKAtUA5sEjWjrwrLwrsUmD5/s0/image1-small.jpg'/></a></li>  
        <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5L4pfmFC_lMMy53cVk5NL67uTx1LU2lbtEISOLQvxNwfzhsjDf-xJ45wgqvtfoLJmR6XAsD1BbcFMEw2pYArE9VFHIAhQsaK7VK0QSszRXRS53LWW8PMLR0aSv89z8zcnVs0uRXhxAfU/s0/image2-small.jpg'/></a></li>  
        <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIA86Ioc2V8Zsp3Kgs1wNjSSUwzj2B7LgZkPZjP9IZHrw2kIGbuPPeMBDkORoZk6zXpt210Z7A-LLvQA6Xcv7D3G6wcFnu2E4rkJg5XF9qRdoLZZZeAI8rHc1YALfDITz0Sg14BTkykkj5/s0/image3-small.jpg'/></a></li>  
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwYVt79mRSbMJipMQtrQ7ZzjYq3hm21Of0Dsekp8X0dCWOx-f3h2SvQmOljNqRKJLD7R1x-MNUiwVdh1VE5iL3U95fiG8oj2WQW2UHgm3kzlfGhcqE-2BZpcs5Q7QWNVKiRkH96SjJRJF/s0/image4-small.jpg'/></a></li>    
    </ul>  
    <!-- First Content -->  
    <div class='ui-tabs-panel' id='fragment-1' style=''>  
        <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9IWzag6oIM4qftD7djMVsVD6d5jXDs5WXbkTQe5ULy0D0V27DF-4Wi5j63viLDFml8cPMZ_bcnkxsw0x9ML3FF7awciSr-RjjQ3BIflt7NdGSfpmlqjICGm2WnqhQe9NmmQkjGEuaD5z/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpPcwXecsIn0ch89brLlJ1it5KuYNkNjy-_pirgpg0ZJsuSMQX0AciBinYsvYDeKVUj3FbkMBToFksIszuvjLSJTYdG2TOTm8iHZV-A_GGF50DsOlIUsOj-LzhdwCdAFfMgqoUJ52PBOb/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcobfZ0KLEKQHJ_uej_CrL0mrqYw7fopoUNe7IuIx7r39oQROplgCXfYmFTOkTdDZKlDCQ5GKv3zKh5noJ0AI4agq75Cynb-JZkk8lSAzwjICgNEz-apVvCkFesnoQqzCS5pmh013O4Vd2/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutWMGxS06MAy47C4wWQIKOOM7fMB6joq4LQiGgYSwJk40fDkpeiysTeNhK7w7EbBNAToMYUZQOJ5ZJk_tSIV9ERFS1G7_-tB-Hhem19hcjEhGFMF7VLJxev4ArTOM1-5iw2oxM7iFi5mf/s0/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>


  • SIMPAN TEMPLATE anda dan lihat hasilnya.

3. Setting Tombol Social Media (RSS, Twitter, Facebook)

Jika anda perhatikan di bagian kanan atas bagian sidebar. Ada 3 tombol yang terdiri dari RSS, Twitter, dan Facebook. Anda bisa melakukan setting untuk tombol tersebut, perhatikan langkah-langkah di bawah ini :

  • Masuk ke dashboard blogger anda
  • Pilih menu TEMPLATE lalu pilih EDIT HTML
  • 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>


  • Kode yang beri warna biru di atas silahkan ganti dengan USERNAME dari akun twitter anda.. Sedangkan kode yang saya beri warna merah silahkan ganti dengan USERNAME dari facebook anda.
  • SIMPAN TEMPLATE anda dan lihat hasilnya.

Share to :