Mengganti Bullet List Blogger Menjadi Keren

Mengganti Bullet List Blogger Menjadi Keren :

• Seperti biasa mas bro, masuk ke akun blogger anda.
• Lalu masuk ke template dan edit HTML.
• Anda cari kode ]]></b:skin> , gunakan fungsi CTRL+F untuk pencarian.
• Lalu masukan kode dibawah ini tepat diatas kode ]]></b:skin> dan save jika sudah selesai.

.post ul {
margin: 5px 0px 5px 10px;padding: 0 0 0 20px;list-style-image: url(http://1.bp.blogspot.com/-e6GJemvAOXc/UdnmTMtn5dI/AAAAAAAABZg/srb3nAVb6pk/s1600/251.gif);}
.post li {margin: 0 0 0 10px;padding: 3px;
}
.post li:hover {
list-style-image: url(http://1.bp.blogspot.com/-EJkzfrdughY/UdnmTMZbGvI/AAAAAAAABZc/_uBCsqH7iJE/s1600/255.gif);cursor: pointer;}

Costumalisasi :

• .post li:hover { bla  bla bla } adalah effect hover atau efek mouse saat diarahkan , Jika tidak ingin effect hover anda bisa hapus kode nya.
• http://1.bp.blogspot.com/-e6GJemvAOXc/UdnmTMtn5dI/AAAAAAAABZg/srb3nAVb6pk/s1600/251.gif dan http://1.bp.blogspot.com/-EJkzfrdughY/UdnmTMZbGvI/AAAAAAAABZc/_uBCsqH7iJE/s1600/255.gif adalah URL gambar

Pilihan Gambar :

http://3.bp.blogspot.com/-VgY5HIBADcE/T-Ae_38EuoI/AAAAAAAAEOk/Gs1nSHBGv7I/s1600/bullet_error.png

http://1.bp.blogspot.com/-ESf_DXPfOkA/T-AfAcFN-WI/AAAAAAAAEOs/8D735Aue-Lw/s1600/bullet_home.png

http://2.bp.blogspot.com/-UgEKqjyP6pM/T-AfBcHydVI/AAAAAAAAEO8/NNryZFgmP8U/s1600/bullet_tick.png

http://1.bp.blogspot.com/-e6GJemvAOXc/UdnmTMtn5dI/AAAAAAAABZg/srb3nAVb6pk/s1600/251.gif
http://1.bp.blogspot.com/-EJkzfrdughY/UdnmTMZbGvI/AAAAAAAABZc/_uBCsqH7iJE/s1600/255.gif

http://3.bp.blogspot.com/-iHyDInZidks/T-CQPj0yjcI/AAAAAAAAO5c/8tIQkJQtS98/s1600/star_bullet.png

http://1.bp.blogspot.com/-g3oZgkw7Nf4/T-CRdUryAoI/AAAAAAAAO5s/RWHTvnLzvhg/s1600/Love+icon.png

http://3.bp.blogspot.com/-NOERfdCP5aQ/T-CQ7ZZwLoI/AAAAAAAAO5k/MKiAn2f01iQ/s1600/Green+plus.png
http://3.bp.blogspot.com/-fWwI1sML0sQ/T-Ae-aNwdfI/AAAAAAAAEOU/_fvmTBy-MOY/s1600/11-dot-green.png

http://3.bp.blogspot.com/-o4lLQi8My4E/T-AfA1XL6eI/AAAAAAAAEO0/flMNtnRrbpQ/s1600/bullet_page_white.png

http://4.bp.blogspot.com/-vIaVFIRGpq8/T-AfDTS3hzI/AAAAAAAAEPU/ozdtdue1sVU/s1600/chrome_icon.gif

http://1.bp.blogspot.com/-J1aT05u-5pA/UReVRCHPbsI/AAAAAAAADKg/8J9IEvNVhpU/s1600/bullet-point-1.gif

http://4.bp.blogspot.com/-5xdi-XmzJ9M/UReVRh_w44I/AAAAAAAADKo/0F5adOWchXE/s1600/bullet-point-2.gif

http://3.bp.blogspot.com/-fk3C92N4fnc/UVHt8_rSJGI/AAAAAAAADi4/2qmyDcJUX9Y/s1600/shinemat-love-blue.gif

http://3.bp.blogspot.com/-P6BMwHSo1HA/UcxPJuzG7EI/AAAAAAAABog/OX-f6rrqWD4/s16/love-green.gif

http://4.bp.blogspot.com/-i3VEKmtpXUA/URvSb6VY6lI/AAAAAAAADQs/JEBlMgoix1Q/s1600/plus-blue-saimoom.png

http://3.bp.blogspot.com/-xD_eU6OP-NU/T0awJIr-w6I/AAAAAAAAAlU/WXppP7d6Ypk/s1600/plus-green-saimoom.png
http://3.bp.blogspot.com/-aw-UvZUCHLU/UQrTOUrpjZI/AAAAAAAADAo/qij7A07mNrQ/s1600/pp-icon-2.png
http://2.bp.blogspot.com/-FgOUOPZUeVc/UQrTMrdhJJI/AAAAAAAADAg/jDC4XAoNMZs/s1600/pp-icon-1.png
http://4.bp.blogspot.com/-cstWDyYNXmc/UQrTR0_tWZI/AAAAAAAADA4/i60OVVplMeY/s1600/rp-icon-2.png

http://4.bp.blogspot.com/-MNHtGz92wy4/UQrTP9Xw9bI/AAAAAAAADAw/m2Dj8CCqNHc/s1600/rp-icon-1.png
http://2.bp.blogspot.com/-ciNsbqbUJXI/UVNIKFERJdI/AAAAAAAADkA/0L76cMHJEf8/s1600/shinemat-bullet-green.png
http://2.bp.blogspot.com/-jl3Ixn_NCFw/UVNIJxiK0xI/AAAAAAAADj4/F5vcC2G2VUo/s1600/shinemat-bullet-brown.png

Semoga Blog nya Tambah keren

Read More

Membuat Read More otomatis

Membuat Read More otomatis - Maksud dari Membuat Read More otomatis adalah kita tidak perlu melakukan Insert Jump break / readmore manual. Kita hanya membuat artikel dan Bisa lansung di Publikasikan dan tampilan di home kita akan langsung ada readmore nya...

Cara Membuat Read more Otomatis Di Blogger :

• Login ke Blog anda
• Buka halaman design > Edit HTML
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). 
• Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

• Finish simpan template dan lihat hasilnya 

Kode yang dapat anda ubah :

• summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
• summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
• img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
• img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
• Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img>menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Read More

Cara Buat Bintang Jatuh dari cursor

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

• Login di Blogger
• Pilih Design > Add gadget > HTML/Javascript
• Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat

Read More

Cara Pasang Burung Twitter Terbang

Cara Pasang Burung Terbang Twitter | widget burung twitter terbang

• Klik Layout > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird --><script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script><script type="text/javascript">var birdSprite="http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/s1600/burung+twitter+terbang.png";var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");var twitterAccount = "http://twitter.com/Username";var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";tripleflapInit();</script>

• Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
• Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

• http://3.bp.blogspot.com/-xL1Dk6Bhi4g/TqN5gbyvSCI/AAAAAAAAAGM/jxsjBiRWMLw/s1600/yellow+bird.png

Warna Hitam

• http://1.bp.blogspot.com/-N3RvHfV3MUk/TqN5iPPqAEI/AAAAAAAAAGU/oYKSvsOj108/s1600/black+bird.png

Warna Biru

• http://3.bp.blogspot.com/-FNowQ1mqsLg/TqN5kxq86EI/AAAAAAAAAGc/VzatkjsUAEc/s1600/Blue+bird.png

Warna Coklat

• http://3.bp.blogspot.com/-b-9ncuDJxm0/TqN5nrOnTCI/AAAAAAAAAGk/LREurKp_tLc/s1600/brown+bird.png

Warna Hijau

• http://3.bp.blogspot.com/-SJP4OZmyeCU/TqN5qcyXgGI/AAAAAAAAAGs/jKQaqHF9EkA/s1600/Green+bird.png

Warna Ungu

• http://3.bp.blogspot.com/-Ec4JlrN6yc4/TqN5tIAXDpI/AAAAAAAAAG0/ywnjHeG4ASM/s1600/purple+bird.png

Warna Putih

• http://1.bp.blogspot.com/-qsxd6A0vUFU/TqN5vZVI2-I/AAAAAAAAAG8/lb0Ol5Nbrvw/s1600/white+bird.png

Warna Merah

• http://1.bp.blogspot.com/-knGCnCFCahI/TqN59awa61I/AAAAAAAAAHE/mniE1h9IW14/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Read More