Membuat Scrollbar Pada Blog

Okey Langsung saja Sobat kali ini saya ingin mengasih tutorial Membuat Kotak Scrolling si Blog, memang sih tutorial ini udah lama banget mungkin yach,,tapi tidak apa-apa dech berhubung saya temen-temen di kampus sering merequest tentang Bagaimana sih membuat Kotak Scrolling di Blog.
Nach Malam ini saya Akan Memberikan Tutorial-Tutorialnya Sebagai Berikut :

Untuk membuat kotak ini caranya sangat mudah:

1. Login dulu Account Blogger. 

2. Pilih menu Design -> Page Elements
2. Pilih Add a Gadget lalu klik HTML/Javascript

3. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Letakkan Teks atau Kode HTML</div>

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak Scrollbar buatan Duta XP</div>

Keterangan :
Untuk mengganti ukuran Kotak Scrollbar anda tinggal mengganti angka yang berwarna Merah.


4. Save Templates

Cara Membuat Background Blog Bergambar

bosen ya kalau warna background blog kita hanya berupa warna saja, tentunya kurang gimana gitu, nach tenang saja gan kali ini saya akan memberikan sebuah tutorial Bagaimana Cara Membuat Background Blog Bergambar.

Untuk lebih jelasnya ikuti tutorial berikut ini :

1.       Carilah dulu background gambar blog yang ingin kamu pasang nantinya.

2.       Bila sudah ketemu copy link (alamat) dari gambar tersebut Klik Kanan (gambar), Copy Link Image.

Bila alamat URL file gambar yang anda inginkan sudah di dapat. Kini kamu bisa memasanganya pada template blog. Caranya sama, kamu harus melakukan perubahan pada kode HTML, berikut caranya :

1.       Login ke Blogger.

2.       Pilih menu Tata Letak à Edit HTML.

3.       Pada kotak Edit Template, cari kode CSS yang berkepala body.

Body {

Background:#696969

....

....

4.       Pada baris background, ganti kode yang berwarna Biru diatas dengan URL file gambar yang sudah agan siapkan tadi.

Misalnya seperti di bawah ini :

Body {

Background:url(http://static1.grsites.com/archive/texture/lgren.jpg);

........

........

5.       Klik tombol SAVE TEMPLATE.

Sekiranya itu saja tutorial yang bisa saya berikan ke

Memasang Iklan di Bawah Judul

kita tidak hanya bisa membuat atau menaruh iklan dibawah kalimat terakhir artikel (atau di atas komentar), kita juga bisa memasang iklan di atas kalimat awal artikel, atau tepatnya di bawah judul.

Iklan baru akan di tampilkan setelah kamu membaca dengan lengkap, yaitu dengan mengklik Read More atau mengklik judulnya, untuk lebih jelasnya silahkan ikuti langkah berikut :

1.       Login pada Blogger

2.       Masuk pada halaman Tata Letak à Edit HTML.

3.       Klik atau Centang pada bagian Expand Template Widget.

4.       Cari kode seperti berikut :

<data:post.body/>

atau

<p><data:post.body/></p>

5.       Letakkan kode iklan agan di atas kode “<data:post.body/>” atau kode “<p><data:post.body/></p>”.

6.       Jika sudah, klik tombol SAVE TEMPLATE.

7.       Sekarang coba lihat bagaimana Hasilnya.

Cara Membuat Buku Tamu di Samping Kiri dan Kanan Blog

Duta XP, Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog
Hai Sobat Blogger apa kabar ??? Berhubung tadi saya mencoba membuat shoutbox di blog saya dan berhasil tampil,sekarang giliran saya membagi-bagikan hasilnya atau tutorial-tutorialnya kepada sobat sekalian. Mungkin Sebaiknya baca juga tentang Bagaimana Membuat Breaking News di Blog.
Membuat Shoutbox/ Buku Tamu memang bisa di buat dengan berbagai cata ada yang langsung kita dapatkan di penyedia layanan shoutbox itu sendiri dan tinggal memasang script itu di blog kita, ada juga yang meletakkan dengan Tombol atau gambar floating, ada juga yang meletakkan dengan Tombol Pop Up. Tapi Kali ini kami akan mempostingkan Bagaimana Cara Memasang Buku Tamu di Sisi Kanan atau Kiri di Blog anda.









Berikut Ini Tutorialnya :
Pertama :
Login dulu ke Account Blogger. 

Kedua :
Masuk ke Menu Rancangan / Design pada Dashboard Anda

Ketiga :
Untuk Meletakkan Buku Tamu Disisi Kanan Blog :
Tambahkan Script/ Kode berikut di blog Sobat

<!-- right hidden chatbox by http://idesainer.blogspot.com/ START --> <style> #hcr { position:fixed;top:100px; z-index:+1000; } * html #hcr {position:relative;} .hcrtab {height:100px;width:30px; float:left; cursor:pointer; background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat; } .hcrcontent { float:left; border:2px solid #003e82; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcr(){ var hcr = document.getElementById("hcr"); var w = hcr.offsetWidth; hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0); hcr.opened = !hcr.opened; } function movehcr(x0, xf){ var hcr = document.getElementById("hcr"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcr.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);} } </script> <div id="hcr"> <div class="hcrtab" onclick="showHidehcr()"> </div> <div class="hcrcontent"> <!-- KODE SHOUTMIX ANDA DISINI --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> <span > <span > Get this</span> <a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.html" target="_blank"> <span class="Apple-style-span" > Desaign1</span> </a></span> <span style="float:right"> <a href="javascript:showHidehcr()"> [close] </a> </span> </div> </div> </div> <script type="text/javascript"> var hcr = document.getElementById("hcr"); hcr.style.right = (30-hcr.offsetWidth).toString() + "px"; </script> <!-- right hidden chatbox by http://idesainer.blogspot.com/ END -->

Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan Script/ Kode berikut di blog Sobat

<!-- left hidden chatbox by http://idesainer.blogspot.com/ START --> <style> #hcl { position:fixed;top:100px; left:0px; z-index:+1000; } * html #hcl {position:relative;} .hcltab {height:100px;width:30px; float:left; cursor:pointer; background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat; } .hclcontent { float:left; border:2px solid #790909; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> <!-- KODE SHOUTMIX ANDA DISINI --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> <span > <span > Get this</span> <a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.html" target="_blank"> <span class="Apple-style-span" > Desaign1</span> </a> </span> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://idesainer.blogspot.com/ END -->

Keterangan :
1. Ubah Kode yang berwarna Merah dengan kode buku tamu / shoutbox Anda
2. Jika Anda Belum Punya Kode Shoutbox anda bisa membuatnya disini atau di Fibox.
Terakhir :
Save Template / Rancangan Blog Anda