Efek Animasi Background Tag <ul> di Postingan Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3QU0WByWu3yoyz15nK0tl0LRuDr-VvttJwip28eNmu17eFr38d1hGfIz2gPoYsPKF4uzLnNc0pIY8YYZiTYk9YoOvvPcxjjbmHe21SsCgXWSZnQyi3_OuMEztR08EOdg7J5Y1OkM9-0/s1600/animasi-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Animasi Background Tag <ul> di Postingan Blog" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3QU0WByWu3yoyz15nK0tl0LRuDr-VvttJwip28eNmu17eFr38d1hGfIz2gPoYsPKF4uzLnNc0pIY8YYZiTYk9YoOvvPcxjjbmHe21SsCgXWSZnQyi3_OuMEztR08EOdg7J5Y1OkM9-0/s320/animasi-background.jpg" title="Efek Animasi Background Tag <ul> di Postingan Blog" width="320" /></a></div><div style="text-align: justify;"><b>Efek Animasi Background Tag <ul> di Postingan Blog</b> – ini merupakan efek background yang ditambahkan ketika suatu paragraf atau kalimat saat tersentuh mouse maka akan menampilkan efek animasi berupa background yang akan muncul secara otomatis.</div><a name='more'></a><div style="text-align: justify;">Efek Animasi Background Tag <ul> di Postingan Blog ini saat hover akan tampil background berwarna hitam dan terdapat border atau garis tepi yang berwarna merah disebelah kiri kolom background. Ini adalah langkah sederhana yang tidak perlu membutuhkan waktu lama untuk membuatnya, cukup dengan menambahkan sedikit kode CSS kedalam template blog maka secara otomatis setelah kode tersebut terpasang kedalam template blog hanya dengan memanggil ID dari tag <ul> kedalam postingan maka yang timbul adalah Efek Animasi Background Tag <ul> di Postingan Blog yang cantik dan silahkan untuk cara menerapkannya ikuti tips yang ada dibawah. Berikut ini adalah cara pemasangan <b>Efek Animasi Background Tag <ul> di Postingan Blog</b>:</div><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/2013/04/demo.html" rel="nofollow" target="_blank"><button><b>LIHAT DEMO</b></button></a></div><div style="text-align: justify;">1. Login ke akun blogger.<br />2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.<br />3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b></div><blockquote class="tr_bq">ul.animatedbgul{<br />    margin: 0;<br />    padding: 0;<br />    list-style: none;<br />}<br /><br />ul.animatedbgul li{<br />    width: 100%;<br />    clear:left;<br />    overflow: hidden; <br />}<br /><br />ul.animatedbgul li span{<br />    display: block;<br />    float: left; <br />    min-width: 0px; <br />    margin-bottom: 5px;<br />    padding: 8px;<br />    color: #5d5d5d;<br />}<br /><br />ul.animatedbgul li:hover span{<br />    color: #<span style="color: red;">fff</span>;<br />    background: #<span style="color: blue;">000</span>;<br />    border-left: <span style="color: orange;">8</span>px solid <span style="color: orange;">red</span>;<br />    min-width: 450px;<br />    -webkit-box-shadow: 0 0 5px gray;<br />    -moz-box-shadow: 0 0 5px gray;<br />    box-shadow: 0 0 5px gray;<br />    -webkit-transition: all 0.3s ease-out;<br />    -moz-transition: all 0.3s ease-out;<br />    -o-transition: all 0.3s ease-out;<br />    transition: all 0.3s ease-out;<br />}</blockquote><div style="text-align: justify;"><b>Keterangan</b>: <ul><li>Tulisan berwarna <span style="color: red;">merah </span>adalah <a href="http://mas-andes.blogspot.com/2012/11/cara-mudah-memasang-kode-warna-html-di.html" target="_blank" title="Tool kode warna HTML">kode warna</a> font saat hover, silahkan sesuaikan.</li><li>Tulisan berwarna <span style="color: blue;">biru </span>adalah kode warna background saat hover, silahkan sesuaikan.</li><li>Tulisan berwarna <span style="color: orange;">orange </span>adalah lebar dan kode warna border saat hover, silahkan sesuaikan.</li></ul></div><div style="text-align: justify;">5. Simpan Template.<br />6. Selanjutnya untuk memanggil kode tersebut kedalam posting blog berikut adalah caranya:</div><blockquote class="tr_bq"><ul class="animatedbgul"><br /><li><span><span style="color: blue;">Silahkan isi teks disini</span></span></li><br /><li><span><span style="color: blue;">Silahkan isi teks disini</span></span></li><br /><li><span><span style="color: blue;">Silahkan isi teks disini</span></span></li><br /><li><span><span style="color: blue;">Silahkan isi teks disini</span></span></li><br /></ul></blockquote><div style="text-align: justify;"><b>Keterangan</b>:<br />Ganti tulisan berwarna <span style="color: blue;">biru </span>dengan teks/kalimat yang anda inginkan.</div>

di Postingan Blog" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2x…

Read More

Widget Artikel Populer Ketupat Style di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJjSK8ODZ1QBgKfaHGnFQc-6iL1EQDyMZy74O5out4lxFGdO3mNuewNEli2E82uvfqd0Mm8Nu42OWU4TcMowXNfwlGNDK9GlHFrMNwnNXMGw2HOXra2RdioDfovxS-RsMq2dKCGE_g9g/s1600/artikel-populer.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Widget Artikel Populer Ketupat Style di Blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJjSK8ODZ1QBgKfaHGnFQc-6iL1EQDyMZy74O5out4lxFGdO3mNuewNEli2E82uvfqd0Mm8Nu42OWU4TcMowXNfwlGNDK9GlHFrMNwnNXMGw2HOXra2RdioDfovxS-RsMq2dKCGE_g9g/s320/artikel-populer.jpg" title="Widget Artikel Populer Ketupat Style di Blog" width="305" /></a></div><div style="text-align: justify;"><b>Widget Artikel Populer Ketupat Style di Blog</b> – widget popular post atau yang biasa disebut artikel populer yang berbentuk seperti ketupat ini sangat sederhana dan simpel. Tidak seperti kebanyakan widget artikel populer lainya yang menggunakan bermacam model, misalnya seperti menggunakan mode slider dan yang lainnya. Entah yang dimaksud dari salah satu sahabat saya yang bertanya untuk membuat widget artikel populer adalah model seperti yang ada pada gambar diatas atau bukan. Semisal yang dimaksud bukan seperti itu, maka ini hanya gambaran dari kode CSS untuk membuatnya apabila masih ingin dilanjutkan untuk di modifikasi kembali atau mungkin ingin mencoba dari style widget artikel popuper yang lainnya.</div><a name='more'></a><div style="text-align: justify;">Berikut penyajiaanya untuk cara membuat <b>Widget Artikel Populer Ketupat Style di Blog</b>:<br /><br />1. Login ke akun blogger.<br />2. Klik <b>Tata Letak</b>, lalu pada widget artikel populer yang aslinya atau masih standard default blogger ubahlah pengaturannya menjadi seperti pada gambar dibawah kemudian klik <b>Save</b>.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDl_fz0jAFR5mqJ4jTPK9QITpdmx_CvJB6tE4DA55_IrhbKvf1seGl6fWlu6cwros2tdvH3muiX0tVHYsOJHQRDiOBGq-KpTG78cIMrIneCtOv3uM7jsGqW4uu8pzNlIXXNrlIeuJnqPE/s1600/artikel-populer-setting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Artikel Populer Ketupat Style di Blog" border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDl_fz0jAFR5mqJ4jTPK9QITpdmx_CvJB6tE4DA55_IrhbKvf1seGl6fWlu6cwros2tdvH3muiX0tVHYsOJHQRDiOBGq-KpTG78cIMrIneCtOv3uM7jsGqW4uu8pzNlIXXNrlIeuJnqPE/s320/artikel-populer-setting.jpg" title="Widget Artikel Populer Ketupat Style di Blog" width="320" /></a></div><div style="text-align: justify;"><br />3. Selanjutnya klik <b>Template > Edit HTML > Lanjutkan ></b> Centang <b>Expands Widget Template</b>.<br />4. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />5. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b></div><blockquote style="background: #f2f2f2; color: black; height: 150px; overflow: auto; padding: 10px;"><style type="text/css"><br />        .PopularPosts .item-title{display:yes}<br />        .PopularPosts ul li {<br />        background: -moz-linear-gradient(top, #fff 1%, #00ff00 50%);<br />        border-radius:30px 0px 30px 0px;<br />        float: left;list-style: none outside none;margin: 0px !important;padding: 1px !important;<br />        border: 2px solid #ccc;<br />        overflow: hidden;<br />        box-shadow: 1px 1px 6px 1px #3d85c6;<br />            font-style: normal;<br />            width: 100%;<br />            height: 30px;<br />        border-radius: 30px 0px 30px 0px;<br />        }<br /><br />        .PopularPosts ul li:hover{<br />        background: -moz-linear-gradient(top, #FFFFFF 1%, #ff0000 50%);<br />        overflow: hidden;<br />            color: #414141;<br />            width: 100%;<br />            height:30px;<br />        border: 2px solid #7f7fff;<br />        box-shadow: 1px 1px 6px 1px #3d85c6;<br />        }<br /><br />        .PopularPosts ul li img {<br />        padding:1px;<br />        margin:1px;<br />        border-radius:25px 0px 25px 0px;<br />        -webkit-transition: all 0.3s ease;<br />        -moz-transition: all 0.3s ease;<br />        transition: all 0.3s ease;<br />        border: 1px solid #7f7fff;<br />        height: 25px;width:60px;<br />        overflow: hidden;<br />        }<br /><br />        .PopularPosts ul li img:hover {<br />        border:1px solid #ffffff;<br />        border-radius:25px 0px 25px 0px;<br />        background: -moz-linear-gradient(top, #FFFFFF 1%, #1c1c1c 50%);<br />        box-shadow: 0px 0px 10px #ffffff;<br />        }</blockquote><div style="text-align: justify;">6. Simpan Template.<br /><br />Bisa juga dengan menggunakan cara alternatif, yaitu setelah langkah kedua pada point diatas langsung saja klik <b>Tambah Widget > HTML/Javascript</b> lalu taruh kode pada blockquote tersebut kedalam kolom HTML/Javascript, lalu <b>Save </b>dan lihat hasilnya.<br /><br /><b>Tambahan</b>:<br />Apabila ingin memasang widget artikel populer seperti yang ada pada:</br> <div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/" rel="nofollow" target="_blank"><button><b>DEMO BLOG </b></button></a> </div>Maka kode CSS yang harus dipasang adalah copy kode dibawah ini, kemudian lakukan langkah yang sama seperti pada langkah diatas.</div><blockquote style="background: #f2f2f2; color: black; height: 150px; overflow: auto; padding: 10px;">#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}<br /><br />#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}<br /><br />#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}<br /><br />#PopularPosts1 ul li:first-child:after,<br />#PopularPosts1 ul li:first-child + li:after,<br />#PopularPosts1 ul li:first-child + li + li:after,<br />#PopularPosts1 ul li:first-child + li + li + li:after,<br />#PopularPosts1 ul li:first-child + li + li + li + li:after,<br />#PopularPosts1 ul li:first-child + li + li + li + li + li:after,<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,<br /><br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}<br /><br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}<br />#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}<br />#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}<br />#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}<br />#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}<br />#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}<br />#PopularPosts1 ul li:first-child + li + li:after{content:"3"}<br />#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}<br />#PopularPosts1 ul li:first-child + li:after{content:"2"}<br />#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}<br />#PopularPosts1 ul li:first-child:after{content:"1"}<br />#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}<br /><br />#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}</blockquote><div style="text-align: justify;">Semoga artikel ini dapat menjawab pertanyaan dari sahabat saya yang bertanya tentang cara <b>Widget Artikel Populer Ketupat Style di Blog</b>. Sekian dan semoga bermanfaat.</div>

Widget Artikel Populer Ketupat Style di Blog – widget popular post atau yang biasa disebut artikel p…

Read More

Menu Vertikal Sexy Panels Dengan CSS

<div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxxd12G60rHLVpbgYJf827YR-Pa8hH9DdgWfjcpK-SD1zYKtLSOB2_50sSK3AeevCNuzS7zYBk_o4DhT_fX99mb6oKXSfG6WkFptlC7w0FKOOvgOX1-55HRI4nhdY0RDoqCiGqqgVzgI/s1600/menu-vertikal-sexy-panel.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Vertikal Sexy Panels Dengan CSS" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxxd12G60rHLVpbgYJf827YR-Pa8hH9DdgWfjcpK-SD1zYKtLSOB2_50sSK3AeevCNuzS7zYBk_o4DhT_fX99mb6oKXSfG6WkFptlC7w0FKOOvgOX1-55HRI4nhdY0RDoqCiGqqgVzgI/s320/menu-vertikal-sexy-panel.gif" title="Menu Vertikal Sexy Panels Dengan CSS" width="320" /></a></div><b>Menu Vertikal Sexy Panels Dengan CSS</b> – setelah pada postingan sebelumnya membuat <a href="http://mas-andes.blogspot.com/2013/04/menu-vertikal-inner-shadow-dengan-css3.html" target="_blank" title="menu vertikal inner shadow dengan CSS3">menu vertikal inner shadow dengan CSS3</a> maka sekarang saya kembali membahas lagi untuk membuat menu vertikal dengan CSS yang menampilkan background berwarna hitam dengan border sebelah kanan yang berwarna merah yang mengelilingi linkmenu saat hover.</div><a name='more'></a><div style="text-align: justify;">Tampilan menu vertikal yang sangat sederhana ini memiliki fasilitas yang akan menampilkan warna lime saat hover dan border berwarna hitam yang terdapat disebelah kanannya dan saya sertakan pula box shadow berwarna merah. Tidak banyak CSS yang digunakan untuk membuat Menu Vertikal Sexy Panels ini sehingga saat diterpakan kedalam blog tidak memperlambat loading blog. Jadi bagi kebanyakan blogger yang takut loading blognya akan lambat tidak perlu khawatir akan hal ini, karena menu vertikal yang sangat simpel dan sederhana ini tidak akan mempengaruhi kecepatan loading blog. Jika berminat untuk memasang kedalam blog, maka berikut adalah tutorial tentang cara memasang <b>Menu Vertikal Sexy Panels Dengan CSS</b>:</div></br>1. Login ke akun blogger.<br />2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.<br />3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b><br /><blockquote class="tr_bq">/* Menu Vertikal Sexy Panels Dengan CSS */<br /><br />.sexypanels{<br />list-style-type: none;<br />margin: 0;<br />padding: 0;<br />width: 260px; /* width of menu */<br />}<br /><br />.sexypanels li{<br />border-bottom: 1px solid white; /* white border beneath each menu item */<br />}<br /><br />.sexypanels li a{<br />background: #000 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/<br />font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;<br />display: block;<br />color: white;<br />width: auto;<br />padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */<br />text-indent: 8px;<br />text-decoration: none;<br />border-right: 7px solid red; /*right border of menu link*/<br />}<br /><br />.sexypanels li a:visited, .sexypanels li a:active{<br />color: white;<br />}<br /><br />.sexypanels li a:hover{<br />background-color: #00ff00; /*color of menu onMouseover*/<br />color: black;<br /> box-shadow: 1px 1px 6px 1px #ff0000;<br />border-right: 7px solid black; /*right border of menu link during hover*/<br />}<br /><br />/* Menu Vertikal Sexy Panels Dengan CSS */</blockquote><div style="text-align: justify;">5. Simpan Template.<br />6. Selanjutnya lalu klik <b>Tata Letak > Tambah Widget > HTML/Javascript</b> kemudian copy kode berikut ini lalu paste kedalam kolom HTML/Javascript.</div><blockquote class="tr_bq"><ul class="sexypanels"><br /><li><a href="<span style="color: red;">#</span>">»  <span style="color: blue;">Home</span></a></li><br /><li><a href="<span style="color: red;">#</span>">»  <span style="color: blue;">About</span></a></li><br /><li><a href="<span style="color: red;">#</span>">»  <span style="color: blue;">Contact</span></a></li><br /><li><a href="<span style="color: red;">#</span>">»  <span style="color: blue;">Disclaimer</span></a></li><br /><li><a href="<span style="color: red;">#</span>">»  <span style="color: blue;">Sitemap</span></a></li><br /><li><a href="<span style="color: red;">http://mas-andes.blogspot.com</span>">»  <span style="color: blue;">Faceblog Evolutions</span></a></li>       <br /></ul></blockquote><div style="text-align: justify;"><b>Keterangan</b>:</div><ul><li>Ganti tanda <span style="color: red;">#</span> dengan URL link tujuan.</li><li>Tulisan berwarna <span style="color: blue;">biru </span>silahkan ganti dengan yang di inginkan. Sebagai contoh seperti pada baris akhir pada kode diatas.</li></ul><div style="text-align: justify;">7. Save dan lihat hasilnya.</div>

Menu Vertikal Sexy Panels Dengan CSS – setelah pada postingan sebelumnya membuat menu vertikal inner…

Read More

Menu Vertikal Inner Shadow Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwS-lGio5J0974tZdf4JgO9OD23WsW-RLr7A864br9s9aPcSKhGJF6ulBEpDJlqF3QxK9N45MUL_w2DxFtSQ7J4FpVLH7LsfYmICWvBoK5qSlsfqzwRsLhL7CcZAgvJSeqNC-12PCgX44/s1600/menu-vertikal.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Vertikal Inner Shadow Dengan CSS3" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwS-lGio5J0974tZdf4JgO9OD23WsW-RLr7A864br9s9aPcSKhGJF6ulBEpDJlqF3QxK9N45MUL_w2DxFtSQ7J4FpVLH7LsfYmICWvBoK5qSlsfqzwRsLhL7CcZAgvJSeqNC-12PCgX44/s320/menu-vertikal.gif" title="Menu Vertikal Inner Shadow Dengan CSS3" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;"><b>Menu Vertikal Inner Shadow Dengan CSS3</b> – merupakan salah satu bentuk untuk melengkapi kebutuhan blog adalah membuat agar semudah mungkin setiap visitor dapat menemukan konten yang sedang mereka cari dengan menunjukkan melalui menu yang terdapat didalam bagian blog.</div><a name='more'></a><div style="text-align: justify;">Menu blog walaupun berbentuk sederhana namun itu termasuk dalam bagian yang penting didalam sebuah blog. Menu Vertikal Inner Shadow Dengan CSS3 ini sangat sederhana sekali namun hasilnya saya kira tidak mengecewakan untuk dipasang kedalam sidebar blog. Bentuk tampilan dari Menu Vertikal Inner Shadow Dengan CSS3 ini sangat ramping dan dinamis seperti halnya yang terlihat pada gambar ataupun bentuk dari aslinya yang ada dihalaman demo. Apabila mungkin berminat untuk memasang, maka berikut ini adalah tutorial cara memasang <b>Menu Vertikal Inner Shadow Dengan CSS3 pada blog</b>:</div><br /> 1. Login ke akun blogger.<br />2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.<br />3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b><br /><blockquote class="tr_bq">/* Menu Vertikal Shadow Dengan CSS3*/<br /><br />.shadowblockmenu-v{<br />font: bold 14px Germand;<br />width: 260px; /* width of menu */<br />}<br /><br />.shadowblockmenu-v ul{<br />border: 1px solid #eee;<br />padding: 0;<br />margin: 0;<br />list-style: none;<br />}<br /><br />.shadowblockmenu-v ul li{<br />margin:0;<br />padding:0;<br />}<br /><br />.shadowblockmenu-v ul li a{<br />display:block;<br />text-transform: uppercase;<br />color: #494949;<br />padding: 10px 15px;<br />text-decoration: none;<br />border-bottom: 1px solid #cacaca;<br />border-right: 1px solid #cacaca; /*right border between menu items*/<br />-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */<br />-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);<br />box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);<br />text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */<br />-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */<br />-webkit-transition: all 0.2s ease-in-out;<br />-o-transition: all 0.2s ease-in-out;<br />-ms-transition: all 0.2s ease-in-out;<br />transition: all 0.2s ease-in-out;<br />}<br /><br />.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{<br />color: black;<br />-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */<br />-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);<br />box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);<br />}<br /><br />/* Menu Vertikal Shadow Dengan CSS3*/</blockquote><div style="text-align: justify;">5. Simpan Template.<br />6. Selanjutnya lalu klik <b>Tata Letak > Tambah Widget > HTML/Javascript</b> kemudian copy kode berikut ini lalu paste kedalam kolom HTML/Javascript.</div><blockquote class="tr_bq"><div class="shadowblockmenu-v"><br /><ul><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">Home</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">About Me</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">Contact Me</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">Disclaimer</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">Sitemap</span></a></li><br /></ul><br /></div></blockquote><div style="text-align: justify;"><b>Keterangan</b>:<br />Ganti tanda <span style="color: red;"># </span>dengan URL link tujuan.<br />Tulisan berwarna <span style="color: blue;">biru </span>silahkan ganti dengan yang di inginkan.<br /><br />7. Save dan lihat hasilnya.</div>

Menu Vertikal Inner Shadow Dengan CSS3 – merupakan salah satu bentuk untuk melengkapi kebutuhan blog…

Read More

Efek Gambar Peel Back Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGKRMyNGtEY3VAQeZtvuJb8sIT84IxjEGopzfCE_0XN4IkvELhSOrsLftVJOMJb3C189pBZTWpTwOdNyWoIEk6l2gNdBgAMFDqp1Kp8IE-Q9dwY3v1HBgZ7qmOuvQLPOb3MA_019xxgA/s1600/css3-transisi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Gambar Peel Back Dengan CSS3" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGKRMyNGtEY3VAQeZtvuJb8sIT84IxjEGopzfCE_0XN4IkvELhSOrsLftVJOMJb3C189pBZTWpTwOdNyWoIEk6l2gNdBgAMFDqp1Kp8IE-Q9dwY3v1HBgZ7qmOuvQLPOb3MA_019xxgA/s320/css3-transisi.jpg" title="Efek Gambar Peel Back Dengan CSS3" width="320" /></a></div><div style="text-align: justify;"><b>Efek Gambar Peel Back Dengan CSS3</b> – merupakan efek gambar dimana saat mouse menyentuh gambar akan menampilkan efek hover seperti slide out yang berjalan secara mulus untuk menampilkan gambar kedua yang berada dibelakangnya. Efek animasi CSS3 ini berjalan secara halus sehinga lebih jelas terlihat saat onmouseover gambar akan terkesan menjadi lebih cantik. Hasilnya adalah sederhana namun ramping "Sebelum dan Sesudah" efek hover gambar. Dengan sedikit menambahkan kode CSS pada template blog kemudian menerapkannya dengan mememanggil kode tersebut kedalam postingan maka tidak akan terlalu sulit untuk membuat posting blog dan membuat variatif gambar dipostingan blog agar tampil lebih cantik. Cara pemasangannya pun sangat mudah dan dalam waktu yang sangat cepat, berikut adalah tutorial cara membuat <b>Efek Gambar Peel Back Dengan CSS3</b> di postingan blog:<br /><br />1. Login ke akun blogger.<br />2. Klik Template > Edit HTML.<br />3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b></div><blockquote class="tr_bq">a.nowandthen{<br />position:relative;<br />display: block;<br />overflow:hidden;<br />cursor: pointer;<br />width: 550px;<br />height: 434px;<br />}<br />a.nowandthen img{<br />position:absolute;<br />left:0;<br />top:0;<br />width: 100%;<br />height: 100%;<br />-moz-transition: all 0.5s ease;<br />-webkit-transition: all 0.5s ease;<br />-o-transition: all 0.5s ease;<br />-ms-transition: all 0.5s ease;<br />transition: all 0.5s ease;<br />z-index: 2;<br />clip: rect(0,650px,434px,0); <br />}<br />a.nowandthen img:nth-of-type(2){z-index: 1;}<br />a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);<br />opacity: 0;<br />}<br />a.nowandthen.alt{ width: 300px;height: 354px;}<br />a.nowandthen.alt img{clip: rect(0,300px,354px,0);}<br />a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);} </blockquote><div style="text-align: justify;">5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.</div><blockquote class="tr_bq"><a class="nowandthen"><br /> <img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3PB0dhVbf2ARLe_-eg0yZfAx7AXfIO8eluBEuDOGTK_xNwzS3UWQSRuxREDOEQdFlbG_p_w2MRV7ZvNyskediQ5ZAjb8Gbm9Vyt6kEgWVATRqglq9wMQoLtkPQYSDOD0hOyQm35PV1rMO/s1600/peel-back-1a.jpg"/><br /> <img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGs8z7kG9yM8psh8evRgsqSOSZGhh-R81YwegbLQhmPP6L1jpO_MWepCS5OzyI6sgNR2-p6EiVezftmJo4S-ar8rqYX0xwRYpuW41R33VM1mqHzO1hb4WwA0TBLPox15KAUNjrpqnJtBj/s1600/peel-back1b.jpg"/><br /></a></blockquote><br/>DEMO:<br/><br/> <style> a.nowandthen{ position:relative; display: block; overflow:hidden; cursor: pointer; width: 550px; height: 434px; } a.nowandthen img{ position:absolute; left:0; top:0; width: 100%; height: 100%; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 2; clip: rect(0,650px,434px,0); } a.nowandthen img:nth-of-type(2){z-index: 1;} a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0); opacity: 0; } a.nowandthen.alt{ width: 300px;height: 354px;} a.nowandthen.alt img{clip: rect(0,300px,354px,0);} a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);} </style><a class="nowandthen"> <img alt="Efek Gambar Peel Back Dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3PB0dhVbf2ARLe_-eg0yZfAx7AXfIO8eluBEuDOGTK_xNwzS3UWQSRuxREDOEQdFlbG_p_w2MRV7ZvNyskediQ5ZAjb8Gbm9Vyt6kEgWVATRqglq9wMQoLtkPQYSDOD0hOyQm35PV1rMO/s1600/peel-back-1a.jpg"/> <img alt="Efek Gambar Peel Back Dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGs8z7kG9yM8psh8evRgsqSOSZGhh-R81YwegbLQhmPP6L1jpO_MWepCS5OzyI6sgNR2-p6EiVezftmJo4S-ar8rqYX0xwRYpuW41R33VM1mqHzO1hb4WwA0TBLPox15KAUNjrpqnJtBj/s1600/peel-back1b.jpg"/></a>

Efek Gambar Peel Back Dengan CSS3 – merupakan efek gambar dimana saat mouse menyentuh gambar akan me…

Read More

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0YzuPY8WbJ55KTNL6wQFDVaH3jEdaco8PZaF8tQ9Kl8-9f6qO352TMjSGThhelcukbfDHw_vsdOhDHByOYsLk1XUB67Rcy1WSbVCmktU7OxYDUU4G2shkabp59mQ_0Rrrb8Iw9K7GzY/s1600/css3-transisi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0YzuPY8WbJ55KTNL6wQFDVaH3jEdaco8PZaF8tQ9Kl8-9f6qO352TMjSGThhelcukbfDHw_vsdOhDHByOYsLk1XUB67Rcy1WSbVCmktU7OxYDUU4G2shkabp59mQ_0Rrrb8Iw9K7GzY/s320/css3-transisi.jpg" title="Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions" width="320" /></a></div><div style="text-align: justify;"><b>Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions</b> – Efek gambar menggunakan CSS3 transitions ini adalah menunjukkan bagaimana untuk menambahkan panel deskripsi animasi gambar yang dapat bergesar secara otomatis dapat terbuka ketika mouse diarahkan ke gambar. Dengan menambahkan deskripsi singkat atau bisa juga dengan memasukan link didalamnya maka panel deskripsi gambar ini dapat memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis.</div><a name='more'></a><div style="text-align: justify;">Panel deskripsi dapat dengan mudah diarahkan saat bergesar sesuai dengan keinginan atau yang sesuai tata letak gambar. Terdapat empat arah pilihan untuk membuat panel deskripsi gambar tersebut bergeser, antara lain gambar dapat bergeser ke arah atas, bawah, kanan, dan kiri. Permulaan saat hover animasi deskripsi gambar saat bergeser tertunda 0,5 detik setiap kali menggunakan properti transisi-delay, sehingga efek ini terjadi setelah dari gambar memunculkan efek bayangan menggunakan CSS3 yang ditambahkan ke gambar untuk menciptakan efek gambar yang mengangkat atau sedikit memunculkan efek zoom. Hasilnya yang akan terjadi adalah gambar keren dengan panel deskripsi bergeser yang menggunakan tidak lebih dari HTML / CSS untuk membuat efek. Untuk pemasangannya kedalam blog maka berikut adalah penyajiannya tentang cara membuat <b>Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions</b>:</div><br /><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/2013/04/test.html" rel="nofollow" target="_blank"><button><b>LIHAT DEMO</b></button></a></div>1. Login ke akun blogger.<br />2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.<br />3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b><br /><blockquote style="background: #f2f2f2; color: black; height: 150px; overflow: auto; padding: 10px;">/* Sliding Description Panel For Images */<br /><br />.imagepluscontainer {<br /> /* main image container */<br />    position: relative;<br />    z-index: 1;<br />    font-family: verdana;<br />    font-size: 13px;<br />}<br /><br />.imagepluscontainer img {<br /> /* CSS for image within container */<br />    position: relative;<br />    z-index: 2;<br />    -moz-transition: all 0.5s ease;<br /> /* Enable CSS3 transition on all props */<br />    -webkit-transition: all 0.5s ease-in-out;<br />    -o-transition: all 0.5s ease-in-out;<br />    -ms-transition: all 0.5s ease-in-out;<br />    transition: all 0.5s ease-in-out;<br />}<br /><br />.imagepluscontainer:hover img {<br /> /* CSS for image when mouse hovers over main container */<br />    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />    -moz-transform: scale(1.05, 1.05);<br />    -webkit-transform: scale(1.05, 1.05);<br />    -ms-transform: scale(1.05, 1.05);<br />    -o-transform: scale(1.05, 1.05);<br />    transform: scale(1.05, 1.05);<br />}<br /><br />.imagepluscontainer div.desc {<br /> /* CSS for desc div of each image. */<br />    position: absolute;<br />    width: 90%;<br />    z-index: 1;<br /> /* Set z-index to that less than image's, so it's hidden beneath it */<br />    bottom: 0;<br /> /* Default position of desc div is bottom of container, setting it up to slide down */<br />    left: 5px;<br />    padding: 8px;<br />    background: rgba(0, 0, 0, 0.8);<br /> /* black bg with 80% opacity */<br />    color: white;<br />    -moz-border-radius: 0 0 8px 8px;<br /> /* CSS3 rounded borders */<br />    -webkit-border-radius: 0 0 8px 8px;<br />    border-radius: 0 0 8px 8px;<br />    opacity: 0;<br /> /* Set initial opacity to 0 */<br />    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br /> /* CSS3 shadows */<br />    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br />    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br />    -moz-transition: all 0.5s ease 0.5s;<br /> /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */<br />    -webkit-transition: all 0.5s ease 0.5s;<br />    -o-transition: all 0.5s ease 0.5s;<br />    -ms-transition: all 0.5s ease 0.5s;<br />    transition: all 0.5s ease 0.5s;<br />}<br /><br />.imagepluscontainer div.desc a {<br />    color: white;<br />}<br /><br />.imagepluscontainer:hover div.desc {<br /> /* CSS for desc div when mouse hovers over main container */<br />    -moz-transform: translate(0, 100%);<br />    -webkit-transform: translate(0, 100%);<br />    -ms-transform: translate(0, 100%);<br />    -o-transform: translate(0, 100%);<br />    transform: translate(0, 100%);<br />    opacity: 1;<br /> /* Reveal desc DIV fully */<br />}<br /><br />/* Below CSS when applied to desc DIV slides the desc div from the right edge of the image */<br /><br />.imagepluscontainer div.rightslide {<br />    width: 150px;<br /> /* reset from default */<br />    top: 15px;<br />    right: 0;<br />    left: auto;<br />  /* reset from default */<br />    bottom: auto;<br />  /* reset from default */<br />    padding-left: 15px;<br />    -moz-border-radius: 0 8px 8px 0;<br />    -webkit-border-radius: 0 8px 8px 0;<br />    border-radius: 0 8px 8px 0;<br />}<br /><br />.imagepluscontainer:hover div.rightslide {<br />    -moz-transform: translate(100%, 0);<br />    -webkit-transform: translate(100%, 0);<br />    -ms-transform: translate(100%, 0);<br />    -o-transform: translate(100%, 0);<br />    transform: translate(100%, 0);<br />}<br /><br />/* Below CSS when applied to desc DIV slides the desc div from the left edge of the image */<br /><br />.imagepluscontainer div.leftslide {<br />    width: 150px;<br />  /* reset from default */<br />    top: 15px;<br />    left: 0;<br />    bottom: auto;<br />  /* reset from default */<br />    padding-left: 15px;<br />    -moz-border-radius: 8px 0 0 8px;<br />    -webkit-border-radius: 8px 0 0 8px;<br />    border-radius: 8px 0 0 8px;<br />}<br /><br />.imagepluscontainer:hover div.leftslide {<br />    -moz-transform: translate(-100%, 0);<br />    -webkit-transform: translate(-100%, 0);<br />    -ms-transform: translate(-100%, 0);<br />    -o-transform: translate(-100%, 0);<br />    transform: translate(-100%, 0);<br />}<br /><br />/* Below CSS when applied to desc DIV slides the desc div from the top edge of the image */<br /><br />.imagepluscontainer div.upslide {<br />    top: 0;<br />    bottom: auto;<br />  /* reset from default */<br />    padding-bottom: 10px;<br />    -moz-border-radius: 8px 8px 0 0;<br />    -webkit-border-radius: 8px 8px 0 0;<br />    border-radius: 8px 8px 0 0;<br />}<br /><br />.imagepluscontainer:hover div.upslide {<br />    -moz-transform: translate(0, -100%);<br />    -webkit-transform: translate(0, -100%);<br />    -ms-transform: translate(0, -100%);<br />    -o-transform: translate(0, -100%);<br />    transform: translate(0, -100%);<br />}<br />/* Sliding Description Panel For Images */</blockquote><div style="text-align: justify;">5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.</div><blockquote class="tr_bq"><div class="imagepluscontainer" style="width:263px;"><br /><img src="<span style="color: blue;">URL GAMBAR</span>"><br /><div class="desc <span style="color: red;">downslide</span>"><br /><span style="color: purple;">DESKRIPSI GAMBAR</span><br /></div><br /></div></blockquote><div style="text-align: justify;"><b>Keterangan</b>:</div><ul><li style="text-align: justify;">Kode berwarna <span style="color: blue;">biru </span>adalah URL Gambar, silahkan ganti sesuai keinginan.</li><li style="text-align: justify;">Kode berwarna <span style="color: red;">merah </span>adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: <b>rightslide</b>, <b>leftslide</b>, atau <b>upslide</b>.</li><li style="text-align: justify;">Kode berwarna <span style="color: purple;">ungu </span>adalah teks deskripsi gambar, silahkan ganti sesuai keinginan.</li></ul><div style="text-align: justify;">Sebagai contoh seperti dibawah ini:</div><blockquote class="tr_bq"><div class="imagepluscontainer" style="width:263px;"><br /><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wz5Dd-tjQ9Rk9ZmnRhf8Wmb5mUP-OwypmH3fL-6Ntxu-3jcMc65bPahqO9TYbu6di5eJaT0GVF2K9nd6ljPUQLQUdjybXGZtd1fN0bbcQoVKdKXLqoMl8hUSHPM-0cOhsa6CtEB3Y2bC/s1600/elisha_cuthbert_face_wallpaper-2013-02.jpg</span>"><br /><div class="desc <span style="color: red;">downslide</span>"><br /><span style="color: purple;"><a href=”http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html” target=”_blank”><b>Jquery Widget Recent Post Automatic Slider</b></a> – ini adalah widget yang berguna untuk menampilkan artikel terbaru menggunakan mode slide show</span><br /></div><br /></div></blockquote><div style="text-align: justify;">Dari kode tersebut maka hasilnya akan tampak sama persis seperti pada gambar dibagian atas atau yang ada di halaman demo.</div>

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions – Efek gambar menggunakan CSS3 tra…

Read More

Membuat Animasi Foto Slide Show Dengan Photoshop CS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixljV6Zf6U91en1oXJpx0QMIIg9aGK83avWyvkpGSIlEM1Jbhq9kUpgPx6IYDdu3AmfPYfwPp-T1C_wxRCV4xcY7WhWx63EcFPgvxWmEiTJ_gp3C0nSY9-JSji9rVab8VZ3-pEM-Qd-bI/s1600/foto-slide-show.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixljV6Zf6U91en1oXJpx0QMIIg9aGK83avWyvkpGSIlEM1Jbhq9kUpgPx6IYDdu3AmfPYfwPp-T1C_wxRCV4xcY7WhWx63EcFPgvxWmEiTJ_gp3C0nSY9-JSji9rVab8VZ3-pEM-Qd-bI/s320/foto-slide-show.gif" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Animasi Foto Slide Show Dengan Photoshop CS3</b> – untuk membuat animasi slide show sebenarnya terdapat banyak cara untuk membuatnya, akan tetapi pada pembahasan kali ini saya akan mencoba untuk membahas tentang membuat animasi slide show menggunakan software grafis yang sudah tidak asing di telinga setiap user PC.</div><a name='more'></a><div style="text-align: justify;">Cara membuat animasi slide show dengan menggunakan photoshop cs3 ini langkahnya tidak terlalu rumit dan sangat mudah dilakukan karena prosesnya pun sangat ringkas dan sederhana. Walaupun saya bukan basisnya untuk berkarya grafis namun tidak salah apabila selagi ada kesempatan untuk belajar yang belum pernah saya lakukan agar dapat saya sharing kepada yang mungkin juga membutuhkan. Maka dari itu mari kita mulai tutorialnya tentang cara <b>Membuat Animasi Foto Slide Show Dengan Photoshop CS3</b>.</div><br /><br />1. Langkah pertama buka lembar area kerja baru photoshop, Widht: 400px dan Height: 280px.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1L9428QivFfLYOoS0_NBL_UV4CkBKFbsSr_pTf5-B0kAfIeEVuJf8_UBCR7vRk65oQ-RXH8fqNU6azot_LvGC30r8f75ThN-hx0wUgzKzRkqtnVPaZ8e9Q749xXIHl4K0pOHBeXHo6c/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1L9428QivFfLYOoS0_NBL_UV4CkBKFbsSr_pTf5-B0kAfIeEVuJf8_UBCR7vRk65oQ-RXH8fqNU6azot_LvGC30r8f75ThN-hx0wUgzKzRkqtnVPaZ8e9Q749xXIHl4K0pOHBeXHo6c/s320/1.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />2. Kemudian klik <b>Gradient Tool</b> dan ubahlah pengaturannya seperti pada gambar dibawah kemudian klik <b>OK</b>.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Z9IKEwwKF5_SyIX2fldFVI9NfoY5FmQFCNylSWQ42Qwc6BEF8PB9XrLsM3Tara-vyVTHXrR61gFP65rtXL6n1__pXV2WuCGKmC-PnoZty7Q83h0DgjGM6P7AobAdyx4sTmYu8zIg7ho/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Z9IKEwwKF5_SyIX2fldFVI9NfoY5FmQFCNylSWQ42Qwc6BEF8PB9XrLsM3Tara-vyVTHXrR61gFP65rtXL6n1__pXV2WuCGKmC-PnoZty7Q83h0DgjGM6P7AobAdyx4sTmYu8zIg7ho/s320/2.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />3. Selanjutnya drag pada canvas dari atas kebawah hingga menjadi seperti gambar berikut ini.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMfN3fIYGxK1S9h0ooSUcLYExfFzM-jLXqyk7T7yTtCvc1TQPnxCzTFznuY1DEh409rsNNKJeUwiItQLEHPyAi-0w9Al22n4XLgkINCIfNGEgzYAGq1ziBURrNQ3jZhbQBj6nXvzgDvsg/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMfN3fIYGxK1S9h0ooSUcLYExfFzM-jLXqyk7T7yTtCvc1TQPnxCzTFznuY1DEh409rsNNKJeUwiItQLEHPyAi-0w9Al22n4XLgkINCIfNGEgzYAGq1ziBURrNQ3jZhbQBj6nXvzgDvsg/s320/3.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />4. Klik <b>Custom Shpe Tool</b> lalu pilih <b>Arrow 9</b>, kemudian klik <b>Create New Layer</b> lalu pada canvas klik tombol mouse dan tahan lalu seret hingga seperti pada gambar dibawah. Lalu Duplicate Layer dengan tekan CTRL+J kemudian ubah letak gambar, sesuaikan seperti pada gambar dibawah.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSZl2z0ZaZyF0tpzg81MpMLuAvDXJfoPIkkXWVcTbVCMDWRGImUP16Ar7918d0XmukLwinFgu7AGto_sBidQTEaCSpqgxdgORURN88fdpm-1TIGFY6Fxrk9FmrLUumNQxee8XO4nJZMk/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSZl2z0ZaZyF0tpzg81MpMLuAvDXJfoPIkkXWVcTbVCMDWRGImUP16Ar7918d0XmukLwinFgu7AGto_sBidQTEaCSpqgxdgORURN88fdpm-1TIGFY6Fxrk9FmrLUumNQxee8XO4nJZMk/s320/4.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYxa8fEsrAgUU78C1Nb-htJNsVg2VfbeeKArtZ1sH2_qjoQlz2ZzOQxu_a99ASbmK4NHPTvvO_fLyJ2ZOlZQ94cjWKCOiIH6jMFYqfJBR1E3e7wHNTN0QyAO7TwPA581vhV8k5nTJSGY/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYxa8fEsrAgUU78C1Nb-htJNsVg2VfbeeKArtZ1sH2_qjoQlz2ZzOQxu_a99ASbmK4NHPTvvO_fLyJ2ZOlZQ94cjWKCOiIH6jMFYqfJBR1E3e7wHNTN0QyAO7TwPA581vhV8k5nTJSGY/s320/5.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />5. Buka gambar yang akan dijadikan slide show, pada tutorial ini saya menggunakan 7 foto wanita cantik (anda bisa menggunakan gambar lain). Kemudian masukan foto hingga menjadi 6 Layer baru dengan letak foto yang bertumpukan.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6LvWuABZmYK4hlWk4jOn7SAudtQ6KafFx2d1tkOwALCstj_hKmq-TDy-uJIX6qToH5owIaqYkPWeNjO10gtPVA6O6oIwhySKAvEXaZ-RM2qLjiEogispVJDqiF2ec-C0sjN1BaBXl2s/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6LvWuABZmYK4hlWk4jOn7SAudtQ6KafFx2d1tkOwALCstj_hKmq-TDy-uJIX6qToH5owIaqYkPWeNjO10gtPVA6O6oIwhySKAvEXaZ-RM2qLjiEogispVJDqiF2ec-C0sjN1BaBXl2s/s320/6.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />6. Kemudian klik <b>Window </b>lalu <b>Animation</b>.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJTIjogCU1_Rgqh7U7tgd4gb2iwpJR08peBQ_57Kp107VuRTcFgGDjb2c83q_zUgNDF8G9VdYJo-HaQYOO7kBMJtfYJ3o0vY1Po9cCoKazCH6P1w4feqh0TDbtjlcRFY8DhVDfHH4uhQg/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJTIjogCU1_Rgqh7U7tgd4gb2iwpJR08peBQ_57Kp107VuRTcFgGDjb2c83q_zUgNDF8G9VdYJo-HaQYOO7kBMJtfYJ3o0vY1Po9cCoKazCH6P1w4feqh0TDbtjlcRFY8DhVDfHH4uhQg/s320/7.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />7. Pada <b>Frame Delay Time</b> klik kanan lalu ubah menjadi 2.0 second.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFS97WfZkHNhaUI73Ts13Os8s6Yp34-Ei8VFOo5RFhiyX82GOTUXWgG5jJXI8aNTU6ONG73cg0HQKMQmCQbCUra4weRcTdPWzLs4Zzw3hjjmsdFEPcUO8pqY7mJ4eBOgAV6eEFA8ragBQ/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFS97WfZkHNhaUI73Ts13Os8s6Yp34-Ei8VFOo5RFhiyX82GOTUXWgG5jJXI8aNTU6ONG73cg0HQKMQmCQbCUra4weRcTdPWzLs4Zzw3hjjmsdFEPcUO8pqY7mJ4eBOgAV6eEFA8ragBQ/s320/8.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />8. Selanjutnya klik <b>Duplicate Select Frame</b>.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMvZ2_6djVwGn__buxAXcqBcQstUvuJXN44fCY2LoWl1DYu-YvTrIhdTthTC_KjTyXkdRJmTMoJj_iV7bQaUWbnykuXzURsEwSwS05_KwP1HJCOQA9uizzCd4YDi001kkby4eYtGUiy6w/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMvZ2_6djVwGn__buxAXcqBcQstUvuJXN44fCY2LoWl1DYu-YvTrIhdTthTC_KjTyXkdRJmTMoJj_iV7bQaUWbnykuXzURsEwSwS05_KwP1HJCOQA9uizzCd4YDi001kkby4eYtGUiy6w/s320/9.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />9. Kemudian disable semua layer foto 2-6 (hilangkan tanda mata disebelah layer) dan aktifkan layer foto 1.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3kBVwd1y49Heb-m1lWDVgdm5Xh-2Jg1M-RJZlLeDGmXU-72VFlMjns_AJAdGxmwiVSMVDM84lPbXzSHo6Qb9ICaBnTm064vEduSddA21eOctg8h6HvakjpIFI8OfgTmiHsJ2Yu8P1z4/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3kBVwd1y49Heb-m1lWDVgdm5Xh-2Jg1M-RJZlLeDGmXU-72VFlMjns_AJAdGxmwiVSMVDM84lPbXzSHo6Qb9ICaBnTm064vEduSddA21eOctg8h6HvakjpIFI8OfgTmiHsJ2Yu8P1z4/s320/10.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />10. Selanjutnya klik lagi <b>Duplicate Select Frame</b> lalu disable layer foto 1 dan aktifkan layer foto 2, sesudahnya disable layer foto 2 dan aktifkan layer foto 3, begitu juga seterusnya hingga sampai layer foto 6.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovNbcleoFNzmk4mwz2Wzea6g4Hj4nvObhuBnR3OLgPQG_jtLLkManSamT3-tmGRyje0W-6lgBoRWTnTFH1mYdty8qw79g5uXa9lQTbRypSayvCFDWYPKcErL-q8gDEX6JoSrp9BPX30Q/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovNbcleoFNzmk4mwz2Wzea6g4Hj4nvObhuBnR3OLgPQG_jtLLkManSamT3-tmGRyje0W-6lgBoRWTnTFH1mYdty8qw79g5uXa9lQTbRypSayvCFDWYPKcErL-q8gDEX6JoSrp9BPX30Q/s320/11.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />11. Jika Sudah, tekan <b>Play </b>untuk menjalankan Frame.<br />12. Untuk menyimpannya, klik <b>File </b>lalu klik <b>Save for Web & Device</b>.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpbiUJ3r8guC5BoTS0vVGy6k58Di4dCBBe2O-U8kE5xwGr2Kctm9hysO82lNMOVhruQEwdiG7FuU9wk6tWSogQUprLAw3vgHyM9LsSP5Uk8uqTalCvNMCURptELE5h21Vw84ha8wogw_g/s1600/12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpbiUJ3r8guC5BoTS0vVGy6k58Di4dCBBe2O-U8kE5xwGr2Kctm9hysO82lNMOVhruQEwdiG7FuU9wk6tWSogQUprLAw3vgHyM9LsSP5Uk8uqTalCvNMCURptELE5h21Vw84ha8wogw_g/s320/12.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />13. Selanjutnya pada <b>Preset </b>pilih mode <b>GIF 32 Dithered</b>, kemudian klik <b>Save</b>.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikuAowU9MWJaktUjcYbsplGGnwIt5ZYgdtQwvq1_sKrdPewG43iwpslMQD05FfFOVVT-I0hfcQdpub8zThWP4EKEVHDzwVUpDKBTp4_LNPEDvc3ch5-gfoP_JW43vZ4Kp6PjNr0GL7E6k/s1600/13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikuAowU9MWJaktUjcYbsplGGnwIt5ZYgdtQwvq1_sKrdPewG43iwpslMQD05FfFOVVT-I0hfcQdpub8zThWP4EKEVHDzwVUpDKBTp4_LNPEDvc3ch5-gfoP_JW43vZ4Kp6PjNr0GL7E6k/s320/13.jpg" title="Membuat Animasi Foto Slide Show Dengan Photoshop CS3" width="320" /></a></div><div style="text-align: justify;"><br />14. Selesai dan lihat hasilnya.<br /><br />Tutorial <b>Membuat Animasi Foto Slide Show Dengan Photoshop CS3</b> ini hanyalah sebagai contoh gambaran saja, saya yakin anda bisa membuat yang lebih baik lagi dari contoh ini. Silahkan lakukan langkah-langkah diatas dan kembangkan sebagus mungkin sesuai keinginan anda.</div>

Membuat Animasi Foto Slide Show Dengan Photoshop CS3 – untuk membuat animasi slide show sebenarnya t…

Read More

Jquery Widget Recent Post Automatic Slider

<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8SaFo8gS0mJVjC3CQ9Sfnhd9e0jID7vocmXIzvdoqG20fp8SkGjtvN6pR2qOsMG9js0LM9WYiCYz-ANf3cDIPQOVm1CYsbWHlcocARdy7cGdfrEgVjmaNzKzBEprqQpXsN6fYjJwPqsk/s1600/slider.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Jquery Widget Recent Post Automatic Slider" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8SaFo8gS0mJVjC3CQ9Sfnhd9e0jID7vocmXIzvdoqG20fp8SkGjtvN6pR2qOsMG9js0LM9WYiCYz-ANf3cDIPQOVm1CYsbWHlcocARdy7cGdfrEgVjmaNzKzBEprqQpXsN6fYjJwPqsk/s320/slider.gif" title="Jquery Widget Recent Post Automatic Slider" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><b>Jquery Widget Recent Post Automatic Slider</b> – merupakan widget yang berguna untuk menampilkan artikel terbaru atau konten posting yang terakhir kali di terbitkan pada sebuah halaman blog menggunakan slide show. Widget Recent Post Automatic Slider ini berguna untuk memberitahukan kepada <a href="http://mas-andes.blogspot.com/2012/12/meningkatkan-visitor-blog-dengan-10khits.html" target="_blank" title="meningkatkan visitorblog dengan 10khits">visitor blog</a> agar mereka dapat dengan mudah menemukan artikel terbaru yang mungkin mereka cari. Untuk menemukan artikel terbaru, visitor tidak perlu lagi untuk mencari lebih jauh karena widget ini sudah terlihat dengan jelas untuk memberitahu kepada visitor yang datang dan mereka hanya dengan menggunakan tombol mouse sekali klik saja untuk menuju ke halaman artikel terbaru dari blog yang sudah terpasang Widget Recent Post Automatic Slider ini. Untuk cara pemasangan widget ini sangat mudah, hanya dengan sedikit meletakkan script yang sudah tersedia dibagian konten ini kemudian dapat langsung diterapkan ke blog masing-masing. Untuk yang sudah tidak sabar memasang Widget Recent Post Automatic Slider ini silahkan ikuti tutorial pemasangannya dan silahkan dimulai. Berikut ini adalah cara memasang <b>Jquery Widget Recent Post Automatic Slider</b> untuk melengkapi layout halaman blog yang memungkinkan blog menjadi lebih cantik.<br /><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/" rel="nofollow" target="_blank"><button><b>Lihat Demo</b></button></a></div>1. Login ke halaman blogger.<br />2. Klik Template > Edit HTML.<br />3. Cari kode <b>]]></b:skin></b> gunakan tombol CTRL + F untuk mempermudah pencarian.<br />4. Kemudian taruh kode berikut ini lalu letakkan diatasnya kode <b>]]></b:skin></b></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">#slide-container {    height: 360px;<br />    position: relative;<br />    width: 480px;<br />}<br />#slider {<br />    height: 360px;<br />    left: 25px;<br />    overflow-x: hidden;<br />    overflow-y: hidden;<br />    position: relative;<br />    width: 480px;<br />    font-family: calibri;<br />}<br />.slide-desc {<br />    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;<br />    color: #FFFFFF;<br />    padding: 10px;<br />    position: absolute;<br />    right: 0px;<br />    text-align: left;<br />    top: 0;<br />    width: 200px;<br />    z-index: 99999;<br />}<br />.slide-desc h2 {<br />    display: block;<br />}<br />.crosscol .widget-content {<br />    position: relative;<br />}<br />#slider ul, #slider li,<br />#slider2 ul, #slider2 li {<br />    margin: 0;<br />    padding: 0;<br />    list-style: none;<br />}<br />#slider2 {<br />    margin-top: 1em;<br />}<br />#slider li, #slider2 li {<br />    width: 480px;<br />    height: 360px;<br />    overflow: hidden;<br />}<br />#prevBtn, #nextBtn,<br />#slider1next, #slider1prev {<br />    display: block;<br />    width: 30px;<br />    height: 77px;<br />    position: absolute;<br />    left: -30px;<br />    text-indent: -9999px;<br />    top: 71px;<br />    z-index: 1000;<br />}<br />#nextBtn, #slider1next {<br />    left: 520px !important;<br />}<br />#prevBtn, #nextBtn, #slider1next, #slider1prev {<br />    display: block;<br />    height: 77px;<br />    left: 0;<br />    position: absolute;<br />    top: 132px;<br />    width: 30px;<br />    z-index: 1000;<br />}<br />#prevBtn a, #nextBtn a,<br />#slider1next a, #slider1prev a {<br />    display: block;<br />    position: relative;<br />    width: 30px;<br />    height: 77px;<br />    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;<br />}<br />#nextBtn a, #slider1next a {<br />    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;<br />}<br />ol#controls {<br />    margin: 1em 0;<br />    padding: 0;<br />    height: 28px;<br />}<br />ol#controls li {<br />    margin: 0 10px 0 0;<br />    padding: 0;<br />    float: left;<br />    list-style: none;<br />    height: 28px;<br />    line-height: 28px;<br />}<br />ol#controls li a {<br />    float: left;<br />    height: 28px;<br />    line-height: 28px;<br />    border: 1px solid #ccc;<br />    background: #DAF3F8;<br />    color: #555;<br />    padding: 0 10px;<br />    text-decoration: none;<br />}<br />ol#controls li.current a {<br />    background: #5DC9E1;<br />    color: #fff;<br />}<br />ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {<br />    outline: none;<br />}</blockquote><div style="text-align: justify;">5. Lanjutkan lagi dengan mencari kode <b></body></b> kemudian taruh kode berikut ini lalu letakkan tepat di atasnya.<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script><script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br /> $("#slider").easySlider({<br /> auto: true,<br /> continuous: true<br /> });<br />});<br />//]]><br /></script></blockquote>6. Simpan Template.<br />7. Selanjutnya klik Tata Letak > Tambah Widget > pilih HTML/Javascript.<br />8. Copy kode berikut ini kemudian taruh di kolom HTML/Javascript.<br /><blockquote class="tr_bq"><div id="slider"><br /><script style="text/javascript" src="http://andes.googlecode.com/files/easySlider.min.js"></script><br /><script style="text/javascript"><br /> var numposts_gal = 6;<br /> var numchars_gal = 150;<br /> var random_posts = false; // random posts<br /></script><br /><!-- replace with your web address (marked with red color) --><br /><script src="http://mas-andes.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /></div></blockquote><b>Keterangan</b>:</div><ul style="text-align: justify;"><li>Silahkan ganti <span style="color: red;"><b>http://mas-andes.blogspot.com</b></span> dengan URL blog anda.</li><li>Untuk mengubah jumlah artikel posting yang ingin ditampilkan pada slide show silahkan ganti <b>var numposts_gal = <span style="color: red;">6</span>;</b> dengan angka sesuai keinginan anda.</li><li>Jika ingin mengubah jumlah karakter dalam deskripsi silahkan ganti pada <b>var numchars_gal = <span style="color: red;">150</span>;</b> dengan angka sesuai kenginan anda.</li><li>Atur letak widget tepat diatas kolom posting seperti pada gambar dibawah ini, atau bisa juga dengan keinginan anda.<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCx0NMXhz9xrPxlwegseqFJIVT7afuFs6x8_W3PV-U0jkNyTQhEN-r4aSlBR7oej-9Pg2gtc5YHVCgawEU_60K0tcxdXaruqtN2kUxR-zP7rgHOWCmrwtCd7d0cgz4caafKvJvsspUUxM/s1600/tata-letak-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Jquery Widget Recent Post Automatic Slider" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCx0NMXhz9xrPxlwegseqFJIVT7afuFs6x8_W3PV-U0jkNyTQhEN-r4aSlBR7oej-9Pg2gtc5YHVCgawEU_60K0tcxdXaruqtN2kUxR-zP7rgHOWCmrwtCd7d0cgz4caafKvJvsspUUxM/s320/tata-letak-slider.jpg" title="Jquery Widget Recent Post Automatic Slider" width="320" /></a></div></li></ul><div style="text-align: justify;">9. Simpan dan selesai sudah cara pemasangan <a href="http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html" target="_blank">Jquery Widget Recent Post Automatic Slider</a>, silahkan lihat hasilnya.<br /><br /><b>Jquery Widget Recent Post Automatic Slider</b> adalah cara terbaik untuk menunjukkan artikel posting terbaru menggunakan mode slide show. Anda dapat melihat slider-slider tersebut kebanyakan di wordpress akan tetapi untuk blogger hal ini tentunya tidak banyak yang menggunakan. Jika Anda berpikir bahwa kustomisasi ini akan sulit maka anda salah, widget ini sangat mudah untuk menyesuaikan dan sangat mudah untuk diterapkan. Anda tidak perlu menambahkan foto, teks atau link seperti slider lainnya, karena semua sudah berjalan secara Otomatis.</div>

Jquery Widget Recent Post Automatic Slider – merupakan widget yang berguna untuk menampilkan artikel…

Read More

7 Tips Membuat Posting Blog Shareable

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbx2BAe8qBVUYyqbZl7BXYw-DZ2D06o8IrPiYNzp0Bj7gJ7HgDbzjjb2wAWDpYT1lOm-Wyus545nP22aC1qZ8QSEWo-xbNrxa5IICjfNWh-DbuE6qZb0GvlWw2Zhj0QIXQK6jehh52M8/s1600/sharable.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="7 Tips Membuat Posting Blog Shareable" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbx2BAe8qBVUYyqbZl7BXYw-DZ2D06o8IrPiYNzp0Bj7gJ7HgDbzjjb2wAWDpYT1lOm-Wyus545nP22aC1qZ8QSEWo-xbNrxa5IICjfNWh-DbuE6qZb0GvlWw2Zhj0QIXQK6jehh52M8/s1600/sharable.jpg" title="7 Tips Membuat Posting Blog Shareable" /></a></div><div style="text-align: justify;"><b>7 Tips Membuat Posting Blog Shareable</b> - Salah satu realitas dalam memposting blog adalah untuk menciptakan lebih banyak lalu lintas visitor agar mau untuk tinggal lebih lama membaca dan menikmati di halaman manapun posting blog yang anda publish.</div><a name='more'></a><div style="text-align: justify;">Biasanya, peselancar blog menentukan sebuah halaman dalam beberapa detik untuk membaca lebih lanjut atau justru mereka akan meninggalkan blog tersebut dan mencari konten yang lain. Untuk memungkinkan hal ini tidak terjadi, maka posting blog harus ditulis dan diformat dengan cara agar konten tidak hanya menarik secara visual tetapi juga shareable. Hal ini bisa dilakukan dalam beberapa detik dengan mengikuti tips di bawah ini untuk <a href="http://mas-andes.blogspot.com/2013/03/10-cara-menulis-posting-untuk.html" target="_blank" title="cara menulis poting untuk meningkatkan trafik blog">membuat posting blog</a> shareable, dan berikut adalah <b>7 Tips Membuat Posting Blog Shareable</b>:<br /><br /><b>1. Perhatikan Judul</b><br />Hal pertama yang akan dilihat oleh visitor adalah judul posting. Pastikan untuk memiliki judul posting yang cukup jelas dan ringkas, sehingga visitor lebih mudah untuk mengetahui inti dari posting blog anda. Juga ingat, bahwa judul poting yang tidak relevan dengan konten setiap posting akan mempersulit Search Engine untuk melacaknya. Sebelum menerbitkan konten, luangkan waktu untuk mempertimbangkan <a href="http://mas-andes.blogspot.com/2013/03/8-tips-search-engine-optimization-seo.html" target="_blank" title="tips Search Engine Optimization">Search Engine Optimization</a> ketika membuat judul posting.<br /><br /><b>2. Gunakan Headings</b><br />Menggunakan pilihan format "judul" dalam post editor blog tidak hanya membuat konten scannable karena mengelompokkannya menjadi potongan-potongan yang lebih kecil dengan headline yang jelas untuk setiap bagian, tetapi Search Engine juga mempertimbangkan konten untuk diterbitkan dengan menggunakan format "judul" daripada nonformat. Buatlah judul relevan, jelas dan ramah Search Engine.<br /><br /><b>3. Gunakan Tag <ul> atau <ol></b><br />Membuat teks dengan daftar bullet atau numbering (bernomor) dengan baik dalam menulis teks pada baris paragraf yang panjang agar konten terpecah dan lebih tertata. Gunakan daftar bullet atau numbering setiap kali untuk memecah teks panjang.<br /><br /><b>4. Gunakan Teks Bold dan Italic</b><br />Gunakan Teks Bold dan Italic Tapi Tidak Terlalu Banyak. Teks Bold dan Italic bekerja sangat baik untuk menarik perhatian teks tertentu dalam posting blog, tetapi apabila berlebihan juga menjadi tidak berguna. Tujuannya adalah menarik perhatian ke bagian yang paling penting dari posting blog, jika ini dilakukan berlebihan justru akan membuat posting blog berantakan dan lebih sulit untuk dibaca.<br /><br /><b>5. Link Relevan</b><br />Link bisa sangat membantu dalam mengarahkan visitor untuk menemukan informasi lebih lanjut. <a href="http://mas-andes.blogspot.com/2013/02/8-tips-optimasi-link-internal-untuk.html" target="_blank" title="tips optimasi link internal">Link </a>juga membantu dalam Search Engine Optimization karena Search Engine seperti Google akan mempertimbangkan teks terkait yang lebih tinggi daripada teks non-link. Namun, terlalu banyak link juga dapat memiliki efek negatif, seperti halnya terlalu banyak teks bercetak tebal atau miring. Gunakan link tapi jangan berlebihan.<br /><br /><b>6. Gunakan Gambar</b><br />Gambar adalah cara yang bagus untuk memecah posting blog. Gambar dapat membantu untuk menarik perhatian ke pos tertentu, menambah variatif blog dan membantu Search Engine Optimization. Jangan gunakan terlalu banyak gambar dalam sekali posting, bukan hanya dapat membuat posting terlihat berantakan namun konten akan lebih sulit untuk dibaca dan sulit dipahami. Juga, pastikan untuk menyertakan alt-tag dan deskripsi gambar. Akan lebih baik jika menggunakan gambar yang memiliki izin untuk di publikasikan di blog anda. Ada banyak situs yang menawarkan foto gratis untuk digunakan pada setiap kebutuhan blog anda.<br /><br /><b>7. Paragraf Pendek</b><br />Posting blog yang paling mudah untuk dipahami ketika dibaca oleh visitor adalah konten dalam paragraf pendek. Konten dengan dua atau tiga paragraf saja biasanya yang akan dibaca dan diterima oleh visitor, lebih dari itu mungkin visitor akan malas untuk membaca. Paragraf yang singkat atau pendek yang mencakup inti dari isi seluruh konten dan tidak banyak kata untuk bertele-tele agar tidak menghilangkan kualitas konten. Paragraf yang pendek akan lebih dekat mempengaruhi visitor dan konten juga lebih shareble.</div>

7 Tips Membuat Posting Blog Shareable - Salah satu realitas dalam memposting blog adalah untuk menci…

Read More

Keindahan Objek Wisata Situ Patengan

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYN-YXsWHbTKvxVosTets6VbBQ4LUW9bAVEfYz_qivGScRWQVURPiBvTKneQ7IogR3UBKCLzn1UrXuMgx9aLNtWRl5Y5BIPyVjKFxsaTuae7WU1fWb381LcxBAmaafpBqQ0U6cCtW6xpQ/s1600/Situ-Patengan2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Keindahan Objek Wisata Situ Patengan" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYN-YXsWHbTKvxVosTets6VbBQ4LUW9bAVEfYz_qivGScRWQVURPiBvTKneQ7IogR3UBKCLzn1UrXuMgx9aLNtWRl5Y5BIPyVjKFxsaTuae7WU1fWb381LcxBAmaafpBqQ0U6cCtW6xpQ/s320/Situ-Patengan2.jpg" title="Keindahan Objek Wisata Situ Patengan" width="320" /></a></div><div style="text-align: justify;"><b>Keindahan Objek Wisata Situ Patengan</b> – berbeda dengan <a href="http://mas-andes.blogspot.com/2013/03/panorama-objek-wisata-situ-lembang.html" target="_blank" title="panorama objek wisata situ lembang">Situ Lembang</a> namun masih seputar daerah di Jawa Barat. Keindahan tempat wisata alam dengan nuansa yang hijau dan segar membuat daya pikat mata untuk menikmati kesejukan yang tentu dapat menenangkan hati kita. Kawasan Situ Patengan terlatak didesa patengan, kecamatan rancabali, kabupaten bandung. Kawasan ini berjarak sekitar 47 km arah selatan pusat kota bandung. Situ Patengan memiliki luas sekitar 60 hektare. Situ Patengan berasa dari bahasa sunda. Situ artinya danau, sedangkan patengan berasal dari kata pateangan; teangan (saling mencari).</div><a name='more'></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXMjofwh4tViE76LX1wQn-muBhL1cSIMsDotYZ-kGUhQ4d33KVcz1t6RneUoporOtLs54TAvVKTY9R2C9xocvwtc0ios21Cmx7O5TwPxhEIr_OcQzpHE1VLRJRPrR3Fdax79mH8ioTBk/s1600/Situ-Patengan1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Keindahan Objek Wisata Situ Patengan" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXMjofwh4tViE76LX1wQn-muBhL1cSIMsDotYZ-kGUhQ4d33KVcz1t6RneUoporOtLs54TAvVKTY9R2C9xocvwtc0ios21Cmx7O5TwPxhEIr_OcQzpHE1VLRJRPrR3Fdax79mH8ioTBk/s320/Situ-Patengan1.jpg" title="Keindahan Objek Wisata Situ Patengan" width="320" /></a></div> <div style="text-align: justify;">Dikisahkan pada jaman dahulu ada sepasang sejoli, yakni Raden Indrajaya dan Dewi Rengganis yang saling mencintai. Mereka berpisah sekian lama dan saling mencari. Akhirnya mereka bertemu kembali ditempat yang dinamakan batu cinta. Dewi rengganis meminta sang pangeran membuat sebuah pulau dan sebuah perahu untuk mereka berdua agar bisa mengelilingi danau. Pulau inilah yang sampai sekarang menjadi sebuah pulau berbentuk hati (pulau asmara). Dari cerita ini berkembanglah mitos, bagi pasangan yang mengelilingi pulau asmara dan singgah ke batu cinta akan mendapatkan cinta abadi seperti pasangan Raden Indrajaya dan Dewi Rengganis.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPa6gH6i8Q8tUv2p6ft-EZb3HxPY6DyD_z03rS1cm81DNpfNc8IzGu8VySSJfAQbaJZPMiyOW3HUBsu1GZ5oAtgRWMd0n2EDjBkgkHpHeDk8Niyb7wWkWUi8zFMw4HESBpjZxCFr8F64/s1600/Situ-Patengan3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Keindahan Objek Wisata Situ Patengan" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPa6gH6i8Q8tUv2p6ft-EZb3HxPY6DyD_z03rS1cm81DNpfNc8IzGu8VySSJfAQbaJZPMiyOW3HUBsu1GZ5oAtgRWMd0n2EDjBkgkHpHeDk8Niyb7wWkWUi8zFMw4HESBpjZxCFr8F64/s320/Situ-Patengan3.jpg" title="Keindahan Objek Wisata Situ Patengan" width="320" /></a></div> <div style="text-align: justify;">Pengunjung dapat menikmati keindahan panorama alam sekeliling danau dengan speedboat, perahu dayung warna-warni, sepeda air, dan genjot bebek yang disewakan. Dikawasan Situ Patengan juga tersedia arena untuk memancing. Bagi pengunjung yang ingin berkemah, dikawasan Situ Patengan juga terdapat Camping Ground yang sangat cocok untuk berkemah bersama keluarga. Pengunjung tidak perlu khawatir karena tiket masuk menuju kawasan Situ Patengan sangat murah. Pengunjung dikenai biaya tiket sebesar Rp 4.000 per orang dan apabila membawa mobil pribadi, dikenai tambahan biaya parkir sebesar Rp 10.000 setiap mobilnya. Setelah itu wisatawan dapat singgah ke perkebunan stroberi yang tempatnya tidak jauh dari Situ Patengan, yakni didaerah rancabali. Objek wisata Situ Patengan ini sangat menarik untuk dikunjungi. Di perkebunan stroberi, kita dapat memetik sendiri buah stroberi dan membawanya pulang.</div>

Keindahan Objek Wisata Situ Patengan – berbeda dengan Situ Lembang namun masih seputar daerah di Jaw…

Read More

Khasiat Tanaman Asam Jawa

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWK_tvViv2npPSxnTY4SXcki5vaxGtwp6JAnHR08aBEiX9VczqRD0s4xeRGUACJatxM1DHWHfFGv9ZdYKmL6t9-CIIioSQFMg4r2ylNgYSsRb4Wj9-Syruv_SrYg_RFwuF32heTfERxHA/s1600/asam.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Khasiat Tanaman Asam Jawa" border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWK_tvViv2npPSxnTY4SXcki5vaxGtwp6JAnHR08aBEiX9VczqRD0s4xeRGUACJatxM1DHWHfFGv9ZdYKmL6t9-CIIioSQFMg4r2ylNgYSsRb4Wj9-Syruv_SrYg_RFwuF32heTfERxHA/s320/asam.jpg" title="Khasiat Tanaman Asam Jawa" width="320" /></a></div><div style="text-align: justify;"><b>Khasiat Tanaman Asam Jawa</b> – semua tentu sudah mengenal tanaman yang satu ini. Tanaman asam jawa mempunyai batang yang kuat dapat tumbuh menjadi besar dan daunnya rindang. Daun asam jawa bertangkai panjang sedangkan bunganya berwarna kuning kemerahan. Asam jawa mengandung berbagai jenis asam, seperti asam sirat, asam anggur, asam tartrat, asam suksinat yang menyebabkan rasanya menjadi asam. </div><a name='more'></a><div style="text-align: justify;">Didalam buah asam juga terkandung <a href="http://mas-andes.blogspot.com/2013/01/pentingnya-protein-pada-tubuh-manusia.html" target="_blank" title="pentingnya protein pada tubuh manusia">protein</a>, <a href="http://mas-andes.blogspot.com/2013/01/fungsi-lemak-pada-tubuh-manusia.html" target="_blank" title="fungsi lemak pada tubuh manusia">lemak</a>, <a href="http://mas-andes.blogspot.com/2013/01/pentingnya-karbohidrat-atau-hidrat.html" target="_blank" title="pentingnya karbohidrat atau hidrat arang pada manusia">karbohidrat</a>, kalsium, fosfor, zat besi, vitamin A, vitamin B, dan vitamin C. Buah asam selain digunakan untuk bumbu masak, dapat juga dibuat permen dan sari buah. Selain itu buah asam juga berkhasiat obat. Buah asam dapat dimanfaatkan diantaranya untuk mengobati asma, demam, sariawan, sakit perut, luka borok, dan rambut rontok. Adapun cara dan resep untuk membuat obat tradisional dengan memanfaatkan <b>Khasiat Tanaman Asam Jawa</b>:</div><br /><div style="text-align: justify;"><b>Untuk mengobati sakit perut</b> diperlukan 3 polong asam jawa yang sudah masak, kapur sirih dan kayu putih. Semua bahan dicampur menjadi satu dan digunakan sebagai obat gosok pada bagian perut yang sakit. Resep lain yang dapat digunakan sebagai obat gosok yaitu dengan menggunakan 3 polong buah asam jawa dan 1 potong gula aren. Seduhlah kedua bahan tersebut dengan 2 gelas air panas dan disaring, lalu air hasil saringan diminum secara teratur.</div><div style="text-align: justify;"><br /><b>Untuk mengobati sakit panas</b>, sediakan 2 polong buah asam jawa yang telah masak dan garam secukupnya. Kedua bahan tersebut diseduh dengan 1 gelas air panas kemudian disaring lalu air hasil saringan diminum. Namun yang harus diperhatikan resep ini tidak boleh diminum oleh ibu yang sedang hamil.</div><div style="text-align: justify;"><br /><b>Untuk mengatasi rematik</b>, petik satu genggam daun asam jawa dan 2 – 3 biji asam jawa. Kemudian tumbuk kedua bahan tersebut sampai halus, selanjutnya bahan yang telah ditumbuk tersebut dikompreskan pada bagian yang sakit.</div><div style="text-align: justify;"><br /><b>Untuk mengatasi luka baru</b>, ini sangat mudah karena cukup dengan menempelkan daun asam jawa yang telah dikunyah terlebih dahulu kemudian tempelkan diatas pada bagian yang luka. Sedangkan untuk mengatasi luka borok, gunakan biji asam jawa yang sudah ditumbuk kemudian ditempelkan diatas bagian yang luka dan tutup dengan perban.</div><div style="text-align: justify;"><br /><b>Untuk mengatasi sariawan</b>, resepnya sediakan 2 polong buah asam jawa, 2 rimpang temulawak sebesar ibu jari, dan 1 potong gula kelapa. Selanjutnya semua bahan tersebut direbus sampai mendidih hingga tinggal 1 gelas kemudian disaring. Air hasil saringan diminum seperti biasa.</div><div style="text-align: justify;"><br />Selain buahnya, daun asam jawa juga dapat digunakan sebagai obat untuk menurunkan kadar kolesterol dalam darah. Caranya tumbuk 150 – 200 daun asam jawa, lalu campur dengan 1 gelas air panas (200 ml). Setelah itu, diperas, disaring dan diminum untuk satu kali minum dengan penggunaan 3 kali minum sehari.</div>

Khasiat Tanaman Asam Jawa – semua tentu sudah mengenal tanaman yang satu ini. Tanaman asam jawa memp…

Read More

Asal Mula Kota Sala

<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqm6t8dXdxlSa_ZKUZn6DZCVyvzS8dT18yGI_AgbbApQCXCwyfY5CCC0-GYwLITTbo5mpKytNEUbL1Y7gQYnNddsorLqGracltyN0AlskafgsWBZq5ePx5o85ETTSIwL-yqvXPl44yTM/s1600/sala1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Asal Mula Kota Sala" border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqm6t8dXdxlSa_ZKUZn6DZCVyvzS8dT18yGI_AgbbApQCXCwyfY5CCC0-GYwLITTbo5mpKytNEUbL1Y7gQYnNddsorLqGracltyN0AlskafgsWBZq5ePx5o85ETTSIwL-yqvXPl44yTM/s320/sala1.jpg" title="Asal Mula Kota Sala" width="320" /></a></div><b>Asal Mula Kota Sala</b> – sejarah asal-usul sejarah kota sala berawal dari saat terjadinya peristiwa penting di Keraton Kartasura. Ketika itu yang menjadi raja di Kraton Kartasura adalah Sri Susuhunan Paku Buwana II. Sang raja yang saat itu masih muda belia membuat keputusan yang sering keliru dan kebijaksanaannya sering melukai perasaan para kerabat kraton. Puncak kekecewaan para kerabat kraton itu terjadi saat Sri Susuhunan Paku Buwana II tanpa sebab yang jelas telah menjatuhkan hukuman mati terhadap Pangeran Tepasana.</div><a name='more'></a><div style="text-align: justify;">Akibat dari tindakannya ini, putra Pangeran Tepasana yang bernama Raden Mas Garendi memberontak dan menyatakan diri sebagai raja tandingan dengan gelar Sunan Kuning. Pemberontakan Raden Mas Garendi ini banyak mendapat dukungan dari para kerabat kraton, termasuk Adipati Martapura yang dulu sangat setia kepada pemerintahan Kraton Kartasura. Disamping ini, pemberontakan Raden Mas Garendi ini juga banyak dibantu oleh orang-orang Cina yang banyak tinggal didaerah Kartasura dan sekitarnya. Dengan keahliannya, Raden Mas Garendi berhasil membentuk pasukan yang kuat yang mayoritas prajuritnya adalah orang-orang Cina, dan kemudian berhasil merebut tahta dan menduduki Kraton Kartasura. Peristiwa ini dalam sejarah disebut “geger pecinan”.<br /><br /></div><div style="text-align: justify;">Akibat peristiwa ini Sri Susuhunan Paku Buwana II bersama kerabat kraton yang masih setia kepadanya melarikan diri ke Ponorogo. Namun sang raja hanya 9 bulan saja terpaksa hidup  di pengungsian, setelah menghimpun kembali kekuatannya dan mendapat bantuan dari pasukan kembali Belanda serta bala tentara Adipati Cajraningrat dari Madura, akhirnya Sri Susuhunan Paku Buwana II berhasil merebut kembali Kraton Kartasura dari tangan Sunan Kuning atau Raden Mas Garendi. Walau Sri Susuhunan Paku Buwana II berhasil merebut kembali dan menduduki kraton Kartasura lagi, namun hatinya sangat terpukul mengetahui keadaan kraton yang sudah banyak mengalami kerusakan. Kegelisahan itu masih ditambah dengan adanya saran dan petunjuk dari para sesepuh kraton. Bahwa untuk menghindari kerusakan kraton yang lebih parah lebih-lebih untuk menjaga kekuasaan Dinasti Mataram dimasa yang akan datang, maka kraton Kartasura sebagai pusat peerintahan negara harus dipindahkan. Hal ini harus secepatnya dilakukan karena sebuah keadaan kraton yang sudah dijamah oleh kaum pemberontak, sangat tidak baik apabila terus dipakai sebagai pusat pemerintahan. </div><br /><div style="text-align: justify;">Untuk memenuhi nasihat para sesepuh kraton tersebut, Sri Susuhunan Paku Buwana II segera mengundang Kiai Yosodipura, Kiai Tohjoyo, dan Pangeran Wijil. Pokok dari pembicaraan adalah mencari jelan keluar agar kehendak para sesepuh kraton segera terwujud. Atas petunjuk Kiai Tohjoyo, tempat kraton yang baru harus dicari tanah yang kelak dapat memberi kesejahteraan (Sukoharjo). Sedangkan Kiai Yosodipura menambahkan agar tanah yang dipilih nanti hendaknya berbau harum. Akhirnya Pangeran Wijil menyenggupkan diri daam usaha pencarian tanah untuk kepindahan kraton Kartasura tersebut secepatnya. Atas perintah Sri Susuhunan Paku Buwana II, Pangeran Wijil segera menyusun tim penyelidik yang akan mengemban tugas mencari tanah untuk pemindahan kraton Kartasura. Tim penyelidik dibagi menjadi 2 kelompok. Kelompok yang pertama dipimpin oleh Suranata Kiai Kalifah Buyut dan Mas Penghulu Pekik Ibrahim, sementara kelompok yang kedua dipimpin oleh Raden Tumenggung Hanggowongso dan Tumenggung Tirtawiguna. Setelah memperoleh bekal petunjuk seperlunya sesuai dengan yang digariskan Sri Susuhunan Paku Buwana II, tim penyelidik segera berangkat mengemban tugas masing-masing.</div><div style="text-align: justify;"><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhry4L1cvE3hWsimVb4ZavraE-cfZ1tNyk75cQ1gGI9y103LySynN_bOzRn1rpyJhXDwVNdicjYC747J1fojJYaaMdjJmsSzLSsJI8nAxwbPE-BzS6mzlolsDyX_rGebH5zMhcuWsIsm2Q/s1600/sala2.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Asal Mula Kota Sala" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhry4L1cvE3hWsimVb4ZavraE-cfZ1tNyk75cQ1gGI9y103LySynN_bOzRn1rpyJhXDwVNdicjYC747J1fojJYaaMdjJmsSzLSsJI8nAxwbPE-BzS6mzlolsDyX_rGebH5zMhcuWsIsm2Q/s320/sala2.jpg" title="Asal Mula Kota Sala" width="240" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Makam Ki Gedhe Sala</td></tr></tbody></table><br />Dikisahkan kemudian utusan raja itu berangkat ke arah timur. Tidak berapa lama mereka menemukan tanah yang subur dan berbau harum, maka para utusan raja ini menamakan tempat ini Desa Talawangi (sekarang Kadipala). Tempat ini segera dibabad untuk dijadikan halaman kraton, tetapi setelah dilakukan pengukuran oleh Tumenggung Tirtawiguna, ternyata ukurannya kurang luas. Perjalanan kemudian dilanjutkan lagi ke arah timur dengan menyeberangi Bengawan hingga ke desa Bekonang. Namun para utusan raja ini kemudian balik lagi ke arah barat karena tanah di desa Bekonang tidak memenuhi syarat untuk dijadikan sebuah kraton. Mereka pun akhirnya sampai disebuah tempat yang berawa. Rawa itu dipenuhi Lumbu, yaitu semacam tumbuh-tumbuhan air, maka tempat ini kemudian disebut Kedunglumbu. Ditepi rawa inilah kemudian Tumenggung Tirtawiguna dan Pangeran Wijil berdoa memohon petunjuk dari Tuhan Yang Maha Esa. Karena begitu khusuknya berdoa, maka Tuhan pun memberi petunjuk kepada kedua utusan raja itu lewat sebuah suara gaib. “Hei... engkau yang sedang bertirakat, kalau engkau menginginkan tepat untuk dijadikan sebuah kraton, maka pergilah ke desa Sala, sebab sudah ditakdirkan tempat itu akan menjadi sebuah kota yang besar dan makmur”. Setelah mendengar suara gaib itu maka Tumenggung Tirtawiguna dan Pangeran Wijil pun segera menuju ketempat yang ditunjukan suara gaib itu. Betapa gembiranya kedua utusan raja begitu sampai di desa Sala dan bertemu dengan Ki Gedhe Sala karena ternyata Ki Gedhe juga mendengar suara gaib tentang akan datangnya dua utusan kraton yang mencari tempat bagi pembangunan kraton yang baru.</div><div style="text-align: justify;"><br />Ketika penemuan di desa Sala itu dilaporkan kepada Sri Susuhunan Paku Buwana II, maka segeralah dilaporkan oleh sang raja agar Kedunglumbu yang berawa itu ditimbuni pepohonan. Tugas itu diberikan kepada bupati-bupati daerah pantai, tetapi usahanya selalu gagal karena air dan rawa itu terus mengalir. Melihat keadaan itu, Pangeran Wijil, Kiai Kalifah Buyut, dan Penghulu Pekik Ibrahim segera memberikan segala macam sesaji yang disertai doa-doa, namun hasilnya sia-sia, air rawa itu tetap saja keluar dengan derasnya seperti air laut. Semua yang melihat peristiwa itu ketakutan dan lari. Pangeran Wijil dan Kiai Yosodipuro yang melihat peristiwa itu langsung segera melakukan “tapa brata” disebelah selatan rawa selama tujuh hari tujuh malam dengan tidak makan tidak minum. Tepat pada malam hari yang ketujuh terdengar lagi sebuah suara gaib. “Hei engkau yang sedang mengemban titah raja, ketahuilah dasar rawa itu tidak mungkin bisa kering karena dasarnya tembus ke laut selatan. Bila engkau ingin menghentikannya, maka persayaratannya engkau harus menutupnya dengan Gong Sekar Delima dan kepala seorang penari bersama dengan daun lumbu”.</div><div style="text-align: justify;"><br />Sang Raja yang mendengar laporan dari kedua orang kepercayaannya itu segera menafsirkan ungkapan yang ada dalam suara gaib itu. Gong diartikan gangsa atau gamelan. Gangsa mengeluarkan bunyi, itu berarti gong adalah perlambangan orang yang menceritakan kisah itu, dan orang itu tidak lain adalah Ki Gedhe Sala sendiri pemilik daerah. Sedangkan kepala penari, dimaknakan sebagai wayang, yang dalam bahasa jawa adalah ringgit, sementara ringgit adalah mata uang. Berarti sejumlah mata uang, sekitar sepuluh ribu ringgit. Begituah sang raja Sri Susuhunan Paku Buwana II memerintahkan untuk memberikan untuk ganti rugi uang sejumlah sepuluh ribu ringgit kepada Ki Gedhe Sala untuk membeli desa Sala yang akan digunakan untuk lokasi sebagai pembangunan Kraton Surakarta. Setelah diberi ganti rugi, maka usaha penimbunan air Kedunglumbu berhasil dengan ditutup bunga merah delima dan daun lumbu. Sedangkan tanah yang digunakan untuk menimbun diambil dari Talawangi atau Kadipala. Kemudian Sri Susuhunan Paku Buwana II memneri nama tanah yang telah dibelinya itu dengan nama Surakarta Hadiningrat, peristiwa ini terjadi pada tahun 1670 Masehi.<br /><div style="background: #f2f2f2; border: 2px solid #7f7fff; box-shadow: 1px 1px 6px 1px #3d85c6; padding: 5px;">Dapat kita ambil dari makna legenda Asal Mula Kota Sala ini memberikan teladan tentang bagaimana serius dan penuh tanggung jawabnya seorang bawahan bila diberi tugas oleh pimpinannya. Disamping itu juga memberi contoh bahwa dalam menjalankan tugas apapun sangat perlu memohon petunjuk Tuhan. Hal ini yang dapat diambil dari legenda ini adalah sebuah teladan dari seorang penguasa yang bagaimanapun berkuasanya tetap memberi ganti rugi ketika harus mengambil tanah milik rakyatnya.</div></div>

Asal Mula Kota Sala – sejarah asal-usul sejarah kota sala berawal dari saat terjadinya peristiwa pen…

Read More