Juli 19, 2009

Membuat Breadcrumbs Navigation

Apa yang dimaksud dengan Breadcrumbs-navigation? Bisa tanya sama mas wiki atau oom google :). Bentuknya kayak apa sih? Itu loh yang diatas judul post, susunannya seperti ini:
Browse>>Home>>kategori>>judul post

Template yang kugunakan saat kucoba adalah Rounders.

Katanya menu seperti itu disukai google, SE0 friendly.

Membuat breadcrumbs-navigation dapat dilakukan dengan mengedit template, caranya sebagai berikut:

Log in ke blogger.com>Tata letak>Edit HTML>Download Template lengkap untuk back up template>tandai Expand Widget Template

cari kode ]]></b:skin>
Copy dan paste kode berikut tepat diatasnya:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}



Cari kode
<div class='post hentry uncustomized-post-template'>

Copy dan paste kode berikut tepat dibawahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>



Klik Simpan Template

Sumber: blogspottutorial

Awal | Daftar Isi


Baca selengkapnya...

Juni 09, 2009

Menjadikan Footer Tiga Kolom

Menjadikan footer tiga kolom tidaklah terlalu sulit, dengan menambahkan script tertentu dapat membuat footer menjadi 3 kolom.

Cara membuat footer 3 kolom:

>> Login ke blogger.com/Tata Letak/Edit HTML tandai Expand Widget

Untuk mengantisipasi terjadinya kekeliruan disarankan untuk membuat backup template dengan klik Download template lengkap

>> Kemudian letakkan kode berikut diatas kode ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}



>> Selanjutnya cari kode yang mirip-mirip berikut:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Hapus dan ganti kode berikut

<b:section class='footer' id='footer'/>

dengan kode dibawah ini:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>


>> Simpan Template/Tata Letak, perhatikan jika berhasil akan tampak elemen halaman pada footer.

Keterangan:
Warna border bisa disesuaikan dengan template dengan mengubah kode warna #5d5d54 lebar border bisa disesuaikan dengan mengubah persentase width atau jika tidak menghendaki adanya border kode berikut bisa dihilangkan

<p>
<hr align='center' color='#5d5d54' width='90%'/></p>

Selain menjadikan footer 3 kolom terdapat juga elemen halaman di bawah tiga kolom tadi.

Catatan:
Ketika aku mencoba menambahkan script diatas baru berhasil jika pada footer dalam keadaan bersih tanpa ada widget, jika terlanjur ada maka hapus dulu agar script yang ditambahkan bisa di-parse kemudian lakukan seperti langkah-langkah diatas.

Makasih untuk trikblog


Permalink artikel ini: http://dewimaya.blogspot.com/2009/06/menjadikan-footer-tiga-kolom.html

Awal | Daftar Isi
Baca selengkapnya...

Mei 16, 2009

Menambahkan Google BlogSearch di Sidebar

Blogsearch digunakan untuk memudahkan pembaca mencari artikel yang ada di blog. Blogsearch dapat diletakkan di sidebar.

Cara menambahkan google blogsearch di blogspot adalah sebagai berikut:
Login ke blogger.com > Tata letak > Tambah gadget > pilih HTML/JavaScript > letakkan kode berikut dikotak konten:


<div class="module-search module">
<div class="module-content">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input value="http://yourblog.blogspot.com/" name="bl_url" type="hidden"/>
<label for="search" accesskey="4"></label><br/>
<input id="search" name="as_q" size="20" type="text"/>
<input value="Cari" name="submit" type="submit"/>
</form>
</div>
</div>


Keterangan:
ganti yourblog dengan yang kamu punya

Cari bisa diganti dengan Search

>> klik Simpan > klik Lihat blog untuk melihat hasilnya di sidebar.
Baca selengkapnya...

Mei 11, 2009

Membuat Recent Post dengan Feed

Beberapa judul posting terbaru atau Recent Post dapat ditampilkan di sidebar untuk memudahkan pembaca mengetahui artikel terbaru yang terdapat di situs tersebut. Pengunjung yang datang lewat search engine dan kebetulan halaman yang dikunjungi bukan halaman utama merupakan target dibuatnya Recent Post ini.

Menampilkan Recent Post di blogspot sangat lah mudah yaitu dengan menggunakan Gadget Feed yang telah disediakan blogger.


Langkah-langkah menambahkan gadget feed adalah sebagai berikut:


→ Login ke blogger.com > klik Tata letak > klik Tambah Gadget > cari Feed sampai ketemu kemudian klik tanda +

isi feed blogmu dengan http://blogmu.blogspot.com/feeds/posts/default

(blogmu ganti sesuai dengan milikmu)

> klik Lanjutkan
> Judul bisa diganti dengan Recent Post atau Artikel Terbaru atau Tulisan Terbaru terserah.

> klik Simpan
> klik Lihat blog untuk melihat gadget feed yang telah ditambahkan di sidebar.
Baca selengkapnya...

Mei 08, 2009

Membuat Read More di Blogspot

Jika ingin memotong tulisan yang panjang agar tampil sebagian saja di halaman muka blogspot perlu menambahkan kode tertentu agar ada tulisan berupa link Read More... atau kata lain misal Baca Selengkapnya... dan jika link tersebut diklik maka akan muncul tulisan yang utuh.
Membuat Read More di Blogspot untuk template blogger baru caranya berbeda dengan yang memakai template classic. Berikut langkah-langkah yang perlu dilakukan dalam membuat Read More...untuk template blogger baru:
→ Login ke blogger.com > pilih blog yang akan diedit > klik Tata Letak > klik Edit HTML

klik Link Download template lengkap untuk membackup template sehingga bisa digunakan lagi jika gagal mengedit template.
Jangan lupa tandai Expand Widget Templates agar bisa mengedit template secara keseluruhan.

Masukkan kode yang tampak dibawah sebelum tag </head> atau tepat sesudah kode ]]></b:skin>:

<style>
<b:if cond='data:blog.pageType=="item"'>
span.fullpost{display:inline;}
<b:else/>
span.fullpost{display:none;}
</b:if>
</style>


Selanjutnya mengatur agar postingan terpotong, cari kode
<data:post.body/>
pada template blog dan tambahkan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType!="item"'>
<a expr:href='data:post.url'> Read More...</a>
</b:if>


Simpan
Tulisan Read More bisa diganti dengan Baca Selengkapnya...

Setiap kali akan posting perlu menambahkan kode dipostingan. Tulisan cetak tebal berikut merupakan kode yang harus ditambahkan:

Contoh:
Tulisan yang akan ditampilkan <span class="fullpost"> sisa tulisan yang akan disembunyikan sampai akhir postingan</span>

Hasilnya dapat dilihat di Halaman muka blog ini.
Baca selengkapnya...