-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet
sekarang yang akan saya bahas adalah memasang scroll pada archive blog. kalau memasang scroll pada widget java script mungkin mudah karena tinggal copy paste sript pembuka di atas sendiri dan meletakkan script penutup diakhirnya. tapi jika yang di beri scroll adalah widget bawaan blogger maka membutuhkan sedikit trik khusus.

Seberapa pentingkah scroll pada archive blog ? kalau menurut blogger newbie manfaat dari scroll down itu sendiri adalah menghemat tempat. jadi sidebar blog kita terlihat lebih rapi. untuk contoh perbandingannya seperti gambar dibawah ini.




Archive Blog (memakai scroll)


Archive Blog (tanpa scroll)




Tertarik untuk membuatnya ?? ikuti langkah - langkah berikut :
  1. Masuk ke Acount Blogger atau Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Centang Expand Widget Templates
  4. Cari kode <div id='ArchiveList'> (pakai Ctrl + F untuk lebih mudahnya)
  5. Tambahkan kode bercetak tebal seperti dibawah ini (hasil jadi penempatan script seperti dibawah ini:





www.master-lutfi.co.cc




  1. Angka 250px (tinggi kotak scroll) bisa kamu ganti sesuai selera
  2. Klik Simpan template
untuk membuat fungsi Scroll seperti ini caranya seperti pada widget punya saya atau di posting ini :


1. Pertama Login dulu ke blogger
2. Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman )
3. Add a Gadget ( Tambah Gadget )
4. Pilih HTML/JavaScript dan copy aja kode ini didalamnya:



<div style="border: 1px solid rgb(238, 238, 238); height: 50px; overflow: auto; padding: 10px; width: 320px;">
Masukkan teks nya disini kawan......... </div>
Keterangan :
width
: lebar
height
: tinggi
padding
: jarak antar tulisan dengan garis pinggir menunya
border
: ketebalan garis pinggir menu

Selamat mencoba kawan... contoh Hasilnya juga akan seperti penyimpanan script di atas...
Effect flashing didalam text adalah murni dari pengaruh JavaScript, tanpa menggunakan kode CSS.
Neon Text Color jQuery ini dapat digunakan di postingan ataupun di sidebar, guna mempercantik tampilan blog/website sobat.
Contoh tampilannya ada pada Widget sebelah kanan sobat "assalamualaikum wr.wb kawan-kawanku.....".
Jika ada yang tertarik langsung saja ke langkah-langkah membuat Neon Text Color jQuery.
Masukan kode JavaScript dibawah ini pada postingan pada mode Edit HTML
atupun di sidebar dengan cara Tambah Gadget → HTML/JavaScript pada widget sidebar sobat



<script language="JavaScript1.2">
var message="Tulisan Yang diberi Efek"
var neonbasecolor=""
var neontextcolor="#fd3d3a"
var neontextcolor2="#ff8080"
var flashspeed=50 // kecepatan flashing dalam milliseconds
var flashingletters=5 // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1 // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0 // pause diantara flash-cycles dlm milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

ganti kode Tulisan Yang diberi Efek dengan tulisan yang akan diberikan efek.
kode #fd3d3a dan #ff8080, ganti kode warna dengan kode warna yg sobat suka.
angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya.
angka 5 adalah merupakan jumlah huruf yang di flashing.
angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh.

Contoh tampilan : Assalamualaikum wr.wb Kawan-kawanku maaf blog nya masih baru jadi masih banyak kurangnya.. hehe
sobat bisa lihat sendiri backgroundnya pada postingan ini, dan hanya pada postingan ini saja tidak merubah background postingan keseluruhan blog ini
Berikut cara pembuatan nya :

Tambahkan kode dibawah ini pada editor Edit HTML postingan blog sobat.

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/s1600/papers.jpg
) no-repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;">



Isi Postingan

</div>


Keterangan :

Ganti URL gambar diatas dengan URL gambar milik sobat.
Kode no-repeat adalah kode untuk tidak menampilkan gambar berulang-ulang, jika memang menghendaki gambar yang ditampilkan berulang sampai ke bawah postingan, maka tinggal dihapus saja kode no- pada kode tersebut

Isi Postingan adalah isi dari artikel/post sobat keseluruhan. jadi integrasinya kode diatas adalah mengapit keseluruhan isi artikel milik sobat.
Sebelum posting tersebut diterbitkan, maka sebelumnya di Pratinjau terlebih dahulu.
Setelah semuanya beres, maka terbitkanlah postingan sobat. dan lihat hasilnya.
Satu postingan sobat memiliki background yang berbeda.

Selamat mencoba