Cara buat Avatar miring (rotate) pada bagian comment

Akhirnya saya online juga, saya akan membahas tentang gambar koment miring. Untuk membuat image avatar pada bahagian comment blog menjadi miring(rotate) seperti yang anda lihat pada gambar diatas ataupun contoh pada bagian comment blog ini, hanya ikuti beberapa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Design => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan F3 ataupun Ctrl+F, ketik atau paste kod ]]></b:skin> pada ruang Find dan seterusnya tekan Enter.

Langkah 3

Salin kode di bawah dan paste kode tersebut atau diatas kod ]]></b:skin> pada script template (lihat  langkah 2)

.avatar-image-container img {
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
}

Contoh:

 .avatar-image-container img {
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
}
]]></b:skin>

terakhir, klik Preview. Jika tiada peringatan error, klik Save

Read More - Cara buat Avatar miring (rotate) pada bagian comment

Membuat efek bayang-bayang pada gambar

google indonesia

Untuk membuat efek bayang-bayang pada bagian kanan dan bawah gambar seperti yang Anda dapat lihat pada gambar di atas, hanya perlu mengikuti beberapa langkah di bawah ini:

pesan: Silahkan save dulu script template Anda sebelum melakukan editting.

Langkah 1

Login blog => Dashboard => Layout => Edit HTML. Selanjutnya centang Expand Widget Templates

Langkah 2

Tekan Ctrl + F dan ketik kode .Post img { dan seterusnya tekan enter.

Langkah 3

Salin kode di bawah dan pastekan di bawah kode .Post img { (lihat langkah 2)

background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

Contoh:

.post img {
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

Terus save template

Read More - Membuat efek bayang-bayang pada gambar

memberi nomor di komentar dengan icon di blogger

Nah, mari kita ngubek-ngubek Blogger lagi di tahun yang baru ini. Komentar adalah salah satu hal yang ditunggu-tunggu oleh para Blogger karena ada komentar berarti ada yang membaca postingan blogmu (walaupun beberapa blog miskin komentar tetapi bejibun visitor). Hm...kalau komentar merupakan hal yang penting bagi Blogger, so mari kita percantik komentar yang ada di blogmu, cekidot!!

Contohnya seperti yang ada di komentar pada blog ini: 

 

Gimana? keren? cara menyisipkannya ternyata gampang, ikuti saja petunjuk di bawah ini:

1. Masuk ke account Bloggermu lalu cari Tata Letak - Edit HTML

2. Centang "Expand Template Widget" dan cari kode <dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

3. Sisipkan kode diantara 2 kode tadi, yang di warnai merah adalah kode baru yang disisipkan: 

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
<b:loop values='data:post.comments' var='comment'>


4. Setelah itu temukan kode <data:commentPostedByMsg/> , kalau tidak ada temukan kode <data:comment.author/>,&#160;
            </b:if>
5. Masukkan kode di bawah ini setelah kode tadi:

 <!--COMM-NUM-STARTS-->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--COMMNUM-STOPS-->

6. Cari kode </head>

7. Paste kode di bawah ini sebelum kode tadi:

<!--COMM-NUM-STARTS-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS--->
8. Ubah kode biru untuk mengubah warna untuk penomeran, atau ubah kode berwarna merah untuk mengganti background gambarnya.

9. Klik simpan lalu cek komentarmu sekarang, bisa kan?

 Hm..tampaknya sahabat ingin memakai gambar-gambar lain? langsung aja deh ke sumbernya di http://bloggerstop.net/2010/01/numbering-comments-in-bloggerblogspot.html

Read More - memberi nomor di komentar dengan icon di blogger

Efek Link: Link Terbuka Tanpa Di Klik

Satu hal menarik adalah modifikasi soal link. Memang modifikasi soal link tak pernah habis. Kali ini saya akan memberitahu cara bagaimana membuat sebuah link terbuka tanpa klik. Biasanya tujuan link terbuka begitu ada aksi klik, tetapi dengan script ini hanya dengan menyorotnya saja link sudah terbuka.

Cara untuk membuatnya sangatlah simpel, coba perhatikan dua link di bawah ini




Najibblog

Kodenya:
<a href="http://najibblog2010.blogspot.com/">Najibblog</a>


onMouseover="window.location=this.href">Najibblog

 Kodenya:
<a href="http://najibblog2010.blogspot.com/&onMouseover=&window.location=this.href&quot;>Najibblog</a>

Ket: Cukup Anda sorot saja sudah membuka tujuan link

Semoga simpel tetapi bermanfaat.

Read More - Efek Link: Link Terbuka Tanpa Di Klik

Membuat efek roming/bergetar di blog

Mungkin Kamu pernah di kagetkan saat membuka sebuah blog/web yang tiba-tiba roming(mengalami gangguan,seperti bergetar). Belum Pernah? ya kayak punya http://roming-blog.blogspot.com/
.Sudah tahu kan?Nha,Membuat effect roming seperti itu memang bisa dilakukan,caranya pun mudah.


Nih tak kasih Script rahasianya,
1.Copy Kode berikut ini:
<script type='text/javascript'>
//<![CDATA[
scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<80;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/80)
}
window.resizeTo(0,0)
for(b=0;b<80;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/80,0)
}
for(c=0;c<80;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/80)
}
for(d=0;d<80;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/80,0)
}
for(e=0;e<80;e++){
window.resizeTo(scrW*e/80,scrH*e/80)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)
//]]>
</script>

2.Login ke Blogger kamu => Layout=> Edit HTML
3.Kemudian paste-kan kode tadi sebelum kode
4.Kemudian Save Template
5.Selesai

Coba akses blog kamu untuk melihat hasilnya..Semoga BermanfaatFrom: forantum.blogspot.com

Read More - Membuat efek roming/bergetar di blog

Typewriter Effect - Tulisan Bergaya Mengetik

Apakah anda ingin membuat efek tulisan dengan efek mengetik seperti gambar disamping?
Bagi yang pengen buat langsung saja menggunakan jasa site berikut ini http://wigflip.com/screedbot yang merupakan bagian dari Wigflip.

Cara  membuat efek tulisan dengan efek mengetik adalah sebagai berikut:

1. Buka http://wigflip.com/screedbot/
2. Nah ada kotak pengisian teks, diisi aja sesuai keinginan kamu
3. Dibawahnya ada pengaturan

width: lebar kotak
fontsize: ukuran font
juga pengaturan warna latar dan warna font

(komplit juga kan, mudah banget)

4. Kalau sudah mantep klik Create Screed
5. Nah, perhatikan pada bagian atas ada tulisan Here's Your Screed
6. Dibawahnya terdapat gambar animasimu yang sudah jadi
7. Lalu ada pilihan Save it to Filckr atau ImageShack.us jika kamu ingin langsung upload gambar tersebut.
8. Pilih Save it to Computer jika ingin menyimpannya dulu di komputer
9. Sementara untuk penempelan di artikel atau sidebar adalah sebagaimana upload gambar biasa (setelah animasi itu kamu upload).

Siiip deh...

Sumber: http://www.masdoyok.co.cc

Read More - Typewriter Effect - Tulisan Bergaya Mengetik