Menambahkan widget animasi kotak follower google plus di blog

Kotak follower google plus penting untuk meningkatkan fan google plus anda seperti kotak like facebook fans page. Google telah memperkenalkan widget ini untuk blogger. Widget ini sedikit dimodifikasi dari bawaan widget aslinya. Jika anda mengarahkan mouse ke widget maka akan berubah dari warna putih menjadi merah. Untuk memodifikasi widget ini cukup mudah, tinggal anda mengikuti langkah-langkah di bawah ini:

VIEW DEMO

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript 

  

•  Kemudian kopi dan pastekan kode berikut didalamnya:

<style> .bloggerspiceGplus{ margin: 10px auto; background-color: #FEFEFE; width: 260px; padding: 10px 0 10px 10px; height: 255px; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 10px solid #E50913; } .bloggerspiceGplus:hover { border: 10px solid #A0060E; background-color: #E50913; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> <div class="bloggerspiceGplus"> <div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/103806695606848957210" data-source="blogger:blog:followers" data-width="280"> </div> </div>

KUSTOMISASI

Silahkan ganti 103806695606848957210 dengan ID google plus anda

 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 01.54

Cara membuat animasi surat lama di blog

Hari ini saya akan share lagi ke anda tentang cara membuat animasi surat lama di blog . Dalam surat ini, kita akan menggunakan pena animasi. Ketika pena mengering - kita akan mencelupkannya ke dalam tinta. Bahkan, ditambahkan fitur untuk meniru-niru kesalahan yang akan dihapus selama mengetik. Sekarang mari kita lihat penerapannya.

View Demo

Bagaimana? Anda tertarik dengan animasi ini? Silahkan ikuti langkah-langkahnya..  

KODE HTML 

<div id="letter"></div>
    <img id="inkwell1" src="http://i1087.photobucket.com/albums/j479/jalupangna/inkwell1.gif" alt="inkwell1" />
    <img id="inkwell2" src="http://i1087.photobucket.com/albums/j479/jalupangna/inkwell2.gif" alt="inkwell2" />

    <div id="letter_src">
Prabu Siliwangi merupakan seorang raja yang sangat terkenal terkenil|||||||| di tanah sunda hingga sekarang, yang memimpin kerajaan Pajajaran.<br><br>
Dalam kitab Suwasit sejarah  seruruh||||||||seluruh aktivitas mengenai Prabu Siliwangi dikupas tuntas di dalamnya. Kitab tersebut berisi 22 bab perjalanan Prabu Siliwangi dimulai dari ayahnya, Prabu Anggararang Raja Kerajaan Gajah. Setelah Prabu Anggararang merana|||||||| merasa puteranya layak memangku jabatan raja, akhirnya kerajaan diserahkan kepada Pangeran Pamanah Rasa (sebelum bergelar Siliwangi).<br><br>
Sebutan dengan nama  siwangi||||||||Siliwangi, dipertegas bahwa nama/panggilan tersebut adalah gelar setelah Pangeran Pamanah Rasa masuk Islam sebagai salah satu syarat mempersunting murid Syaikh Qori|||||||| Quro, yakni Nyi Ratu Subanglarang. Dari isteri ketiga ini, kemudian melahirkan Kian Santang yang bergelar Pangeran Cakrabuana di Cirebon dan Rara Santang, ibunda Sunan Gunung Jati.<br><br>
    </div>

Kalimat-kalimat yang disorot warna kuning merupakan isi dari surat
Sedangkan tag <br><br> adalah untuk membuat paragraph baru dari penulisan surat
Tanda ||||||||  untuk mencoret kata yang salah

• Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

• Pastekan kode di atas didalamnya
• Simpan Gadget... 
• Atau anda bisa meletakannya di dalam postingan (HTML bukan compose)

KODE CSS

body {
    background: url('http://i1087.photobucket.com/albums/j479/jalupangna/bg-3.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#inkwell1 {
    bottom: 100px;
    left: 140px;
    position: fixed;
}
#inkwell2 {
    bottom: 100px;
    left: 140px;
    position: fixed;
    visibility: hidden;
}
#letter {
    font-family: Comic Sans MS;
    font-size: 18px;
    font-weight: bold;
    margin: 50px auto;
    position: relative;
    width: 75%;
}
#letter_src {
    display: none;
}

LANGKAH SELANJUTNYA: 

• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag
  ]]></b:skin> 
• Kemudian cari kode </body> dan letakan script kode javascript dibawah ini tepat diatas tag/kode </body>

<script type='text/javascript'> //<![CDATA[ window.onload = function(){ // public variables var vLetter = document.getElementById('letter'); var iSpeedInk = 5; // other variables var sText = document.getElementById('letter_src').innerHTML; var iCurChar = 0; var sChars = '<span>'; var iCurInk = 0; var sCurCaret = ''; var sCaret = " <img src='http://i1087.photobucket.com/albums/j479/jalupangna/pen.gif' style='position:absolute' />"; var doStep = function () { // current char var sChar = sText.charAt(iCurChar); // default char delay var iDelay = 32; if (sChar == '') { sCurCaret = ''; } else if (sChar == '|') { // we use | symbol to emulate 'error' symbol sChar = ''; sChars = sChars.substring(0, sChars.length-1); iDelay = 64; } else if (sChar == '<') { // pass tags var iPos = sText.indexOf('>', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '&') { // pass html entities var iPos = sText.indexOf(';', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '.') { // custom delay in case of . symbol iDelay = 300; } else if (sChar == ',') { // custom delay in case of , symbol iDelay = 100; } else if (sChar == ' ') { // custom delay in case of space symbol iDelay = 32; } else if (iCurChar > 5) { sCurCaret = sCaret; } // expenditure of ink if (sChar == ' ') { iCurInk += iSpeedInk; sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar; } if (document.getElementById('inkwell2').style.visibility == 'visible') { sCurCaret = sCaret; document.getElementById('inkwell2').style.visibility = 'hidden'; sChar = '</span><span style="color:RGB(0,0,0)">' + sChar; } // refresh Ink if (iCurInk > 160) { iCurInk = 0; document.getElementById('inkwell2').style.visibility = 'visible'; iDelay = 1000; sCurCaret = ''; } // add current char to chars sChars += sChar; // hide the caret at the end of the letter if (iCurChar == sText.length - 1) sCurCaret = ''; // update letter with new chars vLetter.innerHTML = sChars + sCurCaret; // goto next char iCurChar++; // next step if (iCurChar < sText.length) { setTimeout(doStep, 20 + iDelay); } } doStep(); }; //]]> </script>

•  Simpan template...Selesai

Semoga bermanfa'at....

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.26

Cara membuat galeri photo menggunakan animasi CSS3 accordion

Pernahkah anda menggunakan plugin akordion dalam proyek anda? saya percaya bahwa anda semua pernah, dan sebagian besar anda bekerja membangun proyek menggunakan javascript  (atau jQuery). Kita Biasanya menggunakan plugin tersebut (akordion) untuk membuat promo dengan gambar, dengan sedikit galeri foto, atau dalam hal lain kita harus membuat sebuah iklan dengan daftar berbagai fitur produk. Kita bisa menggunakan kehebatan dan kelebihan dari CSS3.

View Demo

KODE HTML 

<div class="accordion css3accordion">
            <span id="slide1"></span>
            <span id="slide2"></span>
            <span id="slide3"></span>
            <span id="slide4"></span>
            <span id="slide5"></span>
            <ol>
                <li class="slide1">
                    <a href="#slide1"><h2><span>Toy story</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3.jpg" />
                    </div>
                </li>
                <li class="slide2">
                    <a href="#slide2"><h2><span>Pixar</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/pixars-up.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li class="slide3">
                    <a href="#slide3"><h2><span>Toy story 3</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3-1.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li class="slide4">
                    <a href="#slide4"><h2><span>Yogi Bear Movie</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/Yogi-Bear-Movie.jpg" alt="Slide Four" />
                    </div>
                </li>
                <li class="slide5">
                    <a href="#slide5"><h2><span>The hobbit</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/the-hobbit-2012.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
        </div>

LANGKAH LANGKAHNYA : 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Tata Letak -> Tambahkan gadget/HTML Javascript

• Pastekan kode diatas didalamnya
• Simpan gadget..

Silahkan ganti URL/link gambar pada warna pink diatas dengan URL/Link gambar anda.  
Ganti judul slidenya sesuai dengan keinginan anda

KODE CSS 

* { margin: 0; padding: 0; } body { background-color: #aaa; } h1, h2 { margin:10px 0; text-align: center; } header { background-color:rgba(33, 33, 33, 0.9); color:#ffffff; display:block; font: 14px/1.3 Arial,sans-serif; height:50px; position:relative; } header h2{ font-size: 22px; margin: 0px auto; padding: 10px 0; width: 80%; text-align: center; } header a, a:visited { text-decoration:none; color:#fcfcfc; } .accordion { margin:20px auto; overflow:hidden; position:relative; width:960px; } @charset 'utf-8'; .liteAccordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; -webkit-tap-highlight-color: transparent } .liteAccordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none } .liteAccordion .slide > h2 { color: black; font-size: 16px; font-weight: normal; margin: 0; z-index: 100; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; /* fixes chrome bug */ -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .liteAccordion .slide > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .liteAccordion .slide > h2 b { display: inline-block; position: absolute; top: 13%; left: 10%; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .liteAccordion .slide > h2:hover { cursor: pointer } .liteAccordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white } .liteAccordion noscript p { padding: 10px; margin: 0; background: white } /****************************************** Basic */ .liteAccordion.basic .slide > h2 { background: #333; color: white; line-height: 225% } /****************************************** Dark */ .liteAccordion.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% } .liteAccordion.dark .slide > h2 span { background: #353535; color: white } .liteAccordion.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b } .liteAccordion.dark .slide > h2.selected span, .liteAccordion.dark .slide > h2.selected span:hover { background: #353535; background: -moz-linear-gradient(left, #353535 0%, #555555 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555)); background: -webkit-linear-gradient(left, #353535 0%,#555555 100%); background: -o-linear-gradient(left, #353535 0%,#555555 100%); background: -ms-linear-gradient(left, #353535 0%,#555555 100%); background: linear-gradient(left, #353535 0%,#555555 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 ); } .liteAccordion.dark .slide > h2.selected b { background: #383838; background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636)); background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%); background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%); background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%); background: linear-gradient(top, #3a3a3a 0%,#363636 100%); } .liteAccordion.dark .slide > div { background: #030303; margin-left: 5px } /***************************************** Light */ .liteAccordion.light { border: 9px solid white; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #a0a0a0; -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% } .liteAccordion.light .slide > h2 span { background: #fcfcfc; background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed)); background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%); background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%); background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%); background: linear-gradient(left, #fcfcfc 0%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 ); -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; color: #909090; } .liteAccordion.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white } .liteAccordion.light .slide > h2.selected span, .liteAccordion.light .slide h2.selected span:hover, .liteAccordion.light .slide > h2.selected b { background: #ffffff } .liteAccordion.light .slide > div { background: #a0a0a0; margin-left: 5px } /**************************************** Stitch */ .liteAccordion.stitch { position: relative; padding: 5px 0 5px 5px; border: 11px solid #353535; background: #353535; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.stitch:before { content: ''; width: 100%; height: 100%; position: absolute; top: -9px; left: -9px; background: #353535; border: 9px solid transparent; -webkit-border-image: url('bg_stitch.png') 9 repeat; -moz-border-image: url('bg_stitch.png') 9 repeat; -o-border-image: url('bg_stitch.png') 9 repeat; border-image: url('bg_stitch.png') 9 repeat; } .liteAccordion.stitch .slide > h2 { background: #353535 } .liteAccordion.stitch .slide > h2 span { height: auto; padding-right: 5%; color: white; text-shadow: -1px 1px 0 #5b5b5b; border: 9px solid transparent; background-image: url('bg_noise.png'); margin-top: 0; -webkit-border-image: url('bg_stitch.png') 9 repeat; -moz-border-image: url('bg_stitch.png') 9 repeat; -o-border-image: url('bg_stitch.png') 9 repeat; border-image: url('bg_stitch.png') 9 repeat; } .liteAccordion.stitch .slide > h2.selected:after { content: ''; display: block; height: 11px; width: 11px; position: absolute; bottom: -3px; right: 38px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); border: 9px solid transparent; border-top: 0; border-left: 0; -webkit-border-image: url('bg_stitch.png') 9 repeat; -moz-border-image: url('bg_stitch.png') 9 repeat; -o-border-image: url('bg_stitch.png') 9 repeat; border-image: url('bg_stitch.png') 9 repeat; background-image: url('bg_noise.png'); } .liteAccordion.stitch .slide:nth-child(1) > h2 span, .liteAccordion.stitch .slide:nth-child(1) > h2:after { background-color: #c25252 } .liteAccordion.stitch .slide:nth-child(2) > h2 span, .liteAccordion.stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 } .liteAccordion.stitch .slide:nth-child(3) > h2 span, .liteAccordion.stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f } .liteAccordion.stitch .slide:nth-child(4) > h2 span, .liteAccordion.stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 } .liteAccordion.stitch .slide:nth-child(5) > h2 span, .liteAccordion.stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 } .liteAccordion.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b } .liteAccordion.stitch .slide > div { margin-right: 6px } .liteAccordion.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 } /*************************************** Rounded */ .liteAccordion.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px } .liteAccordion.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px } /******************************************** IE */ /* stitch */ .liteAccordion.ie.stitch .slide > h2 { line-height: 265% } .liteAccordion.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% } .liteAccordion.ie.stitch .slide > h2.selected:after { display: none } .liteAccordion.ie.stitch .slide-0 > h2 span { background-color: #c25252 } .liteAccordion.ie.stitch .slide-1 > h2 span { background-color: #ca9859 } .liteAccordion.ie.stitch .slide-2 > h2 span { background-color: #96ba5f } .liteAccordion.ie.stitch .slide-3 > h2 span { background-color: #59abb7 } .liteAccordion.ie.stitch .slide-4 > h2 span { background-color: #bb6098 } /* transforms */ .liteAccordion.ie7 .slide > h2 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) } .liteAccordion.ie7 .slide > h2 b { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) } .liteAccordion.ie8 .slide > h2 { filter: none; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -ms-transform: none } .liteAccordion.ie8 .slide > h2 b { filter: none; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -ms-transform: none } .liteAccordion.ie9 .slide > h2 { filter: none; -ms-filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top } .liteAccordion.ie9 .slide > h2 b { filter: none; -ms-filter: none; -ms-transform: rotate(90deg) } /* misc */ .liteAccordion.ie .slide > h2 b { top: 36%; left: 5% } .liteAccordion.ie.dark .slide > h2 b, .liteAccordion.ie.light .slide > h2 b { top: 44% } .liteAccordion.ie9.dark .slide > h2.selected span, .liteAccordion.ie9.dark .slide > h2.selected span:hover, .liteAccordion.light .slide > h2 span { filter: none } .liteAccordion.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.ie9.stitch .slide > h2 b { top: 0; left: 10% } /* CSS3 accordion */ .css3accordion { border: 9px solid #353535; border-radius: 6px; padding: 5px 5px 6px 0; background: #030303; height: 320px; width: 960px; /* CSS3 shadows */ -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); } /* hide first level spans */ .css3accordion > span { display: none } /* main accordion styles and slides */ .css3accordion ol { height: 100%; list-style: none; overflow: hidden; position: relative; } .css3accordion li { float: left; height: 100%; overflow: hidden; position: relative; width: 48px; /* CSS3 transition for slides */ -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .css3accordion li a { display: block; float: left; height: 320px; position: relative; width: 48px; } /* slide headers */ .css3accordion h2 { font-size: 16px; font-weight: normal; height: 48px; left: 0; line-height: 265%; margin: 0; position: absolute; top: 0; width: 320px; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .css3accordion h2 span { background-color: #353535; border-radius: 4px; color: #fff; display: block; margin-top: 5px; padding-right: 10%; text-align: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .css3accordion h2 span:hover { background-color: #353535; background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555)); background: -webkit-linear-gradient(left, #353535 0%,#555555 100%); background: -moz-linear-gradient(left, #353535 0%, #555555 100%); background: -ms-linear-gradient(left, #353535 0%,#555555 100%); background: -o-linear-gradient(left, #353535 0%,#555555 100%); background: linear-gradient(left, #353535 0%,#555555 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 ); } /* 'counter' object */ .css3accordion h2 span:after { color: #080808; font-weight: bold; left: 10%; position: absolute; text-shadow: -1px 1px 0 #555555; top: 10%; /* CSS3 rotate for 'counter' */ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* 'counter' values */ li.slide1 h2 span:after { content: "1"; } li.slide2 h2 span:after { content: "2"; } li.slide3 h2 span:after { content: "3"; } li.slide4 h2 span:after { content: "4"; } li.slide5 h2 span:after { content: "5"; } /* inner slide content */ .css3accordion li div { margin-left: 5px; padding-left: 48px; } /* CSS3 accordion */ .css3accordion { border: 9px solid #353535; border-radius: 6px; padding: 5px 5px 6px 0; background: #030303; height: 320px; width: 960px; /* CSS3 shadows */ -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); } /* hide first level spans */ .css3accordion > span { display: none } /* main accordion styles and slides */ .css3accordion ol { height: 100%; list-style: none; overflow: hidden; position: relative; } .css3accordion li { float: left; height: 100%; overflow: hidden; position: relative; width: 48px; /* CSS3 transition for slides */ -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .css3accordion li a { display: block; float: left; height: 320px; position: relative; width: 48px; } /* slide headers */ .css3accordion h2 { font-size: 16px; font-weight: normal; height: 48px; left: 0; line-height: 265%; margin: 0; position: absolute; top: 0; width: 320px; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .css3accordion h2 span { background-color: #353535; border-radius: 4px; color: #fff; display: block; margin-top: 5px; padding-right: 10%; text-align: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* 'counter' object */ .css3accordion h2 span:after { color: #080808; font-weight: bold; left: 10%; position: absolute; text-shadow: -1px 1px 0 #555555; top: 10%; /* CSS3 rotate for 'counter' */ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* 'counter' values */ li.slide1 h2 span:after { content: "1"; } li.slide2 h2 span:after { content: "2"; } li.slide3 h2 span:after { content: "3"; } li.slide4 h2 span:after { content: "4"; } li.slide5 h2 span:after { content: "5"; } /* inner slide content */ .css3accordion li div { margin-left: 5px; padding-left: 48px; } /* auto animation */ .css3accordion li { -webkit-animation-name: anim_slides; -webkit-animation-duration: 25.0s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 25.0s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } .css3accordion li:nth-child(2) { -webkit-animation-delay: 5.0s; -moz-animation-delay: 5.0s; } .css3accordion li:nth-child(3) { -webkit-animation-delay: 10.0s; -moz-animation-delay: 10.0s; } .css3accordion li:nth-child(4) { -webkit-animation-delay: 15.0s; -moz-animation-delay: 15.0s; } .css3accordion li:nth-child(5) { -webkit-animation-delay: 20.0s; -moz-animation-delay: 20.0s; } @-webkit-keyframes anim_slides { 0% { width: 48px; } 20% { width: 768px; } 40% { width: 48px; } 100% { width: 48px; } } @-moz-keyframes anim_slides { 0% { width: 48px; } 20% { width: 768px; } 40% { width: 48px; } 100% { width: 48px; } }

LANGKAH BERIKUTNYA : 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS diatas tepat diatas kode ]]></b:skin> 
• Simpan template...

Happy Blogging..!

 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 10.59

Bagaimana cara membuat menu navigasi melayang CSS3 di blog

Hari ini, saya ingin share dan menunjukkan ke anda tentang  menu navigasi yang lain murni menggunakan CSS3, menu navigasi ini menerapkan beberapa efek animasi yang sangat bagus. Penulis pun tidak habis pikir kok bisa ya? submenu nya melayang. Hehehe..:D Tinggal menggulirkan atau menggerakan mouse/krusor anda ke elemen menu tersebut maka animasinya akan bekerja. Jika anda siap, mari kita mulai...

View Demo

 KODE HTML 

<ul id="nav">
    <li><a href="http://jalu-pangna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">All about blog</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Religi</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">Spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Science</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">Wawasan umum</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
  <li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html">TOC/site map</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">Tukar link</a></li>
    <li><a href="#">Lain-lain</a></li>
    <li><a href="http://jalu-pangna.blogspot.com">Kembali</a></li>
</ul>  

LANGKAH-LANGKAHNYA:

• Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript atau anda bisa meletakannya di bawah tag <body> pada template

• Pastekan kode di atas didalamnya
• Simpan Gadget...  

Ganti URL/Link, Menu dan Submenu dengan URL/Link, menu dan submenu anda

 KODE CSS 

#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; /* border radius */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; /* box shadow */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; } #nav li:first-child { border-left: 0 none; margin-left: 5px; } #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* keyframes #animation1 */ @-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } } #nav li > a:hover { /* css3 animation */ -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #nav li:hover > a { z-index: 4; } #nav li:hover ul.subs { left: 0; top: 34px; width: 150px; } #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-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;*/ } /* keyframes #animation2 */ @-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } @-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } #nav li:hover ul li { /* css3 animation */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-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;*/ } /* animation delays */ #nav li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #nav li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #nav li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #nav li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #nav li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #nav li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #nav li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #nav li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }

LANGKAH SELANJUTNYA: 

• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian 
• Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin> 
• Simpan template...Selesai 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 07.56

Cara membuat menu lava lamp dengan CSS3 transisi di blog

Saya rasa diantara Anda pernah melihat menu animasi dengan efek LavaLamp (berdasarkan jQuery plugin). Hari ini saya ingin share lagi ke anda bagaimana kinerja dari CSS3 (tanpa javascript). Menu lavalamp ini harus menggunakan CSS3 transisi (untuk menghidupkan elemen). Jadi, jika Anda siap, mari kita mulai.

View Demo

KODE HTML

<ul id="nav">
    <li><a href="http://jalu-pangna.blogspot.com">Home</a></li>
    <li><a class="hsubs" href="#">Blogging</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
            <li><a href="#">Tool</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Religi</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">Spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Sejarah</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Science</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">Wawasan umum</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan spiritual</a></li>
        </ul>
    </li>
    <li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">TukarLink</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Kembali ke tutorial</a></li>
    <div id="lavalamp"></div>
</ul>  

• Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

• Pastekan kode di atas didalamnya
• Simpan Gadget...  

Silahkan ganti URL/Link yang disorot warna orange dengan URL/Link anda
Ganti Menu dan Submenu sesuai dengan Menu dan submenu di blog anda

KODE CSS 

#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background: url('http://i1087.photobucket.com/albums/j479/jalupangna/menu_bg.png') no-repeat scroll 0 0 transparent; clear: both; font-size: 12px; height: 58px; padding: 0 0 0 9px; position: relative; width: 957px; } #nav ul { background-color: #222; border:1px solid #222; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; position: absolute; top: -9999px; z-index: 2; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; } #nav li { background: url('http://i1087.photobucket.com/albums/j479/jalupangna/menu_line.png') no-repeat scroll right 5px transparent; float: left; position: relative; } #nav li a { color: #FFFFFF; display: block; float: left; font-weight: normal; height: 30px; padding: 23px 20px 0; position: relative; text-decoration: none; text-shadow: 1px 1px 1px #000000; } #nav li:hover > a { color: #00B4FF; } #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { background: none repeat scroll 0 0 #121212; outline: 0 none; } #nav li:hover ul.subs { left: 0; top: 53px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } #nav ul li { background: none; width: 100%; } #nav ul li a { float: none; } #nav ul li:hover > a { background-color: #121212; color: #00B4FF; } #lavalamp { background: url('http://i1087.photobucket.com/albums/j479/jalupangna/lavalamp.png') no-repeat scroll 0 0 transparent; height: 16px; left: 13px; position: absolute; top: 0px; width: 64px; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; } #lavalamp:hover { -moz-transition-duration: 3000s; -ms-transition-duration: 3000s; -o-transition-duration: 3000s; -webkit-transition-duration: 3000s; transition-duration: 3000s; } #nav li:nth-of-type(1):hover ~ #lavalamp { left: 13px; } #nav li:nth-of-type(2):hover ~ #lavalamp { left: 90px; } #nav li:nth-of-type(3):hover ~ #lavalamp { left: 170px; } #nav li:nth-of-type(4):hover ~ #lavalamp { left: 250px; } #nav li:nth-of-type(5):hover ~ #lavalamp { left: 330px; } #nav li:nth-of-type(6):hover ~ #lavalamp { left: 410px; } #nav li:nth-of-type(7):hover ~ #lavalamp { left: 490px; } #nav li:nth-of-type(8):hover ~ #lavalamp { left: 565px; }

LANGKAH SELANJUTNYA: 

• Cari tag/kode ]]></b:skin> tekan  CTRL+F  untuk memudahkan pencarian 
• Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag  ]]></b:skin>
• Simpan template...Selesai

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 09.22

Cara membuat gambar tertarik keluar menggunakan keyframe animasi CSS3

Animasi CSS3 dapat diatur/diselaraskan dengan baik dan dipecah menjadi "frame (bingkai)", terima kasih banyak kita ucapkan kepada@keyframe. Efek animasi ini bekerja ketika mouse kita gerakan/gulirkan ke gambar. Saat ini support dengan browser chrome, safari, firefox dan mungkin IE 10.

View Demo

LANGKAH-LANGKAH:

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.pulloutimage{ position: relative; } .pulloutimage img{ position: absolute; /* absolute position and stack images inside container */ left: 0; } .pulloutimage img.ondemand{ /*CSS for image shown on demand */ opacity: 0; visibility: hidden; /* hide it initially (mainly for legacy browsers) */ } .pulloutimage img.original{ z-index: 1; /* set base z-index of initially shown image */ } @-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */ 0%{ /* Start of animation */ z-index: -1; opacity: 0; } 50%{ /* Half way point, move image to right edge of container */ opacity: 1; z-index: -1; left: 100%; box-shadow: none; } 51%{ /* 51% point, stack animating image on top of original image */ z-index: 2; } 100%{ /* Final point, move animating image back so it's on top of original */ left: 0; box-shadow: 8px 8px 15px gray; } } @-moz-keyframes revealfromright{ 0%{ z-index:-1; opacity:0; } 50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; } 51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } @-ms-keyframes revealfromright{ 0%{ z-index:-1; opacity:0; } 50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; } 51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } .pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */ -webkit-animation-name:revealfromright; /* specify animation keyframe */ -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name:revealfromright; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name:revealfromright; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; animation-name:revealfromright; animation-duration: 1s; animation-iteration-count: 1; visibility:visible; opacity:1; box-shadow: 8px 8px 15px gray; z-index:2; } .pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */ opacity:0.5; }

KODE HTML 

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<!--keyframe animasi CSS3 by jalu-pangna.blogspot.com -->

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu3.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/ratukidul.jpg" />
</div>  
<!--keyframe animasi CSS3 by jalu-pangna.blogspot.com -->

KETERANGAN: 

Silahkan ganti link gambar1 pada warna kuning dan gambar2 pada warna hijau diatas dengan link gambar anda.

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.38