Selasa, 10 Juni 2014

Blockquote

http://diahandani.blogspot.com/p/diary.html
 
 
  diahandani.blogspot.com
  
Apakah "Blockquote"? "Blockquote" digunakan untuk menunjukkan petikan teks/perenggan daripada sumber yang lain atau dari entri post-post anda yang lama."Blockquote" juga digunakan untuk menunjukkan satu petikan atau kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog. Contoh:
 
diahandani.blogspot.com 
 
Cara bikin blockquote ? mau tau? cekidooott

Pertama
Buka new post atau entri baru

Kedua
Buat entri post seperti biasa, kemudian bila ada petikan atau perenggan yang akan dihighlightkan sebagai blockquote, klik ikon quote, seperti gambar di bawa
 
diahandani.blogspot.com 
Ketiga
Klik dan save.. lihat hasilnya
selamat mencoba.. syalalala
 

Border dan bayang-bayang pada sidebar title

http://diahandani.blogspot.com/p/diary.html
 
  Example
http://diahandani.blogspot.com/ 
 
Mau tau tutorialnya ? cekidoooooott
 
Pertama
Log in blogger temen temen
Kedua
Dashboard > Design > Edit HTML
Ketiga
Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode
h2 {
Keempat
Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAH kod h2 { tadi
* kode ini adalah untuk border bentuk segiempat. Kalau temen temen mau bentuk border yang lain, pilih disini 
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;
note: FFECF5  - kode warna untuk warna background title sidebar temen temen
        000000 -
kode warna untuk warna border title
        C0C0C0 -
kode warna untuk warna bayang-bayang border


UNTUK KODE WARNA KALIAN BISA LIHAT DISINI

Kelima
klik, save dan lihat hasilnya, selmat mencoba syalalalaa 





Border Dan Bayang-Bayang Pada Tajuk Post

http://diahandani.blogspot.com/p/diary.html
 
Example
http://diahandani.blogspot.com/ 
 
Temen temen mau tau kan tutorialnya ? okey.. cekidot
Pertama
Loggin blogger  temen temen

Kedua
Dashboard > Design > Edit HTML 
Ketiga
Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod untuk title post seperti berikut  

untuk pengguna template watermark, Picture Window dan Travel, cari kode
h3.post-title {  
untuk pengguna template Ethereal dan Awesome Inc, cari kode di bawah ini
h3.post-title, h4 {
Keempat
Kemudian copy paste kod di bawah SELEPAS kode yang temen temen cari tadi

     * kod ini adalah untuk border bentuk segiempat. Kalau temen temen mau bentuk border yang lain, pilih disini
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;
contoh kode temen temen
h3.post-title, .comments h4 {
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;
note: FFECF5  - kod warna untuk warna background title post temen temen
        000000 - kod warna untuk warna border title
        C0C0C0 - kod warna untuk warna bayang-bayang border


UNTUK KODE WARNA KALIAN BISA LIHAT DISINI

Kelima
klik, save dan lihat hasilnya, selmat mencoba syalalalaa 
  

Bentuk - Bentuk Border

http://diahandani.blogspot.com/p/diary.html
 
 Border ini bisa temen temen pake buat title post/tajuk post dan bisa juga di title sidebar, dan bisa lainnya juga. Di bawah disediakan bentuk border beserta dengan kodenya. temen temen bisa coppy kode border di bawah untuk something yang temen temen butuhkan.

http://diahandani.blogspot.com/
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;


http://diahandani.blogspot.com/ 
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;



http://diahandani.blogspot.com/ 
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;



http://diahandani.blogspot.com/ 
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;



http://diahandani.blogspot.com/ 
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;



http://diahandani.blogspot.com/ 
-moz-border-radius: 35px;
border-radius: 35px;

Backround Cute Untuk Blog

http://diahandani.blogspot.com/p/diary.html
 
http://diahandani.blogspot.com/ 
 
 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 :
http://diahandani.blogspot.com/
 
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

http://diahandani.blogspot.com/p/diary.html
 
 
 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

http://diahandani.blogspot.com/p/diary.html
 
 
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://diahandani.blogspot.com/
 http://img205.imageshack.us/img205/7824/74211510.gif


http://diahandani.blogspot.com/ 
http://img196.imageshack.us/img196/6670/49238758.png



http://diahandani.blogspot.com/ 
 http://img266.imageshack.us/img266/3325/81258407.png



http://diahandani.blogspot.com/ 
http://img13.imageshack.us/img13/5533/20610818.png



http://diahandani.blogspot.com/ 
http://img543.imageshack.us/img543/5941/62667078.png



http://diahandani.blogspot.com/ 
 http://img267.imageshack.us/img267/7242/36935517.png



http://diahandani.blogspot.com/ 
http://img857.imageshack.us/img857/4428/12543870.png



http://diahandani.blogspot.com/ 
http://img17.imageshack.us/img17/3190/51122514.png



http://diahandani.blogspot.com/ 
http://img31.imageshack.us/img31/9105/57461251.png



http://diahandani.blogspot.com/ 
http://img811.imageshack.us/img811/5130/38543106.png



http://diahandani.blogspot.com/ 
http://img26.imageshack.us/img26/2135/83340054.png



http://diahandani.blogspot.com/ 
http://img859.imageshack.us/img859/7859/17455371.png



http://diahandani.blogspot.com/ 
http://img842.imageshack.us/img842/6354/35069921.png



http://diahandani.blogspot.com/ 
http://img853.imageshack.us/img853/6601/14069169.png



http://diahandani.blogspot.com/ 
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

http://diahandani.blogspot.com/p/diary.html
 
  Example
http://diahandani.blogspot.com/
 
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