Wednesday, September 3, 2008

Emoticon di Body Post dan Comment Post

hello minna

sudah lama ya mog ga ngepost apa2, hehehe rada males nih.
jangankan nguprek2 post, untuk posting biasa aja di mogsound, juga jarang mog update. dan gara2 itu, mog yg cuma sekali2 datang buat ngelink jadi dikira nge-Spam hiks2

well thats okay lah, yang penting sekarang mog mo bagi2 tips lagi

tips kali ini tentang Cara Pasang Emoticon di Blog Post and Comment Post mu di Blogger
tips ini sebenarnya mog kutip dr beberapa blog lain, tp yang mog aplikasiin adalah tips dari:
blog roni-pascal, blog cool stuff, dan blog o-om

buat blog lain yang merasa mog kutip tipsnya mohon maaf ya kalo ga mog lupa, silahkan comment-nya biar ntar mog revisi okay ^^

Cara pasang Emoticon di Blog Post;
cara 1.
1. Sign in ke blogger, truss ke Layout > Edit HTML
2. masukkan kode dibawah ini sesudah tanda ]]></b:skin> atau sebelum tanda </head>.

kode dari blog cool stuff (onion + smile emoticon)

<script src="
http://mltan100.googlepages.com/emoticons.js" type="text/javascript"/>

kode mog (onionnya lebih banyak hehehe)

<script src="
https://sites.google.com/site/mogme82/onion-emoticons.js" type="text/javascript"/>

dengan cara ini kamu tidak perlu memasukkan full code untuk menampilkan emoticonnya, kamu cuma perlu input script sederhananya saja. dengan hanya mengetik -/ gwa ha ha- (tanpa spasi) akan muncul emoticon /gwahaha
cara ini yang saat ini mog pake di ke-2 blog mog

beberapa contoh dari mog (gambar 1)


/ omg

/ shock

/ dead

/ froze

/ hm

/ blur

/ sigh

/ floor

/ run

/ sneaky

/ pist

/ curse

/ please

/ blush

/ gwahaha

/ love

/ dirty

/ thumb

/ smart

/ XD


karena terlalu banyak untuk mog jabar, jadi untuk mengetahui lainnya kamu save dulu file java script nya dari url yang mog merahi, lalu bukalah dengan note pad.
 

dengan cara ini juga kamu bisa mengganti isi emoticonnya;
1. buka buka file hosting website (misal sigmirror.com)
2. upload gambar yg kamu mau, ambil urlnya
3. buka java script mog dengan note pad
4. ganti url gambar yg ada di java script mog dengan url yg kamu upload sebelumnya, save
5. buka file hosting website yg tadi lalu upload file javascript yang sudah kamu ganti, ambil url nya
6. input url tersebut dengan mengikuti cara pasang emoticon di blog seperti yang telah mog jelaskan diatas. so jadi deh emoticon mu sendiri ^^

cara 2 silahkan ikuti link ini pascal

next Cara pasang Emoticon di Comment Post (berhubungan dengan cara 1)
sebenarnya ya otomatis dengan input cara 1 dengan memasukkan script yang benar emoticon otomatis juga akan muncul di comment, tp bisa jadi pengunjung ga tau soal ini.
so dengan cara ini kita akan memunculkan sebuah form emoticon (gambar 1) untuk membantu temen kita.

tapi sebelum memasukkan kamu harus menempatkan comment postmu di bawah postingan dulu biar kliatan bagus hehehe, caranya klik disini o-om

nah sesudah itu

1. Sign in ke blogger, truss ke Layout > Edit HTML >centang Expand Template Widget
2. scroll kebawah cari kode ini

<p class='comment-footer'>

3. masukkan kode dibawah ini sesudahnya


<b><table border='1'>
<tr>
<td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/ampun.gif'/>
=/ omg</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/duong.gif'/>
=/ shock</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/mate.gif'/>
=/ dead</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/beku.gif'/>
=/ froze</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/uhuh.gif'/>
=/ hm</td>
</tr>
<tr>
<td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/berkunang2.gif'/>
=/ blur</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/nafas.gif'/>
=/ sigh</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/tidaaa.gif'/>
=/ floor</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/lari2.gif'/>
=/ run</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/nakal.gif'/>
=/ sneaky</td>
</tr>
<tr>
<td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/kesal.gif'/>
=/ pist</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/BUBAK.gif'/>
=/ curse</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/wow2.gif'/>
=/ please</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/malu.gif'/>
=/ blush</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/ketawa.gif'/>
=/ gwahaha</td>
</tr>
<tr>
<td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/cinta.gif'/>
=/ love</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/emoticon/piktor.gif'/>
=/ dirty</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/2good.gif'/>
=/ thumb</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/fufufu.gif'/>
=/ smart</td><td><img border='0' src='http://img.photobucket.com/albums/v174/mog_kupo/movo/mukya.gif'/>
=/ XD</td>
</tr>
</table></b>

ingat lho antara character / dan kalimat emoticonnya jangan ada spasi (mog bikin gitu biar ga ke convert ke gambarnya)

nah bagaimana?

okay happy try



Update 4 maret 2010; mog sudah ganti file host, mudah2an ga bermasalah lagi



Update 28 oktober 2011; filehostingnya bermasalah lagi... sabar ya, mog blom sempat memperbaiki


Update 24 november 2011; yay new file hosting, enjoy the emoticon people :)

Monday, June 2, 2008

Menghilangkan Label Count

label itu digunakan untuk menunjukkan persamaan tema dari post2 yang kita buat.
misal mog menggunakan label layout, untuk judul2 yang memiliki tema mengutak-atik layout.

nah label bisa kamu tampilkan dari layout-add page element-(scroll kebawah) label.
hasilnya



nah tampilan ini bisa kamu utak atik, misal mengganti kurungan angkanya dari () menjadi [], lalu membuat strip pemisah antara label dan kurungan angkanya (label-()) ato (label-[]). ato kaya mog sekarang tidak pakai angka sama sekali.

caranya;
1. kamu harus tau dulu nama label mu, kalo label-nya tidak diberi nama biasanya defaultnya Label1, Label2, dan seterusnya (tergantung jumlah label)
2. kamu buka layout-edit html (save kode kamu ke notepad dulu), trus beri cek list expand widget list.
3. scroll kebawah cari kode ini



<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>



yang berwarna biru adalah nama labelmu, dan yang berwarna merah adalah kode yang akan kita kutak katik

1. untuk mengganti bentuk kurung angka label


[<data:label.count/>]



2. untuk membuat strip pemisah antara label dan kurungan angka


-<data:label.count/>



3. untuk membuat keduanya 1+2


-[<data:label.count/>]




4. dan untuk menghilangkannya, cukup hapus saja dari kode html layout mu ^0^




okay happy try

Wednesday, May 28, 2008

Membuat Scroll Box ke BlogPost

kalo kemarin mog ngasi cara membuat scrolling text, kali ini mog mo ngasi cara membuat scroll box.
scroll box biasanya digunakan untuk menghemat halaman post kita bila kita akan memposting kalimat yang panjang, misalnya puisi atau lirik lagu.
selain itu bisa juga untuk meng-highlight kode HTML agar tidak bergabung dengan isi post, seperti yang sering mog gunakan.

okay lets begin!.
first adalah attribut

1. overflow untuk mengatur tampilan scrollnya.

overflow:auto -auto untuk tampilan scroll bila isi kekecilan, dan tidak scroll bila pas atau kebesaran.
overflow:hidden -hidden untuk menghilangkan isi bila kebesaran.
overflow:scroll -scroll untuk tampilan scrolling kekecilan atopun tidak.

baik hidden mupun scroll memang ga terlalu guna, tp ini untuk kamu sekedar tau aja.

2. border untuk tampilan batas scroll bar, defaultnya (kalau tidak dimasukkan) transparant

border-style:solid -tampilan border garis segi empat.
border-style:dashed -tampilan border garis putus2.
border-style:dotted -tampilan border titik2.
border-style:double -tampilan 2 garis segi empat (minimal 3 pixel agar terlihat).

selain 4 itu ada (groove, ridge, inset, outset) tampilannya bagaimana mog belum nyoba, jadi silahkan coba2 sendiri (^0^).

border-width:input numberpx -untuk tebal border
border-color:input code number -untuk warna, silahkan pilih dari link color code chart berikut RBG color code

3. widht/height untuk ukuran scrollbox, ukurannya dalam satuan pixel dan ga ada default, jadi harus dimasukkan.

widht: input numberpx
height: input numberpx

4. background image untuk menampilkan gambar yg menjadi background scrollbox (gambar akan terpotong/mengulang bila box lebih besar/kecil dr gambar). defaultnya transparant.

background-image:url(masukkan url gambar kamu)

contoh kodenya (kode () diganti <>)


(div style="border: 2px dotted rgb(255, 188, 43); overflow: auto; width: 350px; height: 150px; background-image: url(http://img.photobucket.com/albums/v174/mog_kupo/layout/sbbg1.jpg);")
(left)(p)contoh scroll box-nya mog(/p)(p)scrollnya berborder titik2, berukuran 2pixel, berwarna, akan mengscroll otomatis, lebar 350 pixel, tinggi 150 pixel, dengan background seukuran yang cantik(/p)(p)tidak lupa juga, ditambahi spasi dan bermargin kiri(/p)(/left)(/div)


hasilnya


contoh scroll box-nya mog

scrollnya berborder titik2, berukuran 2pixel, berwarna, akan mengscroll otomatis, lebar 350 pixel, tinggi 150 pixel, dengan background seukuran yang cantik

tidak lupa juga, ditambahi spasi dan bermargin kiri



okay happy try

Tuesday, May 27, 2008

Membuat Rolling Text - Marquee

kode HTML marquee digunakan untuk membuat text yang bergerak-"rolling". text yang di marquee bisa bergerak kiri/kanan atas/bawah dengan kecepatan tertentu yang bisa kamu tentukan sendiri. tapi perlu diingat yang penting itu penempatan, kalo asal bisa2 membuat pusing pembacamu hehehe...

okay pertama2 mari bicara tentang atribut marquee dulu

1. behaviour untuk menentukan apakah akan bergerak sroll-menggulung, atau alternate-memantul. defaultnya (kalo tidak diinput) akan menggulung


behavior="scroll"
behavior="alternate"


2. dirrection untuk menentukan arah gerakan. defaultnya ke kiri/left


direction="left"
direction="right"
direction="up"
direction="down"


3. loop untuk menentukan jumlah gerakan (di input number masukkan angka gerakan), namun untuk beberapa browser bisa jadi ga ngaruh. (tp aku lom pernah nyoba sih hehehe...). defaultnya akan terus berputar


loop="input number"


4. scrollamount untuk menentukan pergerakan text per 1 pixel, jumlah angkanya bisa kamu ganti, semakin besar semakin cepat bergeraknya. kalo ga diisi defaultnya 6. (again aku lom pernah nyoba hehehe...)


scrollamount="1"


5. scrolldelay untuk menentukan interval pergerakan text per milidetik, jumlah angkanya bisa kamu ganti, semakin besar semakin lambat bergeraknya dan minimal 60. kalo ga diisi defaultnya 85. (ini selalu kupake hehehe...)


scrolldelay="100"


6. truespeed digunakan untuk mengganti batas minimal scrolldelay. defaultnya berisi "false", namun bila kamu ini "kecepatan" pada marqueemu ganti dengan "true"


truespeed="true"


7. bgcolor untuk mengubah warna background marquee. untuk memasukkan kode angkanya silahkan klik link chart berikut RGB Color Code


bgcolor: rgb(255,0,0)">#XXXXXX"


8. height/weight untuk mengubah ukuran "kotak" marquee. px untuk kisaran pixel, % untuk berapa persen dari total ukuran text.


height="input numberpx"
height="input number%"
width="input numberpx"
width="input number%"


9. on mouse over untuk menghentikan laju pergerakan ketika text di "sentuh" pointer mouse.


onmouseover="this.stop()" onmouseout="this.start()"


10. kode (diawali) (p) (ditutup) (/P) (()diganti <>)ini digunakan untuk membuat spasi pada text

contohnya (ingat () diganti <>)


(marquee direction="up" height="50px" bgcolor="#ffffcc" scrolldelay="120" onmouseover="this.stop()" onmouseout="this.start()")
(p)contoh marquee(/p)
(p)pada contoh ini mog menggunakan marquee berarah atas, tinggi 50 pixel, berbackground warna, dengan delay interval 120, dan akan berhenti ketika disentuh mouse(/p)(/marquee)


contoh marquee

pada contoh ini mog menggunakan marquee berarah atas, tinggi 50 pixel, berbackground warna, dengan delay interval 120, dan akan berhenti ketika disentuh mouse



silahkan berkreasi dengan menambah atau mengurangi atribut marqueenya untuk membuat marquee-mu lebih bagus

okay happy try

Friday, May 23, 2008

Memutar Video di Blog

yup next is memasang widget pemutar Video di blog.

selain fitur pemutar video original blogger, kita bisa memasukkan video dengan cara lain, yaitu pada dasarnya sama dengan cara memutar musik yang diperlukan adalah kode HTML-nya dimasukkan kesalah satu fasilitas berikut
1. fasilitas edit HTML pada create post, dan
2. fasilitas add page element(HTML/JavaScript) yang ada di layout blog kamu.

untuk mendapatkan kode HTMLnya kita cukup mengcopy-paste kode tersebut dari banyak web2 yang menyediakan pemutar video secara gratis semisal
1. youtube
2. google video
3. veoh, dll

nah yang akan mog jabarkan disini adalah mengkustomisasi ukuran player video tsb.



(object width="425" height="355")(param name="movie" value="http://www.youtube.com/v/5uSR1ELHk2E&hl=en")(/param)(param name="wmode" value="transparent")(/param)(embed src="http://www.youtube.com/v/5uSR1ELHk2E&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355")(/embed)(/object)



untuk merubah ukuran video youtube fokuskan pada ukuran yang diblok merah
ingat agar pas ukurannya harus sesuai panjang dan lebarnya (ini contoh dariku, silahkan beri ukuran sesukamu)



(object width="250" height="209")(param name="movie" value="http://www.youtube.com/v/5uSR1ELHk2E&hl=en")(/param)(param name="wmode" value="transparent")(/param)(embed src="http://www.youtube.com/v/5uSR1ELHk2E&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="250" height="209")(/embed)(/object)



hasilnya...



okay happy try