Cara mengedit template mentah 3

Minggu, 29 Agustus 2010 , Posted by GAPTEK at 15.39



BISMILLAAHIRROHMAANIRROHIIM

Bagaimana dengan perubahan yang sahabat lakukan pada postingan sebelumnya? Mudah bukan!! kalau sahabat sudah mampu mengubah tampilan slide gambar dan keterangan gambr pada template yang kita bahas ini, sahabat akan lebih mudah lagi untuk melakukan perubahan-perubahan lainnya.

Sekarang kita mencoba untuk menambah widged content pada template mentah blog yang baru kita buat. Pada template yang kita bahas ini, hanya ada satu kontent yaitu "BERANDA" terlihat seperti gambar di bawah ini

Masih banyak ruang yang dapat kita gunakan. Selain menambah cantik tampilan blog, juga memudahkan pengunjung untuk dapat menikmati fitur-fitur yang tersedia di dalam blog kita.

Untuk menambah atau mengedit widged content pada pembahasan template kali ini, silahkan sahabat pilih EDIT HTML dan jangan lupa ceklis Expand Template Widged dan temukan kode HTML seperti di bawah ini

<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='current_page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>


Kalau sudah ketemu, sahabat perhatikan kode-kode yang berwarna, itu adalah kode yang akan kita jadikan sebagai widged konten.

Sebelum ke sana, perlu sahabat ingat, inti dari tutorial ini adalah membuat sahabat bisa dengan cepat membuat blog. Jadi, ikuti saja setiap sesi postingan yang ada. Tahan diri untuk berlaku lebih, kecuali sahabat sudah menguasai trik ngeblok sebelum tutorial ini ada. Kenapa begitu, karena pada widged content ini kita juga memerlukan link yang menjadi tautan contentnya. Karena dalam langkah sangat dasar, mohon sahabat bersabar. Yang penting bisa menambah dan mengurangi atau mengedit widged content.

Langkah-langkah

Asli kode
<a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/>
Pengeditan yang harus dilakukan
<a href='isi dengan link blog sahabat' title='Judul Konten'&gt;Nama Content
Contoh Pengeditan widged content
<a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek

Agar lebih jelas, mari kita bahas langsung pada pemasangan contentnya

<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='current_page_item'><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>
<b:else/>

Kalau yang sahabat lakukan seperti keterangan di atas, sahabat hanya memiliki dua content, yang pertama adalah "Home" dan yang kedua adalah "Link Sahabat". Bagaimana kalau ingin menambahkan lebih dari satu? untuk menambahkan, sahabap hanya perlu copy paste kode di bawah ini dan sedikit mengubah beberapa bagian

<li><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>

Biar lebih jelas, sahabat bisa melakukan langkah yang sama seperti di bawah ini

<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/08/widget-by-forantum.html' title='TV Online'>TV Online</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/07/link-terkait.html' title='Link Terkait'>Link Terkait</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/05/sahabat-blogger.html' title='Tukar Link'>Tukar Link</a></li>
<li><a href='http://suksesonline2010.blogspot.com' title='Best PTC'>Best PTC</a></li>
<li><a href='http://fotogaptek.blogspot.com' title='Foto'>Galery Foto</a></li>
<b:else/>

Biar lebih mudah lagi, silahkan sahabat copy paste kode-kode widged content nya dan linknya sahabat ganti dengan link sahabat sendiri.

Copy paste kode di bawah ini diantara
<b:if cond='data:link.isCurrentPage'> dan <b:else/> atau lebih jelasnya seperti pemasangan di atas

<li><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/08/widget-by-forantum.html' title='TV Online'>TV Online</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/07/link-terkait.html' title='Link Terkait'>Link Terkait</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/05/sahabat-blogger.html' title='Tukar Link'>Tukar Link</a></li>
<li><a href='http://suksesonline2010.blogspot.com' title='Best PTC'>Best PTC</a></li>
<li><a href='http://fotogaptek.blogspot.com' title='Foto'>Galery Foto</a></li>

Kalau sudah copy paste, jangan lupa klik simpan template. Setelah itu, silahkan sahabat lihat perubahan yang terjadi.

StumpleUpon DiggIt! Del.icio.us Blinklist YahooTechnorati Simpy Spurl Reddit Google Twitter FaceBook

Buzz Facebook Digg twitter

Currently have 1 komentar:

Leave a Reply

Posting Komentar