Widget Recent Comments u Blogger Template Designer

Widget Recent Comments ini sangat kompatibel untuk semua semua template blogger, baik Template Tata Letak (template lama/old template) maupun Blogger Template Designer (template baru/new blogger template). Menggunakan widget recent comment sebenarnya sangat bermanfaat, tidak hanya bagi pemilik blog ataupun pengunjung blog, terlebih pemberi komentar yang memerlukan tanggapan atau jawaban author. Dengan digunakannya widget recent comments maka komentar-komentar dari keseluruhan posting akan terkumpul dalam sebuah box khusus yang dengan mudah dibaca pengunjung tanpa. Hal seperti ini akan membuat pengunjung atau pemberi komentar secara cepat mengetahui ada atau tidaknya tanggapan/jawaban terhadap komentar/pertanyaan yang diajukan. Widget Recent Comments sendiri menggunakan javascript yang hanya terdiri dari beberapa baris sehingga loading blog juga tidak akan terlalu terbebani. Satu keuntungan lebih dari widget ini adalah pada tingkat kecepatan untuk menampilkan recent comments. Sangat jauh lebih cepat dibanding widget recent comments bawaan/yang disertakan blogger pada "Add a Gadget".

Javascript dan xHTML Recent Comments

<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/GRrecent.comments.js" type="text/javascript"></script>
<div style="max-height:300px;overflow:auto;">
<script src="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

Cara menggunakan widget recent comments

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan javascript dan xHTML widget Recent Comments dalam box HTML/Javascript.
   • Ganti kode berwarna merah pada :
     http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com sesuai dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

D E M O

Lihat recent comments dalam blog ini!

Catatan :

Dalam demo ini widget telah mengalami banyak modifikasi. Jika anda ingin membuat yang seperti terlihat dalam demo, silahkan tunggu tutorialnya di http://gubhugreyot.blogspot.com

Displaying text on images with rgba background & CSS3 transition

Selama ini jika anda ingin menampilkan teks pada sebuah image, cara yang bisa digunakan adalah dengan membuat caption. Menampilkan caption dapat dilakukan dengan memanfaatkan fitur yang telah disediakan blogger atau yang lain dengan cara klik Add Caption. Sekalipun sangat mudah dilakukan, tetapi ternyata amat jarang blogger yang memanfaatkan fitur Add Caption. Beberapa hal mungkin menjadi pertimbangan, seperti misalnya keterangan tentang gambar/image dapat disampaikan langsung melalui teks posting, melalui tooltip atau bahkan beberapa menganggap penambahan caption justru mengganggu pola penataan blog.

Ada sebuah solusi lain untuk emnampilkan teks image. Tidak dengan menambah teks di atas atau di bawah image seperti caption, namun teks ditampilkan di atas image. Teks yang disertai effek ini tidak akan mengganggu image yang ditampilkan karena dengan sebuah trik melalui kode css, maka ketika cursor berada di atas image maka teks akan menghilang. Disamping tidak memerlukan sebuah ruang khusus, penggunaan metode menampilkan teks seperti ini justru akan membuat blog semakin menarik. CSS3 transition mampu memberi sebuah tampilan dan effek sangat menarik ketika didalamnya juga melibatkan opacity effect.

D E M O

Anda bisa mengganti caption dalam bentuk seperti ini.

Cara yang cukup cantik untuk membuat blog semakin menarik.

gubhugreyot

Kode CSS :

.GRimgcaps{float:left;position:relative;display:block;}
.GRimgcaps img{width:100%;height:100%;padding:0;box-shadow:0 0 0 #fff;}
.GRimgcaps span{position:absolute;right:0;top:0;padding:2%;font-size:14px;max-width:35%;height:100%;display:block;background:rgba(255,255,255,0.7);-moz-transition:1s linear 1s;text-shadow:2px 2px 2px #666;text-align:center;}
.GRimgcaps span p{font-family:"MS Serif","New York",serif;color:#000;margin:6px 0;padding:0;}
.GRimgcaps span p.fs22{font-size:22px;}
.GRimgcaps span p.fs16{font-size:16px;}
.GRimgcaps span p.fs18{font-size:18px;}
.GRimgcaps:hover span{opacity:0;filter:alpha(opacity=0);}

Kode CSS :

<a href="http://lightbox-demo-tutorial.blogspot.com/" target="_blank" class="GRimgcaps" style="width:400px;height:300px;margin:10px 0;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6S8yPmJ_xkEgDsiIOdiz-ZYiKGl3mnAruIJ-HpBOdqsrQj9dOIXhPSbsWfC37e_Cn0oYwpj19etz7FPnpZdLpU47gmmSQLxxNa7W88OhbFGFiCCCfltVYxqzKes8eQ-RURuU795thGs/s400/img_gubhugreyot-house2.jpg" /><span><p class="fs18">Anda bisa mengganti caption dalam bentuk seperti ini.</p><p class="fs16">Cara yang cukup cantik untuk membuat blog semakin menarik.</p><p class="fs18">gubhugreyot</p></span></a>

Cara menggunakan kode :

1. Login ke blogger
   
   • Tuliskan "User Name" (untuk gmail) dan Alamat email lengkap (non gmail).
   • Tuliskan "Password (Kata sandi").
   • Klik "Sign in".
2. Beberapa saat setelah login akan terlihat "Halaman Dasbor (Dasboard)".
   Klik "Rancangan (Design)". Tunggu beberapa saat!.
3. Lanjutkan dengan klik "Edit HTML".
4. Anda akan menjumpai box "Edit Template" yang penuh dengan kode html (berupa kode css, javascript dan xHTML).
   Cari kode ]]></b:skin>.
5. Copy dan paste-kan kode css di atas ]]></b:skin>.
6. Klik "Simpan Template (Save Template)".
7. Gunakan xHTML di box posting.

Catatan/Keterangan :

1. Anda dapat menggunakan class="fs16", class="fs18", class="fs22" untuk membuat teks dengan ukuran 16px, 18px dan 22px pada tag "p".
2. width:400px;height:300px adalah ukuran image. Ukuran ini merupakan ukuran image yang akan ditampilkan.
3. Simpan kode CSS di atas ]]></b:skin> dan gunakan xHTML untuk posting.

Beberapa effek image dengan onmouseover dan onmouseout

Javascript MouseOver & MouseOut

Jika pada posting sebelumnya sudah dibahas penggunaan onmouseover dan onmouseout terhadap penggunaan css property yang melibatkan perubahan background, border dan beberapa property css yang lain, untuk kali ini kita akan mencoba menggunakan onmouseover dan onmouseout untuk menciptakan beberapa effek pada gambar posting. Dengan onmouseover dan onmouseout anda dapat merubah image menjadi lebih besar (zoom), membuat transparansi image dan menampilkan 2 atau tiga image dalam satu posisi (tempat).

Effect-1

Dengan floating posisition yang digunakan pada link (tag "a") dan posisi absolute pada image, sebuah image posting dapat dibuat seperti ini. Perubahan ukuran image ketika cursor berada di atas gambar tak akan mempengaruhi posisi atau kedudukan obyek lain disekitarnya. Anda bisa menggunakan model seperti ini hanya menggunakan onmouseover dan onmouseout tanpa perlu menggunakan kode css lain yang harus disimpan dalam template anda. Bagaimana? Praktis, mudah dan menarik, khan?

xHTML Effect-1 :

<a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Mau lihat yang lebih hot? Hoo...hooo ..., jangan malu2... kliiik sekali saja!" style="position:relative;float:left;display:block;margin:5px 15px 5px 0;width:154px;height:154px;"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="position:absolute;left:0;top:0;border:4px solid #555;border-radius:5px;" onmouseover="this.border='4px solid blue';this.style.width='400px';this.style.height='400px';this.style.zIndex='999';this.style.opacity='0.75';this.style.filter.alpha.Opacity='75';" onmouseout="this.src='https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg';this.border='4px solid #333';this.style.width='144px';this.style.height='144px';this.style.zIndex='2';" /></a>Dengan floating posisition yang digunakan pada link (tag "a") dan posisi absolute pada image, sebuah image posting dapat dibuat seperti ini. Perubahan ukuran image ketika cursor berada di atas gambar tak akan mempengaruhi posisi atau kedudukan obyek lain disekitarnya. Anda bisa menggunakan model seperti ini hanya menggunakan onmouseover dan onmouseout tanpa perlu menggunakan kode css lain yang harus disimpan dalam template anda. Bagaimana? Praktis, mudah dan menarik, khan?

Untuk membuat effek pada gambar dengan onmouseover dan onmouseout anda perlu mengetahui cara menuliskan beberapa properti kode css dalam standart penulisan di javascript. Ada cukup banyak properti css ini yang bisa kita gunakan selain beberapa yang dipakai dalam effek ini. Data yang berupa daftar properti css berikut perubahan nama (penulisan) property css tersebut di javascript dapat anda lihat dengan membuka link berikut ini.
Daftar data css property dan cara penulisan dalam javascript.

xHTML Effect-2 :

<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/" target="_blank" title="He... klo yang ini nggak bo'ong, dah! Asli... n...benar2 asli khusus buat sampeyan yang suka ...ehm... ehm ....!!!1" style="position:relative;float:left;display:block;margin:5px 15px 5px 0;width:154px;height:154px;"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="position:absolute;left:0;top:0;border:4px solid #555;border-radius:5px;" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXLK-A0eCkjORm5w2JNAdyfgu6P1aN3I0it9KMEE8Bk6DLMdh6a3SLCpT1JRyjanWNHC2aVX9t3Advw2HavCa_cKGhnI8BBQUCR7BiU4fE_NzpET9GEciOWBDZq6zA22NtjypHdnyMMoY/s200/img_my-girl.jpg';this.border='4px solid blue';this.style.width='225px';this.style.height='300px';this.style.zIndex='999';" onmouseout="this.src='https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg';this.border='4px solid #333';this.style.width='144px';this.style.height='144px';this.style.zIndex='2';" /></a>Untuk membuat effek pada gambar dengan onmouseover dan onmouseout anda perlu mengetahui cara menuliskan beberapa properti kode css dalam standart penulisan di javascript. Ada cukup banyak properti css ini yang bisa kita gunakan selain beberapa yang dipakai dalam effek ini. Data yang berupa daftar properti css berikut perubahan nama (penulisan) property css tersebut di javascript dapat anda lihat dengan membuka link berikut ini.

Ini sebuah contoh yang melibatkan 3 buah image dimana gambar pertama akan terlihat ketika halaman blog dibuka, image kedua terlihat ketika mouse berada di atas image dan gambar ke tiga muncul setelah cursor dilepaskan dari image. Anda dapat melakukan perubahan ukuran gambar melalui kode css yang ada dalam kode html. Ukuran width dan height ini sekaligus akan menjadi ukuran bagi gambar kedua dan ketiga.

xHTML Effect-3 :

<a href="http://lightbox-demo-tutorial.blogspot.com/" title="Image three in one"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="float:left;padding:5px;background:#666;border:2px solid #eee;box-shadow:0 0 8px #000;margin:5px 12px 5px 0;" onmouseover="this.src='https://lh4.googleusercontent.com/-7VV32P3_dEo/T24fYqtEeDE/AAAAAAAAAiA/WqJoPavei1Q/s144-c/BigBackground.jpg';" onmouseout="this.src='https://lh3.googleusercontent.com/-Xrd78mdFfLU/T2kBZoY8FOE/AAAAAAAAAgI/RlxFpwGUpRs/s144-c/GalleryMedium.jpg';" /></a>Ini sebuah contoh yang melibatkan 3 buah image dimana gambar pertama akan terlihat ketika halaman blog dibuka, image kedua terlihat ketika mouse berada di atas image dan gambar ke tiga muncul setelah cursor dilepaskan dari image. Anda dapat melakukan perubahan ukuran gambar melalui kode css yang ada dalam kode html. Ukuran width dan height ini sekaligus akan menjadi ukuran bagi gambar kedua dan ketiga.

Data penulisan css property pada javascript

Ini adalah beberapa properti css dan cara penulisan property tersebut saat digunakan pada javascripts. Mungkin saja data ini masih belum lengkap, akan tetapi semoga sedikit menolong untuk membuat beberapa penulisan script terkait dengan css properties.

Beberapa contoh penulisan secara lengkap:

1. onMouseover="this.style.color='#0000ff'"
2. getElementById("ID").style.backgroundColor='orange';
3. function textSizer(){
   oTxt.style.fontSize="150%";
   }

CSS Property	JavaScript-CSS Property	Contoh Penulisan
background	background	background='#000'
background-attachment	backgroundAttachment	backgroundAttachment='fixed'
background-color	backgroundColor	backgroundColor='black'
background-image	backgroundImage	backgroundImage='url()'
background-position	backgroundPosition	backgroundPosition='left top'
background-repeat	backgroundRepeat	backgroundRepeat='no-repeat'
border	border	border='2px solid red'
border-bottom	borderBottom	borderBottom='4px double #f00'
border-bottom-color	borderBottomColor	borderBottomColor='yellow'
border-bottom-style	borderBottomStyle	borderBottomStyle='outset'
border-bottom-width	borderBottomWidth	borderBottomWidth='0.5em'
border-color	borderColor	borderColor='lime'
border-left	borderLeft	borderLeft='0.4em solid grren'
border-left-color	borderLeftColor	borderLeftColor='magenta'
border-left-style	borderLeftStyle	borderLeftStyle='ridge'
border-left-width	borderLeftWidth	borderLeftWidth='1px'
border-right	borderRight	borderRight='10px dotted #555'
border-right-color	borderRightColor	borderRightColor='silver'
border-right-style	borderRightStyle	borderRightStyle='solid'
border-right-width	borderRightWidth	borderRightWidth='3px'
border-style	borderStyle	borderStyle='dashed'
border-top	borderTop	borderTop='5px dashed #eee'
border-top-color	borderTopColor	borderTopColor='gold'
border-top-style	borderTopStyle	borderTopStyle='inset'
border-top-width	borderTopWidth	borderTopWidth='3px'
border-width	borderWidth	borderWidth='8px'
clear	clear	clear='both'
clip	clip	clip='auto'
color	color	color='lightblue'
cursor	cursor	cursor='help'
display	display	display='inline-block'
font	font	font='12pt Arial bold'
font-family	fontFamily	fontFamily='Helvetica'
font-size	fontSize	fontSize='1em'
font-variant	fontVariant	fontVariant='small-caps'
font-weight	fontWeight	fontWeight='bolder'
height	height	height='200px'
left	left	left='10px'
letter-spacing	letterSpacing	letterSpacing='-1px'
line-height	lineHeight	lineHeight='2em'
list-style	listStyle	listStyle='circle'
list-style-image	listStyleImage	listStyleImage='none'
list-style-position	listStylePosition	listStylePosition='0 50%'
list-style-type	listStyleType	listStyleType='square'
margin	margin	margin='20px 0;'
margin-bottom	marginBottom	marginBottom='0'
margin-left	marginLeft	marginLeft='22px'
margin-right	marginRight	marginRight='1.4em'
margin-top	marginTop	marginTop='22px'
opacity	opacity	opacity='0.45'
filter:alpha(opacity=xx)	filter.alpha.Opacity	filter.alpha.Opacity='80'
overflow	overflow	overflow='auto'
padding	padding	padding='20px 10px 5px 15px'
padding-bottom	paddingBottom	paddingBottom='0.5em'
padding-left	paddingLeft	paddingLeft='15px'
padding-right	paddingRight	paddingRight='0.9em'
padding-top	paddingTop	paddingTop='2%'
pag	page	page='auto'
page-break-after	pageBreakAfter	pageBreakAfter='avoid'
page-break-before	pageBreakBefore	pageBreakBefore='auto'
page-break-inside	pageBreakInside	pageBreakInside='inherit'
position	position	position='absolute'
float	styleFloat	styleFloat='left'
text-align	textAlign	textAlign='justify'
text-decoration	textDecoration	textDecoration='underline'
text-indent	textIndent	textIndent='-999px'
text-shadow	textShadow	textShadow='2px 2px 2px #888'
text-transform	textTransform	textTransform='uppercase'
top	top	top='20px'
vertical-align	verticalAlign	verticalAlign='middle'
visibility	visibility	visibility='hidden'
width	width	width='400px'
z-index	zIndex	zIndex='99'

How to use onmouseover and onmouseout with css property

Onmouseover dan onmouseout merupakan sebuah javascript "Mouse Events" yang dapat digunakan secara simpel dan praktis. Script sederhana ini biasanya berfungsi untuk menampilkan effek berupa perubahan obyek atau style obyek dengan memanfaatkan fungsi mouse. Seringkali dibutuhkan pada saat-saat tertentu (temporer) seperti halnya bentuk demo. Penggunaan 2 variable di atas dapat berdiri sendiri atau dibuat dengan melibatkan bantuan kode css dan javascript. Jika kita menggunakan kode css atau javascript, maka fungsi onmouseover dan onmouseout dapat berkembang menjadi sebuah fungsi dengan effek yang lebih kompleks.

Pada posting ini, secara khusus akan membahas fungsi atau kegunaan onmouseover dan onmouseout saat digunakan secara langsung dalam sebuah tag HTML dengan memanfaatkan css property tanpa bantuan kode lain dalam bentuk css atau javascript.

Prinsip kerja onmouseover dan onmouseout:

Ketika mouse berada di atas sebuah obyek "seluruh variabel dalam onmouseover bekerja" dan ketika mouse meninggalkan obyek maka "seluruh fungsi dalam onmouseout yang bekerja". Beberapa property css dapat anda gunakan pada kedua fungsi di atas, namun dengan cara penulisan property standart javascript. Beberapa property atau elemen css yang sering digunakan diantaranya color, background, text-shadow, text-transform, opacity , cursor serta beberapa yang lain.

Kode Dasar penggunaan onmouseover dan onmouseout

Kode Dasar :

<div style="css property & value" onmouseover="this.style.css property='value';" onmouseout=this.style.css property='value';">DIV Contents</div>

Keterangan :

1. css property & value terdiri atas beberapa properti kode css dan nilainya yang berfungsi untuk membentuk obyek (style obyek).
2. css property berisikan properti kode css yang dituliskan dengan standart javascript.
3. value merupakan nilai dari css property.
4. Tag div dapat diganti dengan tag lain seperti img, p, span atau lainnya.

Contoh penulisan kode secara lengkap :

xHTML-1 :

<div style="margin:20px auto;width:250px;height100px;border:5px solid green;background:gray url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDnUWOTiq6divorNjxe4MW3u9oCeOZ4zrNXSnqFG7OyqR7H5ePljz7CP9QxVmMrrEBfVOz_9ExwteoLnTnJ8QKsCHFTE4TEV38eLI3LZLdgp4mv8CSHjDeq9tp7nUC37FYV-MXk0mAms/s250/img_gubhugreyot-gadisku-01.jpg) center no-repeat;text-align:center;font-size:32px;font-weight:bold;color:brown;line-height:100px;border-radius:10px;" onmouseover="this.style.cursor='move';this.style.background='black';this.style.color='#eee';this.style.borderColor='#900';this.style.opacity='1.0';this.style.filter.alpha.Opacity='100';" onmouseout="this.style.cursor='pointer';this.style.background='blue';this.style.color='magenta';this.style.borderColor='#000';this.style.opacity='0.5';this.style.filter.alpha.Opacity='50';">
gubhugreyot
</div>

xHTML-1 » D E M O :

gubhugreyot

xHTML-2 :

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDnUWOTiq6divorNjxe4MW3u9oCeOZ4zrNXSnqFG7OyqR7H5ePljz7CP9QxVmMrrEBfVOz_9ExwteoLnTnJ8QKsCHFTE4TEV38eLI3LZLdgp4mv8CSHjDeq9tp7nUC37FYV-MXk0mAms/s250/img_gubhugreyot-gadisku-01.jpg) center no-repeat;">
<div style="margin:20px auto;width:250px;height100px;border:5px solid green;background:transparent;text-align:center;font-size:32px;font-weight:bold;color:brown;line-height:100px;border-radius:10px;" onmouseover="this.style.cursor='move';this.style.background='black';this.style.color='#eee';this.style.borderColor='#900';this.style.opacity='1.0';this.style.filter.alpha.Opacity='100';" onmouseout="this.style.cursor='pointer';this.style.background='blue';this.style.color='magenta';this.style.borderColor='#000';this.style.opacity='0.5';this.style.filter.alpha.Opacity='50';">
gubhugreyot
</div>
</div>

xHTML-2 » D E M O :

gubhugreyot

Catatan berdasar demo :

1. Letakkan cursor property di bagian terdepan.
2. Letakkan opacity property di paling bagian belakang.
3. Perhatikan metode penulisan properti css secara cermat karena ada beberapa pembedaan penulisan termasuk misalnya penggunaan huruf kapital.
4. Data tentang penulisan css properties pada javascript dapat anda buka di sini.

Javascript Anti Click Kanan

Javascript Nor Right Click atau anti klik kanan ini berfungsi untuk membuat bingung bagi siapapun yang berniat menggunakan fungsi klik kanan pada mouse dengan berbagai alasan terutama yang "berniat tidak baik" seperti mencoba mencuri kode template atau mungkin kode posting. Silahkan simpan javascriptnya di atas kode ]]></b:skin>

D E M O javascript no right click

Coba klik kanan pada mouse anda dan perhatikan hasilnya!

Cara Menyimpan Javascript :

1. Login ke Blogger.
2. Klik "Rancangan (Design)".
3. Klik "Edit HTML".
4. Lakukan "Backup Template".
5. Cari kode ]]></b:skin>
6. Copy dan simpan Javascript di atas kode tersebut.
   Gunakan Ctrl + C untuk meng-copy.
7. Klik "Simpan Template (Save Template)".
8. Selesai! Buka blog dan coba untuk melakukan klik kanan mouse.

Javascript :

<script type="text/javascript">
//<![CDATA[  /*bgsGR gubhugreyot -- No Right Click */
var isNS = (navigator.appName == " Netscape ") ? 1 : 0;
if (navigator.appName == " Netscape ") document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
function mischandler() {
    return false;
}
function mousehandler(e) {
    var myevent = (isNS) ? e: event;
    var eventbutton = (isNS) ? myevent.which: myevent.button;
    if ((eventbutton == 2) || (eventbutton == 3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

Playing with Hover Efect

Banyak hal sebenarnya yang dapat kita lakukan, bahkan hanya dengan sebuah efek hover. Jika kita sedikit kreatif maka berbagai hal menarik dapat tercipta, salah satunya adalah melalui beberapa kode di bawah ini.

Kode CSS :

.GRcrazyEffect{
       position:relative;
       display:block;
       float:left;
       margin:5px 15px 5px 0;
       padding:8px;
       border:4px double #555;
       border-bottom-color:#888;
       border-right-color:#888;
       border-radius:12px;
       height:400px;
       width:330px;
       background:#CCC;
       opacity:0.9;
       filter:alpha(opacity=90);
}
.GRcrazyEffect,.GRcrazyEffect img.asli,.GRcrazyEffect img.crazy{
       transition:1.5s ease-in 0.5s;
       -o-transition:1.5s ease-in 0.5s;
       -moz-transition:1.5s ease-in 0.5s;
       -webkit-transition:1.5s ease-in 0.5s;
       -ms-transition:1.5s ease-in 0.5s;
}
.GRcrazyEffect:hover,.GRcrazyEffect:hover img.crazy{
       opacity:1.0;
       filter:alpha(opacity=100); 
}
.GRcrazyEffect img.asli,.GRcrazyEffect img.crazy{
       position:absolute;
       padding:0;
       margin:0;
       border:3px solid #222;
       border-radius:5px;
       box-shadow:0 0 8px #fff;
       left:5px;
       top:5px;
}
.GRcrazyEffect:hover img.asli,.GRcrazyEffect img.crazy{ 
       opacity:0.0;
       filter:alpha(opacity=0);
       z-index:-10;
}
.GRcrazyEffect:hover img.crazy{ 
       z-index:100;
}

1. Simpan kode CSS tersebut di atas kode ]]></b:skin>
2. Gunakan xHTMl di posting atau simpan melalui add a Gadget.
3. Jangan lupa sebelum simpan kode CSS untuk melakukan proses backup template.
4. Panduan cara menyimpan kode, cara mencari kode dan cara backup template bisa nada baca pada Special Tutorials di gubhugreyot.

xHTML :

<a class="GRcrazyEffect" href="Your URL here!" title="Your title here!"><img class="asli" src="image-1.jpg" width="330" height="400" /><img class="crazy" src="image-2.jpg" width="330" height="400" />
</a>

Sampel xHTML :

<a class="GRcrazyEffect" href="http://tantytm.blogspot.com/" target="_blank" title="Efek Gila"><img class="asli" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJ6QThTcU4o7IImABYPAHHAkFoZywRqMeBRkLzOpx1-3RxNh67i4FEpK0B_m8j4EOiaywVIFuT0CqrdLgqRz5dcDlxq5bW8QwP0-Me2jrYKCUEw846HVAMuKD1QWA5imtl1I7-Mx8c5XT/s300/GRcantik-rollover.jpg" width="330" height="400" /><img class="crazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXzZUEeEWu3MDnqgUg6fCP4PDoqTC57n-GVTCr_v8eGhNTlZ7cVUb_WnD7NmthLXoHe4ijNbriEasfTIq2zfvSticN_nyDxnva_VaPxeOLvPnN_KWOVvZZMHYJfIenv6WSsIhKJYvupMd/s300/GRcantik-rollover-hover.jpg" width="330" height="400" />
</a>

D E M O :