Oto Website: Image Triks

Attractive Css3 Cycling Slideshow Untuk Blogger

Hari ini blog <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan berbagi tentang slideshow gambar untuk blogger yang berjudul <a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">Attractive Css3 Cycling Slideshow Untuk Blogger</a>, ini adalah slideshow menarik di sertai dengan efek memuat gambar di setiap gambar yang Anda pasang. Dengan menambahkan <a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">Attractive Css3 Cycling Slideshow Untuk Blogger</a> ini Anda akan mengubah link Anda sebagai link gambar! Satu hal yang perlu Anda ingat adalah ukuran dari gambar harus Anda rubah beberapa pixel untuk menyesuaikannya. 
Sekarang mari kita lihat Demo dan bagaimana cara membuat <a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">Attractive Css3 Cycling Slideshow Untuk Blogger</a> Anda. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gVqCcIqEkZJfI06VEco2ywdA0EhxFAZxzraPs_wu__xsue1hSOFGGfKSdyLWt7pKnP9dA-849CTJTgc7xLlpwsTFL7tBR70DWtwXhQRA0CQfdRXkW0W-E0hqVJInxb6aJL9a2xK66w/s1600/OW-Attractive+Css3+Cycling+Slideshow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gVqCcIqEkZJfI06VEco2ywdA0EhxFAZxzraPs_wu__xsue1hSOFGGfKSdyLWt7pKnP9dA-849CTJTgc7xLlpwsTFL7tBR70DWtwXhQRA0CQfdRXkW0W-E0hqVJInxb6aJL9a2xK66w/s640/OW-Attractive+Css3+Cycling+Slideshow.png" width="640" /></a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
 
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/Attractive%20Css3%20Cycling%20Slideshow.html" target="_blank">Lihat Demo</a></div>
 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat</div>
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">The CSS 
</a> 
<hr color="#0071bb" />
 
<pre class="brush:css;">/* fade slider www.otowebsite.blogspot.com*/
.content h1 {
 font-size:48px;
 color:#000;
 text-shadow:0px 1px 1px #f4f4f4;
 text-align:center;
 padding:60px 0 30px;
}

/* LAYOUT */
.otowebsite {
 margin:0 auto;
 overflow:hidden;
 width:960px;
}

/* CONTENT SLIDER */
#content-slider {
 width:100%;
 height:360px;
 margin:10px auto 0;
}
/* SLIDER */
#slider {
 background:#000;
 border:5px solid #eaeaea;
 box-shadow:1px 1px 5px rgba(0,0,0,0.7);
 height:320px;
 width:680px;
 margin:40px auto 0;
 overflow:visible;
 position:relative;
}
#mask {
 overflow:hidden;
 height:320px;
}
#slider ul {
 margin:0;
 padding:0;
 position:relative;
}
#slider li {
 width:680px;
 height:320px;
 position:absolute;
 top:-325px;
 list-style:none;
}

#slider li.firstanimation {
 -moz-animation:cycle 25s linear infinite;
 -webkit-animation:cycle 25s linear infinite; 
}
#slider li.secondanimation {
 -moz-animation:cycletwo 25s linear infinite;
 -webkit-animation:cycletwo 25s linear infinite; 
}
#slider li.thirdanimation {
 -moz-animation:cyclethree 25s linear infinite;
 -webkit-animation:cyclethree 25s linear infinite; 
}
#slider li.fourthanimation {
 -moz-animation:cyclefour 25s linear infinite;
 -webkit-animation:cyclefour 25s linear infinite; 
}
#slider li.fifthanimation {
 -moz-animation:cyclefive 25s linear infinite;
 -webkit-animation:cyclefive 25s linear infinite; 
}

#slider .tooltip {
 background:rgba(0,0,0,0.7);
 width:300px;
 height:60px;
 position:relative;
 bottom:75px;
 left:-320px;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out; 
}
#slider .tooltip h1 {
 color:#fff;
 font-size:24px;
 font-weight:300;
 line-height:60px;
 padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
 left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
 -moz-animation-play-state:paused;
 -webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar {
 position:relative;
 top:-5px;
 width:680px;
 height:5px;
 background:#000;
 -moz-animation:fullexpand 25s ease-out infinite;
 -webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; }
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; }
 36% { top:0px; opacity:1; z-index:0; }
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; }
 56% { top:0px; opacity:1; }
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; }
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 50% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; }
 36% { top:0px; opacity:1; z-index:0; }
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; }
 56% { top:0px; opacity:1; z-index:0; }
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}</pre>
 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">HTML/JavaScript 
</a> 
<hr color="#0071bb" />
 
<pre class="brush:javascript;"><div class="otowebsite">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWvcLEMuyBp92jJchMXz1-zj6dyEeyeS29ZfrnOzaVHlYI91gcKwkzOYw7Gkyb0cd_KlehLH8oJJAeV4gvHyh4btO90JHhQdNPX-ty8qrnLVAJROdtF64BdMQ5mj4smP571Wq_i7SYQ/s1600/OW-Kepulauan+Raja+Ampat,+Papua+Barat.jpg" alt="Raja Ampat"/>
            </a>
            <div class="tooltip">
            <h1>Raja Ampat</h1>
            </div>
            </li>

<li id="second" class="secondanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnDsCCz31zfTium-nFr3lhXE-kj9jG3VkK8-ko4i2crUxhDSXdqW-ALMh4tL_jsjjtHSCHxDCuysPpJvhCdQVCDhcJptLEs0GfBGnePU7Gb8tzqqfVWb1tBt9kTgNgUsF5lFeKLyzxw/s1600/OW-Gunung+Rinjani,+Lombok.jpg" alt="Gunung Rinjani"/>
            </a>
            <div class="tooltip">
            <h1>Gunung Rinjani</h1>
            </div>
            </li>
          
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0y4MktfUccg4zkFv_zQ1qwyEdCMz-ss8x7ClzpndgZvS0BMRIBXNHMY6hK0JzjgHveQCj4ujJ4LaQ3X76uqQ15k1_Np-DaTOureoMuSZzWttriZm0UejMahTqC6-D5kIvl3cnl7zm8g/s1600/OW-Ngarai+Sianok+dan+Lembah+Harau,+Sumatera+Barat.jpg" alt="Ngarai Sianok & L.Harau"/>
            </a>
            <div class="tooltip">
            <h1>Ngarai Sianok & L.Harau</h1>
            </div>
            </li>
                      
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhStTcCBhRe6LhlvKW5OLEkQLDPEq5RlpwVnHKRXWgiPdb_fmBH21jGXiF0OfWe4edmVdkYDHAbV_O6g_dt5OtOyVGjTFsPyYIjDgFrVLjXw2HK4ERgCVglp5FT19EbXmYbjefPlpj7w/s1600/OW-Taman+Nasional+Baluran,+Jawa+Timur.jpg" alt="Taman Nasional Baluran"/>
            </a>
            <div class="tooltip">
            <h1>Taman Nasional Baluran</h1>
            </div>
            </li>
                      
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMGYg2Ys8o8UnnXRfq0FwOnjtisgbrcLhcpBickxPcyXMDGMsv-hpyTCPU1b2cHxMoXqEOoqHj0HjyLJcq2hyphenhyphen3pQhXIk9MaXU3h8T8GmdevxZe-A__CwsXb59RupoZW30M5BT0HLMZg/s1600/OW-Danau+Toba,+Sumatera+Utara.jpg" alt="Danau Toba"/>
            </a>
            <div class="tooltip">
            <h1>Danau Toba</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div></pre>

Attractive Css3 Cycling Slideshow Untuk Blogger

H ari ini blog Oto Website akan berbagi tentang slideshow gambar untuk blogger yang berjudul Attractive Css3 Cycling Slideshow Untuk Blogge...

Baca selengkapnya »

Attractive Css Image Hover Effect Untuk Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.otowebsite.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-GI6QTXuxW_AIuaxLjDqXDzmiA3Z9UVMkC3Z1PMhcRxcZm1mBrveQy1jD2A3ELbuwxtBlpqXtFkQYvB60e-wbd7OIehoybS06Ui8FI1RB6pavxRrwbPZ_0rh7vOGlZ-kpY5fE92ZGuQ/s320/Attractive+Css+Image+Hover+Effect+Untuk+Blogger.png" width="320" /></a></div>
Attractive Css Image Hover Effect Untuk Blogger Adalah salah satu cara terbaik untuk mempercantik tampilan gambar yang ada di blog Anda.Sebelumnya kita juga pernah membahas berbagai effect pada gambar di antaranya <a href="http://otowebsite.blogspot.com/2013/01/membuat-gambar-bergetar-menggunakan.html" target="_blank">Membuat Gambar Bergetar Menggunakan jQuery</a>. Dengan penerapan <a href="http://otowebsite.blogspot.com/2013/02/attractive-css-image-hover-effect-untuk.html">Attractive Css Image Hover Effect Untuk Blogger</a> maka Anda telah membuat gambar Anda menjadi lebih menarik, sehingga Anda dapat menambahkannya di setiap postingan Anda. 
 
Effect gambar ini sama sekali tidak memberatkan blog atau tidak membuat loading menjadi lama karna kita hanya menggunakan CSS. 
Untuk cara menambahkan effect ini pada gambar kita hanya perlu melakukan dua langkah mudah, yaitu menambahkan css pada template dan pada postingan blog kita. Sebelum kita tau cara membuatnya lebih baik kita lihat dulu demo yang telah saya persiapkan untuk Anda di bawah ini agar Anda mengerti effect yang kita maksud. Silahkan arahkan cursor Anda pada gambar, dan lihat effectnya pada gambar tersebut. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Demo</div>
 
<style>
.OWeffect {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.OWeffect:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
</style> 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/02/attractive-css-image-hover-effect-untuk.html"><img class="OWeffect" src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" /></a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Kode yang di gunakan untuk membuat</div>
 
Berikut ini adalah kode yang di gunakan untuk membuat effect gambar seperti di atas. Anda dapat merubah kode CSS sesuai keinginan Anda. 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/02/attractive-css-image-hover-effect-untuk.html">CSS 
</a> 
<hr color="#0071bb" />
 
<div class="md7">
.OWeffect { 
-webkit-transition:  -webkit-transform .15s linear; 
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
padding: 5px 5px 5px 5px; 
-webkit-transform:  rotate(+2deg); 
-moz-transform: rotate(+2deg); 
} 
.OWeffect:hover { 
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5); 
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
-webkit-transform:  rotate(-1deg); 
-moz-transform: rotate(-1deg); 
}</div>
 
<hr color="#0071bb" />
POST 
<hr color="#0071bb" />
 
Berikut ini adalah kode untuk memanggil kode CSS di atas. Pada saat membuat atau mengedit postingan letakkan script kode berikut untu memanggail gambar Attractive Css Image Hover Effect. 
 
 
<blockquote class="tr_bq">
<img class="OWeffect" 
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" /></blockquote>
 
<hr />
<div style="text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/02/attractive-css-image-hover-effect-untuk.html">Atau</a></div>
<hr />
 
<blockquote class="tr_bq">
<img class="OWeffect" 
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" /></blockquote>
 
<hr />
<div style="text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/02/attractive-css-image-hover-effect-untuk.html">Atau</a></div>
<hr />
 
<blockquote class="tr_bq">
<img class="OWeffect" 
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" height="230" /></blockquote>
 
Perhatikan kode yang telah di block di atas, kode tersebut bisa Anda ganti sesuai keinginan Anda. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor!</div>
Saya rasa cukup sekian untuk kali ini, jika ada pertanyaan tentang artikel di atas silahkan lemparkan pertanyaan Anda di komentar Saya akan berusaha secepat mungkin untuk membalas dan membantu Anda.

Attractive Css Image Hover Effect Untuk Blogger

Attractive Css Image Hover Effect Untuk Blogger Adalah salah satu cara terbaik untuk mempercantik tampilan gambar yang ada di blog Anda.Se...

Baca selengkapnya »

Blogger Image Protection - Part 1

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3d7o0KJ4lyjRNnwfzAumKaHRe0YtBxHuHqw9ayRFy4RyfTMWIaJX2fOIpL4Haycrl74aBBRGQklXfwFi0xr6djemMTaWe95c-TPsmllWFU4SWnPa6a1tRkzy_DNRT4lE38yEFilxHg/s1600/Blogger+Image+Protection.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3d7o0KJ4lyjRNnwfzAumKaHRe0YtBxHuHqw9ayRFy4RyfTMWIaJX2fOIpL4Haycrl74aBBRGQklXfwFi0xr6djemMTaWe95c-TPsmllWFU4SWnPa6a1tRkzy_DNRT4lE38yEFilxHg/s1600/Blogger+Image+Protection.jpg" width="640" /></a></div>Apakah Anda pernah membuat atau mengedit suatu gambar yang Anda senangi dan meng Upload-nya pada blog atau situs Anda?!? Di artikel ini kita akan membahas dan berbicara tentang <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Blogger Image Protection - Part 1</a>. Silahkan lanjutkan membaca Anda sampai selesai untuk mengetahui isi dan maksud dari artikel kali ini!!! 
Cara menampilkan gambar pada blog/situs sangatlah mudah, seperti kita upload gambar dari pc kesayangan kita dan kita pasang di halaman postingan atau widget blog/situs, namun gambar-gambar yang tadi kita upload atau pasang pada blog/situs kita sangatlah mudah untuk di curi atau di salin dengan mudah. Bahkan pengguna  awam pun dapat dengan mudah melakukannya, dengan cara klick kanan pada gambar untuk menyimpannya ke komputer yang akhirnya diteruskan kepada orang lain dan akhirnya muncul di beberapa situs, blog atau bisa juga di majalah! 
<a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Alasan paling umum / cara mencuri gambar adalah : </a> 
<ol><li>Dari Google Image Search.</li>
<li>Dengan Klik Kanan -> "Save Image As ..." </li>
<li>Dengan Menyalin alamat gambar dari "Page Source"</li>
</ol><a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Metode Untuk Melindungi Gambar Anda : </a> 
<ol><li>Menonaktifkan gambar pada Google Image Search merupakan salah satu media yang bisa kita lakukan untuk melindungi gambar kita, Jika Anda ingin menggunakan media ini maka semua gambar pada blog/situs Anda tidak akan muncul pada Google Image Search.</li>
<li>Menonaktifkan klick kanan adalah salah satu metode yang sudah terkenal, Anda para pembaca <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">O.W</a> mungkin sudah menggunakan metode ini untuk blog/situs Anda. mungkin metode ini dapat melindungi gambar Anda, apa lagi Anda menggunakan script Anti klick kanan ini di seluruh halaman blog/situs Anda (teks ataupun gambar Anda protec) dengan script tersebut. <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Sebagai pop-up ini tidak terlihat bagus</a>.</li>
<li>Metode terkenal lainnya untuk melindungi gambar Anda dari para pencuri adalah dengan menggunakan CSS <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">bukan HTML murni</a>. Meskipun bahkan dalam kasus ini gambar dapat dengan mudah dicuri (dengan mengambil screenshot dan mengeditnya), tetapi karena proses panjang sebagian besar pencuri konten pasti akan menjatuhkan rencananya untuk mengambil gambar dari blog/situs Anda. Teknik ini juga akan melindungi gambar Anda dari pencuri tetapi tidak dapat diindeks dan di tampilkan dalam hasil pencarian gambar Google. </li>
</ol><a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Cara Melindungi Gambar Anda!</a> 
 
Barikut ini akan saya berikan beberapa cara untuk melindungi gambar Anda, karna penjelasan dan artikel ini sudah terlalu panjang (menurut <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">saya</a>), maka metode selanjutnya akan kita bahas pada Blogger Image Protection - Part 2 yang akan datang tentang bagaimana agar gambar kita tidak bisa di curi. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">1. Protect Semua Gambar di Blog Anda dengab jQuery trick</div> 
jQury merupakan salah satu media yang bisa kita gunakan untuk melindungi gambar kita, berikut saya berikan kode-kode jQuery untuk melindungi gambar Anda dan di mana Anda harus meletakkannya. 
 
1. Letakkan jQuery berikut di atas tag <head> 
 
<blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></blockquote> 
2. Selanjutnya Pilih salah satu script berikut dan letakkan di bawah tag </head> 
 
<hr color="#0071bb" />Lindungi hanya gambar pertama di setiap Post 
<hr color="#0071bb" /> 
<div class="md9"> 
 
 
 
<script type='text/javascript'> 
//<![CDATA[ 
$(function(){ 
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"Oto Website protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>"); 
}); 
//]]> 
</script></div> 
<hr color="#0071bb" />Melindungi semua gambar dalam setiap postingan 
<hr color="#0071bb" /> 
<div class="md9"> 
 
 
 
<script type='text/javascript'> 
//<![CDATA[ 
$(function(){ 
$(".post-body img").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"Oto Website protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>"); 
}); 
//]]> 
</script></div> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">2. Protect Gambar Anda dengan Menyisipkan kode</div> 
Saya sendiri tidak tau judul apa yang tepat dan harus saya pakai untuk metode yang kedua ini. Cara ini mungkin sudah banyak bertebaran di blogger-blogger tetangga, jadi tidak ada salahnya saya mencoba memperkenalkan pada Anda yang belum tau trick ini. Dengan menggunakan metode ini kita bisa melindungi gambar kita dari para pencuri atau bisa di bilang juga ini media khusus disable klik kanan pada gambar. <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Akan tetapi kita harus menerapkan metode ini secara manual</a>. 
 
Untuk demo <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Protect Gambar Anda dengan Menyisipkan kode</a> bisa Anda lihat dan coba pada gambar berikut. Coba arahkan cursor Anda pada gambar, dan coba klick kanan atau menyimpan atau menyalin URL gambar berikut seperti biasa. 
 
<hr color="#0071bb" /><div style="text-align: center;">Demo</div><hr color="#0071bb" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.googlecode.com/files/wntiku.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" oncontextmenu="return false;" src="http://otowebsite.googlecode.com/files/wntiku.jpg" width="311" /></a></div> 
Untuk membuat gambar protectc sepertti di atas Anda cukup menyisipkan kode berikut di belakang URL gambar Anda: 
 
<hr color="#0071bb" />Kode yang di gunakan! 
<hr color="#0071bb" /> 
<blockquote class="tr_bq">oncontextmenu="return false;"</blockquote> 
<hr color="#0071bb" />Penempatan Kode pada URL/Script Gambar 
<hr color="#0071bb" /> 
<blockquote class="tr_bq"><img src="http://URL GAMBAR" oncontextmenu="return false;" /></blockquote> 
<hr /><div style="text-align: center;"><a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Atau</a></div><hr /> 
<blockquote class="tr_bq"><img border="0" height="200" src="http://URL GAMBAR"oncontextmenu="return false;" width="300" /></a></blockquote><div style="text-align: center;"> 
<hr /><div style="text-align: center;"><a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Atau</a></div></div><hr /> 
<blockquote class="tr_bq"><a href="http://URL TARGET.com" target="_blank"><img alt="Oto Website" src="URL GAMBAR"oncontextmenu="return false;" /></a></blockquote> 
Sayangnya metode di atas dan kebanyakan metode untuk melindungi gambar atau content lain pada blog/situs masih bisa di curi atau tidak benar-benar aman total. Untuk caranya mematahkan metode di atas atau metode yang di pasang blog-blog lain yang mematikan klick kanan adalah dengan mematikan script Anti Klick Kanan itu sendiri. Melalui browser kesayangan kita semua browser bisa Menonaktifkan Anti Klick Kanan (<a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Firefox, Chrome, Opera, dan lain sebagainya</a>). 
Berikut ini cara Mengaktifkan kembali Klick Kanan pada pada blog/situs yang sudah di protect gambarnya ataupun semua contentnya, seperti yang saya bilang di atas kita bisa Menonaktifkan script anti klick kanan melalui browser, silahkan Anda ikuti ilustrasi berikut (<a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">disini saya menggunakan Forefox</a>). 
 
<style>
.ow1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
}
.ow1:hover {
background:#f2f2f2;
)
</style> 
<div class="YOUR HEADLINE CLASS i.e ow1">Cara Menonaktifkan Anti klick kanan.</div> 
1. Klick Tool -> Options -> Options. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2YCE2_NKOwsTkBLsd3vSveh6JQe_bIUmx9MKl5CkbU0hwZqSMjRWY74X2-rLho9TqAyeOr5-fuChbhRwhIXfQ1oZyR7kf95xMoW1HKZUSRBUzQI4sXwibpchPcAPw91C0o9koSdbK0g/s1600/m1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2YCE2_NKOwsTkBLsd3vSveh6JQe_bIUmx9MKl5CkbU0hwZqSMjRWY74X2-rLho9TqAyeOr5-fuChbhRwhIXfQ1oZyR7kf95xMoW1HKZUSRBUzQI4sXwibpchPcAPw91C0o9koSdbK0g/s1600/m1.png" /></a></div> 
2. Hilangkan tanda centang pada enable JavaScript  -> Ok. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgdI88xkeoBehyphenhyphencDww5dCeUj_cH4GK3uhZr9barSh7N8UDEdEwh38rK2Hvmx485XLbS5gL_OIYbIrWcucNvEZrqAipu7y0PeeIG-D4A1uNQ4ExORp9GnokDQ1tTBojkIF7C3-5skG6g/s1600/m2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgdI88xkeoBehyphenhyphencDww5dCeUj_cH4GK3uhZr9barSh7N8UDEdEwh38rK2Hvmx485XLbS5gL_OIYbIrWcucNvEZrqAipu7y0PeeIG-D4A1uNQ4ExORp9GnokDQ1tTBojkIF7C3-5skG6g/s1600/m2.png" /></a></div> 
Setelah Anda melakukan langkah-langkah di atas, sekarang coba klick kanan pada gambar yang telah di protect di atas atau pada blog/situs lainnya yang menggunakan media Anti Klick Kanan! 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">3. Menyembunyikan Gambar dari Google Image Search</div> 
Sekarang kode ini memiliki semua manfaat melebihi metode di atas dan apalagi alamat gambar juga tidak terlihat dalam Page Source. Mencegah gambar Anda muncul dalam pencarian gambar Search Engine (atau Image Search <a href="http://google.co.id/" target="_blank">hanya Google</a>). 
 
Gunakan dan letakkan meta tag berikut di tag < head> daerah template Anda: 
 
<blockquote class="tr_bq"><meta name="robots" content="noimageindex"></meta></blockquote> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor!</div> 
Finish, Akhirnya kita menjumpai titik akhir dari artikel <a href="http://otowebsite.blogspot.com/2013/01/blogger-image-protection-part-1.html">Blogger Image Protection - Part 1</a> mudah-mudahan artikel kali ini Anda sukai, dan bisa meningkatkan pengetahuan Anda. Nantikan lanjutan dari artikel ini, yaitu Blogger Image Protection - Part 2 yang dimana kita akan membahas cara agar gambar kita tidak bisa di curi. Dari meja editor saya mengucapkan Selamat Membaca Artikel <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> lainnya, dan Salam Blogger.

Blogger Image Protection - Part 1

A pakah Anda pernah membuat atau mengedit suatu gambar yang Anda senangi dan meng Upload-nya pada blog atau situs Anda?!? Di artikel ini kit...

Baca selengkapnya »

Membuat Gambar Bergetar Menggunakan jQuery

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvzKCF-F6Nu_QNe9t0mtHiqc7LpBBXFBDJmcE-3NPNHPVGGw6xV7RNNwKl7nhjcixFXTU3lwYXRBn0fYxKOFeBjLG8M0JSHeUWnASSIe8WX7j-551KJA7c57mybLcGH5d_Ex5U8gODA/s1600/jquery-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvzKCF-F6Nu_QNe9t0mtHiqc7LpBBXFBDJmcE-3NPNHPVGGw6xV7RNNwKl7nhjcixFXTU3lwYXRBn0fYxKOFeBjLG8M0JSHeUWnASSIe8WX7j-551KJA7c57mybLcGH5d_Ex5U8gODA/s1600/jquery-logo.png" width="640" /></a></div>
Baru kemarin kita membahas tentang tutorial blogger dengan tema <a href="http://otowebsite.blogspot.com/2013/01/membuat-effect-sliding-door-with-css.html" target="_blank">Membuat Effect Sliding Door With CSS</a>, dan untuk kali ini kita akan kembali membahas tentang tutorial gambar blogger, tapi kali ini temanya adalah <a href="http://otowebsite.blogspot.com/2013/01/membuat-gambar-bergetar-menggunakan.html">Membuat Gambar Bergetar Menggunakan jQuery</a>. Dari judulnya saja kita sudah dapat menebak/membedakan kalo kali ini kita akan membuat tutorial gambar dengan bantuan jQuery berbeda dengan kemarin yang hanya membutuhkan bantuan dari CSS saja untuk membuatnya menjadi sempurna dan bisa di gunakan. Mungkin Anda sedang bertanya apa maksud dari judul tutorial kali ini? ya kali ini kita akan membuta gambar bergetar dengan sendirinya apabila cursor di arah kan pada gambar atau apabila cursor menyentuh gambar tersebut. 
Untuk lebih jelasnya tentang tutorial Membuat Gambar Bergetar Menggunakan jQuery ini mari kita lihat demonya lansung, dan coba Anda sentuh gambar berikut ini dengan cursor komputer Anda. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Demo Gambar Bergetar Menggunakan jQuery</div>
 
<style>
.img_OW{
position:relative
}
</style> 
 
<script src="http://otowebsite.googlecode.com/files/Getar.js.txt" type="text/javascript">
</script> 
 
<div style="text-align: center;">
<img class="img_OW" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVl2Ola7EW1ksoP51JyRW1C431thQXHoGU7fbV_WHYDFbk4nSptDZhW3am5RsRFs4K8EuuvidNc1ccvd65pMv4kHWrWQY5Lqo6CqNam4a1qMGN6ljr2qTGpQKN60lTWsiEHI9ArxAKaA/s1600/OtoWebsite_car.png" /></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Membuat Gambar Bergetar Menggunakan jQuery</div>
 
Bagaiman apakah Anda berniat membuatnya? berikut ini akan saya berikan kode untuk membuatnya! 
 
<hr color="3e81c4" />
The CSS 
<hr color="3e81c4" />
 
<blockquote class="tr_bq">
.img_OW{ 
position:relative 
}</blockquote>
 
<hr color="3e81c4" />
The HTML 
<hr color="3e81c4" />
 
<blockquote class="tr_bq">
<script src="http://otowebsite.googlecode.com/files/Getar.js.txt" type="text/javascript"></script></blockquote>
 
<hr color="3e81c4" />
Kode Pemanggil 
<hr color="3e81c4" />
 
<blockquote class="tr_bq">
<img class="img_OW" src="http://URL GAMBAR" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" /></blockquote>
 
Keterangan: Ganti warna merah dengan URL Gambar Anda sendiri. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
 
Finish, cukup sekian untuk kali ini, saya harap Anda suka tutorial <a href="http://otowebsite.blogspot.com/2013/01/membuat-gambar-bergetar-menggunakan.html">Membuat Gambar Bergetar Menggunakan jQuery</a>, jika ada pertanyaan tentang tutorial di atas jangan sungkan untuk bertanya saya akan berusaha secepatnya membantu Anda.

Membuat Gambar Bergetar Menggunakan jQuery

B aru kemarin kita membahas tentang tutorial blogger dengan tema Membuat Effect Sliding Door With CSS , dan untuk kali ini kita akan kemba...

Baca selengkapnya »

CSS3 Image Gallery Blogspot

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxYuEl9hR9b5YAMpGJhTVJfeEkVVMROLN3DnyQLnGc1I8wPZP0pNfQaLF7DctbQ7N4ltI5tYe4d1Kx7R1XG5F12DgQGurUQfZP1XYo8d_owa2APi8pDMcnmefr4-ZzjQvCqQStbnhrQ/s640/CSS3+Image+Gallery+Blogspot.jpg" width="640" /></a></div>Kali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar. 
Ini adalah salah satu trick terbaik yang bisa Anda terapkan dan gunakan pada blog/situs Anda, dan untuk tutorial kali ini saya beri tema <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html" target="_blank">CSS3 Image Gallery Blogspot</a>. Trick ini bekerja dengan CSS3 dan tidak akan begitu berpengaruh pada kecepatan pemuatan blog/situs Anda. 
Dengan Anda menggunakan <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html">CSS3 Image Gallery Blogspot</a> maka Anda dapat dengan mudah memamerkan koleksi foto-foto Anda pada pengunjung blog/situs Anda. 
Untuk lebih jelasnya tentang <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html" target="_blank">CSS3 Image Gallery Blogspot</a> silahkan Anda lihat demonya terlebih dahulu. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/CSS3GalleryBlogspot.html" target="_blank">Lihat Demo</a></div> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat CSS3 Image Gallery Blogspot</div> 
Disini saya akan memberikan Anda kode-kode yang di perlukan untuk membuat CSS3 Image Gallery Blogspot. Gunakan kode yang saya berikan berikut untuk membuatnya! 
 
<hr color="3e81c4" />CSS 
<hr color="3e81c4" /> 
<pre class="brush:css;">#gallery {
border: 10px solid #1D0C16;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background: #272229;
/* Kotak efek bayangan di Safari dan Chrome*/
-webkit-box-shadow: #272229 10px 10px 20px;
/* Kotak efek bayangan di Firefox*/
-moz-box-shadow: #272229 10px 10px 20px;
/*Kotak efek bayangan di IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);
/* Kotak efek bayangan di Browser yang mendukung, Opera 10,5 pra-alpha release*/
box-shadow: #272229 10px 10px 20px;
}

#gallery ul{
/* Posisi isi ul di tengah galeri */
margin-left:-30px;
}

#gallery ul li {
/* Untuk menciptakan efek yang tepat dengan melayang-layang kita harus menggunakan display inline-tabel
Ini akan menampilkan gambar besar di sebelah kanan thumbnail
*/
list-style:none; display:inline-table; padding:10px;
}

/*  Ini adalah pic untuk menampilkan saat efek yang melayang-layang terjadi selama li yang berisi thumbnail */
#gallery ul li .pic{
/* Animasi dengan transisi di Safari dan Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animasi dengan transisi di Firefox (No supported Yet) */
-moz-transition: all 0.6s ease-in-out;
/* Animasi dengan transisi di Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The opacity menjadi 0 untuk menciptakan efek fadeOut*/
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid black;
/* Kotak efek bayangan di Safari dan Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/*Kotak efek bayangan di Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* Kotak efek bayangan di IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}

#gallery ul li .mini:hover{
cursor:pointer;
}

/* Ini menciptakan efek yang diinginkan menampilkan gambar ketika kita mengarahkan mouse ke thumbnail*/
#gallery ul li:hover .pic {
/ * Lebar dan tinggi adalah seberapa besar gambar akan pertumbuhan dengan efek * /
width:200px;
height:200px;
opacity:1;
visibility:visible;
float:right;
}</pre> 
<hr color="3e81c4" />HTML 
<hr color="3e81c4" /> 
<pre class="brush:html;"><div id="gallery">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM52cPJP7GUAW5EBPod3o2WTFoBhc2uKN8SWJEtVoeTd-X2MQ3N7hwnYrCfO1BVh_Z7kjX2p0dee_5DDUdJWtWuLpag_AJtFtkp9m7E-S42_Bbo-InEasiEspLUq9X0bLo9Ft1IzfC9Q/s1600/transformers.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM52cPJP7GUAW5EBPod3o2WTFoBhc2uKN8SWJEtVoeTd-X2MQ3N7hwnYrCfO1BVh_Z7kjX2p0dee_5DDUdJWtWuLpag_AJtFtkp9m7E-S42_Bbo-InEasiEspLUq9X0bLo9Ft1IzfC9Q/s1600/transformers.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIECZYEYcU_ryxoiBn6OXEiqjPhGb-1YkUIfp6idvcadGwC7ZGviMSeOSJlqSaJRc6TM2R6hMYtuCRP5mf6nkqxT4xOBIp-DoBOoEKtV_ANHQFkdUG6WIAhhlWmbvhuIezZ6A5SSgw/s1600/Transformers+3.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIECZYEYcU_ryxoiBn6OXEiqjPhGb-1YkUIfp6idvcadGwC7ZGviMSeOSJlqSaJRc6TM2R6hMYtuCRP5mf6nkqxT4xOBIp-DoBOoEKtV_ANHQFkdUG6WIAhhlWmbvhuIezZ6A5SSgw/s1600/Transformers+3.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcDbEEHWemjSxmUNQwPzAgtNAoo_ijpK6v8J9Tu3dXb0AI_PRSp47R7Qietrz3155FxfDjDzrF4974IMGHUb582qsW3SeW8LVsS8TodBOTYGB6pDxQEhZf2Tdf_KuCEdWV0PLlMAlbQ/s1600/Transformers-Bumblebee-by-DevinePliskin.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcDbEEHWemjSxmUNQwPzAgtNAoo_ijpK6v8J9Tu3dXb0AI_PRSp47R7Qietrz3155FxfDjDzrF4974IMGHUb582qsW3SeW8LVsS8TodBOTYGB6pDxQEhZf2Tdf_KuCEdWV0PLlMAlbQ/s1600/Transformers-Bumblebee-by-DevinePliskin.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZbbyv361si_YiMcMINkrIHmKCM6aIMB3GmS5NsQErWfFIV0uymnTpVkudKF9KUeaokcPuZ2B9OQtsAcWzYHj_yBWIOPZNDaykX_saOA79qej4XLTj99qd75z6QxfJQNKi_BpErn9KQ/s1600/megan-fox-transformers-2.jpg" class="mini"  width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZbbyv361si_YiMcMINkrIHmKCM6aIMB3GmS5NsQErWfFIV0uymnTpVkudKF9KUeaokcPuZ2B9OQtsAcWzYHj_yBWIOPZNDaykX_saOA79qej4XLTj99qd75z6QxfJQNKi_BpErn9KQ/s1600/megan-fox-transformers-2.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgG-pWzssh50btmZkWGmP8R2YmTBB6NAdVJNmo5IyLQ9OuhSvTAYc95ru9lstRSK5qiVY7Vx0Zc4X4uahGJ2-MwMMJvued5Ia6tYWnWLDjl0kC-4xZWX_d7vU16cWtMbIB0M4EaQKtQ/s1600/transformers3(2).jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgG-pWzssh50btmZkWGmP8R2YmTBB6NAdVJNmo5IyLQ9OuhSvTAYc95ru9lstRSK5qiVY7Vx0Zc4X4uahGJ2-MwMMJvued5Ia6tYWnWLDjl0kC-4xZWX_d7vU16cWtMbIB0M4EaQKtQ/s1600/transformers3(2).jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuhjc6BsY1dRtB6DvRcyHeUqIDLaueXhZPA6wxhmpD-NmOY7cZeAh5RzeD-SLwgVHeEQuX_c9W042hnDF9a9VUCRjbAWem7leFInY-2xJsTZbyYtTG_kfHUVgB914zoo4S1Djg2XRGA/s1600/transformers_movie_image_gallery_016.jpg" class="mini" width="100" height="100"  /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuhjc6BsY1dRtB6DvRcyHeUqIDLaueXhZPA6wxhmpD-NmOY7cZeAh5RzeD-SLwgVHeEQuX_c9W042hnDF9a9VUCRjbAWem7leFInY-2xJsTZbyYtTG_kfHUVgB914zoo4S1Djg2XRGA/s1600/transformers_movie_image_gallery_016.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepLHQy35KIbVzVP2SIWSUZWjBXKa38fiswRgkT5fGOEa0nm_1zEwV6hmzENvPfpyti2LujKFUQxdlXTi9TCT-hNL_7DiDIeQ3Dhy5gygkvKTPIPMzbq3oyW_ofotLp_F3HCz-SFZl-g/s1600/transformers3.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepLHQy35KIbVzVP2SIWSUZWjBXKa38fiswRgkT5fGOEa0nm_1zEwV6hmzENvPfpyti2LujKFUQxdlXTi9TCT-hNL_7DiDIeQ3Dhy5gygkvKTPIPMzbq3oyW_ofotLp_F3HCz-SFZl-g/s1600/transformers3.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszWRIZVEqw6lsGsLKhEnI3EBPERclir09VLirmVDghB4hE7oeGqKqD5xAtEpcXQoHeB2aj68MvQu1H4lDOWqlimEfL14qZki3FXzPokYleLFlHwG8t-2rfKnaEHuFBt40VjuUPyQWeQ/s1600/Transformers_2_Optimus_Prime_3_by_CrossDominatriX5.png" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszWRIZVEqw6lsGsLKhEnI3EBPERclir09VLirmVDghB4hE7oeGqKqD5xAtEpcXQoHeB2aj68MvQu1H4lDOWqlimEfL14qZki3FXzPokYleLFlHwG8t-2rfKnaEHuFBt40VjuUPyQWeQ/s1600/Transformers_2_Optimus_Prime_3_by_CrossDominatriX5.png" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEfxyc754p6yhcI1TNALXcCnfy4_5BZae4_0ZWIJztv1zHNpv_j69JQmalKDFYv5YHdDPprpmppcJl0MO75X2I_fKVfFhQoyGpNCMkJV3nPW4Z3YBPQ2Brr515E0VFziAbZWKOOF86A/s1600/Transformers-313.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEfxyc754p6yhcI1TNALXcCnfy4_5BZae4_0ZWIJztv1zHNpv_j69JQmalKDFYv5YHdDPprpmppcJl0MO75X2I_fKVfFhQoyGpNCMkJV3nPW4Z3YBPQ2Brr515E0VFziAbZWKOOF86A/s1600/Transformers-313.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyU2uNAw5KSjvtxEto4k2LT5LUe4mLsyT_CjnzPkjbvH-ml8CDaWsNJ__ShZNeh7Mhl1F6zDBbOrSO26tGEvgTcU_97wWWm4N7qCFN8NjLnic3zftlE5uFdpGa0yNp57dqbA5VgZZ5Q/s1600/wp_transformers1322_1280.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyU2uNAw5KSjvtxEto4k2LT5LUe4mLsyT_CjnzPkjbvH-ml8CDaWsNJ__ShZNeh7Mhl1F6zDBbOrSO26tGEvgTcU_97wWWm4N7qCFN8NjLnic3zftlE5uFdpGa0yNp57dqbA5VgZZ5Q/s1600/wp_transformers1322_1280.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTRRCPzhqWX1CPwEwe7J2KSpGC4tEYvx2IhIMF9PdHnzw_OmYIjPJTdsCE3oW5upbsNDzVg_6NIXRlAT0ERd5iJLFSIw3arV5A9anv31aMtpMoAdX7NodtGuXFWSjvnRg1c8Ew6ge8A/s1600/20100802164107!Megatron.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTRRCPzhqWX1CPwEwe7J2KSpGC4tEYvx2IhIMF9PdHnzw_OmYIjPJTdsCE3oW5upbsNDzVg_6NIXRlAT0ERd5iJLFSIw3arV5A9anv31aMtpMoAdX7NodtGuXFWSjvnRg1c8Ew6ge8A/s1600/20100802164107!Megatron.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUtyBqDbGFSNPpfLr0zm2ei3CHLW7o_Jwd9Zggwr11MboSt8Osza-nWgnGw2wCwAcyoeJF1lG-xAqCJ2q9Ntmz5QzAdw_Y6_lOHue2K450ynOSRveKqUZbrs9pfH6JavyPiHptWTMw/s1600/megan-fox-transformers-3.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUtyBqDbGFSNPpfLr0zm2ei3CHLW7o_Jwd9Zggwr11MboSt8Osza-nWgnGw2wCwAcyoeJF1lG-xAqCJ2q9Ntmz5QzAdw_Y6_lOHue2K450ynOSRveKqUZbrs9pfH6JavyPiHptWTMw/s1600/megan-fox-transformers-3.jpg" class="pic"  />
</li>
</ul>
</div></pre> 
<div class="YOUR HEADLINE CLASS i.e ow">Melakukan Perubahan dan Modifikasi</div>Anda dapat memodifikasi <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html">CSS3 Image Gallery Blogspot</a> ini dengan mengedit kode CSS di atas yang telah saya beri tanda dan jika Anda ingin bereksperimen sendiri. 
Perhatikan Kode HTML di atas, ganti semua url gambar dengan url gambar Anda sendiri. 
Jika Anda kesulitan mencari kode HTML dalam Template silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>.

CSS3 Image Gallery Blogspot

K ali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar. Ini adalah salah satu trick terbaik yang bisa And...

Baca selengkapnya »

Java Script Image Slider

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUsqCSfES-UZjBQLno_0NB1CHBQlvYDOJnzW89X9sm5_651xJrf6DB4gIJAJQdEiVhzzJu2Q0JvuEbjpGHKAJgH8SF85d5dcbdqzeRxC5-PwKvw_JPEIgXFt3u_NzVZp9fsZ50VMuzw/s1600/image-slider-for-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUsqCSfES-UZjBQLno_0NB1CHBQlvYDOJnzW89X9sm5_651xJrf6DB4gIJAJQdEiVhzzJu2Q0JvuEbjpGHKAJgH8SF85d5dcbdqzeRxC5-PwKvw_JPEIgXFt3u_NzVZp9fsZ50VMuzw/s1600/image-slider-for-blogger.jpg" /></a></div>H ari ini saya akan berbagi slider keren yang bekerja dengan JavaScript dan jQuery  dan flash slider needed. <a href="http://otowebsite.blogspot.com/2012/08/java-script-image-slider.html" target="_blank">Java Script Image Slider</a> ini berisi pita di sudut kiri atas slider dan itu disebut sebagai "What's Hot", juga mengandung efek slice irisan gambar indah yang menjadi 12 bagian, fitur utama peningkatan keindahan fitur besar slider. Slider ini sangat disesuaikan sehingga untuk mengeditnya sesuai keinginan dan yang sempurna akan sesuai untuk slider blog. Slider ini dibuat oleh <a href="http://menucool.com/" target="_blank">menucool.com</a>  dan Saya telah menciptakan sebuah versi Template slider pada kerja yang sempurna dengan blogger blog. Untuk melihat demo <a href="http://otowebsite.blogspot.com/2012/08/java-script-image-slider.html" target="_blank">Java Script Image Slider</a> silahkan klick tombol di bawah ini. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/Javascriptimage.html" target="_blank">LIHAT DEMO</a></div> 
<hr color="#3e81c4" />Cara membuat/memasang Java Script Image Slider 
<hr color="#3e81c4" /> 
Untuk membuat <a href="http://otowebsite.blogspot.com/2012/08/java-script-image-slider.html">Java Script Image Slider</a> ini juga sangat mudah, ikuti instruksi berikut untuk mulai menerapkannya pada blog Anda. 
 
1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget. 
 
3. Pilih elemen HTML/Java Script. 
 
4. Lalu copy kode berikut dan letakkan di dalam  elemen HTML/Java Script tadi. 
 
<blockquote class="tr_bq"><style type="text/css"> 
 /* JavaScript Image Slider By http://www.otowebsite.blogspot.com/ */ 
#mcis { 
 display: none; 
} 
#sliderFrame { 
 position: relative; 
 width: 500px; 
 margin: 0 auto; 
        border:5px solid #000; 
} 
#ribbon { 
 width: 111px; 
 height: 111px; 
 position: absolute; 
 top: -4px; 
 left: -4px; 
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-egcAVEL2Lds5ykWKK_0BCV1KNGxq6XeUN6LUuSWgn5RD-mum8kEf5QRT3ZRQhMFLaMpKbGfwJIq-8rler0tcySL_dcSkiR_YPl4UgfO4VkRU2xwaJTEff6ErE7WaYLhHOyRc_KGh2g/s1600/otowebsite.blogspot.com--ribbon.png) no-repeat; 
 z-index: 7; 
} 
#slider { 
 width: 500px; 
 height: 218px; 
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvChpE2kLRT0jbf1rlBh7Ke7G3sVdgd9eeSxzO-6KHrIaQJ6IL9EcPcp_ShxsrxARb_6xLQlVdoBJZAnK-NzXZEL0Bd9hqQLhoBBdEOPE1ZdGfuv48C6grJBb-0orhGj5tQYv4rPkTPg/s1600/otowebsite.blogspot.com--loading.gif) no-repeat 50% 50%; 
 position: relative; 
 margin: 0 auto; 
 box-shadow: 0px 1px 5px #999999; 
} 
#slider img { 
 position: absolute; 
 border: none; 
 display: none; 
} 
#slider a.imgLink { 
 z-index: 2; 
 display: none; 
 position: absolute; 
 top: 0px; 
 left: 0px; 
 border: 0; 
 padding: 0; 
 margin: 0; 
 width: 100%; 
 height: 100%; 
} 
div.mc-caption-bg, div.mc-caption-bg2 { 
 position: absolute; 
 width: 100%; 
 height: auto; 
 padding: 0; 
 left: 0px; 
 bottom: 0px; 
 z-index: 3; 
 overflow: hidden; 
 font-size: 0; 
} 
div.mc-caption-bg { 
 background-color: black; 
} 
div.mc-caption { 
 font: bold 14px/20px Arial; 
 color: #EEE; 
 z-index: 4; 
 padding: 10px 0; 
 text-align: center; 
} 
div.mc-caption a { 
 color: #FB0; 
} 
div.mc-caption a:hover { 
 color: #DA0; 
} 
div.navBulletsWrapper { 
 top: 250px; 
 left: 190px; 
 width: 150px; 
 background: none; 
 padding-left: 20px; 
 position: relative; 
 z-index: 5; 
 cursor: pointer; 
} 
div.navBulletsWrapper div { 
 width: 11px; 
 height: 11px; 
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnrwXoVm0zYJTkd4FHCKzkMIJHw_ELJtZmB_9wdMMXn15lwzwshXQi3cJtkh0LC1SLX3M0hLIzymlibGG71VT3xRmh52SPkOOvCVFg4Tc4FKKH2xm9LZ5GWHHlQ5juGhW_7DlkRDdY-g/s1600/otowebsite.blogspot.com-bullet.png) no-repeat 0 0; 
 float: left; 
 overflow: hidden; 
 vertical-align: middle; 
 cursor: pointer; 
 margin-right: 11px; 
 _position: relative; 
} 
div.navBulletsWrapper div.active { 
 background-position: 0 -11px; 
} 
#slider { 
 transform: translate3d(0,0,0); 
 -ms-transform: translate3d(0,0,0); 
 -moz-transform: translate3d(0,0,0); 
 -o-transform: translate3d(0,0,0); 
 -webkit-transform: translate3d(0,0,0); 
} 
 </style> 
<script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/js-image-slider.js" type="text/javascript"></script> 
<div id="sliderFrame"> 
     <div id="ribbon"></div> 
            <div id="slider"> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jn2Sx2OnPNy_7x0Qv-JBu-Qd_9rqAsferwNyc95lVK6bV6P5jxwFOeio_eSEPO-oHryzx6cjiPYfpXMziLxBVAPlIOdrFyILYFHagASQyxacmORInM350Xoae0SNL3ezq58Gnyea0g/s1600/otowebsite.blogspot.com-1.jpg" alt="Image Slider By otowebsite.blogspot.com"/></a> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-82JL0jDNbE05qeNvtLxiF_QsKoms-QceWQY56GRD1yJA20iwsDYs94fodsbGgo6_5PGiJWJ2Qi5Rz8h9APKqosHOv57kPMuzD1S_y-zGgIbKfdREXFxuaEIQx6A8mBKDxgI_JuOwLA/s1600/otowebsite.blogspot.com-2.jpg" alt="Oto Website"/></a> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsiLjpjW9GVKoY2FvuXBk6_4LHY5ZMLniakHaWa4wJkPO4rfIt5-Yb8usHXxw6nkuJO931jjPAVknIyMm3dssP3R-OxGCTPxnQZRyuq1NfxtgldLK-4aTMBf263SWitgLFL5_z7xu_Q/s1600/otowebsite.blogspot.com-3.jpg" alt="The slide is a linking image"/></a> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9SDZwKHee_Weru9TGZbskor-33KZbR69x5Whu0h9Qv9TxlPp1u_Je6mNrlYjSQpyUkJYfupXKtOzFSlOudNm9yAqi1AIi1p_r9az2SyALu5uGCdoXmIB8cN9H3ctrQQsG8EjGpDe1AA/s1600/otowebsite.blogspot.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRc3KYvchmDkMXl4sUGOCtoSiRS1EyNb3jYiZ47YBGppwtX6TgSJZpRRZMDkCeYQybLsO6Y_P2zVF9WPmpy0uk9nGdewEciS4B5qskzmxEX4rdYcmSasHfL4x_lgV_8iYTlZIEhG0fWg/s1600/otowebsite.blogspot.com-5.jpg" alt="#htmlcaption"/></a> 
                </div></div></blockquote> 
5. Simpan. 
 
<hr color="#3e81c4" />Melakukan Perubahan 
<hr color="#3e81c4" /> 
Jika Anda ingin melakukan perubahan, Anda perhatikan kode-kode yang saya block di atas, dan berikut ini adalah keterangannya: 
<ul><li>Kode yang di block merah muda adalah lebar gambar.</li>
<li>Kode yang di block oranye adalah lebar dan tinggi widget.</li>
<li>Kode yang di block kuning adalah url gambar.</li>
<li>Kode yang di block biru adalah tempat untuk menempatkan url tujuan.</li>
<li>Kode yang di block hijau adalah title dari gambar.</li>
</ul> 
<hr color="#3e81c4" />Mengalami Kesulitan? 
<hr color="#3e81c4" /> 
Jika Anda mengalami kesulitan dalam Cara membuat/memasang <a href="http://otowebsite.blogspot.com/2012/08/java-script-image-slider.html">Java Script Image Slider</a>, jangan sungkan untuk bertanya, saya akan dengan senang hati membatu Anda.

Java Script Image Slider

H ari ini saya akan berbagi slider keren yang bekerja dengan JavaScript dan jQuery dan flash slider needed. Java Script Image Slider ini ...

Baca selengkapnya »

Simple Image Gallery Untuk Blogger Dengan Control Options

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-1Qg9OC-SIm4kByb-UFTbSG9Hj9lyDM0iOqvMCuS5lf-rQfSb0JmSmMAXVZTWHlTCUqKzIoArHm6PYdn3512B_4H-Ntv7lhT2EpjRcuahBozjCpsR8LC64I4FHLG9-nGQT7U6iOvzyps/s320/image-gallery-slider-for-blogger.png" width="320" /></a></div>Saya tidak pernah berpikir saya bisa memiliki Slide dengan loading, cahaya cepat, lucu dan Image Gallery sangat terkendali atau slideshow dengan bermain dan pilihan jeda. 
 
Perlu Anda ketahui slide ini di buat oleh Muhammad. 
 
Slide ini menggunakan Jquery, JavaScript dan CSS dan HTML dan berkat dorongan dinamis muhammad mampu membuat widget blogger yang kompatibel yang akan menampilkan posting fitur, foto, gambar dll dengan cara yang indah. 
 
Sekali lagi saya memberi tahu Anda bahwa disini saya hanya melakukan sedikit perubahan pada script ini agar Image slide ini bekerja menjadi lebih sempurna. 
Dengan instalasi yang sangat mudah tanpa perlu Edit HTML anda hanya perlu menembahkan Elemen HTML/Java Script di sidebar blogger Anda. 
Sebelum kita membahas Cara minginstalnya <a href="http://otowebsite.blogspot.com/2012/07/simple-image-gallery-untuk-blogger.html" target="">Simple Image Gallery Untuk Blogger Dengan Control Options</a> ini lebih baik Anda lihat dulu demonya dengan menekan tombol di bawah ini. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/Demo%20Simple%20Image%20Gallery.html" target="_blank">Lihat Demo</a></div><div style="text-align: center;"> 
</div><hr color="#0000ff" />Cara Instalasi Simple Image Gallery Untuk Blogger Dengan Control Options 
<hr color="#0000ff" /> 
Sekarang kita akan mulai membahas Cara Instalasi <a href="http://otowebsite.blogspot.com/2012/07/simple-image-gallery-untuk-blogger.html">Simple Image Gallery Untuk Blogger Dengan Control Options</a> ini, untuk itu silahkan ikuti langkah-langkah berikut. 
 
1. Login ke akun blogger Anda. 
 
2. Pada Dabor klick Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script. 
 
3. Lalu copy kode berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script tadi. 
 
<div class="md8"> 
<style type="text/css"> 
#simplegalleryOW { 
    //CSS for sample Gallery 
position: relative; 
    visibility: hidden; 
    border: 5px solid black; 
    margin: auto; 
} 
 
#simplegalleryOW .gallerydesctext { 
    //CSS for description DIV of Example 1 (if defined) 
text-align: left; 
    padding: 2px 5px; 
    font-family: calibri; 
} 
</style> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/image-gallery.js"> 
</script> 
 
<script type="text/javascript"> 
var mygalleryOW=new simpleGallery({ 
 wrapperid: "simplegalleryOW", //ID of main gallery container, 
 dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly 
 imagearray: [ 
  
       ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], 
 
       ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], 
 
       ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"], 
 
       ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], 
 
       ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"] 
 ], 
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] 
 persist: true, 
 fadeduration: 1000, //transition duration (milliseconds) 
 oninit:function(){ //event that fires when gallery has initialized/ ready to run 
 }, 
 onslide:function(curslide, i){ //event that fires after each slide is shown 
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) 
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) 
 } 
}) 
</script> 
<div id="simplegalleryOW"></div> 
 
</div> 
4. Simpan. 
 
<hr color="#0000ff" />Sekarang hati-hati dalam membuat perubahan ini. 
<hr color="#0000ff" /> 
 
<ul><li>Pertama mengubah ukuran semua gambar Anda ke dimensi tetap = Untuk mengubah dimensi dari slide Anda hanya perlu merubah kode 300, 200 di mana 300 adalah lebar dan 200 adalah tinggi.</li>
<li>Ganti  IMAGE LINK HERE  dengan Url gambar Anda sendiri</li>
<li>Ganti # dengan link atau url yang ingin Anda tambahkan ke gambar tertentu.</li>
<li>Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi tentang foto. Ini gambaran yang gambar akan muncul di bagian atas ketika user melayang kursor mouse di atasnya. Jika Anda tidak ingin menambahkan deskripsi apapun maka cukup menghapus IMAGE DESCRIPTION HERE.</li>
<li>Jika Anda ingin mengubah dari auto play gambar maka cukup mengubah true menjadi false.</li>
<li>Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya silahkan edit  2500.</li>
<li>Untuk mengubah font dari deskripsi silahkan rubah calibri dengan nama font sendiri, untuk melihat macam-macam font huruf silahkan klick <a href="http://www.otowebsite.blogspot.com/2012/04/macam-macam-jenis-font-huruf.html" target="_blank">DISINI</a>.</li>
</ul> 
<hr color="#0000ff" />Apa Selanjutnya ??? 
<hr color="#0000ff" /> 
Dari kode di atas masih ada kode yang bisa Anda rubah sesuai dengan selera Anda, tapi saya tidak bisa mempostingkan semuanya, Jika Anda mengetahui Java Script pasti Anda tidak akan kesulitan, tapi bagi Anda yang kesulitan silahkan tinggalkan pertanyaan Anda, saya akan secepat mungkin membalasnya. 
 
<hr color="#0000ff" />Finish !!! 
<hr color="#0000ff" /> 
Bagaimana apakah Anda berhasil menerapkannya pada blog Anda? silahkan tinggalkan tanggpan atau komentar Anda tentang postingan atau article di atas!

Simple Image Gallery Untuk Blogger Dengan Control Options

S aya tidak pernah berpikir saya bisa memiliki Slide dengan loading, cahaya cepat, lucu dan Image Gallery sangat terkendali atau slideshow d...

Baca selengkapnya »

Nivo Silder for Bloggers

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/" target="_blank"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLs_mAJx8zctAel0VWiyxzMauQAkP0ozoGzR4ktLg3pkM7__m35Wr2_RQLZMCULx529ulETt9UvMXcnaWoUeeDAUXjn1oesrX-qB1rUqckDWKQR_nf0MkZ4tWrb_oRYQ2OUcEnDIw_IjA/s640/add-nivo-slider-to-blogger.png" width="640" /></a></div>Nivo slider adalah salah satu konten terbaik slider jquery datang dengan Default 3 tema, Orman dan Pascal dan hari ini saya akan memberikan tutorial tentang <a href="http://otowebsite.blogspot.com/2012/07/nivo-silder.html">Nivo Silder for Bloggers</a>.The Pascal belakang chossing slider Nivo atas lain yang telah 16 efek transisi yang unik yang membuat dunia yang paling indah slide gambar slider.<a href="http://otowebsite.blogspot.com/2012/07/nivo-silder.html">Nivo Silder for Bloggers</a> muncul pada latar belakang bergaya dengan 'Pita Feature' di sudut kiri atas, Anda dapat secara manual menambahkan gambar sendiri dengan mengganti URL gambar Ribbon dengan URL Gambar Anda.Anda juga dapat menambahkan keterangan dan link ke pengaturan slides.Cara Meamasang Nivo Silder di blogger sangat mudah Anda hanya perlu menaruh beberapa kode pada templates.Untuk lebih jelasnya silahkan Anda lihat demonya. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/Nivo%20Slidebar%20demo.html">Lihat Demo</a></div><div style="text-align: center;"> 
</div><hr color="#FF00FF" /> 
<div style="text-align: center;">Cara Memasang Nivo Silder di Blogger</div> 
<hr color="#FF00FF" />1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Rancangan.➨ Edit HTML. 
 
3. Centang <input checked="" id="expandWidgets" style="font-size: small;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
 
4. Lalu dalam Edit Template Anda cari kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba lihat Cara <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">Cepat Mencari Kode HTML</a>. 
 
5. Bila sudah ketemu sekarang Anda letakkan kode CSS berikut ini tepat di atasnya. 
 
<div class="md5">/*Start Nivo Slider Css otowebsite.blogspot.com*/ 
/* 
* Copyright 2011, Gilbert Pellegrom 
* Free to use and abuse under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
* For blogger by - dek_rif @ otowebsite.blogspot.com 
* 
* March 2010 
*/ 
 
 
/* The Nivo Slider styles */ 
#slider { 
width: 618px; 
height: 246px; 
} 
 
.nivoSlider { 
position: relative; 
} 
 
.nivoSlider img { 
position: absolute; 
top: 0px; 
left: 0px; 
} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
border: 0; 
padding: 0; 
margin: 0; 
z-index: 6; 
display: none; 
} 
/* The slices and boxes in the Slider */ 
.nivo-slice { 
display: block; 
position: absolute; 
z-index: 5; 
height: 100%; 
} 
 
.nivo-box { 
display: block; 
position: absolute; 
z-index: 5; 
} 
/* Caption styles */ 
.nivo-caption { 
position: absolute; 
left: 0px; 
bottom: 0px; 
background: #000; 
color: #fff; 
opacity: 0.8; 
/* Overridden by captionOpacity setting */ 
width: 100%; 
z-index: 8; 
} 
 
.nivo-caption p { 
padding: 5px; 
margin: 0; 
} 
 
.nivo-caption a { 
display: inline !important; 
} 
 
.nivo-html-caption { 
display: none; 
} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
position: absolute; 
top: 45%; 
z-index: 9; 
cursor: pointer; 
} 
 
.nivo-prevNav { 
left: 0px; 
} 
 
.nivo-nextNav { 
right: 0px; 
} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav a { 
position: relative; 
z-index: 9; 
cursor: pointer; 
} 
 
.nivo-controlNav a.active { 
font-weight: bold; 
} 
/* 
Skin Name: Pascal Theme 
Skin URI: http://nivo.dev7studios.com 
Skin Type: fixed 
Description: A nice, light skin for the Nivo Slider. 
Version: 1.0 
Author: Gilbert Pellegrom & Pascal Gartner 
Author URI: http://dev7studios.com 
*/ 
 
.theme-pascal.slider-wrapper { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrMjtQWgoA0Atm8BLzBziwpFSziSTKncisDkcFlvuSmO1i3Z4xr97OyVJL7ZSoj2MLPRcECV2EV5gXYQ-XwcutkqrISb9TaECDKlf2cFUOdgY35wR-2N6mgThOH3dXvNkFCE-tzYBO3g/s1600/otowebsite-slider-bg.png) no-repeat; 
width: 668px; 
height: 299px; 
margin: 0 auto; 
padding-top: 17px; 
position: relative; 
} 
 
.theme-pascal .nivoSlider { 
position: relative; 
width: 630px; 
height: 235px; 
margin-left: 19px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf3cLSilbesm50e6v9Z6fvKnY4UgPCjBOidsVLx5fsdM0k6557hIFwI-2_qjzT3CyS_ZsZhKxHbVW31LvDsNVy8w15O_bnZdF65OyZURcPaILlOA2b0tKYV0q2lK-E4HWsOvg-OsABN98/s1600/otowebsite-loading.gif) no-repeat 50% 50%; 
} 
 
.theme-pascal .nivoSlider img { 
position: absolute; 
top: 0px; 
left: 0px; 
display: none; 
width: 630px; 
/* Make sure your images are the same size */ 
height: 235px; 
/* Make sure your images are the same size */ 
} 
 
.theme-pascal .nivoSlider a { 
border: 0; 
display: block; 
} 
 
.theme-pascal .nivo-controlNav { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o4a9Xq5x7Zi365PBbmPEryKwRC2iJSjKh6dLiN-gGsMU_JPSeuywCQJU3QvsCCEYcZmtxs_j5fAwg1eEFaMikV4PHSiCaAAoK00IlKmgNqO81vlz5U3AB5Qy_XHHK-1YEKyBJl-y6Pc/s1600/otowebsite-controlnav.png) no-repeat; 
width: 251px; 
height: 40px; 
position: absolute; 
left: 200px; 
/* Tweak this to center bullets */ 
bottom: -42px; 
padding: 8px 0 0 82px; 
z-index: 20; 
} 
 
.theme-pascal .nivo-controlNav a { 
display: block; 
width: 22px; 
height: 22px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgedjClNLcE08CIihMXD3WCifjJt3v5kSKX2AxbuX9Ct2TdhX0-MjuhQIJ_pQzeIqfoUxwXlWJiUaZYCWYOgHV-G0-2EGriw-e2py1peVBx758KF_xMJxXLhGrGr0h9sO8GvWwDD21a7AA/s1600/otowebsite-bullets.png) no-repeat; 
text-indent: -9999px; 
border: 0; 
margin-right: 3px; 
float: left; 
} 
 
.theme-pascal .nivo-controlNav a.active { 
background-position: 0 -22px; 
} 
 
.theme-pascal .nivo-directionNav a { 
display: none; 
} 
 
.theme-pascal .nivo-caption { 
bottom: 40%; 
left: auto; 
right: 0px; 
width: auto; 
max-width: 630px; 
overflow: hidden; 
background: #fff; 
text-shadow: none; 
font-family: arial, serif; 
color: #4c4b4b; 
} 
 
.theme-pascal .nivo-caption p { 
padding: 5px 15px; 
color: #333; 
font-weight: bold; 
font-size: 27px; 
text-transform: uppercase; 
} 
 
.theme-pascal .nivo-caption a { 
color: #333; 
font-weight: bold; 
font-size: 27px; 
text-transform: uppercase; 
} 
 
.theme-pascal .ribbon { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWL5dqiI1rT5GNP1B5CXJGeJsIBVMHzY23iY3gmj_ORe00dspNoVzbMGBOrLObfyGk-2yCfyaqbyNQimCupW3Ae9MIzHvgU4kK0YmGk3jVHk3bDucpEmHP5xrhjggeVQZhfWgWU7zRTQ/s1600/otowebsite-ribbon.png) no-repeat; 
width: 111px; 
height: 111px; 
position: absolute; 
top: -8px; 
left: -8px; 
z-index: 300; 
} 
/*End Nivo Slider Css otowebsite.blogspot.com*/</div> 
6. Masih dalam Edit HTML sekarang anda cari kode </head> dan letakkan kode berikut di atasnya. 
 
<div class="md1"> 
 
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script> 
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js' type='text/javascript'></script> 
<script type='text/javascript'> 
$(window).load(function() { 
$('#slider').nivoSlider(); 
}); 
</script> 
</div> 
7. Simpan template. 
 
8. Langkah selanjutya silahkan Anda pergi ke Dasbor lalu klick Rancangan ➨ Tambah Gadget. 
 
9. Pilih elemen HTML/Java Script ➨ Lalu letakkan kode script berikut di dalamnya. 
 
<div class="md8"><div class="slider-wrapper theme-pascal"> 
<div class="ribbon"> 
</div> 
<div id="slider" class="nivoSlider"> 
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a> 
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a> 
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a> 
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a> 
</div> 
<div id="htmlcaption" class="nivo-html-caption"> 
</div> 
</div></div> 
10. Simpan. 
 
Keterangan: 
Ganti YOUR LINK HERE dengan Url tujuan. 
Ganti IMAGE URL HERE dengan Url gambar Anda. 
Ganti ADD CAPTION HERE dengan Keterangan Anda. 
 
Sekian! 
 
Saya rasa cukup untuk kali ini silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article di atas!

Nivo Silder for Bloggers

N ivo slider adalah salah satu konten terbaik slider jquery datang dengan Default 3 tema, Orman dan Pascal dan hari ini saya akan memberikan...

Baca selengkapnya »

Image With Sliding Description Panel Menggunakan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="http://www.otowebsite.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM06kAIcduT8XxuG6cqCiH1KgFDLIKyj0fecrWYYDlCkNykBcUg2StCZ8-hstbfPWJbmruvzGeeqfAPuq3eC53INCm5rVf8OHoJCJdflYR0qtd4Wz23qCtfHw4WbuAcpcteC9ciABfzRk/s1600/Image-with+-sliding-description-panel-css3.png" /></a></div>Ini adalah yang terbaik dari CSS3 untuk membuat panel deskripsi animasi gambar slide panel terbuka ketika mouse berguling ke gambar yang menggunakan CSS3 transitions. 
Anda ingin menambahkan beberapa deskripsi untuk gambar apapun maka trik ini pasti akan sangat membantu Anda. 
 
Trik ini adalah bekerja dengan CSS3 yaitu murni tidak ada JavaScript yang berat atau jQuery yang dapat mempengaruhi kecepatan loading dari blog/situs Anda. 
 
beberapa fitur terbaik trik  ini: 
 
<ol><li>Bekerja pada CSS3 murni yaitu tidak ada script yang berat diperlukan</li>
<li>Dapat digunakan dalam 4 cara (Atas, Bawah, Kiri, Bawah)</li>
<li>Menghaluskan efek hover.</li>
<li>Mudah digunakan dan beberapa fitur lainnya.</li>
</ol> 
Di atas adalah beberapa fitur dari trik ini, sekarang mari kita lihat bagaimana menambahkan dan menggunakannya, pertama-tamasilahkan melihat demo dari panel bawah! 
 
<div style="text-align: center;">Live Demo ▼</div><div style="text-align: center;"> 
</div><div style="background-color: white; border: 2px #00ff11 dashed; padding: 10px; text-align: left;"><iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/Sliding%20Description%20Panel%20dengan%20CSS3.html" style="height: 325px; width: 100%;"></iframe></div> 
<hr color="#009999" /> 
<div style="text-align: center;">Cara Menambah <a href="http://otowebsite.blogspot.com/2012/07/image-with-sliding-description-panel.html">Image With Sliding Description Panel Menggunakan CSS3</a></div> 
<hr color="#009999" /> 
Pertama-tama Anda harus menginstal kode <a href="http://otowebsite.blogspot.com/2012/07/image-with-sliding-description-panel.html">Image With Sliding Description Panel Menggunakan CSS3</a> ini ke template blog/situs Anda. Caranya: 
 
 
1. Login ke akun blogger. 
 
2. Pada Dasbor klick Rancangan ➨ Edit HTML. 
 
3. Centang <input checked="checked" id="expandWidgets" style="font-size: small;" type="checkbox" />Expand Template Widget ➨ Backup Template Anda. 
 
4. Selanjutnya dalam Edit Template Anda cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya coba baca <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">Cara Cepat Mencari Kode HTML</a>. 
 
5. Bila sudah ketemu sekarang letakkan CSS3 berikut tepat di atasnya. 
 
<div class="md2">/*================ Sliding Description Panel For Images By Oto Website ================*/ .imagepluscontainer { /* main image container */ position: relative; z-index: 1; font-family: verdana; font-size: 13px; } .imagepluscontainer img { /* CSS for image within container */ position: relative; z-index: 2; -moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */ -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imagepluscontainer:hover img { /* CSS for image when mouse hovers over main container */ -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .imagepluscontainer div.desc { /* CSS for desc div of each image. */ position: absolute; width: 90%; z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */ bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */ left: 5px; padding: 8px; background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */ color: white; -moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */ -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; opacity: 0; /* Set initial opacity to 0 */ -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */ -webkit-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; } .imagepluscontainer div.desc a { color: white; } .imagepluscontainer:hover div.desc { /* CSS for desc div when mouse hovers over main container */ -moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); opacity: 1; /* Reveal desc DIV fully */ } /*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/ .imagepluscontainer div.rightslide { width: 150px; /* reset from default */ top: 15px; right: 0; left: auto; /* reset from default */ bottom: auto; /* reset from default */ padding-left: 15px; -moz-border-radius: 0 8px 8px 0; -webkit-border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0; } .imagepluscontainer:hover div.rightslide { -moz-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } /*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/ .imagepluscontainer div.leftslide { width: 150px; /* reset from default */ top: 15px; left: 0; bottom: auto; /* reset from default */ padding-left: 15px; -moz-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; } .imagepluscontainer:hover div.leftslide { -moz-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } /*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/ .imagepluscontainer div.upslide { top: 0; bottom: auto; /* reset from default */ padding-bottom: 10px; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .imagepluscontainer:hover div.upslide { -moz-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } /*================ Sliding Description Panel For Images By Oto Website ================*/</div> 
6. Simpan Template. 
 
<hr color="#009999" /> 
<div style="text-align: center;">Cara Menggunakannya ?!?</div> 
<hr color="#009999" /> 
Saat mengedit postingan. 
 
Pergi ke Edit Postingan. 
Tambahkan kode di bawah ini ke image/gambar Anda. 
 
<div class="md4"> 
 
<center><div class="imagepluscontainer" style="width:263px;"> <img src="IMAGE URL DISINI"> <div class="desc downslide"> DESCRIPTION ANDA DISINI</div> </div></center></div> 
Keterangan: 
<ul><li>Sekarang ganti DESCRIPTION ANDA DISINI dengan Descripttion atau kata-kata Anda.</li>
<li>Anda juga dapat menambahkan link dalam deskripsi Anda dengan menggunakan kode ini  <a herf="LINK HERE">TEXT HERE</a></li>
<li>Ganti URL IMAGE DISINI dengan URL gambar Anda</li>
<li>Jika Anda ingin mengubah posisi sliding panel kemudian hanya mengganti disorot ke bawah dengan atas, kanan atau kiri</li>
<li>tinggal mengganti teks down dengan up,right atau left.</li>
<li>Menyesuaikan lebar panel sesuai dengan lebar gambar untuk menyesuaikan lebar panel cukup mengedit width:263px.</li>
</ul>Sekian! 
 
Saya harap Anda menyukai trick yang saya bahas kali ini, dan jangan lupa untuk komentar dan tanggapan anda!

Image With Sliding Description Panel Menggunakan CSS3

I ni adalah yang terbaik dari CSS3 untuk membuat panel deskripsi animasi gambar slide panel terbuka ketika mouse berguling ke gambar yang me...

Baca selengkapnya »

Cara Membuat Tooltip Preview Image Dengan jQuery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHt-_C8qwzISycJ2hEVLx1eJFyI5Mprk8Sa8KFMF20CELi-Yj7dOQtE1G6lg_RTKZQ8uCK3HRLmPsMbqXN_nyRfQeun4q8TJgm2BuRiwx0nfUWv-oMSd9m7PaLahioVPRwuNV7KpHAY8/s1600/tooltip.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHt-_C8qwzISycJ2hEVLx1eJFyI5Mprk8Sa8KFMF20CELi-Yj7dOQtE1G6lg_RTKZQ8uCK3HRLmPsMbqXN_nyRfQeun4q8TJgm2BuRiwx0nfUWv-oMSd9m7PaLahioVPRwuNV7KpHAY8/s1600/tooltip.jpg" /></a></div>Walaupun dah ketinggalan jauh ama teman-teman blog lainnya tapi gak masalah! 
Sekarang Blog Oto Website akan membahas tentang <a href="http://otowebsite.blogspot.com/2012/06/cara-membuat-tooltip-preview-image.html" target="">Cara membuat tooltip Preview Image Dengan jQuery</a>. 
Sebelumnya sobat udah pada tau kan apa itu Tooltip? oke kalo belum tau saya akan beri sedikit penjelasannya agar sobat tau dan bisa mengerti apa maksud Tooltip. 
 
"Tooltip adalah sebuah pesan kotak atau box kecil yang tampil ketika cursor/penunjuk mouse diarahkan ke suatu elemen pada halaman website. 
Tooltip berguna untuk memberikan penjelasan atau deskripsi pada sebuah link, gambar atau bagian-bagian tertentu website lainnya." 
itulah sedikit penjelasan tentang Tooltip. 
 
Banyak blog lain bilang bahwa Tooltip adalah balon kata kalo menurut saya pribadi Tooltip bukanlah balon kata karna Tooltip dan balon kata berbeda. 
Mungkin suatu saat nanti saya akan menjelaskan dan share tentang balon kata kepada teman-teman tapi karna ilmu saya yang belum sampai situ maka saya tidak berani menjelaskannya sekarang, bisa-bisa saya salah menjelaskan atau bahasa kerennya sok tau. 
Tooltip sendiri ada beberapa versi di antaranya Tooltip image, dan Tooltip semua link dan image. 
Dan kali ini saya akan membahas tentang Tooltip image di blog ini yang saya berjudul <a href="http://otowebsite.blogspot.com/2012/06/cara-membuat-tooltip-preview-image.html">Cara membuat tooltip Preview Image Dengan jQuery</a>. 
 
Sekedar info kemarin blog ini pernah membahas tetang <a href="http://www.otowebsite.blogspot.com/2012/06/efek-memutar-dan-membesar-pada-gambar.html" target="_blank">Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse</a>. 
 
Untuk lebih jelasnya tentang Tooltip Preview Image Dengan jQuery sobat bisa lihat atau arahkan cursor sobat ke gambar berikut. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0ff2zZ-Y52wQm4HiU8hr_pNk_YrHpMHxZAUNLNwN6fPAvti0swzERnF6z5k72STQDLSSVCo0GFHxM4gwmGeV9P4Y5Th7ZXsTcn7xHLnyKivCJ3MdxGw4mrlz4PHIY0vCliegAdsATl4/s1600/tooltil+depan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0ff2zZ-Y52wQm4HiU8hr_pNk_YrHpMHxZAUNLNwN6fPAvti0swzERnF6z5k72STQDLSSVCo0GFHxM4gwmGeV9P4Y5Th7ZXsTcn7xHLnyKivCJ3MdxGw4mrlz4PHIY0vCliegAdsATl4/s400/tooltil+depan.png" /></a></div> 
Hehehe . . . sori sob, kalo gak bisa karna saya tidak memasang Tooltip Preview Image di blog O.W, mendingan sobat lansung aja ihat demonya sendiri dan arahkan cursor pada gambar seperti di atas! 
 
<div style="text-align: center;"><a class="button" href="http://www.otowebsite.co.cc/2012/06/demo-tooltip-preview-image-dengan.html" target="_blank">Demo</a></div> 
Udah pahamkan maksudnya, sekarang mari kita bahas cara memasang dan menerapkannya di blogger sobat. 
 
1. Masuk ke akun blogger sobat. 
 
2. Pada Dasbor klick Rancangan ➨ Edit HTML. 
 
3. Jangan lupa Centang <input checked="" id="expandWidgets" style="font-size: small;" type="checkbox" />Expand Template Widget ➨ Bckup dulu templatenya untuk berjaga-jaga bila terjadi kesalahan. 
 
4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">Cara Cepat Mencari Kode HTML</a>. 
 
5. Jika sudah ketemu sekarang sobat copy kode berikut dan paste atau letakkan di atas kode tadi. 
 
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Bjnqg_9E4ce53owysDWOViUN3YVtGGbuNKaCtK7jfZVgmq5KDUxtn1A1Sx0b4_51-LGCL4gGs9WiPNWzSpRZVGb-T2ylZUCgeXqbap7_OBkl2FrUfSNbMsqkGzfIOK5nz2BDSLqG08w/s1600/0_1_1.gif); border: 4px #ff5500 dashed; padding: 10px; text-align: left;">#preview{ position:absolute; border:5px solid #A9A9A9;-webkit-box-shadow: 2px 2px 10px 8px ; box-shadow: 2px 2px 10px 8px ; border-radius:10px; background:#64950;border-radius:10px; padding :15px; display:none; color:#fff;}</div> 
6. Selanjutnya sobat cari kode </head> lalu letakkan kode berikut di atasnya. 
 
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Bjnqg_9E4ce53owysDWOViUN3YVtGGbuNKaCtK7jfZVgmq5KDUxtn1A1Sx0b4_51-LGCL4gGs9WiPNWzSpRZVGb-T2ylZUCgeXqbap7_OBkl2FrUfSNbMsqkGzfIOK5nz2BDSLqG08w/s1600/0_1_1.gif); border: 4px #ff5500 dashed; padding: 10px; text-align: left;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'/> <script src='http://otowebsite.googlecode.com/files/image_priview.js' type='text/javascript'/></div> 
NB : Hapus kode warna hijau jquery 1.2.3 jika di template sobat sudah terinstal atau sudah ada kode tersebut. 
 
7. Simpan Template. 
 
Untuk menerapkan Tooltip Preview Image, sobat harus memakai kode pemanggil, kode pemanggilanya adalah : 
 
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Bjnqg_9E4ce53owysDWOViUN3YVtGGbuNKaCtK7jfZVgmq5KDUxtn1A1Sx0b4_51-LGCL4gGs9WiPNWzSpRZVGb-T2ylZUCgeXqbap7_OBkl2FrUfSNbMsqkGzfIOK5nz2BDSLqG08w/s1600/0_1_1.gif); border: 4px #ff5500 dashed; padding: 10px; text-align: left;"><a href="Url gambar yang akan menjadi priview" class="preview"><img src="Url gambar yang ada di postingan"></a></div> 
Keterangan : Ganti teks warna merah dengan Url gambar sobat sendiri. 
 
Nah selesai dah ! 
 
Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? Silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Cara Membuat Tooltip Preview Image Dengan jQuery

W alaupun dah ketinggalan jauh ama teman-teman blog lainnya tapi gak masalah! Sekarang Blog Oto Website akan membahas tentang Cara membuat...

Baca selengkapnya »

Oto Website

Attractive Css3 Cycling Slideshow Untuk Blogger

Attractive Css Image Hover Effect Untuk Blogger

Blogger Image Protection - Part 1

Membuat Gambar Bergetar Menggunakan jQuery

CSS3 Image Gallery Blogspot

Java Script Image Slider

Simple Image Gallery Untuk Blogger Dengan Control Options

Nivo Silder for Bloggers

Image With Sliding Description Panel Menggunakan CSS3

Cara Membuat Tooltip Preview Image Dengan jQuery

Entri Populer

Arsip Blog