tag:blogger.com,1999:blog-51748125920406572592024-03-13T19:15:02.878-07:00tips dan trickYuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.comBlogger106125tag:blogger.com,1999:blog-5174812592040657259.post-27386832386784190982014-01-14T04:18:00.003-08:002014-01-14T04:18:46.216-08:00 Membuat Popular Post Hanya Tumbnail<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title">
</h1>
<div class="post-body entry-content" id="post-body-3680718099232728228">
<div style="text-align: justify;">
<a href="http://3.bp.blogspot.com/-eE6LNK6P474/TYErnsVMSvI/AAAAAAAAAw0/TVl-DPomt-M/s1600/logo-blogger.png" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" src="http://3.bp.blogspot.com/-eE6LNK6P474/TYErnsVMSvI/AAAAAAAAAw0/TVl-DPomt-M/s1600/logo-blogger.png" /></a>
Posting Tentang dunia perbloggeran lagi, kali ini tentang cara <b>Membuat Popular Post Hanya Tumbnail</b>,
secara default blogger menampilkan judul saja, gambar dan judul, gambar
judul dan sebagian paragraf pertama, sedangkan untuk menampilkan
gambarnya saja kita harus mengakal sendiri, karena blogger tidak
menyediakan untuk menampilkan hanya gambarnya saja;</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Sekrinsyutnya seperti dibawah ini;</div>
<div style="text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://2.bp.blogspot.com/-S2DiXeMyreQ/UOfQXUpDoaI/AAAAAAAAIXg/v1sLSCrYS18/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-S2DiXeMyreQ/UOfQXUpDoaI/AAAAAAAAIXg/v1sLSCrYS18/s1600/1.png" /></a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Kalau disorot mouse pada link gambar akan berputar sehingga tampilan
gambarnya menjadi besar dan muncul tulisan judul postingan, seperti
gambar dibawah ini;</div>
<div style="text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://1.bp.blogspot.com/-quePzGxgq-U/UOfQWpO-3pI/AAAAAAAAIXc/9cCvnoN57FE/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-quePzGxgq-U/UOfQWpO-3pI/AAAAAAAAIXc/9cCvnoN57FE/s1600/2.png" /></a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Caranya cukup sederhana, masbro tertarik!!.. ikuti langkah dibawah ini;<br />
<br />
<b>Langkah pertama;</b><br />
Login ke dasbor blogger dengan id masbro sendiri, tambahkan widget
Popular Post dengan klik "Tambah gadget" setelah tampil pop up pilih
"Entri Populer" dengan tekan tekan tombol <b>+</b><br />
<br />
<div class="separator" style="clear: both;">
<a href="http://2.bp.blogspot.com/-b43s1uMQGyI/UOfZK8izM0I/AAAAAAAAIYs/J87P9Vok5tk/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-b43s1uMQGyI/UOfZK8izM0I/AAAAAAAAIYs/J87P9Vok5tk/s1600/2.png" /></a></div>
<br />
kemudian pilih dan atur <b>Konfigurasi Entri Populer</b> seperti gambar dibawah ini, setelah selesai tekan tombol <b>Simpan;</b><br />
<br />
<br />
<div class="separator" style="clear: both;">
<a href="http://4.bp.blogspot.com/-t31KAydb8sk/UOfZKX1oMxI/AAAAAAAAIYo/UgcUhgQ9zyA/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-t31KAydb8sk/UOfZKX1oMxI/AAAAAAAAIYo/UgcUhgQ9zyA/s1600/1.png" /></a></div>
<br />
<b>Langkah kedua;</b><br />
Masuk ke edit html,<span style="color: #cc0000;"> ingat!</span> jangan centang expand widget biarkan saja, masukkan kode dibawah ini diatas kode <b>]]></b:skin></b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
.popular-posts .item-thumbnail{float:left;}<br /> .popular-posts ul{padding-left:30px;}<br /> .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}<br /> .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;}<br /> .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} </blockquote>
</div>
<div style="text-align: justify;">
</div>
Selanjutnya cari kode seperti ini;<br />
<br />
<blockquote class="tr_bq">
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/></blockquote>
<br />
Kalau sudah ketemu hapus dan ganti dengan kode dibawah ini<br />
<br />
<div style="text-align: justify;">
<blockquote>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><br /><b:includable id='main'><br /> <b:if cond='data:title'><h2><data:title/></h2></b:if><br /> <div class='widget-content popular-posts'><br /> <ul><br /> <b:loop values='data:posts' var='post'><br /> <li><br /> <b:if cond='data:showThumbnails == "false"'><br /> <b:if cond='data:showSnippets == "false"'><br /> <!-- (1) No snippet/thumbnail --><br /> <a expr:href='data:post.href'><data:post.title/></a><br /> <b:else/><br /> <!-- (2) Show only snippets --><br /> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br /> <div class='item-snippet'><data:post.snippet/></div><br /> </b:if><br /> <b:else/><br /> <b:if cond='data:showSnippets == "false"'><br /> <!-- (3) Show only thumbnails --><br /> <div class='item-thumbnail-only'><br /> <div class='item-thumbnail'><br /> <a expr:href='data:post.href' expr:title='data:post.title'><br /> <b:if cond='data:post.thumbnail'><br /> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><br /> <b:else/><br /> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' expr:width='data:thumbnailSize'/><br /> </b:if><br /> </a><br /> </div><br /> </div><br /> <b:else/><br /> <!-- (4) Show snippets and thumbnails --><br /> <div class='item-content'><br /> <b:if cond='data:post.thumbnail'><br /> <div class='item-thumbnail'><br /> <a expr:href='data:post.href' target='_blank'><br /> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><br /> </a><br /> </div><br /> </b:if><br /> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br /> <div class='item-snippet'><data:post.snippet/></div><br /> </div><br /> <div style='clear: both;'/><br /> </b:if><br /> </b:if><br /> </li><br /> </b:loop><br /> </ul><br /> <b:include name='quickedit'/><br /> </div><br /></b:includable><br /></b:widget> </blockquote>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Dan lihat hasilnya, maka akan seperti sekrinsyut diatas, monggo dicoba.</div>
</div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-62844967232991137932014-01-14T03:55:00.000-08:002014-01-14T04:26:53.772-08:00Membuat Sidebar Accordion dengan jQuery<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white;"><b style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">Membuat Sidebar Accordion dengan jQuery, </b><span style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian akan dibahas pada post ini. Apa itu </span><i style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">Sidebar Accordion </i><span style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">mungkin teman teman akan lebih jelas pembahasannya bila searching di google, tapi untuk contohnya, sobat blogger bisa lihat di sidebar Blog ini.</span></span><br />
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px; text-align: center;">
<span style="color: #01b8c0;"><span style="background-color: white; height: auto; margin-left: 1em; margin-right: 1em;"><img alt="Membuat Sidebar Accordion dengan jQuery" border="0" src="http://3.bp.blogspot.com/-852DToLLMx4/UVLKPgA2LqI/AAAAAAAAAL0/3lTagsuRsAs/s1600/Membuat+Sidebar+Accordion+dengan+jQuery.jpg" style="-webkit-transition: opacity 0.2s ease-out; border: 1px solid rgb(218, 216, 216); height: auto; max-width: 100%; padding: 4px; transition: opacity 0.2s ease-out;" title="Membuat Sidebar Accordion dengan jQuery" /></span></span></div>
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<div style="text-align: center;">
<i style="background-color: white;">Sidebar Accordion dengan jQuery</i></div>
<div>
<span style="background-color: white;"><br /></span></div>
<div>
<span style="background-color: white;">Kriteria Post Hari Ini :</span></div>
<div>
<ul>
<li><span style="background-color: white;">Goal : Sidebar kuno kita akan berubah tampilan menjadi lebih elegant</span></li>
<li><span style="background-color: white;">Tujuan : Memperindah Blog kita sehingga visitor akan betah</span></li>
<li><span style="background-color: white;">Harapan : Theme Blog kita lebih user friendly</span></li>
</ul>
</div>
<div>
<span style="background-color: white;">How To Make Sidebar Accordion With JQuery :</span></div>
</div>
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<span style="background-color: white;"><br /></span></div>
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<span style="background-color: white;">Berikut lengkap Membuat Sidebar Accordion dengan jQuery : </span><br />
<ul>
<li><span style="background-color: white;">Masuk pada bagian Template » Edit HTML </span></li>
</ul>
<span style="background-color: white;">Kemudian Letakkan kode berikut ini atas kode ]]></b:skin> </span></div>
<div>
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<span style="background-color: white;"><br style="box-sizing: border-box;" /></span></div>
<blockquote class="tr_bq" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; line-height: 1.6em; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">
<span style="background-color: white; color: blue;"><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b> h2 {<br style="box-sizing: border-box;" />margin: 0 2px;<br style="box-sizing: border-box;" />padding:3px 7px 3px 13px;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text-shadow:0 1px 0 black;</span><span style="font-style: inherit;"><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-color:#<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">AD3000</span>;</b></span></span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border:1px solid #ccc;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color:#fff;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text-transform:uppercase;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span></b></span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b> h2:hover {</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin: 0 2px;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">padding:3px 7px 3px 13px;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background:#<b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">860000</span></b>;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color:#fff;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text-transform:uppercase;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-bottom:1px solid #404040;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span></b></span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b> h2.active {</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-color:#<b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">B60000</span></b>;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color:#FFF;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span></b></span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b> .widget {</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin:0 0;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">padding:0 0;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span></b></span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b> .widget-content {</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">padding:5px 5px 5px 13px;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">max-height:auto;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">overflow:auto;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper1 .widget-content ul li {</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-top:1px solid #444;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-bottom:1px solid #222;</span><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><br style="box-sizing: border-box;" /><span id="gwt-uid-233" style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span></span></blockquote>
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<span style="background-color: white;"><span style="font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;">- </span>Selanjutnya Letakkan kode berikut ini diatas kode<span style="font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;"> </span><span style="border: 0px; box-sizing: border-box; color: blue; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"></head></b></span></span></div>
<blockquote class="tr_bq" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; line-height: 1.6em; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">
<span style="background-color: white; color: blue;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></b></span><br style="box-sizing: border-box;" /><script type='text/javascript'><br style="box-sizing: border-box;" />//<![CDATA[<br style="box-sizing: border-box;" />$(function() {<br style="box-sizing: border-box;" /> $('<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;">#sidebar-wrapper</b></span> .widget-content').hide();<br style="box-sizing: border-box;" /> $('<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;">#sidebar-wrapper</b></span> h2:first').addClass('active').next().slideDown('slow');<br style="box-sizing: border-box;" /> $('<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;">#sidebar-wrapper</b></span> h2').css('cursor', 'pointer').click(function() {<br style="box-sizing: border-box;" /> if($(this).next().is(':hidden')) {<br style="box-sizing: border-box;" /> $('<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b></span> h2').removeClass('active').next().slideUp('slow');<br style="box-sizing: border-box;" /> $(this).toggleClass('active').next().slideDown('slow');<br style="box-sizing: border-box;" /> }<br style="box-sizing: border-box;" /> });<br style="box-sizing: border-box;" />});<br style="box-sizing: border-box;" />//]]><br style="box-sizing: border-box;" /></script> </span></blockquote>
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<span style="background-color: white;"><span style="font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;"> </span><b style="box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;">- </b><span style="font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;">Simpan Template</span><br style="box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;" /><br /><i style="box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px;">Keterangan:</i></span></div>
<div style="border: 0px; box-sizing: border-box; color: #333333; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<span style="background-color: white;">Kode <b style="box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; line-height: 19.1875px; text-align: left;"><span style="border: 0px; box-sizing: border-box; color: #cc0000; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">B60000</span></b> merupakan background pada judul widget. </span></div>
<div style="border: 0px; box-sizing: border-box; color: #333333; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<span style="background-color: white;">Kode <span style="border: 0px; box-sizing: border-box; color: red; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; font-style: inherit; line-height: 19.1875px; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><b style="box-sizing: border-box;"><span style="border: 0px; box-sizing: border-box; color: #38761d; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#sidebar-wrapper</span></b></span><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; line-height: 19.1875px; text-align: left;"> </span> merupakan ID sidebar.</span></div>
<br />
Kode<br />
<br />
<br />
<blockquote class="tr_bq">
<span style="color: blue;"> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> </span></blockquote>
<br />
<br />
merupakan jQuery, jika template anda sudah terdapat kode ini, maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang lama dengan yang versi terbaru.</div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com2tag:blogger.com,1999:blog-5174812592040657259.post-30619647103852041932013-08-04T13:04:00.001-07:002013-08-04T13:04:19.489-07:00Widget Entri Populer dengan Gambar Berputar<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-UzcqUtO19uY/Uf6zjTtZlvI/AAAAAAAAAe0/3bCGFhYjIUU/s1600/Screenshot_83.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-UzcqUtO19uY/Uf6zjTtZlvI/AAAAAAAAAe0/3bCGFhYjIUU/s1600/Screenshot_83.png" /></a></div>
<br />
<br />
<br />
Langsung aja caranya, Berikut:<br />
1.Pertama login dulu ke akun Blogger<br />
2.Lalu klik Rancangan<br />
3.Edit Html, jangan lupa centang expand widget template <br />
4.Lalu cari kode <b><span style="color: red;">]]></b:skin>,</span></b><span style="color: red;"><span style="color: black;"> untuk mempermudah pencarian tekan Ctrl+F</span></span><span style="color: red;"><br />
</span><br />
5.Setelah dapat kode <b><span style="color: red;">]]></b:skin></span></b>, letakkan kode di bawah ini pada kode tadi<div style="background-color: white; color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br />
</div>
<div style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-color: rgb(230, 228, 227); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(230, 228, 227); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(230, 228, 227); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(230, 228, 227); border-top-style: solid; border-top-width: 1px; height: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; width: auto;">
<span style="background-color: white;"><style type='text/css'><br />
.PopularPosts .item-title{display:none}<br />
.PopularPosts ul li {background: none repeat scroll 0 0
transparent;float: left;list-style: none outside none;margin: 5px
!important;padding: 0 !important;}<br />
.PopularPosts ul li img {padding:0;-moz-border-radius:
5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition:
all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s
ease;border: 2px solid #CCC;height: <span style="color: red;">80</span>px;width: <span style="color: red;">80</span>px;}<br />
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform:
scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2)
rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg)
;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2)
rotate(-1090deg) ;}<br />
</style></span></div>
</div>
<div style="font-family: Arial,Helvetica,sans-serif;">
<br class="Apple-interchange-newline" /></div>
<div style="font-family: Arial,Helvetica,sans-serif;">
6.Lalu klik simpan</div>
<div style="font-family: Arial,Helvetica,sans-serif;">
7.Setelah itu klik tambah gadget pilih entri populer</div>
<div style="font-family: Arial,Helvetica,sans-serif;">
8.konfigurasi seperti gambar di bawah ini</div>
<div class="separator" style="clear: both; font-family: Arial,Helvetica,sans-serif; text-align: center;">
<a href="http://1.bp.blogspot.com/-SDcsqctMZNg/T5PC9KKhpcI/AAAAAAAAAcE/g0nLsTgQ9Eg/s1600/2012-04-22_153234.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="363" src="http://1.bp.blogspot.com/-SDcsqctMZNg/T5PC9KKhpcI/AAAAAAAAAcE/g0nLsTgQ9Eg/s400/2012-04-22_153234.png" width="400" /></a></div>
<div style="font-family: Arial,Helvetica,sans-serif;">
atur <b>tampilkan</b> centang <b>Thumbnail Gambar</b> lalu tampilan entri 9 </div>
<div style="font-family: Arial,Helvetica,sans-serif;">
Lalu klik<b style="color: red;"> simpan</b></div>
<br />Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com4tag:blogger.com,1999:blog-5174812592040657259.post-49272996963629028972013-07-31T10:46:00.005-07:002013-08-04T13:04:30.527-07:00Super Accordion Widged Memeperindah Tampilan Blog <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-NeM_nj_viZU/UdzfJfI9VuI/AAAAAAAABUQ/tSZMnKmONyc/s1600/tuxpi.com.1373429472.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-NeM_nj_viZU/UdzfJfI9VuI/AAAAAAAABUQ/tSZMnKmONyc/s1600/tuxpi.com.1373429472.jpg" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Pada postingan ini saya akan share mengenai cara membuat super accordion
widged untuk lebih memperindah tampilan blog sebenarnya accordion
widged ini adalah pengembangan dari accordion sebelumnya yang saya
bagikan tempo hari fungsinya tergolong sama namun ada sedikit perbedaan
pada tampilannya dan desainnya..<br />
<br />
<b>CSS</b><br />
<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token selector">#page-wrap </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 10px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a </span><span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">ul </span><span class="token punctuation">{</span>
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #a7a7a7<span class="token punctuation">;</span>
<span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0 0 15px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box ul li </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 11px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #666<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box ul li a </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 4px 4px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box ul li:last-child,
.box ul li:last-child a </span><span class="token punctuation">{</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box ul li a:hover </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #494949<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 5px 5px 5px 37px<span class="token punctuation">;</span>
<span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0 0 10px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li a </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
<span class="token property">text-indent</span><span class="token punctuation">:</span> -9999px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url(http://1.bp.blogspot.com/-69-QqA5WTog/UIgt60nz0TI/AAAAAAAAANI/FQL2BK6hA4Q/s1600/catSprite.png)</span><span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li a#list-one-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -50px -50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#page-wrap #catNav li.activeCatButton a#list-one-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -50px -100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li a#list-one-button:hover </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -50px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav a#list-two-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -100px -50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#page-wrap #catNav li.activeCatButton a#list-two-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -100px -100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li a#list-two-button:hover </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -100px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav a#list-three-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> 0 -50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#page-wrap #catNav li.activeCatButton a#list-three-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> 0 -100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li a#list-three-button:hover </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav a#list-four-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -150px -50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#page-wrap #catNav li.activeCatButton a#list-four-button </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -150px -100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#catNav li a#list-four-button:hover </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> -150px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</blockquote>
<br />
<b>Javascript </b><br />
<br />
<pre class=" language-javascript" data-codetype="JavaScript"><code class=" language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
<span class="token comment" spellcheck="true">//<![CDATA[
</span> $<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
$<span class="token punctuation">(</span><span class="token string">"#list-two"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>hide<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-three"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>hide<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-four"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>hide<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-one-button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
$<span class="token punctuation">(</span><span class="token string">".cat-list"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideUp<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-one"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideDown<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-two-button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
$<span class="token punctuation">(</span><span class="token string">".cat-list"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideUp<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-two"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideDown<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-three-button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
$<span class="token punctuation">(</span><span class="token string">".cat-list"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideUp<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-three"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideDown<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-four-button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
$<span class="token punctuation">(</span><span class="token string">".cat-list"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideUp<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#list-four"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideDown<span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">"#catNav li a"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
$<span class="token punctuation">(</span><span class="token string">"#catNav li"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>removeClass<span class="token punctuation">(</span><span class="token string">"activeCatButton"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span>this<span class="token punctuation">)</span><span class="token punctuation">.</span>parent<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>addClass<span class="token punctuation">(</span><span class="token string">"activeCatButton"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//]]>
</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
</blockquote>
<br />
<b>HTML </b><br />
<blockquote class="tr_bq">
<br />
<pre class=" language-markup" data-codetype="HTML"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"page-wrap"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"box"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"catNav"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"activeCatButton"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/null"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-one-button"</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span>"menu 1"</span><span class="token punctuation">></span></span>Menu 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/null"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-two-button"</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span>"menu2"</span><span class="token punctuation">></span></span>Menu 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/null"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-three-button"</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span>"menu 3"</span><span class="token punctuation">></span></span>Menu 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/null"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-four-button"</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span>"menu 4"</span><span class="token punctuation">></span></span>Menu 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"cat-list"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-one"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"http://imronfhatoni94.blogspot.com/"</span><span class="token punctuation">></span></span>EMP-BLOG<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 2 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 3 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 4 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 5 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 6 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 7 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 8 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 9 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 10 .........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"cat-list"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-two"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 1 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 2 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 3 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 4 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 5 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 6 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 7 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 8 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 9 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 10 .........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"cat-list"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-three"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 1 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 2 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 3 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 4 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 5 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 6 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 7 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 8 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 9 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 10 .........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"cat-list"</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"list-four"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 1 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 2 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 3 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 4 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 5 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 6 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 7 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 8 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 9 ..........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"https://www.blogger.com/blogger.g?blogID<span class="token punctuation">=</span>2960446593561217907#"</span><span class="token punctuation">></span></span>Link 10 .........<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
</blockquote>
<br />
<br />
<div class="catatan">
<b>Sedikit penjelasan :</b><br />
<br />
Letakan CSS nya diatas kode <span style="color: orange;">]]></b:skin></span><br />
Letakan Javascript nya diatas kode <span style="color: orange;"></head> <span style="color: black;">untuk lebih efektif</span> </span> bisa juga diatas kode <span style="color: orange;"></body></span><br />
<span style="color: orange;"><span style="color: black;">Letakan HTML nya dimanapun anda ingin menampilkan accordion widgednya..</span></span> </div>
<br />
<span style="color: orange;"><span style="color: black;">Silahkan di edit lagi cssnya untuk modifikasi tampilan accordionnya...</span></span>
<span style="color: orange;"></span><br />
<span style="color: orange;"></span><br />
<span style="color: orange;"></span><br />
<span style="color: orange;"><br /></span>
<span style="color: orange;"><span style="color: black;">Selamat mencoba semoga bermanfaat...</span></span></div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com2tag:blogger.com,1999:blog-5174812592040657259.post-35989343381922087412013-07-31T10:37:00.001-07:002013-07-31T10:37:39.709-07:00Konsep Logo Blog Menggunakan CSS <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-iYAlktA3GqQ/UdlAlHe5WkI/AAAAAAAABQ4/DysM_7hWvlE/s1600/tuxpi.com.1373192208.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-iYAlktA3GqQ/UdlAlHe5WkI/AAAAAAAABQ4/DysM_7hWvlE/s1600/tuxpi.com.1373192208.jpg" /></a></div>
<br />
<br />
Pada kesempatan ini share mengenai cara memperindah logo blog sebenarnya
ada banyak cara namun jika agan berminat tidak ada salahnya mencoba
cara ini,,sebelumnya dalam membuat logo ini saya terinspirsi dari <a href="http://maz-waone.blogspot.com/" target="_blank"><span style="color: red;">Maz-waone</span></a> dan <a href="http://opicnewsmedia.blogspot.com/" target="_blank"><span style="color: red;">Opic-Blog</span></a> yang keren dan menarik..nah untuk caranya ikuti langkah dibawah ini..<br />
<br />
Masuk blog agan<br />
pilih menu template/edit html<br />
kemudian letakan kode dibawah ini pada bagian header blog agan<br />
kalau di template ini saya meletakannya dibawah kode <span style="color: #cc0000;"><div id='header-wrapper'></span><br />
<br />
<pre class=" language-markup" data-codetype="HTML"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>'emp-logo'</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>'http://digratisan.blogspot.com/'</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>'char char-e'</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>'char-hidden'</span><span class="token punctuation">></span></span>rie<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>'char char-b'</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>'char-hidden'</span><span class="token punctuation">></span></span>die<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<br />
dan seperti biasanya letakan kode cssnya diatas ]]></b:skin><br />
<br />
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token selector">.emp-logo </span><span class="token punctuation">{</span><span class="token property">display</span> <span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token property">width</span> <span class="token punctuation">:</span> 170px<span class="token punctuation">;</span><span class="token property">height</span> <span class="token punctuation">:</span> 40px<span class="token punctuation">;</span><span class="token property">margin</span> <span class="token punctuation">:</span>5px<span class="token punctuation">;</span>
<span class="token property">position</span> <span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo span </span><span class="token punctuation">{</span><span class="token property">display</span> <span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token property">float</span> <span class="token punctuation">:</span> left<span class="token punctuation">;</span><span class="token property">margin</span> <span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token property">height</span> <span class="token punctuation">:</span> 35px<span class="token punctuation">;</span><span class="token property">margin-left</span> <span class="token punctuation">:</span>-3px<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span>Alike,Georgia,<span class="token ignore">&</span>quot<span class="token punctuation">;</span>URW Bookman L<span class="token ignore">&</span>quot<span class="token punctuation">;</span>,Serif<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo .char-e, .emp-logo .char-b</span><span class="token punctuation">{</span><span class="token property">text-shadow</span> <span class="token punctuation">:</span>0 2px 2px #000<span class="token punctuation">;</span>
<span class="token property">color</span> <span class="token punctuation">:</span> #eee<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">transition</span> <span class="token punctuation">:</span> all 1s ease-out<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo .char-b </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo .char-b </span><span class="token punctuation">{</span><span class="token property">left</span> <span class="token punctuation">:</span> -2px<span class="token punctuation">;</span><span class="token property">border-color</span> <span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo .char-b + span </span><span class="token punctuation">{</span><span class="token property">margin-left</span> <span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo .char-hidden </span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>28px<span class="token punctuation">;</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">text-decoration</span> <span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token property">letter-spacing</span> <span class="token punctuation">:</span> 0px<span class="token punctuation">;</span><span class="token property">color</span> <span class="token punctuation">:</span> #58FAF4 <span class="token punctuation">;</span><span class="token property">width</span> <span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">opacity</span> <span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token property">margin-top</span> <span class="token punctuation">:</span> 12px<span class="token punctuation">;</span><span class="token property">overflow</span> <span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">transition</span> <span class="token punctuation">:</span> width 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-out<span class="token punctuation">;</span>
<span class="token property">text-shadow</span> <span class="token punctuation">:</span>0 2px 2px #000<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo:hover .char-hidden </span><span class="token punctuation">{</span><span class="token property">width</span> <span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><span class="token property">opacity</span> <span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">transition</span> <span class="token punctuation">:</span> width 0.6s 0.5s ease-in-out, opacity 0.3s 0.3s ease-out<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo:hover .char-e, .emp-logo:hover .char-b</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token property">transition-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.emp-logo:hover .char-m</span><span class="token punctuation">{</span><span class="token property">margin-left</span> <span class="token punctuation">:</span>-12px<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
<br />
<br />
sampai langkah ini memang sudah selesai...<br />
tetapi judul blog agan yang sebelumnya akan berbenturan dengan logo yang agan pasang<br />
<br />
<div class="catatan">
untuk menyembunyikan judul blog agan yang sebelumnya tambahkan kode <span style="color: blue;">display:none</span><br />
pada script header sebelumnya </div>
<br />
dan untuk beberapa script yang saya tandai bisa agan sesuaikan atau
dimodifikasi lagi sesuai kemauan dan selera masing - masing....<br />
<br />
Selamat mencoba semoga bermanfaat...
<br />
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-20524737340997959332013-07-31T10:33:00.003-07:002013-07-31T10:33:57.863-07:00Tooltip Sederhana on Related Post <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SS3jp_bwSt8/Udfo80J6mLI/AAAAAAAABOA/-5Uv2CfZ_Zo/s1600/tuxpi.com.1373103733.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="http://1.bp.blogspot.com/-SS3jp_bwSt8/Udfo80J6mLI/AAAAAAAABOA/-5Uv2CfZ_Zo/s1600/tuxpi.com.1373103733.jpg" width="400" /></a></div>
<br />
<br />
<div style="text-align: center;">
<a class="button" href="http://empkublog.blogspot.com/2013/06/memperindah-tampilan-postingan-dengan.html"> </a>
</div>
<br />
Pada Postingan ini saya kana share mengenai tooltip on related post
mungkin agan sudah tau maksudnya yaitu memberi efek tooltip pada related
post untuk penggunaannya sebagai berikut..<br />
<br />
Masuk blog agan<br />
pilih menu template<br />
kemudian cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian<br />
setelah ketemu letakan kode dibawah ini tepat diatasnya<br />
<br />
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token comment" spellcheck="true">/* EMP-BLOG Related Posts --- */</span>
<span class="token selector">.related-post .post-thumbnail </span><span class="token punctuation">{</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 98px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 98px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid #333<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #333<span class="token punctuation">;</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> inset 2px 2px 5px #444<span class="token punctuation">;</span>
<span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> inset 2px 2px 5px #444<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 2px 2px 5px #555<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.related-post </span><span class="token punctuation">{</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 98px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 98px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0 10px 10px 0<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.related-post .related-post-title </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">text-shadow</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> -75px<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 0 2px #444<span class="token punctuation">;</span>
<span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> 0 0 2px #444<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 2px #444<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.related-post:hover .related-post-title </span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
<br />
Selanjutnya paste kode dibawah ini dimana anda ingin menempatkan related postnya<br />
misalnya agan ingin menempatkan dibawah postingan maka cari kode <data:post.body/><br />
kemudian paste kode dibawah ini tepat diatasnya<br />
<br />
<pre class=" language-markup" data-codetype="HTML"><code class="+javascript language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>'related-posts'</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token namespace">b:</span>if</span> <span class="token attr-name">cond</span><span class="token attr-value"><span class="token punctuation">=</span>'data:blog.pageType <span class="token punctuation">=</span><span class="token punctuation">=</span> &quot;item&quot;'</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>'text/javascript'</span><span class="token punctuation">></span></span>//<span class="token cdata"><![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token namespace">b:</span>loop</span> <span class="token attr-name">values</span><span class="token attr-value"><span class="token punctuation">=</span>'data:post.labels'</span> <span class="token attr-name">var</span><span class="token attr-value"><span class="token punctuation">=</span>'label'</span><span class="token punctuation">></span></span>
<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">expr:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span>'&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt<span class="token punctuation">=</span>json-in-script&amp;callback<span class="token punctuation">=</span>related_results_labels&quot;'</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>'text/javascript'</span><span class="token punctuation">/></span></span>
<span class="token operator"><</span><span class="token operator">/</span>b<span class="token punctuation">:</span>loop<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>'text/javascript'</span><span class="token punctuation">></span></span><span class="token keyword">var</span> maxresults<span class="token operator">=</span><span class="token number">6</span><span class="token punctuation">;</span>removeRelatedDuplicates<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>printRelatedLabels<span class="token punctuation">(</span><span class="token operator">&</span>#<span class="token number">39</span><span class="token punctuation">;</span><span class="token operator"><</span>data<span class="token punctuation">:</span>post<span class="token punctuation">.</span>url<span class="token operator">/</span><span class="token operator">></span><span class="token operator">&</span>#<span class="token number">39</span><span class="token punctuation">;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token namespace">b:</span>if</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>'clear'</span><span class="token punctuation">/></span></span></code></pre>
<br />
untuk penyusuaiannya silahkan di edit lagi kode yang diatas
]]></b:skin> sesuaikan dengan tampilan blog agan,selamat
mencoba semoga bermanfaat...<br />
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-16486901849846499312013-07-31T10:32:00.002-07:002013-07-31T10:32:34.504-07:00Membuat Floating Formulir Kontak Blogger <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-se2WwokI-zc/UdPFJ03JXrI/AAAAAAAABM8/u2vjOnu7DFc/s649/tuxpi.com.1372832950.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="http://1.bp.blogspot.com/-se2WwokI-zc/UdPFJ03JXrI/AAAAAAAABM8/u2vjOnu7DFc/s320/tuxpi.com.1372832950.jpg" width="320" /></a></div>
<br />
<br />
<div style="text-align: center;">
<br />
</div>
<br />
<br />
Pada postingan ini saya akan share mengenai cara membuat floating kontak
widged terbaru dari blogger ini untuk pemasangganya cukup simple
silahkan ikuti langkah dibawah ini...<br />
<br />
masuk blog anda telebih dahulu<br />
kemudian menuju halaman tata letak/add gadged<br />
kemudian pilih gaged lainnya<br />
setelah itu pada urutan kedua pilih Formulir Kontak<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-VMTcvyoNw0E/UZn1IX-gfHI/AAAAAAAAB4c/2hmrKwjscho/s1600/formulir+kontak.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="303" src="http://1.bp.blogspot.com/-VMTcvyoNw0E/UZn1IX-gfHI/AAAAAAAAB4c/2hmrKwjscho/s1600/formulir+kontak.jpg" width="320" /></a></div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
</div>
<div style="text-align: left;">
Setelah itu simpan widged </div>
<div style="text-align: left;">
kemudian kita beralih ke menu template/edit html</div>
<div style="text-align: left;">
jika sudah cari kode ]]></b:skin> gunakan ctrl + f</div>
<div style="text-align: left;">
setelah itu letakan kode dibawah ini tepat diatas tag ]]></b:skin></div>
<div style="text-align: left;">
</div>
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token comment" spellcheck="true">/*Floating Contact by empblogspot.com*/</span>
<span class="token selector">.ContactForm, .ContactForm .title </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.floating-ct </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 255px<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.floating-ct-head a </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #2E9AFE<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
*<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.floating-ct-body </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 285px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid #848484<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.floating-ct-head </span><span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.floating-ct-body .ContactForm </span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block!important<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<br />
Setelah itu cari kode </body> dan letakan kode dibawah ini tepat diatas tag </body><br />
<br />
<pre class=" language-javascript" data-codetype="JavaScript"><code class=" language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">'text/javascript'</span><span class="token operator">></span>
<span class="token comment" spellcheck="true">//<![CDATA[
</span><span class="token comment" spellcheck="true">/*Floating Contact by empblogspot.com*/</span>
$<span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token string">'<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.ContactForm'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>appendTo<span class="token punctuation">(</span><span class="token string">'.floating-ct-body'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> slide_up_ct <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.floating-ct-head a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>slide_up_ct<span class="token punctuation">)</span> <span class="token punctuation">{</span>
slide_up_ct <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.floating-ct-body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideDown<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
slide_up_ct <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.floating-ct-body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideUp<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
//]]>
</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<br />
Silahkan di edit sendiri kode yang saya tandai sesuai selera agan masing masing<br />
terakhir Simpan template agan dan lihat hasilnya... <br />
selamat mencoba semoga bermanfaat....
<br />
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com1tag:blogger.com,1999:blog-5174812592040657259.post-55524209112332248842013-07-31T10:30:00.005-07:002013-07-31T10:30:57.947-07:00Menciptakan Fungsi Accordion Pada Widged<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-qAOh8ca3JGs/UdC21GR-Q5I/AAAAAAAABK8/SNhVmdpyA3k/s546/tuxpi.com.1372632649.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-qAOh8ca3JGs/UdC21GR-Q5I/AAAAAAAABK8/SNhVmdpyA3k/s546/tuxpi.com.1372632649.jpg" /></a></div>
<br />
<br />
<br />
<div style="text-align: center;">
<a class="button" href="http://suonkmikro.blogspot.com/"> View Demo</a>
</div>
<br />
<br />
<br />
Pada Postingan ini saya akan share mengenai cara membuat Accordion
Widged di blog accordion widged ini saya rasa cukup mampu untuk
menampung widged dan memaksimalkan penampilan blog agar blog terlihat
rapi dan teratur nah utuk membuatnya sangat mudah silahkan ikuti langkah
dibawah ini untuk menerapkan accordion widged ini di blog anda..<br />
<br />
Masuk blog anda<br />
Pilih menu template/edit html<br />
kemudian gunakan ctrl + f dan temukan kode ]]></b:skin><br />
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin><br />
<br />
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token comment" spellcheck="true">/*------ Accordion Widget by EMP -----*/</span>
<span class="token selector">ul.container</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span>275px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0 auto<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li.menu</span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span>5px 0<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li.button a</span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Arial, sans-serif,Helvetica<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>0px 0px 5px 0<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token property">text-transform</span><span class="token punctuation">:</span>capitalize<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li.button a:hover</span><span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span>none!important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li.button a span</span><span class="token punctuation">{</span>
<span class="token property">right</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span>#ccc<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.dropdown1</span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token property">padding-top</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.dropdown1 li</span><span class="token punctuation">{</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid transparent<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span>#111<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>5px 0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>4px 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.dropdown1 li:hover </span><span class="token punctuation">{</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid transparent<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.dropdown1 li a:hover </span><span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<br />
kemudian dengan cara yang sama temukan silahkan cari kode </head><br />
setelah ketemu letakan script dibawah ini tepat diatas tag </head><br />
<br />
<pre class=" language-javascript" data-codetype="JavaScript"><code class="+jquery language-javascript"><span class="token operator"><</span>script src<span class="token operator">=</span>'http<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
</span><span class="token operator"><</span>script<span class="token operator">></span>
<span class="token comment" spellcheck="true">//<![CDATA[
</span>$<span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span>ready<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* This code is executed after the DOM has been completely loaded */</span>
<span class="token comment" spellcheck="true">/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */</span>
$<span class="token punctuation">.</span>easing<span class="token punctuation">.</span>def <span class="token operator">=</span> <span class="token string">"easeOutBounce"</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* Binding a click event handler to the links: */</span>
$<span class="token punctuation">(</span><span class="token string">'li.button a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Finding the drop down list that corresponds to the current section: */</span>
<span class="token keyword">var</span> dropDown <span class="token operator">=</span> $<span class="token punctuation">(</span>this<span class="token punctuation">)</span><span class="token punctuation">.</span>parent<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>next<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* Closing all other drop down sections, except the current one */</span>
$<span class="token punctuation">(</span><span class="token string">'.dropdown1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>not<span class="token punctuation">(</span>dropDown<span class="token punctuation">)</span><span class="token punctuation">.</span>slideUp<span class="token punctuation">(</span><span class="token string">'slow'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
dropDown<span class="token punctuation">.</span>stop<span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">.</span>slideToggle<span class="token punctuation">(</span><span class="token string">'slow'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */</span>
e<span class="token punctuation">.</span>preventDefault<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// t: current time, b: begInnIng value, c: change In value, d: duration
</span>jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">[</span><span class="token string">'jswing'</span><span class="token punctuation">]</span> <span class="token operator">=</span> jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">[</span><span class="token string">'swing'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
jQuery<span class="token punctuation">.</span>extend<span class="token punctuation">(</span> jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">,</span>
<span class="token punctuation">{</span>
def<span class="token punctuation">:</span> <span class="token string">'easeOutQuad'</span><span class="token punctuation">,</span>
swing<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">//alert(jQuery.easing.default);
</span> <span class="token keyword">return</span> jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">[</span>jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">.</span>def<span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInQuad<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutQuad<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c <span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token number">-2</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutQuad<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token operator">--</span>t<span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token number">-2</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInCubic<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutCubic<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">=</span>t<span class="token operator">/</span>d<span class="token number">-1</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutCubic<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInQuart<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutQuart<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">=</span>t<span class="token operator">/</span>d<span class="token number">-1</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutQuart<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInQuint<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutQuint<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">=</span>t<span class="token operator">/</span>d<span class="token number">-1</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutQuint<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token operator">*</span>t <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInSine<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c <span class="token operator">*</span> Math<span class="token punctuation">.</span>cos<span class="token punctuation">(</span>t<span class="token operator">/</span>d <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>PI<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> c <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutSine<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c <span class="token operator">*</span> Math<span class="token punctuation">.</span>sin<span class="token punctuation">(</span>t<span class="token operator">/</span>d <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>PI<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutSine<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>cos<span class="token punctuation">(</span>Math<span class="token punctuation">.</span>PI<span class="token operator">*</span>t<span class="token operator">/</span>d<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInExpo<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>t<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">?</span> b <span class="token punctuation">:</span> c <span class="token operator">*</span> Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token punctuation">(</span>t<span class="token operator">/</span>d <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutExpo<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>t<span class="token operator">==</span>d<span class="token punctuation">)</span> <span class="token operator">?</span> b<span class="token operator">+</span>c <span class="token punctuation">:</span> c <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token operator">-</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">10</span> <span class="token operator">*</span> t<span class="token operator">/</span>d<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutExpo<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token operator">==</span>d<span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token operator">+</span>c<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token punctuation">(</span>t <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token operator">-</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">10</span> <span class="token operator">*</span> <span class="token operator">--</span>t<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInCirc<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator">-</span>c <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>sqrt<span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">-</span> <span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutCirc<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c <span class="token operator">*</span> Math<span class="token punctuation">.</span>sqrt<span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">-</span> <span class="token punctuation">(</span>t<span class="token operator">=</span>t<span class="token operator">/</span>d<span class="token number">-1</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutCirc<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator">-</span>c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>sqrt<span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">-</span> t<span class="token operator">*</span>t<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>sqrt<span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">-</span> <span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInElastic<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> s<span class="token operator">=</span><span class="token number">1.70158</span><span class="token punctuation">;</span><span class="token keyword">var</span> p<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span><span class="token keyword">var</span> a<span class="token operator">=</span>c<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">==</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token operator">+</span>c<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>p<span class="token punctuation">)</span> p<span class="token operator">=</span>d<span class="token operator">*</span><span class="token punctuation">.</span><span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator"><</span> Math<span class="token punctuation">.</span>abs<span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> a<span class="token operator">=</span>c<span class="token punctuation">;</span> <span class="token keyword">var</span> s<span class="token operator">=</span>p<span class="token operator">/</span><span class="token number">4</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">var</span> s <span class="token operator">=</span> p<span class="token operator">/</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>asin <span class="token punctuation">(</span>c<span class="token operator">/</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token operator">-</span><span class="token punctuation">(</span>a<span class="token operator">*</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>sin<span class="token punctuation">(</span> <span class="token punctuation">(</span>t<span class="token operator">*</span>d<span class="token operator">-</span>s<span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span><span class="token operator">/</span>p <span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutElastic<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> s<span class="token operator">=</span><span class="token number">1.70158</span><span class="token punctuation">;</span><span class="token keyword">var</span> p<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span><span class="token keyword">var</span> a<span class="token operator">=</span>c<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">==</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token operator">+</span>c<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>p<span class="token punctuation">)</span> p<span class="token operator">=</span>d<span class="token operator">*</span><span class="token punctuation">.</span><span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator"><</span> Math<span class="token punctuation">.</span>abs<span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> a<span class="token operator">=</span>c<span class="token punctuation">;</span> <span class="token keyword">var</span> s<span class="token operator">=</span>p<span class="token operator">/</span><span class="token number">4</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">var</span> s <span class="token operator">=</span> p<span class="token operator">/</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>asin <span class="token punctuation">(</span>c<span class="token operator">/</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> a<span class="token operator">*</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token operator">-</span><span class="token number">10</span><span class="token operator">*</span>t<span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>sin<span class="token punctuation">(</span> <span class="token punctuation">(</span>t<span class="token operator">*</span>d<span class="token operator">-</span>s<span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span><span class="token operator">/</span>p <span class="token punctuation">)</span> <span class="token operator">+</span> c <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutElastic<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> s<span class="token operator">=</span><span class="token number">1.70158</span><span class="token punctuation">;</span><span class="token keyword">var</span> p<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span><span class="token keyword">var</span> a<span class="token operator">=</span>c<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">==</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span> b<span class="token operator">+</span>c<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>p<span class="token punctuation">)</span> p<span class="token operator">=</span>d<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token number">3</span><span class="token operator">*</span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator"><</span> Math<span class="token punctuation">.</span>abs<span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> a<span class="token operator">=</span>c<span class="token punctuation">;</span> <span class="token keyword">var</span> s<span class="token operator">=</span>p<span class="token operator">/</span><span class="token number">4</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">var</span> s <span class="token operator">=</span> p<span class="token operator">/</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>asin <span class="token punctuation">(</span>c<span class="token operator">/</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator">-</span><span class="token punctuation">.</span><span class="token number">5</span><span class="token operator">*</span><span class="token punctuation">(</span>a<span class="token operator">*</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>sin<span class="token punctuation">(</span> <span class="token punctuation">(</span>t<span class="token operator">*</span>d<span class="token operator">-</span>s<span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span><span class="token operator">/</span>p <span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> a<span class="token operator">*</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token operator">-</span><span class="token number">10</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>sin<span class="token punctuation">(</span> <span class="token punctuation">(</span>t<span class="token operator">*</span>d<span class="token operator">-</span>s<span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span><span class="token operator">/</span>p <span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">.</span><span class="token number">5</span> <span class="token operator">+</span> c <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInBack<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">==</span> undefined<span class="token punctuation">)</span> s <span class="token operator">=</span> <span class="token number">1.70158</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>s<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">-</span> s<span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutBack<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">==</span> undefined<span class="token punctuation">)</span> s <span class="token operator">=</span> <span class="token number">1.70158</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">=</span>t<span class="token operator">/</span>d<span class="token number">-1</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>s<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">+</span> s<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutBack<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">==</span> undefined<span class="token punctuation">)</span> s <span class="token operator">=</span> <span class="token number">1.70158</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">*</span>t<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>s<span class="token operator">*</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token number">1.525</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">-</span> s<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> c<span class="token operator">/</span><span class="token number">2</span><span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>s<span class="token operator">*</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token number">1.525</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">+</span> s<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInBounce<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c <span class="token operator">-</span> jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">.</span>easeOutBounce <span class="token punctuation">(</span>x<span class="token punctuation">,</span> d<span class="token operator">-</span>t<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeOutBounce<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>t<span class="token operator">/</span><span class="token operator">=</span>d<span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">/</span><span class="token number">2.75</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">7.5625</span><span class="token operator">*</span>t<span class="token operator">*</span>t<span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator"><</span> <span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">/</span><span class="token number">2.75</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">7.5625</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token operator">/</span><span class="token number">2.75</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">+</span> <span class="token punctuation">.</span><span class="token number">75</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator"><</span> <span class="token punctuation">(</span><span class="token number">2.5</span><span class="token operator">/</span><span class="token number">2.75</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">7.5625</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token number">2.25</span><span class="token operator">/</span><span class="token number">2.75</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">+</span> <span class="token punctuation">.</span><span class="token number">9375</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> c<span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">7.5625</span><span class="token operator">*</span><span class="token punctuation">(</span>t<span class="token operator">-</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token number">2.625</span><span class="token operator">/</span><span class="token number">2.75</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">*</span>t <span class="token operator">+</span> <span class="token punctuation">.</span><span class="token number">984375</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
easeInOutBounce<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator"><</span> d<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span> jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">.</span>easeInBounce <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token operator">*</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">.</span><span class="token number">5</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">return</span> jQuery<span class="token punctuation">.</span>easing<span class="token punctuation">.</span>easeOutBounce <span class="token punctuation">(</span>x<span class="token punctuation">,</span> t<span class="token operator">*</span><span class="token number">2</span><span class="token operator">-</span>d<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">.</span><span class="token number">5</span> <span class="token operator">+</span> c<span class="token operator">*</span><span class="token punctuation">.</span><span class="token number">5</span> <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//]]>
</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<br />
<br />
Setelah itu masuk pada menu tata letak/add gadged<br />
kemudian letakan kode dibawah ini pada halaman yang telah tersedia<br />
<br />
<br />
<pre class=" language-markup" data-codetype="HTML"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"container"</span><span class="token punctuation">></span></span>
<!- menu satu -->
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"menu"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"button"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"#"</span> <span class="token punctuation">></span></span>EMP Page<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>▼<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"dropdown1"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span> <span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>3. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>5. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>4. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<!- menu dua -->
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"menu"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"button"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"#"</span> <span class="token punctuation">></span></span>Categories<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>▼<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"dropdown1"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span> <span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>3. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>5. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>4. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<!- menu tiga -->
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"menu"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"button"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"#"</span> <span class="token punctuation">></span></span>Friends Link<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>▼<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"dropdown1"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span> <span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>3. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>5. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>4. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<!- menu empat -->
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"menu"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"button"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"#"</span> <span class="token punctuation">></span></span>Apa saja Boleh<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>▼<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"dropdown1"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span> <span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>3. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>5. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>4. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<!- menu lima -->
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"menu"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"button"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"#"</span> <span class="token punctuation">></span></span>Boleh Apa Saja<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>▼<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"dropdown1"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span> <span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>3. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>5. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>4. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>"URL MENU"</span><span class="token punctuation">></span></span>Nama Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
</!-></!-></!-></!-></!-><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<br />
<br />
Catatan : Silahkan ganti semua tulisan yang saya beri warna dengan suruhan masing-masing<br />
<br />
Warna <span style="color: orange;">Coklat </span> Judul Tab Menu <br />
Warna <span style="color: red;">Merah</span> URL Tujuan<br />
Warna <span style="color: blue;">Biru </span> Nama Menu<br />
<br />
Untuk pengaturan Warna,lebar menu dll silahkan sesuaikan sendiri agar cocok di blog anda<br />
Jika Sudah simpan template anda dan lihat hasilnya..<br />
selamat mencoba semoga bermanfaat...
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-10968818133447284452013-07-31T10:28:00.001-07:002013-07-31T10:28:41.440-07:00Bubbles Threaded Comments Untuk Blog <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fyy6rfhbeIQ/UcxfNNNowzI/AAAAAAAABKg/6F-61mhqxsA/s445/tuxpi.com.1372347803.jpg"><img alt="" border="0" src="http://2.bp.blogspot.com/-fyy6rfhbeIQ/UcxfNNNowzI/AAAAAAAABKg/6F-61mhqxsA/s445/tuxpi.com.1372347803.jpg" title="" /></a></div>
<br />
<br />
Pada postingan kali ini saya akan share cara membuat Bubbles Threaded
Comments di blog agan mungkin Bubbles Threaded Comments ini bisa menjadi
pilihan jika agan bosan dengan tampilan komentar blog agan yang masih
standar untuk menerapkannya diblog agan silahkan ikuti langkah dibawah
ini...<br />
<br />
Masuk blog agan terlebih dahulu<br />
pilih menu template<br />
kemudian gunakan ctrl + f dan segera temukan kode ]]></b:skin><br />
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span style="color: black;">/* Start Comment Style Code http://pengembarabiru.blogspot.com */<br />.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:arial;line-height:15px;font-size:14px}<br />.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}<br />.comments
.comment .comment-actions a,.comments .comment .continue
a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242
!important;text-align:center;text-decoration:none;background:#ADE8E6;border:1px
solid
#fff;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}<br />.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}<br />.comments .comments-content .inline-thread{padding:0}<br />.comments .comments-content .comment-thread{margin:8px 0}<br />.comments .comments-content .comment-thread:empty{display:none}<br />.comment-replies{margin-top:1em;margin-left:40px;background:#fff}<br />.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}<br />.comments .comments-content .comment:first-child{padding-top:16px}<br />.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}<br />.comments .comments-content .comment-body{position:relative}<br />.comments .comments-content .user a{color:#0E6284;font-family:coda;font-size:16px }<br />.comments
.comments-content .icon.blog-author { border-color : transparent
#990000 transparent transparent;border-style : solid;border-width: 10px;
display:block;width : 0;bottom:0;right:0;height : 0;position :
relative;float:right;top:0}<br />.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}<br />.comment-content{margin:0 0 8px;padding:0 5px}<br />.comment-header{font-size:18px;background-color:#ECF3F7;border-bottom:1px solid #ccc;padding:5px}<br />.comments .comments-content .owner-actions{position:absolute;right:0;top:0}<br />.comments .comments-replybox{border:none;height:230px;width:100%}<br />.comments .comment-replybox-thread{margin-top:0}<br />.comments .comment-replybox-single{margin-top:5px;margin-left:48px}<br />.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}<br />.comments .thread-toggle{cursor:pointer;display:inline-block}<br />.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}<br />.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}<br />.comments .thread-chrome.thread-collapsed{display:none}<br />.comments .thread-toggle{display:inline-block}<br />.comments
.thread-toggle
.thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}<br />.comments
.avatar-image-container{float:left; overflow:hidden; border:#fff solid
1px; padding:4px;box-shadow:1px 1px 5px rgba(1, 1, 1,
0.1);background:#f5f5f5;}<br />.comments .avatar-image-container img{width:48px}<br />.comments
.comment-block{background:#f5f5f5;padding:0; margin-left:48px;
border:#fff solid 1px;box-shadow:1px 1px 5px rgba(1, 1, 1, 0.1);}<br />@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}<br />/* End Comment Style Code http://pengembarabiru.blogspot.com */</span></span></blockquote>
<br />
Jika sudah silahkan simpan template agan dan lihat hasilnya..<br />
selamat mencoba semoga bermanfaat...
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-83853700981812248192013-07-31T10:25:00.003-07:002013-07-31T10:25:59.096-07:00Modifikasi Popular Post Agar Lebih Menarik <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fbj3iaQ0nY8/Ub_7CFbaCEI/AAAAAAAABDQ/LuxWSzaMufA/s1600/tuxpi.com.1371535980.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="277" src="http://2.bp.blogspot.com/-fbj3iaQ0nY8/Ub_7CFbaCEI/AAAAAAAABDQ/LuxWSzaMufA/s400/tuxpi.com.1371535980.jpg" width="400" /></a></div>
<br />
<br />
<div style="text-align: center;">
<a class="tombol" href="http://smbwkeren.blogspot.com/"> </a>
</div>
<br />
<br />
Pada postingan ini saya akan share mengenai cara memodifikasi popular
post agan kelihatan menarik diblog untuk caranya pemasangannya sangat
mudah untuk lebih lengkapnya silahkan ikuti langkah dibawah ini..<br />
<br />
Masuk blog agan<br />
pilih menu Tata letak/add gadged<br />
lalu pilih Entri Populer<br />
untuk pengaturannya perhatikan gambar dibawah ini<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-RKJH_TRIz3c/Ub_4INX6LAI/AAAAAAAABDA/1HeufllP4oE/s1600/tuxpi.com.1371535328.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-RKJH_TRIz3c/Ub_4INX6LAI/AAAAAAAABDA/1HeufllP4oE/s400/tuxpi.com.1371535328.jpg" width="342" /></a></div>
<br />
<br />
<br />
Setelah itu klik simpan<br />
Selanjutnya pilih menu template/edit html<br />
gunakan ctrl+ f untuk menemukan kode ]]></b:skin><br />
Bila sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin><br />
<br />
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token comment" spellcheck="true">/*--- Popular Post Style EMP-BLOG Start --- */</span>
<span class="token selector">class="tr_bq">
.popular-posts ul</span><span class="token punctuation">{</span><span class="token property">padding</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> 0px<span class="token punctuation">;</span> 0px<span class="token punctuation">;</span> 0px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.popular-posts ul li </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #FFF <span class="token url">url(http://3.bp.blogspot.com/-yMrpkWcL_4w/UB_ymWAga3I/AAAAAAAAAXc/8dmBJK6vJ80/s769/blogtariff.com-rd1.jpg)</span> no-repeat 2px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0px 0px 5px 0px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>5px 5px 5px 30px <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid #C2C0C0<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span>8px<span class="token punctuation">;</span>
<span class="token property">-moz-border-radius</span><span class="token punctuation">:</span>8px<span class="token punctuation">;</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span>8px<span class="token punctuation">;</span>
<span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.popular-posts ul li:hover </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #FFF <span class="token url">url(http://1.bp.blogspot.com/-V-jaA0_1bMI/UB_yqynw7vI/AAAAAAAAAXo/lgz_o0Cx4aM/s769/blogtariff.com-rd2.jpg)</span> no-repeat 2px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid #FE0B0B<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.popular-posts ul li a:hover </span><span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span>#0419F7<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/*--- Popular Post Style EMP-BLOG End--- */</span></code></pre>
<br />
<br />
Silahkan sesuaikan warna agar terlihat serasi dengan blog agan..<br />
Jika sudah silahkan simpan template agan dan lihat hasilnya<br />
Selamat mencoba semoga bermanfaat...
<br />
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-32281246309819443922013-07-31T10:23:00.001-07:002013-07-31T10:23:52.057-07:00Membuat Efek Avatar Menghilang pada Box Komentar <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-YCQSCP1CuN8/UbDUzRfAwXI/AAAAAAAAA_U/vwtqRATydMA/s1600/tuxpi.com.1370543265.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="http://1.bp.blogspot.com/-YCQSCP1CuN8/UbDUzRfAwXI/AAAAAAAAA_U/vwtqRATydMA/s400/tuxpi.com.1370543265.jpg" width="400" /></a></div>
<br />
<br />
<br />
<br />
Assalamualaikum pada kesempatan ini saya akan share mengenai cara
membuat efek avatar menghilang pada box komentar,,maksudnya efek
menghilang disini adalah avatar pada box komentar blog tidak akan
terlihat melainkan avatar tersebut hanya akan terlihat jika disorot Nah
untuk Demonya bisa anda lihat di box komentar blog ini...jika anda
tertarik menggunakannya silahkan ikuti langkah dibawah ini..<br />
<br />
Masuk blog anda<br />
pilih menu template/edit html<br />
kemudian cari kode ]]></b:skin> gunakan ctrl+f untuk memudahkan pencarian anda<br />
jika sudah ketemu letakan css dibawah ini diatas tag ]]></b:skin><br />
<br />
<br />
<br />
<pre class=" language-css" data-codetype="CSS"><code class=" language-css"><span class="token selector">.comments .avatar-image-container </span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span><span class="token property">max-height</span><span class="token punctuation">:</span> 56px<span class="token punctuation">;</span><span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token property">left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token property">-webkit-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-moz-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-ms-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-o-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.comment:hover .avatar-image-container </span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span><span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">#comments a </span><span class="token punctuation">{</span><span class="token property">-webkit-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-moz-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-ms-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-o-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.comments .avatar-image-container </span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span><span class="token property">max-height</span><span class="token punctuation">:</span> 56px<span class="token punctuation">;</span><span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token property">left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token property">-webkit-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-moz-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-ms-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-o-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.comment:hover .avatar-image-container </span><span class="token punctuation">{</span><span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span><span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">#comments a </span><span class="token punctuation">{</span><span class="token property">-webkit-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-moz-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-ms-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">-o-transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">transition</span><span class="token punctuation">:</span> all .3s ease-in-out<span class="token punctuation">;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
<br />
<br />
Langkah terakhir silahkan simpan template anda dan lihat hasilnya..<br />
Selamat mencoba semoga bermanfaat... </div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-8365699718892026202013-07-31T10:15:00.001-07:002013-07-31T10:21:42.220-07:00Membuat Google + Followers Box Melayang Disamping Blog <div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-owI2BDqL9Jw/Ua0FJkwH85I/AAAAAAAAA_E/FATMu8kgLKk/s1600/tuxpi.com.1370292738.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="261" src="http://2.bp.blogspot.com/-owI2BDqL9Jw/Ua0FJkwH85I/AAAAAAAAA_E/FATMu8kgLKk/s1600/tuxpi.com.1370292738.jpg" width="320" /></a></div>
<br />
<div style="text-align: center;">
<br /></div>
<br />
<br />
Assalamualaikum jika pada postingan sebelumnya saya share mengenai cara
membuat twitter melayang diblog maka berbeda halnya dengan ini pada
postingan ini saya akan share mengenai cara membuat Google + melayang
untuk blog seperti twitter box kemaren jika sobat berminat
menggunakannya sobat bisa ikuti langkah dibawah ini..<br />
<br />
Masuk blog sobat<br />
Pilih menu tata letak/add gadged<br />
Pilih html javascript<br />
Jika sudah lansung letakan kode dibawah ini pada box yang tersedia<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-giql9pYlTas/Ua0EXT7GhMI/AAAAAAAAA-4/PCd6QGQmMVI/s1600/add+gadget.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="http://4.bp.blogspot.com/-giql9pYlTas/Ua0EXT7GhMI/AAAAAAAAA-4/PCd6QGQmMVI/s1600/add+gadget.jpg" width="400" /></a></div>
<br />
<br />
<pre class=" language-css" data-codetype="CSS+javascript+jquery"><code class=" language-css"><span class="token selector"><pre class="cpp" name="code"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function()
</pre>
</span><span class="token punctuation">{</span><span class="token selector">$(".gplusbox").hover(function() </span><span class="token punctuation">{</span><span class="token selector">$(this).stop().animate(</span><span class="token punctuation">{</span><span class="token property">right</span><span class="token punctuation">:</span> <span class="token string">"0"</span><span class="token punctuation">}</span>, <span class="token string">"medium"</span>)<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">, function() </span><span class="token punctuation">{</span><span class="token selector">$(this).stop().animate(</span><span class="token punctuation">{</span><span class="token property">right</span><span class="token punctuation">:</span> <span class="token string">"-330"</span><span class="token punctuation">}</span>, <span class="token string">"medium"</span>)<span class="token punctuation">;</span><span class="token punctuation">}</span>, 500)<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">);
//-->
</script>
<style type="text/css">
.gplusbox</span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url("http://4.bp.blogspot.com/-okzPzWuiDGg/UMOGvgAcgAI/AAAAAAAABpQ/8Q8oTKkyA6Q/s400/g%252B%2Bsoftglad.png")</span> no-repeat scroll left center transparent <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 275px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 0px 0 46px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 325px<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 99999<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span>-330px<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span>20%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.gplusbox div</span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid #D64937<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"></style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/113722753656632606178/" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
(function() </span><span class="token punctuation">{</span>
<span class="token selector">window.___gcfg = </span><span class="token punctuation">{</span><span class="token string">'lang'</span><span class="token punctuation">:</span> <span class="token string">'en'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
var po = document.createElement(<span class="token string">'script'</span>)<span class="token punctuation">;</span>
po.type = <span class="token string">'text/javascript'</span><span class="token punctuation">;</span>
po.async = true<span class="token punctuation">;</span>
po.src = '<span class="token property">https</span><span class="token punctuation">:</span>//apis.google.com/js/plusone.js'<span class="token punctuation">;</span>
var s = document.getElementsByTagName(<span class="token string">'script'</span>)[0]<span class="token punctuation">;</span>
s.parentNode.insertBefore(po, s)<span class="token punctuation">;</span>
<span class="token punctuation">}</span>)()<span class="token punctuation">;</span>
<span class="token ignore"><</span>/script<span class="token ignore">></span>
<span class="token ignore"><</span>/div<span class="token ignore">></span><span class="token ignore"><</span>/div<span class="token ignore">></span></code></pre>
</div>
<br />
silahkan ganti URL Google Plus saya diatas dengan URL Google plus agan
jika sudah simpan template agan dan lihat hasilnya,,semoga bermanfaat...
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-74641143019190103952013-07-31T10:13:00.000-07:002013-07-31T10:13:03.155-07:00Simple Menu Vertical Cantik untuk Blog <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" itemprop="name">
</h2>
<center>
<div class="menuzoomout">
<ul>
<li><a href="http://digratisan.blogspot.com/">Kebo</a></li>
<li><a href="http://digratisan.blogspot.com/">Jaran</a></li>
<li><a href="http://digratisan.blogspot.com/">Sampi</a></li>
<li><a href="http://digratisan.blogspot.com/">Bedes</a></li>
<li><a href="http://digratisan.blogspot.com/">Mayung</a> </li>
</ul>
</div>
</center>
<style>
.menuzoomout ul {
width: 40%;
margin: 15px 10px;
padding: 10px;
list-style: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #FF8C00;
background: -moz-linear-gradient(left, #FF8C00 0%, #e8e8e8 29%, #FF8C00 43%, #e8e8e8 65%, #FF8C00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(29%,#e8e8e8), color-stop(43%,#cccccc), color-stop(65%,#e8e8e8), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(left, #8B0000 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#FF8C00 100%);
background: -o-linear-gradient(left, #FF8C00%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
background: -ms-linear-gradient(left, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
background: linear-gradient(to right, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=1 );
}
.menuzoomout ul li {
margin: 5px auto;
padding: 5px;border:2px solid #cdcdcd;
cursor: pointer;color:#000000;
font-family: century gothic;font-weight: bold;
font-size: 25px;
line-height: 30px;
-webkit-transition: 200ms all;
-moz-transition: 200ms all;
-o-transition: 200ms all;
transition: 200ms all;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;
background: #FF8C00;
background: -moz-linear-gradient(top, #8B0000 0%, #8B000050%, #e1e1e1 51%, #8B0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8B0000), color-stop(50%,#8B0000), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
background: -o-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
background: -ms-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
background: linear-gradient(to bottom, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=0 );
-webkit-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);
}
.menuzoomout ul li:first-of-type {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
.menuzoomout ul li:last-of-type {
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.menuzoomout ul li:hover {
padding-left: 20px;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menuzoomout ul li a {color:#000000 !important;}
</style><br />
Assalamualaikum Pada postingan ini saya akan share mengenai cara membuat
menu vertical cantik untuk blog tentunya dengan cara yang sangat simple
jika agan tertarik silahkan ikuti langkah pembuatannya dibawah ini...<br />
<br />
Masuk blog anda<br />
pilih menu tata letak/add gadged<br />
pilih html javascript<br />
kemudian silahkan letakan kode dibawah ini dimanapun anda ingin menampilkan menu tersebut..<br />
<br />
<br />
<blockquote class="tr_bq">
<center><br />
<div class="menuzoomout"><br />
<ul><br />
<li><a href="<span style="color: red;">http://digratisan.blogspot.com/</span>"><span style="color: red;">Kebo</span></a></li><br />
<li><a href="<span style="color: red;">http://digratisan.blogspot.com/</span>"><span style="color: red;">Jaran</span></a></li><br />
<li><a href="<span style="color: red;">http://digratisan.blogspot.com/</span>"><span style="color: red;">Sampi</span></a></li><br />
<li><a href="<span style="color: red;">http://digratisan.blogspot.com/</span>"><span style="color: red;">Bedes</span></a></li><br />
<li><a href="<span style="color: red;">http://digratisan.blogspot.com/</span>"><span style="color: red;">Mayung</span></a> </li><br />
</ul><br />
</div><br />
</center><br />
<style><br />
.menuzoomout ul {<br />
width: 40%;<br />
margin: 15px 10px;<br />
padding: 10px;<br />
list-style: none;<br />
-webkit-border-radius: 5px;<br />
-moz-border-radius: 5px;<br />
-ms-border-radius: 5px;<br />
-o-border-radius: 5px;<br />
border-radius: 5px;<br />
background: #FF8C00;<br />
background: -moz-linear-gradient(left, #FF8C00 0%, #e8e8e8 29%, #FF8C00 43%, #e8e8e8 65%, #FF8C00 100%);<br />
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,#cccccc), color-stop(29%,#e8e8e8),
color-stop(43%,#cccccc), color-stop(65%,#e8e8e8),
color-stop(100%,#cccccc));<br />
background: -webkit-linear-gradient(left, #8B0000 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#FF8C00 100%);<br />
background: -o-linear-gradient(left, #FF8C00%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);<br />
background: -ms-linear-gradient(left, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);<br />
background: linear-gradient(to right, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=1 );<br />
<br />
}<br />
.menuzoomout ul li {<br />
margin: 5px auto;<br />
padding: 5px;border:2px solid #cdcdcd;<br />
cursor: pointer;color:#000000;<br />
font-family: century gothic;font-weight: bold;<br />
font-size: 25px;<br />
line-height: 30px;<br />
-webkit-transition: 200ms all;<br />
-moz-transition: 200ms all;<br />
-o-transition: 200ms all;<br />
transition: 200ms all;<br />
-webkit-transform: scale(1);<br />
-moz-transform: scale(1);<br />
-ms-transform: scale(1);<br />
-o-transform: scale(1);<br />
transform: scale(1);<br />
text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;<br />
background: #FF8C00;<br />
background: -moz-linear-gradient(top, #8B0000 0%, #8B000050%, #e1e1e1 51%, #8B0000 100%);<br />
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#8B0000), color-stop(50%,#8B0000),
color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));<br />
background: -webkit-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);<br />
background: -o-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);<br />
background: -ms-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);<br />
background: linear-gradient(to bottom, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=0 );<br />
<br />
-webkit-box-shadow: 0px 1px 9px rgba(50, 50, 50,
0.75);-moz-box-shadow: 0px 1px 9px rgba(50, 50, 50,
0.75);box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);<br />
}<br />
.menuzoomout ul li:first-of-type {<br />
-moz-border-radius-topleft: 5px;<br />
-webkit-border-top-left-radius: 5px;<br />
border-top-left-radius: 5px;<br />
-moz-border-radius-topright: 5px;<br />
-webkit-border-top-right-radius: 5px;<br />
border-top-right-radius: 5px;<br />
}<br />
.menuzoomout ul li:last-of-type {<br />
-moz-border-radius-bottomleft: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-bottom-left-radius: 5px;<br />
-moz-border-radius-bottomright: 5px;<br />
-webkit-border-bottom-right-radius: 5px;<br />
border-bottom-right-radius: 5px;<br />
}<br />
.menuzoomout ul li:hover {<br />
padding-left: 20px;<br />
-webkit-transform: scale(0.9);<br />
-moz-transform: scale(0.9);<br />
-ms-transform: scale(0.9);<br />
-o-transform: scale(0.9);<br />
transform: scale(0.9);<br />
-webkit-transition: all 0.5s ease;<br />
-moz-transition: all 0.5s ease;<br />
-ms-transition: all 0.5s ease;<br />
-o-transition: all 0.5s ease;<br />
transition: all 0.5s ease;<br />
}<br />
.menuzoomout ul li a {color:#000000 !important;}<br />
</style></blockquote>
<br />
<br />
Catatan : Silahkan ganti kode berwarna <span style="color: red;">merah</span> dengan judul menu dan url tujuan agan sendiri<br />
<br />
Jika sudah silahkan simpan template agan dan lihat hasilnya hehehehe maaf untuk demonya ane pake bahasa sumbawa kwkwkwkw :) <br />
Selamat mencoba semoga bermanfaat...
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-2995042947815036132013-07-31T10:10:00.001-07:002013-07-31T10:10:41.793-07:00Pilihan Widged Sosial Media Dengan Efek Hover <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-hV07WGdoKRI/UflE12p2ZJI/AAAAAAAAAPc/hancLxFHte0/s1600/Screenshot_30.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://4.bp.blogspot.com/-hV07WGdoKRI/UflE12p2ZJI/AAAAAAAAAPc/hancLxFHte0/s320/Screenshot_30.png" width="320" /></a></div>
Assalamualaikum pada postingan ini saya
akan share mengenai cara membuat efek hover pada icon sosial banyak
sekali pariasi yang dapat dibuat pada icon icon button sosial jika
kemarin saya telah share icon sosial dengan caricatur rumah namun
berbeda halnya dengan ini efek hover akan diterapkan pada icon sosial
tersebut,seperti contoh diatas silahkan agan ikuti langkah dibaah ini
jika ingin menerapkannya diblog agan..
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
masuk blog agan</div>
<div style="text-align: left;">
pilih menu tata letak/add gadged</div>
<div style="text-align: left;">
pilih html javascrpt</div>
<div style="text-align: left;">
jika sudah letakan kode dibawah ini pada box yang tersedia<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-5ORuaZL1m9I/UarzSRoJAfI/AAAAAAAAA-k/E8f0vu_OsnU/s1600/add+gadget.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="http://2.bp.blogspot.com/-5ORuaZL1m9I/UarzSRoJAfI/AAAAAAAAA-k/E8f0vu_OsnU/s320/add+gadget.jpg" width="320" /></a></div>
</div>
<br />
<div style="text-align: left;">
DEMO 1</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
<div id="iconoshoverfade"><br />
<ul><br />
<li><a href="<span style="color: red;">http://www.facebook.com/#</span>"
target="_blank"> <img height="50"
src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png"
title="Ad me on Facebook" width="50" /></a></li><br />
<li><a href="<span style="color: red;">https://plus.google.com/u/0/#</span>"
target="_blank"><img height="50"
src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png"
title="Ad me on Google+" width="50" /></a></li><br />
<li> <a href="<span style="color: red;">https://www.twitter.com/#</span>"
target="_blank"><img height="50"
src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png"
title="Ad me on Twitter" width="50" /></a></li><br />
<li><a href="<span style="color: red;">http://feeds.feedburner.com/#</span>"
target="_blank"><img height="50"
src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png"
title="Subcribe" width="50" /></a></li><br />
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><br />
<script><br />
$(document).ready(function() {<br />
$('#iconoshoverfade a').hover(function() {<br />
$('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');<br />
}, function() {<br />
$('#iconoshoverfade a img').stop().fadeTo(250, '1.0');<br />
});<br />
});<br />
</script><br />
<br />
<style><br />
#iconoshoverfade {float:center;margin: 0 auto;}<br />
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}<br />
#iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out;<br />
-moz-transition: all 1s ease-in-out;<br />
-ms-transition: all 1s ease-in-out;<br />
-o-transition: all 1s ease-in-out;<br />
transition: all 1s ease-in-out;}<br />
</style><br />
</ul><br />
</div></blockquote>
<br />
DEMO 2<br />
<br />
<blockquote class="tr_bq">
<div id="iconoshoverfade"><br />
<ul><br />
<li><a href="<span style="color: red;">http://www.facebook.com/#</span>"
target="_blank"> <img height="50"
src="https://lh3.googleusercontent.com/-_36zfJkSOQM/UaDTzAQacFI/AAAAAAAAARM/2LEyBSzD9hU/h120/Facebook-Home.png"
title="Ad me on Facebook" width="50" /></a></li><br />
<li><a href="<span style="color: red;">https://plus.google.com/u/0/#</span>"
target="_blank"><img height="50"
src="https://lh4.googleusercontent.com/-neMd3wG1lKI/UaDTzBPLp1I/AAAAAAAAARI/T2hREOqinMU/h120/Google-Social-store.gif"
title="Ad me on Google+" width="50" /></a></li><br />
<li> <a href="<span style="color: red;">https://www.twitter.com/#</span>"
target="_blank"><img height="50"
src="https://lh6.googleusercontent.com/-lywaejUyXXc/UaDTzpYjW5I/AAAAAAAAARc/Sd58USmLJ10/h120/Twitter-Home.png"
title="Ad me on Twitter" width="50" /></a></li><br />
<li><a href="<span style="color: red;">http://feeds.feedburner.com/#</span>"
target="_blank"><img height="50"
src="https://lh3.googleusercontent.com/-9DKYV5K0AXY/UaDTzGwStuI/AAAAAAAAARE/0dfUm4D8pGE/h120/RSS-Home.png"
title="Subcribe" width="50" /></a></li><br />
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><br />
<script><br />
$(document).ready(function() {<br />
$('#iconoshoverfade a').hover(function() {<br />
$('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');<br />
}, function() {<br />
$('#iconoshoverfade a img').stop().fadeTo(250, '1.0');<br />
});<br />
});<br />
</script><br />
<br />
<style><br />
#iconoshoverfade {float:center;margin: 0 auto;}<br />
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}<br />
#iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out;<br />
-moz-transition: all 1s ease-in-out;<br />
-ms-transition: all 1s ease-in-out;<br />
-o-transition: all 1s ease-in-out;<br />
transition: all 1s ease-in-out;}<br />
</style><br />
</ul><br />
</div></blockquote>
<br />
DEMO 3<br />
<br />
<blockquote class="tr_bq">
<div id="iconoshoverfade"><br />
<ul><br />
<li><a href="<span style="color: red;">http://www.facebook.com/#</span>"
target="_blank"> <img height="50"
src="http://3.bp.blogspot.com/-YFvMg3ZTCoU/UWYlsclm9dI/AAAAAAAAEjE/VbECKsRvusc/s1600/Scribble-Facebook.png"
title="Ad me on Facebook" width="50" /></a></li><br />
<li><a href="<span style="color: red;">https://plus.google.com/u/0/#</span>"
target="_blank"><img height="50"
src="http://3.bp.blogspot.com/-mWT0r0Xe66Q/UWYls9XBgGI/AAAAAAAAEjg/2hXW0-osaOk/s1600/Scribble-google+.png"
title="Ad me on Google+" width="50" /></a></li><br />
<li> <a href="<span style="color: red;">https://www.twitter.com/#</span>"
target="_blank"><img height="50"
src="http://2.bp.blogspot.com/-RINX-CaD8sE/UWYltOJVN4I/AAAAAAAAEjk/-yQn5FMSx-0/s1600/Scribble-twitter.png"
title="Ad me on Twitter" width="50" /></a></li><br />
<li><a href="<span style="color: red;">http://feeds.feedburner.com/#</span>"
target="_blank"><img height="50"
src="http://3.bp.blogspot.com/-dR8k3RGwRqI/UWYlsRncmKI/AAAAAAAAEjI/gUk3lsYAAis/s1600/Scribble-RSS.png"
title="Subcribe" width="50" /></a></li><br />
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><br />
<script><br />
$(document).ready(function() {<br />
$('#iconoshoverfade a').hover(function() {<br />
$('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');<br />
}, function() {<br />
$('#iconoshoverfade a img').stop().fadeTo(250, '1.0');<br />
});<br />
});<br />
</script><br />
<br />
<style><br />
#iconoshoverfade {float:center;margin: 0 auto;}<br />
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}<br />
#iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out;<br />
-moz-transition: all 1s ease-in-out;<br />
-ms-transition: all 1s ease-in-out;<br />
-o-transition: all 1s ease-in-out;<br />
transition: all 1s ease-in-out;}<br />
</style><br />
</ul><br />
</div><br />
</blockquote>
</div>
<br />
<div style="text-align: left;">
Catatan : untuk kode berwarna merah silahkan diganti dengan URL masing masing</div>
<div style="text-align: left;">
jika sudah silahkan simpan template dan lihat hasilnya...<br />
Saya rasa penjelasannya sudah cukup jelas.. </div>
<div style="text-align: left;">
selamat mencoba semoga bermanfaat.....( wassalam ) </div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-15102527346763409572013-07-30T02:34:00.003-07:002013-07-30T02:41:21.068-07:00Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="title_holder">
<h1 class="post-title">
<br />
</h1>
</div>
<div class="post-body">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-R2TIlpeClUs/UW-rGiZk0bI/AAAAAAAAEDI/OAmaBNR6oXw/s1600/gallery-gambar.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS" height="175" src="http://3.bp.blogspot.com/-R2TIlpeClUs/UW-rGiZk0bI/AAAAAAAAEDI/OAmaBNR6oXw/s320/gallery-gambar.jpg" title="Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS" width="320" /></a></div>
<div style="text-align: justify;">
<b>Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog</b> –
jika biasanya adalah membuat gambar hanya dengan single image, maka
sekarang sedikit berbeda dengan biasanya. Kali ini adalah tidak hanya
satu gambar saja, melainkan beberapa gambar yang ingin ditampilkan
kedalam posting blog yang ingin dijadikan sebagai gallery gambar. Dengan
menambahkan kode CSS yang berbasis sebagai pembesar gambar atau efek
zoom yang dapat menampilkan thumbnail gambar yang mengubah ukuran
dimensi aslinya ketika mouse berguling ke arah gambar. Kode CSS bekerja
dengan cara yang meniadakan kebutuhan untuk untuk user secara manual
yang biasanya harus menentukan dimensi setiap gambar jika akan
diperbesar, hal ini menghemat banyak waktu. Sebuah deskripsi tekstual
juga dapat ditampilkan di bawah gambar yang diperbesar. Dengan begitu
maka keterangan gambar dapat secara langsung di tuliskan kedalam elemen
HTML gambar dan dapat langsung tampil saat gambar tersentuh mouse.
Berikut adalah tutorial untuk cara membuat <b>Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog</b> di posting blog:</div>
<br />
1. Login ke akun blogger.<br />
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-c5SNR1ZVJjM/UW-rGzU3-NI/AAAAAAAAEDM/En9rqQJF5-U/s1600/Kolom-kode-CSS.jpg" style="margin-left: 1em; margin-right: 1em;"><img height="65" src="http://2.bp.blogspot.com/-c5SNR1ZVJjM/UW-rGzU3-NI/AAAAAAAAEDM/En9rqQJF5-U/s320/Kolom-kode-CSS.jpg" width="320" /></a></div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.ienlarger {<br />
float: left;<br />
clear: none; <br />
padding-bottom: 5px; <br />
padding-right: 5px; <br />
}<br />
.ienlarger a { <br />
display:block;<br />
text-decoration: none;<br />
}<br />
.ienlarger a:hover{ <br />
position:relative;<br />
}<br />
.ienlarger span img {<br />
border: 1px solid #FFFFFF; <br />
margin-bottom: 8px; <br />
}<br />
.ienlarger a span { <br />
position: absolute;<br />
display:none;<br />
color: #FFCC00; <br />
text-decoration: none;<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 13px; <br />
background-color: #000000;<br />
font-weight: bold;<br />
padding-top: 10px;<br />
padding-right: 10px;<br />
padding-bottom: 13px;<br />
padding-left: 10px;<br />
}<br />
.ienlarger img { <br />
border-width: 0;<br />
}<br />
.ienlarger a:hover span { <br />
display:block;<br />
top: 50px; <br />
left: 90px; <br />
z-index: 100;<br />
}<br />
.resize_thumb {<br />
width: 150px; <br />
height : 120px;<br />
}
<br />
.resize_large{<br />
width: 500px; <br />
height : 300px;<br />
}
</blockquote>
<div style="text-align: justify;">
3. Klik Terapkan ke Blog.<br />
<br />
Selanjutnya apabila akan menampilkan Gallery Gambar Efek Smart Enlarger
With Teks Deskripsi di Blog ini kedalam postingan maka langkahnya adalah
saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div>
<blockquote class="tr_bq">
<div class="ienlarger"><a
href="http://digratisan.blogspot.com/"><img
src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg"
alt="thumb" class="resize_thumb" /><span><br />
<img
src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg"
alt="large" class="resize_large" /><br /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br />
<br />
<div class="ienlarger"><a
href="http://digratisan.blogspot.com/"><img
src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg"
alt="thumb" class="resize_thumb" /><span><br />
<img
src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg"
alt="large" class="resize_large" /><br /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br />
<br />
<div class="ienlarger"><a
href="http://digratisan.blogspot.com/"><img
src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg"
alt="thumb" class="resize_thumb" /><span><br />
<img
src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg"
alt="large" class="resize_large" /><br /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br />
<br />
<div class="ienlarger"><a
href="http://digratisan.blogspot.com/"><img
src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg"
alt="thumb" class="resize_thumb" /><span><br />
<img
src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg"
alt="large" class="resize_large" /><br /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br />
<br />
<div class="ienlarger"><a
href="http://digratisan.blogspot.com/"><img
src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg"
alt="thumb" class="resize_thumb" /><span><br />
<img
src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg"
alt="large" class="resize_large" /><br /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br />
<br />
<div class="ienlarger"><a
href="http://digratisan.blogspot.com/"><img
src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg"
alt="thumb" class="resize_thumb" /><span><br />
<img
src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg"
alt="large" class="resize_large" /><br /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br />
<br style="clear:left" /></blockquote>
<div style="text-align: justify;">
Keterangan:<br />
Jika ingin menambah gambar lebih banyak lagi maka hanya perlu menambahkan kode dibawah ini:</div>
<blockquote class="tr_bq">
<div class="ienlarger"><a href="URL TUJUAN"><img src="URL
GAMBAR" alt="thumb" class="resize_thumb" /><span><br />
<img src="URL GAMBAR" alt="large" class="resize_large" /><br /><br />
TEKS DESKRIPSI GAMBAR</span></a></div></blockquote>
<div style="text-align: justify;">
Sebelum atau diatas kode:</div>
<blockquote class="tr_bq">
<br style="clear:left" /></blockquote>
<br />
DEMO:<br />
<br />
<div class="ienlarger">
<a href="http://digratisan.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" /></a></div>
<div class="ienlarger">
<a href="http://digratisan.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" /></a></div>
<div class="ienlarger">
<a href="http://digratisan.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" /></a></div>
<div class="ienlarger">
<a href="http://digratisan.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" /></a></div>
<div class="ienlarger">
<a href="http://digratisan.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" /></a></div>
<div class="ienlarger">
<a href="http://digratisan.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" /></a></div>
</div>
<br /></div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-73353248946244914842013-07-30T02:15:00.002-07:002013-07-30T02:15:30.486-07:00Gallery CSS3 Efek Hover Pada Gambar di Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="title_holder">
<h1 class="post-title">
<br />
</h1>
</div>
<div class="post-body">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-elTCpB-cSgU/UZB--RcnGAI/AAAAAAAAEVM/v5QC6Q5xCnk/s1600/CSS-Gallery-Image-Hover.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS3 Efek Hover Pada Gambar di Blog" height="257" src="http://3.bp.blogspot.com/-elTCpB-cSgU/UZB--RcnGAI/AAAAAAAAEVM/v5QC6Q5xCnk/s320/CSS-Gallery-Image-Hover.jpg" title="Gallery CSS3 Efek Hover Pada Gambar di Blog" width="320" /></a></div>
<div style="text-align: justify;">
<b>Gallery CSS3 Efek Hover Pada Gambar di Blog</b> – untuk membuat efek
hover pada tutorial ini terdapat 5 type hover yang berbeda sehingga
untuk membuat hover image pada blog anda mempunyai banyak pilihan.
Dibawah sudah saya sediakan 5 type kode CSS untuk image hover yang dapat
anda pilih untuk kemudian dimasukan kedalam template blog dan
mempercantik tampilan gallery image pada blog anda. Untuk memilih kode
yang cocok untuk diterapkan kedalam blog, terlebih dahulu lihat demo
gallery dan pilih pada type gallery tersebut jika sudah cocok kemudian
masukan kode CSS yang ada dibawah kedalam template blog anda. Setelah
itu kemudian anda dapat dengan mudah membuat gallery di postingan dengan
hover yang sudah anda pilih tersebut. Terdapat 5 demo image hover yang
berbeda dan silahkan anda lihat pada button demo dibawah. Untuk membuat
gallery image hover maka berikut adalah tutorialnya untuk cara
menerapkan <b>Gallery CSS3 Efek Hover Pada Gambar di Blog</b>:<br />
<div style="text-align: center;">
<a class="button" href="http://mas-andes.blogspot.com/p/iphonewidth550pxheight293pxbackgroundur.html" target="_blank" title="Demo Gallery CSS3 Efek Hover Pada Gambar di Blog">Demo</a></div>
1. Login ke akun blogger.<br />
2. Copy kode CSS dibawah ini kemudian klik Template > Sesuaikan >
Tingkat Lanjut > Tambahkan CSS (paste kode CSS didalam kolom
tersebut).</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-uuSzWQf2c2U/UZB--WEiHrI/AAAAAAAAEVQ/UNxiTVZwaT4/s1600/Script+CSS.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery CSS3 Efek Hover Pada Gambar di Blog" border="0" height="65" src="http://1.bp.blogspot.com/-uuSzWQf2c2U/UZB--WEiHrI/AAAAAAAAEVQ/UNxiTVZwaT4/s320/Script+CSS.jpg" title="Gallery CSS3 Efek Hover Pada Gambar di Blog" width="320" /></a></div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 10px;<br />
float: left;<br />
border: 5px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
box-shadow: 0px 0px 5px #aaa;<br />
cursor: default;<br />
}<br />
.view .mask, .view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view a.info {<br />
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png)
center no-repeat;<br />
display: inline-block;<br />
text-decoration: none;<br />
padding:0;<br />
text-indent:-9999px;<br />
width:20px;<br />
height:20px;<br />
}<br />
.effect img {<br />
opacity:1;<br />
-moz-transform:scale(1,1);<br />
-webkit-transform:scale(1,1);<br />
-o-transform:scale(1,1);<br />
-ms-transform:scale(1,1);<br />
transform:scale(1,1);<br />
-webkit-transition: all 0.2s ease-in;<br />
-moz-transition: all 0.2s ease-in;<br />
-o-transition: all 0.2s ease-in;<br />
-ms-transition: all 0.2s ease-in;<br />
transition: all 0.2s ease-in;<br />
}<br />
.effect .mask {<br />
opacity:0;<br />
overflow:visible;<br />
border-color:rgba(0,0,0,0.7) transparent transparent transparent;<br />
border-style:solid;<br />
border-width:125px;<br />
width:0;<br />
height:0;<br />
-moz-transform:translateY(-125px);<br />
-webkit-transform:translateY(-125px);<br />
-o-transform:translateY(-125px);<br />
-ms-transform:translateY(-125px);<br />
transform:translateY(-125px);<br />
-moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;<br />
-webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;<br />
-o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;<br />
-ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;<br />
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;<br />
}<br />
.effect a.info {<br />
opacity:0;<br />
-moz-transform:translateY(-125px);<br />
-webkit-transform:translateY(-125px);<br />
-o-transform:translateY(-125px);<br />
-ms-transform:translateY(-125px);<br />
transform:translateY(-125px);<br />
-moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;<br />
-webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;<br />
-o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;<br />
-ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out;<br />
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;<br />
<br />
}<br />
.effect:hover img {<br />
opacity:0.7;<br />
-moz-transform:scale(2,2);<br />
-webkit-transform:scale(2,2);<br />
-o-transform:scale(2,2);<br />
-ms-transform:scale(2,2);<br />
transform:scale(2,2);<br />
}<br />
.effect:hover .mask {<br />
opacity: 1;<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
}<br />
.effect:hover a.info {<br />
opacity:1;<br />
-moz-transform:translateY(100px);<br />
-webkit-transform:translateY(100px);<br />
-o-transform:translateY(100px);<br />
-ms-transform:translateY(100px);<br />
transform:translateY(100px);<br />
}</blockquote>
<div style="text-align: justify;">
3. Klik Terapkan ke Blog.<br />
<br />
Perlu di Perhatikan : Untuk menaruh kode CSS tidak harus seperti langkah
di atas, bisa juga dengan cara klik Template > Edit HTML > lalu
cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat
di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan
Template.<br />
<br />
4. Selanjutnya untuk menampilkan Gallery CSS3 Efek Hover Pada Gambar di
Blog caranya copy kode HTML dibawah ini, kemudian paste kode tersebut
pada kolom posting mode HTML lalu klik Publikasikan.</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
<div class="view effect"><br /><img
src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg"
/><br /><div class="mask"></div><br /><div class="content"><br /><a href="http://mas-andes.blogspot.com" class="info" title="Full Image">Full Image</a><br /></div><br /></div> <br /><br /><div class="view effect"><br /><img
src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg"
/><br /><div class="mask"></div><br /><div class="content"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div> <br /><br /><div class="view effect"><br /><img
src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg"
/><br /><div class="mask"></div><br /><div class="content"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div> <br /><br /><div class="view effect"><br /><img
src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg"
/><br /><div class="mask"></div><br /><div class="content"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div></blockquote>
<div style="text-align: justify;">
Keterangan:</div>
<ul style="text-align: justify;">
<li>Ganti "http://mas-andes.blogspot.com"<span style="color: red;"> </span>dengan URL halaman yang di inginkan.</li>
<li>Diatas adalah untuk efek hover type 1, untuk membuat type 2-5
seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara
pemasangannya seperti langkah diatas.</li>
</ul>
<div style="text-align: justify;">
<b>Kode Efek Hover Type 2</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 10px;<br />
float: left;<br />
border: 5px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
box-shadow: 0px 0px 5px #aaa;<br />
cursor: default;<br />
}<br />
.view .mask, .view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view a.info {<br />
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png)
center no-repeat;<br />
display: inline-block;<br />
text-decoration: none;<br />
padding:0;<br />
text-indent:-9999px;<br />
width:20px;<br />
height:20px;<br />
}<br />
.second-effect .mask {<br />
opacity: 0;<br />
overflow:visible;<br />
border:0px solid rgba(0,0,0,0.7);<br />
-moz-box-sizing:border-box;<br />
-webkit-box-sizing:border-box;<br />
box-sizing:border-box;<br />
-webkit-transition: all 0.4s ease-in-out;<br />
-moz-transition: all 0.4s ease-in-out;<br />
-o-transition: all 0.4s ease-in-out;<br />
-ms-transition: all 0.4s ease-in-out;<br />
transition: all 0.4s ease-in-out;<br />
}<br />
.second-effect a.info {<br />
position:relative;<br />
top:-10px;<br />
opacity:0;<br />
-moz-transform:scale(0,0);<br />
-webkit-transform:scale(0,0);<br />
-o-transform:scale(0,0);<br />
-ms-transform:scale(0,0);<br />
transform:scale(0,0);<br />
-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;<br />
-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;<br />
-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;<br />
-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;<br />
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;<br />
}<br />
.second-effect:hover .mask {<br />
opacity: 1;<br />
border:100px solid rgba(0,0,0,0.7);<br />
}<br />
.second-effect:hover a.info {<br />
opacity:1;<br />
-moz-transform:scale(1,1);<br />
-webkit-transform:scale(1,1);<br />
-o-transform:scale(1,1);<br />
-ms-transform:scale(1,1);<br />
transform:scale(1,1);<br />
-moz-transition-delay:0.3s;<br />
-webkit-transition-delay:0.3s;<br />
-o-transition-delay:0.3s;<br />
-ms-transition-delay:0.3s;<br />
transition-delay:0.3s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
<div class="view second-effect"><br /><img
src="https://lh4.googleusercontent.com/-iuN928NrDrY/Uc7k5AhL76I/AAAAAAAAFPk/cJjZnazHQQI/w250-h200-no/Faceblog+Evolutions+%25289%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div><br /><br /><div class="view second-effect"><br /><img
src="https://lh5.googleusercontent.com/-fLQQSNPkjGs/Uc7k0qAIh4I/AAAAAAAAFOo/JhrbPcyhq14/w250-h200-no/Faceblog+Evolutions+%252819%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div> <br /><br /><div class="view second-effect"><br /><img
src="https://lh6.googleusercontent.com/-rkmSREUCYLo/Uc7k0tzNcbI/AAAAAAAAFOs/h8tZWk2HJvI/w250-h200-no/Faceblog+Evolutions+%252820%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div><br /><br /><div class="view second-effect"><br /><img
src="https://lh4.googleusercontent.com/-8k_Ozy3SpVw/Uc7kzLg9KYI/AAAAAAAAFOc/tA4CaxbDokk/w250-h200-no/Faceblog+Evolutions+%252818%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div></blockquote>
<div style="text-align: justify;">
<b>Kode Efek Hover Type 3</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 10px;<br />
float: left;<br />
border: 5px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
box-shadow: 0px 0px 5px #aaa;<br />
cursor: default;<br />
}<br />
.view .mask, .view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view a.info {<br />
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png)
center no-repeat;<br />
display: inline-block;<br />
text-decoration: none;<br />
padding:0;<br />
text-indent:-9999px;<br />
width:20px;<br />
height:20px;<br />
}<br />
.third-effect .mask {<br />
opacity: 0;<br />
overflow:visible;<br />
border:100px solid rgba(0,0,0,0.7);<br />
-moz-box-sizing:border-box;<br />
-webkit-box-sizing:border-box;<br />
box-sizing:border-box;<br />
-webkit-transition: all 0.4s ease-in-out;<br />
-moz-transition: all 0.4s ease-in-out;<br />
-o-transition: all 0.4s ease-in-out;<br />
-ms-transition: all 0.4s ease-in-out;<br />
transition: all 0.4s ease-in-out;<br />
}<br />
.third-effect a.info {<br />
position:relative;<br />
top:-10px;<br />
opacity: 0;<br />
-webkit-transition: opacity 0.5s 0s ease-in-out;<br />
-moz-transition: opacity 0.5s 0s ease-in-out;<br />
-o-transition: opacity 0.5s 0s ease-in-out;<br />
-ms-transition: opacity 0.5s 0s ease-in-out;<br />
transition: opacity 0.5s 0s ease-in-out;<br />
}<br />
.third-effect:hover .mask {<br />
opacity: 1;<br />
border:100px solid rgba(0,0,0,0.7);<br />
}<br />
.third-effect:hover a.info {<br />
opacity:1;<br />
-moz-transition-delay: 0.3s;<br />
-webkit-transition-delay: 0.3s;<br />
-o-transition-delay: 0.3s;<br />
-ms-transition-delay: 0.3s;<br />
transition-delay: 0.3s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
<div class="view third-effect"><br /><img
src="https://lh5.googleusercontent.com/-c90pCDltYkg/Uc7kyt3Q66I/AAAAAAAAFOY/tcjlIFDn9NM/w250-h200-no/Faceblog+Evolutions+%252817%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div><br /><br /><div class="view third-effect"><br /><img
src="https://lh3.googleusercontent.com/-XAEE8JqCYgY/Uc7kyDtEhkI/AAAAAAAAFOI/yiU3Oz1GA20/w250-h200-no/Faceblog+Evolutions+%252816%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div> <br /><br /><div class="view third-effect"><br /><img
src="https://lh4.googleusercontent.com/-nDj5MnChnfA/Uc7kyL-1RNI/AAAAAAAAFOM/N_e_fUO1oxE/w250-h200-no/Faceblog+Evolutions+%252815%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div><br /><br /><div class="view third-effect"><br /><img
src="https://lh6.googleusercontent.com/-QNjuCWVlEsw/Uc7kxd0-rKI/AAAAAAAAFN8/Nwx8QQ7jwx4/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg"
/><br /><div class="mask"><br /><a href="http://mas-andes.blogspot.com" class="info">Read More</a><br /></div><br /></div></blockquote>
<div style="text-align: justify;">
<b>Kode Efek Hover Type 4</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 10px;<br />
float: left;<br />
border: 5px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
box-shadow: 0px 0px 5px #aaa;<br />
cursor: default;<br />
}<br />
.view .mask, .view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view a.info {<br />
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png)
center no-repeat;<br />
display: inline-block;<br />
text-decoration: none;<br />
padding:0;<br />
text-indent:-9999px;<br />
width:20px;<br />
height:20px;<br />
}<br />
.fourth-effect .mask {<br />
position:absolute; /* Center the mask */<br />
top:50px;<br />
left:100px;<br />
cursor:pointer;<br />
border-radius: 50px;<br />
border-width: 50px;<br />
display: inline-block;<br />
height: 100px;<br />
width: 100px;<br />
border: 50px solid rgba(0, 0, 0, 0.7);<br />
-moz-box-sizing:border-box;<br />
-webkit-box-sizing:border-box;<br />
box-sizing:border-box;<br />
opacity:1;<br />
visibility:visible;<br />
-moz-transform:scale(4);<br />
-webkit-transform:scale(4);<br />
-o-transform:scale(4);<br />
-ms-transform:scale(4);<br />
transform:scale(4);<br />
-moz-transition:all 0.3s ease-in-out;<br />
-webkit-transition:all 0.3s ease-in-out;<br />
-o-transition:all 0.3s ease-in-out;<br />
-ms-transition:all 0.3s ease-in-out;<br />
transition:all 0.3s ease-in-out;<br />
}<br />
.fourth-effect:hover .mask {<br />
opacity: 0;<br />
border:0px solid rgba(0,0,0,0.7);<br />
visibility:hidden;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
<div class="view fourth-effect"><br /><a
href="http://mas-andes.blogspot.com"><img
src="https://lh3.googleusercontent.com/-R3oxg7pLrUQ/Uc7kxHnUqQI/AAAAAAAAFN0/4xyeF9rO5p8/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg"
/></a><br /><div class="mask"></div><br /></div><br /><br /><div class="view fourth-effect"><br /><a
href="http://mas-andes.blogspot.com"><img
src="https://lh5.googleusercontent.com/-bhNMR21h5eM/Uc7kwXeZoYI/AAAAAAAAFNk/dEhuMUY4EFU/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg"
/></a><br /><div class="mask"></div><br /></div><br /><br /><div class="view fourth-effect"><br /><a
href="http://mas-andes.blogspot.com"><img
src="https://lh4.googleusercontent.com/-luGfMboNxZE/Uc7kwNNhwWI/AAAAAAAAFNg/vJ7Z6TUHyUw/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg"
/></a><br /><div class="mask"></div><br /></div><br /><br /><div class="view fourth-effect"><br /><a
href="http://mas-andes.blogspot.com"><img
src="https://lh5.googleusercontent.com/-6ilkN7_0Rps/Uc7ku29b1eI/AAAAAAAAFNU/eDPlfvimshI/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg"
/></a><br /><div class="mask"></div><br /></div></blockquote>
<div style="text-align: justify;">
<b>Kode Efek Hover Type 5</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 10px;<br />
float: left;<br />
border: 5px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
box-shadow: 0px 0px 5px #aaa;<br />
cursor: default;<br />
}<br />
.view .mask, .view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view a.info {<br />
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png)
center no-repeat;<br />
display: inline-block;<br />
text-decoration: none;<br />
padding:0;<br />
text-indent:-9999px;<br />
width:20px;<br />
height:20px;<br />
}<br />
.fifth-effect img {<br />
opacity:0.2;<br />
-moz-transition: all 0.3s ease-in;<br />
}<br />
.fifth-effect .mask {<br />
cursor:pointer;<br />
opacity:1;<br />
visibility:visible;<br />
border:100px solid rgba(0,0,0,0.7);<br />
-moz-box-sizing:border-box;<br />
-webkit-box-sizing:border-box;<br />
box-sizing:border-box;<br />
-moz-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);<br />
}<br />
.fifth-effect:hover .mask {<br />
border:0px double rgba(0,0,0,0.7);<br />
opacity:0;<br />
visibility:hidden;<br />
}<br />
.fifth-effect:hover img {<br />
opacity:1;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 100px; overflow: auto; padding: 10px;">
<div class="view fifth-effect"><br /><a href="#"><img
src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg"
/></a><br /><div class="mask"></div><br /></div> <br /><br /><div class="view fifth-effect"><br /><a
href="#"><img
src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg"
/></a><br /><div class="mask"></div><br /></div> <br /><br /><div class="view fifth-effect"><br /><a
href="#"><img
src="https://lh4.googleusercontent.com/-9XttOxLcy-c/Uc7k5DItg2I/AAAAAAAAFPs/n-Uw_MoxZz8/w300-h200-no/Faceblog+Evolutions+%25282%2529.jpg"
/></a><br /><div class="mask"></div><br /></div> <br /><br /><div class="view fifth-effect"><br /><a
href="#"><img
src="https://lh4.googleusercontent.com/-HalPVQkXh3E/Uc7kwuVDwdI/AAAAAAAAFNw/NTv_AlX3HO4/w300-h200-no/Faceblog+Evolutions+%25281%2529.jpg"
/></a><br /><div class="mask"></div><br /></div></blockquote>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
</div>
<br /><br /><a href="http://mas-andes.blogspot.com/#ixzz2aWDBh8YN" style="color: #003399;"></a></div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-1474733861146245282013-07-30T00:16:00.001-07:002013-07-30T00:16:16.018-07:00Efek Gambar Peel Back Dengan CSS3<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="title_holder">
<h1 class="post-title">
<br />
</h1>
</div>
<div class="post-body">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-h2TpHxLgPs4/UVrtb7sDJ4I/AAAAAAAAD_k/LeLIi8_vJ9A/s1600/css3-transisi.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Gambar Peel Back Dengan CSS3" height="240" src="http://3.bp.blogspot.com/-h2TpHxLgPs4/UVrtb7sDJ4I/AAAAAAAAD_k/LeLIi8_vJ9A/s320/css3-transisi.jpg" title="Efek Gambar Peel Back Dengan CSS3" width="320" /></a></div>
<div style="text-align: justify;">
<b>Efek Gambar Peel Back Dengan CSS3</b> – merupakan efek gambar dimana
saat mouse menyentuh gambar akan menampilkan efek hover seperti slide
out yang berjalan secara mulus untuk menampilkan gambar kedua yang
berada dibelakangnya. Efek animasi CSS3 ini berjalan secara halus
sehinga lebih jelas terlihat saat onmouseover gambar akan terkesan
menjadi lebih cantik. Hasilnya adalah sederhana namun ramping "Sebelum
dan Sesudah" efek hover gambar. Dengan sedikit menambahkan kode CSS pada
template blog kemudian menerapkannya dengan mememanggil kode tersebut
kedalam postingan maka tidak akan terlalu sulit untuk membuat posting
blog dan membuat variatif gambar dipostingan blog agar tampil lebih
cantik. Cara pemasangannya pun sangat mudah dan dalam waktu yang sangat
cepat, berikut adalah tutorial cara membuat <b>Efek Gambar Peel Back Dengan CSS3</b> di postingan blog:<br />
<br />
1. Login ke akun blogger.<br />
2. Klik Template > Edit HTML.<br />
3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />
4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b></div>
<blockquote class="tr_bq">
a.nowandthen{<br />
position:relative;<br />
display: block;<br />
overflow:hidden;<br />
cursor: pointer;<br />
width: 550px;<br />
height: 434px;<br />
}<br />
a.nowandthen img{<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
width: 100%;<br />
height: 100%;<br />
-moz-transition: all 0.5s ease;<br />
-webkit-transition: all 0.5s ease;<br />
-o-transition: all 0.5s ease;<br />
-ms-transition: all 0.5s ease;<br />
transition: all 0.5s ease;<br />
z-index: 2;<br />
clip: rect(0,650px,434px,0); <br />
}<br />
a.nowandthen img:nth-of-type(2){z-index: 1;}<br />
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);<br />
opacity: 0;<br />
}<br />
a.nowandthen.alt{ width: 300px;height: 354px;}<br />
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}<br />
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}
</blockquote>
<div style="text-align: justify;">
5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat
Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini
kedalam halaman posting atau bisa juga di sidebar blog.</div>
<blockquote class="tr_bq">
<a class="nowandthen"><br />
<img alt="faceblog evolutions"
src="http://1.bp.blogspot.com/-g8yisZRKWuE/UVrlSkR-qrI/AAAAAAAAD_E/YAey1keHR3s/s1600/peel-back-1a.jpg"/><br />
<img alt="faceblog evolutions"
src="http://1.bp.blogspot.com/-punOpruc-wI/UVrlU2HnLZI/AAAAAAAAD_U/cWJwyrbZ7aM/s1600/peel-back1b.jpg"/><br />
</a></blockquote>
</div>
<br /></div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-4677632291391194672013-07-30T00:10:00.000-07:002013-07-30T00:10:34.241-07:00Efek Gambar 3D Flip Dengan CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/s1600/3d-flip.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Gambar 3D Flip Dengan CSS" height="182" src="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/s320/3d-flip.jpg" title="Efek Gambar 3D Flip Dengan CSS" width="320" /></a></div>
<div style="text-align: justify;">
<b>Efek Gambar 3D Flip Dengan CSS</b> – sebuah gambar tanpa CSS mungkin
bisa dibilang seperti wanita tanpa make up. Sebuah gambar pada posting
blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan
murni dan tidak memiliki efek yang ditampilkan saat disentuh mouse atau
yang biasa disebut onmouseover. Membuat efek hover pada gambar
dipostingan blog sangat banyak dan bahkan beragam bentuk yang
ditampilkan hanya dengan menggunakan tambahan kode CSS, dan salah
satunya pada tutorial membuat Efek Gambar 3D Flip Dengan CSS ini. Salah
satu fitur inovatif di CSS3 adalah kemampuan untuk memutar elemen HTML
dalam ruang 3D. Kode CSS yang terdapat dibawah adalah menunjukkan
bagaimana untuk memutar 2 sisi elemen, baik di X atau Y axis untuk
mengungkapkan isi di sisi belakang gambar. Hanya dengan menyentuhkan
mouse ke arah gambar maka melihat efek flip pada gambar akan terlihat
dan ini tidak memerlukan banyak cara untuk proses menerapkannya. Supaya
lebih mudah, maka berikut adalah tutorial untuk membuat <b>Efek Gambar 3D Flip Dengan CSS</b> di postingan blog:</div>
<br />
1. Login ke akun blogger.<br />
2. Klik Template > Edit HTML.<br />
3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />
4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b><br />
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
div.flip{<br />
position:relative;<br />
width: 300px;<br />
height: 250px;<br />
-webkit-perspective: 600px; <br />
-moz-perspective: 600px;<br />
-o-perspective: 600px;<br />
perspective: 600px;<br />
}<br />
div.flip div.rotate{<br />
width: 100%;<br />
height: 100%;<br />
-moz-transform-style: preserve-3d;<br />
-webkit-transform-style: preserve-3d;<br />
-o-transform-style: preserve-3d;<br />
transform-style: preserve-3d;<br />
-moz-transition: all 0.6s ease-in-out 0.3s;<br />
-webkit-transition: all 0.6s ease-in-out 0.3s;<br />
-o-transition: all 0.6s ease-in-out 0.3s;<br />
transition: all 0.6s ease-in-out 0.3s;<br />
}<br />
div.flip div.rotate > *{ <br />
position:absolute;<br />
width: 100%;<br />
height: 100%;<br />
-moz-backface-visibility: hidden;<br />
-webkit-backface-visibility: hidden;<br />
-o-backface-visibility: hidden;<br />
backface-visibility: hidden;<br />
}<br />
div.flip div.rotate > div{<br />
-webkit-box-sizing: border-box; <br />
-moz-box-sizing: border-box;<br />
box-sizing: border-box;<br />
padding: 8px;<br />
background: #eee;<br />
}<br />
div.rotate.x *:nth-child(2){<br />
-moz-transform: rotateX(180deg);<br />
-webkit-transform: rotateX(180deg);<br />
-o-transform: rotateX(180deg);<br />
transform: rotateX(180deg);<br />
}<br />
div.flip:hover > div.rotate.x{<br />
-moz-transform: rotateX(180deg);<br />
-webkit-transform: rotateX(180deg);<br />
-o-transform: rotateX(180deg);<br />
transform: rotateX(180deg);<br />
}<br />
div.rotate.y *:nth-child(2){ <br />
-moz-transform: rotateY(180deg);<br />
-webkit-transform: rotateY(180deg);<br />
-o-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
}<br />
div.flip:hover > div.rotate.y{<br />
-moz-transform: rotateY(180deg);<br />
-webkit-transform: rotateY(180deg);<br />
-o-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
}</blockquote>
<div style="text-align: justify;">
5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat
Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini
kedalam halaman posting blog.</div>
<blockquote class="tr_bq">
<div class="flip" style="width: 540px; height: 300px; display: inline-block;"><br />
<div class="rotate x"><br />
<img src="http://2.bp.blogspot.com/-BrEkDxr2EfY/UWA4vPvCwpI/AAAAAAAAEAU/s8oqlJBAsr4/s320/mujeres-munecas-23132-13.jpg"><br />
<img src="http://2.bp.blogspot.com/-5lEdSo_vJ9s/UWA4vCBcM4I/AAAAAAAAEAg/VWzGtN5acg0/s320/mujeres-munecas-23132-23.jpg"><br />
</div><br />
</div><br />
</br></br><br />
<div class="flip" style="width: 540px; height: 300px; display: inline-block;"><br />
<div class="rotate y"><br />
<img src="http://1.bp.blogspot.com/-DAo0vLuVFuM/UWA4urkXXKI/AAAAAAAAEAI/IUuV2qTLdO4/s320/mujeres-munecas-23132-19.jpg"><br />
<img src="http://4.bp.blogspot.com/-eNBnvPo_ElA/UWA4vKCHfbI/AAAAAAAAEAQ/KL_CZoqcvZ4/s320/mujeres-munecas-23132-12.jpg"><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
Keterangan:
Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri.</div>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-26301203313975669502013-07-29T22:25:00.001-07:002013-07-29T22:25:01.351-07:003 Style Gallery CSS3 Photo Pinkbox Pada Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-cetKhgTrXmc/UZv0tjXHUzI/AAAAAAAAEfQ/N20CkE-zJyo/s1600/css-lightbox.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery CSS3 Photo Pinkbox Pada Blog" height="267" src="http://3.bp.blogspot.com/-cetKhgTrXmc/UZv0tjXHUzI/AAAAAAAAEfQ/N20CkE-zJyo/s320/css-lightbox.jpg" title="3 Style Gallery CSS3 Photo Pinkbox Pada Blog" width="320" /></a></div>
<div style="text-align: justify;">
<b>3 Style Gallery CSS3 Photo Pinkbox Pada Blog</b> – bergilirnya waktu
setelah beberapa waktu lalu pernah membuat efek yang sama dengan adanya
script jQuery dan menggunakan warna gelap pada sisi gambar yakni pada
tutorial yang berjudul jquery gambar efek lightbox pada blog,
maka tutorial ini sama pula halnya dengan efek tersebut.
Namun yang cukup berbeda adalah pada gallery efek pinkbox ini dengan
tanpa adanya script jquery dan pada opacity lightbox yang berwarna
terang di sekeliling gambar dengan 3 style yang berbeda sehingga bagi
yang ingin menggunakan dapat memilih satu di antara 3 atau bahkan
semuanya dari efek gambar pinkbox yang ada. Tampilan default gallery
gambar akan berbentuk thumbnail dan jika pada gambar tersebut di klik
maka akan muncul gambar dengan ukuran/size aslinya dari gambar tersebut
yang tentunya gambar jauh lebih besar dari ukuran thumbnail. Untuk
membuat gallery gambar efek pinkbox ini cukup mudah di terapkan kedalam
blog. Sebelum memulai ke tutorial lebih lanjut bisa juga jika ingin
melihat tampilannya terlebih dahulu gallery photo ini jika di pasang
kedalam blog, dengan cara klik tombol demo yang ada dibawah. Selanjutnya
setelah memilih satu dari 3 style yang disukai, maka berikut adalah
tutorialnya untuk cara memasang <b>3 Style Gallery CSS3 Photo Pinkbox Pada Blog</b>:<br />
<div style="text-align: center;">
<a class="button" href="http://mas-andes.blogspot.com/p/blog-page_15.html" target="_blank">Demo Style #1</a>
</div>
1. Login ke akun blogger.<br />
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik
Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan
CSS (paste kode CSS ini didalam kolom tersebut).</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Oi69_UEHryU/UZv03yu8uvI/AAAAAAAAEfY/efYNt4cFTz8/s1600/CSS.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery CSS3 Photo Pinkbox Pada Blog" border="0" height="65" src="http://1.bp.blogspot.com/-Oi69_UEHryU/UZv03yu8uvI/AAAAAAAAEfY/efYNt4cFTz8/s320/CSS.jpg" title="3 Style Gallery CSS3 Photo Pinkbox Pada Blog" width="320" /></a></div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
ol,ul {list-style:none;}<br />
.lb-album{<br />
width: auto;<br />
margin: 0 auto;<br />
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;<br />
}<br />
.lb-album li{<br />
float: left;<br />
margin: 5px;<br />
position: relative;<br />
}<br />
.lb-album li > a,<br />
.lb-album li > a img{<br />
display: block;<br />
}<br />
.lb-album li > a{<br />
width: 150px;<br />
height: 150px;<br />
position: relative;<br />
padding: 10px;<br />
background: #f1d2c2;<br />
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
border-radius: 4px 4px 4px 4px;<br />
}<br />
.lb-album li > a span{<br />
position: absolute;<br />
width: 150px;<br />
height: 150px;<br />
top: 10px;<br />
left: 10px;<br />
text-align: center;<br />
line-height: 150px;<br />
color: rgba(27,54,81,0.8);<br />
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);<br />
font-size: 24px;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
background: rgb(241,210,194);<br />
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);<br />
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(255,255,255,0.56)),
color-stop(100%,rgba(241,210,194,1)));<br />
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
-webkit-transition: opacity 0.3s linear;<br />
-moz-transition: opacity 0.3s linear;<br />
-o-transition: opacity 0.3s linear;<br />
-ms-transition: opacity 0.3s linear;<br />
transition: opacity 0.3s linear;<br />
}<br />
.lb-album li > a:hover span{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
.lb-overlay{<br />
width: 0px;<br />
height: 0px;<br />
position: fixed;<br />
overflow: hidden;<br />
left: 0px;<br />
top: 0px;<br />
padding: 0px;<br />
z-index: 99;<br />
text-align: center;<br />
background: rgb(241,210,194);<br />
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);<br />
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(255,255,255,0.56)),
color-stop(100%,rgba(241,210,194,1)));<br />
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
}<br />
.lb-overlay > div{<br />
position: relative;<br />
color: rgba(27,54,81,0.8);<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
width: 550px;<br />
margin: 10px auto 0px auto;<br />
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);<br />
-webkit-transition: opacity 0.3s linear 1.3s;<br />
-moz-transition: opacity 0.3s linear 1.3s;<br />
-o-transition: opacity 0.3s linear 1.3s;<br />
-ms-transition: opacity 0.3s linear 1.3s;<br />
transition: opacity 0.3s linear 1.3s;<br />
}<br />
.lb-overlay div h3,<br />
.lb-overlay div p{<br />
padding: 0px 20px;<br />
width: 200px;<br />
height: 60px;<br />
}<br />
.lb-overlay div h3{<br />
font-size: 36px;<br />
float: left;<br />
text-align: right;<br />
border-right: 1px solid rgba(27,54,81,0.4);<br />
}<br />
.lb-overlay div h3 span,<br />
.lb-overlay div p{<br />
font-size: 16px;<br />
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;<br />
font-style: italic;<br />
}<br />
.lb-overlay div h3 span{<br />
display: block;<br />
line-height: 6px;<br />
}<br />
.lb-overlay div p{<br />
text-align: left;<br />
float: left;<br />
width: 260px;<br />
}<br />
.lb-overlay a.lb-close{<br />
background: rgba(27,54,81,0.8);<br />
z-index: 1001;<br />
color: #fff;<br />
position: absolute;<br />
top: 43px;<br />
left: 50%;<br />
font-size: 15px;<br />
line-height: 26px;<br />
text-align: center;<br />
width: 50px;<br />
height: 23px;<br />
overflow: hidden;<br />
margin-left: -25px;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
-webkit-transition: opacity 0.3s linear 1.2s;<br />
-moz-transition: opacity 0.3s linear 1.2s;<br />
-o-transition: opacity 0.3s linear 1.2s;<br />
-ms-transition: opacity 0.3s linear 1.2s;<br />
transition: opacity 0.3s linear 1.2s;<br />
}<br />
.lb-overlay img{<br />
/* height: 100%; For Opera max-height does not seem to work */<br />
max-height: 100%;<br />
position: relative;<br />
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);<br />
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);<br />
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);<br />
}<br />
.lb-overlay:target {<br />
width: auto;<br />
height: auto;<br />
bottom: 0px;<br />
right: 0px;<br />
padding: 80px 100px 120px 100px;<br />
}<br />
.lb-overlay:target img {<br />
-webkit-animation: fadeInScale 1.2s ease-in-out;<br />
-moz-animation: fadeInScale 1.2s ease-in-out;<br />
-o-animation: fadeInScale 1.2s ease-in-out;<br />
-ms-animation: fadeInScale 1.2s ease-in-out;<br />
animation: fadeInScale 1.2s ease-in-out;<br />
}<br />
.lb-overlay:target a.lb-close,<br />
.lb-overlay:target > div{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
@-webkit-keyframes fadeInScale {<br />
0% { -webkit-transform: scale(0.6); opacity: 0; }<br />
100% { -webkit-transform: scale(1); opacity: 1; }<br />
}<br />
@-moz-keyframes fadeInScale {<br />
0% { -moz-transform: scale(0.6); opacity: 0; }<br />
100% { -moz-transform: scale(1); opacity: 1; }<br />
}<br />
@-o-keyframes fadeInScale {<br />
0% { -o-transform: scale(0.6); opacity: 0; }<br />
100% { -o-transform: scale(1); opacity: 1; }<br />
}<br />
@-ms-keyframes fadeInScale {<br />
0% { -ms-transform: scale(0.6); opacity: 0; }<br />
100% { -ms-transform: scale(1); opacity: 1; }<br />
}<br />
@keyframes fadeInScale {<br />
0% { transform: scale(0.6); opacity: 0; }<br />
100% { transform: scale(1); opacity: 1; }<br />
}<br />
x:-o-prefocus, .lb-overlay img {<br />
height: 100%;<br />
}</blockquote>
<div style="text-align: justify;">
3. Klik Terapkan ke Blog.<br />
<br />
Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada
langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template
>> Edit HTML lalu cari kode ]]></b:skin> kemudian paste
kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin>
lalu klik Simpan Template.<br />
<br />
4. Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML.</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<ul class="lb-album"><br /><li><br /><a href="#image-1"><br /><img
src="https://lh4.googleusercontent.com/-Nz0qTp7BVF8/Uc4hi8T-4kI/AAAAAAAAFKc/7_C1-KT16sM/s150-no/Thumb+%25289%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-1"><br /><img
src="https://lh5.googleusercontent.com/-MQJhOhu1czg/Uc4ho9KYlPI/AAAAAAAAFLk/eoj3t7kdY0I/w355-h533-no/foto+%25289%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-2"><br /><img
src="https://lh5.googleusercontent.com/-ZBHRH4EQEqo/Uc4hhmEMGTI/AAAAAAAAFKQ/7s2aMAf_xyg/s150-no/Thumb+%25286%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-2"><br /><img
src="https://lh3.googleusercontent.com/-EzMllaX71RY/Uc4hom4XPwI/AAAAAAAAFLg/lzkNYSjz6gw/w355-h533-no/foto+%25286%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-3"><br /><img
src="https://lh4.googleusercontent.com/-Rt2x0nITb8g/Uc4hit0x3cI/AAAAAAAAFKY/rXXHp9VqtKc/s150-no/Thumb+%25288%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-3"><br /><img
src="https://lh3.googleusercontent.com/-dUhFx_EQgEo/Uc4hoa0LQsI/AAAAAAAAFLU/laAtJkaNb3U/w387-h533-no/foto+%25288%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-4"><br /><img
src="https://lh5.googleusercontent.com/-blM_3Tz82eg/Uc4hgO_cbPI/AAAAAAAAFJg/u5Dcr8pyzD0/s150-no/Thumb+%25282%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-4"><br /><img
src="https://lh5.googleusercontent.com/-qt-vmBY1B8Q/Uc4hl-2zc1I/AAAAAAAAFK4/nykKjU_DOxU/w501-h533-no/foto+%25282%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><li><br /><a href="#image-5"><br /><img
src="https://lh4.googleusercontent.com/-gLZ6iX6b4vk/Uc4hh1N8CcI/AAAAAAAAFKE/Aslexngq5bM/s150-no/Thumb+%25287%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-5"><br /><a href="#page" class="lb-close">x Close</a><br /><img
src="https://lh3.googleusercontent.com/-e23BNJecWfA/Uc4hoPmzPrI/AAAAAAAAFLQ/Hl_iUDWMer4/s533-no/foto+%25287%2529.jpg"
alt="faceblog evolutions" /><br /><div><br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /></div><br /></li><br /><br /><li><br /><a href="#image-6"><br /><img
src="https://lh5.googleusercontent.com/-W9SMme_JQqg/Uc4hhA-cqgI/AAAAAAAAFJ0/Ae-LP2CCsE4/s150-no/Thumb+%25285%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-6"><br /><img
src="https://lh4.googleusercontent.com/-GpNSmGrUg5E/Uc4hmwRkYbI/AAAAAAAAFLE/i4qR2ruWOiU/w419-h533-no/foto+%25285%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-7"><br /><img
src="https://lh3.googleusercontent.com/-qSgyBjG2b1Y/Uc4hg4ObtJI/AAAAAAAAFJw/nFSaseN83Ng/s150-no/Thumb+%25284%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-7"><br /><img
src="https://lh5.googleusercontent.com/-yqsqSQBvIhQ/Uc4hmkypqpI/AAAAAAAAFK8/undQLLsKAxs/s533-no/foto+%25284%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-8"><br /><img
src="https://lh5.googleusercontent.com/-i_4nFXuq_34/Uc4hgF4I3QI/AAAAAAAAFJk/dv4ATYIwpO0/s150-no/Thumb+%25283%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-8"><br /><img
src="https://lh6.googleusercontent.com/-NGZhYWOmYCc/Uc4hmDlcR3I/AAAAAAAAFKs/gTWthkSUJqg/s533-no/foto+%25283%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><li><br /><span style="color: blue;"><a href="#image-9"><br /><img
src="https://lh4.googleusercontent.com/-xniba7GavXI/Uc4hgTf4UpI/AAAAAAAAFJ8/8UCcEX91kFE/s150-no/Thumb+%25281%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-9"><br /><a href="#page" class="lb-close">x Close</a><br /><img
src="https://lh6.googleusercontent.com/-iAulNQD7MSg/Uc4hl7TdlVI/AAAAAAAAFKo/XljQWntV0cs/w355-h533-no/foto+%25281%2529.jpg"
alt="faceblog evolutions" /><br /><div><br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /></div><br /></li></span><br /><span style="color: red;"></ul></span></blockquote>
<div style="text-align: justify;">
Keterangan:<br />
Ganti URL GAMBAR diatas dengan gambar lain yang di inginkan. Selanjutnya
untuk judul dan deskripsi gambar juga jangan lupa sesuaikan. Untuk
menambahkan gambar lebih banyak lagi maka caranya copy kode yang
berwarna <span style="color: blue;">biru</span>, lalu paste sebelum kode berwarna <span style="color: red;">merah.</span><br />
<br />
Tutorial di atas adalah untuk efek PINKBOX STYLE #1, untuk membuat
PINKBOX STYLE #2 dan #3 seperti pada halaman demo maka silahkan copy
kode dibawah ini dan <i><b>CARA PEMASANGANNYA SEPERTI LANGKAH DIATAS</b></i>.<br />
<br />
<b>KODE PINKBOX STYLE #2</b>
<br />
<div style="text-align: center;">
<a class="button" href="http://mas-andes.blogspot.com/p/divopacity-1filter-alphaopacity99.html" target="_blank">Demo Style #2</a></div>
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
ol,ul {list-style:none;}<br />
.lb-album{<br />
width: auto;<br />
margin: 0 auto;<br />
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;<br />
}<br />
.lb-album li{<br />
float: right;<br />
margin: 5px;<br />
position: relative;<br />
}<br />
.lb-album li > a,<br />
.lb-album li > a img{<br />
display: block;<br />
}<br />
.lb-album li > a{<br />
width: 150px;<br />
height: 150px;<br />
position: relative;<br />
padding: 10px;<br />
background: #f1d2c2;<br />
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px 4px 4px 4px;<br />
}<br />
.lb-album li > a span{<br />
position: absolute;<br />
width: 150px;<br />
height: 150px;<br />
top: 10px;<br />
left: 10px;<br />
text-align: center;<br />
line-height: 150px;<br />
color: rgba(27,54,81,0.8);<br />
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);<br />
font-size: 24px;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
background: rgb(241,210,194);<br />
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);<br />
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(255,255,255,0.56)),
color-stop(100%,rgba(241,210,194,1)));<br />
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
-webkit-transition: opacity 0.3s linear;<br />
-moz-transition: opacity 0.3s linear;<br />
-o-transition: opacity 0.3s linear;<br />
-ms-transition: opacity 0.3s linear;<br />
transition: opacity 0.3s linear;<br />
}<br />
.lb-album li > a:hover span{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
.lb-overlay{<br />
width: 0px;<br />
height: 0px;<br />
position: fixed;<br />
overflow: hidden;<br />
left: 0px;<br />
top: 0px;<br />
padding: 0px;<br />
z-index: 99;<br />
text-align: center;<br />
background: rgb(241,210,194);<br />
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);<br />
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(255,255,255,0.56)),
color-stop(100%,rgba(241,210,194,1)));<br />
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
}<br />
.lb-overlay > div{<br />
position: relative;<br />
color: rgba(27,54,81,0.8);<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
width: 550px;<br />
margin: 10px auto 0px auto;<br />
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);<br />
-webkit-transition: opacity 0.3s linear 1.3s;<br />
-moz-transition: opacity 0.3s linear 1.3s;<br />
-o-transition: opacity 0.3s linear 1.3s;<br />
-ms-transition: opacity 0.3s linear 1.3s;<br />
transition: opacity 0.3s linear 1.3s;<br />
}<br />
.lb-overlay div h3,<br />
.lb-overlay div p{<br />
padding: 0px 20px;<br />
width: 200px;<br />
height: 60px;<br />
}<br />
.lb-overlay div h3{<br />
font-size: 36px;<br />
float: left;<br />
text-align: right;<br />
border-right: 1px solid rgba(27,54,81,0.4);<br />
}<br />
.lb-overlay div h3 span,<br />
.lb-overlay div p{<br />
font-size: 16px;<br />
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;<br />
font-style: italic;<br />
}<br />
.lb-overlay div h3 span{<br />
display: block;<br />
line-height: 6px;<br />
}<br />
.lb-overlay div p{<br />
text-align: left;<br />
float: left;<br />
width: 260px;<br />
}<br />
.lb-overlay a.lb-close{<br />
background: rgba(27,54,81,0.8);<br />
z-index: 1001;<br />
color: #fff;<br />
position: absolute;<br />
top: 43px;<br />
left: 50%;<br />
font-size: 15px;<br />
line-height: 26px;<br />
text-align: center;<br />
width: 50px;<br />
height: 23px;<br />
overflow: hidden;<br />
margin-left: -25px;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
-webkit-transition: opacity 0.3s linear 1.2s;<br />
-moz-transition: opacity 0.3s linear 1.2s;<br />
-o-transition: opacity 0.3s linear 1.2s;<br />
-ms-transition: opacity 0.3s linear 1.2s;<br />
transition: opacity 0.3s linear 1.2s;<br />
}<br />
.lb-overlay img{<br />
/* height: 100%; For Opera max-height does not seem to work */<br />
max-height: 100%;<br />
position: relative;<br />
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);<br />
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);<br />
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);<br />
}<br />
.lb-overlay:target {<br />
width: auto;<br />
height: auto;<br />
bottom: 0px;<br />
right: 0px;<br />
padding: 80px 100px 120px 100px;<br />
}<br />
.lb-overlay:target img {<br />
-webkit-animation: scaleDown 1.2s ease-in-out;<br />
-moz-animation: scaleDown 1.2s ease-in-out;<br />
-o-animation: scaleDown 1.2s ease-in-out;<br />
-ms-animation: scaleDown 1.2s ease-in-out;<br />
animation: scaleDown 1.2s ease-in-out;<br />
}<br />
.lb-overlay:target a.lb-close,<br />
.lb-overlay:target > div{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
@-webkit-keyframes scaleDown {<br />
0% { -webkit-transform: scale(10,10); opacity: 0; }<br />
100% { -webkit-transform: scale(1,1); opacity: 1; }<br />
}<br />
@-moz-keyframes scaleDown {<br />
0% { -moz-transform: scale(10,10); opacity: 0; }<br />
100% { -moz-transform: scale(1,1); opacity: 1; }<br />
}<br />
@-o-keyframes scaleDown {<br />
0% { -o-transform: scale(10,10); opacity: 0; }<br />
100% { -o-transform: scale(1,1); opacity: 1; }<br />
}<br />
@-ms-keyframes scaleDown {<br />
0% { -ms-transform: scale(10,10); opacity: 0; }<br />
100% { -ms-transform: scale(1,1); opacity: 1; }<br />
}<br />
@keyframes scaleDown {<br />
0% { transform: scale(10,10); opacity: 0; }<br />
100% { transform: scale(1,1); opacity: 1; }<br />
}<br />
x:-o-prefocus, .lb-overlay img {<br />
height: 100%;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<ul class="lb-album"><br /><li><br /><a href="#image-1"><br /><img
src="https://lh4.googleusercontent.com/-Nz0qTp7BVF8/Uc4hi8T-4kI/AAAAAAAAFKc/7_C1-KT16sM/s150-no/Thumb+%25289%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-1"><br /><img
src="https://lh5.googleusercontent.com/-MQJhOhu1czg/Uc4ho9KYlPI/AAAAAAAAFLk/eoj3t7kdY0I/w355-h533-no/foto+%25289%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-2"><br /><img
src="https://lh5.googleusercontent.com/-ZBHRH4EQEqo/Uc4hhmEMGTI/AAAAAAAAFKQ/7s2aMAf_xyg/s150-no/Thumb+%25286%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-2"><br /><img
src="https://lh3.googleusercontent.com/-EzMllaX71RY/Uc4hom4XPwI/AAAAAAAAFLg/lzkNYSjz6gw/w355-h533-no/foto+%25286%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-3"><br /><img
src="https://lh4.googleusercontent.com/-Rt2x0nITb8g/Uc4hit0x3cI/AAAAAAAAFKY/rXXHp9VqtKc/s150-no/Thumb+%25288%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-3"><br /><img
src="https://lh3.googleusercontent.com/-dUhFx_EQgEo/Uc4hoa0LQsI/AAAAAAAAFLU/laAtJkaNb3U/w387-h533-no/foto+%25288%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-4"><br /><img
src="https://lh5.googleusercontent.com/-blM_3Tz82eg/Uc4hgO_cbPI/AAAAAAAAFJg/u5Dcr8pyzD0/s150-no/Thumb+%25282%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-4"><br /><img
src="https://lh5.googleusercontent.com/-qt-vmBY1B8Q/Uc4hl-2zc1I/AAAAAAAAFK4/nykKjU_DOxU/w501-h533-no/foto+%25282%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><li><br /><a href="#image-5"><br /><img
src="https://lh4.googleusercontent.com/-gLZ6iX6b4vk/Uc4hh1N8CcI/AAAAAAAAFKE/Aslexngq5bM/s150-no/Thumb+%25287%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-5"><br /><a href="#page" class="lb-close">x Close</a><br /><img
src="https://lh3.googleusercontent.com/-e23BNJecWfA/Uc4hoPmzPrI/AAAAAAAAFLQ/Hl_iUDWMer4/s533-no/foto+%25287%2529.jpg"
alt="faceblog evolutions" /><br /><div><br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /></div><br /></li><br /><br /><li><br /><a href="#image-6"><br /><img
src="https://lh5.googleusercontent.com/-W9SMme_JQqg/Uc4hhA-cqgI/AAAAAAAAFJ0/Ae-LP2CCsE4/s150-no/Thumb+%25285%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-6"><br /><img
src="https://lh4.googleusercontent.com/-GpNSmGrUg5E/Uc4hmwRkYbI/AAAAAAAAFLE/i4qR2ruWOiU/w419-h533-no/foto+%25285%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-7"><br /><img
src="https://lh3.googleusercontent.com/-qSgyBjG2b1Y/Uc4hg4ObtJI/AAAAAAAAFJw/nFSaseN83Ng/s150-no/Thumb+%25284%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-7"><br /><img
src="https://lh5.googleusercontent.com/-yqsqSQBvIhQ/Uc4hmkypqpI/AAAAAAAAFK8/undQLLsKAxs/s533-no/foto+%25284%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-8"><br /><img
src="https://lh5.googleusercontent.com/-i_4nFXuq_34/Uc4hgF4I3QI/AAAAAAAAFJk/dv4ATYIwpO0/s150-no/Thumb+%25283%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-8"><br /><img
src="https://lh6.googleusercontent.com/-NGZhYWOmYCc/Uc4hmDlcR3I/AAAAAAAAFKs/gTWthkSUJqg/s533-no/foto+%25283%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><li><br /><a href="#image-9"><br /><img
src="https://lh4.googleusercontent.com/-xniba7GavXI/Uc4hgTf4UpI/AAAAAAAAFJ8/8UCcEX91kFE/s150-no/Thumb+%25281%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-9"><br /><a href="#page" class="lb-close">x Close</a><br /><img
src="https://lh6.googleusercontent.com/-iAulNQD7MSg/Uc4hl7TdlVI/AAAAAAAAFKo/XljQWntV0cs/w355-h533-no/foto+%25281%2529.jpg"
alt="faceblog evolutions" /><br /><div><br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /></div><br /></div><br /></li><br /></ul></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE PINKBOX STYLE #3</b><br />
<div style="text-align: center;">
<a class="button" href="http://mas-andes.blogspot.com/p/blog-page_22.html" target="_blank">Demo Style #3</a></div>
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
ol,ul {list-style:none;}<br />
.lb-album{<br />
width: auto;<br />
margin: 0 auto;<br />
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;<br />
}<br />
.lb-album li{<br />
float: left;<br />
margin: 5px;<br />
position: relative;<br />
}<br />
.lb-album li > a,<br />
.lb-album li > a img{<br />
display: block;<br />
}<br />
.lb-album li > a{<br />
width: 150px;<br />
height: 150px;<br />
position: relative;<br />
padding: 10px;<br />
background: #f1d2c2;<br />
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
border-radius: 4px 4px 4px 4px;<br />
}<br />
.lb-album li > a span{<br />
position: absolute;<br />
width: 150px;<br />
height: 150px;<br />
top: 10px;<br />
left: 10px;<br />
text-align: center;<br />
line-height: 150px;<br />
color: rgba(27,54,81,0.8);<br />
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);<br />
font-size: 24px;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
background: rgb(241,210,194);<br />
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);<br />
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(255,255,255,0.56)),
color-stop(100%,rgba(241,210,194,1)));<br />
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
-webkit-transition: opacity 0.3s linear;<br />
-moz-transition: opacity 0.3s linear;<br />
-o-transition: opacity 0.3s linear;<br />
-ms-transition: opacity 0.3s linear;<br />
transition: opacity 0.3s linear;<br />
}<br />
.lb-album li > a:hover span{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
.lb-overlay{<br />
width: 0px;<br />
height: 0px;<br />
position: fixed;<br />
overflow: hidden;<br />
left: 0px;<br />
top: 0px;<br />
padding: 0px;<br />
z-index: 99;<br />
text-align: center;<br />
background: rgb(241,210,194);<br />
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);<br />
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(255,255,255,0.56)),
color-stop(100%,rgba(241,210,194,1)));<br />
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);<br />
}<br />
.lb-overlay > div{<br />
position: relative;<br />
color: rgba(27,54,81,0.8);<br />
width: 550px;<br />
height: 80px;<br />
margin: 40px auto 0px auto;<br />
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);<br />
}<br />
.lb-overlay div h3,<br />
.lb-overlay div p{<br />
padding: 0px 20px;<br />
width: 200px;<br />
height: 60px;<br />
}<br />
.lb-overlay div h3{<br />
font-size: 36px;<br />
float: left;<br />
text-align: right;<br />
border-right: 1px solid rgba(27,54,81,0.4);<br />
}<br />
.lb-overlay div h3 span,<br />
.lb-overlay div p{<br />
font-size: 16px;<br />
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;<br />
font-style: italic;<br />
}<br />
.lb-overlay div h3 span{<br />
display: block;<br />
line-height: 6px;<br />
}<br />
.lb-overlay div p{<br />
font-size: 14px;<br />
text-align: left;<br />
float: left;<br />
width: 260px;<br />
}<br />
.lb-overlay a.lb-close{<br />
background: rgba(27,54,81,0.8);<br />
z-index: 1001;<br />
color: #fff;<br />
position: absolute;<br />
top: 43px;<br />
left: 50%;<br />
font-size: 15px;<br />
line-height: 26px;<br />
text-align: center;<br />
width: 50px;<br />
height: 23px;<br />
overflow: hidden;<br />
margin-left: -25px;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);<br />
}<br />
.lb-overlay img{<br />
/* height: 100%; For Opera max-height does not seem to work */<br />
max-height: 100%;<br />
position: relative;<br />
opacity: 0;<br />
filter: alpha(opacity=0); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/<br />
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);<br />
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);<br />
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);<br />
-webkit-transition: opacity 0.5s linear;<br />
-moz-transition: opacity 0.5s linear;<br />
-o-transition: opacity 0.5s linear;<br />
-ms-transition: opacity 0.5s linear;<br />
transition: opacity 0.5s linear;<br />
}<br />
.lb-prev, .lb-next{<br />
text-indent: -9000px;<br />
position: absolute;<br />
top: -32px;<br />
width: 24px;<br />
height: 25px;<br />
left: 50%;<br />
opacity: 0.8;<br />
filter: alpha(opacity=80); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/<br />
}<br />
.lb-prev:hover, .lb-next:hover{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
.lb-prev{<br />
margin-left: -30px;<br />
background: transparent
url(https://lh4.googleusercontent.com/-dti6V32ORGY/UdIUeXCcjFI/AAAAAAAAFlI/3ryuyaMc1PM/h120/arrows.png)
no-repeat top left;<br />
}<br />
.lb-next{<br />
margin-left: 6px;<br />
background: transparent
url(https://lh4.googleusercontent.com/-dti6V32ORGY/UdIUeXCcjFI/AAAAAAAAFlI/3ryuyaMc1PM/h120/arrows.png)
no-repeat top right;<br />
}<br />
.lb-overlay:target {<br />
width: auto;<br />
height: auto;<br />
bottom: 0px;<br />
right: 0px;<br />
padding: 80px 100px 120px 100px;<br />
}<br />
.lb-overlay:target img,<br />
.lb-overlay:target a.lb-close{<br />
opacity: 1;<br />
filter: alpha(opacity=99); /* internet explorer */<br />
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/<br />
}<br />
x:-o-prefocus, .lb-overlay img {<br />
height: 100%;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<li><br /><a href="#image-2"><br /><img
src="https://lh5.googleusercontent.com/-ZBHRH4EQEqo/Uc4hhmEMGTI/AAAAAAAAFKQ/7s2aMAf_xyg/s150-no/Thumb+%25286%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-2"><br /><img
src="https://lh3.googleusercontent.com/-EzMllaX71RY/Uc4hom4XPwI/AAAAAAAAFLg/lzkNYSjz6gw/w355-h533-no/foto+%25286%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-1" class="lb-prev">Prev</a><br /><a href="#image-3" class="lb-next">Next</a><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-3"><br /><img
src="https://lh4.googleusercontent.com/-Rt2x0nITb8g/Uc4hit0x3cI/AAAAAAAAFKY/rXXHp9VqtKc/s150-no/Thumb+%25288%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-3"><br /><img
src="https://lh3.googleusercontent.com/-dUhFx_EQgEo/Uc4hoa0LQsI/AAAAAAAAFLU/laAtJkaNb3U/w387-h533-no/foto+%25288%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-2" class="lb-prev">Prev</a><br /><a href="#image-4" class="lb-next">Next</a><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-4"><br /><img
src="https://lh4.googleusercontent.com/-gLZ6iX6b4vk/Uc4hh1N8CcI/AAAAAAAAFKE/Aslexngq5bM/s150-no/Thumb+%25287%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-4"><br /><img
src="https://lh3.googleusercontent.com/-e23BNJecWfA/Uc4hoPmzPrI/AAAAAAAAFLQ/Hl_iUDWMer4/s533-no/foto+%25287%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-3" class="lb-prev">Prev</a><br /><a href="#image-5" class="lb-next">Next</a><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><li><br /><a href="#image-5"><br /><img
src="https://lh5.googleusercontent.com/-W9SMme_JQqg/Uc4hhA-cqgI/AAAAAAAAFJ0/Ae-LP2CCsE4/s150-no/Thumb+%25285%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-5"><br /><a href="#page" class="lb-close">x Close</a><br /><img
src="https://lh4.googleusercontent.com/-GpNSmGrUg5E/Uc4hmwRkYbI/AAAAAAAAFLE/i4qR2ruWOiU/w419-h533-no/foto+%25285%2529.jpg"
alt="faceblog evolutions" /><br /><div><br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-4" class="lb-prev">Prev</a><br /><a href="#image-6" class="lb-next">Next</a><br /></div><br /></div><br /></li><br /><br /><li><br /><a href="#image-6"><br /><img
src="https://lh3.googleusercontent.com/-qSgyBjG2b1Y/Uc4hg4ObtJI/AAAAAAAAFJw/nFSaseN83Ng/s150-no/Thumb+%25284%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-6"><br /><img
src="https://lh5.googleusercontent.com/-yqsqSQBvIhQ/Uc4hmkypqpI/AAAAAAAAFK8/undQLLsKAxs/s533-no/foto+%25284%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-5" class="lb-prev">Prev</a><br /><a href="#image-7" class="lb-next">Next</a><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-7"><br /><img
src="https://lh5.googleusercontent.com/-i_4nFXuq_34/Uc4hgF4I3QI/AAAAAAAAFJk/dv4ATYIwpO0/s150-no/Thumb+%25283%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-7"><br /><img
src="https://lh6.googleusercontent.com/-NGZhYWOmYCc/Uc4hmDlcR3I/AAAAAAAAFKs/gTWthkSUJqg/s533-no/foto+%25283%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-6" class="lb-prev">Prev</a><br /><a href="#image-8" class="lb-next">Next</a><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><br /><li><br /><a href="#image-8"><br /><img
src="https://lh4.googleusercontent.com/-xniba7GavXI/Uc4hgTf4UpI/AAAAAAAAFJ8/8UCcEX91kFE/s150-no/Thumb+%25281%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-8"><br /><img
src="https://lh6.googleusercontent.com/-iAulNQD7MSg/Uc4hl7TdlVI/AAAAAAAAFKo/XljQWntV0cs/w355-h533-no/foto+%25281%2529.jpg"
alt="faceblog evolutions" /><br /><div> <br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-7" class="lb-prev">Prev</a><br /><a href="#image-9" class="lb-next">Next</a><br /></div><br /><a href="#page" class="lb-close">x Close</a><br /></div><br /></li><br /><li><br /><a href="#image-9"><br /><img
src="https://lh5.googleusercontent.com/-blM_3Tz82eg/Uc4hgO_cbPI/AAAAAAAAFJg/u5Dcr8pyzD0/s150-no/Thumb+%25282%2529.jpg"
alt="faceblog evolutions" ><br /><span>JUDUL</span><br /></a><br /><div class="lb-overlay" id="image-9"><br /><a href="#page" class="lb-close">x Close</a><br /><img
src="https://lh5.googleusercontent.com/-qt-vmBY1B8Q/Uc4hl-2zc1I/AAAAAAAAFK4/nykKjU_DOxU/w501-h533-no/foto+%25282%2529.jpg"
alt="faceblog evolutions" /><br /><div><br /><h3>JUDUL</h3><br /><p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p><br /><a href="#image-8" class="lb-prev">Prev</a><br /><a href="#image-10" class="lb-next">Next</a><br /></div><br /></div><br /></li><br /></ul></blockquote>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-5080331234423798242013-07-29T15:00:00.002-07:002013-07-29T22:14:30.511-07:0010 Gallery CSS3 Image Efek Hover Pada Blog <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-oUn80gTRukE/UfblEwLZIiI/AAAAAAAAANg/4FZrMfRNYgo/s1600/Screenshot_16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="118" src="http://3.bp.blogspot.com/-oUn80gTRukE/UfblEwLZIiI/AAAAAAAAANg/4FZrMfRNYgo/s320/Screenshot_16.png" width="320" /></a></div>
1. Login ke akun blogger.<br />
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik
Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan
CSS (paste kode CSS ini didalam kolom tersebut).
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-6neuEIgKnQg/UZKJxpllidI/AAAAAAAAEWI/JUbHYNqqgWU/s1600/Script+CSS.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS3 Image Efek Hover Pada Blog" height="65" src="http://1.bp.blogspot.com/-6neuEIgKnQg/UZKJxpllidI/AAAAAAAAEWI/JUbHYNqqgWU/s320/Script+CSS.jpg" title="10 Gallery CSS3 Image Efek Hover Pada Blog" width="320" /></a></div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-first img {<br />
-webkit-transition: all 0.2s linear;<br />
-moz-transition: all 0.2s linear;<br />
-o-transition: all 0.2s linear;<br />
-ms-transition: all 0.2s linear;<br />
transition: all 0.2s linear;<br />
}<br />
.view-first .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
background-color: rgba(219,127,8, 0.7);<br />
-webkit-transition: all 0.4s ease-in-out;<br />
-moz-transition: all 0.4s ease-in-out;<br />
-o-transition: all 0.4s ease-in-out;<br />
-ms-transition: all 0.4s ease-in-out;<br />
transition: all 0.4s ease-in-out;<br />
}<br />
.view-first h2 {<br />
-webkit-transform: translateY(-100px);<br />
-moz-transform: translateY(-100px);<br />
-o-transform: translateY(-100px);<br />
-ms-transform: translateY(-100px);<br />
transform: translateY(-100px);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-first p {<br />
-webkit-transform: translateY(100px);<br />
-moz-transform: translateY(100px);<br />
-o-transform: translateY(100px);<br />
-ms-transform: translateY(100px);<br />
transform: translateY(100px);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.2s linear;<br />
-moz-transition: all 0.2s linear;<br />
-o-transition: all 0.2s linear;<br />
-ms-transition: all 0.2s linear;<br />
transition: all 0.2s linear;<br />
}<br />
.view-first:hover img {<br />
-webkit-transform: scale(1.1,1.1);<br />
-moz-transform: scale(1.1,1.1);<br />
-o-transform: scale(1.1,1.1);<br />
-ms-transform: scale(1.1,1.1);<br />
transform: scale(1.1,1.1);<br />
}<br />
.view-first a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-first:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
}<br />
.view-first:hover h2,<br />
.view-first:hover p,<br />
.view-first:hover a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
}<br />
.view-first:hover p {<br />
-webkit-transition-delay: 0.1s;<br />
-moz-transition-delay: 0.1s;<br />
-o-transition-delay: 0.1s;<br />
-ms-transition-delay: 0.1s;<br />
transition-delay: 0.1s;<br />
}<br />
.view-first:hover a.info {<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
-o-transition-delay: 0.2s;<br />
-ms-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}</blockquote>
<div style="text-align: justify;">
3. Klik Terapkan ke Blog.<br />
<br />
Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada
langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template
>> Edit HTML lalu cari kode ]]></b:skin> kemudian paste
kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin>
lalu klik Simpan Template.<br />
<br />
4. Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML.</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-first"><br />
<img
src="https://lh5.googleusercontent.com/-jUHHqU9muVY/Uc7zEGAaCvI/AAAAAAAAFVE/MhzcO223BMA/w250-h200-no/Faceblog+Evolutions+%25289%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #1</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div> <br />
<div class="view view-first"><br />
<img
src="https://lh5.googleusercontent.com/-2D81lU1dKAY/Uc7zEL_UFtI/AAAAAAAAFVA/UDnFyNU9D8c/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #1</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div> <br />
<div class="view view-first"><br />
<img
src="https://lh5.googleusercontent.com/-LGolDB4mBaI/Uc7zDkjUttI/AAAAAAAAFU4/bZEUTIX_mcY/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #1</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div> <br />
<div class="view view-first"><br />
<img
src="https://lh6.googleusercontent.com/-58FCS2lu36M/Uc7zDeV4FoI/AAAAAAAAFUs/rgJPYdso-Aw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #1</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
Keterangan:<br />
Ganti "http://digratisan.blogspot.com"<span style="color: red;"> </span>dengan URL halaman yang di inginkan. Jika sudah sesuai silahkan klik Publikasikan.<br />
<br />
Tutorial di atas adalah untuk efek HOVER STYLE 1, untuk membuat HOVER
STYLE 2 - 10 silahkan copy kode dibawah
ini dan cara pemasangannya seperti langkah diatas.<br />
<br />
<b>KODE HOVER STYLE 2</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-second img {<br />
-webkit-transition: all 0.2s ease-in;<br />
-moz-transition: all 0.2s ease-in;<br />
-o-transition: all 0.2s ease-in;<br />
-ms-transition: all 0.2s ease-in;<br />
transition: all 0.2s ease-in;<br />
}<br />
.view-second .mask {<br />
background-color: rgba(115,146,184, 0.7);<br />
width: 300px;<br />
padding: 60px;<br />
height: 300px;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: translate(265px, 145px) rotate(45deg);<br />
-moz-transform: translate(265px, 145px) rotate(45deg);<br />
-o-transform: translate(265px, 145px) rotate(45deg);<br />
-ms-transform: translate(265px, 145px) rotate(45deg);<br />
transform: translate(265px, 145px) rotate(45deg);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-second h2 {<br />
border-bottom: 1px solid rgba(0, 0, 0, 0.3);<br />
background: transparent;<br />
margin: 20px 40px 0px 40px;<br />
-webkit-transform: translate(200px, -200px);<br />
-moz-transform: translate(200px, -200px);<br />
-o-transform: translate(200px, -200px);<br />
-ms-transform: translate(200px, -200px);<br />
transform: translate(200px, -200px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-second p {<br />
-webkit-transform: translate(-200px, 200px);<br />
-moz-transform: translate(-200px, 200px);<br />
-o-transform: translate(-200px, 200px);<br />
-ms-transform: translate(-200px, 200px);<br />
transform: translate(-200px, 200px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-second a.info {<br />
-webkit-transform: translate(0px, 100px);<br />
-moz-transform: translate(0px, 100px);<br />
-o-transform: translate(0px, 100px);<br />
-ms-transform: translate(0px, 100px);<br />
transform: translate(0px, 100px);<br />
-webkit-transition: all 0.2s 0.1s ease-in-out;<br />
-moz-transition: all 0.2s 0.1s ease-in-out;<br />
-o-transition: all 0.2s 0.1s ease-in-out;<br />
-ms-transition: all 0.2s 0.1s ease-in-out;<br />
transition: all 0.2s 0.1s ease-in-out;<br />
}<br />
.view-second:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: translate(-80px, -125px) rotate(45deg);<br />
-moz-transform: translate(-80px, -125px) rotate(45deg);<br />
-o-transform: translate(-80px, -125px) rotate(45deg);<br />
-ms-transform: translate(-80px, -125px) rotate(45deg);<br />
transform: translate(-80px, -125px) rotate(45deg);<br />
}<br />
.view-second:hover h2 {<br />
-webkit-transform: translate(0px,0px);<br />
-moz-transform: translate(0px,0px);<br />
-o-transform: translate(0px,0px);<br />
-ms-transform: translate(0px,0px);<br />
transform: translate(0px,0px);<br />
-webkit-transition-delay: 0.3s;<br />
-moz-transition-delay: 0.3s;<br />
-o-transition-delay: 0.3s;<br />
-ms-transition-delay: 0.3s;<br />
transition-delay: 0.3s;<br />
}<br />
.view-second:hover p {<br />
-webkit-transform: translate(0px,0px);<br />
-moz-transform: translate(0px,0px);<br />
-o-transform: translate(0px,0px);<br />
-ms-transform: translate(0px,0px);<br />
transform: translate(0px,0px);<br />
-webkit-transition-delay: 0.4s;<br />
-moz-transition-delay: 0.4s;<br />
-o-transition-delay: 0.4s;<br />
-ms-transition-delay: 0.4s;<br />
transition-delay: 0.4s;<br />
}<br />
.view-second:hover a.info {<br />
-webkit-transform: translate(0px,0px);<br />
-moz-transform: translate(0px,0px);<br />
-o-transform: translate(0px,0px);<br />
-ms-transform: translate(0px,0px);<br />
transform: translate(0px,0px);<br />
-webkit-transition-delay: 0.5s;<br />
-moz-transition-delay: 0.5s;<br />
-o-transition-delay: 0.5s;<br />
-ms-transition-delay: 0.5s;<br />
transition-delay: 0.5s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-second"><br />
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-5_zpsdfab2705.jpg" /><br />
<div class="mask"></div><br />
<div class="content"><br />
<h2>Hover Style #2</h2><br />
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p><br />
<a href="#" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-second"><br />
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-6_zps865e274c.jpg" /><br />
<div class="mask"></div><br />
<div class="content"><br />
<h2>Hover Style #2</h2><br />
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p><br />
<a href="#" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-second"><br />
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-7_zps44576497.jpg" /><br />
<div class="mask"></div><br />
<div class="content"><br />
<h2>Hover Style #2</h2><br />
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p><br />
<a href="#" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-second"><br />
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-8_zps435d17d3.jpg" /><br />
<div class="mask"></div><br />
<div class="content"><br />
<h2>Hover Style #2</h2><br />
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p><br />
<a href="#" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 3</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-third img {<br />
-webkit-transition: all 0.2s ease-in;<br />
-moz-transition: all 0.2s ease-in;<br />
-o-transition: all 0.2s ease-in;<br />
-ms-transition: all 0.2s ease-in;<br />
transition: all 0.2s ease-in;<br />
}<br />
.view-third .mask {<br />
background-color: rgba(0,0,0,0.6);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: translate(460px, -100px) rotate(180deg);<br />
-moz-transform: translate(460px, -100px) rotate(180deg);<br />
-o-transform: translate(460px, -100px) rotate(180deg);<br />
-ms-transform: translate(460px, -100px) rotate(180deg);<br />
transform: translate(460px, -100px) rotate(180deg);<br />
-webkit-transition: all 0.2s 0.4s ease-in-out;<br />
-moz-transition: all 0.2s 0.4s ease-in-out;<br />
-o-transition: all 0.2s 0.4s ease-in-out;<br />
-ms-transition: all 0.2s 0.4s ease-in-out;<br />
transition: all 0.2s 0.4s ease-in-out;<br />
}<br />
.view-third h2 {<br />
-webkit-transform: translateY(-100px);<br />
-moz-transform: translateY(-100px);<br />
-o-transform: translateY(-100px);<br />
-ms-transform: translateY(-100px);<br />
transform: translateY(-100px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-third p {<br />
-webkit-transform: translateX(300px) rotate(90deg);<br />
-moz-transform: translateX(300px) rotate(90deg);<br />
-o-transform: translateX(300px) rotate(90deg);<br />
-ms-transform: translateX(300px) rotate(90deg);<br />
transform: translateX(300px) rotate(90deg);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-third a.info {<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-third:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
-ms-transition-delay: 0s;<br />
transition-delay: 0s;<br />
-webkit-transform: translate(0px, 0px);<br />
-moz-transform: translate(0px, 0px);<br />
-o-transform: translate(0px, 0px);<br />
-ms-transform: translate(0px, 0px);<br />
transform: translate(0px, 0px);<br />
}<br />
.view-third:hover h2 {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.5s;<br />
-moz-transition-delay: 0.5s;<br />
-o-transition-delay: 0.5s;<br />
-ms-transition-delay: 0.5s;<br />
transition-delay: 0.5s;<br />
}<br />
.view-third:hover p {<br />
-webkit-transform: translateX(0px) rotate(0deg);<br />
-moz-transform: translateX(0px) rotate(0deg);<br />
-o-transform: translateX(0px) rotate(0deg);<br />
-ms-transform: translateX(0px) rotate(0deg);<br />
transform: translateX(0px) rotate(0deg);<br />
-webkit-transition-delay: 0.4s;<br />
-moz-transition-delay: 0.4s;<br />
-o-transition-delay: 0.4s;<br />
-ms-transition-delay: 0.4s;<br />
transition-delay: 0.4s;<br />
}<br />
.view-third:hover a.info {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.3s;<br />
-moz-transition-delay: 0.3s;<br />
-o-transition-delay: 0.3s;<br />
-ms-transition-delay: 0.3s;<br />
transition-delay: 0.3s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-third"><br />
<img
src="https://lh5.googleusercontent.com/--wmsomcVxpc/Uc7y4mmgZ-I/AAAAAAAAFQo/L6XbIpGou9k/w250-h200-no/Faceblog+Evolutions+%25281%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #3</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-third"><br />
<img
src="https://lh6.googleusercontent.com/--Rm6nD0KyQQ/Uc7y4v-hAcI/AAAAAAAAFQw/6ryLdzJDXZI/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #3</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-third"><br />
<img
src="https://lh4.googleusercontent.com/-HbqBxiW5y5w/Uc7y3B6L7dI/AAAAAAAAFQc/a000TVwdkGs/w250-h200-no/Faceblog+Evolutions+%25280%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #3</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-third"><br />
<img
src="https://lh6.googleusercontent.com/-4yt-4VJjW8Y/Uc7y2w6Ui6I/AAAAAAAAFQY/TlxJR1MnKWI/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #3</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 4</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-fourth img {<br />
-webkit-transition: all 0.4s ease-in-out 0.2s;<br />
-moz-transition: all 0.4s ease-in-out 0.2s;<br />
-o-transition: all 0.4s ease-in-out 0.2s;<br />
-ms-transition: all 0.4s ease-in-out 0.2s;<br />
transition: all 0.4s ease-in-out 0.2s;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
}<br />
.view-fourth .mask {<br />
background-color: rgba(0,0,0,0.8);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: scale(0) rotate(-180deg);<br />
-moz-transform: scale(0) rotate(-180deg);<br />
-o-transform: scale(0) rotate(-180deg);<br />
-ms-transform: scale(0) rotate(-180deg);<br />
transform: scale(0) rotate(-180deg);<br />
-webkit-transition: all 0.4s ease-in;<br />
-moz-transition: all 0.4s ease-in;<br />
-o-transition: all 0.4s ease-in;<br />
-ms-transition: all 0.4s ease-in;<br />
transition: all 0.4s ease-in;<br />
-webkit-border-radius: 0px;<br />
-moz-border-radius: 0px;<br />
border-radius: 0px;<br />
}<br />
.view-fourth h2 {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
border-bottom: 1px solid rgba(0, 0, 0, 0.3);<br />
background: transparent;<br />
margin: 20px 40px 0px 40px;<br />
-webkit-transition: all 0.5s ease-in-out;<br />
-moz-transition: all 0.5s ease-in-out;<br />
-o-transition: all 0.5s ease-in-out;<br />
-ms-transition: all 0.5s ease-in-out;<br />
transition: all 0.5s ease-in-out;<br />
}<br />
.view-fourth p {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.5s ease-in-out;<br />
-moz-transition: all 0.5s ease-in-out;<br />
-o-transition: all 0.5s ease-in-out;<br />
-ms-transition: all 0.5s ease-in-out;<br />
transition: all 0.5s ease-in-out;<br />
}<br />
.view-fourth a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.5s ease-in-out;<br />
-moz-transition: all 0.5s ease-in-out;<br />
-o-transition: all 0.5s ease-in-out;<br />
-ms-transition: all 0.5s ease-in-out;<br />
transition: all 0.5s ease-in-out;<br />
}<br />
.view-fourth:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: scale(1) rotate(0deg);<br />
-moz-transform: scale(1) rotate(0deg);<br />
-o-transform: scale(1) rotate(0deg);<br />
-ms-transform: scale(1) rotate(0deg);<br />
transform: scale(1) rotate(0deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
-o-transition-delay: 0.2s;<br />
-ms-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
.view-fourth:hover img {<br />
-webkit-transform: scale(0);<br />
-moz-transform: scale(0);<br />
-o-transform: scale(0);<br />
-ms-transform: scale(0);<br />
transform: scale(0);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
-ms-transition-delay: 0s;<br />
transition-delay: 0s;<br />
}<br />
.view-fourth:hover h2,<br />
.view-fourth:hover p,<br />
.view-fourth:hover a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transition-delay: 0.5s;<br />
-moz-transition-delay: 0.5s;<br />
-o-transition-delay: 0.5s;<br />
-ms-transition-delay: 0.5s;<br />
transition-delay: 0.5s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-fourth"><br />
<img
src="https://lh4.googleusercontent.com/-Q23YEkjgYwg/Uc7y5sX7IAI/AAAAAAAAFRA/lHeqSChRXmA/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #4</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-fourth"><br />
<img
src="https://lh5.googleusercontent.com/-2NtVoOYqfio/Uc7y5fIxKYI/AAAAAAAAFRE/Oe8mxRToyv4/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #4</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-fourth"><br />
<img
src="https://lh5.googleusercontent.com/--wmsomcVxpc/Uc7y4mmgZ-I/AAAAAAAAFQo/L6XbIpGou9k/w250-h200-no/Faceblog+Evolutions+%25281%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #4</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-fourth"><br />
<img
src="https://lh6.googleusercontent.com/-BjWNJkX0VcM/Uc7y4v0JVrI/AAAAAAAAFQ0/3CDn6YWv9xw/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #4</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 5</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-fifth img {<br />
-webkit-transition: all 0.3s ease-in-out;<br />
-moz-transition: all 0.3s ease-in-out;<br />
-o-transition: all 0.3s ease-in-out;<br />
-ms-transition: all 0.3s ease-in-out;<br />
transition: all 0.3s ease-in-out;<br />
}<br />
.view-fifth .mask {<br />
background-color: rgba(146,96,91,0.3);<br />
-webkit-transform: translateX(-300px);<br />
-moz-transform: translateX(-300px);<br />
-o-transform: translateX(-300px);<br />
-ms-transform: translateX(-300px);<br />
transform: translateX(-300px);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transition: all 0.3s ease-in-out;<br />
-moz-transition: all 0.3s ease-in-out;<br />
-o-transition: all 0.3s ease-in-out;<br />
-ms-transition: all 0.3s ease-in-out;<br />
transition: all 0.3s ease-in-out;<br />
}<br />
.view-fifth h2 {<br />
background: rgba(255, 255, 255, 0.5);<br />
color: #000;<br />
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);<br />
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);<br />
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);<br />
}<br />
.view-fifth p {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
color: #333;<br />
-webkit-transition: all 0.2s linear;<br />
-moz-transition: all 0.2s linear;<br />
-o-transition: all 0.2s linear;<br />
-ms-transition: all 0.2s linear;<br />
transition: all 0.2s linear;<br />
}<br />
.view-fifth:hover .mask {<br />
-webkit-transform: translateX(0px);<br />
-moz-transform: translateX(0px);<br />
-o-transform: translateX(0px);<br />
-ms-transform: translateX(0px);<br />
transform: translateX(0px);<br />
}<br />
.view-fifth:hover img {<br />
-webkit-transform: translateX(300px);<br />
-moz-transform: translateX(300px);<br />
-o-transform: translateX(300px);<br />
-ms-transform: translateX(300px);<br />
transform: translateX(300px);<br />
}<br />
.view-fifth:hover p {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-fifth"><br />
<img
src="https://lh5.googleusercontent.com/--EKeTfdv7Uw/Uc7y6_trnwI/AAAAAAAAFRo/pLdqzBY6rr0/w250-h200-no/Faceblog+Evolutions+%252818%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #5</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-fifth"><br />
<img
src="https://lh3.googleusercontent.com/-A7deVjWQK7M/Uc7y6SXHkEI/AAAAAAAAFRU/Slm-7vfvNHI/w250-h200-no/Faceblog+Evolutions+%252817%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #5</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-fifth"><br />
<img
src="https://lh4.googleusercontent.com/-SqH0AJXZXJU/Uc7y6ef86aI/AAAAAAAAFRg/4IVEjUAXeCE/w250-h200-no/Faceblog+Evolutions+%252816%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #5</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-fifth"><br />
<img
src="https://lh5.googleusercontent.com/-VLOTDa8Mf80/Uc7y5x2vtwI/AAAAAAAAFRQ/rmb9qm7enFU/w250-h200-no/Faceblog+Evolutions+%252815%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #5</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 6</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
<br />
.view-sixth img {<br />
-webkit-transition: all 0.4s ease-in-out 0.5s;<br />
-moz-transition: all 0.4s ease-in-out 0.5s;<br />
-o-transition: all 0.4s ease-in-out 0.5s;<br />
-ms-transition: all 0.4s ease-in-out 0.5s;<br />
transition: all 0.4s ease-in-out 0.5s;<br />
}<br />
.view-sixth .mask {<br />
background-color: rgba(146,96,91,0.5);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.3s ease-in 0.4s;<br />
-moz-transition: all 0.3s ease-in 0.4s;<br />
-o-transition: all 0.3s ease-in 0.4s;<br />
-ms-transition: all 0.3s ease-in 0.4s;<br />
transition: all 0.3s ease-in 0.4s;<br />
}<br />
.view-sixth h2 {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
border-bottom: 1px solid rgba(0, 0, 0, 0.3);<br />
background: transparent;<br />
margin: 20px 40px 0px 40px;<br />
-webkit-transform: scale(10);<br />
-moz-transform: scale(10);<br />
-o-transform: scale(10);<br />
-ms-transform: scale(10);<br />
transform: scale(10);<br />
-webkit-transition: all 0.3s ease-in-out 0.1s;<br />
-moz-transition: all 0.3s ease-in-out 0.1s;<br />
-o-transition: all 0.3s ease-in-out 0.1s;<br />
-ms-transition: all 0.3s ease-in-out 0.1s;<br />
transition: all 0.3s ease-in-out 0.1s;<br />
}<br />
.view-sixth p {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: scale(10);<br />
-moz-transform: scale(10);<br />
-o-transform: scale(10);<br />
-ms-transform: scale(10);<br />
transform: scale(10);<br />
-webkit-transition: all 0.3s ease-in-out 0.2s;<br />
-moz-transition: all 0.3s ease-in-out 0.2s;<br />
-o-transition: all 0.3s ease-in-out 0.2s;<br />
-ms-transition: all 0.3s ease-in-out 0.2s;<br />
transition: all 0.3s ease-in-out 0.2s;<br />
}<br />
.view-sixth a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: translateY(100px);<br />
-moz-transform: translateY(100px);<br />
-o-transform: translateY(100px);<br />
-ms-transform: translateY(100px);<br />
transform: translateY(100px);<br />
-webkit-transition: all 0.3s ease-in-out 0.1s;<br />
-moz-transition: all 0.3s ease-in-out 0.1s;<br />
-o-transition: all 0.3s ease-in-out 0.1s;<br />
-ms-transition: all 0.3s ease-in-out 0.1s;<br />
transition: all 0.3s ease-in-out 0.1s;<br />
}<br />
.view-sixth:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
-ms-transition-delay: 0s;<br />
transition-delay: 0s;<br />
}<br />
.view-sixth:hover img {<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
-ms-transition-delay: 0s;<br />
transition-delay: 0s;<br />
}<br />
.view-sixth:hover h2 {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: scale(1);<br />
-moz-transform: scale(1);<br />
-o-transform: scale(1);<br />
-ms-transform: scale(1);<br />
transform: scale(1);<br />
-webkit-transition-delay: 0.1s;<br />
-moz-transition-delay: 0.1s;<br />
-o-transition-delay: 0.1s;<br />
-ms-transition-delay: 0.1s;<br />
transition-delay: 0.1s;<br />
}<br />
.view-sixth:hover p {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: scale(1);<br />
-moz-transform: scale(1);<br />
-o-transform: scale(1);<br />
-ms-transform: scale(1);<br />
transform: scale(1);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
-o-transition-delay: 0.2s;<br />
-ms-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
.view-sixth:hover a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.3s;<br />
-moz-transition-delay: 0.3s;<br />
-o-transition-delay: 0.3s;<br />
-ms-transition-delay: 0.3s;<br />
transition-delay: 0.3s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-sixth"><br />
<img
src="https://lh4.googleusercontent.com/-gVqHQ_SxkYg/Uc7y9OJJxdI/AAAAAAAAFSg/TTsgOmcSDeI/w250-h200-no/Faceblog+Evolutions+%252824%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #6</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-sixth"><br />
<img
src="https://lh4.googleusercontent.com/-0bZHPwVeIBc/Uc7y8kdHvhI/AAAAAAAAFSE/-E71XbBx1sM/w250-h200-no/Faceblog+Evolutions+%252821%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #6</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-sixth"><br />
<img
src="https://lh6.googleusercontent.com/-4--ixkU6lrM/Uc7y7iFN6AI/AAAAAAAAFR4/tXruvNa2s9U/w250-h200-no/Faceblog+Evolutions+%252820%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #6</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-sixth"><br />
<img
src="https://lh6.googleusercontent.com/-rMZ5WzTtwEg/Uc7y66oAbdI/AAAAAAAAFRs/ed8kzSkuKQk/w250-h200-no/Faceblog+Evolutions+%252819%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #6</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 7</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
<br />
.view-seventh img {<br />
-webkit-transition: all 0.5s ease-out;<br />
-moz-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
}<br />
.view-seventh .mask {<br />
background-color: rgba(77,44,35,0.5);<br />
-webkit-transform: rotate(0deg) scale(1);<br />
-moz-transform: rotate(0deg) scale(1);<br />
-o-transform: rotate(0deg) scale(1);<br />
-ms-transform: rotate(0deg) scale(1);<br />
transform: rotate(0deg) scale(1);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.3s ease-out;<br />
-moz-transition: all 0.3s ease-out;<br />
-o-transition: all 0.3s ease-out;<br />
-ms-transition: all 0.3s ease-out;<br />
transition: all 0.3s ease-out;<br />
}<br />
.view-seventh h2 {<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-seventh p {<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-seventh a.info {<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-moz-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
.view-seventh:hover img {<br />
-webkit-transform: rotate(720deg) scale(0);<br />
-moz-transform: rotate(720deg) scale(0);<br />
-o-transform: rotate(720deg) scale(0);<br />
-ms-transform: rotate(720deg) scale(0);<br />
transform: rotate(720deg) scale(0);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
}<br />
.view-seventh:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transform: translateY(0px) rotate(0deg);<br />
-moz-transform: translateY(0px) rotate(0deg);<br />
-o-transform: translateY(0px) rotate(0deg);<br />
-ms-transform: translateY(0px) rotate(0deg);<br />
transform: translateY(0px) rotate(0deg);<br />
-webkit-transition-delay: 0.4s;<br />
-moz-transition-delay: 0.4s;<br />
-o-transition-delay: 0.4s;<br />
-ms-transition-delay: 0.4s;<br />
transition-delay: 0.4s;<br />
}<br />
.view-seventh:hover h2 {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.7s;<br />
-moz-transition-delay: 0.7s;<br />
-o-transition-delay: 0.7s;<br />
-ms-transition-delay: 0.7s;<br />
transition-delay: 0.7s;<br />
}<br />
.view-seventh:hover p {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.6s;<br />
-moz-transition-delay: 0.6s;<br />
-o-transition-delay: 0.6s;<br />
-ms-transition-delay: 0.6s;<br />
transition-delay: 0.6s;<br />
}<br />
.view-seventh:hover a.info {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.5s;<br />
-moz-transition-delay: 0.5s;<br />
-o-transition-delay: 0.5s;<br />
-ms-transition-delay: 0.5s;<br />
transition-delay: 0.5s;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-seventh"><br />
<img
src="https://lh5.googleusercontent.com/-FSQzmOOSI5I/Uc7y9zo74II/AAAAAAAAFSk/H7V2JrThUto/w250-h200-no/Faceblog+Evolutions+%252826%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #7</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-seventh"><br />
<img
src="https://lh4.googleusercontent.com/-O1vVrn_vbko/Uc7y9k-LI4I/AAAAAAAAFSw/HaaFBEvtBpw/w250-h200-no/Faceblog+Evolutions+%252825%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #7</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-seventh"><br />
<img
src="https://lh4.googleusercontent.com/-cbuBhiD2dmc/Uc7y9BMxvRI/AAAAAAAAFSU/JfEjAXNQo5w/w250-h200-no/Faceblog+Evolutions+%252823%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #7</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-seventh"><br />
<img
src="https://lh4.googleusercontent.com/-voGVw98t2GY/Uc7y9F4ZbgI/AAAAAAAAFSQ/BmE0OhkNSBg/w250-h200-no/Faceblog+Evolutions+%252822%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #7</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 8</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
};<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-eighth .mask {<br />
background-color: rgba(255, 255, 255, 0.7);<br />
top: -200px;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transition: all 0.3s ease-out 0.5s;<br />
-moz-transition: all 0.3s ease-out 0.5s;<br />
-o-transition: all 0.3s ease-out 0.5s;<br />
-ms-transition: all 0.3s ease-out 0.5s;<br />
transition: all 0.3s ease-out 0.5s;<br />
}<br />
.view-eighth h2 {<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out 0.1s;<br />
-moz-transition: all 0.2s ease-in-out 0.1s;<br />
-o-transition: all 0.2s ease-in-out 0.1s;<br />
-ms-transition: all 0.2s ease-in-out 0.1s;<br />
transition: all 0.2s ease-in-out 0.1s;<br />
}<br />
.view-eighth p {<br />
color: #333;<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out 0.2s;<br />
-moz-transition: all 0.2s ease-in-out 0.2s;<br />
-o-transition: all 0.2s ease-in-out 0.2s;<br />
-ms-transition: all 0.2s ease-in-out 0.2s;<br />
transition: all 0.2s ease-in-out 0.2s;<br />
}<br />
.view-eighth a.info {<br />
-webkit-transform: translateY(-200px);<br />
-moz-transform: translateY(-200px);<br />
-o-transform: translateY(-200px);<br />
-ms-transform: translateY(-200px);<br />
transform: translateY(-200px);<br />
-webkit-transition: all 0.2s ease-in-out 0.3s;<br />
-moz-transition: all 0.2s ease-in-out 0.3s;<br />
-o-transition: all 0.2s ease-in-out 0.3s;<br />
-ms-transition: all 0.2s ease-in-out 0.3s;<br />
transition: all 0.2s ease-in-out 0.3s;<br />
}<br />
.view-eighth:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
top: 0px;<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
-ms-transition-delay: 0s;<br />
transition-delay: 0s;<br />
-webkit-animation: bounceY 0.9s linear;<br />
-moz-animation: bounceY 0.9s linear;<br />
-ms-animation: bounceY 0.9s linear;<br />
animation: bounceY 0.9s linear;<br />
}<br />
.view-eighth:hover h2 {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.4s;<br />
-moz-transition-delay: 0.4s;<br />
-o-transition-delay: 0.4s;<br />
-ms-transition-delay: 0.4s;<br />
transition-delay: 0.4s;<br />
}<br />
.view-eighth:hover p {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
-o-transition-delay: 0.2s;<br />
-ms-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
.view-eighth:hover a.info {<br />
-webkit-transform: translateY(0px);<br />
-moz-transform: translateY(0px);<br />
-o-transform: translateY(0px);<br />
-ms-transform: translateY(0px);<br />
transform: translateY(0px);<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
-ms-transition-delay: 0s;<br />
transition-delay: 0s;<br />
}<br />
@keyframes bounceY {<br />
0% { transform: translateY(-205px);}<br />
40% { transform: translateY(-100px);}<br />
65% { transform: translateY(-52px);}<br />
82% { transform: translateY(-25px);}<br />
92% { transform: translateY(-12px);}<br />
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}<br />
}<br />
@-moz-keyframes bounceY {<br />
0% { -moz-transform: translateY(-205px);}<br />
40% { -moz-transform: translateY(-100px);}<br />
65% { -moz-transform: translateY(-52px);}<br />
82% { -moz-transform: translateY(-25px);}<br />
92% { -moz-transform: translateY(-12px);}<br />
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}<br />
}<br />
@-webkit-keyframes bounceY {<br />
0% { -webkit-transform: translateY(-205px);}<br />
40% { -webkit-transform: translateY(-100px);}<br />
65% { -webkit-transform: translateY(-52px);}<br />
82% { -webkit-transform: translateY(-25px);}<br />
92% { -webkit-transform: translateY(-12px);}<br />
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-eighth"><br />
<img
src="https://lh4.googleusercontent.com/-4H852cIiwtA/Uc7y_pMzvqI/AAAAAAAAFTU/oRUUq8A2oks/w250-h200-no/Faceblog+Evolutions+%252830%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #8</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-eighth"><br />
<img
src="https://lh4.googleusercontent.com/-JTnIq4_LJzM/Uc7y_LhBZMI/AAAAAAAAFTQ/5asgqt-7-wQ/w250-h200-no/Faceblog+Evolutions+%252829%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #8</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-eighth"><br />
<img
src="https://lh4.googleusercontent.com/-Z0xIE5wimcU/Uc7y-QAwvhI/AAAAAAAAFTA/PSdT-QdGLOc/w250-h200-no/Faceblog+Evolutions+%252827%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #8</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-eighth"><br />
<img
src="https://lh3.googleusercontent.com/-RAxF89A-Ufs/Uc7y-dK3saI/AAAAAAAAFS0/M6XHI2cebwc/w250-h200-no/Faceblog+Evolutions+%252828%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #8</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 9</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-ninth .mask-1, .view-ninth .mask-2 {<br />
background-color: rgba(0, 0, 0, 0.5);<br />
height: 361px;<br />
width: 361px;<br />
background: rgba(119, 0, 36, 0.5);<br />
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
-webkit-transition: all 0.3s ease-in-out 0.6s;<br />
-moz-transition: all 0.3s ease-in-out 0.6s;<br />
-o-transition: all 0.3s ease-in-out 0.6s;<br />
transition: all 0.3s ease-in-out 0.6s;<br />
}<br />
.view-ninth .mask-1 {<br />
left: auto;<br />
right: 0;<br />
-webkit-transform: rotate(56.5deg) translateX(-180px);<br />
-moz-transform: rotate(56.5deg) translateX(-180px);<br />
-o-transform: rotate(56.5deg) translateX(-180px);<br />
-ms-transform: rotate(56.5deg) translateX(-180px);<br />
transform: rotate(56.5deg) translateX(-180px);<br />
-webkit-transform-origin: 100% 0%;<br />
-moz-transform-origin: 100% 0%;<br />
-o-transform-origin: 100% 0%;<br />
-ms-transform-origin: 100% 0%;<br />
transform-origin: 100% 0%;<br />
}<br />
.view-ninth .mask-2 {<br />
top: auto;<br />
bottom: 0;<br />
-webkit-transform: rotate(56.5deg) translateX(180px);<br />
-moz-transform: rotate(56.5deg) translateX(180px);<br />
-o-transform: rotate(56.5deg) translateX(180px);<br />
-ms-transform: rotate(56.5deg) translateX(180px);<br />
transform: rotate(56.5deg) translateX(180px);<br />
-webkit-transform-origin: 0% 100%;<br />
-moz-transform-origin: 0% 100%;<br />
-o-transform-origin: 0% 100%;<br />
-ms-transform-origin: 0% 100%;<br />
transform-origin: 0% 100%;<br />
}<br />
.view-ninth .content {<br />
background: rgba(0, 0, 0, 0.9);<br />
height: 0;<br />
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";<br />
filter: alpha(opacity=50);<br />
opacity: 0.5;<br />
width: 361px;<br />
overflow: hidden;<br />
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);<br />
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);<br />
-o-transform: rotate(-33.5deg) translate(-112px, 166px);<br />
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);<br />
transform: rotate(-33.5deg) translate(-112px, 166px);<br />
-webkit-transform-origin: 0% 100%;<br />
-moz-transform-origin: 0% 100%;<br />
-o-transform-origin: 0% 100%;<br />
-ms-transform-origin: 0% 100%;<br />
transform-origin: 0% 100%;<br />
-webkit-transition: all 0.4s ease-in-out 0.3s;<br />
-moz-transition: all 0.4s ease-in-out 0.3s;<br />
-o-transition: all 0.4s ease-in-out 0.3s;<br />
transition: all 0.4s ease-in-out 0.3s;<br />
}<br />
.view-ninth h2 {<br />
background: transparent;<br />
margin-top: 5px;<br />
border-bottom: 1px solid rgba(255, 255, 255, 0.2);<br />
}<br />
.view-ninth a.info {<br />
display: none;<br />
}<br />
.view-ninth:hover .content {<br />
height: 120px;<br />
width: 250px;<br />
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";<br />
filter: alpha(opacity=90);<br />
opacity: 0.9;<br />
top: 40px;<br />
-webkit-transform: rotate(0deg) translate(0, 0);<br />
-moz-transform: rotate(0deg) translate(0, 0);<br />
-o-transform: rotate(0deg) translate(0, 0);<br />
-ms-transform: rotate(0deg) translate(0, 0);<br />
transform: rotate(0deg) translate(0, 0);<br />
}<br />
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {<br />
-webkit-transition-delay: 0s;<br />
-moz-transition-delay: 0s;<br />
-o-transition-delay: 0s;<br />
transition-delay: 0s;<br />
}<br />
.view-ninth:hover .mask-1 {<br />
-webkit-transform: rotate(56.5deg) translateX(1px);<br />
-moz-transform: rotate(56.5deg) translateX(1px);<br />
-o-transform: rotate(56.5deg) translateX(1px);<br />
-ms-transform: rotate(56.5deg) translateX(1px);<br />
transform: rotate(56.5deg) translateX(1px);<br />
}<br />
.view-ninth:hover .mask-2 {<br />
-webkit-transform: rotate(56.5deg) translateX(-1px);<br />
-moz-transform: rotate(56.5deg) translateX(-1px);<br />
-o-transform: rotate(56.5deg) translateX(-1px);<br />
-ms-transform: rotate(56.5deg) translateX(-1px);<br />
transform: rotate(56.5deg) translateX(-1px);<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-ninth"><br />
<img
src="https://lh3.googleusercontent.com/-AVPCfyk6cGw/Uc7zA7yhp4I/AAAAAAAAFT8/4KfCGB1jzyo/w250-h200-no/Faceblog+Evolutions+%252834%2529.jpg"
/><br />
<div class="mask mask-1"></div><br />
<div class="mask mask-2"></div><br />
<div class="content"><br />
<h2>Hover Style #9</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-ninth"><br />
<img
src="https://lh6.googleusercontent.com/-l2ZAUT6seKY/Uc7zASX6BVI/AAAAAAAAFTs/jvDgt3ukbKI/w250-h200-no/Faceblog+Evolutions+%252832%2529.jpg"
/><br />
<div class="mask mask-1"></div><br />
<div class="mask mask-2"></div><br />
<div class="content"><br />
<h2>Hover Style #9</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-ninth"><br />
<img
src="https://lh6.googleusercontent.com/-8ADsQIpjUUU/Uc7zASzOo1I/AAAAAAAAFTo/WPVjcXhPDIg/w250-h200-no/Faceblog+Evolutions+%252833%2529.jpg"
/><br />
<div class="mask mask-1"></div><br />
<div class="mask mask-2"></div><br />
<div class="content"><br />
<h2>Hover Style #9</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-ninth"><br />
<img
src="https://lh6.googleusercontent.com/-DM7g0RKZDvk/Uc7y_81Uc_I/AAAAAAAAFTg/7TEAfmsEXwU/w250-h200-no/Faceblog+Evolutions+%252831%2529.jpg"
/><br />
<div class="mask mask-1"></div><br />
<div class="mask mask-2"></div><br />
<div class="content"><br />
<h2>Hover Style #9</h2><br />
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="text-align: justify;">
<br />
<b>KODE HOVER STYLE 10</b><br />
CSS</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.view {<br />
width: 250px;<br />
height: 200px;<br />
margin: 5px;<br />
float: left;<br />
border: 10px solid #fff;<br />
overflow: hidden;<br />
position: relative;<br />
text-align: center;<br />
-webkit-box-shadow: 1px 1px 2px #e6e6e6;<br />
-moz-box-shadow: 1px 1px 2px #e6e6e6;<br />
box-shadow: 1px 1px 2px #e6e6e6;<br />
cursor: default;<br />
background: #fff
url(https://lh5.googleusercontent.com/-T6Z75oahrFY/Uc7zE0RrElI/AAAAAAAAFVQ/s_ACLnKmPfE/w300-h200-no/bgimg.jpg)
no-repeat center center;<br />
}<br />
.view .mask,.view .content {<br />
width: 250px;<br />
height: 200px;<br />
position: absolute;<br />
overflow: hidden;<br />
top: 0;<br />
left: 0;<br />
}<br />
.view img {<br />
display: block;<br />
position: relative;<br />
}<br />
.view h2 {<br />
text-transform: uppercase;<br />
color: #fff;<br />
text-align: center;<br />
position: relative;<br />
font-size: 17px;<br />
padding: 10px;<br />
background: rgba(0, 0, 0, 0.8);<br />
margin: 20px 0 0 0;<br />
}<br />
.view p {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
font-size: 12px;<br />
position: relative;<br />
color: #fff;<br />
padding: 10px 20px 20px;<br />
text-align: center;<br />
}<br />
.view a.info {<br />
display: inline-block;<br />
text-decoration: none;<br />
padding: 7px 14px;<br />
background: #000;<br />
color: #fff;<br />
text-transform: uppercase;<br />
-webkit-box-shadow: 0 0 1px #000;<br />
-moz-box-shadow: 0 0 1px #000;<br />
box-shadow: 0 0 1px #000;<br />
}<br />
.view a.info: hover {<br />
-webkit-box-shadow: 0 0 5px #000;<br />
-moz-box-shadow: 0 0 5px #000;<br />
box-shadow: 0 0 5px #000;<br />
}<br />
.view-tenth img {<br />
-webkit-transform: scaleY(1);<br />
-moz-transform: scaleY(1);<br />
-o-transform: scaleY(1);<br />
-ms-transform: scaleY(1);<br />
transform: scaleY(1);<br />
-webkit-transition: all 0.7s ease-in-out;<br />
-moz-transition: all 0.7s ease-in-out;<br />
-o-transition: all 0.7s ease-in-out;<br />
-ms-transition: all 0.7s ease-in-out;<br />
transition: all 0.7s ease-in-out;<br />
}<br />
.view-tenth .mask {<br />
background-color: rgba(255, 231, 179, 0.3);<br />
-webkit-transition: all 0.5s linear;<br />
-moz-transition: all 0.5s linear;<br />
-o-transition: all 0.5s linear;<br />
-ms-transition: all 0.5s linear;<br />
transition: all 0.5s linear;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
}<br />
.view-tenth h2 {<br />
border-bottom: 1px solid rgba(0, 0, 0, 0.3);<br />
background: transparent;<br />
margin: 20px 40px 0px 40px;<br />
-webkit-transform: scale(0);<br />
-moz-transform: scale(0);<br />
-o-transform: scale(0);<br />
-ms-transform: scale(0);<br />
transform: scale(0);<br />
color: #333;<br />
-webkit-transition: all 0.5s linear;<br />
-moz-transition: all 0.5s linear;<br />
-o-transition: all 0.5s linear;<br />
-ms-transition: all 0.5s linear;<br />
transition: all 0.5s linear;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
}<br />
.view-tenth p {<br />
color: #333;<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: scale(0);<br />
-moz-transform: scale(0);<br />
-o-transform: scale(0);<br />
-ms-transform: scale(0);<br />
transform: scale(0);<br />
-webkit-transition: all 0.5s linear;<br />
-moz-transition: all 0.5s linear;<br />
-o-transition: all 0.5s linear;<br />
-ms-transition: all 0.5s linear;<br />
transition: all 0.5s linear;<br />
}<br />
.view-tenth a.info {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
-webkit-transform: scale(0);<br />
-moz-transform: scale(0);<br />
-o-transform: scale(0);<br />
-ms-transform: scale(0);<br />
transform: scale(0);<br />
-webkit-transition: all 0.5s linear;<br />
-moz-transition: all 0.5s linear;<br />
-o-transition: all 0.5s linear;<br />
-ms-transition: all 0.5s linear;<br />
transition: all 0.5s linear;<br />
}<br />
.view-tenth:hover img {<br />
-webkit-transform: scale(10);<br />
-moz-transform: scale(10);<br />
-o-transform: scale(10);<br />
-ms-transform: scale(10);<br />
transform: scale(10);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
}<br />
.view-tenth:hover .mask {<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
}<br />
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {<br />
-webkit-transform: scale(1);<br />
-moz-transform: scale(1);<br />
-o-transform: scale(1);<br />
-ms-transform: scale(1);<br />
transform: scale(1);<br />
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";<br />
filter: alpha(opacity=100);<br />
opacity: 1;<br />
}</blockquote>
<div style="text-align: justify;">
HTML</div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
<div class="view view-tenth"><br />
<img
src="https://lh5.googleusercontent.com/-JSHuhVmJ490/Uc7zCJsCnwI/AAAAAAAAFUo/am0yWUBrhI4/w250-h200-no/Faceblog+Evolutions+%252838%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #10</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-tenth"><br />
<img
src="https://lh6.googleusercontent.com/-exOStwUFAyw/Uc7zB2gYpBI/AAAAAAAAFUI/kN0vMw-WCnQ/w250-h200-no/Faceblog+Evolutions+%252837%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #10</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-tenth"><br />
<img
src="https://lh3.googleusercontent.com/-jKxj2Js5YXI/Uc7zB32xoEI/AAAAAAAAFUM/8MB6eAnxugM/w250-h200-no/Faceblog+Evolutions+%252836%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #10</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div><br />
<div class="view view-tenth"><br />
<img
src="https://lh3.googleusercontent.com/-jJaalI9BYqM/Uc7zA3otk3I/AAAAAAAAFT4/oE3xqCfp4OM/w250-h200-no/Faceblog+Evolutions+%252835%2529.jpg"
/><br />
<div class="mask"><br />
<h2>Hover Style #10</h2><br />
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p><br />
<a href="http://digratisan.blogspot.com/" class="info">Read More</a><br />
</div><br />
</div></blockquote>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-67926224678900493672013-07-29T14:24:00.001-07:002013-07-29T14:24:19.781-07:00Membuat Tab Vertikal Accordion Dengan CSS3 di Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="title_holder">
<h1 class="post-title">
<br />
</h1>
</div>
<div class="post-body">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-6QG4YqbccAs/UWuipRPBSsI/AAAAAAAAECE/boF4Syl3ueo/s1600/vertikal-accordion.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" border="0" height="263" src="http://1.bp.blogspot.com/-6QG4YqbccAs/UWuipRPBSsI/AAAAAAAAECE/boF4Syl3ueo/s320/vertikal-accordion.gif" title="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" width="320" /></a></div>
<div style="text-align: justify;">
<b>Membuat Tab Vertikal Accordion Dengan CSS3 di Blog</b> – jika pada pembahasan yang sebelumnya sudah membahas tentang cara membuat tab horisontal accordion maka kurang lengkap rasanya apabila kita tidak membahas mengenai tab vertikal accordion menggunakan kode CSS.</div>
<a href="http://www.blogger.com/null" name="more"></a><div style="text-align: justify;">
Fitur dari tab vertikal accordion ini semuanya sama dengan yang ada pada
tab horisontal accordion, hanya saja pada tab vertikal accordion ini
berbentuk melebar kebawah saat hover. Tab vertikal accordion ini
memiliki beragam fungsi, tergantung dari apa yang dikehendaki dan di
inginkan tentunya yang sesuai dengan kebutuhan blog. Fitur yang
sederhana dan ramping membuat tab vertikal accordion ini menjadi lebih
terkesan minimalis namun apa daya jika setelah terpasang di blog malah
menjadi tampilan dinamis. Untuk itu, maka berikut adalah tutorial
langkah-langkah tentang cara <b>Membuat Tab Vertikal Accordion Dengan CSS3 di Blog</b>:</div>
<div style="text-align: center;">
</div>
1. Login ke akun blogger.<br />
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode CSS didalam kolom tersebut).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-O2j10Usa5Rc/UWui4AvQ3AI/AAAAAAAAECM/3jFdsmLXCrY/s1600/Kolom-kode-CSS.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" border="0" height="81" src="http://2.bp.blogspot.com/-O2j10Usa5Rc/UWui4AvQ3AI/AAAAAAAAECM/3jFdsmLXCrY/s400/Kolom-kode-CSS.jpg" title="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" width="400" /></a></div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.verticalaccordion>ul {<br />
margin: 0;<br />
padding: 0;<br />
list-style:none;<br />
width: 500px;<br />
}<br />
<br />
.verticalaccordion>ul>li {<br />
display:block;<br />
overflow: hidden;<br />
margin: 0;<br />
padding: 0;<br />
list-style:none;<br />
height:40px;<br />
width: 500px;<br />
<br />
/* Decorative CSS */<br />
background-color:#f0f0f0;<br />
<br />
/* CSS3 Transition Effect */<br />
transition: height 0.3s ease-in-out;<br />
-moz-transition: height 0.3s ease-in-out;<br />
-webkit-transition: height 0.3s ease-in-out;<br />
-o-transition: height 0.3s ease-in-out;<br />
<br />
}<br />
<br />
.verticalaccordion>ul>li>h3 {<br />
display:block;<br />
margin: 0;<br />
padding:10px;<br />
height:19px;<br />
<br />
/* Decorative CSS */<br />
border-top:#f0f0f0 1px solid;<br />
font-family: Arial, Helvetica, sans-serif;<br />
text-decoration:none;<br />
text-transform:uppercase;<br />
color: #000;<br />
background: #cccccc;<br />
<br />
/* CSS3 Gradient Effect */<br />
background: -moz-linear-gradient( top, #999999, #cccccc);<br />
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br />
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */<br />
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */<br />
}<br />
<br />
.verticalaccordion>ul>li>div {<br />
margin:0;<br />
overflow: auto;<br />
padding:10px;<br />
height:220px;<br />
}<br />
<br />
.verticalaccordion>ul>li:hover {<br />
height: 280px;<br />
}<br />
<br />
.verticalaccordion:hover>ul>li:hover>h3 {<br />
/* Decorative CSS */<br />
color:#fff;<br />
background: #000000;<br />
<br />
/* CSS3 Gradient Effect */<br />
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br />
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br />
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */<br />
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */<br />
}<br />
<br />
.verticalaccordion>ul>li>h3:hover {<br />
cursor:pointer;</blockquote>
<div style="text-align: justify;">
3. Klik Terapkan ke Blog.<br />
<br />
Selanjutnya apabila akan menampilkan Tab Vertikal Accordion Dengan CSS3
ini kedalam postingan maka langkahnya adalah saat posting menggunakan
mode HTML kemudian masukan kode dibawah ini:</div>
<blockquote class="tr_bq">
<div class="verticalaccordion"><br />
<ul><br />
<li><br />
<h3><span style="color: red;">Heading 1</span></h3><br />
<div> <span style="color: blue;">Kolom isi konten untuk Panel 1 </span></div><br />
</li><br />
<li><br />
<h3><span style="color: red;">Heading 2</span></h3><br />
<div> <span style="color: blue;">Kolom isi konten untuk Panel 2</span> </div><br />
</li><br />
<li><br />
<h3><span style="color: red;">Heading 3</span></h3><br />
<div> <span style="color: blue;">Kolom isi konten untuk Panel 3</span> </div><br />
</li><br />
<li><br />
<h3><span style="color: red;">Heading 4</span></h3><br />
<div> <span style="color: blue;">Kolom isi konten untuk Panel 4</span> </div><br />
</li><br />
</ul><br />
</div></blockquote>
<div style="text-align: justify;">
Keterangan:<br />
<ul>
<li>Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan judul yang disukai.</li>
<li>Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan konten sesuai keinginan.</li>
<li>Apabila ingin ditampilkan sebagai widget maka langkahnya seperti
biasa, klik Tata Letak > Tambah Widget > HTML/JavaScript kemudian
paste kode yang ada diatas tersebut pada kolom yang tersedia.</li>
</ul>
</div>
</div>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-5696460751020601542013-07-29T14:22:00.003-07:002013-07-29T14:22:23.232-07:00Membuat Tab Horisontal Accordion Dengan CSS3 di Blog <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-NCav3D2Bv28/UWsk2v_HelI/AAAAAAAAEB4/zSymOq3Vzko/s1600/horisontal-accordion.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" border="0" height="191" src="http://3.bp.blogspot.com/-NCav3D2Bv28/UWsk2v_HelI/AAAAAAAAEB4/zSymOq3Vzko/s320/horisontal-accordion.gif" title="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" width="320" /></a></div>
<div style="text-align: justify;">
<b>Membuat Tab Horisontal Accordion Dengan CSS3 di Blog</b> – sebuah
fitur yang simple mudah didapatkan untuk membuat blog menjadi lebih
variatif. Dengan menggunakan kode CSS tab horisontal accordion yang
sederhana ini siap dipasang untuk digunakan kedalam blog bagi yang
berminat.</div>
<a href="http://www.blogger.com/null" name="more"></a><div style="text-align: justify;">
Layout dengan menampilkan warna silver sebagai warna utama dan warna
hitam sebagai warna hover. Saat hover pula akan menampilkan panel yang
muncul secara otomatis tanpa harus di klik dan konten akan terlihat
secara halus nampak dari sebelah kiri akan menjadi melebar kesebelah
kanan. Untuk melihat seperti apa previewnya, silahkan bisa dilihat pada
halaman demo dengan klik tombol yang ada dibawah. Apabila setelah
melihat halaman demo mungkin timbul minat untuk memasangnya kedalam
blog, maka berikut adalah tutorial untuk cara <b>Membuat Tab Horisontal Accordion Dengan CSS3 di Blog</b>:</div>
<div style="text-align: center;">
</div>
1. Login ke akun blogger.<br />
2. Copy kode dibawah ini, kemudian klik Template > Sesuaikan >
Tingkat Lanjut > Tambahkan CSS (paste kode di kolom CSS tersebut).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-rFv4wGxUGsY/UWshhg4bQhI/AAAAAAAAEB0/1LtGNVwfKGU/s1600/Kolom-kode-CSS.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" border="0" height="81" src="http://4.bp.blogspot.com/-rFv4wGxUGsY/UWshhg4bQhI/AAAAAAAAEB0/1LtGNVwfKGU/s400/Kolom-kode-CSS.jpg" title="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" width="400" /></a></div>
<blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">
.horizontalaccordion>ul {<br />
margin: 0;<br />
padding: 0;<br />
list-style:none;<br />
height: 300px;<br />
}<br />
<br />
.horizontalaccordion>ul>li {<br />
display:block;<br />
overflow: hidden;<br />
float:left;<br />
margin: 0;<br />
padding: 0;<br />
list-style:none;<br />
width:40px;<br />
height: 300px;<br />
<br />
/* Decorative CSS */<br />
background:#f0f0f0;<br />
<br />
/* CSS3 Transitions */<br />
transition: width 0.3s ease-in-out;<br />
-moz-transition: width 0.3s ease-in-out;<br />
-webkit-transition: width 0.3s ease-in-out;<br />
-o-transition: width 0.3s ease-in-out;<br />
}<br />
<br />
.horizontalaccordion>ul>li>h3 {<br />
display:block;<br />
float:left;<br />
margin: 0;<br />
padding:10px;<br />
height:19px;<br />
width:280px;<br />
<br />
/* Decorative CSS */<br />
border-left:#f0f0f0 1px solid;<br />
font-family: Arial, Helvetica, sans-serif;<br />
text-decoration:none;<br />
text-transform:uppercase;<br />
color: #000;<br />
background:#cccccc;<br />
<br />
/* CSS3 Transform Rotate & Translate */<br />
white-space:nowrap;<br />
-moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */<br />
-moz-transform-origin: 0 100%;<br />
-o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */<br />
-o-transform-origin: 0 100%;<br />
-webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */<br />
-webkit-transform-origin: 0 100%;<br />
transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */<br />
transform-origin: 0 100%;<br />
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0); /* IE6,IE7 */<br />
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */<br />
<br />
/* CSS3 Gradient Effect */<br />
background: -moz-linear-gradient( top, #999999, #cccccc);<br />
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br />
}<br />
<br />
.horizontalaccordion>ul>li>div {<br />
display:none;<br />
float:left;<br />
overflow: auto;<br />
position:relative;<br />
top:-40px;<br />
left:40px;<br />
*top:0px; /* IE7 Hack */<br />
*left:0px; /* IE7 Hack */<br />
margin:0;<br />
width:320px;<br />
height:280px;<br />
padding:10px;<br />
}<br />
<br />
.horizontalaccordion>ul>li:hover {<br />
overflow: hidden;<br />
width: 380px;<br />
}<br />
<br />
.horizontalaccordion:hover>ul>li:hover>h3 {<br />
/* Decorative CSS */<br />
color:#fff;<br />
background:#000000;<br />
<br />
/* CSS3 Gradient Effect */<br />
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br />
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br />
}<br />
<br />
.horizontalaccordion:hover>ul>li:hover>div {<br />
display:block;<br />
}<br />
<br />
.horizontalaccordion>ul>li>h3:hover {<br />
cursor:pointer;<br />
}</blockquote>
<div style="text-align: justify;">
3. Klik Terapkan ke Blog.<br />
<br />
Selanjutnya apabila akan menampilkan Tab Horisontal Accordion Dengan
CSS3 ini kedalam postingan maka langkahnya adalah saat posting
menggunakan mode HTML kemudian masukan kode dibawah ini:</div>
<blockquote class="tr_bq">
<div class="horizontalaccordion"><br />
<ul><br />
<li><br />
<h3><span style="color: red;">Heading 1</span></h3><br />
<div><span style="color: blue;">Kolom isi konten untuk Panel 1</span></div><br />
</li><br />
<li><br />
<h3><span style="color: red;">Heading 2</span></h3><br />
<div><span style="color: blue;">Kolom isi konten untuk Panel 2</span></div><br />
</li><br />
<li><br />
<h3><span style="color: red;">Heading 3</span></h3><br />
<div><span style="color: blue;">Kolom isi konten untuk Panel 3</span></div><br />
</li><br />
<li><br />
<h3><span style="color: red;">Heading 4</span></h3><br />
<div><span style="color: blue;">Kolom isi konten untuk Panel 4</span></div><br />
</li><br />
</ul><br />
</div></blockquote>
<div style="text-align: justify;">
Keterangan:</div>
<ul style="text-align: justify;">
<li>Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan judul yang disukai.</li>
<li>Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan konten sesuai keinginan.</li>
<li>Apabila ingin ditampilkan sebagai widget maka langkahnya seperti
biasa, klik Tata Letak > Tambah Widget > HTML/JavaScript kemudian
paste kode yang ada diatas tersebut pada kolom yang tersedia.</li>
</ul>
</div>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
</div>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-33170161448471816512013-07-28T10:18:00.001-07:002013-07-28T10:18:43.470-07:00Mengaktifkan Threaded Comments Pada Custom Templates Blogger <a href="http://lh6.ggpht.com/-iRBDWuKbvTw/T1_vbw0j_2I/AAAAAAAAB-c/5TP5NMWTsEY/s1600-h/Treaded%252520Comment%25255B10%25255D.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img align="right" alt="Treaded Comment" border="0" height="204" src="http://lh6.ggpht.com/-GZc1WSd9sBc/T1_viUApYFI/AAAAAAAAB-k/69NRg11cOYo/Treaded%252520Comment_thumb%25255B8%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Treaded Comment" width="393" /></a>Alhamdulillah belum lama ini blogger/blogspot hadir dengan fitur baru <strong>threaded comments,</strong>
sehingga memudahkan pengunjung atau pembaca dan pemilik blog saling
berbalas komentar dengan tampilan daftar komentar berurutan kebawah
sesuai yang ditanggapi. Kalau sebelumnya kita hanya menggunakan simbol @
untuk membalas komentar seseorang, juga harus menggunakan cara manual <strong>menambahkan tombol reply komentar</strong> dan <strong>menambahkan fungsi reply komentar</strong> seperti yang pernah saya ketengahkan triknya pada kesempatan sebelumnya<strong>.</strong> <br />
Namun saat ini fitur threaded comment hanya aktif di template resmi blogger sedangkan pada custom
templates atau template template yang disediakan oleh pihak ketiga
kebanyakannya fitur ini belum berfungsi sehingga harus kita aktifkan
dulu. Nah berikut <em><strong>tutorial cara mengaktifkan threaded comments pada custom templates blogger</strong></em>.<br />
<span class="fullpost"> 1. Sign in ke account blogger anda<br />
2. Pilih rancangan>> Perancangan template>> Edit HTML>> Centang Expand Template Widget<br />
Untuk anda dengan antar muka baru blogger pilih template>> Edit
HTML>> Lanjutkan>> Centang Expand Template Widget<br />
Kemudian cari kode berikut <br />
<blockquote>
<b:include data='post' name='comments'/><br />
</blockquote>
*Untuk memudahkan pencarian silahkan gunakan Ctrl F kemudian masukkan pada kolom search kode tadi<br />
3.
Setelah anda menemukan kode diatas yang bisa jadi terdapat 3 atau 4
kode yang sama, kemudian ganti semua kode itu dengan kode berikut<br />
<blockquote>
<b:if cond='data:post.showThreadedComments'><br />
<b:include data='post' name='threaded_comments'/><br />
<b:else/><br />
<b:include data='post' name='comments'/><br />
</b:if><br />
</blockquote>
4. Setelah semua kode no 2 diganti dengan kode nomor 3, silahkan save atau simpan template anda!</span>Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-52883416812295256282013-07-28T10:15:00.001-07:002013-07-28T10:15:52.347-07:00Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3 <div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Q_MhVekLhlE/UfVRpXLof2I/AAAAAAAAANA/s36TjduCN_E/s1600/Screenshot_14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-Q_MhVekLhlE/UfVRpXLof2I/AAAAAAAAANA/s36TjduCN_E/s1600/Screenshot_14.png" /></a></div>
<br />
Baiklah sekarang <strong>cara membuat efek spinning pada icons social bookmark</strong><br />
<strong><span style="color: blue; font-family: Bernard MT Condensed; font-size: small;">Langkah Pertama</span></strong><br />
<ul>
<li>Login ke akun anda </li>
<li>Pada dasbor>> klik template>> edit HTML </li>
<li>Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin> </li>
</ul>
<blockquote>
div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */<br />
-moz-transition: all 0.8s ease-in-out;<br />
-webkit-transition: all 0.8s ease-in-out;<br />
-o-transition: all 0.8s ease-in-out;<br />
-ms-transition: all 0.8s ease-in-out;<br />
transition: all 0.8s ease-in-out;<br />
}<br />
div#socialicons1 img:hover{<br />
-moz-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
-o-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */<br />
-moz-transition: all 0.2s ease-in-out;<br />
-webkit-transition: all 0.2s ease-in-out;<br />
-o-transition: all 0.2s ease-in-out;<br />
-ms-transition: all 0.2s ease-in-out;<br />
transition: all 0.2s ease-in-out;<br />
}<br />
div#socialicons2 img:hover{<br />
-moz-transform: rotate(70deg);<br />
-webkit-transform: rotate(70deg);<br />
-o-transform: rotate(70deg);<br />
-ms-transform: rotate(70deg);<br />
transform: rotate(70deg);<br />
}<br />
div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */<br />
}<br />
div#socialicons3 img:hover{ <br />
-moz-transition: all 0.5s ease-in-out;<br />
-webkit-transition: all 0.5s ease-in-out;<br />
-o-transition: all 0.5s ease-in-out;<br />
-ms-transition: all 0.5s ease-in-out;<br />
transition: all 0.5s ease-in-out;<br />
-moz-transform: rotate(-360deg);<br />
-webkit-transform: rotate(-360deg);<br />
-o-transform: rotate(-360deg);<br />
-ms-transform: rotate(-360deg);<br />
transform: rotate(-360deg); }<br />
</blockquote>
<ul>
<li>Simpan template </li>
</ul>
<span style="color: blue; font-family: Bernard MT Condensed; font-size: small;"><strong>Langkah Kedua</strong></span><br />
<ul>
<li>Pada dasbor masuk ke menu tataletak>> klik tambah gadget>> pilih HTML/JavaScript </li>
<li>Sekarang salin dan tempel kode berikut pada form yang tersedia dan beri judul yang anda inginkan </li>
</ul>
<blockquote>
<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda --><br />
<a href="<span style="color: blue;">http://urlanda.com/RSS</span>"><img border="0" src="<span style="color: blue;">http://1.bp.blogspot.com/-aFoaagR_vc0/Tv3m_2_OLBI/AAAAAAAABm8/MEmujyAi4Ag/s1600/rss.png"</span> /></a> <a href="<span style="color: blue;">http://www.delicious.com/delicious-ID</span>"><img border="0" src="<span style="color: blue;">http://4.bp.blogspot.com/-ZUhz4ru6RBs/Tv3m_X4XuYI/AAAAAAAABmo/6LQ4IolE0W0/s1600/delicious.png</span>" /></a> <a href="<span style="color: blue;">http://www.facebook.com/FB-ID</span>"><img border="0" src="<span style="color: blue;">http://4.bp.blogspot.com/-qWEX1j-tXHA/Tv3m_u0aWII/AAAAAAAABm0/AwN9Qkkl-Us/s1600/facebook.png</span>" /></a> <a href="<span style="color: blue;">http://www.twitter.com/twitter-ID</span>"><img border="0" src="<span style="color: blue;">http://2.bp.blogspot.com/-tyZhlZfCKjQ/Tv3m_0e3ovI/AAAAAAAABnM/MjE8VOFkO7M/s1600/twitter.png</span>" /></a> <a href="<span style="color: blue;">http://www.yahoo.com/ID</span>"><img border="0" src="<span style="color: blue;">http://1.bp.blogspot.com/-x4DBFqxf3Jo/Tv3nAadEdNI/AAAAAAAABnY/Q3onklhZIEc/s1600/yahoo.png</span>" /></a></div><br />
<div class="clear"><br />
</div><br />
</blockquote>
<ul>
<li>Simpan dan lihat hasilnya diblog anda </li>
</ul>
Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0tag:blogger.com,1999:blog-5174812592040657259.post-70762800257168818792013-07-28T10:11:00.001-07:002013-07-28T10:11:25.517-07:00Cara Menambahkan Widget Popular Posts Blogger Pada Blog <br />
<br />
<strong><img align="left" alt="Popular Posts Thumbnail default Blogger" border="0" height="316" src="http://lh5.ggpht.com/-n2dNPjL0htk/UKFBlwPkApI/AAAAAAAACaU/EkeRvnZNiMw/Popular%252520Posts%252520Thumbnail%252520default%252520Blogger.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; float: left; margin: 3px 4px 4px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Popular Posts Thumbnail default Blogger" width="199" /></strong><br />
<strong></strong><br />
<strong>Widget popular posts</strong> menurut saya adalah widget penting yang harus ada pada suatu blog. Fungsi atau keuntungan yang akan didapatkan dengan <strong>menampilakan widget popular posts pada blog</strong>
selain untuk mengetahui postingan blog apa saja yang paling popular
berdasarkan banyaknya total tayang baik perminggu, perbulan atau setiap
waktu juga sebagai promo pada visitor untuk mengundang klik dan
penambahan page view. <br />
Banyak versi <strong>widget popular posts </strong>yang hadir dari hasil modifikasi baik dari penambahan script atau CSS. Selain <strong>widget popular posts berdasarkan banyaknya page view</strong> ada juga <strong>widget popular posts berdasarkan total comments atau jumlah komentar,</strong>
jadi postingan yang paling banyak memiliki jumlah komentarlah yang
akan menjadi popular posts. InsyaAllah saya akan mengetengahkan satu
persatu pada postingan yang terjadwal setiap modifikasi dari <strong>widget popular posts berdasarkan page view maupun total comments</strong> yang sudah pernah saya terapkan pada berbagai template blogger atau blog saya.<br />
Baiklah segera ke tutorial:<br />
<span class="fullpost"> <strong><span style="color: blue; font-family: Bernard MT Condensed; font-size: small;">Cara Menambahkan Widget Popular Posts Pada Blog</span></strong><br />
<ul>
<li><span style="color: black; font-family: Times New Roman; font-size: small;">Login keakun anda pada dasbor pilih tata letak >> Tambah gadget</span> </li>
</ul>
<img alt="Tambah Gadget" border="0" height="38" src="http://lh4.ggpht.com/-v0aNCMjgJWI/UKFBr-17MsI/AAAAAAAACYc/Qw3-GcLr2lQ/Tambah-Gadget_thumb.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Tambah Gadget" width="244" /><br />
<ul>
<li><span style="color: black; font-family: Times New Roman; font-size: small;">Pilih gadget seperti image berikut:</span> </li>
</ul>
<img alt="Popular Posts Widget" border="0" height="58" src="http://lh4.ggpht.com/-BfilO5aug6A/UKFBwoUQD6I/AAAAAAAACYs/DPOOsneeD4s/Popular-Posts-Widget_thumb.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Popular Posts Widget" width="244" /><br />
<ul>
<li><span style="font-family: Times New Roman; font-size: small;">Konfigurasikan widget popular posts anda</span> </li>
</ul>
<img alt="Konfigurasi Widget Popular Posts" border="0" height="244" src="http://lh5.ggpht.com/-nobY8Rbc6w8/UKFB25KUhWI/AAAAAAAACY8/IxJ4QaX9L1c/Konfigurasi-Widget-Popular-Posts_thu.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Konfigurasi Widget Popular Posts" width="235" /><br />
<ul>
<li><span style="font-family: Times New Roman; font-size: small;">Simpan dan lihat hasilnya pada blog</span> </li>
</ul>
</span>Yuga irgihttp://www.blogger.com/profile/01591598232942745887noreply@blogger.com0