Thursday, November 10, 2011

Cara Meletakan Gambar Yang Selalu Berada di Pojok

Pada postingan kali ini, saya akan membahas bagaimana cara meletakan gambar yang selalu berada di pojok meskipun "scroll bar" ditarik kemana-mana. Kalo untuk di blog ini saya pasang gambar Blogger Indonesia yang berada di kanan bawah. Wiss mudeng kan ???


Langkah- langkahnya seperti ini :
1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo sudah ketemu letakan kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
3. Text yang dicetak tebal adalah posisinya, jika teman- teman ingin merubah di posisi pojok kanan bawah tinggal text "right" diganti dengan "left". Begitu juga tulisan "bottom", jika ingin posisinya di atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
<div id="trik_pojok">
<a href="http://aguskristianto.blogspot.com">
<img src="http://i622.photobucket.com/albums/tt305/aguschristiant/Blog/BloggerIndonesia.png" border="0" /></a>
</div>
"http://aguskristianto.blogspot.com" adalah link. ganti dengan link kamu.
"http://i622.photobucket.com/albums/tt305/aguschristiant/Blog/BloggerIndonesia.png" adalah URL gambarmu. Silahkan ganti dengan URL gambar kamu.

5. Jika teman - teman ingin yang ada disitu bukan gambar tetapi widget-widget ( chat box, iklan, kalender, dl ) yang lain, maka ganti text yang berwarna biru dengan script widget-widget tersebut.
6. Simpan dan lihat hasilnya.


Terima Kasih,
Semoga Bermanfaat,


Read more ...
Wednesday, November 9, 2011

Membuat Page Navigation Pada Blog

Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat Page Navigation. Page Navigation adalah suatu navigasi halaman yang ditandai dengan penomeran halaman dari postingan yang paling baru ke postingan yang lebih lawas. Supaya tidak bingung, coba perhatikan gambar dibawah ini, yang saya beri garis warna merah.


Langkah langkahnya sebagai berikut :

1. Silakan sobat login ke akun blog sobat.

2. Klik pada menu rancangan > edit HTML

3. Kemudian cari kode
]]></b:skin>
4. Copy kode dibawah ini dan letakkan SEBELUM kode ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
5. Setelah itu cari kode </body>
6. Letakkan kode dibawah ini SEBELUM kode </body>
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://aguskristianto.googlecode.com/files/aguskristianto-page-navigation.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends --> 
7. Simpan dan lihat hasilnya.

Jika teman- teman ingin merubah jumlah postingan yang tampil pada setiap halaman silahkan ubah angka 5 menjadi angka berapa saja yang teman- teman inginkan pada kode berikut :
var displayPageNum = 5;
Sedangkan pada kode dibawah ini teman - teman bisa memodifikasi kata NEXT dan PREVIOUS menjadi SEBELUMNYA atau BERIKUTNYA ataupun dengan kata-kata yang sobat inginkan.
var upPageWord = 'Sebelumnya';
var downPageWord = 'Berikutnya';


 
Terima Kasih,
Semoga Bermanfaat,


Read more ...