Kamis, 02 Juni 2011

Membuat Navigasi Breadcrumb Pada Blog

Membuat Navigasi Breadcrumb pada blogspot memang harus dilakukan secara manual. Tidak seperti pada wordpress yang memang kebanyakan templatenya sudah SEO Friendly alias sudah tersedia navigasi breadcrumbnya Nah untuk membuat blogspot SEO Friendly ada baiknya kita memasang navigasi breadcrumb di blog. Berikut langkahnya :

1. Login ke akun blogger anda
2. Klik Rancangan kemudian klik tab EDIT HTML
3. Beri centang pada Expand Template Widget
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatas kode tadi

.breadcrumbs {
padding: 5px 5px 5px 0;
margin: 0 0 5px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
}

6. Kemudian cari lagi kode berikut :
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

7. Copy paste kode berikut diatas kode tadi
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

8. Simpan template dan lihat hasilnya
Anda akan melihat hasilnya diatas postingan yang anda buka pada blog.

Membuat Buku Tamu / ShoutMix Tersembunyi Di Sisi Blog

ShoutMix atau Buku Tamu atau kolom komentar yang tersembunyi di sisi blog juga bisa menghemat ruang blog. Kalau blog anda penuh dengan konten maka sebaiknya anda menggunakan shoutmix tersembunyi agar blog terlihat rapih. Langkahnya :
1. Masuk dulu ke shoutmix.com untuk mendapatkan kode shoutmix anda, klik disini aja nih, setelah masuk klik create shoutbox, isi semua kolomnya trus centang "I have read and agree to the Terms of Service." Lanjut klik continue. Kalo udah dapet kodenya simpan dulu kode shoutmix anda.
2. Seperti biasa login ke akun blogger anda, klik Rancangan>Lemen Halaman>Tambah Gadget>pilih HTML/JavaScript.
3. Masukkan kode berikut nih :
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[CLOSE]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
4. Ganti kalimat " LETAKKAN KODE SHOUTMIX/C BOX ANDA DISINI" dengan kode shoutmix yang sudah anda simpan tadi. Sesuaikan gambar, tinggi, lebar, dan garis tepi dengan mengganti tulisan yang berwarna biru sesuai dengan selera anda.
5. Simpan dan selesai...

Membuat Widget Followers Yang Tersembunyi Di Sisi Blog

Untuk menghemat ruang blog widget followers bisa dibenamkan disisi blog. Jadi yang muncul disisi blog cuma judul widgetnya aja dan kalo di klik baru muncul halaman widgetnya. Untuk langkahnya sebagai berikut : 
1.  Login ke akun blogger anda, sebelumnya anda masuk dulu ke Google Friend Connect atau  klik aja disini untuk masuk ke Google Friend Connect, tujuannya untuk mendapatkan kode widget follower anda. Setelah masuk ke Google Friend Connect, klik tambahkan gadget anggota dan atur lah warna widget follower anda. Setelah selesai klik buat kode. Dan kode script follower anda akan mucul. Simpan dulu ya.
2. Lanjut masuk ke dasbor blogger anda setelah anda tadi sudah mendapatkan kode follower anda, buka Rancangan, Lemen Halaman, Klik Tambah Gadget dan pilih HTML/JavaScript.
3. Masukkan kode berikut :
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1094.photobucket.com/albums/i443/irawan9/folllowers.jpg') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}

function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}

</script> <div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Kode Widget Follower Anda Disini

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (10-gb.offsetWidth).toString() + "px";
</script></div></div>
4. Ganti tulisan yang dicetak miring berwarna merah diatas dengan kode follower yang sudah anda simpan tadi, dan ganti tulisan yang berwarna biru dengan alamat url gambar anda atau bisa juga menggunakan alamat diatas.
5. Simpan gadget dan lihat hasilnya.

Kode Warna HTML Blogger

Nah...ini dia gan, kode warna HTML Blogger. Ga perlu dijelasin lagi fungsi dari kode-kode warna html blogger. Kalau yu seorang blogger pastinya dah tau dah nih kode fungsinya buat apa? Seperti biasa langsung aja gan. Pasti seneng yang praktis-praktis kan? Klik aja di warna yang mo dipilih. Kode otomatis muncul (liat di kotak bawah ya gan ).





































































































































































































Kode warna yang dipilih :

Semoga bermanfaat dah...

Membuat Menu Horizontal Pada Blog

Menu pada blog pastinya sangat membantu pengunjung mencari kategori yang diinginkan. Selain itu menu juga dapat memperindah tampilan blog apabila letaknya diatur dengan baik menyesuaikan template. Langsung menuju materi gan untuk membuat menu horizontal secara manual.

1. Login ke akun blogger
2. Klik Tata Letak dan pilih tab Edit HTML
3. Centang Expand Template Widget, sebelumnya ada baiknya download template lengkap dulu untuk mengantisipasi bila terjadi kesalahan pada saat edit atau tidak maksimal hasilnya
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatasnya
/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan sub menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link sub menu ketika pointer digerakkan diatasnya.
 6. Cari kode berikut :
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
 5. Kalau sudah ketemu copy paste kode berikut tepat dibawah kode tadi
<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>About Me</a></li>
<li><a href='URL 3'>Contact Me</a></li>
</ul>
</div>
 6. Ganti tulisan yang berwarna merah dengan URL yang anda tuju dan ganti yang berwarna biru dengan nama menu anda
7. Klik simpan template
Silakan anda menambahkan variasi sendiri untuk warna, font, lebar menu dan sebagainya. Atau jika ingin mencoba membuat menu dengan cara offline silakan anda download CSS Menu Generator.

Membuat Daftar Isi Otomatis Pada Sidebar Dengan Scroll Atau Dengan Efek Berjalan

Kalo kemarin saya sudah posting gimana caranya bikin daftar isi manual pada side bar, sekarang saya mau share cara membuat daftar isi pada blog secara otomatis dengan scroll atau dengan efek berjalan. Langsung menuju ke materi gan. Berikut langkahnya :

1. Seperti biasa, login ke akun blogger anda
2. Klik Rancangan dilanjut klik Tambah Gadget pilih HTML / JavaScript
3. Untuk Daftar Isi dengan Scroll masukkan kode berikut :
<style></style>
<div style="margin: 0px; padding: 0px; overflow: auto; width: 400px; height: 200px; background-color: rgb(128, 0, 0);">
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 150;var showpostdate = false;var showpostsummary = false;var numchars = 150;var standardstyling = true;</script><script src="http://tutorialbloggerari.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></div>

4. Tulisan yang berwarna biru bisa diganti menyesuaikan dengan lebar sidebar blog sobat, nah yang warna merah ganti dengan alamat blog sobat yay, yang berwarna hijau itu warna backgroundnya, ganti lah sesuka hati atau kalo mau dikosongin tinggal ganti aja dengan kata none

5. Untuk Daftar Isi Dengan Efek Berjalan masukkan kode berikut nih :

<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br/><br/><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://tutorialbloggerari.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br/><br/></marquee>
6. Seperti diatas, warna merah ganti dengan alamat blog sobat ya, warna biru untuk mengatur ketinggian. Silakan diutak-atik sendiri untuk mendapatkan hasil yang maksimal yang sesuai dengan keinginan sobat deh.
7. Terakhir simpan dan lihat hasilnya

Menghilangkan Tanda Obeng Pada Blog

Sebenarnya menghilangkan tanda obeng pada blog tidak terlalu penting. Karena tanda obeng hanya muncul pada saat si empunya blog sedang mengedit blog. Tapi bagi empunya blog yang risih dengan tampilan obeng, tanda obeng tersebut masih bisa dihilangkan dari pandangan mata. Berikut caranya :
1. Seperti biasa login ke akun blogger anda
2. Klik Rancangan dilanjut dengan klik tab EDIT HTML
3. Cari kode ]]></b:skin>
4. Copy paste kode berikut diatasnya
.quickedit{
display:none;
}

Kalau anda sebelumnya sudah pernah mengedit template anda dengan kode yang lainnya diatas kode ]]></b:skin>, maka tempatkan kode .quickedit{ tersebut diatas kode yang sudah anda masukkan terlebih dahulu.

Membuat Efek Bintang Jatuh Dari Kursor Pada Blog

Masih ingin menghias blog anda dengan berbagai macam efek? Yang satu ini bisa dicoba. Kursor akan menampilkan efek bintang berjatuhan pada saat mouse diseret. Caranya mudah. Berikut langkahnya :

1. Login ke akun blogger anda
2. Klik Rancangan kemudian klik Tambag Gadget
3. Pilih HTML/JavaScript
4. Copy paste kode berikut dan letakkan dimana saja. Agar tidak mengganggu posisi tata letak blog sebaiknya ditempatkan dibawah saja
<script src="https://sites.google.com/site/ajurna1/freeware/bintangcrusor.js"></script>
5. Simpan template

Selesai...

Apabila script diatas tidak bisa digunakan silakan anda mencoba script dibawah dengan berbagai macam warna efek.

<script src="http://imtikhan.googlecode.com/files/red_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/yellow_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/green_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/blue_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/black_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/white_star.js" type="text/javascript"></script>

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grocery Coupons