Backround Cute Untuk Blog

       Kalian bisa dapetin backround backround lucu di sini mycutegrafik.com. banyak pilihat grafik disitu, teman teman bisa pilih disitu yaaah pilih sendiri, lalu temen temen coppy paste kode yang temen temen mau (backround).  

Contohnya kaya gini :

 

lalu temen temen mau pasang juga di blog temen temen ? gampang.. cekidot ikuti tutorialnya syalalaa

Pertama

Biasalaah temen temen log in ke blogg temen temen

Kedua

Dashboard > Design > Page Element > Add A Gadget > Html / Javascript


Ketiga
Pate kode backround yang temen pilih dari mycutegrafik.com tadi pada ruang html/javasript

Keempat
Simpan dan lihat hasilnya

 Note : buat temen temen yang mengalami masalah backround bertindih (di atas warna lain, dan di bawah ada warna backround) setelah di masukan mycutegrafik.com.
Silahkan cek disini

 

Simple Template - Buang background bertindan

     Bagi pengguna template simple, kebiasaannya bila teman masukkan kode bakground dalam blog, pada bahagian atas blog akan ada satu background berwarna yang bertindan dengan background yang teman masukkan tu. Contoh macam dalam gambar diatas.

Sebenarnya background bertindan tu boleh dibuang. cekidot ikuti tutorial di bawah :

 

Pertama

Biasa sig in blog teman

 

Kedua

Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

Ketiga

Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari koe in

position: absolute;

Keempat
di dekat kode position: absolute; yang temen temen temui, tremen temen akan nemuin kode seperti di bawah ini

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 100px;
width: 100%;
background: $(body.background);
$(body.background.override)
}

Kelima
naah nilai  100 itu temen temen ganti dengan 0

contohnya kaya gini 

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 100px;
width: 0%;
background: $(body.background);
$(body.background.override)
}

Setelah selesai, temen temen klik preview, jika tidak error temen temen bisa simpen
selamat mencoba .. syalalala
 

Back To Top Button

 

 

Blogger biasanya menggunakan button "back to top" untuk memudahkan pelawat jumppengunjung melompat pada blog yang biasanya mempunyai entry yang panjang ditambah pula dengan komen yang banyak.

Berikut adalah tutorial untuk meletakkan button "Back To Top" dalam blog.

Pertama

Sign in akaun blogger

Kedua

Dashboard > Design > Add A Gadget > Html / Javascript 

Ketiga

Copy paste kod di bawah pada ruang Html / Javascript tadi

 <a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

Note: pada url gambar button dalam kode di atas, gantikan dengan url button pilihan teman. Di bawah ada disediakan pelbagai jenis button "back to top" untuk teman pilih. Just copy url dan letakkan pada url gambar button.
Contoh:

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="http://img205.imageshack.us/img205/7824/74211510.gif"></a>

Url button selain disini, kalian bisa cari di google atau di glitter

 http://img205.imageshack.us/img205/7824/74211510.gif

 

http://img196.imageshack.us/img196/6670/49238758.png

 

 http://img266.imageshack.us/img266/3325/81258407.png

 

http://img13.imageshack.us/img13/5533/20610818.png

 

http://img543.imageshack.us/img543/5941/62667078.png

 

 http://img267.imageshack.us/img267/7242/36935517.png

 

http://img857.imageshack.us/img857/4428/12543870.png

 

http://img17.imageshack.us/img17/3190/51122514.png

 

http://img31.imageshack.us/img31/9105/57461251.png

 

http://img811.imageshack.us/img811/5130/38543106.png

 

http://img26.imageshack.us/img26/2135/83340054.png

 

http://img859.imageshack.us/img859/7859/17455371.png

 

http://img842.imageshack.us/img842/6354/35069921.png

 

http://img853.imageshack.us/img853/6601/14069169.png

 

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/12.gif

udaah selesai? klik save lalu lihat hasilnya
selamat mencoba syalalaa

Kalimat Bergerak Di Menu Bar

    Example

  naahh bisa temen lihat kan contoh di atas itu kaya punya aku, mau tau caranya? cekidot ikutin tutorial nya, syalalaa  

Pertama

Biasa, login blogger teman

Kedua

Dashboard > Design > Add A Gadget > Html / Javascript

 

Ketiga

Coppy paste kode di bawah ini di temat yang Html teman

<script language=javascript>
msg = " kalimat teman di sini";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: ganti 'kalimat teman di sini' dengan kalimat yang teman mau

klik dan lihat hasilnya, selamat mencoba
 

Animated Recent Post Bergambar

  Example:

    Animated recent post bergambar ini akan menunjukkan post tebaru dari blog teman, berfungsi sama seperti widget Recent post bergambar. Widget ini akan berulang-ulang memaparkan preview post terbaru teman (beserta gambar post) seperti yang ditunjukkan di atas. tepatnya kaya punya aku coba teman bisa lihat ke bawah. caranya cekidot ikuti tutorial di baway yoo..

Pertama

Login akun blogger teman

Kedua

Dashboard > Add A Gadget > HTML / Javascript 

 

Ketiga

Copy paste kod dibawah ke ruangan HTML  teman tadi

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jombinabeloganimatedrecentpost/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://jombinabelog.blogspot.com/2011/12/blog-post.html" target="_blank">get this widget here</a></small>

Note : 5  -  jumlah post yang ingin dipaparkan dalam widget ini. 

Kelima
Klik save dan teman lihat hasilnya .. syalalalaa
 

Recent Pos Bergambar

  Example:

 
widget recent post bergambar ini untuk memaparkan post terbaru dalam blog teman. Pada setiap post juga ada diletakkan jumlah komen. Cara ingin pasang widget ini,  ikuti tutorial di bawah, cekidot :  

Pertama

Sign in akaun blogger teman

Kedua

Dashboard > Design > Add A Gadget > Html / Javascript

Ketiga

Copy paste kod di bawah pada ruang Html / Javascript yang teman klik tadi

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[1] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[2] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[3] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[4] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://URL TEMAN.blogspot.com/";

</script>

<script src="https://sites.google.com/site/unwanted86/javascript/recentpostthumnail.js" type="text/javascript"></script>

Note : ada beberapa hal yang harus dirubah diatas yaitu tulisan dengan font warna merah

boxwidth - ukuran lebar widget
borderColor - Warna background (silahkan klik warna yang kalian mau disini)
thumbwidth & thumbheight - lebar dan tinggi gambar post / thumbnail
fntsize - Ukuran tajuk
acolor - Warna tajuk (silahkan klik warna yang kalian mau disini)
aBold - font tajuk di'boldkan' atau tidak (true or false)
numposts - Bilangan recent post yang teman mau dipaparkan
home_page : http://URL TEMAN.blogspot.com/ (Gantikal URL TEMAN dengan url blog anda)

Keempat
Selesai, simpan dan teman lihat hasilnya..

Selamat mencoba

 

Alert message pada blog

  Example :

 

Naah Alert message ini akan muncul ketika blog kita di buka, caranya oke oke come on ikuti diah andani tutorial di bawah ini cekidot

Pertama

Sign in akaun blogger akun blogger teman

Kedua

Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

Ketiga
Copy dan paste kod di bawah pada ruang Html / Javascript yang tadi teman klik

<script> function MYALERT() {
alert("KALIMAT YANG TEMAN SUKA DI SINI"); } MYALERT()
</script>

Note: pada tulisan "KALIMAT YANG TEMAN SUKA DI SINI", masukan kalimat yang kalian suka/ganti kalimat biru tersebut dengan kalimat yang kalian suka.

Keempat
Sudaj selesai dan lihat hasilnya, selamat mencoba teman :)