Cara Memasang Auto Post Slider Carousel di Blog

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s1600/auto-post-slider-carousel.jpg"><img alt="Cara Memasang Auto Post Slider Carousel di Blog" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s520/auto-post-slider-carousel.jpg" title="Cara Memasang Auto Post Slider Carousel di Blog" width="520" /></a><b>Cara Memasang Auto Post Slider Carousel di Blog</b> – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah satunya adalah Slider Carousel. Slider Carousel merupakan slider yang sudah tiga kali saya terapkan ke dalam template blog yang beberapa waktu lalu saya bagikan. Pada tutorial ini akan saya bahas penerapan Slider Carousel ke dalam template agar sewaktu siapa saja bagi yang ingin menggunakan slider untuk memodifikasi template blognya supaya lebih mudah. Slider Carousel merupakan slider bergaya horisontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Agar lebih jelasnya, berikut tutorial <b>Cara Memasang Auto Post Slider Carousel di Blog</b>.<br /><br />1. Pada Dashboard blog masuk ke Edit HTML template.<br />2. Kemudian taruh kode berikut ini diatas kode <code></head></code><br /><pre><script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/></pre>3. Selanjutnya copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code><br /><pre>#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}<br />#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}<br />#featured ul{width:9999px}<br />#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}<br />#featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}<br />.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}<br />.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}<br />.title-featured{text-align:center;position:relative;margin-top:-20px}<br />.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}<br />.arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1i-5uOpnLzQMjhRe1xLY3B-2UyJWQWuy6Riug7VGGiwqhMzlJqhyphenhypheniHv7J5LJ5iNU79N5Wzfi2AevCEDJmRdMP1tf2LXoAfmzMJqB-PMIA-q4peWPZOjvVKT8nB66ADXELjFAuXuP4f4/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}<br />.arrow.back{background-position:0 50%;left:10px}<br />.arrow.forward{background-position:100% 50%;right:10px}<br />span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUe0SwgMIrq9NPtTeFN6Tz3ONCSVo1KvgbSZ4Pt6S4sbfdMR1-9Cnga4-69FbY97ysx8SSM8kD2HAlJrz9Cx1fbCX44dA0xKMQxEaHgxWCfIq8ddt73utRYorxEV9XfLqmh-GjMEIJrVc/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}</pre>4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> maka cari kode <code><div id='main-wrapper'></code> lalu taruh kode berikut ini tepat di atasnya.<br /><pre><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><div id='featured-wrap'><br /><div id='featured'><br /><span class='slideloading'>Loading...</span><br /></div><br /></div><br /></b:if></pre>Jika ingin membuat Slider Carousel tampil di atas footer seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesmulus-blogger-template.html" target="_blank" title="Bluesmulus Blogger Template">template Bluesmulus</a> maka cari kode <code><div id='footer-wrapper'></code> lalu taruh kode yang ada pada point 4 tepat di atasnya.<br /><br />5. Langkah terakhir Simpan template.<br /><br />Demikian akhir dari tutorial <b>Cara Memasang Auto Post Slider Carousel di Blog</b>, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.

Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah sat...

Read More

Cara Modifikasi Skitter Slideshow Pada Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN07H0RyuTh5SPu3WKO0Uz4L1GYEvAgM64A0iIfMM09UzH1giCud1fI4t9CvqSRgLt-TVxViwD9ESN9XvV0BLmvACBWrBv0hhHAEwF192ZkZXZWRlkUM7NsZColbmd_QbNnypQK4_yRg/s1600/jquery-skitter-slideshow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Skitter Slideshow" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN07H0RyuTh5SPu3WKO0Uz4L1GYEvAgM64A0iIfMM09UzH1giCud1fI4t9CvqSRgLt-TVxViwD9ESN9XvV0BLmvACBWrBv0hhHAEwF192ZkZXZWRlkUM7NsZColbmd_QbNnypQK4_yRg/s540/jquery-skitter-slideshow.jpg" title="Cara Modifikasi Skitter Slideshow Pada Blog" width="540" /></a><b>Cara Modifikasi Skitter Slideshow Pada Blog</b> – setelah pada artikel sebelumnya membahas tema yang sama yakni mengenai jQuery Skitter Slideshow, maka pada tutorial ini untuk melanjutkan dan melengkapi artikel tersebut juga akan kembali membahas untuk customisasi slider blog dengan menggunakan jQuery Skitter Slideshow. Dengan menggunakan jQuery Skitter Slideshow sangat memungkinkan kita dalam mendesain untuk mempercantik blog terutama pada fitur slider dengan menambahkan efek animasi yang fantastis. Jika pada artikel sebelumnya yakni artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/11/cara-membuat-slider-jquery-skitter-slideshow.html" target="_blank" title="Cara Memasang Skitter Slideshow di Blog">Cara Memasang Skitter Slideshow di Blog</a> hanya terdiri dari +22 efek animasi slider, maka kini ada penambahan yakni menjadi 36 type efek animasi dan terdapat 4 theme yang berbeda serta penambahan progress bar dan preview image number. Dari banyaknya type efek animasi dan theme ini dapat memungkinkan kita untuk lebih leluasa memilih diantaranya agar sesuai dengan selera yang kita inginkan. Untuk penjelasan lebih detailnya, berikut tutorial <b>Cara Modifikasi Skitter Slideshow Pada Blog</b>.<br /><br />1. Login akun blogger.<br />2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.<br />3. Copy kode berikut ini, lalu paste kedalam Widget HTML/Javascript kemudian Simpan.<br /><pre><style type="text/css"><br />.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;}<br />.slideshow_skitter img {width:900px; height:300px;}<br />.slideshow_skitter img{max-width:none}<br />.slideshow_skitter .container_skitter{overflow:hidden;position:relative}<br />.slideshow_skitter .image{overflow:hidden}<br />.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}<br />.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}<br />.slideshow_skitter .prev_button{position:absolute;top:50%;left:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px -42px;width:42px;height:42px}<br />.slideshow_skitter .next_button{position:absolute;top:50%;right:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 -42px;width:42px;height:42px}<br />.slideshow_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}<br />.slideshow_skitter .info_slide .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0;padding:2px 10px}<br />.slideshow_skitter .info_slide .image_number_select,.slideshow_skitter .info_slide .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0;padding:2px 10px}<br />.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}<br />.slideshow_skitter .info_slide_thumb{height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:0;left:0;opacity:1.0;padding:0!important}<br />.slideshow_skitter .info_slide_thumb .image_number{overflow:hidden;width:100px;height:50px;position:relative;-moz-border-radius:0!important;-webkit-border-radius:0!important;border-radius:0!important;margin:0!important;padding:0!important}<br />.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}<br />.slideshow_skitter .slideshow_scroll_thumbs{padding:0}<br />.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;cursor:pointer;border:0 solid #333}<br />.slideshow_skitter .info_slide_dots{position:absolute;bottom:10px;background:rgba(255,255,255,0.8);box-shadow:rgba(0,0,0,0.3) 1px 1px 0;z-index:151;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;padding:5px 0 5px 5px}<br />.slideshow_skitter .info_slide_dots .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0}<br />.slideshow_skitter .info_slide_dots .image_number_select,.slideshow_skitter .info_slide_dots .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0}<br />.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkbDvrELgL5tN8bamTn-xBmk3b4eTgO5SMfvcjL35E0nDHjdVRi-WD3HBdd3A_2OIyV1R7pi41ocTFTyqWzPSYW3WSw0oFfeN09l_QVlWTiDnNqXVdHSJcqdyvV0wwmaC3332qBMuWeo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}<br />.slideshow_skitter .label_skitter{text-transform:uppercase;z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.8;background:#000}<br />.slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}<br />.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}<br />.slideshow_skitter .preview_slide{display:none;position:absolute;z-index:152;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden}<br />.slideshow_skitter .preview_slide ul{height:100px!important;overflow:hidden!important;list-style:none!important;display:block!important;position:absolute!important;top:0;left:0;margin:0!important}<br />.slideshow_skitter .preview_slide ul li{width:100px!important;height:100px!important;overflow:hidden!important;float:left!important;position:relative!important;display:block!important;margin:0!important;padding:0!important}<br />.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}<br />#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}<br />.slideshow_skitter .focus_button{position:absolute;top:50%;z-index:100;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px 0;width:42px;height:42px}<br />.slideshow_skitter .play_pause_button{position:absolute;top:50%;z-index:151;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 0;width:42px;height:42px}<br />.slideshow_skitter_large{width:900px;height:300px}<br />.slideshow_skitter_small{width:200px;height:100px}<br />.slideshow_skitter .focus_button,.slideshow_skitter .next_button,.slideshow_skitter .prev_button,.slideshow_skitter .play_pause_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy1LghwvdXxLoA-PK0ovBnK9cnlJpVd27mhEQwfBfwSJCacewVK7fSgiH4bb5PMUv-NX3v54g5bEf336hv7udm-ETRZtvXMIMDi_bxZze2PSFOl1qwrO9BLNAu4uFM3kRxLvfUEU4ceq4/w84-h126-no/sprite-default.png) no-repeat}<br />.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}<br />.skitter-minimalist .prev_button,.skitter-minimalist .next_button,.skitter-minimalist .play_pause_button,.skitter-minimalist .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxlcX7mMRy-3NZTkA_K1EFMmpR_t26oNoO6y5kJxKGOnJVgx9hhy1Hf1OWp2S94U6Bnd_pwmhj1Tpc3vprL0hwIC0QGjdOCOTiEHJZyw-PeKdEEuKC6XwZuJj-OdQ6Axfj-wBxnHGjoyo/w24-h110-no/sprite-minimalist.png) no-repeat!important}<br />.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}<br />.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}<br />.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .info_slide .image_number{background:#000;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}<br />.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}<br />.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}<br />.skitter-round .prev_button,.skitter-round .next_button,.skitter-round .play_pause_button,.skitter-round .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1IvoG9f6Vo4YG3OTZh1Z6DwpB3LjOTwHhoWC4NoCsjfgQrMfut78n4ApdiVhiSV0GqBddah0mMDBYF7T71qGR9nb7QZCP1qGHHz5EaIvtNNEgX2zGMQXU6U-Zes87xXkRP_Ru7J6GAHc/w47-h116-no/sprite-round.png) no-repeat}<br />.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}<br />.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}<br />.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}<br />.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}<br />.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}<br />.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}<br />.skitter-round .info_slide .image_number{background:#999;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}<br />.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}<br />.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}<br />.skitter-clean .prev_button,.skitter-clean .next_button,.skitter-clean .play_pause_button,.skitter-clean .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhrjK-ICTlE2rPAZmtIxgc5e2m5u4Oy2fUPfYDs40tVMTE_AuInG4satmL6lz83ICbemaTg_mobWkiwtjviOcPVbIPHQUnSoEUOOjGDtGd1Hyv1M40KfV81h6WzU585xSnIQ4a91VPfkM/w47-h215-no/sprite-clean.png) no-repeat}<br />.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}<br />.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}<br />.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}<br />.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}<br />.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}<br />.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}<br />.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}<br />.skitter-square .play_pause_button,.skitter-square .next_button,.skitter-square .focus_button,.skitter-square .prev_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqcKlC4Fh8asDdMtu8O_yl0w9DTGyo9y79UBA4HajAYzsSGrXqiTZ01hhtplna1oCGm69pQjYtgCgkxPFYRUn044MrGJn5hyphenhyphen-Ti-ggfiYCw8mX46Hyn7MqV_TfLpgtTyUGYcYC26-cKA/w110-h165-no/sprite-square.png) no-repeat}<br />.skitter-square .play_pause_button{background-position:-55px 0;width:55px;height:55px;top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;margin-top:0}<br />.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}<br />.skitter-square .focus_button{background-position:-55px -55px;width:55px;height:55px;top:10px!important;left:65px!important;bottom:auto!important;right:auto!important;margin-top:0}<br />.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px}<br />.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px}<br />.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}<br />.skitter-square .info_slide_dots .image_number:hover{background:#999}<br />.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}<br />.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}<br />.slideshow_skitter ul,.slideshow_skitter .image img{display:none}<br />.slideshow_skitter .prev_button:hover,.slideshow_skitter .next_button:hover,.slideshow_skitter .play_pause_button:hover,.slideshow_skitter .focus_button:hover{opacity:0.5!important}<br />.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}<br />.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}<br />.skitter-minimalist .info_slide .image_number:hover,.skitter-round .info_slide .image_number_select,.skitter-round .info_slide .image_number_select:hover,.skitter-round .info_slide_dots .image_number_select,.skitter-round .info_slide_dots .image_number_select:hover,.skitter-clean .info_slide_dots .image_number_select,.skitter-clean .info_slide_dots .image_number_select:hover{background:#111}<br />.skitter-round .info_slide .image_number:hover,.skitter-round .info_slide_dots .image_number:hover,.skitter-clean .info_slide_dots .image_number:hover{background:#333}<br />.skitter-clean .info_slide .image_number,.skitter-square .info_slide .image_number{background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 0;font-size:12px;font-weight:400;color:#333}<br />.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}<br />.skitter-clean .info_slide .image_number_select,.skitter-clean .info_slide .image_number_select:hover,.skitter-square .info_slide .image_number_select,.skitter-square .info_slide .image_number_select:hover{background:#111;color:#fff}<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.slideshow_skitter_large').skitter({<br />theme: '<b><span style="color: blue;">square</span></b>',<br />numbers_align: 'center',<br />progressbar: true, <br />dots: true, <br />preview: true<br />});<br />});<br /></script><br /><br /><div class="slideshow_skitter slideshow_skitter_large"><br /><ul><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cube</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AOMTXxlkRUULYG66iXKExNLpeU7DKIrUTyGQni6Ec3CTRFpUbJY8B0JW2Bx8VD6Vg-ss5GnYC-XAWAfbw8cACvaZ9L0KdJfur-1WYbHUwEo6lX_SC0FFkW9KX5fayDvY0E636VTkdmE/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeRandom</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjXfG253rAWzHlhk6ec4wlwWoxcfq2DA8i2kLTmhhAhte2XSlim7B7KITK6pUxev688nyqnyl1968yQ1MlMghNIk8yT5AIagZ9jxTbY6KtTcIMODns0mKmKxXHwlJQk2rP3ikNJnUnao/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">block</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZXxYBgR1PhEKlodonG7Je9Eypv0n8TxGSAaSDIQrwMeFI_sPCCJysJQoXFYz6OaiENkq-NMokgJudsp857Kk4EbHD41LkPtN9k9b5XzlWGg9tm43_O3pKZOVpMa1DVzpEn8mYTXCP0g/w790-h286-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeStop</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBlOPbdrS8Dc3CcMgXacKBkfkcuzjpMhg9GKSwmKDD0By-KB5dXCdhryFoPH5FD8T7VatiJXSg8qetx5A-dzNd5CxsialItAmR4lvJvoesY6jLezcLBsMi3crCKnbbZ3VwZoHj7VJBHs/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeHide</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRi5T3MqUcadffight6ZnmI2LuKnsuYXBdxhykqtJsbKN4YVI7YztsM5Noz4sYMQJk6KDIeOBl31c4UrqrcBCzlM67IEuvU0Oop7_9nZWeCSFldxUeFSfpLRDK7cYJyJw3IIw9_VF48/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li><br /></ul><br /></div></pre>Keterangan:<br />- Ganti <b>http://mas-andes.blogspot.com</b> dan URL gambar.<br />- Untuk lebar slider silahkan ubah sesuai selera masing-masing.<br /><br /><span style="font-size: large;"><b>Customisasi</b></span><br />Dari kode yang terdapat di atas, perhatikan teks yang berwarna <span style="color: blue;">biru</span>. Kita dapat memilih salah satu di antara 4 theme, disitu saya menggunakan square sebagai default theme. Namun apabila ingin menggantinya, anda dapat merubah dengan pilihan theme lain di antaranya terdapat <span style="color: blue;"><b>square</b></span>, <span style="color: blue;"><b>clean</b></span>, <span style="color: blue;"><b>round</b></span>, <span style="color: blue;"><b>minimalist</b></span>.<br /><br />Sedangkan pada type efek animasi slider perhatikan teks yang berwarna <span style="color: red;">merah </span>pada kode diatas, saya hanya memasukan 5 gambar dengan masing-masing efek yang berbeda. Anda dapat menambahkan gambar sebanyak mungkin dengan berbagi efek animasi yang berbeda didalam satu slider. Anda dapat merubah dan memilih berbagai type efek animasi tersebut, berikut type animasi yang dapat anda gunakan: <code>cube</code>, <code>cubeRandom</code>, <code>block</code>, <code>cubeStop</code>, <code>cubeStopRandom</code>, <code>cubeHide</code>, <code>cubeSize</code>, <code>horizontal</code>, <code>showBars</code>, <code>showBarsRandom</code>, <code>tube</code>, <code>fade</code>, <code>fadeFour</code>, <code>paralell</code>, <code>blind</code>, <code>blindHeight</code>, <code>blindWidth</code>, <code>directionTop</code>, <code>directionBottom</code>, <code>directionRight</code>, <code>directionLeft</code>, <code>cubeSpread</code>, <code>glassCube</code>, <code>glassBlock</code>, <code>circles</code>, <code>circlesInside</code>, <code>circlesRotate</code>, <code>cubeShow</code>, <code>upBars</code>, <code>downBars</code>, <code>hideBars</code>, <code>swapBars</code>, <code>swapBarsBack</code>, <code>swapBlocks</code>, <code>cut</code>, <code>hideProgressBar</code>.<br /><br />Untuk yang lain-lain misalkan ingin merubah warna,font, maupun letak elemen silahkan custom sendiri agar sesuai dengan template blog yang di gunakan.

Cara Modifikasi Skitter Slideshow Pada Blog – setelah pada artikel sebelumnya membahas tema yang sama yakni mengenai jQuery Skitter Slidesh...

Read More

Cara Memasang Skitter Slideshow di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdeRhuwHLzEBkjSPSLfPioAUWVixi27C0uSatv0qm7pvsD0d9AUFg7xH6NTJf_Uzmu9LoitTq2QmrZXWo0DmK1g-R2er1dK9SEl4ZOcLmxEubGgyRMcgnJsg0iSDkMycAsZufJU0eYhOQ/s1600/skitter-slideshow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Slider Skitter Slideshow" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdeRhuwHLzEBkjSPSLfPioAUWVixi27C0uSatv0qm7pvsD0d9AUFg7xH6NTJf_Uzmu9LoitTq2QmrZXWo0DmK1g-R2er1dK9SEl4ZOcLmxEubGgyRMcgnJsg0iSDkMycAsZufJU0eYhOQ/s540/skitter-slideshow.jpg" title="Cara Memasang Skitter Slideshow di Blog" width="540" /></a><b>Cara Memasang Skitter Slideshow di Blog</b> – setelah beberapa waktu lalu sudah pernah membahas untuk <a href="http://mas-andes.blogspot.com/2013/07/menambah-fitur-jquery-animasi-slider.html" target="_blank" title="Menambah Fitur jQuery Animasi Slider Pada Blog">Menambah Fitur jQuery Animasi Slider Pada Blog</a> dengan efek transisi yang menarik, maka pada tutorial kali ini kembali akan membahas untuk menambah fitur slider pada blog dengan efek-efek yang tidak kalah menarik menggunakan plugin jQuery Skitter Slideshow. Sebelum membahas lebih jauh ke tutorial, saya sedikit akan menjelaskan mengenai plugin jQuery Skitter Slideshow. Skitter adalah plugin jQuery yang memungkinkan kita untuk mengkonversi menjadi slideshow dengan efek animasi transisi pada gambar. jQuery Skitter sangat memungkinkan kita untuk membuat slideshow dengan efek gambar yang menarik dan terdiri dari 22 efek transisi. Skitter Slideshow ini dapat menampilkan daftar slide sebagai angka atau thumbnail dan item dapat diakses dengan bantuan tombol prev dan next. Ada beberapa opsi yang ditawarkan untuk kustomisasi maksimum seperti: kecepatan (untuk partikel animasi), interval antara setiap slide atau menampilkan label on/off. Fitur lain yang bagus adalah kemampuan untuk menyebutkan jenis animasi untuk setiap slide sebagai nama class yang memungkinkan kita untuk menggunakan beberapa jenis animasi dalam satu slide. Untuk membuat slider ini terpasang ke dalam blog, berikut tutorial <b>Cara Memasang Skitter Slideshow di Blog</b>.<br /><br />1. Login ke blogger.<br />2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.<br />3. Copy kode berikut ini.<pre><style type="text/css"><br />.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }<br />.skitter_slideshow img {width:850px; height:300px;}<br />.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnT6nQujAAJvsZ0pj6iov30FvNFhGYTvWZ_XOMQnUX7HDO0ILSE3j3W_wKeYMqpdJJqPfVQUPkVHTgJ7GhRzRNrAjpfRZd5R94zYYUdXzepXDbTjflPxDOF2_eMHzIDDtCkyRXs6fDKKs/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}<br />.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}<br />.info_slide * {font-family:Consolas,arial,tahoma !important;}<br />.slideshow_skitter {position:relative;width:850px;height:300px;}<br />.slideshow_skitter ul {display:none;}<br />.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}<br />.slideshow_skitter .image {overflow:hidden;}<br />.slideshow_skitter .image img {display:none;}<br />.slideshow_skitter .slideshow_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}<br />.slideshow_skitter .slideshow_clone img {position:absolute;top:0;left:0;z-index:20;}<br />.slideshow_skitter .prev_button {position:absolute;top:50%;left:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxQrW7GJTyNalieYI1ByYLKqawSNj5ZM60AhmrYO9_MIUeE7U-Ac51CyTOXAxB0i3ndcRex_u8tk7pNvU6GEj55xkPFrnX8vva_AaPqB2ux4L8wdROpQ0MmYPXVv4cdv1Y3kTx3NsJS0/h120/prev.png) no-repeat left top;}<br />.slideshow_skitter .next_button {position:absolute;top:50%;right:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwOCT_iXY7k2XhEtpbm5ZukZZE5_6Y19uK1s_AVFqEm-VojSoSnFSbT3r5y6lhPLq-b82BZKtPAimTTm5gpKKKbzMs-ybZw2j9NLqyWFA2zrADDsx7ezj9Xzd6T6BP4BQLsZrBjit3KMg/h120/next.png) no-repeat left top;}<br />.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}<br />.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}<br />.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}<br />.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}<br />.slideshow_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}<br />.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}<br />.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}<br />.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}<br />.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}<br />.slideshow_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}<br />.slideshow_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}<br />.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}<br />.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}<br />.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkbDvrELgL5tN8bamTn-xBmk3b4eTgO5SMfvcjL35E0nDHjdVRi-WD3HBdd3A_2OIyV1R7pi41ocTFTyqWzPSYW3WSw0oFfeN09l_QVlWTiDnNqXVdHSJcqdyvV0wwmaC3332qBMuWeo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}<br />.slideshow_skitter_large {width:850px;height:300px;}<br />.slideshow_skitter_small {width:200px;height:200px;}<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.skitter.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />var options = {};<br />if (document.location.search) {<br />var array = document.location.search.split('=');<br />var param = array[0].replace('?', '');<br />var value = array[1];<br />if (param == 'animation') {<br />options.animation = value;<br />}<br />else if (param == 'type_navigation') {<br />options[value] = true;<br />if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});<br />}<br />}<br />$('.slideshow_skitter_large').skitter(options);<br />});<br /></script><br /><div class="skitter_slideshow"><br /><div class="slideshow_skitter slideshow_skitter_large"><br /><ul><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AOMTXxlkRUULYG66iXKExNLpeU7DKIrUTyGQni6Ec3CTRFpUbJY8B0JW2Bx8VD6Vg-ss5GnYC-XAWAfbw8cACvaZ9L0KdJfur-1WYbHUwEo6lX_SC0FFkW9KX5fayDvY0E636VTkdmE/w600-h300-no/" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjXfG253rAWzHlhk6ec4wlwWoxcfq2DA8i2kLTmhhAhte2XSlim7B7KITK6pUxev688nyqnyl1968yQ1MlMghNIk8yT5AIagZ9jxTbY6KtTcIMODns0mKmKxXHwlJQk2rP3ikNJnUnao/w600-h300-no/" class="cubeRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZXxYBgR1PhEKlodonG7Je9Eypv0n8TxGSAaSDIQrwMeFI_sPCCJysJQoXFYz6OaiENkq-NMokgJudsp857Kk4EbHD41LkPtN9k9b5XzlWGg9tm43_O3pKZOVpMa1DVzpEn8mYTXCP0g/w790-h286-no/" class="block" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBlOPbdrS8Dc3CcMgXacKBkfkcuzjpMhg9GKSwmKDD0By-KB5dXCdhryFoPH5FD8T7VatiJXSg8qetx5A-dzNd5CxsialItAmR4lvJvoesY6jLezcLBsMi3crCKnbbZ3VwZoHj7VJBHs/w463-h240-no/" class="cubeStop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRi5T3MqUcadffight6ZnmI2LuKnsuYXBdxhykqtJsbKN4YVI7YztsM5Noz4sYMQJk6KDIeOBl31c4UrqrcBCzlM67IEuvU0Oop7_9nZWeCSFldxUeFSfpLRDK7cYJyJw3IIw9_VF48/w463-h240-no/" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg269fy24RJhnTRhMQf886FhhcL56MtFmvgyRDhNiY_9zZfXRJyPKybxCmfNTPIqvQGFYGV-iETDD6yIuATH4Vh9R1eQDWtocwF5-a-hS8GwUrHa_mhX6KqT_3ZJu_VuKCwI81tmRH-CjI/w463-h240-no/" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVRUsaXVLEDlqmNOkqoZJKXFGUhuamlUBh_iy503MYs6-sCiMvcchHuBp-LdGlI3jgcSZbl6NmApBAZZ1kjzr-vOzQiacKtWvTOq5LRYavzCsLN4UIMB4_-X3ZmEAs1Izjoop2DfJ-H34/w500-h300-no/" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhc_ER3myadj0I4JgxJGfDMy8y__C12WzQBmEyYViz5cU47IaiwnrzITcimag7Cl1RUHJH1OKQD-DQpmlgmCd9zFvsS2Wp6nJN1PQtN9BCQfAzgB2-GIx2mFmfYBb7GjkUv0XUlWK1AA/w852-h284-no/" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiKxdQM8qW4NwkS3EIv4AOnwcnaSmkp8TxNScewmZ1vxHhyphenhyphenOVUw7bwSPr8fj7-UtrCyDQozW2rZpT54EYrh7TaPDh_q8Q77F64XvReYVUP95v-e7i9MXD19hBdTLObMwWW2Z45qNANM8/w500-h300-no/" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFpgwioPTgNb0Mk2RoVaEoCncMLgq0MzO2qWdxzZuwYPq4XwgYH00Htj-xd-3kHU46IiLbK6fl3TnpiilM9it_1gmQgJg8lpe1R9EaxwqZJ2ToT_0dDznwSOk9N0kKqok96dK5PINUFs/w758-h438-no/widget-contact-form-blogger.jpg" class="tube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek tube</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNSwGdST4RtP935i0mNw0AJwass6j6vtbOcV15Pr8-4sY1oyYaG5ngxNyeUEVI1DWa7BNgklprP_o1A8xzOsW_dOcgxJHOxa5htALd3snuln2jfQ-gwJJzx2GViFQex392hNPrCzPaME/w500-h300-no/" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6A9Pma89OzPnzFTWLgnSpiTlDPJ9e_wgChfpCqK13cdPm13GsdZzDyQ-lEDzRuixoknvf9IHYg_Zv2BiQS_WTcM5h6L1E5E5w3q1l2j7NcZptcLr7hA5pXaeHSYqU0piIwxCph5YmL3s/w600-h300-no/form-email-subscribe-blogger.png" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fadefour</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaylsM7Jkxm8xBNuyIyM0vUwGyxCU2ReFmFdH7j9I-1a7_Aau18W4zeE2Js6ed2C9oO7VddZyJb_FnqvgyZpKlOikHKjBvDjEzT7ixcPA8-9J9K0PBjAo8_lE-Qe20EhGGV6dYzSvXVX8/w985-h533-no/widget-contact-form-official-blogger.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek paralell</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFttFNTcwqneBdCqK5oQyO_VPQ0Gsq0jSOoJ1NYxAjAYPMG42RsQ4sTE7EDpnGDcGv3M9GAamO5InZ1_lJ8Glq1BuwGn2r13nIDOOwP6syundA83IS7C4U8s3zSfGcBdNVKqvwCGdKIWk/w540-h180-no/Pop-Up-Widget-Google%252B-Follower-for-blogger.png" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blind</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lG6Mlg1FAmZgY9-l1q6YUXzZAuDZr6wSoyMhaaJOqMSICh0S1f4aVgJ8MPAMwkU-aGgM2SiEp3UL7m7qcBBjR3BXlnZeP7sFY_yT7DfWGZn-1_DvK5kaqaP3yVHwmhy359TNxoSPI8k/w353-h243-no/Pop-Up-Widget-Google%252B-Follower-2.png" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindheight</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRv-sEOPbUXO0SSNdNEoVS98-ISL-iP1RKg5ZGmolFYQhOMmZCQOwPoWdDor8C17dPmDI91rOxNxuV68pnfKuOqVMxudWLx5ABwlnXYT84-1VaxuxvTDiBuHsAtAgFeYaxfcHdHQ5fX0Q/w540-h180-no/modifikasi-email-subscribe.jpg" class="blindWidth" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindwidth</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYo6d3Pgh-DtWiXFul7dXLrfUsA8DD6549qGq7y22pqFW_NXZftWG4955yV4QkWY_s-HKTE4b6pf8XsqZyXqqu8RlXg5IO_om5ZJryA7AeGUxyGw6skqHnj_ITQZGdjneMiY6qzm_OAA/w540-h179-no/modifikasi-facebook-like-box.jpg" class="directionTop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionTop</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsCigMdHpAhQf5aU2uxqJNgOgB0IohCmowK9j4ejyzgi1_MbGAZ_P5nClQDJhdXzEmbGIpwB7YKXu_SyYIwoVumBAWa73JHJZwjAk9wxlpkGr8bFrt0y2PYRH0bo2S93UpcDIxMRowQmI/w540-h179-no/modifikasi-widget-google%252B.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionBottom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic7i4gHSjKFPtSsr-K14LCdyKIThdSj6puBuhPFYc179Lr7YsjpmsS8bKAG6mrDHECv_a6F-AzQ-l2OVhtYCaEJ720gsb0XAhMSep8V16AT_sC6lolLvpcnBM8NiN7s7-72ptbKK4HMwI/w500-h300-no/" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9laLBVs2Yag-Ps_NnxwcIw5CXCdDmlTyA1X62h60-DBZxFdDVxhfvf4IPK3pvmKsaYSjEEqj9eR0n7koVGuQqa2_An5dlFjEAOvrVvVMcYADEDraIcaAkptaDH8C0rHMDc9rfDr-h1Wg/w400-h274-no/flod-image-hover.jpg" class="directionLeft" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionLeft</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl8jhJhXjAZNRyU4D3gwkMtQGJky0ujYtF2OjWFVRrqLtGXM7ZDvdQThBD8CU5lGLzF06k10NYscOV5_HeRxXjFZWpUQh5ijn_5v5zuAyz0SGsaJqXnPDds2xjTDVCnQyvPZOCNvQqEmc/w725-h459-no/widget-sidebar-ribbon.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeStopRandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxqHN9hnAbOCPX8DyGzXXniC2jA-ifZeJMBg6Pz5DZyjx2vdPL5R_5JPLNhdYX_AQviAYoGeJXhZz8E0Td67CVDd6ADT8PXHT2009qraKEW4_XVcR9rfYRCPAp_AeUIB75NAxg8QELM8/w587-h344-no/sidebar-ribbon.2.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeSpread</p></div></li>                <br /></ul><br /></div><br /></div></pre>Keterangan:<br />Ganti<b> http://mas-andes.blogspot.com</b> dan URL gambar.<br /><br />4. Paste kode tersebut kedalam Widget HTML/Javascript.<br />5. Langkah terakhir Simpan.<br /><br />Di atas hanya kode dasarnya saja, silahkan sesuaikan atau custom sendiri dengan tampilan yang lebih menarik sesuai dengan selera masing-masing.

Cara Memasang Skitter Slideshow di Blog – setelah beberapa waktu lalu sudah pernah membahas untuk Menambah Fitur jQuery Animasi Slider Pada...

Read More

Menambah Fitur jQuery Animasi Slider Pada Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IZIEu7aNJv5VPTKSuCGoiGVHNZPfbe9DsLlZDvzR2jDb240U1m1JHaaCdBFz0NqqoACVEUp_9bwOeOlKKpipIB-dgQHigMvgW-Va0vnAxKbHQAV6LrgOafpvfgpYSbKtkMwM_nzA-z8/s1600/animasi+slider+blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Animasi Slider Blog" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IZIEu7aNJv5VPTKSuCGoiGVHNZPfbe9DsLlZDvzR2jDb240U1m1JHaaCdBFz0NqqoACVEUp_9bwOeOlKKpipIB-dgQHigMvgW-Va0vnAxKbHQAV6LrgOafpvfgpYSbKtkMwM_nzA-z8/s320/animasi+slider+blogger.jpg" title="Menambah Fitur jQuery Animasi Slider Pada Blog" width="540" /></a></div><b>Menambah Fitur jQuery Animasi Slider Pada Blog</b> – untuk pengguna template blogger jika ingin memodifikasi dengan memasang slider pada blognya dan ingin langkah yang simple tanpa perlu melakukan editing template blog pada edit HTML bisa menggunakan langkah ini hanya dengan menambah widget HTML dan ini tentu sangat mudah karena untuk anda yang juga masih tahap belajar sama seperti saya juga pasti bisa melakukannya dengan waktu yang cepat dan mudah dalam menerapkan. Apabila suka menggunakan slider sama seperti saya untuk melengkapi desain blog mungkin ini bisa menjadi sedikit tambahan koleksi slider dan dapat langsung diterapkan pada elemen tata letak blog karena mungkin untuk sebagian blogger yang masih pemula sama seperti saya langkah ini bisa sebagai alternatif. Untuk lengkah lebih jelasnya dalam menerapkan animasi slider kedalam blog maka berikut adalah tutorial untuk cara <b>Menambah Fitur jQuery Animasi Slider Pada Blog</b>.<br /><a class="button" href="http://testerfaceblog.blogspot.com/" rel="nofollow" target="_blank">Demo</a><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini.<br /><blockquote><style type="text/css"><br />.wrapper-translider3d {<br />position:relative;<br />width:900px;<br />height:300px;<br />display:block;<br />}<br />.s-shadow-b{<br />background:#000;<br />width:900px;<br />height:15px;<br />position:absolute;<br />bottom:-15px;<br />}<br />#slider {<br />width:900px;<br />height:300px;<br />position:relative;<br />display:block;<br />}<br />.slide { display:none; }<br />.cs-activeSlide { display:block; }<br />.slide-descriptions { display:none; }<br />.caption {<br />background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-M1yhXHwUUb2cX5fWdPjicUyQ2OhlPn63r5p04hFQlFxOJPak2FhEKMorgswGZ153vhjE8Wb-8_e2caG6q6Zxqpc9qQtPjIUOxaIGZoifezXzJ14y50JlpxThnuEkG7NbBS60a2Cyyg/h120/d-bg.png") repeat scroll 0 0 transparent;<br />color: #FFFFFF;<br />display: none;<br />height: 260px;<br />padding: 20px;<br />position: absolute;<br />right: 40px;<br />top: 0px;<br />width: 180px;<br />z-index: 3;<br />}<br />.pagination {<br />bottom: -17px;<br />left: 345px;<br />position: absolute;<br />text-align: center;<br />}<br />.slider-pagination {<br />display:inline-block;<br />width:15px;<br />height:10px;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTY0-eoNQIJfBI3yClLCS8e1gjy_iKcDwl5bSMQXSE78xV9i8R5uXE8967YKVcObwO1NHVye7bUDAhsjFioJzKHPkLGgoQ2CP5-trcaisOuZn_MMhndi5maEcTv6Ek3U8Rnwnjvm7J2I/h120/navi.png) no-repeat left bottom;<br />margin:0 10px;<br />cursor:pointer;<br />position:relative;<br />}<br />.cs-active-pagination {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTY0-eoNQIJfBI3yClLCS8e1gjy_iKcDwl5bSMQXSE78xV9i8R5uXE8967YKVcObwO1NHVye7bUDAhsjFioJzKHPkLGgoQ2CP5-trcaisOuZn_MMhndi5maEcTv6Ek3U8Rnwnjvm7J2I/h120/navi.png) no-repeat left top;<br />}<br />.slider-2 {<br />padding-top:0;<br />}<br />#slider-1, #slider-2 {<br />width:900px;<br />height:300px;<br />position:relative;<br />display:block;<br />}<br />.cs-activeSlide-2 {<br />display:block<br />}<br />.cs-active-pagination-2 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTY0-eoNQIJfBI3yClLCS8e1gjy_iKcDwl5bSMQXSE78xV9i8R5uXE8967YKVcObwO1NHVye7bUDAhsjFioJzKHPkLGgoQ2CP5-trcaisOuZn_MMhndi5maEcTv6Ek3U8Rnwnjvm7J2I/h120/navi.png) no-repeat left top;<br />}<br /></style><br /><script src="http://code.jquery.com/jquery-latest.min.js"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/translider-2.2.0.min.js"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/translider-1.2.min.js"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/main.js"></script><br /><br /><div class="wrapper-translider3d"><br /><div class="s-shadow-b"></div><br /><div id="slider"><br /><div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYW17pYtO80Abn7wRCDLyWAgFURJaVKOVIBujCFYXurH8XhR4AVzsAXOhUWkgpSzcbBp9ZZwvJ24jHhEhNAe2UaVxV7e5VAGLgenyUL200qVapPnjII-QqqwtKpjIH8HsXK3MNDr1OJY/w900-h300-no/Faceblog-Evolutions-%25286%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHiaub1tDx9NsMnW_8rMu0_Spi4anYSJBjrg1GsJWsc51wGoUdPgjeboiSIJQfYGOkiabGFNFmoFu2AcbvOqDojh3qBwYeWukp0YEVdRiXofAlllaIcmUMqeT8HWO9Z3oPM1Nm4wyDDc/w900-h300-no/Faceblog-Evolutions-%25287%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZk9MKiU1pgmWihaRQ9dy2t3HRnTGC_Ll-pLTQWmz8WGRg6BJ2sbo7P2RI2m3GIU1r2paRjr8Vfuig7q4HrOrajiKrKjheccPt1PZN3EIzVD0bFlWAMj1PRUUiwnf6o4SZV-I1t2ySYU0/w900-h300-no/Faceblog-Evolutions-%25285%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIXKXptNKpzFNIXVxVYCUjJztxroropiZDhHEd-ZsWRIkGhE7mcC3lD5pO6r3zKtXlcg_y88oUrtiZKq_DlBNOt6gd8DPi63zJ6S2YZQYacoOJ4GQjk_7AUxdcnNWJ4nDu76cUN35YXA/w900-h300-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SsPRGN48IrErOypuwptaSDeHxFz3ZPnRAEzyl28y5ubC_42OsSfszytr79nDcQC__XV9epFNRGgitU0mvZJfXV1yx31z9HszTJEGGJ3jeIvM0TDwoaZ8IZMkw0Vd3a9vdqIT6DA5BbQ/w900-h300-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGrGKSgW2WZrgVmwXks7llPZdgQ6bBv1UDGONHCSjNEDiJoIwWuFTHcrkwfqgHjstHvShtFdDxpol4xK7WGI0k0qARocnyb6cjUS-BF5wcx09YKB_J58GN2Tphjz77zHZDPwgKptj_3M/w900-h300-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3HWC6_S9C5X3um8aY3Svj7V6y_8AB3DfgoUNdBL1yeALeCmtlG_VUw5h-w9eveQsAjhpj1CgbtgNByhWnsjhjS_ODlBkkjx8XjxHz6pTxcq9eNeh-TAJ0-R_A503-oXmGSuH4tzWB9A/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /></div><br /><div class="pagination"> <br /><span class="slider-pagination"></span> <br /><span class="slider-pagination"></span> <br /><span class="slider-pagination"></span> <br /><span class="slider-pagination"></span> <br /><span class="slider-pagination"></span> <br /><span class="slider-pagination"></span> <br /><span class="slider-pagination"></span> <br /></div><br /><div class="slide-descriptions"><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /><div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div><br /></div><br /><div class="caption"></div><br /></div></blockquote>Keterangan:<br />Untuk width dan height maupun URL gambar serta descriptions silahkan anda sesuikan selera, ubah angka 900 dan samakan dengan lebar blog anda.<br />Untuk merubah link halaman dan URL gambar silahkan ubah pada bagian dibawah ini:<br /><blockquote><div id="slider"><br /><div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYW17pYtO80Abn7wRCDLyWAgFURJaVKOVIBujCFYXurH8XhR4AVzsAXOhUWkgpSzcbBp9ZZwvJ24jHhEhNAe2UaVxV7e5VAGLgenyUL200qVapPnjII-QqqwtKpjIH8HsXK3MNDr1OJY/w900-h300-no/Faceblog-Evolutions-%25286%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHiaub1tDx9NsMnW_8rMu0_Spi4anYSJBjrg1GsJWsc51wGoUdPgjeboiSIJQfYGOkiabGFNFmoFu2AcbvOqDojh3qBwYeWukp0YEVdRiXofAlllaIcmUMqeT8HWO9Z3oPM1Nm4wyDDc/w900-h300-no/Faceblog-Evolutions-%25287%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZk9MKiU1pgmWihaRQ9dy2t3HRnTGC_Ll-pLTQWmz8WGRg6BJ2sbo7P2RI2m3GIU1r2paRjr8Vfuig7q4HrOrajiKrKjheccPt1PZN3EIzVD0bFlWAMj1PRUUiwnf6o4SZV-I1t2ySYU0/w900-h300-no/Faceblog-Evolutions-%25285%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIXKXptNKpzFNIXVxVYCUjJztxroropiZDhHEd-ZsWRIkGhE7mcC3lD5pO6r3zKtXlcg_y88oUrtiZKq_DlBNOt6gd8DPi63zJ6S2YZQYacoOJ4GQjk_7AUxdcnNWJ4nDu76cUN35YXA/w900-h300-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SsPRGN48IrErOypuwptaSDeHxFz3ZPnRAEzyl28y5ubC_42OsSfszytr79nDcQC__XV9epFNRGgitU0mvZJfXV1yx31z9HszTJEGGJ3jeIvM0TDwoaZ8IZMkw0Vd3a9vdqIT6DA5BbQ/w900-h300-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGrGKSgW2WZrgVmwXks7llPZdgQ6bBv1UDGONHCSjNEDiJoIwWuFTHcrkwfqgHjstHvShtFdDxpol4xK7WGI0k0qARocnyb6cjUS-BF5wcx09YKB_J58GN2Tphjz77zHZDPwgKptj_3M/w900-h300-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /><div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3HWC6_S9C5X3um8aY3Svj7V6y_8AB3DfgoUNdBL1yeALeCmtlG_VUw5h-w9eveQsAjhpj1CgbtgNByhWnsjhjS_ODlBkkjx8XjxHz6pTxcq9eNeh-TAJ0-R_A503-oXmGSuH4tzWB9A/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div><br /></div></blockquote>3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.

Menambah Fitur jQuery Animasi Slider Pada Blog – untuk pengguna template blogger jika ingin memodifikasi dengan memasang slider pada blogny...

Read More

Dinamis Slider Navigation With CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggjcxLxcoc9OaLIFp4MJQIGU3MG4l2H9XQv-1FBm8AcGf42e2hGkSPwT-93RDxUsBEK58ANVxAfDUCPiMz45IyDAdlY9j-IQphgtLGSqaa3qbrlW49nn4aofMbG0dKB3ILCXxd7VbmeZA/w812-h318-no/slider+ribbon-for-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Dinamis Slider Navigation With CSS3" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggjcxLxcoc9OaLIFp4MJQIGU3MG4l2H9XQv-1FBm8AcGf42e2hGkSPwT-93RDxUsBEK58ANVxAfDUCPiMz45IyDAdlY9j-IQphgtLGSqaa3qbrlW49nn4aofMbG0dKB3ILCXxd7VbmeZA/w812-h318-no/slider+ribbon-for-blogger.gif" title="Dinamis Slider Navigation With CSS3" width="540" /></a></div><b>Dinamis Slider Navigation With CSS3</b> – masih pada tema yang sama seperti pada pembahasan tutorial sebelumnya yakni masih seputar slider. Walaupun slider tergolong widget yang kurang disenangi oleh sebagian blogger kerena mungkin terkadang menurut para blogger juga memberatkan loading blog, namun itu hanya menurut sebagian blogger saja dan masih banyak juga blogger yang masih suka menggunakan slider untuk melengkapi desain dari tampilan blognya. Sedikit trik akan sedikit saya bahas disini, dalam menggunakan slider tentunya juga harus memperhatikan size file gambar yang nantinya akan di tampilkan kedalam slider. Jika size file gambar tersebut terlalu besar tentu untuk load gambar pada saat slider berjalan terkadang gambar yang ada tidak muncul dikarenakan waktu load yang terlalu lama untuk mengambil gambar tersebut dari URL-nya. Itulah sebabnya saya jarang menggunakan URL gambar langsung dari blogspot.com jika gambar tersebut akan saya terapkan kedalam slider karena pada slider sendiri sudah tampak jelas pasti gambar yang digunakan juga berukuran cukup besar. Oke sampai disini tentu sudah paham yang saya maksud, oleh sebab kita lanjut lagi ke pembahasan. Untuk menambah fitur slider ke dalam blog berikut adalah tutorial cara membuat <b>Dinamis Slider Navigation With CSS3</b> di 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. Copy kode dibawah ini.<br /><blockquote class="tr_bq"><style><br />.main_slider {<br />float: left;<br />position: relative;<br />}<br />.window_slider {<br />height:286px;<br />width: 900px;<br />overflow: hidden;<br />position: relative;<br />}<br />.image_reel {<br />position: absolute;<br />top: 0; left: 0;<br />}<br />.image_reel img {float: left;}<br />.paging {<br />position: absolute;<br />bottom: 40px; right: -7px;<br />width: 178px; height:47px;<br />z-index: 100;<br />text-align: center;<br />line-height: 40px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRnXwUxJ7t2wdE8wJ-dGuYul1VS_zv2a1dn4qkVO-A5rdye00UEixTKRVdfW9JqMVYfAsORk2wBAvwqCJ-zMLLH5h_GUzzFmuHTzuZpgGPvHQb4RJ1gxFWn4EE8MifgbVmfBOT-Q_EEjX/h94/paging_bg2.png) no-repeat;<br />display: none;<br />}<br />.paging a {<br />padding: 5px;<br />text-decoration: none;<br />color: #fff;<br />}<br />.paging a.active {<br />font-weight: bold;<br />background: #920000;<br />border: 1px solid #610000;<br />-moz-border-radius: 3px;<br />-khtml-border-radius: 3px;<br />-webkit-border-radius: 3px;<br />}<br />.paging a:hover {font-weight: bold;}<br /></style><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.js"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$(".paging").show();<br />$(".paging a:first").addClass("active");<br />var imageWidth = $(".window_slider").width();<br />var imageSum = $(".image_reel img").size();<br />var imageReelWidth = imageWidth * imageSum;<br />$(".image_reel").css({'width' : imageReelWidth});<br />rotate = function(){<br />var triggerID = $active.attr("rel") - 1; <br />var image_reelPosition = triggerID * imageWidth; <br />$(".paging a").removeClass('active');<br />$active.addClass('active'); <br />$(".image_reel").animate({<br />left: -image_reelPosition<br />}, 500 );<br />};<br />rotateSwitch = function(){<br />play = setInterval(function(){ <br />$active = $('.paging a.active').next();<br />if ( $active.length === 0) { <br />$active = $('.paging a:first');<br />}<br />rotate(); <br />}, 7000); <br />};<br />rotateSwitch();<br />$(".image_reel a").hover(function() {<br />clearInterval(play);<br />}, function() {<br />rotateSwitch();<br />});<br />$(".paging a").click(function() {<br />$active = $(this);<br />clearInterval(play);<br />rotate();<br />rotateSwitch();<br />return false;<br />});<br />});<br /></script><br /><br /><div class="main_slider"><br /><div class="window_slider"><br /><div class="image_reel"><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZFRwmBL15twMRO7qnNJ9_aztkpGaOHdtDAMmUSm4bXIG5M3NnXnWtSzv4gRENC6SpsTW3dmBaPC-EH479WxybF9d1WE8PZFg9lJuo5TLia3cvqdp5NKyCqxsrivaJYEhFJlj7bZ9wY8/w790-h286-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" alt="Faceblog Evolutions"/></a><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc5UrqPRDOAbmDGF7BP7GBIaPKmLGN2s7kw7EtJCFHxhPd0Web36PQ7jtnQsaNgG3mR7t2JlL51Sftms40MtEA2UaJLt_sm4ucZB-PNfRoP0BdVDNWh7_IMGs_-9V9qoqg9EgJGzYv6ps/w790-h286-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" alt="Faceblog Evolutions"/></a><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBARTYjaLtK1AAg-ijV02N-QCubJ3KStZAlDEbrHhIEvqj1CoOs0JNdK0Q1UalrPXj3soZX8ep-7vZzKbfSb6AWGVSuWQwGVo7aC-ds6FcnvoQPTlGRiZXND8qyniZuBwCzW2mDBinRQ/w790-h286-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" alt="Faceblog Evolutions"/></a><br /><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuiHlYdUqXH04uFJ9zhRlWyCqXiGVTZ6Ss1KNSSFTBWF9Btjw5J7hvamOxbVvTkVlYqCcHrNuvfPIernvIDoPQXh1Q7gMF0D752SnXMKc7AJgTqUkBZKQsdL5qtx-PGggugRHqiUEpCoE/w790-h286-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" alt="Faceblog Evolutions"/></a><br /></div><br /></div><br /><div style="display: block;" class="paging"><br /><a href="http://mas-andes.blogspot.com" rel="1">1</a><br /><a href="http://mas-andes.blogspot.com" rel="2">2</a><br /><a href="http://mas-andes.blogspot.com" rel="3">3</a><br /><a href="http://mas-andes.blogspot.com" rel="4">4</a><br /></div><br /></div></blockquote>Keterangan:<br />Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan. <br />Untuk width dan height maupun URL gambar silahkan anda sesuikan selera.<br /><br />3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.

Dinamis Slider Navigation With CSS3 – masih pada tema yang sama seperti pada pembahasan tutorial sebelumnya yakni masih seputar slider. Wal...

Read More

Cara Menambah Fitur Slider Pada Blog With CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmepJEv9nxPMU_5y3B9BNsHHbgDBoF_DYMgLvIzkjOGBv1xT0RKGQ8DJxJWHOcu1RYVo2x9tT_zmYgFFyE62zzSM-ukHwFLrxw-Di_Ez_JwcouGg-lIcoKVtzv59zjBjcOh0-Jd5fxlyU/s500/slider-blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Fitur Slider Blog With CSS3" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmepJEv9nxPMU_5y3B9BNsHHbgDBoF_DYMgLvIzkjOGBv1xT0RKGQ8DJxJWHOcu1RYVo2x9tT_zmYgFFyE62zzSM-ukHwFLrxw-Di_Ez_JwcouGg-lIcoKVtzv59zjBjcOh0-Jd5fxlyU/s320/slider-blog.jpg" title="Cara Menambah Fitur Slider Pada Blog With CSS3" width="320" /></a></div><div style="text-align: justify;"><b>Cara Menambah Fitur Slider Pada Blog With CSS3</b> – untuk menambah kelengkapan fitur pada template blog guna mempercantik tampilan maupun memang suka dengan adanya slider pada sebuah blog, mungkin ini bisa menjadi alternatif dan penerapanya untuk yang membutuhkan apabila ingin lebih mengkreasikan blognya. Slider blog memang banyak dikenal dan tidak jauh dari speed loading, namun hal tersebut bisa teratasi tergantung dari slider yang digunakan. Pada tutorial ini slider hanya berupa sederhana dengan tampilan yang minimalis dan tidak banyak efek digunakan  sehingga akan tetap menjaga speed loading pada template blog yang digunakan. Oleh sebab itu pengguna slider juga tidak perlu khawatir akan terganggu pada loading blognya dengan adanya slider yang menempel pada blognya. Untuk menggunakannya terdapat dua pilihan, pada slider pertama terdapat title di sisi kanan thumbnail sedangkan pada slider kedua tidak terdapat title pada thumbnail. Oke langsung saja untuk penerapannya kedalam blog, maka berikut adalah tutorial <b>Cara Menambah Fitur Slider Pada Blog With CSS3</b>:<br /><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini.<br /><strong>SLIDER 1:</strong></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh40cx9xf8v3ysBz95sACR5TIlVIIeBrQ_ncMoC5th2UN2th4Bdq1orJLZ0tXQRC8z0LNF1MIgljFnELcS1EbKarFAcZJ105r25E6R6TmAU1Ly8oku71fnpz_4Zn7Y7Hc05MRLqSUux6io/w677-h299-no/Fitur-Slider-Blog.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Fitur Slider Pada Blog With CSS3" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh40cx9xf8v3ysBz95sACR5TIlVIIeBrQ_ncMoC5th2UN2th4Bdq1orJLZ0tXQRC8z0LNF1MIgljFnELcS1EbKarFAcZJ105r25E6R6TmAU1Ly8oku71fnpz_4Zn7Y7Hc05MRLqSUux6io/w677-h299-no/Fitur-Slider-Blog.gif" title="Cara Menambah Fitur Slider Pada Blog With CSS3" width="540" /></a></div><blockquote class="tr_bq" style="height: 250px; overflow: auto; padding: 10px;"><style><br />#sliderblog{ <br />width:400px; <br />padding-right:250px; <br />position:relative; <br />border:5px solid #ccc; <br />height:250px; <br />background:#fff;<br />}<br />#sliderblog ul.ui-tabs-nav{ <br />position:absolute; <br />top:0; left:400px; <br />list-style:none; <br />padding:0; margin:0; <br />width:250px;<br />}<br />#sliderblog ul.ui-tabs-nav li{ <br />padding:1px 0; padding-left:13px;  <br />font-size:12px; <br />color:#666; <br />}<br />#sliderblog ul.ui-tabs-nav li img{ <br />float:left; margin:2px 5px; <br />background:#fff; <br />padding:2px; <br />border:1px solid #eee;<br />}<br />#sliderblog ul.ui-tabs-nav li span{ <br />font-size:11px; font-family:Verdana; <br />line-height:18px; <br />}<br />#sliderblog li.ui-tabs-nav-item a{ <br />display:block; <br />height:60px; <br />color:#333;  background:#fff; <br />line-height:20px;<br />}<br />#sliderblog li.ui-tabs-nav-item a:hover{ <br />background:#f2f2f2; <br />}<br />#sliderblog li.ui-tabs-selected{ <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dvgwFpi0-Z1YCztVX8xdPQ79riPdv2i-WB7eZGkGrvYzzDUDycGuLsP5nCCSr16G4UDCebZO4tCflx5-rbyNQsl6V8nTbTLBm1gY3rD8hkW4KP5tz0xnOQRm1zG4nlKUerMv6L52PSfC/w15-h40-no/selected-item.gif') top left no-repeat;  <br />}<br />#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{ <br />background:#ccc; <br />}<br />#sliderblog .ui-tabs-panel{ <br />width:400px; height:250px; <br />background:#999; position:relative;<br />}<br />#sliderblog .ui-tabs-panel .info{ <br />position:absolute; <br />top:180px; left:0; <br />height:70px; <br />background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxmMHtexaGJMgTPUSeYXT70Ovj3C7EU8x0Kjz33lG3P9N58J_1UN_ahxQYeoNsJNpmfHmAEaFg1obcg0DqMl6nXCL9OXWFVM5vzyC6R6G8l-7TzwEFRYtlT1Gt7_8H-g1sQwvhrVFTwQo/s2/transparent-bg.png'); <br />}<br />#sliderblog .info h2{ <br />font-size:18px; font-family:Georgia, serif; <br />color:#fff; padding:5px; margin:0;<br />overflow:hidden; <br />}<br />#sliderblog .info p{ <br />margin:0 5px; <br />font-family:Verdana; font-size:11px; <br />line-height:15px; color:#f0f0f0;<br />}<br />#sliderblog .info a{ <br />text-decoration:none; <br />color:#fff; <br />}<br />#sliderblog .info a:hover{ <br />text-decoration:underline; <br />}<br />#sliderblog .ui-tabs-hide{ <br />display:none; <br />}<br /></style><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script><br /><script type="text/javascript"><br />$(document).ready(function(){<br />$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);<br />});<br /></script><br /><br /><div id="sliderblog" ><br /><ul class="ui-tabs-nav"><br /><li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqtEXIdebZABZNLCNpwHS4sHwcRSmHNiH5-vBswmUL-5W6E5EFP-rRSnnuly1VKTUopdDmglGqPzI3aeGBEUAmv102Yj9ccaZUp9dBgFN2vumXQllyZh9NWpm_t1yLDN5QkUNiPGq4SOb/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /><span>Faceblog Evolutions</span></a></li><br /><li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLW4xZmycyXHDEnXHOUiTnzmrvq0whTDRvxRcVR6mARdnmQGrx3a5l4TV86KsoIokSg9-vUpIxaHN2EbbbmGU-VbEVyTIPgYqmIWkopQtAG8241X_yyKkJLe0LVyWj7bNTkDB1bwDSqByj/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /><span>Membuat Iklan Seperti Google Adsense</span></a></li><br /><li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7vuk5x_9GuKAbcYbNottCdVjPvoh6v-SLFs9LWSZtIS1i_-Brr0fho3ocupM8lL4xHEwBeYFkbTucl1byS2EDlC702fbNthQiGZJOEOY7K1BuCtZarfZT6yGgj8LGRgFKnoehhV0YGKcM/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /><span>Optimasi Meta Tag SEO Valid HTML5</span></a></li><br /><li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGA__R7jBp-Ns68En-lkX-yLeRSpoK-XC6SlIYE1ELKWNP5d6plGCPqHtV3Js8YrWTUbdMNsujM5vNf8E3E6C208A1Gxi5Y9x7PH_PWv_kpd51JJvvryYMGKSuEfvqvBNII57vDvkgSogc/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /><span>Membuat Sidebar Blog Efek Ribbon</span></a></li><br /></ul><br /><br /><div id="fragment-1" class="ui-tabs-panel"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbMCsk8k2uuKdOA6KDSXMZPgZCzaJjYI-tYAxuBBzbKa-EwZOfF9lMn9Gvgg2G3y-a1uO8RQ_YawhgbtQCaByTLIXwE1wmKCU5q_TkZzo1WaW3TCAokpYDqXYhWD7OGHyofwHwpElwks8/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2><br /><p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p><br /></div><br /></div><br /><br /><div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdHFyW3x9HmgkVi-6t0Kp8PKb7jZcnup5Pe5LgKaN_AHF_Xc51bLF693Gc9_Qp-cyvhNdtIqAG_LCpXFOQNlXBVo3ToaDLbrrj5NHbEps5o_Tu8GhbLNSkrgMY4RRiNHCZXNkevfVsBcC/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2><br /><p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p><br /></div><br /></div><br /><br /><div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt41WkqhrBWGesGb5sPCRC81eqOmQIjkGEX6ncMAq9tpeyqt3Oyu8TCTFMVIGDLVrkKTcn34TGLniYq-ApNda3Caj3LpSiTcQ_U7x-6tYm6GHilDKeBjBBGrjSlO3ySgZOF59eo9A2xSM/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2><br /><p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p><br /></div><br /></div><br /><br /><div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBX9N15CUeS4HOt2tTdTXW41IamSsJKLUo4H3Xqx1pQi3qTk-4JewpmY6pxy1w45d1oV_w_pZaVakG-EYH4Q_A42VIOjn7bbWtE_T53C7Lx2wkXrh6K3jhffILN_TztdEmDjJMw3WAc7Av/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2><br /><p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p><br /></div><br /></div><br /></div></blockquote><strong>SLIDER 2:</strong><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQSrFka6WRQewr2iSSKUb4Deskl9AuLFBiP7uYmMAKNk2XbVSsHMZ-WgCMjVnFdr3G1x3h_LOGu86z7cQIXmGio0mo_PriSW6Anks-JDDfndcdeDqLYfs_eh3gDOkfJrtm2TLhsyaqxg/w539-h293-no/Fitur-Slider-Blog-minimalis.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Fitur Slider Pada Blog With CSS3" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQSrFka6WRQewr2iSSKUb4Deskl9AuLFBiP7uYmMAKNk2XbVSsHMZ-WgCMjVnFdr3G1x3h_LOGu86z7cQIXmGio0mo_PriSW6Anks-JDDfndcdeDqLYfs_eh3gDOkfJrtm2TLhsyaqxg/w539-h293-no/Fitur-Slider-Blog-minimalis.gif" title="Cara Menambah Fitur Slider Pada Blog With CSS3" width="540" /></a></div><blockquote class="tr_bq" style="height: 250px; overflow: auto; padding: 10px;"><style><br />#sliderblog{ <br />width:400px; <br />padding-right:115px; <br />position:relative; <br />border:5px solid #ccc; <br />height:250px; <br />background:#fff;<br />}<br />#sliderblog ul.ui-tabs-nav{ <br />position:absolute; <br />top:0; left:400px; <br />list-style:none; <br />padding:0; margin:0; <br />width:115px;<br />}<br />#sliderblog ul.ui-tabs-nav li{ <br />padding:1px 0; padding-left:13px;  <br />font-size:12px; <br />color:#666; <br />}<br />#sliderblog ul.ui-tabs-nav li img{ <br />float:left; margin:2px 5px; <br />background:#fff; <br />padding:2px; <br />border:1px solid #eee;<br />}<br />#sliderblog ul.ui-tabs-nav li span{ <br />font-size:11px; font-family:Verdana; <br />line-height:18px; <br />}<br />#sliderblog li.ui-tabs-nav-item a{ <br />display:block; <br />height:60px; <br />color:#333;  background:#fff; <br />line-height:20px;<br />}<br />#sliderblog li.ui-tabs-nav-item a:hover{ <br />background:#f2f2f2; <br />}<br />#sliderblog li.ui-tabs-selected{ <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dvgwFpi0-Z1YCztVX8xdPQ79riPdv2i-WB7eZGkGrvYzzDUDycGuLsP5nCCSr16G4UDCebZO4tCflx5-rbyNQsl6V8nTbTLBm1gY3rD8hkW4KP5tz0xnOQRm1zG4nlKUerMv6L52PSfC/w15-h40-no/selected-item.gif') top left no-repeat;  <br />}<br />#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{ <br />background:#ccc; <br />}<br />#sliderblog .ui-tabs-panel{ <br />width:400px; height:250px; <br />background:#999; position:relative;<br />}<br />#sliderblog .ui-tabs-panel .info{ <br />position:absolute; <br />top:180px; left:0; <br />height:70px; <br />background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxmMHtexaGJMgTPUSeYXT70Ovj3C7EU8x0Kjz33lG3P9N58J_1UN_ahxQYeoNsJNpmfHmAEaFg1obcg0DqMl6nXCL9OXWFVM5vzyC6R6G8l-7TzwEFRYtlT1Gt7_8H-g1sQwvhrVFTwQo/s2/transparent-bg.png'); <br />}<br />#sliderblog .info h2{ <br />font-size:18px; font-family:Georgia, serif; <br />color:#fff; padding:5px; margin:0;<br />overflow:hidden; <br />}<br />#sliderblog .info p{ <br />margin:0 5px; <br />font-family:Verdana; font-size:11px; <br />line-height:15px; color:#f0f0f0;<br />}<br />#sliderblog .info a{ <br />text-decoration:none; <br />color:#fff; <br />}<br />#sliderblog .info a:hover{ <br />text-decoration:underline; <br />}<br />#sliderblog .ui-tabs-hide{ <br />display:none; <br />}<br /></style><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script><br /><script type="text/javascript"><br />$(document).ready(function(){<br />$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);<br />});<br /></script><br /><br /><div id="sliderblog" ><br /><ul class="ui-tabs-nav"><br /><li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqtEXIdebZABZNLCNpwHS4sHwcRSmHNiH5-vBswmUL-5W6E5EFP-rRSnnuly1VKTUopdDmglGqPzI3aeGBEUAmv102Yj9ccaZUp9dBgFN2vumXQllyZh9NWpm_t1yLDN5QkUNiPGq4SOb/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /></a></li><br /><li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLW4xZmycyXHDEnXHOUiTnzmrvq0whTDRvxRcVR6mARdnmQGrx3a5l4TV86KsoIokSg9-vUpIxaHN2EbbbmGU-VbEVyTIPgYqmIWkopQtAG8241X_yyKkJLe0LVyWj7bNTkDB1bwDSqByj/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /></a></li><br /><li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7vuk5x_9GuKAbcYbNottCdVjPvoh6v-SLFs9LWSZtIS1i_-Brr0fho3ocupM8lL4xHEwBeYFkbTucl1byS2EDlC702fbNthQiGZJOEOY7K1BuCtZarfZT6yGgj8LGRgFKnoehhV0YGKcM/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /></a></li><br /><li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGA__R7jBp-Ns68En-lkX-yLeRSpoK-XC6SlIYE1ELKWNP5d6plGCPqHtV3Js8YrWTUbdMNsujM5vNf8E3E6C208A1Gxi5Y9x7PH_PWv_kpd51JJvvryYMGKSuEfvqvBNII57vDvkgSogc/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /></a></li><br /></ul><br /><br /><div id="fragment-1" class="ui-tabs-panel"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbMCsk8k2uuKdOA6KDSXMZPgZCzaJjYI-tYAxuBBzbKa-EwZOfF9lMn9Gvgg2G3y-a1uO8RQ_YawhgbtQCaByTLIXwE1wmKCU5q_TkZzo1WaW3TCAokpYDqXYhWD7OGHyofwHwpElwks8/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2><br /><p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p><br /></div><br /></div><br /><br /><div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdHFyW3x9HmgkVi-6t0Kp8PKb7jZcnup5Pe5LgKaN_AHF_Xc51bLF693Gc9_Qp-cyvhNdtIqAG_LCpXFOQNlXBVo3ToaDLbrrj5NHbEps5o_Tu8GhbLNSkrgMY4RRiNHCZXNkevfVsBcC/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2><br /><p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p><br /></div><br /></div><br /><br /><div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt41WkqhrBWGesGb5sPCRC81eqOmQIjkGEX6ncMAq9tpeyqt3Oyu8TCTFMVIGDLVrkKTcn34TGLniYq-ApNda3Caj3LpSiTcQ_U7x-6tYm6GHilDKeBjBBGrjSlO3ySgZOF59eo9A2xSM/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2><br /><p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p><br /></div><br /></div><br /><br /><div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBX9N15CUeS4HOt2tTdTXW41IamSsJKLUo4H3Xqx1pQi3qTk-4JewpmY6pxy1w45d1oV_w_pZaVakG-EYH4Q_A42VIOjn7bbWtE_T53C7Lx2wkXrh6K3jhffILN_TztdEmDjJMw3WAc7Av/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" /><br /><div class="info" ><br /><h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2><br /><p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p><br /></div><br /></div><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Untuk width dan height maupun URL gambar silahkan anda sesuikan selera.<br /><br />3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.</div>

Cara Menambah Fitur Slider Pada Blog With CSS3 – untuk menambah kelengkapan fitur pada template blog guna mempercantik tampilan maupun mema...

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 membuat slider di blog . Pada tutorial ini ...

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 dimana pada slider tersebut sekaligus se...

Read More