Cara membuat kotak blogroll dan marquee

Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta
Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu

Udah bagus nggak puisinya? ancur ya? Ok lanjuuut.

Oleh karena itulah
hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak


Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh
udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>


keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode


2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>


Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......

Membuat Elemen Sidebar Berada Di Kiri Dan Kanan Postingan

Masih mengenai bagaimana cara mebangun template pada blogger blog, kali ini saya akan mencoba memberitahu kepada kalian tentang bagaimana membuat elemen sidebar berada di kiri dan kanan postingan. Untuk tutorial ini saya hanya mengambil satu sampel template blogger saja yaitu template "minima". Pada awalnya bentuk dasar suatu elemen halaman pada template blog adalah seperti gambar di bawah ini.

Pada gambar di atas dapat kalian lihat bahwa elemen sidebar berada di sebelah kanan postingan (elemen posting blog). Di sini kita akan mencoba menambahkan elemen sidebar dan meletakkannya di sebelah kiri postingan sehingga akan tampak seperti gambar di bawah ini.

Pada gambar di atas tampak bahwa sekarang elemen sidebar menjadi dua yaitu berada sebelah kanan dan kiri postingan (elemen posting blog). Baiklah langsung saja saya jelaskan cara membuatnya.

Masih mengenai bagaimana cara mebangun template pada blogger blog, kali ini saya akan mencoba memberitahu kepada kalian tentang bagaimana membuat elemen sidebar berada di kiri dan kanan postingan. Untuk tutorial ini saya hanya mengambil satu sampel template blogger saja yaitu template "minima". Pada awalnya bentuk dasar suatu elemen halaman pada template blog adalah seperti gambar di bawah ini.

Pada gambar di atas dapat kalian lihat bahwa elemen sidebar berada di sebelah kanan postingan (elemen posting blog). Di sini kita akan mencoba menambahkan elemen sidebar dan meletakkannya di sebelah kiri postingan sehingga akan tampak seperti gambar di bawah ini.

Pada gambar di atas tampak bahwa sekarang elemen sidebar menjadi dua yaitu berada sebelah kanan dan kiri postingan (elemen posting blog). Baiklah langsung saja saya jelaskan cara membuatnya.

login-lah pada blog dan masuklah ke bagian "Tata Letak" kemudian pilihlah "Edit HTML". Sampai di sini kalian harus mencari kode ]]></b:skin> dan letakkan kode Css di bawah ini tepat di atas kode ]]></b:skin> tersebut.

Css di bawah ini tepat di atas kode ]]> tersebut.

Kode Css

#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

.sidebar2 {
color: #ffffff;
line-height: 1.5em;
}

.sidebar2 ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar2 li {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar2 .widget {
border-bottom:1px dotted #cccccc;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Setelah kalian masukkan kode css di atas, kalian cari lagi kode <div id='main-wrapper'> dan letakkan kode sidebar di bawah ini tepat di atas kode <div id='main-wrapper'> tersebut. Oya untuk mempercepat pencarian kalian, gunakan saja Ctrl-F pada keyboard.

Kode Sidebar

<div id='sidebar-wrapper2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'/>
</div>

Nah jika sudah kalian masukkan kode sidebar tersebut, simpan template dan lihatlah elemen halaman blog yang kalian miliki. Apa yang terjadi?! hehe...pastinya elemen sidebar kalian sekarang sudah menjadi 2 tetapi ini belum sempurna sobat karena kalian akan melihat tampilan elemen halaman blog yang kalian miliki seperti gambar di bawah ini.

Untuk menyempurnakannya, kalian harus menambah luas wilayah template kalian dengan cara menambah lebar (width) #outer-wrapper pada "Edit HTML". Sorry boss, saya ajak kalian bolak-balik. Pada template "Minima" lebar (width) #outer-wrapper adalah 660px. Karena ukuran sidebar2 adalah 220px, maka kalian tinggal menambahkan lebar (width) #outer-wrapper menjadi 880px (660px + 220px). Nah supaya sidebar2 tidak berdempetan dengan postingan kalian maka kalian harus memberi jarak diantara keduanya. Untuk itu kalian harus memberi margin-left:10px; pada #main-wrapper. Kalau sudah, simpan template kalian dan coba kalian lihat lagi pada "Elemen Halaman".

Efek tulisan di kursor

Masuk account blogger anda==> Dashboard/dasbor ==> Layout/tataletak==> edit HTML, jangan lupa centang "EXPAND TEMPLATE WIDGET"
Lakukan backup dengan men-"download template lengkap" untuk berjaga-jaga bila terjadi kesalahan dan hack ! :t

Lalu copy kode dibawah ini :
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'courier', verdana, arial;
color: #ff0000;



position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">



;(function(){


var msg = "TULISAN ANDA DISINI";



Masuk account blogger anda==> Dashboard/dasbor ==> Layout/tataletak==> edit HTML, jangan lupa centang "EXPAND TEMPLATE WIDGET"
Lakukan backup dengan men-"download template lengkap" untuk berjaga-jaga bila terjadi kesalahan dan hack ! :t

Lalu copy kode dibawah ini :
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'courier', verdana, arial;
color: #ff0000;



position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">



;(function(){


var msg = "TULISAN ANDA DISINI";




var size = 24;


var circleY = 0.75; var circleX = 1;



var letter_spacing = 5;


var diameter = 10;


var rotation = -0.7;



var speed = 0.4;



if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Nah... sekarang coba kalian klik tombol save/simpan perubahan, dan lihat hasilnya.
Kalau sudah berhasil....... silahkan anda beritahu teman-teman yang memerlukannya ya ? jangan pelit bozz ?
Selamat mencoba !! :z :z :z

Membuat Efek Salju Di Blog

Membuat blog yang menimbulkan Efek salju.... :z
Lihat Background Blog saya seperti ada salju nya..
Kamu Cuma COPAS aja HTML di bawah ini :
<script type="text/javascript" src="http://pamungkaz.googlepages.com/snow.js">

/***********************************************
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured , available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/

</script>

Dan Bagaimana cara nya menempatkan HTML nya [Generate by Smileykiti]
- Kamu Login Di blogger nya.
- Setelah masuk kamu klik LAY OUT
- Edit HTMl nya di klik " seperti menaruh java scripts yang laen2 nya"
- Klik / tandai Expant wigest nya
- Dan Buat memper mudah pencarian HTMl, di mana HTMl yang di aats mau di taruhkan.
Kamu Tinggal Klik (Ctrl+F), maka akan tampak seperti gambar di bawah ini :

- naaaaaaaaaaaaah, [Generate by Smileykiti]
kamu tinggal klik di di samping FIND itu , apa yang kamu mau cari di
Edit Html nya. Misal kan ]]></b:skin> ini yang kamu mau cari kamu tinggal tulis
Di situ.Membuat blog yang menimbulkan Efek salju.... :z
Lihat Background Blog saya seperti ada salju nya..
Kamu Cuma COPAS aja HTML di bawah ini :
<script type="text/javascript" src="http://pamungkaz.googlepages.com/snow.js">

/***********************************************
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured , available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/

</script>

Dan Bagaimana cara nya menempatkan HTML nya [Generate by Smileykiti]
- Kamu Login Di blogger nya.
- Setelah masuk kamu klik LAY OUT
- Edit HTMl nya di klik " seperti menaruh java scripts yang laen2 nya"
- Klik / tandai Expant wigest nya
- Dan Buat memper mudah pencarian HTMl, di mana HTMl yang di aats mau di taruhkan.
Kamu Tinggal Klik (Ctrl+F), maka akan tampak seperti gambar di bawah ini :

- naaaaaaaaaaaaah, [Generate by Smileykiti]
kamu tinggal klik di di samping FIND itu , apa yang kamu mau cari di
Edit Html nya. Misal kan ]]></b:skin> ini yang kamu mau cari kamu tinggal tulis
Di situ.
- Copy HTML nya
<script type="text/javascript" src="http://pamungkaz.googlepages.com/snow.js">

/***********************************************
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured , available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/

</script>
di taruh di bawah <head>.
<head> posisi nya berada di atas. :z :t :z