15 Januari 2012

Cara Menambahkan Icon Di Judul Postingan

Cara Menambahkan Icon Di Judul Postingan - Menambahkan Icon pada setiap judul postingan semakin menambah indahnya postingan dan Blog kita. Icon gambar ini terletak di Depan judul postingan, maaf kalo saya gak buat screenshootnya coz koneksi lagi lemot dan buru buru update postingan nih. Ok deh dari pada berlama lama ngelantur gak karuan mending langsung Lihat Cara Menambahkan Icon Di Judul Postingan :

Ikuti Tutorial Cara Menambahkan Icon Di Judul Postingan berikut :
Login ke Blogger - Pilij Rancangan - Edit Html- kemudian cari kode yang mirip seperti ini :
(jangan lupa back up template anda terlebih dahulu)

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

ingat : tidak semua kode template menggunakan Tag h3. mungkin aja pake h1 atau h2.

Jika sudah ketemu , letakkan kode berikut sebelum kode kurung kurawal   }


background:url(http://gambaranda.Jpg)no-repeat left;

Sehingga susunan kodenya akan menjadi seperti berikut :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:url(http://gambaranda.Jpg)no-repeat left;
}

Kemudian Atur jarak antara Judul dengan Icon agar tampak pas dengan cara mengubah nilai padding.
padding:0 0 4px; menjadi :

padding:0 0 4px 50px;
  • Yang berwarna merah adalah padding atas.
  • Yang berwarna biru adalah padding kanan.
  • Yang berwarna ungu adalah padding bawah.
  • Yang berwarna hijau adalah padding kiri.
Langkah terakhir adalah Simpan Template. Semoga Cara Menambahkan Icon Di Setiap Judul Postingan bermanfaat.

Cara Membuat Buku Tamu Terbuka Tanpa di Klik

Pada pertemuan kali ini saya akan menjelaskan secara singkat kepada teman-teman Cara Membuat Buku Tamu Terbuka Tanpa di Klik . kalian sudah pernah melihatnya bukan ?? di blog" lain banyak yang menggunakan Guest book seperti ini. Untuk membuatnya kalian hanya perlu beberapa script. 
langkah pembuatannya adalah sbb :

    • Masuk ke Blogger.com
    • Klik Rancangan >> Tata letak >> Add widget >> Html/javascript
    • copy paste kode berikut :

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7QmUMlo-iJGU9u8c6uRf6Px6-NMPoqoJOZUIIZCA6c76XUPR6TLZTY6YlZx83I7wZ5M2hqy_yoeLO5OQMw3jR8W6Tu3XB9zkzDT9V6aUIpWVbzEulKd4_UmZs1JEo4kFc1OJZ9BehDLz/s1600/api.gif) no-repeat bottom;
padding:10px;
}

</style>

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

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
<<Letakan Script Buku tamu sobat Disini>>
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>

</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>

    • Letakkan kode buku tamu sobat pada tulisan <<<Letakan Script Buku tamu sobat Disini>>
    • Jangan lupa Save

Membuat Daftar Isi Otomatis Di Blogspot

Selamat malam sahabatqu semua. setelah kurang lebih 2 bulan ngeblog rasanya ada sesuatu yang janggal di blog ini, tapi apa ya ? saya sempat pikir pikir. dalam hati bertanya tanya "apa yang kurang ya ?" . ternyata setelah diselidiki lebih lanjut bagian yang kurang pada blog ini adalah Daftar Isi / Sitemap . kebetulan nih jadi langsung aja saya buat Daftar Isinya Dalam Bentuk Postingan mengingat Laman Blog saya rusak. bagi para bloger yang belum ada Daftar Isi Di Blognya silahkan ikuti Petunjuk - petunjuk berikut untuk membuatnya : cukup copy paste kode berikut :


<div style="border: 1px solid #cccccc; height: 350px; overflow: auto; padding: 10px; width: 390px;">
<script src="http://kcdaftarisi.googlecode.com/files/daftarisi.js" type="text/javascript">
</script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

  • Untuk  Mengatur Tinggi dan Lebar Daftar Isi silahkan Sesuaikan dengan keiinginan anda dengan merubah kode yang berwarna Merah
  • Ganti Tulisan yang berwarna Ungu dengan Url/nama blog anda.
  • Silahkan Tempatkan WIdget ini di , Laman Blog, bisa juga dipostingan, Sidebar dll.
Cukup Sekian dulu berita dari saya kali ini. semoga bermanfaat untuk kita semua.

Membuat Cursor Diikuti Bintang Di Blogspot

 saya beri Cara Membuat Cursor Diikuti Bintang Di Blogspot. Cursor kalian menajdi indah saat diikuti oleh bintang bintang ini. Langsung aja cekidot Cara Membuat Cursor Diikuti Bintang :


  • Masuk Ke Blogger
  • Pilih Rancangan - Tata Letak - Tambah Widget
  • Pilih Html/Javascript kemudian paste kode berikut :

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

  • Kemudian Save.

Dan lihat hasilnya, cursor ada akan lebih tampak berkelip kelip. hehe

Semoga Membuat Cursor Diikuti Bintang Di Blogspot bermanfaat untuk anda