Properti Bayangan (Shadow Property) di CSS3
Ada banyak property, selector, dan pseudo-class baru di CSS3, tapi kali ini kita akan coba bermain dengan shadow-property, yaitu efek yang akan memberi bayangan pada objek yang diberi properti bayangan ini.
Text Shadow
Sintak dasarnya adalah seperti ini:
- text-shadow:
* *
yang bertanda * adalah opsional, dapat dipakai atau tidak dipakai.
offsetx adalah jarak horizontal (mendatar) bayangan terhadap teks. Nilai negatif (-) akan membuat bayangan berada disebelah kiri teks.
offsety adalah jarak vertikal (menurun) bayangan terhadap teks. Nilai negatif (-) akan membuat bayangan berada di atas teks.
blur-radius adalah ketajaman dari efek blur.
color adalah warna dari bayangan yang dihasilkan.
Dari sintak di atas, mari kita mulai coba bermain dengan beberapa contoh berikut:
Contoh berikut akan memberikan efek bayangan yang tajam (blur 0).
- text-shadow: 5px 5px 0 #959595;
UT2A MOG MOG
Contoh berikut akan memberikan efek bayangan yang halus (blur 7).
- text-shadow: 5px 5px 7px #959595;
UT2A MOG MOG
Contoh berikut akan memberikan efek bayangan 3D.
- text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;
UT2A MOG MOG
Yang ini akan memberikan efek yang menyala.
- background:black;
- text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;
UT2A MOG MOG
Sekarang Anda tahu, menu yang kami pakai dalam website ini merupakan modifikasi dari contoh di atas.
Box Shadow
Box-shadow intinya sama dengan text-shadow, cuma dia di terapkan pada objek selain teks, bisa pada kotak atau gambar. Sintaknya pun sama, cuma untuk text-shadow diganti dengan box-shadow:
- box-shadow:
* *
Berikut contoh pada objek kotak.
- width:300px; height:50px; padding:5px; background:navy; border: 1px solid black;
- box-shadow: 7px 7px 8px #818181;
- -webkit-box-shadow: 7px 7px 8px #818181;
- -moz-box-shadow: 7px 7px 8px #818181;
- filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
UT2A MOG MOG
Kok di baris terakhir ada tambahan filter? Itu dipakai untuk browser Internet Explorer, karena Internet Explorer punya metode sendiri untuk dapat membaca bayangan.
Hanya Menampilkan Halaman Muka Blog
Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka/homepage blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka.
Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan kode yang kurang lebih tampak seperti ini:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
Tepat di atas kode tersebut, letakkan kode ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='homepage'></b:section>
<b:else/>
dan tepat di bawahnya, letakkan kode ini:
</b:if>
sehingga hasilnya akan menjadi seperti ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='homepage'></b:section>
<b:else/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>
Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen
<b:section>
dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:
Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.
Dangerous Ishhq (2012) DVDScr 450mb
MOVIE INFO:
[TITLE]…………………….[ Dangerous Ishhq (2012)
[DIRECTOR]………………….[ Vikram Bhatt
[RELEASE DATE]………………[ 11 May 2012(India)
[FORMAT]:…………………..[ Matroska (MKV)
[GENRE]:……………………[ Romance, Thriller
[NO OF CDs]…………………[ 1
[FILE SIZE]:………………..[ 450mb
[RESOLUTION]:……………….[ 720x304
[LANGUAGE]:…………………[ Hindi
[SUBTITLES]:………………..[ None
[RELEASE RUNTIME]:…………..[ 02:08:55
[SOURCE]:…………………..[ DDR
[iMDB RATING]:………………[ 4.2/10
SCREENS:
JUMBO FILES SINGLE LINK
MEDIAFIRE LINKS:
CLICK HERE FOR PART 1
CLICK HERE FOR PART 2
CLICK HERE FOR PART 3
JUMBOFILES:
CLICK HERE FOR PART 1
CLICK HERE FOR PART 2
CLICK HERE FOR PART 3
Tom and Jerry: Around the World (2012) DVDRip 350MB Mediafire Movies
Download movies free: Tom and Jerry: Around the World (2012) DVDRip 350MB DVDrip BRRip BluRay 720p High Quality, Small Size from Mediafire, Rapidshare, Jumbofiles, Single Links, Fileserve, Hotfile, Filesonic, mkv film
Info[FORMAT]:…………………..[ Matroska (MKV)
[GENRE]:……………………[ Animation, Comedy, Family
[NO OF CDs]…………………[ 1
[FILE SIZE]:………………..[ 350mb
[RESOLUTION]:……………….[ 680x400
[LANGUAGE]:…………………[ English
[SUBTITLES]:………………..[ None
[RELEASE RUNTIME]:…………..[ 00:52:30
[SOURCE]:…………………..[ DVDRip Xvid-UnknOwN
Download Movies
Hn3.Tom.Jerry.12DVD_Hnmovies.com.mkv
Threaded Comment styles dengan CSS
Tentunya ini memberi kesan decak kagun kepada pengguna blogger. dengan adanya Threaded Comment jadi komentar lebih agak keren dibanding yang standar dulu. Tapi tadi setelah nemu salah satu Blogger Prayag Verma dan menemukan arsip keren bin ajaib tentang Prayag Verma dan sudah saya terapkan pada blog ini, liat bagian bawah dan test dengan komentar kalian :
- Masuk ke Blogger
- Rancangan - Edit Html - Centang Expand Widget Template.
- Kemudian letakkan kode berikut ini diatas kode ]]></b:skin>
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}
Save Template dan lihat hasilnya.
Sekian dulu ya tutorial Threaded Comment styles dengan CSS.
Cara Mematikan tombol ctrl U, ctrl A, ctrl C, dan Disable Klik Kanan
1. Seperti biasa Log In dulu Blogger kamu.
2. Pilih template / Edit HTML pada bagian TAB Rancangan
3. Lalu kamu cari kode <body> (Untuk memudahkan pencarian, tekan CTRL F pada keyboard mu)
4. Nah ganti kode tersebut dengan kode di bawah ini
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
5. Klik pratinjau dulu jika ingin memastikan script di atas bekerja apa tidak.
6. Jika sudah Save Template
Tambahan :
- oncontextmenu=’return false;’ (Berfungsi untuk mematikan fungsi klik kanan / right klik pada mouse)
- onkeydown=’return false;’ (Berfungsi untuk mematikan fungsi CTRL+A dan CTRL+U pada keyboard)
- onmousedown=’return false;’ (Berfungsi untuk mematikan block select pada text/artikel)
- ‘return false;’ (Untuk mengaktifkan script yang digunakan)
Sebagai contoh, Kita hanya ingin mematikan fungsi CTRL U pada blog, maka script yang dimasukan hanya ini :
<body onkeydown='return false;'>
Salam Blogger
Cara Membuat Blog Tidak dapat di Copas, CTRL+U , dan BLock
1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode </head>".
<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>
6. Simpan
Cara men-disable klik kanan dan CTRL+U pada keyboard
1. Masuk ke edit html
2. Cari <body>
3. Gantikan kode tersebut dengan kode dibawah ini
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
4. Simpan
Cara Membuat Blog Tidak dapat di Copas, CTRL+U
1.Login ke Blog
2.Rancangan -->Edit HTML
3.Cari kode </body> Lalu Ganti Kode </body> Dengan Kode Dibawah Ini
<body onkeydown='return false;'>
Selamat Mencoba
Emotion Blackberry
Angry Japanese Emoticons
(*≧m≦*) | (>_<) | (,,#゚Д゚) |
ヽ(o`皿′o)ノ | o(>< )o | o( ><)o |
ヽ(≧Д≦)ノ | (>д<) | (;≧皿≦) |
[○・`Д´・○] | ヽ(#`Д´)ノ | Σ(-`Д´-ノ;)ノ |
(((p(>o<)q))) | (/゚Д゚)/ | (¬д¬。) |
ヽ(#`Д´)ノ | (¬、¬) | (;¬_¬) |
(;¬_¬) | (;¬д¬) | (≧σ≦) |
o(-`д´- 。) | ヽ(●-`Д´-)ノ | (* ̄m ̄) |
(´Д`) | (; ̄Д ̄) | (¬_¬)ノ |
(#`д´)ノ | (」゜ロ゜)」 | Σ(▼□▼メ) |
(━┳━ _ ━┳━) | (┳◇┳) | {{|└(>o< )┘|}} |
\(@O@)/ | (≧▼≦;) | \(〇O〇)/ |
s(・`ヘ´・;)ゞ | (▼へ▼メ) | \(`O´θ/ |
θ\(;¬_¬) | ヽ(`⌒´メ)ノ | 凸(-0-メ) |
凸(`△´+) | 凸(`0´)凸 | 凸(`⌒´メ)凸 |
\(`0´)/ | -`д´- | (>人<) |
Apologizing Emoticons
m(_ _)m | m(._.)m | m(._.)m |
(ノ´д`) | (シ_ _)シ | <(_ _)> |
<(。_。)> | m(_ _;;m | m(¬0¬)m |
Bear Emoticons
( ̄(エ) ̄) | (。・ω・。) | (●`・(エ)・´●) |
(*ノ・ω・) | 川´・ω・`川 | ( (ミ´ω`ミ)) |
ヾ(T(エ)Tヽ) | \(・`(ェ)・)/ | ⊂(ο・㉨・ο)⊃ |
(^(エ)^) | (^(I)^) | ( ̄(エ) ̄)ノ |
⊂( ̄(工) ̄)⊃ | ⊂(^(工)^)⊃ | ⊂(・(ェ)・)⊃ |
(* ̄(エ) ̄*) | ヾ(´(エ)`ノ゙ | (/(エ)\) |
⊂( ̄(エ) ̄)⊃ | “(`(エ)´)ノ | (`(エ)´)ノ |
(ó㉨ò) | (♥ó㉨ò)ノ♡ | (/-(エ)-\) |
(´(エ)`) | ヽ( ̄(エ) ̄)ノ | (/ ̄(エ) ̄)/ |
⊂(◎(工)◎)⊃ | (● ̄(エ) ̄●) | 《/( ̄(エ) ̄)ゞ》 |
Ψ( ̄(エ) ̄)Ψ This bear I think looks especially awesome
┏((= ̄(エ) ̄=))┛An awesome dancing bear
・㉨・ It’s very simple but it totally works
Cat Emoticons
(=^・ェ・^=) | (=^‥^=) | (=^・^=) |
V(=^・ω・^=)v | (=`ω´=) | o(^・x・^)o |
\(=^‥^)/’` | ( =①ω①=) | d(=^・ω・^=)b |
(=TェT=) | (=;ェ;=) | ヽ(=^・ω・^=)丿 |
(=^・ω・^)y= | (^-人-^) | ヽ(^‥^=ゞ) |
(^・ω・^ ) | (=^-ω-^=) | b(=^‥^=)o |
(.=^・ェ・^=) | (=´∇`=) | ヾ(=゚・゚=)ノ |
~(=^‥^)ノ | ~(=^‥^)/ | (=xェx=) |
(=;ェ;=) | (=`ェ´=) | (^・o・^)ノ” |
(^._.^)ノ | └(=^‥^=)┐ | =’①。①’= |
<(*ΦωΦ*)> This is totally an Azumanga Diaoh cat!
Confused Emoticons
(´・_・`) | (◎_◎;) | (`_´)ゞ |
(◎-◎;) | (・_・ヾ | ( ̄(エ) ̄)ゞ |
(-_-)ゞ゛ | (‘◇’)? | ヽ(゜Q。)ノ? |
(´`;) ? | 【・ヘ・?】 | 【・_・?】 |
( ・◇・)? | (゜-゜) | ヾ(´・ ・`。)ノ” |
「(゚ペ) | ( ?´_ゝ`) | o(´^`)o |
(´−`) ンー | (」゚ペ)」 | (•ิ_•ิ)? |
「(°ヘ°) | (。ヘ°) | ヽ(゜Q。)ノ? |
(´`;) ? | 〈(゜。゜) | (゜。゜) |
く(^_・)ゝ | (^~^;)ゞ |
Dancing Emoticons
ヘ(^_^ヘ) | (ノ^_^)ノ | o(^^o) |
(o^^)o | (ノ´_ゝ`)ノ | ヾ(^ ^ゞ |
(ノ‥)ノ | ( ノ^ω^)ノ゚ | ヾ(*´∇`)ノ |
ヾ(・ω・*)ノ | (*ノ´□`)ノ | 。(⌒∇⌒。) |
(。⌒∇⌒)。 | 〜( ̄▽ ̄〜) | (〜 ̄▽ ̄)〜 |
〜(^∇^〜) | (〜^∇^)〜 | 〜( ̄△ ̄〜) |
(〜 ̄△ ̄)〜 | ┗(`ー´)┓ | ┏(`ー´)┛ |
┗(^0^)┓ | ┏(^0^)┛ | (ノ ̄ー ̄)ノ |
ヘ( ̄ー ̄ヘ) | ヘ( ̄ω ̄ヘ) | (ノ ̄ω ̄)ノ |
ヘ(^o^ヘ) | (ノ^o^)ノ | ヾ(-_- )ゞ |
ヾ(@^∇^@)ノ | (ノ≧∀≦)ノ | \(^ω^\) |
(ノ゚▽゚)ノ | ヽ(゚ー゚*ヽ) | ヽ(*゚ー゚*)ノ |
(ノ*゚ー゚)ノ | ヽ(*´Д`*)ノ | (o´・_・)っ |
ヾ(*д*)ノ゛ | ヽ(°◇° )ノ | ヽ( °◇°)ノ |
(ノ°ο°)ノ | (ノ・o・)ノ | ヾ(^^ゞ) |
ヾ(゚∀゚ゞ) | ヽ(´ー`)ノ | ヾ(*⌒ヮ⌒*)ゞ |
〈( ^.^)ノ | ┌(★o☆)┘ | └(★o★)┐ |
♪(┌・。・)┌ |
Dead Emoticons
(x_x;) | (*_*) | (×_×;) |
(×_×# | (#+_+) | (+_+) |
ヾ(×× ) ツ | (Ω_Ω) | へ(>_<へ) |
(*0*;) |
Defeat of Surrender Emoticons
\(--)/ | \(-___________-;)/ | /(;-_-) |
~(>_<。)\ | ((-_-)) | (ー△ー;) |
(◎ー◎;) | (/ _ ; ) | (o_ _)o |
ヘ( ̄  ̄;ヘ) | (;*´Д`)ノ | (ノ_ _)ノ |
ヘ(_ _ヘ) | (ノ ̄д ̄)ノ | (;-_-)ノ |
o(-_-;*) | ヘ(;´Д`ヘ) | (;-_-)/ |
(oT-T)尸 | ヘ(´o`)ヘ | (一。一;;) |
(ノ#-_-)ノ | (~~~) | y-(~。~;) |
( -。-) |
Dog Emoticons
Uo・ェ・oU | ∪・ω・∪ | U。・ェ・。U |
▽・ω・▽ | ▽・w・▽ | U^皿^U |
v・。・V | UTェTU | (^・(I)・^) |
U・♀・U | o(U・ω・)⊃ | (^・x・^) |
(U・x・U) | ▼o・ェ・o▼ | U^ェ^U |
U ̄ー ̄U | ┌U・ェ・U┘ | └@(・ェ・)@┐ |
ヾ(●ω●)ノ Adventure time! | (〓 ̄(∵エ∵) ̄〓) |
Drinking Emoticons
o口(・∀・ ) | (。・・)_且 | 且_(゚◇゚;)ノ゙ |
~旦_(^O^ ) | ( ゜Д゜)⊃旦 | ( ´・ω・`)_且~ |
( ^-^)_旦”" | (*^◇^)_旦 | (*`▽´)_旦~~ |
~(=^‥^)_旦~ | (^-^)_日 | ~~旦_(・o・;) |
( -_-)旦~ | (#´ー´)旦 | 且_(・_・ ) |
Evil, Plotting or Sneaky Emoticons
(・`ω´・) | ψ(`∇´)ψ | (`ー´) |
(。・`ω´・。) | o(`ω´*)o | | `Д´| |
(`ε´) | (σ-`д・´) | (`Д´*) |
(=`〜´=) | (メ`ロ´)/ | Ψ(`▽´)Ψ |
^(#`∀´)_Ψ | (*-`ω´- )人 | (ц`ω´ц*) |
(`∀´)Ψ | ψ(*`ー´)ψ | Ψ(`◇´)Ψ |
“ψ(`∇´)ψ |
Fish Emoticons
>=< | >゜))))彡 | ζ°)))彡 |
>_)))彡 | >^)))< ~~ | (°)#))<< |
(:。)ミ | C:。ミ | (Q )) > |
(°))<< | >°))))彡 | ≧〔゜゜〕≦ |
ミ(・・)ミ | V=(° °)=V | <コ:ミ |
(゜))<< | ミ[°°]ミ | くコ:彡 |
ミ..ミ |
Friends Emoticons
ヽ(∀゜ )人( ゜∀)ノ | (*・∀・)/\(・∀・*) |
\(^∀^)メ(^∀^)ノ | \(★´−`)人(´▽`★)/ |
( ^^)人(^^ ) | (〃⌒▽⌒)八(〃⌒▽⌒〃)八(⌒▽⌒〃) |
☆-(ノ゚Д゚)八(゚Д゚ )ノ | ( 。・_・。)人(。・_・。 ) |
ヽ(*^ー^)人(^ー^*)ノ | ━(○´エ`)(´エ`●)━ |
(◎`・ω・´)人(´・ω・`*) | 。*:★(´・ω・人・ω・`)。:゜★。 |
(*´∀`*人*´∀`*) | (^▽^)/\(^▽^) |
(*^ω^)人(^ω^*) | ヽ(○´∀)乂(*´∀`*)乂(∀`●) |
\(^∀^)メ(^∀^)ノ | ヽ(´Д`)人(´Д`)人(´Д`)ノ〜♪ |
(((*°▽°*)八(*°▽°*)))♪ | ♡(*´∀`*)人(*´∀`*)♡ |
(〃 ̄д ̄)八(  ̄д ̄ )八( ̄д ̄〃) | ヽ(^▽^)人(^▽^)人(^▽^)ノ |
(((@°▽°@)八(@°▽°@))) | (・_・”)/\(・_・”) |
(○`ε´○)/\(○`ε´○) | ヘ( ^o^)ノ\(^_^ ) |
(/^-^(^ ^*)/ | ( 。・_・。)人(。・_・。 ) |
(・_・)〆\(T_T) | (^^)-(^^)-(^^)-(^^)-(^^) |
ヽ(´Д`)人(´Д`)人(´Д`)ノ | ヾ( ̄ー ̄)X(^∇^)ゞ |
♪ヽ( ⌒o⌒)人(⌒-⌒ )v ♪ | (*^o^)人(^o^*) |
\( ^o)( ^ 0 ^ )(o^ )/ | ヽ( ^^)人(^^ )ノ |
(・_・”)/\(・_・”) | └(^o^ )X( ^o^)┘ |
(^○^)オ(^▽^)ハ(^0^)ツ~ | ( ⌒o⌒)人(⌒-⌒ )v |
(°◇°人°◇°) |
Greetings or Goodbyes Emoticons
ヾ(^∇^) | (^-^*)/ | ( ゚▽゚)/ |
( ^_^)/ | (^o^)/ | (^ _ ^)/ |
( ´ ▽ ` )ノ | (ノ´∀`*)ノ | ヾ(´・ω・`) |
☆ミ(o*・ω・)ノ | \(^▽^*) | (*^▽^)/ |
( ̄▽ ̄)ノ | ヾ(-_-;) | ヾ( ‘ – ‘*) |
ヾ(@⌒ー⌒@)ノ | ~ヾ ^∇^ | ~ヾ(^∇^) |
\( ̄O ̄) | (。・ω・)ノ゙ | (*^・ェ・)ノ |
( ̄∠  ̄ )ノ | (* ̄O ̄)ノ | ヾ(。´・_●・`。)☆ |
(/・0・) | (ノ^∇^) | (,, ・∀・)ノ゛ |
(。・д・)ノ゙ | \(°o°;) | (。´∀`)ノ |
(o´ω`o)ノ | ( ・ω・)ノ | (。^_・)ノ |
( ・_・)ノ | \(-o- ) | (。-ω-)ノ |
\(-_- ) | \( ・_・) | ヾ(´¬`)ノ |
ヾ(☆▽☆) | (^ Q ^)/゛ | ~(^◇^)/ |
ヘ(‘◇’、)/ | ヘ(°◇、°)ノ | ヘ(°¬°)ノ |
ヘ(゜Д、゜)ノ | ( ゜ρ゜)ノ | ー( ´ ▽ ` )ノ |
Happy or Joyful Emoticons
(●´∀`●) | (`・ω・´)” | ヽ(;▽;)ノ |
ヽ(;▽;)ノ | (*´・v・) | (((o(*゚▽゚*)o))) |
☆*:.。. o(≧▽≦)o .。.:*☆ | (⌒▽⌒)☆ | ⊂((・▽・))⊃ |
(≧∇≦)/ | (´∇ノ`*)ノ | (・◇・) |
( ´ ▽ ` )ノ | (^_^) | ( ̄ー ̄) |
(*^▽^*) | (^▽^) | (’-’*) |
∩( ・ω・)∩ | (*≧▽≦) | \(^ ^)/ |
O(≧∇≦)O | ( ´∀`) | (^~^) |
\(@ ̄∇ ̄@)/ | (☆^O^☆) | (★^O^★) |
(☆^ー^☆) | (´ω`★) | \(T∇T)/ |
ヽ(*≧ω≦)ノ | *(*´∀`*)☆ | O(≧▽≦)O |
ヽ(*⌒∇⌒*)ノ | d=(´▽`)=b | \(*T▽T*)/ |
ヽ(‘ ∇‘ )ノ | (*^ワ^*) | ヽ(^Д^)ノ |
(´∀`) | (°◇°;) | (゜▽゜;) |
(/^▽^)/ | (ノ´ー`)ノ | ヽ(´ー`)ノ |
( ^∇^) | \( `.∀´)/ | (●⌒∇⌒●) |
o(≧∇≦o) | ヽ(`◇´)/ | ヽ(*・ω・)ノ |
(^ω^) | 。◕‿◕。 | ⊙ω⊙ |
⊙△⊙ | ⊙▽⊙ | o (◡‿◡✿) |
(◕‿◕✿) | (∩_∩) | 。◕‿◕。 |
(•ิ_•ิ) | (/•ิ_•ิ)/ | (ΦωΦ) |
(*^^*) | (^⊆^) | (-^〇^-) |
(ノ*゜▽゜*) | ヾ(´▽`;)ゝ | (゜▼゜*) |
( ̄个 ̄) | \(^▽^@)ノ | (“⌒∇⌒”) |
へ(゜∇、°)へ | (-^〇^-) | (>y<) |
ヽ(^。^)丿 | (ヘ。ヘ) | (^v^) |
ヾ(@^▽^@)ノ | ヾ(@°▽°@)ノ | ヾ(@^▽^@)ノ |
ヾ(@^∇^@)ノ | o((*^▽^*))o | ヾ(@゜∇゜@)ノ |
ヾ(@゜▽゜@)ノ | (@´_`@) | ヾ(@† ▽ †@)ノ |
(ノ>▽<。)ノ | \(@;◇;@)/ | \(☆o◎)/ |
(((\(@v@)/))) | (°◇°;) | (゜▽゜;) |
(o;TωT)o | ヽ(;^o^ヽ) | (⌒▽⌒ゞ |
“ヽ(´▽`)ノ” | (((o(*゚▽゚*)o))) | ヾ(@⌒ー⌒@)ノ |
Ψ(´▽`)Ψ | (v^_^)v |
Hiding Emoticons
|・ω・`) | ヘ(・_| | |−・;) |
|ω・) | |_・) |
Infatuation or in Love Emoticons
(´∀`)♡ | (‘∀’●)♡ | (*´▽`*) |
(*°∀°)=3 | (´ω`♡%) | ヽ(愛´∀`愛)ノ |
♡o。.(✿ฺ。 ✿ฺ) | (。・ω・。)ノ♡ | (●´∀`)ノ♡ |
♡^▽^♡ | (。-_-。 )人( 。-_-。) | (●♡∀♡) |
(_´ω`) | (´ ▽`).。o♡ | (o⌒.⌒o) |
(人´∀`*) | (〃・・〃) | ♥(ノ´∀`) |
(ღ˘⌣˘ღ) | (。’▽’。)♡ |
Kissing Emoticons
(´ε` )♡ | ~(^з^)-☆ | |°з°| |
(_ε_) | (‘ε’) | |( ̄3 ̄)| |
( ̄ε ̄@) | (*^3^) | (´ε`*) |
(○´3`)ノ | (☆´3`) | (* ̄з ̄) |
(づ ̄ ³ ̄)づ | (○゜ε^○) | (TεT) |
(-ε- ) | (@ーεー@) | (*^3^)/~☆ |
ლ(|||⌒εー|||)ლ |
Laughing Emoticons
(・∀・) | ( ´∀`) | (⌒▽⌒) |
(^v^) |
Mellow or Whatever Emoticons
ヽ(´ー`)┌ | ┗┐ヽ(′Д、`*)ノ┌┛ | ヽ( ´¬`)ノ |
┗┃・ ■ ・┃┛ | ヾ(´A`)ノ゚ | ヽ(・_・;)ノ |
ヽ(  ̄д ̄;)ノ | \(〇_o)/ | ヽ(。_°)ノ |
\(;´□`)/ | ヾ(*´ー`)ノ | ヽ(‘ー`)ノ |
ヽ(ー_ー )ノ | ヽ(´~`;) | ┐(‘~`;)┌ |
ヽ(*ω。)ノ | (;´・`)> | (^~^) |
Miscellaneous Animal Emoticons
(=゚ω゚)ノ | (○’ω’○) | [´・ω・`] |
ヾ(。・ω・。) | (´-ω-`) | (*・ω・) |
(*-ω-) | ┗(・ω・;)┛ | {・ω-*} |
(* >ω<) | ヾ(o・ω・)ノ | w(´・ω・`)w |
(´・ω・`) | (・ω・;) | Σ(・ω・`|||) |
ヾ(・ω・o) | (´o・┏ω┓・o`) | ヽ(・ω・。)ノ |
(ノ・ω・)ノ゙ | ヽ(・ω・ゞ) | ヾ(・ω・`。) |
(。-`ω´-) | (=゚ω゚)ノ | (。+・`ω・´) |
ヽ(。ゝω・。)ノ | (´・ω・`) | ⊂^j^⊃ |
(⊂((・⊥・))⊃) | ~(-仝-)~ | ⊂((〃’⊥’〃))⊃ |
○(・x・) | ◎▼◎ | (-Φ-) |
⊆(⌒◎⌒)⊇ | ≫(‘♀’)≪ | (’∽’) |
(≡・ x ・≡) | (∵) | Σ( ゚ω゚;≡⊃ |
ヽ(´・ω・`)、 | (*´ω`)o | (´・ω・)ノ |
~(-仝-)~ | ~>゜)~~~~ | >°)m~~~∈ |
~>°)mニニニニ=~ | (∩ё∩) | ~>`)~~~ |
]^:山 |
༼´◓ɷ◔`༽ This could very well be Pedobear…
Miscellaneous Japanese Emoticons
(´Д` ) | ・゜・(ノД`) | ヽ(´Д`ヽ |
(ゝ。∂) | (-_\) | ( ゚,_ゝ゚) |
ヽ(・∀・)ノ | ヽ(*´Д`*)ノ | v(。-_-。)v |
(^凹^) | ( ゚д゚) | (/・・)ノ |
(ノ・ェ・)ノ | \(゚ー゚\) | o(‧”’‧) |
(◕〝◕) | ( c//”-}{-*\x) | (◐ o ◑ ) |
(;´_ヘ;) | (πーπ) | w(@。@;)w |
\(●o○;)ノ | (V)o\o;;(V) | ($0$) |
(o。o;) | ヘ(゜◇、゜)ノ | ☆⌒(*^-°)v |
☆⌒(*^∇゜)v | m{oYo}屮 | *~●>^) |
━━☆>^) | (´・` ) | (^ц^ ) |
☆彡 ★彡 ☆彡 ★彡
☆.。.:*・°☆.。.:*・°☆.。.:*・°☆.。.:*・°☆
`*:;,.★ ~☆・:.,;*
Miscellaneous Action Japanese Emoticons
Flipping over a table in anger: (╯°□°)╯︵ ┻━┻Putting the table back nicely: ┬──┬◡ノ(° -°ノ)
Throwing the guy who put the table back nicely: (╯°Д°)╯︵/(.□ . \)
Taking a memo: 〆(・∀・@)
Picking something up: ((((*。_。)_
Throwing something: (*・_・)ノ⌒*
Praying or hoping: 八(^□^*)
Pointing: (?・・)σ
Calling: (ι´Д`)ノ
Thumbs up: d(-_^)
Whisper to someone: ( ゚∀(・-・)
Cheering: p(*^-^*)q
Poking someone: (*・)σσσ(*゜Д゜*)
Shower: ヽ`、ヽ`ヽ(* ̄o ̄*)>ヽ`、ヽ`
Holding a gun: ¬o( ̄- ̄メ)
Spraying something: ( ^)/占~~~~~
Playing with a yoyo: (*^^)/~~~~~~~~~~◎
Hitting someone: (。_°☆\(- – )
Two people fighting: ( `_)乂(_’ )
A different two people fighting: O( `_´)乂(`_´ )O
A salute! “Yessir, I’m working on it!”: (`・ω・´)ゞ
Hi-Five: (●ゝω)ノヽ(∀<●)
Giving someone the finger! 凸(⊙▂⊙✖ )
Glomp (with a kiss)! (づ ̄ ³ ̄)づ
Lower those eyebrows! ๏[-ิ_•ิ]๏
Playing Ping Pong: ( ^o)ρ┳┻┳°σ(o^ )
Playing Ping Pong: ヽ(^o^)ρ┳┻┳°σ(^o^)/
Playing Catch: (/_^)/ ● \(^_\)
Bowling: =( ^o^)ノ ...…___o
Playing Tennis: (-^-^)p_____|_o____q(^-^ )
Playing Volleyball: (/o^)/ °⊥ \(^o\)
Patting someone on the head: (o・_・)ノ”(ノ_<。)
Shot in the head with an arrow: ―(T_T)→
Licking Lips: ლ(´ڡ`ლ)
Monkey Emoticons
@(o・ェ・)@ | └@(・ェ・)@┐ | @(。・o・)@ |
@(o・ェ・o)@ | @(/o・ェ・o)@/ | @(*^ェ^)@ |
Mustache Emoticons
(´┏o┓`) | ミ(´┏ω┓`)/ | (´┏・┓`) |
( ̄┏Д┓ ̄°*) | ( ̄┏Д┓ ̄ ) | (  ̄┏_┓ ̄) |
(ノ≧┏Д┓≦)ノ | ( ̄┏∞┓ ̄) |
Painful Emoticons
☆⌒(>。≪) | ☆ ̄(>。☆) | ~(>_<~) |
ヘ(>_<ヘ) | (。_+)\ | (xLx)ヾ |
/(*ι*)ヾ | (ノ>ノ) | /(x~x)\ |
◎☆(♯××)┘ | ヘ(。□°)ヘ |
Pig Emoticons
( ´(00)`) | ヾ(;゚(OO)゚)ノ | ヽ(*’(OO)’)ノ |
( ̄(oo) ̄)ノ | (○`(●●)´○)ノ | (*’(OO)’*) |
( ´(00)`) | (;゚(OO)゚) | (*´(00)`)’ |
ヽ(*’(OO)’)ノ゚ | q( ̄(oo) ̄)p | 。゚(゚´(00)`゚)゚。 |
( ̄(∞) ̄) | ( ̄(▽▽) ̄) | (=`(∞)´=) |
Sad or Crying Emoticons
( ; ; ) | (T_T) | ( TДT) |
(ToT) | (T▽T) | (‘A`) |
(;_・)A single tear… | (T_T) | ((T.T; ) |
(; T.T)) | (;へ:) | (ノД`)・゜・。 |
・(/Д`)・ | (´_`。) | (´Д`。) |
(´A`。) | (´∩`。) | 。:゚(。ノω\。)゚・。 |
(┳Д┳) | (´;д;`) | (*´;ェ;`*) |
。・゚゚・(>д<)・゚゚・。 | (。┰ω┰。) | (゜´Д`゜) |
(iДi) | (´;ω;`) | 。゚(゚ノД`゚)゚。 |
ヽ(´□`。)ノ | (゚´Д`゚)゚ | {{p´Д`q}} |
ヽ(●゚´Д`゚●)ノ゚ | ( p_q) | .・゜゜・(/。\)・゜゜・. |
(个_个) | ((´д`)) | ( ≧Д≦) |
。゜(`Д´)゜。 | (。┰ω┰。) | p(´⌒`。q) |
(/□\*)・゜ | ((o(;△;)o)) | (; ̄д ̄) |
(ㄒoㄒ) | ⊙︿⊙ | o(╥﹏╥)o |
o(;△;)o | (;*△*;) | (´_`) |
╥﹏╥ |
Scared Emoticons
(ノдヽ) | ヽ(゚Д゚)ノ | (/。\) |
(/_\) | (/.\) |
Shocked or Surprised Emoticons
( ꒪Д꒪)ノ | (((( ;°Д°)))) | ((((;゜Д゜))) |
(゜◇゜) | ( ̄□ ̄;) | ∑(O_O;) |
\(>o<)ノ | ━Σ(゚Д゚|||)━ | Σ(゜ロ゜;) |
Σ(゜゜) | (*゚ロ゚) | (」゜ロ゜)」 |
щ(゜ロ゜щ) | (ノ゚0゚)ノ~ | ⊙▂⊙ |
⊙0⊙ | w(°o°)w | L(・o・)」 |
(○o○) | (・□・;) | ((((;゜Д゜))) |
Shy, Embarrassed or Bashful Emoticons
(^_^;) | (^^ゞ | (^^;) |
(#^.^#) | (‘-’*) | (*^^*) |
(@´_`@) | (⌒_⌒;) | (#`ε´#ゞ |
(*/∇\*) | (〃 ̄ω ̄〃ゞ | (*´ェ`*) |
(*´∀`*) | (*´_ゝ`) | (*´∀`*) |
(/ω\) | (*ノ▽ノ) | (*ノωノ) |
(/。\) | (。-_-。) | (#/。\#) |
Singing Emoticons
ヾ(´□`* )ノ | (^O^☆♪ | \(^o^)/ |
(´▽`)ノ♪ | “ヽ(´▽`)ノ” | ヽ(´▽`;)/♪ |
ヽ(´・`)ノ | ヽ(○´∀`)ノ♪ | ヾ(´ρ`)〃 |
ヾ(´〇`)ノ | (´△`)♪ | (ノ´▽`)ノ♪ |
Sleeping, Tired or Waking Up Emoticons
Σ( ̄。 ̄ノ)ノ | (-ェ-)。o | (;´ρ`) |
(*´ο`*) | ε-(´・`) | \(o ̄∇ ̄o)/ |
\(´O`)/ | [(--)]zzz | (´~`) |
ヾ(。 ̄□ ̄)ツ | ヾ( ̄0 ̄; )ノ | ヾ(。 ̄□ ̄)ツ |
ヾ( ̄□ ̄;)ノ | (。-ω-)zzz | (-_-) zzz |
(∪。∪)。。。zzz | (´〜`*) zzz | ∑( ̄□ ̄) |
(o´Д`) | ()´д`() | (;≧皿≦) |
(´□`川) |
(_ _)ヾ(‘ロ‘) Waking someone up
Smug Emoticons
ー( ̄~ ̄)ξ | ((( ̄へ ̄井) | (`へ´*)ノ |
( ̄^ ̄) | ( ̄へ ̄) | ( ̄~ ̄;) |
( ̄ェ ̄;) | (-、-) | ( ;`ヘ´) |
o(´^`)o | ( ̄ω ̄;) | (`^´)ノ |
Winking Emoticons
(^_-) | (-o⌒) | (^_−) |
(^_-) | (^_−)☆ | (⌒.−)=★ |
(^_-) | (^_・) | ๏[-ิ_•ิ]๏ |
(○゜ε^○) | (^_-)≡★ | ☆~(ゝ。∂) |
\(^0^)/ |
Worried Emoticons
(ーー;) | ( ;´Д`) | (; ̄ェ ̄) |
ヽ( ̄д ̄;)ノ | ( ̄◇ ̄;) | ヽ( ̄д ̄;)ノ |
(−_−;) | (~_~;) | ((*゜Д゜)ゞ” |
(・_-。 ) | ⊙﹏⊙ | ミ●﹏☉ミ |
(-’๏_๏’-) | (⊙…⊙ ) | ( ´△`) |
(;° ロ°) | ヽ(゜ロ゜;)ノ | (°o°;) |
Writing Emoticons
φ( ̄ー ̄ )ノ | φ(°ρ°*)メ | _φ(□□ヘ) |
_φ( ̄ー ̄ ) | φ(._.) | φ(..) |
___ψ(‥ ) | ψ(。。) | φ(◎◎ヘ) |
_φ( °-°)/ | _φ(°-°=) | φ(◎◎へ) |
φ(^∇^ ) | _〆(。。) | φ(..;) |
φ(・ω・` ) Semoga bermanfaat, dan selamat menyoba. :D |
10 Website Pengguna JavaScript Mengagumkan
Recent Comment dengan Tooltip
KODE :
<script type='text/javascript' src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<style type='text/css'>
/* Beauty Recent JSON Comments Sidebar 2.0 */
#komentar {margin:0;padding:0;background:transparent;box-shadow:0px 1px 3px #000;box-shadow:inset 0px 0px 5px #000;
border: 2px solid rgba(255, 255, 255, 0.03);}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li:first-child {border-top:none;}
#komentar ul li {height:46px;border-bottom:1px solid rgba(255, 255, 255, 0.03);border-top:1px solid rgba(255, 255, 255, 0.03);padding:2px 0;list-style:none;}
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background-color:#222;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img {border: 2px solid #ffffff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;}
#komentar ul li div.ismen {color:#ffffff;text-shadow:-1px -1px 1px rgba(255, 255, 255, 0.03);}
#komentar .ismen {display: block;font-size: 1.2em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
#komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid red;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 450px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid red;}
#komentar .gamen:hover>span{opacity: 0.9;bottom:50px}
</style>
<script type='text/javascript'>//<![CDATA[
var jmlkomentar = 10;
var jmlkarakter = 100;
//]]>
</script>
<div id='komentar'>
<ul><script type="text/javascript" src="http://ut2a-4down.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul>
</div>
Highlight Color Style Block
Untuk contohnya silahkan block teks yang ada dibawah, yang terlihat warna teksnya berubah menjadi warna pink. itulah yang saya maksud ditutorial ini.
Cukup Letakkan kode berikut diatas kode ]]></b:skin>
/* HTML5 Color Select STYLES */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:
#FF5E99
; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color:
#FF5E99
; }
Text-Shadow Cool
DEMO
KODE CSS :
/*cooltext*/
#cooltext {font: 3.1em/1.3em dicotmedium;
font-weight: bold;
color:#111;
text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;
}
#cooltext:hover{color:#fff;
text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00FCDA,0 0 70px #00FCDA,0 0 80px #00FCDA,0 0 100px #00FCDA,0 0 150px #00FCDA;
}
KODE HTML :
- <div id="cooltext">TEKS HERE</div>
HTML Marque
code:
Sample:
code:
Sample:
code:
<marquee behavior="scroll" direction="down">MARQUEE BEHAVIOUR-SCROLL DIRECTION-DOWN</marquee>
Sample:
code:
Sample:
code:
Berikut Penggunaan gambar pada tag marquee:
Membuat Artikel Terkait (Related Post) di Sidebar
Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.
Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).
Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:
1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
4. Lanjutkan dengan mencari kode berikut:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
5. Ganti kode tersebut dengan kode di bawah ini:
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.
6. Save Templates (belum selesai...)
7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:
Lalu masukkan kode berikut ini di gadget Anda.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
8. Jika sudah klik Save dan lihat semua perubahannya.
Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam
Back To Top jQuery
Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik bacaan "back to top".
Tahapan Pembuatan Back to Top - Jquery:
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jquery berikut diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<!-- Back To Top -->
<script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->
4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti : <body id='top'>
5. Lalu masukan CSS dibawah sebelum kode ]]></b:skin>
#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}
6. Lalu Masukkan kode HTML berikut diatas </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
7. Simpan template. Dan berhasil.
Keterangan:
- Script jquery jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- 'id=top' atau '#top-link' anda dapat rubah, itu merupakan kunci perintah dari effect.
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
- Script back to top ini dikembangkan dari smooth page scroll.
Twitter Buttons Animasi Pilihan
Tiggal Pilih Sesuka hati anda.
Semoga Bermanfaat bagi anda. ^^