Trik Optimasi Meta Tag SEO Valid HTML5

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWwwZ1H4SQdNaHZAwS3vz70SQj7hRj7iUp7BvIDryTdDSbr4l2eO9oLoFsMDjrZG0HK2SHdIh61P4RvQfhc04VEp9hG3NG-pC0pvqHafK3ydYAmsSiIIjJ-nI2zY6ZJV6dAQKpuQRk0E/s1600/meta-tag-seo-valid-html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tag SEO HTML5" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWwwZ1H4SQdNaHZAwS3vz70SQj7hRj7iUp7BvIDryTdDSbr4l2eO9oLoFsMDjrZG0HK2SHdIh61P4RvQfhc04VEp9hG3NG-pC0pvqHafK3ydYAmsSiIIjJ-nI2zY6ZJV6dAQKpuQRk0E/s320/meta-tag-seo-valid-html5.jpg" title="Trik Optimasi Meta Tag SEO Valid HTML5" width="320" /></a></div><div style="text-align: justify;"><b>Trik Optimasi Meta Tag SEO Valid HTML5</b> – dalam sebuah web atau blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO dari sebuah web atau blog itu sendiri agar lebih ramah search engine. Meta tag sendiri terdapat banyak macam dan bervariasi yang tentunya setiap blog juga berbeda-beda. Untuk melakukan optimasi SEO tentunya tidak hanya dilakukan dengan satu cara, melainkan banyak trik yang perlu dilakukan untuk membuat sebuah blog agar lebih SEO Friendly untuk mendekati search engine agar bisa memprioritaskan blog kita pada halaman utamanya. Untuk memulai hal itu maka sedikit trik sederhana ini mungkin bisa sedikit membantu tentang cara optimasi sebuah template blog dengan menggunakan meta tag yang lebih SEO dan khususnya valid HTML5. Hal ini juga tentunya untuk sedikit mengurangi kesalahan eror yang terdapat pada template blog yang anda gunakan jika di cek pada W3C Validator dan masih terdapat kesalahan eror pada meta tag. Untuk mengurangi kesalahan eror tersebut setidaknya bisa meminimalisir banyaknya eror yang sudah ada dari sebelumnya, maka kode yang terdapat dibawah paling tidak bisa memberi anda menjadi sedikit lebih lega dan bisa mengatasi timbulnya eror yang terjadi pada meta tag. Walopun keberadaan meta tag sekarang mungkin kurang disenangi oleh search engine, namun meta tag sendiri masih bisa digunakan untuk fungsi lain yang salah satunya yaitu untuk memberikan informasi dari sebuah web atau blog itu sendiri kepada pengunjung elektronik untuk berbagai tujuan. Oleh sebab itu jika diantara ada yang masih menggunakan menggunakan meta tag dan belum valid akan HTML5 sekiranya akan membuat sedikit perubahan mengenai penampilan meta tag pada templte blog yang anda gunakan, maka berikut adalah tata cara sederhana tentang <b>Trik Optimasi Meta Tag SEO Valid HTML5</b> untuk memaksimalkan potensi SEO blog yang anda kelola.<br /><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini.</div><blockquote class="tr_bq"><meta charset='utf-8'/><br /><link href='http://nama-blog.blogspot.com' rel='canonical'/><br /><b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title><br /></b:if><br /><meta content='DESKRIPSI BLOG ANDA' name='description'/><br /><meta content='KEYWORD1, KEYWORD2, KEYWORD3' name='keywords'/><br /><meta content='index, follow' name='robots'/><br /><meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/><br /><meta content='KODE VERIFIKASI BING' name='msvalidate.01'/><br /><meta content=KODE VERIFIKASI ALEXA' name='alexaVerifyID'/><br /><meta content='2 days' name='revisit-after'/><br /><meta content='general' name='rating'/><br /><meta content='id' name='geo.country'/><br /><meta content='Indonesia' name='geo.placename'/><br /><meta content='NAMA AUTHOR' name='author'/><br /><meta content='all' name='Slurp'/><br /><meta content='width=device-width' name='viewport'/><br /><link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/><br /><link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/><br /><link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/><br /><link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/><br /><link href='http://nama-blog.blogspot.com' rel='openid.delegate'/></blockquote><div style="text-align: justify;">3. Kemudian klik Template >> Edit HTML lalu paste kode tersebut diantara kode:</div><blockquote class="tr_bq"><span style="color: red;"><b><head></b></span><br /><br /><b>Disini letak kode diatas</b><br /><br /><span style="color: red;"><b><b:skin><![CDATA[</b></span></blockquote><div style="text-align: justify;">4. Sehingga tampilan kode secara lengkap akan menjadi seperti dibawah ini:</div><blockquote class="tr_bq"><span style="color: red;"><b><head></b></span><br /><meta charset='utf-8'/><br /><link href='http://nama-blog.blogspot.com' rel='canonical'/><br /><b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title><br /></b:if><br /><meta content='DESKRIPSI BLOG ANDA' name='description'/><br /><meta content='KEYWORD1, KEYWORD2, KEYWORD3' name='keywords'/><br /><meta content='index, follow' name='robots'/><br /><meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/><br /><meta content='KODE VERIFIKASI BING' name='msvalidate.01'/><br /><meta content=KODE VERIFIKASI ALEXA' name='alexaVerifyID'/><br /><meta content='2 days' name='revisit-after'/><br /><meta content='general' name='rating'/><br /><meta content='id' name='geo.country'/><br /><meta content='Indonesia' name='geo.placename'/><br /><meta content='NAMA AUTHOR' name='author'/><br /><meta content='all' name='Slurp'/><br /><meta content='width=device-width' name='viewport'/><br /><link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/><br /><link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/><br /><link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/><br /><link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/><br /><link href='http://nama-blog.blogspot.com' rel='openid.delegate'/><br /><span style="color: red;"><b><b:skin><![CDATA[</b></span></blockquote><div style="text-align: justify;">Bahwa dengan menggunakan <b>Trik Optimasi Meta Tag SEO Valid HTML5</b> ini bukan berarti jaminan untuk blog anda akan selalu berada di page one serp google maupun search engine populer lainnya. Melainkan ini hanya salah satu upaya untuk lebih mementingkan optimasi SEO dan membuat meta tag pada template blog yang sekarang anda gunakan agar valid HTML5.</div>

Trik Optimasi Meta Tag SEO Valid HTML5 – dalam sebuah web atau blog fungsi meta tag tentu sangat pen…

Read More

Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxjyFC1ufzds6B5a0hvznTKJlfw42AeLJs7jIyVbZSht1mTCcZ-tWczhvYBX1Xn4tsQUEyAV7H9F5H2T1uQ_ww0aWeOV1yDxZjP7VlfSg3Wg7vguLqsybgHB4oKUdj7oCJzunBjTvDWA/s1600/Kredensial-OpenID-Anda-Tidak-Dapat-di-Verifikasi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Kredensial OpenID Anda Tidak Dapat di Verifikasi" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxjyFC1ufzds6B5a0hvznTKJlfw42AeLJs7jIyVbZSht1mTCcZ-tWczhvYBX1Xn4tsQUEyAV7H9F5H2T1uQ_ww0aWeOV1yDxZjP7VlfSg3Wg7vguLqsybgHB4oKUdj7oCJzunBjTvDWA/s320/Kredensial-OpenID-Anda-Tidak-Dapat-di-Verifikasi.jpg" title="Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi" width="320" /></a></div><div style="text-align: justify;"><b>Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi</b> – tentu sudah tidak asing lagi masalah ini dikalangan blogger yang terbiasa berkomentar menggunakan OpenID. Walaupun masalah sepele namun terkadang hal ini terasa menyebalkan saat akan berkomentar pada sebuah blog yang berpagerank tinggi dan ingin menggunakan OpenID namun pada akhirnya muncul pesan peringatan OpenID anda tidak dapat di verifikasi. Sangat disayangkan tentunya jika anda sedang menjumpai blog dofollow berpagerank tinggi dan anda ingin menanam backlink disana dengan meninggalkan <a href="http://mas-andes.blogspot.com/2012/12/cara-membuat-kolom-komentar-blog-auto.html" target="_blank" title="cara membuat kolom komentar blog auto hide">komentar </a>namun pada form komentar yang tersedia tidak menyediakan komentar menggunakan Name/URL, biasanya langkah yang sebagai penggantinya adalah menggunakan OpenID namun apadaya jika menggunakan OpenID yang anda gunakan ternyata tidak dapat di verifikasi. Untuk mengatasi hal tersebut maka dengan trik ini anda bisa mengatasi hal itu dengan mudah dan tidak perlu lagi khawatir akan masalah sepele ini akan muncul pada saat anda akan berkomentar di blog orang lain. Caranya sangat sederhana, hanya dengan menambahkan sedikit kode pada template blog yang anda gunakan maka langsung kelar sudah masalah yang sedang anda alami dalam hal berkomentar menggunakan OpenID blog yang anda gunakan. Hal ini juga pernah saya alami, dan dari hari ke hari lama-lama ternyata juga membuat rasa penasaran bagaimana bisa hal ini bisa terus-terusan terjadi pada saat akan meninggalkan <a href="http://mas-andes.blogspot.com/2012/11/menggabungkan-3-kotak-komentar-blogger.html" target="_blank" title="cara menggabungkan 3 kotak komentar blogger facebook dan twitter">komentar </a>namun selalu pesan peringat kredensial selalu muncul. Oleh sebab itu jika hal serupa juga anda alami maka tidak perlu khawatir lagi akan hal ini, dan bisa anda buang jauh rasa kesal yang melanda sampai saat ini karena hal ini bisa di atasi dengan mudah dan singkat. Supaya lebih efektif maka berikut adalah <b>Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi</b> supaya dapat berfungsi kembali.<br /><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini.</div><blockquote class="tr_bq"><link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/><br /><link href='http://mas-andes.blogspot.com' rel='openid.delegate'/></blockquote><div style="text-align: justify;">Keterangan:<br />Ganti 'http://mas-andes.blogspot.com' dengan URL blog anda.<br /><br />3. Selanjutnya klik Template >> Edit HTML lalu paste kode tersebut dibawah kode <span style="color: red;"><head></span> atau bisa juga paste diatas kode <span style="color: red;"><b:skin></span> kemudian Simpan Template. <br /><br />Maka setelah anda simpan, pada saat anda akan berkomentar menggunakan OpenID sekarang sudah bisa berfungsi kembali dan bisa kembali berkomentar mengguankan OpenID tanpa muncul pesan peringatan <b>Kredensial OpenID Anda Tidak Dapat di Verifikasi</b>.</div>

Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi – tentu sudah tidak asing lagi masal…

Read More

Membuat Widget Animasi Recent Comment di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISr-NUF2jUMD_Xn3a55yucsyy1-oPVjt59eWIFzT-YaKXI_Fvzud3QjyldBKoeIjsd3Ya3RotXuGaJt-U_dDOIl805ERgIOqqda9yKBN6pL2Ny9SxMtfol0RU4lEreZATIF6H4udRKTk/s1600/widget-recent-comment.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Recent Comment Animasi Blog" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISr-NUF2jUMD_Xn3a55yucsyy1-oPVjt59eWIFzT-YaKXI_Fvzud3QjyldBKoeIjsd3Ya3RotXuGaJt-U_dDOIl805ERgIOqqda9yKBN6pL2Ny9SxMtfol0RU4lEreZATIF6H4udRKTk/s320/widget-recent-comment.gif" title="Membuat Widget Animasi Recent Comment di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Widget Animasi Recent Comment di Blog</b> – tentu sudah tidak asing mengenai widget ini di blog. Widget yang digunakan oleh mayoritas blogger untuk menampilkan komentar terakhir pada halaman blognya. Widget recent comment dengan thumbnail ini sangat cocok tentunya untuk melengkapi <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" target="_blank" title="membuat sidebar blog dengan efek ribbon">sidebar </a>atau bisa juga di footer blog dengan dilengkapi efek animasi hover dan sangat serasi untuk mempercantik desain blog. Untuk memasang widget recent comment sangat mudah tentunya, tinggal copy kode yang terdapat dibawah lalu paste pada HTML widget yang tersedia. Sebagaimana mestinya tergantung dari selera yang di inginkan, banyaknya komentar yang ingin ditampilkan pada widget recent comment bisa di atur dengan mudah sehingga bisa seminimal mungkin agar tidak memakan banyak ruang. Untuk melihat hasilnya terlebih dahulu bisa dilihat pada demo yang terdapat dibawah. Sedangkan untuk menerapkan kedalam blog, berikut adalah tutorial cara <b>Membuat Widget Animasi Recent Comment di Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini.</div><blockquote class="tr_bq" style="height: 250px; overflow: auto; padding: 10px;"><style type="text/css"><br />ul.btt_recent_comments {<br />    list-style: none;<br />    margin: 0;<br />    padding: 0;<br />}<br />.btt_recent_comments li {<br />    -webkit-transition: .5s;<br />    -moz-transition: .5s;<br />    -ms-transition: .5s;<br />    -o-transition: .5s;<br />    transition: .5s;<br />    border: 2px solid transparent;<br />}<br />.btt_recent_comments li:hover {<br />    -webkit-transform: scale(1.2) translate(15px);<br />    -moz-transform: scale(1.2) translate(15px);<br />    -ms-transform: scale(1.2) translate(15px);<br />    -o-transform: scale(1.2) translate(15px);<br />    transform: scale(1.2) translate(15px);<br />    box-shadow: 0 0 20px 1px #aaa;}<br />.btt_recent_comments li {<br />    background: none!important;<br />    margin: 5px!important;<br />    padding: 5px!important;<br />    display: block;<br />    clear: both;<br />    overflow: hidden;<br />    list-style: none;<br />}<br />.btt_recent_comments li .avatarImage {<br />    padding: 3px;<br />    background: #fefefe;<br />    -webkit-box-shadow: 0 1px 1px #ccc;<br />    -moz-box-shadow: 0 1px 1px #ccc;<br />    box-shadow: 0 1px 1px #ccc;<br />    float: left;<br />    margin: 0 6px 0 0;<br />    position: relative;<br />    overflow: hidden;<br />}<br />.avatarRound {<br />    -webkit-border-radius: 100px;<br />    -moz-border-radius: 100px;<br />    border-radius: 100px;<br />}<br />.btt_recent_comments li img {<br />    padding: 0;<br />    position: relative;<br />    overflow: hidden;<br />    display: block;<br />}<br />.btt_recent_comments li span {<br />    margin-top: 3px;<br />    color: #666;<br />    display: block;<br />    font-size: 12px;<br />    line-height: 1.4;<br />}<br /></style><br /><script type="text/javascript"><br />//<![CDATA[<br />    // Recent Comments Settings<br />    var<br /> <span style="color: red;">numComments  = 5</span>,<br /> showAvatar  = true,<br /> avatarSize  = 45,<br /> roundAvatar = true,<br /> characters  = 40,<br /> showMorelink = false,<br /> moreLinktext = "More ?",<br /> defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYJgjWztfUQOY6-gV4Z2BIRea896gtmcVcbr-0YP0U-jmWTu5VAMVX_XPL13i8ymJNczCwpEFYWUxW03PaY7u1ZbBt_gqHNfimA15BXaNYc9o2uw7FpivPKql6rnziwcttDNk3ZYL-Z11E/s320/avatar.png",<br /> hideCredits = true;<br />//]]><br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))<br />//]]><br /></script><br /><script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=10" type="text/javascript"></script></blockquote><div style="text-align: justify;">Keterangan:<br />Ganti <span style="color: red;">numComments  = 5</span> untuk mengatur jumlah komentar yang ingin ditampilkan.<br /><br />3. Klik Tata Letak >> HTML/Javascript selanjutnya paste kode disitu lalu klik Simpan.</div><br />DEMO:<br /><br /> <style type="text/css">ul.btt_recent_comments { list-style: none; margin: 0; padding-left: 40px; width:400px; } .btt_recent_comments li { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; border: 2px solid transparent; } .btt_recent_comments li:hover { -webkit-transform: scale(1.2) translate(15px); -moz-transform: scale(1.2) translate(15px); -ms-transform: scale(1.2) translate(15px); -o-transform: scale(1.2) translate(15px); transform: scale(1.2) translate(15px); box-shadow: 0 0 20px 1px #aaa;} .btt_recent_comments li { background: none!important; margin: 5px!important; padding: 5px!important; display: block; clear: both; overflow: hidden; list-style: none; } .btt_recent_comments li .avatarImage { padding: 3px; background: #fefefe; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } .avatarRound { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .btt_recent_comments li img { padding: 0; position: relative; overflow: hidden; display: block; } .btt_recent_comments li span { margin-top: 3px; color: #666; display: block; font-size: 12px; line-height: 1.4; } </style><script type="text/javascript">//<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 45, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More ?", defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYJgjWztfUQOY6-gV4Z2BIRea896gtmcVcbr-0YP0U-jmWTu5VAMVX_XPL13i8ymJNczCwpEFYWUxW03PaY7u1ZbBt_gqHNfimA15BXaNYc9o2uw7FpivPKql6rnziwcttDNk3ZYL-Z11E/s320/avatar.png", hideCredits = true; //]]></script><script type='text/javascript'>//<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{})) //]]></script><script src="/feeds/comments/default?alt=json&callback=btt_recent_comments&max-results=5" type="text/javascript"></script><br /><br />

Membuat Widget Animasi Recent Comment di Blog – tentu sudah tidak asing mengenai widget ini di blog.…

Read More

jQuery Fold Image Hover With CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNj1_Elp3MDSg4jDuRKfXYUBDMPQOYprwT5lNqLicoH3IWskrtWGacK7jV-YCxmlRjs4m0f6SRT-ZdkbvH-MPHNB16OAa1vgPwlu8CPBTENSHoo9qCSZl8atjrMGEzfxZvt0vrCVgLnU/s1600/flod-image-hover.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Flod Image Hover" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNj1_Elp3MDSg4jDuRKfXYUBDMPQOYprwT5lNqLicoH3IWskrtWGacK7jV-YCxmlRjs4m0f6SRT-ZdkbvH-MPHNB16OAa1vgPwlu8CPBTENSHoo9qCSZl8atjrMGEzfxZvt0vrCVgLnU/s320/flod-image-hover.jpg" title="jQuery Flod Image Hover With CSS3" width="320" /></a></div><div style="text-align: justify;"><b>jQuery Flod Image Hover With CSS3</b> - fold image hover merupakan sebuah efek pada gambar yang nantinya jika gambar tersebut tersentuh oleh mouse atau hover maka akan memiliki efek fold atau melipat sehingga membentuk 3D. Pada tutorial ini terdapat 5 style hover yang nantinya dapat kita masukan untuk membentuk efek pada gambar yang terdapat didalam <a href="http://mas-andes.blogspot.com/2013/03/7-tips-membuat-posting-blog-shareable.html" target="_blank" title="tips membuat posting blog shareable">posting blog</a> dan bisa kita tampilkan langsung tanpa perlu edit HTML maupun menambahkan kode pada template blog. Sebenarnya langkah ini jauh lebih mudah daripada terlebih dahulu kita memasukan kode kedalam template blog, namun kelemahannya jika kita cek di validatorW3 ternyata langkah tersebut bisa digunakan namun tidak valid HTML5 yang pada akhirnya menambah jumlah eror yang terdapat didalam URL blog yang kita kelola dan setiap akan menerapkan efek ini maka harus memasukan seluruh kode lengkap antara jQuery, CSS dan HTML kedalam postingan. Sedangkan jika kode CSSnya terlebih dahulu kita masukan kedalam template blog nantinya kode HTML yang akan kita masukan kedalam template blog agar bisa valid HTML5 dapat kita ubah atau sesuaikan namun langkah ini mungkin kurang disenangi karena sedikit akan memperlambat loading blog jika banyak kode yang nantinya kita masukan kedalam template blog. Begitulah penjelasan singkatnya mengenai flod image hover, jadi untuk mempersingkat langkah penerapannya kita gunakan yang mudah saja. Maka berikut adalah tutorial <b>jQuery Fold Image Hover With CSS3</b> dan cara penerapannya kedalam blog.<br /><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini, lalu paste kedalam area posting mode HTML.<br /><br />EFEK 1</div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;"><style><br />.efek1{<br />position: relative;<br />overflow: hidden;    <br />-webkit-box-sizing: content-box;<br />-moz-box-sizing: content-box;<br />box-sizing: content-box;<br />}<br />.view {<br />width: 300px;<br />height: 200px;<br />margin: 10px;<br />float: left;<br />position: relative;<br />border: 8px solid #52e052;<br />box-shadow: 1px 1px 2px #52e052;<br />background: #333;<br />-webkit-perspective: 500px;<br />-moz-perspective: 500px;<br />-o-perspective: 500px;<br />-ms-perspective: 500px;<br />perspective: 500px;<br />}<br />.view .slice{<br />width: 60px;<br />height: 100%;<br />z-index: 100;    <br />-webkit-transform-style: preserve-3d;<br />-moz-transform-style: preserve-3d;<br />-o-transform-style: preserve-3d;<br />-ms-transform-style: preserve-3d;<br />transform-style: preserve-3d;    <br />-webkit-transform-origin: left center;<br />-moz-transform-origin: left center;<br />-o-transform-origin: left center;<br />-ms-transform-origin: left center;<br />transform-origin: left center;    <br />-webkit-transition: -webkit-transform 150ms ease-in-out;<br />-moz-transition: -moz-transform 150ms ease-in-out;<br />-o-transition: -o-transform 150ms ease-in-out;<br />-ms-transition: -ms-transform 150ms ease-in-out;<br />transition: transform 150ms ease-in-out;        <br />}<br />.view div.view-back{<br />width: 50%;<br />height: 100%;<br />position: absolute;<br />right: 0;<br />background: #666;<br />z-index: 0;<br />}<br />.view-back span {<br />display: block;<br />float: right;<br />padding: 5px 20px 5px;<br />width: 100%;<br />text-align: right;<br />font-size: 16px;<br />color: rgba(255,255,255,0.6);<br />}<br /><br />.view-back span:first-child {    padding-top: 20px; }<br />.view-back a {<br />display: bock;<br />font-size: 18px;<br />color: rgba(255,255,255,0.4);<br />position: absolute;<br />right: 15px;<br />bottom: 15px;<br />border: 2px solid rgba(255,255,255,0.3);<br />border-radius: 50%;<br />width: 30px;<br />height: 30px;<br />line-height: 22px;<br />text-align: center;<br />font-weight: 700;<br />}<br />.view-back a:hover {<br />color: #fff;<br />border-color: #fff;<br />}<br />.view .s2, <br />.view .s3, <br />.view .s4, <br />.view .s5 {<br />-webkit-transform: translate3d(60px,0,0);<br />-moz-transform: translate3d(60px,0,0);<br />-o-transform: translate3d(60px,0,0);<br />-ms-transform: translate3d(60px,0,0);<br />transform: translate3d(60px,0,0);<br />}<br />.view .s1 {    background-position: 0px 0px; }<br />.view .s2 { background-position: -60px 0px; }<br />.view .s3 {    background-position: -120px 0px; }<br />.view .s4 {    background-position: -180px 0px; }<br />.view .s5 {    background-position: -240px 0px; }<br />.view .overlay {<br />width: 60px;<br />height: 100%;<br />opacity: 0;<br />position: absolute;<br />-webkit-transition: opacity 150ms ease-in-out;<br />-moz-transition: opacity 150ms ease-in-out;<br />-o-transition: opacity 150ms ease-in-out;<br />-ms-transition: opacity 150ms ease-in-out;<br />transition: opacity 150ms ease-in-out;<br />}<br />.view:hover .overlay {    opacity: 1; }<br />.view img {<br />position: absolute;<br />z-index: 0;<br />-webkit-transition: left 0.3s ease-in-out;<br />-o-transition: left 0.3s ease-in-out;<br />-moz-transition: left 0.3s ease-in-out;<br />-ms-transition: left 0.3s ease-in-out;<br />transition: left 0.3s ease-in-out;<br />}<br />.view:hover .s2{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);<br />}<br />.view:hover .s3, <br />.view:hover .s5{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);<br />}<br />.view:hover .s4{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);<br />}<br />.view .s1 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view .s2 > .overlay {<br />background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />}<br />.view .s3 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />}<br />.view .s4 > .overlay {<br />background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view .s5 > .overlay {<br />background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />}<br /></style><br /><br /><div id="grid" class="efek1"><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-21_zps7451f736.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-23_zps441a2254.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-27_zps50ae6694.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-28_zpsab0e98d4.jpg" /><br /></div><br /></div><br /><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script> <br /><script type="text/javascript">    <br />Modernizr.load({<br />test: Modernizr.csstransforms3d && Modernizr.csstransitions,<br />yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],<br />nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',<br />callback : function( url, result, key ) {<br />if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {<br />$( '#grid' ).hoverfold();<br />}<br />}<br />});<br /></script></blockquote><div style="text-align: center;"><a href="http://mas-andes.blogspot.com/p/div-position-absolute-webkit-transform.html" target="_blank" class="button">DEMO</a><br /><br /></div>EFEK 2 <blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;"><style><br />.efek2{<br />position: relative;<br />overflow: hidden;    <br />-webkit-box-sizing: content-box;<br />-moz-box-sizing: content-box;<br />box-sizing: content-box;<br />}<br />.view {<br />width: 300px;<br />height: 200px;<br />margin: 10px;<br />float: left;<br />position: relative;<br />border: 8px solid #52e052;<br />box-shadow: 1px 1px 2px rgba(0,0,0,0.05);<br />background: #333;<br />-webkit-perspective: 500px;<br />-moz-perspective: 500px;<br />-o-perspective: 500px;<br />-ms-perspective: 500px;<br />perspective: 500px;<br />}<br />.view .slice{<br />width: 60px;<br />height: 100%;<br />z-index: 100;    <br />-webkit-transform-style: preserve-3d;<br />-moz-transform-style: preserve-3d;<br />-o-transform-style: preserve-3d;<br />-ms-transform-style: preserve-3d;<br />transform-style: preserve-3d;    <br />-webkit-transform-origin: left center;<br />-moz-transform-origin: left center;<br />-o-transform-origin: left center;<br />-ms-transform-origin: left center;<br />transform-origin: left center;    <br />-webkit-transition: -webkit-transform 150ms ease-in-out;<br />-moz-transition: -moz-transform 150ms ease-in-out;<br />-o-transition: -o-transform 150ms ease-in-out;<br />-ms-transition: -ms-transform 150ms ease-in-out;<br />transition: transform 150ms ease-in-out;        <br />}<br />.view div.view-back{<br />width: 50%;<br />height: 100%;<br />position: absolute;<br />right: 0;<br />background: #666;<br />z-index: 0;<br />}<br />.view-back span {<br />display: block;<br />float: right;<br />padding: 5px 20px 5px;<br />width: 100%;<br />text-align: right;<br />font-size: 16px;<br />color: rgba(255,255,255,0.6);<br />}<br />.view-back span:first-child {    padding-top: 20px; }<br />.view-back a {<br />display: bock;<br />font-size: 18px;<br />color: rgba(255,255,255,0.4);<br />position: absolute;<br />right: 15px;<br />bottom: 15px;<br />border: 2px solid rgba(255,255,255,0.3);<br />border-radius: 50%;<br />width: 30px;<br />height: 30px;<br />line-height: 22px;<br />text-align: center;<br />font-weight: 700;<br />}<br />.view-back a:hover {<br />color: #fff;<br />border-color: #fff;<br />}<br />.view .s2, <br />.view .s3, <br />.view .s4, <br />.view .s5 {<br />-webkit-transform: translate3d(60px,0,0);<br />-moz-transform: translate3d(60px,0,0);<br />-o-transform: translate3d(60px,0,0);<br />-ms-transform: translate3d(60px,0,0);<br />transform: translate3d(60px,0,0);<br />}<br />.view .s1 {    background-position: 0px 0px; }<br />.view .s2 {    background-position: -60px 0px; }<br />.view .s3 {    background-position: -120px 0px; }<br />.view .s4 {    background-position: -180px 0px; }<br />.view .s5 {    background-position: -240px 0px; }<br />.view .overlay {<br />width: 60px;<br />height: 100%;<br />opacity: 0;<br />position: absolute;<br />-webkit-transition: opacity 150ms ease-in-out;<br />-moz-transition: opacity 150ms ease-in-out;<br />-o-transition: opacity 150ms ease-in-out;<br />-ms-transition: opacity 150ms ease-in-out;<br />transition: opacity 150ms ease-in-out;<br />}<br />.view:hover .overlay {    opacity: 1; }<br />.view img {<br />position: absolute;<br />z-index: 0;<br />-webkit-transition: left 0.3s ease-in-out;<br />-o-transition: left 0.3s ease-in-out;<br />-moz-transition: left 0.3s ease-in-out;<br />-ms-transition: left 0.3s ease-in-out;<br />transition: left 0.3s ease-in-out;<br />}<br />.view {<br />-webkit-perspective: 800px;<br />-moz-perspective: 800px;<br />-o-perspective: 800px;<br />-ms-perspective: 800px;<br />perspective: 800px;<br />}<br />.view:hover .s1{<br />-webkit-transition-delay: 200ms;<br />-moz-transition-delay: 200ms;<br />-o-transition-delay: 200ms;<br />-ms-transition-delay: 200ms;<br />transition-delay: 200ms;<br /><br />-webkit-transform: rotate3d(0,1,0,-3deg);<br />-moz-transform: rotate3d(0,1,0,-3deg);<br />-o-transform: rotate3d(0,1,0,-3deg);<br />-ms-transform: rotate3d(0,1,0,-3deg);<br />transform: rotate3d(0,1,0,-3deg);<br />}<br />.view:hover .s2{<br />-webkit-transition-delay: 150ms;<br />-moz-transition-delay: 150ms;<br />-o-transition-delay: 150ms;<br />-ms-transition-delay: 150ms;<br />transition-delay: 150ms;    <br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);<br />}<br />.view:hover .s3{<br />-webkit-transition-delay: 100ms;<br />-moz-transition-delay: 100ms;<br />-o-transition-delay: 100ms;<br />-ms-transition-delay: 100ms;<br />transition-delay: 100ms;    <br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);<br />}<br />.view:hover .s4{<br />-webkit-transition-delay: 50ms;<br />-moz-transition-delay: 50ms;<br />-o-transition-delay: 50ms;<br />-ms-transition-delay: 50ms;<br />transition-delay: 50ms;    <br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);<br />}<br />.view:hover .s5{<br />-webkit-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);<br />-moz-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);<br />-o-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);<br />-ms-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);<br />transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);<br />}<br />.view .s4 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view .s5 > .overlay {<br />background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view div.view-back{<br />background: #0a0a0a;<br />background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);<br />background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));<br />background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />}<br /></style><br /><br /><div id="grid" class="efek2"><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-31_zps1c9d6589.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-34_zps00974356.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-36_zps56a53b44.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-38_zpse46e3443.jpg" /><br /></div><br /></div><br /><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script> <br /><script type="text/javascript">    <br />Modernizr.load({<br />test: Modernizr.csstransforms3d && Modernizr.csstransitions,<br />yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],<br />nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',<br />callback : function( url, result, key ) {<br />if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {<br />$( '#grid' ).hoverfold();<br />}<br />}<br />});<br /></script></blockquote><div style="text-align: center;"><a href="http://mas-andes.blogspot.com/p/blog-page_25.html" target="_blank" class="button">DEMO</a><br /><br /></div>EFEK 3 <blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;"><style><br />.efek3{<br />position: relative;<br />overflow: hidden;    <br />-webkit-box-sizing: content-box;<br />-moz-box-sizing: content-box;<br />box-sizing: content-box;<br />}<br />.view {<br />width: 300px;<br />height: 200px;<br />margin: 10px;<br />float: left;<br />position: relative;<br />border: 8px solid #52e052;<br />box-shadow: 1px 1px 2px rgba(0,0,0,0.05);<br />background: #333;<br />-webkit-perspective: 500px;<br />-moz-perspective: 500px;<br />-o-perspective: 500px;<br />-ms-perspective: 500px;<br />perspective: 500px;<br />}<br />.view .slice{<br />width: 60px;<br />height: 100%;<br />z-index: 100;    <br />-webkit-transform-style: preserve-3d;<br />-moz-transform-style: preserve-3d;<br />-o-transform-style: preserve-3d;<br />-ms-transform-style: preserve-3d;<br />transform-style: preserve-3d;    <br />-webkit-transform-origin: left center;<br />-moz-transform-origin: left center;<br />-o-transform-origin: left center;<br />-ms-transform-origin: left center;<br />transform-origin: left center;    <br />-webkit-transition: -webkit-transform 150ms ease-in-out;<br />-moz-transition: -moz-transform 150ms ease-in-out;<br />-o-transition: -o-transform 150ms ease-in-out;<br />-ms-transition: -ms-transform 150ms ease-in-out;<br />transition: transform 150ms ease-in-out;        <br />}<br />.view div.view-back{<br />width: 50%;<br />height: 100%;<br />position: absolute;<br />right: 0;<br />background: #666;<br />z-index: 0;<br />}<br />.view-back span {<br />display: block;<br />float: right;<br />padding: 5px 20px 5px;<br />width: 100%;<br />text-align: right;<br />font-size: 16px;<br />color: rgba(255,255,255,0.6);<br />}<br />.view-back span:first-child {    padding-top: 20px; }<br />.view-back a {<br />display: bock;<br />font-size: 18px;<br />color: rgba(255,255,255,0.4);<br />position: absolute;<br />right: 15px;<br />bottom: 15px;<br />border: 2px solid rgba(255,255,255,0.3);<br />border-radius: 50%;<br />width: 30px;<br />height: 30px;<br />line-height: 22px;<br />text-align: center;<br />font-weight: 700;<br />}<br />.view-back a:hover {<br />color: #fff;<br />border-color: #fff;<br />}<br />.view .s2, <br />.view .s3, <br />.view .s4, <br />.view .s5 {<br />-webkit-transform: translate3d(60px,0,0);<br />-moz-transform: translate3d(60px,0,0);<br />-o-transform: translate3d(60px,0,0);<br />-ms-transform: translate3d(60px,0,0);<br />transform: translate3d(60px,0,0);<br />}<br />.view .s1 {    background-position: 0px 0px; }<br />.view .s2 {    background-position: -60px 0px; }<br />.view .s3 {    background-position: -120px 0px; }<br />.view .s4 {    background-position: -180px 0px; }<br />.view .s5 {    background-position: -240px 0px; }<br />.view .overlay {<br />width: 60px;<br />height: 100%;<br />opacity: 0;<br />position: absolute;<br />-webkit-transition: opacity 150ms ease-in-out;<br />-moz-transition: opacity 150ms ease-in-out;<br />-o-transition: opacity 150ms ease-in-out;<br />-ms-transition: opacity 150ms ease-in-out;<br />transition: opacity 150ms ease-in-out;<br />}<br />.view:hover .overlay {    opacity: 1; }<br />.view img {<br />position: absolute;<br />z-index: 0;<br />-webkit-transition: left 0.3s ease-in-out;<br />-o-transition: left 0.3s ease-in-out;<br />-moz-transition: left 0.3s ease-in-out;<br />-ms-transition: left 0.3s ease-in-out;<br />transition: left 0.3s ease-in-out;<br />}<br />.view {<br />-webkit-perspective: 1000px;<br />-moz-perspective: 1000px;<br />-o-perspective: 1000px;<br />-ms-perspective: 1000px;<br />perspective: 1000px;<br />}<br />.view:hover .s1{<br />-webkit-transform: rotate3d(0,1,0,-55deg);<br />-moz-transform: rotate3d(0,1,0,-55deg);<br />-o-transform: rotate3d(0,1,0,-55deg);<br />-ms-transform: rotate3d(0,1,0,-55deg);<br />transform: rotate3d(0,1,0,-55deg);<br />}<br />.view:hover .s2,<br />.view:hover .s5{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);<br />}<br />.view:hover .s3{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);<br />}<br />.view:hover .s4{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);<br />}<br />.view .s1 > .overlay {<br />background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view .s5 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);<br />}<br /></style><br /><br /><div id="grid" class="efek3"><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-42_zpsdafa0f2c.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-59_zpseca64494.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-61_zpsdb575ed9.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-72_zps38b1ec95.jpg" /><br /></div><br /></div><br /><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script> <br /><script type="text/javascript">    <br />Modernizr.load({<br />test: Modernizr.csstransforms3d && Modernizr.csstransitions,<br />yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],<br />nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',<br />callback : function( url, result, key ) {<br />if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {<br />$( '#grid' ).hoverfold();<br />}<br />}<br />});<br /></script></blockquote><div style="text-align: center;"><a href="http://mas-andes.blogspot.com/p/blog-page_3532.html" target="_blank" class="button">DEMO</a><br /><br /></div>EFEK 4 <blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;"><style><br />.efek4{<br />position: relative;<br />overflow: hidden;    <br />-webkit-box-sizing: content-box;<br />-moz-box-sizing: content-box;<br />box-sizing: content-box;<br />}<br />.view {<br />width: 300px;<br />height: 200px;<br />margin: 10px;<br />float: left;<br />position: relative;<br />border: 8px solid #52e052;<br />box-shadow: 1px 1px 2px rgba(0,0,0,0.05);<br />background: #333;<br />-webkit-perspective: 500px;<br />-moz-perspective: 500px;<br />-o-perspective: 500px;<br />-ms-perspective: 500px;<br />perspective: 500px;<br />}<br />.view .slice{<br />width: 60px;<br />height: 100%;<br />z-index: 100;    <br />-webkit-transform-style: preserve-3d;<br />-moz-transform-style: preserve-3d;<br />-o-transform-style: preserve-3d;<br />-ms-transform-style: preserve-3d;<br />transform-style: preserve-3d;    <br />-webkit-transform-origin: left center;<br />-moz-transform-origin: left center;<br />-o-transform-origin: left center;<br />-ms-transform-origin: left center;<br />transform-origin: left center;    <br />-webkit-transition: -webkit-transform 150ms ease-in-out;<br />-moz-transition: -moz-transform 150ms ease-in-out;<br />-o-transition: -o-transform 150ms ease-in-out;<br />-ms-transition: -ms-transform 150ms ease-in-out;<br />transition: transform 150ms ease-in-out;        <br />}<br />.view div.view-back{<br />width: 50%;<br />height: 100%;<br />position: absolute;<br />right: 0;<br />background: #666;<br />z-index: 0;<br />}<br />.view-back span {<br />display: block;<br />float: right;<br />padding: 5px 20px 5px;<br />width: 100%;<br />text-align: right;<br />font-size: 16px;<br />color: rgba(255,255,255,0.6);<br />}<br />.view-back span:first-child {    padding-top: 20px; }<br />.view-back a {<br />display: bock;<br />font-size: 18px;<br />color: rgba(255,255,255,0.4);<br />position: absolute;<br />right: 15px;<br />bottom: 15px;<br />border: 2px solid rgba(255,255,255,0.3);<br />border-radius: 50%;<br />width: 30px;<br />height: 30px;<br />line-height: 22px;<br />text-align: center;<br />font-weight: 700;<br />}<br />.view-back a:hover {<br />color: #fff;<br />border-color: #fff;<br />}<br />.view .s2, <br />.view .s3, <br />.view .s4, <br />.view .s5 {<br />-webkit-transform: translate3d(60px,0,0);<br />-moz-transform: translate3d(60px,0,0);<br />-o-transform: translate3d(60px,0,0);<br />-ms-transform: translate3d(60px,0,0);<br />transform: translate3d(60px,0,0);<br />}<br />.view .s1 {    background-position: 0px 0px; }<br />.view .s2 {    background-position: -60px 0px; }<br />.view .s3 {    background-position: -120px 0px; }<br />.view .s4 {    background-position: -180px 0px; }<br />.view .s5 {    background-position: -240px 0px; }<br />.view .overlay {<br />width: 60px;<br />height: 100%;<br />opacity: 0;<br />position: absolute;<br />-webkit-transition: opacity 150ms ease-in-out;<br />-moz-transition: opacity 150ms ease-in-out;<br />-o-transition: opacity 150ms ease-in-out;<br />-ms-transition: opacity 150ms ease-in-out;<br />transition: opacity 150ms ease-in-out;<br />}<br />.view:hover .overlay {    opacity: 1; }<br />.view img {<br />position: absolute;<br />z-index: 0;<br />-webkit-transition: left 0.3s ease-in-out;<br />-o-transition: left 0.3s ease-in-out;<br />-moz-transition: left 0.3s ease-in-out;<br />-ms-transition: left 0.3s ease-in-out;<br />transition: left 0.3s ease-in-out;<br />}<br />.view {<br />-webkit-perspective: 1050px;<br />-moz-perspective: 1050px;<br />-o-perspective: 1050px;<br />-ms-perspective: 1050px;<br />perspective: 1050px;<br />}<br />.view div {<br />-webkit-transition: all 150ms 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:hover .s3{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);<br />}<br />.view:hover .s4{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);<br />}<br />.view:hover .s5{<br />-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);<br />-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);<br />-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);<br />-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);<br />transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);<br />}<br />.view .s2 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view .s3 > .overlay {<br />background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />}<br />.view .s4 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);<br />}<br />.view .s5 > .overlay {<br />background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view div.view-back{<br />background: #0a0a0a;<br />background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);<br />background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));<br />background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />}<br /></style><br /><br /><div id="grid" class="efek4"><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-97_zps3b3a4e9a.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-105_zps8ce46fb2.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-127_zps7e47399f.jpg" /><br /></div><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-131_zps131e9aa8.jpg" /><br /></div><br /></div><br /><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script> <br /><script type="text/javascript">    <br />Modernizr.load({<br />test: Modernizr.csstransforms3d && Modernizr.csstransitions,<br />yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],<br />nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',<br />callback : function( url, result, key ) {<br />if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {<br />$( '#grid' ).hoverfold();<br />}<br />}<br />});<br /></script></blockquote><div style="text-align: center;"><a href="http://mas-andes.blogspot.com/p/demo-flod-efek-4.html" target="_blank" class="button">DEMO</a><br /><br /></div>EFEK 5 <blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;"><style><br />.efek5 {<br />width: 390px;<br />height: 558px;<br />overflow: visible;<br />}<br />.view {<br />width: 390px;<br />height: 558px;<br />margin: 0px;<br />float: left;<br />position: relative;<br />border: 8px solid #52e052;<br />box-shadow: 1px 1px 2px rgba(0,0,0,0.05);<br />background: #333;<br />-webkit-perspective: 1000px;<br />-moz-perspective: 1000px;<br />-o-perspective: 1000px;<br />-ms-perspective: 1000px;<br />perspective: 1000px;<br />}<br />.view .slice{<br />width: 196px;<br />height: 100%;<br />z-index: 100;    <br />-webkit-transform-style: preserve-3d;<br />-moz-transform-style: preserve-3d;<br />-o-transform-style: preserve-3d;<br />-ms-transform-style: preserve-3d;<br />transform-style: preserve-3d;    <br />-webkit-transform-origin: left center;<br />-moz-transform-origin: left center;<br />-o-transform-origin: left center;<br />-ms-transform-origin: left center;<br />transform-origin: left center;    <br />-webkit-transition: -webkit-transform 150ms ease-in-out;<br />-moz-transition: -moz-transform 150ms ease-in-out;<br />-o-transition: -o-transform 150ms ease-in-out;<br />-ms-transition: -ms-transform 150ms ease-in-out;<br />transition: transform 150ms ease-in-out;        <br />}<br />.view div.view-back{<br />width: 50%;<br />height: 100%;<br />position: absolute;<br />right: 0;<br />z-index: 0;<br />background: #0a0a0a;<br />background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);<br />background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));<br />background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />background: linear-gradient(left, #0a0a0a 0%,#666666 100%);<br />}<br />.view-back span {<br />display: block;<br />float: right;<br />padding: 5px 20px 5px;<br />width: 100%;<br />text-align: right;<br />font-size: 16px;<br />color: rgba(255,255,255,0.6);<br />}<br />.view-back span:first-child {    padding-top: 20px; }<br />.view-back a {<br />display: bock;<br />font-size: 18px;<br />color: rgba(255,255,255,0.4);<br />position: absolute;<br />right: 15px;<br />bottom: 15px;<br />border: 2px solid rgba(255,255,255,0.3);<br />border-radius: 50%;<br />width: 30px;<br />height: 30px;<br />line-height: 22px;<br />text-align: center;<br />font-weight: 700;<br />}<br />.view-back a:hover {<br />color: #fff;<br />border-color: #fff;<br />}<br />.view .s3 {<br />-webkit-transform: translate3d(196px,0,0);<br />-moz-transform: translate3d(196px,0,0);<br />-o-transform: translate3d(196px,0,0);<br />-ms-transform: translate3d(196px,0,0);<br />transform: translate3d(196px,0,0);<br />}<br />.view .s1 {    background-position: 0px 0px; }<br />.view .s2 {    background-position: -196px 0px; }<br />.view .overlay {<br />width: 196px;<br />height: 100%;<br />opacity: 0;<br />position: absolute;<br />-webkit-transition: opacity 150ms ease-in-out;<br />-moz-transition: opacity 150ms ease-in-out;<br />-o-transition: opacity 150ms ease-in-out;<br />-ms-transition: opacity 150ms ease-in-out;<br />transition: opacity 150ms ease-in-out;<br />}<br />.view:hover .overlay {    opacity: 1; }<br />.view img {<br />position: absolute;<br />z-index: 0;<br />-webkit-transition: left 0.3s ease-in-out;<br />-o-transition: left 0.3s ease-in-out;<br />-moz-transition: left 0.3s ease-in-out;<br />-ms-transition: left 0.3s ease-in-out;<br />transition: left 0.3s ease-in-out;<br />}<br />.view:hover .s2{<br />-webkit-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);<br />-moz-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);<br />-o-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);<br />-ms-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);<br />transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);<br />}<br />.view .s1 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);<br />}<br />.view .s2 > .overlay {<br />background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);<br />}<br />.view .s3 > .overlay {<br />background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);<br />background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);<br />}<br /></style><br /><br /><div id="grid" class="efek5"><br /><div class="view"><br /><div class="view-back"><br /><a href="http://mas-andes.blogspot.com">&rarr;</a><br /></div><br /><img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/kellylin_zps6a730880.jpg" /><br /></div><br /></div><br /><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script> <br /><script type="text/javascript">    <br />Modernizr.load({<br />test: Modernizr.csstransforms3d && Modernizr.csstransitions,<br />yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],<br />nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',<br />callback : function( url, result, key ) {<br />if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {<br />$( '#grid' ).hoverfold();<br />}<br />}<br />});<br /></script></blockquote><div style="text-align: center;"><a href="http://mas-andes.blogspot.com/p/demo-flod-efek-5.html" target="_blank" class="button">DEMO</a><br /><br /></div><div style="text-align: justivy;">Keterangan:<br />Ganti "http://mas-andes.blogspot.com" dengan URL halman yang di inginkan.<br />Ganti setiap URL gambar yang terdapat di markup HTML dengan gambar lain yang di inginkan.<br /><br />3. Jika semua sudah sesuai, maka selanjutnya bisa klik Publikasikan.<br /><br /> Tambahan:<br />Agar bekerja secara maksimal dalam menerapkan langkah-langkah diatas saya rekomendasikan untuk download file dibawah ini terlebih dahulu.</div><div style="text-align: center;"><a href="http://www.ziddu.com/download/22428458/supportblogging.rar.html" rel="nofollow" target="_blank" class="button">Download</a></div>Intruksi:<br />Extract file hasil download.<br />Kemudian double klik. <br />Lalu keraskan volume speaker PC anda.<br />Enjoy *Salam Assololey

jQuery Flod Image Hover With CSS3 - fold image hover merupakan sebuah efek pada gambar yang nantinya…

Read More

Membuat Sidebar Blog Dengan Efek Ribbon

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpzagXb9s7wpc5NRM1lpjIOk-CNQPl210jvktY7N3KP1N2_v60nm4SkEBGvMrSdOZpxvCKTgWPJuHgU0xU-dDUPYukKmctzsTKX2-O49yVhfazauFGxE6Hw-GsRLu2V0tkgNPZHuadRA/s1600/widget-sidebar-ribbon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sidebar Blog Efek Ribbon" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpzagXb9s7wpc5NRM1lpjIOk-CNQPl210jvktY7N3KP1N2_v60nm4SkEBGvMrSdOZpxvCKTgWPJuHgU0xU-dDUPYukKmctzsTKX2-O49yVhfazauFGxE6Hw-GsRLu2V0tkgNPZHuadRA/s320/widget-sidebar-ribbon.jpg" title="Membuat Sidebar Blog Dengan Efek Ribbon" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Sidebar Blog Dengan Efek Ribbon</b> – untuk menanggapi request dari dari mas <a href="http://www.blogger.com/profile/07390593415983951796" rel="nofollow" target="_blank">Mubasir Alamsah</a> maka pada tutorial ini saya kembali membahas tentang efek ribbon untuk sidebar blog. Efek ribbon pada tutorial ini berbentuk seperti yang dia cantumkan pada URL gambar yang terdapat di form komentar pada artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/04/membuat-background-dan-border-shadow.html" target="_blank" title="membuat background dan border shadow pada sidebar blog">membuat background dan border shadow pada sidebar blog</a> dan <a href="http://mas-andes.blogspot.com/2013/06/membuat-efek-ribbon-pada-sidebar-blog.html" target="_blank" title="membuat efek ribbon pada sidebar blog">membuat efek ribbon pada sidebar blog</a>. Untuk menepati janji karena akan saya jelaskan didalam halaman posting, maka pada tutorial inilah saya uraikan untuk membuat efek ribbon tersebut. Bilamana ada yang suka memodifikasi maupun mendesain template blog mungkin efek ribbon ini juga bisa digunakan untuk melengkapi desain pada <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-ribbon-pada-blog.html" target="_blank" title="membuat sidebar ribbon pada blog">sidebar </a>blognya. Untuk penerapan kode masih sama seperti pada tutorial yang sebelumnya. Untuk mengingat kembali agar tidak susah maka sekarang saya sertakan kembali penerapan atau cara memasangnya kedalam blog. Berikut adalah tutorial untuk cara <b>Membuat Sidebar Blog Dengan Efek Ribbon</b>.<br /><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini.</div><blockquote class="tr_bq">.main-inner .sidebar .widget h2 {<br />width:290px;<br />position: relative;<br />color: #fff;<br />padding: 10px 5px;<br />margin: 0;<br />left:-20px;<br />z-index: 100;<br />box-shadow: 0px 0px 3px #52e052;<br />background: #52e052;<br />font-size: 160%;<br />text-align: center;<br />text-shadow: #fff 0 -1px 1px;<br />font-weight: bold;<br />}<br />.main-inner .sidebar .widget h2:before {<br />content: ' ';<br />position: absolute;<br />left: 280px;<br />top: 100%;<br />border-width: 5px 10px;<br />border-style: solid;<br />border-color: #00cc00 transparent transparent #00cc00;<br />}<br />.main-inner .sidebar .widget h2:after {<br />content: ' ';<br />position: absolute;<br />left: 0px;<br />top: 100%;<br />border-width: 5px 10px;<br />border-style: solid;<br />border-color: #00cc00 #00cc00 transparent transparent;<br />}<br />.main-inner .sidebar .widget-content {<br />width:250px;<br />padding: 60px 5px 5px 5px;<br />margin-top:-60px;<br />position: relative;<br />box-shadow: 0px 0px 3px #999;<br />background: #000;<br />color: #fff;<br />font-size: 90%;<br />} <br />.main-inner .widget #ArchiveList {<br />margin: 0px;<br />}<br />.main-inner .widget ul, <br />.main-inner .widget li,<br />.main-inner .widget ul li,<br />.main-inner .widget #ArchiveList ul.flat li {<br />margin: 0px;<br />padding: 2px;<br />list-style: none;<br />}</blockquote><div style="text-align: justify;">Keterangan:<br/>Untuk warna bisa sesuaikan sendiri sesuka mungkin yang pas dengan warna template blog anda sehingga bisa serasi dan tercipta hasil yang maksimal.<br/><br/>3. Klik Template >> Edit HTML lalu paste diatas/sebelum kode ]]></b:skin> selanjutnya klik Simpan Template.<br /><br />Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, agar lebih mudah maka bisa juga dilakukan dengan cara lain yaitu klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut) selanjutnya klik Terapkan ke Blog. <br />Maka nantinya kode CSS diatas akan muncul secara otomatis terletak diatas/sebelum kode ]]></b:skin> yang terdapat di Edit HTML template blog.</div>

Membuat Sidebar Blog Dengan Efek Ribbon – untuk menanggapi request dari dari mas Mubasir Alamsah mak…

Read More

Membuat Sidebar Ribbon Pada Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbOMKdVF0i2gXJ6xVCcD-GMDBZIWRMfyDkAC_E90yWVJUvLiH2nTZY9GUYBTHMumhxIjMqaUFSMbOh2P7ep1mZcMh-yTZsgYM72nlHFR9TdVBqYWbZMoXm_nJvJmHGeh5QQYzgOhvjhw/s1600/sidebar-ribbon.2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sidebar Ribbon Blog" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbOMKdVF0i2gXJ6xVCcD-GMDBZIWRMfyDkAC_E90yWVJUvLiH2nTZY9GUYBTHMumhxIjMqaUFSMbOh2P7ep1mZcMh-yTZsgYM72nlHFR9TdVBqYWbZMoXm_nJvJmHGeh5QQYzgOhvjhw/s320/sidebar-ribbon.2.jpg" title="Membuat Sidebar Ribbon Pada Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Sidebar Ribbon Pada Blog</b> – ini merupakan versi kedua atau kelanjutan dari tutorial yang sebelumnya mengenai cara <a href="http://mas-andes.blogspot.com/2013/06/membuat-efek-ribbon-pada-sidebar-blog.html" target="_blank" title="membuat efek ribbon pada sidebar blog">membuat efek ribbon pada sidebar blog</a>. Sengaja tidak saya sertakan dalam satu halaman posting dengan tutorial sebelumnya, karena selain untuk menumbuhkan artikel posting dan menambah variasi widget juga tentunya untuk <a href="http://mas-andes.blogspot.com/2013/02/8-tips-optimasi-link-internal-untuk.html" target="_blank" title="tips optimasi internal linking pada blog">meningkatkan internal linking</a>. Jika pada tutorial tersebut terdapat pita yang ada disisi kiri title widget maka pada sidebar ribbon ini tidak menggunakan pita, namun terdapat sudut lengkung yang berada disisi kanan title widget seperti yang terlihat pada gambar diatas. Untuk yang masih menggunakan template default blogger dan ingin menambahkan efek <a href="http://mas-andes.blogspot.com/2013/04/membuat-menu-horisontal-ribbon-style.html" target="_blank" title="membuat menu horisontal ribbon style di blog">ribbon </a>pada sidebar blognya bisa menggunakan cara ini untuk melengkapi blognya. Bagaimana langkahnya membuat sidebar ribbon pada blog? Maka berikut adalah tutorial cara penerapan dan <b>Membuat Sidebar Ribbon Pada Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini.</div><blockquote class="tr_bq">.main-inner .sidebar .widget h2 {<br />position: relative;<br />border-radius: 0px 50px 0px 0px;<br />color: #999;<br />padding: 10px 5px;<br />margin: 0;<br />left:-20px;<br />z-index: 100;<br />box-shadow: 0px 0px 3px #999;<br />background: #000;<br />font-size: 160%;<br />text-align: center;<br />text-shadow: #999 0 -1px 1px;<br />font-weight: bold;<br />}<br />.main-inner .sidebar .widget h2:after {<br />content: ' ';<br />position: absolute;<br />left: 0px;<br />top: 100%;<br />border-width: 5px 10px;<br />border-style: solid;<br />border-color: #444 #444 transparent transparent;<br />}<br />.main-inner .sidebar .widget-content {<br />padding: 60px 5px 5px 5px;<br />margin-top:-60px;<br />position: relative;<br />box-shadow: 0px 0px 3px #999;<br />background: #f1f1f1;<br />color: #000;<br />font-size: 90%;<br />} <br />.main-inner .widget #ArchiveList {<br />margin: 0px;<br />}<br />.main-inner .widget ul, <br />.main-inner .widget li,<br />.main-inner .widget ul li,<br />.main-inner .widget #ArchiveList ul.flat li {<br />margin: 0px;<br />padding: 2px;<br />list-style: none;<br />}</blockquote><div style="text-align: justify;">3. Klik Template >> Edit HTML lalu paste diatas/sebelum kode ]]></b:skin> selanjutnya klik Simpan Template.<br /><br />Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut) selanjutnya klik Terapkan ke Blog. Selesai sudah dan sangat simple tentunya untuk <b>Membuat Sidebar Ribbon Pada Blog</b>, selanjutnya bisa dilihat hasilnya.</div>

Membuat Sidebar Ribbon Pada Blog – ini merupakan versi kedua atau kelanjutan dari tutorial yang sebe…

Read More

Membuat Efek Ribbon Pada Sidebar Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXo3OoMOogALYNFObvSx7ooRDvvF4J__5qY2QIpC17yt8be3D09MPfQaUazshGn4ZG6oh2cNadb_xWuAGVLJzBEJ0JTEMcKUe2frcGkTh9H7fFckwSdd6t4C3WGm6SAJeYUjzM21btbBc/s1600/sidebar-ribbon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ribbon Sidebar Blog" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXo3OoMOogALYNFObvSx7ooRDvvF4J__5qY2QIpC17yt8be3D09MPfQaUazshGn4ZG6oh2cNadb_xWuAGVLJzBEJ0JTEMcKUe2frcGkTh9H7fFckwSdd6t4C3WGm6SAJeYUjzM21btbBc/s320/sidebar-ribbon.jpg" title="Membuat Efek Ribbon Pada Sidebar Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Efek Ribbon Pada Sidebar Blog</b> – alhamdulillah setelah beberapa hari diberi nikmat untuk terbaring di tempat tidur akhirnya sekarang bisa jumpa kembali dan berblogging ria sekaligus menyapa sahabat dari dunia nyata maupun maya.<br />Oke langsung saja lanjut ke pokok bahasan. Jika pada tutorial sebelumnya sudah pernah membahas mengenai tentang bagaimana untuk <a href="http://mas-andes.blogspot.com/2013/04/membuat-background-dan-border-shadow.html" target="_blank" title="membuat background dan border shadow pada sidebar blog">membuat background dan border shadow pada sidebar blog</a> maka pada tutorial ini bisa menjadi lanjutan dari tutorial tersebut untuk membuat efek yang berbeda khususnya pada judul widget yang terdapat di sidebar blog. Pada efek ribbon ini nantinya hanya terdapat istilahnya satu lipatan pita pada judul widget yang terdapat di sebelah kiri judul widget sidebar blog. Sengaja saya pasang satu pita karena mungkin jika menggunakan dua pita akan lebih memakan lebar sidebar dan efek tersebut nanti bisa kita bahas pada tutorial selanjutnya tanpa menggunakan pita agar lebih ringkas dan elegant. Untuk menerapkan efek ini kedalam blog, maka berikut adalah tutorial cara <b>Membuat Efek Ribbon Pada Sidebar Blog</b>.<br /><br />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><blockquote class="tr_bq">.main-inner .sidebar .widget h2 {<br />position: relative;<br />font-size: 1.5em;<br />font-weight: bold;<br />padding: 6px 20px 6px 71px;<br />margin: 0px 0px 5px -20px;<br />color: #555;<br />background-color: #999;<br />text-shadow: 0px 1px 2px #bbb;<br />-webkit-box-shadow: 0px 2px 4px #888;<br />-moz-box-shadow: 0px 2px 4px #888;<br />box-shadow: 0px 2px 4px #888;<br />text-align:right;<br />}<br />.main-inner .sidebar .widget h2:before,<br />.main-inner .sidebar .widget h2:after {<br />content: ' ';<br />position: absolute;<br />width: 0;<br />height: 0;<br />}<br />.main-inner .sidebar .widget h2:before {<br />width: 20px;<br />left: -20px;<br />top: 12px;<br />border-width: 20px 10px;<br />border-style: solid;<br />border-color: #999 #999 #999 transparent;<br />}<br />.main-inner .sidebar .widget h2:after {<br />left: 0px;<br />top: 100%;<br />border-width: 5px 10px;<br />border-style: solid;<br />border-color: #666 #666 transparent transparent;<br />}<br />.main-inner .sidebar .widget-content {<br />margin-top: -55px;<br />padding-top: 55px;<br />text-align: justify;<br />text-decoration: none;<br />border: 1px solid #999;<br />background: #f2f2f2;<br />box-shadow: 1px 1px 6px 1px #999;<br />}<br />.main-inner .widget #ArchiveList {<br />margin: 0px;<br />}<br />.main-inner .widget ul, <br />.main-inner .widget li,<br />.main-inner .widget ul li,<br />.main-inner .widget #ArchiveList ul.flat li {<br />margin: 0px;<br />padding: 2px;<br />list-style: none;<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 />Untuk warna background, font, dll silahkan bisa anda sesuaikan sendiri yang cocok dengan warna tema dari blog anda.</div>

Membuat Efek Ribbon Pada Sidebar Blog – alhamdulillah setelah beberapa hari diberi nikmat untuk terb…

Read More

jQuery Slider Pink Style di Blog With CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAVKky8Sx16CYAC__M-vqmU86cEG62lgzzw5JpdmThVb-3hq_YsARFyG9fFzw1iJL6Wlnm68RNwVkBmuA9GWF1hhZrRXWG2_aKg4aPbxWMLvAkAmC2ykSgGPpVKhMo_uO600REynXZh4Q/s1600/slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Slider Pink Style di Blog With CSS3" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAVKky8Sx16CYAC__M-vqmU86cEG62lgzzw5JpdmThVb-3hq_YsARFyG9fFzw1iJL6Wlnm68RNwVkBmuA9GWF1hhZrRXWG2_aKg4aPbxWMLvAkAmC2ykSgGPpVKhMo_uO600REynXZh4Q/s320/slider.jpg" title="jQuery Slider Pink Style di Blog With CSS3" width="320" /></a></div><div style="text-align: justify;"><b>jQuery Slider Pink Style di Blog With CSS3</b> – ini merupakan tutorial kesekian kalinya untuk cara <a href="http://mas-andes.blogspot.com/2013/06/membuat-slider-di-blog-with-css3.html" target="_blank" title="membuat slider di blog with CSS3">membuat slider di blog</a>. Pada tutorial ini tentu sudah bisa dilihat dari judulnya, slider yang akan kita bahas untuk dipasang di blog atau lebih tepatnya pada widget blog nantinya akan berwarna pink. Namun biarpun begitu jika nanti mungkin anda ingin merubah menggunakan warna lain sebenarnya juga masih bisa, hanya dengan mengganti background gambar dengan mendesain gambar sendiri dan menggunakan warna yang anda inginkan. Untuk ukuran anda bisa mengatur sendiri untuk menyesuaikan dengan blog anda dan sebagai sample anda bisa mengambil dari tutorial ini sebagai contoh. Dengan membuat desain gambar sendiri maka nantinya slider yang akan anda pasang bisa menjadi lebih cocok dan serasi apabila di terapkan kedalam blog anda dan bisa contras dengan seluruh warna dari blog anda. Untuk melihat slider yang akan kita bahas pada tutorial ini anda bisa melihat demonya terlebih dahulu pada tombol button yang terdapat dibawah. Untuk menerapkan slider ini kedalam blog maka berikut adalah <b>jQuery Slider Pink Style di Blog With CSS3</b> dan tutorial cara penerapannya kedalam widget blog.<br /><div style="text-align: center;"><a class="button" href="http://demofaceblog.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></div>1. Login ke akun blogger.<br />2. Lalu copy kode dibawah ini.</div><blockquote class="tr_bq"><style><br />#wrslider { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZv_GEH_KwCi1gqKinX9LwcKjPRe73h049h-Uiva8VYvxMqB1RQaO-HrFHssvQaq4l76M2fh2-oO3HRAPozTRr8HD0leoDezBaZsyBiO9BN6EYWOXxSIYiUj2gtMXMy9hq9Zxc_dLgRzQ/w960-h227-no/Faceblog+Evolutions+%25281%2529.jpg); height: 227px; overflow: hidden; position: relative; }<br />#mover { width: 2880px; position: relative; }<br />.slide { padding: 40px 30px; width: 900px; float: left; position: relative; }<br />.slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; }<br />.slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }<br />.slide img { position: absolute; top: 20px; left: 400px; }<br />#slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }<br /></style><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.js"></script><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/startstop-slider.js"></script><br /><br /><div id="wrslider"><br /><div id="mover"><br /><div id="slide-1" class="slide"><br /><h1>Judul 1</h1><br /><p>Silahkan ganti dengan deskripsi yang di inginkan</p><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IIaFYbjWonF2XC6Ii6tNZn7k5fCJe_YIMK4uAfL5Zria-X0wD3CXAshQy20GG4Pztt3DwCZvTmtWiN0hld47sv681bJSpT0cT0DC2jxaq_jojb_FQfS9lK-K21v9PdVev79Mwjc_-HUP/w434-h161-no/Faceblog+Evolutions+%25281%2529.png" alt="learn more" /></a><br /></div><br /><br /><div class="slide"><br /><h1>Judul 2</h1><br /><p>Silahkan ganti dengan deskripsi yang di inginkan</p><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrKRg1AjyBVuskA7yfiXACZwzKpRiZ1VlOWQDWmNJf4L8rjdubeEhadPAaM8UpgjPN5iDfWVsvyrGFlrLaXbNC69aVHQZwUDbIHENbkWIsehj4etprjeWsF9Wiu4rmUNWzT9SddodXajS/w434-h161-no/Faceblog+Evolutions+%25282%2529.png" alt="learn more" /></a><br /></div><br /><br /><div class="slide"><br /><h1>Judul 3</h1><br /><p>Silahkan ganti dengan deskripsi yang di inginkan</p><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauxYp1wOKjhiKWu7Oi3Zk6gvmN-ao6A62-JdgCY8vf2cl9p30PHG0zJuegpgxChoLfsxPDxuVOJ1L1NI2w4tr10MXMlC7WPaaITzWqTD6AxM6QXXQ2-JPkDHA-6SyAKB5_cQBig8_kEVX/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a><br /></div><br /><span style="color: red;"></div></span><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Ganti “http://mas-andes.blogspot.com” dengan URL halaman yang di inginkan.<br />Ganti judul, deskripsi maupun gambar dengan yang di inginkan.<br />Untuk ukuran lebar dan tinggi slider bisa anda atur sendiri dengan ukuran yang sesuai tamplate blog anda.<br /><br />3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Tambahan: jika ingin menambahkan lebih banyak lagi yang ingin dimasukan kedalam slider maka anda tinggal menambahkan atau cukup dengan copy kode berikut ini:</div><blockquote class="tr_bq"><div class="slide"><br /><h1>Judul</h1><br /><p>Silahkan ganti dengan deskripsi yang di inginkan</p><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauxYp1wOKjhiKWu7Oi3Zk6gvmN-ao6A62-JdgCY8vf2cl9p30PHG0zJuegpgxChoLfsxPDxuVOJ1L1NI2w4tr10MXMlC7WPaaITzWqTD6AxM6QXXQ2-JPkDHA-6SyAKB5_cQBig8_kEVX/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a><br /></div> </blockquote><div style="text-align: justify;">Kemudian taruh diatas / sebelum kode <span style="color: red;"></div></span> yang berwarna merah.</div>

jQuery Slider Pink Style di Blog With CSS3 – ini merupakan tutorial kesekian kalinya untuk cara memb…

Read More

Membuat Efek Remote Linking Pada Gambar di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqlGMucLeUG6omq7y4_dM2WLUmoZQvdMg3LNecNVYjN4hvu7RU63xn3rb3f4epy5h1YJSOoSJsoRDQQUvB2rIJ3ilJ9mZWI8a6XGAie2W3E4vgDoe6GCRggiNGTyICCbnqAGjwqZixU8A/s1600/image-efek-remote-linking.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Remote Linking Pada Gambar di Blog" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqlGMucLeUG6omq7y4_dM2WLUmoZQvdMg3LNecNVYjN4hvu7RU63xn3rb3f4epy5h1YJSOoSJsoRDQQUvB2rIJ3ilJ9mZWI8a6XGAie2W3E4vgDoe6GCRggiNGTyICCbnqAGjwqZixU8A/s320/image-efek-remote-linking.gif" title="Membuat Efek Remote Linking Pada Gambar di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Efek Remote Linking Pada Gambar di Blog</b> – sebuah link yang terdapat pada blog memiliki fungsi maupun peranan yang sangat penting, dengan adanya hal ini link yang di inginkan dapat di custom agar pada link tersebut memiliki efek tersendiri yang nantinya akan nampak terlihat berbeda dari link-link lainnya yang ada. Efek Remote Linking Pada Gambar di Blog ini akan memungkinkan hover yang berbeda saat pada link tersebut tersorot oleh mouse. Secara langsung link dapat di atur sesuai dengan keinginan apabila pada link tersebut ingin kita jadikan sebagai remote yang nantinya apabila saat onmouseover maka secara otomatis akan terjadi hover pada gambar beserta linknya yang akan mengarah pada konten halamannya. Pemasangannyapun juga sangat mudah dan tidak perlu edit HMTL sehingga anda tidak usah memasukkan kode kedalam template blog. Agar lebih jelasnya, berikut adalah tutorial untuk <b>Membuat Efek Remote Linking Pada Gambar di Blog</b>:</div><div style="text-align: justify;"><br />1. Login ke akun blogger.<br />2. Lalu copy kode berikut ini.</div><blockquote class="tr_bq"><style><br />.remote{ position: relative; } <br />.remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }<br />.remote a img{ width:125px; height:125px;}<br />.remote a:hover{ background: #ffefcd; }<br />.remote a .name{ font: 18px Georgia, Serif; }<br />.remote a:hover .name{ color: #900; font-weight: bold; } <br />.remote a:hover img{ border: 5px solid #52e052; margin: -4px; }<br />.remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; }<br />#img1 .photo{ top: 0; left: 0; }<br />#img2 .photo{ top: 0; left: 134px; }<br />#img3 .photo{ top: 134px; left: 0; }<br />#img4 .photo{ top: 134px; left: 134px; }<br /></style><br /><br /><div class="remote"><br /><a href="http://mas-andes.blogspot.com" id="img1"><br /><span class="name">Photo 1</span><br /><br />Silahkan ganti dengan deksripsi teks yang di inginkan.<br /><span class="photo"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54NtFY7supyax8PUNYNR9Du984h9MgfwET4yDxDSPII_zOXl7qLS1n9_FKgLXhHg_qEi6ikZBt0NFG_9aZ1ZLal4AZrEMVOayfyQG4wMK9v3QIAuNHcEUlmJWyvng6vDu0Tw6fl1JlCTW/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" /><br /></span></a><br /><br /><a href="http://mas-andes.blogspot.com" id="img2"><br /><span class="name">Photo 2</span><br /><br />Silahkan ganti dengan deksripsi teks yang di inginkan.<br /><span class="photo"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S1FCV2YWvhmdXWWeH0cpSvEg_kh0cZmART1wwabZl0hlO2HW1GWALBc2Dqck_yu7anb1G1-vL90e_qz_5zGZx6TETyRIOY1ugCB7px_QyTrEk7G52ZkTzQ78H_8-h4blwphTaDL0jrLE/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" /><br /></span></a><br /><br /><a href="http://mas-andes.blogspot.com" id="img3"><br /><span class="name">Photo 3</span><br /><br />Silahkan ganti dengan deksripsi teks yang di inginkan.<br /><span class="photo"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Y1cm66bu0YWRPmVj5LMgw2qH04FsKLbd_RZcc0ed4piVNgm8dxwwKFnNFaOkMkkRTbIKgLFC0Hf_Zt5gAZDi0aanvBvDhnzY3-gtv2NA8iujqySrpJ4IdQpB6qyPwe4hPGxIw_wxBMX/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" /><br /></span></a><br /><br /><a href="http://mas-andes.blogspot.com" id="img4"><br /><span class="name">Photo 4</span><br /><br />Silahkan ganti dengan deksripsi teks yang di inginkan.<br /><span class="photo"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCNtMaMRAZd_hwZVFbHORAGvNlL0yNrYTgib1Za9M8D0o66Pk5s2L4EcLOKXsbuVsfaz8S56icJhKYJEpKZA3f6VX1YFmDo2jtYlwu9HWopC-4HRTkAY87K7IwdBieXZTq3-bxj3K8Mj7/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" /><br /></span></a><br /></div></blockquote><div style="text-align: justify;">Keterangan:</div>Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.<br />Ganti URL photo dengan gambar yang di inginkan. <br /><br />3. Selanjutnya paste kedalam kolom posting mode HTML, kemudian bisa langsung klik Publikasikan. <br /><br /><b>DEMO</b>: <br /><br /> <style>.remote{ position: relative; } .remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; } .remote a img{ width:125px; height:125px;} .remote a:hover{ background: #ffefcd; } .remote a .name{ font: 18px Georgia, Serif; } .remote a:hover .name{ color: #900; font-weight: bold; } .remote a:hover img{ border: 5px solid #52e052; margin: -4px; } .remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; } #img1 .photo{ top: 0; left: 0; } #img2 .photo{ top: 0; left: 134px; } #img3 .photo{ top: 134px; left: 0; } #img4 .photo{ top: 134px; left: 134px; } </style> <div class="remote"><a href="http://mas-andes.blogspot.com" id="img1"><span class="name">Photo 1</span><br />Silahkan ganti dengan deksripsi teks yang di inginkan. <span class="photo"><img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54NtFY7supyax8PUNYNR9Du984h9MgfwET4yDxDSPII_zOXl7qLS1n9_FKgLXhHg_qEi6ikZBt0NFG_9aZ1ZLal4AZrEMVOayfyQG4wMK9v3QIAuNHcEUlmJWyvng6vDu0Tw6fl1JlCTW/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" /></span></a> <a href="http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html" id="img2"><span class="name">Photo 2</span><br />Silahkan ganti dengan deksripsi teks yang di inginkan. <span class="photo"><img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S1FCV2YWvhmdXWWeH0cpSvEg_kh0cZmART1wwabZl0hlO2HW1GWALBc2Dqck_yu7anb1G1-vL90e_qz_5zGZx6TETyRIOY1ugCB7px_QyTrEk7G52ZkTzQ78H_8-h4blwphTaDL0jrLE/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" /></span></a> <a href="http://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html" id="img3"><span class="name">Photo 3</span><br />Silahkan ganti dengan deksripsi teks yang di inginkan. <span class="photo"><img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Y1cm66bu0YWRPmVj5LMgw2qH04FsKLbd_RZcc0ed4piVNgm8dxwwKFnNFaOkMkkRTbIKgLFC0Hf_Zt5gAZDi0aanvBvDhnzY3-gtv2NA8iujqySrpJ4IdQpB6qyPwe4hPGxIw_wxBMX/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" /></span></a> <a href="http://mas-andes.blogspot.com/2013/05/3-style-gallery-css3-photo-pinkbox-pada.html" id="img4"><span class="name">Photo 4</span><br />Silahkan ganti dengan deksripsi teks yang di inginkan. <span class="photo"><img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCNtMaMRAZd_hwZVFbHORAGvNlL0yNrYTgib1Za9M8D0o66Pk5s2L4EcLOKXsbuVsfaz8S56icJhKYJEpKZA3f6VX1YFmDo2jtYlwu9HWopC-4HRTkAY87K7IwdBieXZTq3-bxj3K8Mj7/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" /></span></a></div>

Membuat Efek Remote Linking Pada Gambar di Blog – sebuah link yang terdapat pada blog memiliki fungs…

Read More

Membuat Slider di Blog With CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9EJ_kcSgCwJZGXha7x8P6eS3RYlLIkFj2Ka_npfGinzJUNgHHsUU11y79iIpA2idnpHk5beqfZjxs7Py0okXJDQATgohqHwQLDGE0rtUw-BLiA2I-h0MyzxFWdCIZ0tYt-ZsqRMIb98/s1600/slider-blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Slider di Blog With CSS3" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9EJ_kcSgCwJZGXha7x8P6eS3RYlLIkFj2Ka_npfGinzJUNgHHsUU11y79iIpA2idnpHk5beqfZjxs7Py0okXJDQATgohqHwQLDGE0rtUw-BLiA2I-h0MyzxFWdCIZ0tYt-ZsqRMIb98/s320/slider-blog.jpg" title="Membuat Slider di Blog With CSS3" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Slider di Blog With CSS3</b> – sudah pernah saya bahas sebelumnya untuk membuat slider di blog dimana pada slider tersebut sekaligus sebagai widget recent post atau yang menampilkan artikel terbaru yang bisa di jumpai pada tutorial yang berjudul <a href="http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html" target="_blank" title="jQuery Widget Recent Post Automatic Slider">jQuery Widget Recent Post Automatic Slider</a>. Seperti yang sudah diketahui, bahwa pada slider tersebut kita tidak perlu memasukkan gambar satu per satu karena tanpa melakukan hal itu slider sudah berjalan secara otomatis dengan menampilkan gambar yang terdapat pada artikel terbaru dari halaman posting. Namun berbeda dengan slider yang ini, bedanya pada slider ini kita harus terlebih dahulu memasukan gambar yang ingin ditampilkan kedalam slide secara manual. Hal serupa juga dapat anda jumpai pada <a href="http://mas-andes.blogspot.com/2013/05/jquery-slider-futured-content-blog.html" target="_blank" title="jQuery Slider Futured Content Blog">jQuery Slider Futured Content Blog</a> dimana pada slider tersebut terdapat thumbnail image yang terdapat dibawahnya, berbeda lagi dengan <a href="http://mas-andes.blogspot.com/2013/04/jquery-headline-fitur-post-slider-di.html" target="_blank" title="jQuery Headline Fitur Post Slider">jQuery Headline Fitur Post Slider</a> yang mempunyai ukuran lebih kecil dan ramping sehingga mungkin akan nampak lebih minimalis. Oke, sekarang tidak perlu menunggu waktu lebih lama lagi untuk berlanjut ke tutorial karena berikut adalah langkah-langkah sederhana <b>Membuat Slider di Blog With CSS3</b>.<br /><br />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><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">#content-downslider {<br />width:100%;<br />height:265px;<br />margin:10px auto 0;<br />}<br />#downslider {<br />background:#000;<br />border:5px solid #52e052;<br />box-shadow:1px 1px 5px #52e052;<br />height:265px;<br />width:550px;<br />overflow:visible;<br />position:relative;<br />}<br />#mask {<br />overflow:hidden;<br />height:265px;<br />}<br />#downslider ul {<br />margin:0;<br />padding:0;<br />position:relative;<br />}<br />#downslider li {<br />width:550px;<br />height:265px;<br />position:absolute;<br />top:-270px;<br />list-style:none;<br />}<br />#downslider li.firstanimation {<br />-moz-animation:cycle 25s linear infinite;   <br />-webkit-animation:cycle 25s linear infinite;       <br />}<br />#downslider li.secondanimation {<br />-moz-animation:cycletwo 25s linear infinite;<br />-webkit-animation:cycletwo 25s linear infinite;       <br />}<br />#downslider li.thirdanimation {<br />-moz-animation:cyclethree 25s linear infinite;<br />-webkit-animation:cyclethree 25s linear infinite;       <br />}<br />#downslider li.fourthanimation {<br />-moz-animation:cyclefour 25s linear infinite;<br />-webkit-animation:cyclefour 25s linear infinite;       <br />}<br />#downslider li.fifthanimation {<br />-moz-animation:cyclefive 25s linear infinite;<br />-webkit-animation:cyclefive 25s linear infinite;       <br />}<br />#downslider .tooltip {<br />background:rgba(0,0,0,0.7);<br />width:300px;<br />height:60px;<br />position:relative;<br />bottom:75px;<br />left:-320px;<br />-moz-transition:all 0.3s ease-in-out;<br />-webkit-transition:all 0.3s ease-in-out; <br />}<br />#downslider .tooltip h1 {<br />color:#fff;<br />font-size:24px;<br />font-weight:300;<br />line-height:60px;<br />padding:0 0 0 20px;<br />}<br />#downslider li#first:hover .tooltip, <br />#downslider li#second:hover .tooltip, <br />#downslider li#third:hover .tooltip, <br />#downslider li#fourth:hover .tooltip, <br />#downslider li#fifth:hover .tooltip {<br />left:0px;<br />}<br />#downslider:hover li, <br />#downslider:hover .progress-bar {<br />-moz-animation-play-state:paused;<br />-webkit-animation-play-state:paused;<br />}<br />.progress-bar { <br />position:relative;<br />top:-5px;<br />width:550px; <br />height:5px;<br />background:#000;<br />-moz-animation:fullexpand 25s ease-out infinite;<br />-webkit-animation:fullexpand 25s ease-out infinite;<br />}@-moz-keyframes cycle {<br />0%  { top:0px; }<br />4%  { top:0px; } <br />16% { top:0px; opacity:1; z-index:0; } <br />20% { top:325px; opacity:0; z-index:0; } <br />21% { top:-325px; opacity:0; z-index:-1; }<br />92% { top:-325px; opacity:0; z-index:0; }<br />96% { top:-325px; opacity:0; }<br />100%{ top:0px; opacity:1; }<br />}<br />@-moz-keyframes cycletwo {<br />0%  { top:-325px; opacity:0; }<br />16% { top:-325px; opacity:0; }<br />20% { top:0px; opacity:1; }<br />24% { top:0px; opacity:1; } <br />36% { top:0px; opacity:1; z-index:0; } <br />40% { top:325px; opacity:0; z-index:0; }<br />41% { top:-325px; opacity:0; z-index:-1; } <br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclethree {<br />0%  { top:-325px; opacity:0; }<br />36% { top:-325px; opacity:0; }<br />40% { top:0px; opacity:1; }<br />44% { top:0px; opacity:1; } <br />56% { top:0px; opacity:1; } <br />60% { top:325px; opacity:0; z-index:0; }<br />61% { top:-325px; opacity:0; z-index:-1; } <br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclefour {<br />0%  { top:-325px; opacity:0; }<br />56% { top:-325px; opacity:0; }<br />60% { top:0px; opacity:1; }<br />64% { top:0px; opacity:1; }<br />76% { top:0px; opacity:1; z-index:0; }<br />80% { top:325px; opacity:0; z-index:0; }<br />81% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclefive {<br />0%  { top:-325px; opacity:0; }<br />76% { top:-325px; opacity:0; }<br />80% { top:0px; opacity:1; }<br />84% { top:0px; opacity:1; }<br />96% { top:0px; opacity:1; z-index:0; }<br />100%{ top:325px; opacity:0; z-index:0; }<br />}<br />@-webkit-keyframes cycle {<br />0%  { top:0px; }<br />4%  { top:0px; }<br />16% { top:0px; opacity:1; z-index:0; } <br />20% { top:325px; opacity:0; z-index:0; }<br />21% { top:-325px; opacity:0; z-index:-1; }<br />50% { top:-325px; opacity:0; z-index:-1; }<br />92% { top:-325px; opacity:0; z-index:0; }<br />96% { top:-325px; opacity:0; }<br />100%{ top:0px; opacity:1; }<br />}<br />@-webkit-keyframes cycletwo {<br />0%  { top:-325px; opacity:0; }<br />16% { top:-325px; opacity:0; }<br />20% { top:0px; opacity:1; }<br />24% { top:0px; opacity:1; } <br />36% { top:0px; opacity:1; z-index:0; } <br />40% { top:325px; opacity:0; z-index:0; }<br />41% { top:-325px; opacity:0; z-index:-1; } <br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclethree {<br />0%  { top:-325px; opacity:0; }<br />36% { top:-325px; opacity:0; }<br />40% { top:0px; opacity:1; }<br />44% { top:0px; opacity:1; } <br />56% { top:0px; opacity:1; z-index:0; } <br />60% { top:325px; opacity:0; z-index:0; } <br />61% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclefour {<br />0%  { top:-325px; opacity:0; }<br />56% { top:-325px; opacity:0; }<br />60% { top:0px; opacity:1; }<br />64% { top:0px; opacity:1; }<br />76% { top:0px; opacity:1; z-index:0; }<br />80% { top:325px; opacity:0; z-index:0; }<br />81% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclefive {<br />0%  { top:-325px; opacity:0; }<br />76% { top:-325px; opacity:0; }<br />80% { top:0px; opacity:1; }<br />84% { top:0px; opacity:1; }<br />96% { top:0px; opacity:1; z-index:0; }<br />100%{ top:325px; opacity:0; z-index:0; }<br />}<br />@-moz-keyframes fullexpand {<br />0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }<br />4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }<br />16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }<br />17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }<br />18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   <br />}<br />@-webkit-keyframes fullexpand {<br />0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }<br />4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }<br />16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }<br />17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }<br />18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   <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 copy kode dibawah ini.</div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;"><div id="content-downslider"><br /><div id="downslider"><br /><div id="mask"><br /><ul><br /><li class="firstanimation" id="first"><br /><a href="http://mas-andes.blogspot.com/"><br /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif0_y_VgQTWcH6HWYsS2UzHPS69Nwk6foZoXGuESYaNLSI4MFXajJAh2E1YfzLaLnvC2l1EENNnj71AVHvnBTKmx155vpHK_NcQm7yxTiZE6T7pEAKPdbFZrb6Zo2y5niLgbKxHTuD2Fo/w680-h320-no/Faceblog+Evolutions+%25285%2529.jpg" /><br /></a><br /><div class="tooltip"><br /><h1><br />Faceblog Evolutions</h1><br /></div><br /></li><br /><li class="secondanimation" id="second"><br /><a href="http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html"><br /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkV6sT5sD13vKaQzM2jjOWl-3CrJEsio9ux67xwo-C8CKLf3r_-k4Dj02Z0ahHqQx5fDxwasVLKMnoanZXM8HLyyzT9qJUDO4vwvOh2ywSwnlDvIh21cX-wu-CBgWREQGOZdck72_tJQ/w680-h320-no/Faceblog+Evolutions+%25283%2529.jpg" /><br /></a><br /><div class="tooltip"><br /><h1><br />Thumbnail Gallery CSS3</h1><br /></div><br /></li><br /><li class="thirdanimation" id="third"><br /><a href="http://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html"><br /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-XbjJJ0bazvnSFMY2Y5wxb1xE-Fic8UszSd6P0ll2MJ7fT8hroNdseFYaw8ACoXz8Dqp0GODS_Dx6926-dsHmJy9RrFAKuQpKKrFxmW2re8bk0fwRMAx5ygtwhnvD5dmYXH8lmu9fS4/w680-h320-no/Faceblog+Evolutions+%25284%2529.jpg" /><br /></a><br /><div class="tooltip"><br /><h1><br />Thumbnail Photo jQuery</h1><br /></div><br /></li><br /><li class="fourthanimation" id="fourth"><br /><a href="http://mas-andes.blogspot.com/2013/05/3-style-gallery-css3-photo-pinkbox-pada.html"><br /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiovZMMaFF6F9JgNlBYaQCeBk065bzzbMDW6cfD48Vs9To7wiKHmbJHa8mmttLV3QJQThHS9_2esIDgXsDhsoa4FT7Kx_-RUdjDVQ5vr-Om5s8Xl_PbVDTsnqlcsdONNka03JBLYAc7o/w680-h320-no/Faceblog+Evolutions+%25281%2529.jpg" /><br /></a><br /><div class="tooltip"><br /><h1><br />Gallery CSS3 Pinkbox</h1><br /></div><br /></li><br /><li class="fifthanimation" id="fifth"><br /><a href="http://mas-andes.blogspot.com/2013/05/10-gallery-css3-image-efek-hover-pada.html"><br /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJsrffZFokbUzvo4fRf3xn8Fum2qkrIZ7fEAT6PigC6p0OHKzSkZHySXvmqRH0LEV2dDKyrqJogx8dZCbMK_mIPgnETA787rtT2RMclhqqDoEWfu3CJw7IHXgGB7aSqebX5t2H1hzImg/w680-h320-no/Faceblog+Evolutions+%25282%2529.jpg" /><br /></a><br /><div class="tooltip"><br /><h1><br />Gallery CSS3 Image Hover</h1><br /></div><br /></li><br /></ul></div><br /><div class="progress-bar"></div><br /></div><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Untuk ukuran lebar dan tinggi silahkan sesuaikan dengan template blog anda.<br /><br />5. Kemudian paste kode tersebut di widget, caranya klik Tata Letak >> HTML/Javascript lalu jika sudah klik simpan. Jika ingin dimasukan kedalam posting blog juga bisa, gunakan mode HTML bukan Compose lalu paste kode tersebut didalamnya.<br /><br />DEMO:</div><br /><style>#content-downslider { width:100%; height:265px; margin:10px auto 0; } #downslider { background:#000; border:5px solid #52e052; box-shadow:1px 1px 5px #52e052; height:265px; width:550px; overflow:visible; position:relative; } #mask { overflow:hidden; height:265px; } #downslider ul { margin:0; padding:0; position:relative; } #downslider li { width:550px; height:265px; position:absolute; top:-270px; list-style:none; } #downslider li.firstanimation { -moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; } #downslider li.secondanimation { -moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite; } #downslider li.thirdanimation { -moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite; } #downslider li.fourthanimation { -moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite; } #downslider li.fifthanimation { -moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite; } #downslider .tooltip { background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } #downslider .tooltip h1 { color:#fff; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; } #downslider li#first:hover .tooltip, #downslider li#second:hover .tooltip, #downslider li#third:hover .tooltip, #downslider li#fourth:hover .tooltip, #downslider li#fifth:hover .tooltip { left:0px; } #downslider:hover li, #downslider:hover .progress-bar { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } .progress-bar { position:relative; top:-5px; width:550px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; } @-moz-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-moz-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-webkit-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 50% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; z-index:0; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } </style> <br /><div id="content-downslider"><div id="downslider"><div id="mask"><ul><li class="firstanimation" id="first"><a href="http://mas-andes.blogspot.com/"><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif0_y_VgQTWcH6HWYsS2UzHPS69Nwk6foZoXGuESYaNLSI4MFXajJAh2E1YfzLaLnvC2l1EENNnj71AVHvnBTKmx155vpHK_NcQm7yxTiZE6T7pEAKPdbFZrb6Zo2y5niLgbKxHTuD2Fo/w680-h320-no/Faceblog+Evolutions+%25285%2529.jpg" /></a><div class="tooltip"><h1>Faceblog Evolutions</h1></div></li><li class="secondanimation" id="second"><a href="http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html"><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkV6sT5sD13vKaQzM2jjOWl-3CrJEsio9ux67xwo-C8CKLf3r_-k4Dj02Z0ahHqQx5fDxwasVLKMnoanZXM8HLyyzT9qJUDO4vwvOh2ywSwnlDvIh21cX-wu-CBgWREQGOZdck72_tJQ/w680-h320-no/Faceblog+Evolutions+%25283%2529.jpg" /></a><div class="tooltip"><h1>Thumbnail Gallery CSS3</h1></div></li><li class="thirdanimation" id="third"><a href="http://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html"><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-XbjJJ0bazvnSFMY2Y5wxb1xE-Fic8UszSd6P0ll2MJ7fT8hroNdseFYaw8ACoXz8Dqp0GODS_Dx6926-dsHmJy9RrFAKuQpKKrFxmW2re8bk0fwRMAx5ygtwhnvD5dmYXH8lmu9fS4/w680-h320-no/Faceblog+Evolutions+%25284%2529.jpg" /></a><div class="tooltip"><h1>Thumbnail Photo jQuery</h1></div></li><li class="fourthanimation" id="fourth"><a href="http://mas-andes.blogspot.com/2013/05/3-style-gallery-css3-photo-pinkbox-pada.html"><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiovZMMaFF6F9JgNlBYaQCeBk065bzzbMDW6cfD48Vs9To7wiKHmbJHa8mmttLV3QJQThHS9_2esIDgXsDhsoa4FT7Kx_-RUdjDVQ5vr-Om5s8Xl_PbVDTsnqlcsdONNka03JBLYAc7o/w680-h320-no/Faceblog+Evolutions+%25281%2529.jpg" /></a><div class="tooltip"><h1>Gallery CSS3 Pinkbox</h1></div></li><li class="fifthanimation" id="fifth"><a href="http://mas-andes.blogspot.com/2013/05/10-gallery-css3-image-efek-hover-pada.html"><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJsrffZFokbUzvo4fRf3xn8Fum2qkrIZ7fEAT6PigC6p0OHKzSkZHySXvmqRH0LEV2dDKyrqJogx8dZCbMK_mIPgnETA787rtT2RMclhqqDoEWfu3CJw7IHXgGB7aSqebX5t2H1hzImg/w680-h320-no/Faceblog+Evolutions+%25282%2529.jpg" /></a><div class="tooltip"><h1>Gallery CSS3 Image Hover</h1></div></li></ul></div><div class="progress-bar"></div></div></div>

Membuat Slider di Blog With CSS3 – sudah pernah saya bahas sebelumnya untuk membuat slider di blog d…

Read More