Buka Kompi: Blogger

Cara Membuat Scrool Ke Atas Secara Otomatis

by: fff 0 Comment in: Blogger

1. kamu Copy Paste aja script di bawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="http://raezen.fileave.com/scrolltop.js" type="text/javascript"></script>

2. kalau sudah di "Copy",, kamu "Paste" persis dibawah kode : <head>

3. Simpan dan selesai.

Pasang Widget Blogger Indonesia

by: fff 0 Comment in: Blogger

fff

Pasti pada bingung nih, apa maksudnya dan kenapa judulnya begitu, sebenarnya aku sendiri juga bingung mau ngasih judul apa untuk trik yang berikut ini. Setelah aku pikir-pikir :t eee.. nggak nemu-nemu juga judul yang cocok, ya udah deh aku asal aja kasih judul gitu. Trus apa maksudnya dari judul tersebut dan trik apa yang akan dibahas?

Gini, untunya itu gini :D trik nyoba ngebahas gimana cara membuat "gambar" itu selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "gambar" itu apa? "gambar" itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Kalo untuk di blog ini aku pasang gambar sonic yg sedang lari-lari (pojok kiri bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini:

1. Login ke blogger trus klik Layout -->> Edit HTML

2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left: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, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".

4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.

6. Simpan hasil kerja kamu dan lihat hasilnya

Membuat Related Post Dengan Thumbnail Di Blog

by: fff 0 Comment in: Blogger

fff

1. Login dahulu ke Blogger
2. Masuk pada Tata Letak/Layout

3. Lalu pilih Edit HTML
4. Centang tulisan Expand Widget Template
5. Kemudian cari code ini </head>
6. Letakkan code dibawah ini sebelum code </head> tadi

<b:if cond='data:blog.pageType == "item"'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

</b:if>

7. Langkah selanjutnya, cari code ini
<div class='post-footer-line post-footer-line-1'>

8. Jika tidak menemukannya coba cari yang ini

post-footer-line

9. Jika sudah ketemu, letakkan code dibawah ini Setelah code diatas


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>


Catatan :
1. Untuk code jumlah related post yang berwarna merah bisa anda sesuaikan dengan blog anda. Untuk tulisan Related Post bisa anda ganti sesuai selera anda, seperti Posting terkait, Artikel terkait, dll. Simpan hasil kreatifitas anda, coba lihat hasilnya.
2. Jika anda ingin merubah warna atau yang lainnya, anda bisa merubah dibagian CSS.
3. Jika blog anda tidak menggunakan sistem Read More, dan anda ingin menampilkan Related Posting ini di seluruh halaman, tidak hanya di postingan pertama saja, silakan hapus code yang diberi tanda keterangan  pada code di dalam kotak yang pertama dan kedua

Selamat mencoba.Semoga bermanfaat...