Firman Webs

Home All post

Membuat Push Down Panel Dengan CSS3 di Blog

Monday, 22 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlOoFFaePzTa68a8k9vXd5ftcwzOhf20liPcaLv4ra-mcz0J6R0yd7HY0cPYicMsbxEK6AQDymWwP3ppx0_zG1ESOmU15YIrR1iUwH8Na9OHKBGdQkV8iAfBXcyjdCK74yPsiKi-PcIDA/s1600/push-down-panel.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Push Down Panel" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlOoFFaePzTa68a8k9vXd5ftcwzOhf20liPcaLv4ra-mcz0J6R0yd7HY0cPYicMsbxEK6AQDymWwP3ppx0_zG1ESOmU15YIrR1iUwH8Na9OHKBGdQkV8iAfBXcyjdCK74yPsiKi-PcIDA/s320/push-down-panel.gif" title="Membuat Push Down Panel Dengan CSS3 di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Push Down Panel Dengan CSS3 di Blog</b> – ini merupakan fitur elegant untuk menggantikan fungsi tombol show hide pada blog. Jika kita perhatikan terkadang bagian dari konten posting di blog adalah terdapat tombol show hide yang berfungsi untuk menampilkan dan menyembunyikan konten yang berada didalamnya, dengan adanya Push Down Panel ini maka fungsi dari tombol show hide tersebut dapat digantikan atau dengan kata lain di ambil alih. Hasilnya adalah dengan menggunakan Push Down Panel ini maka konten akan menjadi variatif dan tentu saja lebih elegant. Dilain sisi, fitur dari Push Down Panel ini dapat menyesuaikan isi konten dengan mudah atau dengan kata lain apabila isi konten yang terdapat didalamnya sangat banyak maka konten tidak akan bergerak memanjang kebawah melainkan akan menampilkan fungsi scroll yang dapat meminimalis konten posting blog. Untuk melihat seperti apa lebih jelas dan detailnya maka bisa terlebih dahulu dilihat pada demo, dan untuk menerapkannya kedalam blog maka berikut adalah penyajiannya mengenai tutorial cara <b>Membuat Push Down Panel Dengan CSS3 di Blog:</b></div><br/><div style="text-align: justify;">1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpr0AXZjUvKd1QUT2gqHkSMrfTWyNCWrcv8fUB0VA9LNwQkCguCaSVK6SU3k4V9DxuX8Klz023SEt_LWlAnEP2tV-LxKNj-iF_QieDaXp6VUS0tlbA97F6LuiF7o3EvXY31UwxmZzHOa4/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Push Down Panel" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpr0AXZjUvKd1QUT2gqHkSMrfTWyNCWrcv8fUB0VA9LNwQkCguCaSVK6SU3k4V9DxuX8Klz023SEt_LWlAnEP2tV-LxKNj-iF_QieDaXp6VUS0tlbA97F6LuiF7o3EvXY31UwxmZzHOa4/s320/Kolom-kode-CSS.jpg" title="Membuat Push Down Panel Dengan CSS3 di Blog" width="320" /></a></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">div.css3droppanel {<br />position: relative;<br />margin: 0;<br />margin-bottom: 1em;<br />}<br /><br />div.css3droppanel > div {<br />height: 10px;<br />padding: 5px;<br />-moz-box-sizing: border-box;<br />-webkit-box-sizing: border-box;<br />box-sizing: border-box;<br />overflow: hidden;<br />background: #b5e5e0;<br />position: relative;<br />opacity: 0;<br />-moz-transition: all 0.2s ease-in-out 0.1s;<br />-o-transition: all 0.2s ease-in-out 0.1s;<br />-webkit-transition: all 0.2s ease-in-out 0.1s;<br />transition: all 0.2s ease-in-out 0.1s;<br />}<br /><br />div.css3droppanel:after { <br />content: '';<br />display: block;<br />bottom: 0;<br />position: absolute;<br />width: 100%;<br />height: 10px;<br />box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;<br />background: #5a1619;<br />background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));<br />background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);<br />background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);<br />background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);<br />background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);<br />}<br /><br />div.css3droppanel input[type="checkbox"] { <br />position: absolute;<br />right: 50px;<br />width: 60px; <br />height: 42px;<br />bottom: -34px;<br />z-index: 10;<br />cursor: pointer;<br />opacity: 0;<br />}<br /><br />div.css3droppanel input[type="checkbox"]:checked ~ div {<br />height: 250px; <br />opacity: 1;<br />overflow: auto;<br />}<br /><br />div.css3droppanel label {<br />position: absolute;<br />right: 50px; <br />width: 60px; <br />height: 42px;<br />bottom: -34px;<br />border-bottom-left-radius: 30px;<br />border-bottom-right-radius: 30px;<br />cursor: pointer;<br />z-index: 5;<br />background: #5a1619;<br />background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));<br />background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);<br />background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);<br />background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);<br />background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);<br />box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;<br />}<br /><br />div.css3droppanel label:hover { <br />box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;<br />}<br /><br />div.css3droppanel label:after { <br />content: '';<br />position: absolute;<br />display: block;<br />width: 0;<br />height: 0;<br />border: 12px solid transparent;<br />border-color: white transparent transparent transparent;<br />top: 18px;<br />left: 18px;<br />box-shadow: 0 0 7px gray inset;<br />} </blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Push Down Panel Dengan CSS3 di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div class="css3droppanel"><br /><input type="checkbox" id="paneltoggle" /><br /><label for="paneltoggle" title="Click to open Panel"></label><br /><div class="content"><br /><p> <span style="color: red;">TULISKAN ISI KONTEN DISINI</span> </p></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan teks yang di inginkan.</div><br/>DEMO:<br/><br/> <style>div.css3droppanel { position: relative; margin: 0; margin-bottom: 1em; } div.css3droppanel > div { height: 10px; padding: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background: #e9fbe9; position: relative; opacity: 0; -moz-transition: all 0.2s ease-in-out 0.1s; -o-transition: all 0.2s ease-in-out 0.1s; -webkit-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s; } div.css3droppanel:after {  content: ''; display: block; bottom: 0; position: absolute; width: 100%; height: 10px; box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset; background: #5a1619; background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72))); background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%); background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%); background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%); background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%); } div.css3droppanel input[type="checkbox"] {  position: absolute; right: 50px; width: 60px;  height: 42px; bottom: -34px; z-index: 10; cursor: pointer; opacity: 0; } div.css3droppanel input[type="checkbox"]:checked ~ div { height: 250px;  opacity: 1; overflow: auto; } div.css3droppanel label { position: absolute; right: 50px;  width: 60px;  height: 42px; bottom: -34px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; z-index: 5; background: #5a1619; background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72))); background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%); background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%); background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%); background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%); box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset; } div.css3droppanel label:hover {  box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset; } div.css3droppanel label:after {  content: ''; position: absolute; display: block; width: 0; height: 0; border: 12px solid transparent; border-color: white transparent transparent transparent; top: 18px; left: 18px; box-shadow: 0 0 7px gray inset; } </style> <div class="css3droppanel"><input type="checkbox" id="paneltoggle" /><label for="paneltoggle" title="Click to open Panel"></label><div class="content"> <p><b>Faceblog Evolutions</b> adalah situs blogging sederhana yang berisikan tentang tips-trik turorial blogger dan teknik maupun  taktik seo serta berbagai informasi terkini yang mudah-mudahan memberikan solusi yang berguna dan bermanfaat bagi kita semua. Semoga <b>Faceblog Evolutions</b> dapat  menjadi media informasi, solusi dan inspirasi. <b>Faceblog Evolutions</b> mempunyai menu navigasi yang lengkap dan tersusun rapi, yang tentunya akan mempermudah anda dalam memperoleh apa yang ada di sitemap/daftar isi menu Faceblog Evolutions dengan tepat sasaran. Saya juga  berusaha menampilkan sebaik mungkin dari yang terbaik untuk selalu membuat dan menampilkan isi artikel yang SEO dan bermanfaat untuk visitor. Selalu semangat dalam mengarungi dunia maya, untuk menempuh perjalanan sejauh 1000 mil dimulai dengan 1 langkah.</p><p>Nama Admin <a href="http://mas-andes.blogspot.com/"><b>Faceblog Evolutions</b></a> adalah <a href="https://plus.google.com/104093787575230359634"><b>Andes Rizky Nugroho</b></a>, pria berpostur tubuh kurus dan ganteng dunia akhirat (amin).</p><p>Demikian Selayang Pandang mengenai <b>Faceblog Evolutions</b>, semoga semoga bermanfaat dan bisa menjadi Media Informasi, Solusi dan Inspirasi dalam melaksanakan aktivitas sehari-hari dan dalam mengarungi Dunia Maya, untuk menempuh Perjalanan sejauh 1000 mil dimulai dengan 1 langkah. Saya berdoa untuk visitor <b>Faceblog Evolutions</b> semoga selalu diberikan rahmat, kesehatan, berkah. rejeki dan Sukses Dunia Akhirat (Amin).</p> </div></div>

Membuat Push Down Panel Dengan CSS3 di Blog – ini merupakan fitur elegant untuk menggantikan fungsi …

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi

Sunday, 21 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOXBjgGqqgNZ-skNj_BmTlgPaveRVg08pTwF0TX8FjoOCHJCsZ_y09SigMlC4yyXsa-NEWdIJ7G2SSv-TOfCoj3x9lm2GXW1dYyfrmghrz9hNfoYsmcBkNf-X4eLS6vybRLNVcK4cX_E/s1600/css-transisi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOXBjgGqqgNZ-skNj_BmTlgPaveRVg08pTwF0TX8FjoOCHJCsZ_y09SigMlC4yyXsa-NEWdIJ7G2SSv-TOfCoj3x9lm2GXW1dYyfrmghrz9hNfoYsmcBkNf-X4eLS6vybRLNVcK4cX_E/s320/css-transisi.jpg" title="Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi" width="320" /></a></div><div style="text-align: justify;"><b>Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi</b> – bisa dikatakan kurang lebih agak mirip dengan <a href="http://mas-andes.blogspot.com/2013/04/efek-gambar-peel-back-dengan-css3.html" target="_blank" title="efek gambar peel back dengan css3 transisi di blog">efek peel back</a> pada gambar di blog yang sudah pernah saya posting pada sebelumnya. Efek pull out gambar dengan css3 keyframe animasi ini merupakan perpaduan dari dua gambar yang terdapat palam satu posisi yang tepatnya pada gambar utama masih terdapat backing gambar yang terletak dibelakangnya dan apabila pada gambar utama tersebut tersentuh oleh mouse maka akan hover dan pada backing gambar akan berjalan secara halus dari sisi belakang kemudian ke arah samping kanan lalu menggantikan posisi gambar utama pada posting blog. Untuk lebih jelas dan detailnya maka bisa dilihat pada halaman demo dan berikut adalah tutorial untuk cara membuat <b>Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi di blog:</b></div><br/><div style="text-align: justify;">1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMVcpDhk0db1cGAwWeKaWAYpHacBMITkytUaueCBlDDWfW53cBstw29x3l6ZvkDbdyXbsCSz8vuOL-uLQcOK2dGGJxRCV6Mv1okyXn1-hlp81ZgANlJZhY_t3csMrMD5jPC3iuPLFyrc/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMVcpDhk0db1cGAwWeKaWAYpHacBMITkytUaueCBlDDWfW53cBstw29x3l6ZvkDbdyXbsCSz8vuOL-uLQcOK2dGGJxRCV6Mv1okyXn1-hlp81ZgANlJZhY_t3csMrMD5jPC3iuPLFyrc/s320/Kolom-kode-CSS.jpg" title="Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi" width="320" /></a></div><div style="text-align: left;"><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">.pulloutimage{<br />  position: relative;<br />}<br /><br />.pulloutimage img{<br />  position: absolute;<br />  left: 0;<br />}<br /><br />.pulloutimage img.ondemand{ <br />  opacity: 0;<br />  visibility: hidden; <br />}<br /><br />.pulloutimage img.original{<br />  z-index: 1; <br />}<br /><br /><br />@-webkit-keyframes revealfromright{<br />  0%{ <br />  z-index: -1;<br />  opacity: 0;<br />  }<br />  50%{ <br />  opacity: 1;<br />  z-index: -1;<br />  left: 100%;<br />  box-shadow: none;<br />  }<br />  51%{ <br />  z-index: 2;<br />  }<br />  100%{ <br />  left: 0;<br />  box-shadow: 8px 8px 15px gray;<br />  }<br />}<br /><br />@-moz-keyframes revealfromright{<br />  0%{<br />  z-index:-1;<br />  opacity:0;<br />  }<br />  50%{<br />  opacity:1;<br />  z-index:-1;<br />  left:100%;<br />  box-shadow: none;<br />  }<br />  51%{<br />  z-index:2;<br />  }<br />  100%{<br />  left:0;<br />  box-shadow: 8px 8px 15px gray;<br />  }<br />}<br /><br />@-ms-keyframes revealfromright{<br />  0%{<br />  z-index:-1;<br />  opacity:0;<br />  }<br />  50%{<br />  opacity:1;<br />  z-index:-1;<br />  left:100%;<br />  box-shadow: none;<br />  }<br />  51%{<br />  z-index:2;<br />  }<br />  100%{<br />  left:0;<br />  box-shadow: 8px 8px 15px gray;<br />  }<br />}<br /><br /><br />.pulloutimage:hover img.ondemand{ <br />  -webkit-animation-name:revealfromright; <br />  -webkit-animation-duration: 1s;<br />  -webkit-animation-iteration-count: 1;<br />  <br />  -moz-animation-name:revealfromright;<br />  -moz-animation-duration: 1s;<br />  -moz-animation-iteration-count: 1;<br />  <br />  -ms-animation-name:revealfromright;<br />  -ms-animation-duration: 1s;<br />  -ms-animation-iteration-count: 1;<br />  <br />  animation-name:revealfromright;<br />  animation-duration: 1s;<br />  animation-iteration-count: 1;<br />  <br />  visibility:visible;<br />  opacity:1;<br />  box-shadow: 8px 8px 15px gray;<br />  z-index:2;<br />}<br /><br />.pulloutimage:hover img.original{ <br />  opacity:0.5;<br />}</blockquote></div><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div class="pulloutimage" style="height:250px"><br /><a href="http://mas-andes.blogspot.com" target="_blank"><img class="original" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2QyaSmhreWIQB6T6_cE62SIedWRd47eWBOdRqCb602iGBQg9YJ14E-A8UHWBVIZhvEGP2SUMkoN9jwo3qmwsOtjr8QmS0CDwbxnHFm5OS_uPLfBfPmz53T_AwHOhYCQuMZyQlBF2MQ6v/s320/cecilia-cheung-11.jpg" width="320" /></a><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.<br />Ganti URL gambar dengan yang di inginkan.<br />Untuk width dan height silahkan sesuaikan selera.</div><br /><br />DEMO:<br /><br /> <style>    .pulloutimage{        position: relative;      }      .pulloutimage img{        position: absolute;        left: 0;      }      .pulloutimage img.ondemand{        opacity: 0;        visibility: hidden;      }      .pulloutimage img.original{        z-index: 1;      }      @-webkit-keyframes revealfromright{        0%{        z-index: -1;        opacity: 0;        }        50%{        opacity: 1;        z-index: -1;        left: 100%;        box-shadow: none;        }        51%{        z-index: 2;        }        100%{        left: 0;        box-shadow: 8px 8px 15px gray;        }      }      @-moz-keyframes revealfromright{        0%{        z-index:-1;        opacity:0;        }        50%{        opacity:1;        z-index:-1;        left:100%;        box-shadow: none;        }        51%{        z-index:2;        }        100%{        left:0;        box-shadow: 8px 8px 15px gray;        }      }      @-ms-keyframes revealfromright{        0%{        z-index:-1;        opacity:0;        }        50%{        opacity:1;        z-index:-1;        left:100%;        box-shadow: none;        }        51%{        z-index:2;        }        100%{        left:0;        box-shadow: 8px 8px 15px gray;        }      }      .pulloutimage:hover img.ondemand{        -webkit-animation-name:revealfromright;        -webkit-animation-duration: 1s;        -webkit-animation-iteration-count: 1;               -moz-animation-name:revealfromright;        -moz-animation-duration: 1s;        -moz-animation-iteration-count: 1;               -ms-animation-name:revealfromright;        -ms-animation-duration: 1s;        -ms-animation-iteration-count: 1;               animation-name:revealfromright;        animation-duration: 1s;        animation-iteration-count: 1;               visibility:visible;        opacity:1;        box-shadow: 8px 8px 15px gray;        z-index:2;      }      .pulloutimage:hover img.original{        opacity:0.5;      } </style> <div class="pulloutimage" style="height:250px"><a href="http://mas-andes.blogspot.com/" target="_blank"><img class="original" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2QyaSmhreWIQB6T6_cE62SIedWRd47eWBOdRqCb602iGBQg9YJ14E-A8UHWBVIZhvEGP2SUMkoN9jwo3qmwsOtjr8QmS0CDwbxnHFm5OS_uPLfBfPmz53T_AwHOhYCQuMZyQlBF2MQ6v/s320/cecilia-cheung-11.jpg" width="320" /></a><a href="http://mas-andes.blogspot.com/" target="_blank"><img class="ondemand" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQQ5tbq6W9ipPyX5y9-JfpIoXjhWlnJsB51bMM6q18bWJnMKlqW9nPLgCpv5jBjezqH3PcSj2l9ZGMDRQuq9vBz7UkfFY1G_9AK2J96DAnmQdJX3Z_0V_IchosfFwKRXOn4qd4iDMDg-t/s320/cecilia-cheung-12.jpg" width="320" /></a></div>

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi – bisa dikatakan kurang lebih agak mirip dengan ef…

Membuat Background dan Border Shadow Pada Sidebar Blog

Saturday, 20 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDV6d1-c89O2h6x04FHzJChpBJnuWltOIftxD2pSSyZSkR6mcntYU4qwy5UfZSKDQh_tiNBBC5VkzoDZV9SmpembPbzXf6ZSuP2e0pFJikwi61wrZVCA9-Q3HrzVJU6WtGU4g7ot5i2Y/s1600/sidebar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Background dan Border Shadow Sidebar Blog" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDV6d1-c89O2h6x04FHzJChpBJnuWltOIftxD2pSSyZSkR6mcntYU4qwy5UfZSKDQh_tiNBBC5VkzoDZV9SmpembPbzXf6ZSuP2e0pFJikwi61wrZVCA9-Q3HrzVJU6WtGU4g7ot5i2Y/s320/sidebar.jpg" title="Membuat Background dan Border Shadow Pada Sidebar Blog" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;"><b>Membuat Background dan Border Shadow Pada Sidebar Blog</b> – merupakan cara sederhana untuk membuat border pada sidebar blog.</div><a name='more'></a><div style="text-align: justify;">Kenapa saya posting mengenai cara Membuat Border Shadow Pada Sidebar Blog ini, karena pada tahap awal setiap template blog bawaan asli dari blogger/default blogger memang sudah tersedia sidebar, akan tetapi masih belum memiliki border maupun background. Dengan adanya hal ini maka untuk meminimalisir sahabat blogger yang mungkin ingin membuat border pada sidebar blog maka bisa dengan mudah menggunakan tutorial ini. Pada judul widget juga sudah sedikit saya modifikasi sehingga saat judul widget tersebut tersentuh mouse atau hover maka akan menampilkan teks efek 3D. Sedangkan untuk penerapannya kedalam blog, maka berikut adalah tutorial cara <b>Membuat Border Shadow Pada Sidebar Blog:</b></div><br/>1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuNwIQ_ikVUBjggAeEtmd25-HWYMLAPDyr1YVxBKMDVgF8QH1iF565qymG-zSwJoTtIThk-KF-Lc4H2KQr6ImX43KFtGFRMeVH6xvxYdbl7bkVwPt86P-lhfbiGiL7IN3Wue7Emv88p4/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Background dan Border Shadow Sidebar Blog" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuNwIQ_ikVUBjggAeEtmd25-HWYMLAPDyr1YVxBKMDVgF8QH1iF565qymG-zSwJoTtIThk-KF-Lc4H2KQr6ImX43KFtGFRMeVH6xvxYdbl7bkVwPt86P-lhfbiGiL7IN3Wue7Emv88p4/s320/Kolom-kode-CSS.jpg" title="Membuat Background dan Border Shadow Pada Sidebar Blog" width="320" /></a></div><blockquote class="tr_bq"><div style="text-align: justify;">.main-inner .sidebar .widget h2 {<br />margin-top: 0px;<br />margin-bottom: 1px;<br />margin-left-value: 0px;<br />margin-right-value: 0px;<br />padding: 3px 3px;<br />color: #<span style="color: blue;">00ff00 </span>!important;<br />text-align: center;<br />border: 1px solid #666666;<br />border-radius: 4px;<br />box-shadow: 1px 1px 6px 1px #7f7fff;<br />background: #<span style="color: red;">000000</span>;<br />font: bold 25px Helvetica, Arial, Sans-Serif;<br />text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000;<br />-webkit-transition: all 0.12s ease-out;<br />-moz-transition: all 0.12s ease-out;<br />-o-transition: all 0.12s ease-out;<br />}<br />.main-inner .sidebar .widget h2:hover {<br />text-shadow: 1px 1px #<span style="color: purple;">ff0000</span>, 2px 2px #<span style="color: purple;">ff0000</span>, 3px 3px #<span style="color: purple;">ff0000</span>, 4px 4px #<span style="color: purple;">ff0000</span>, 5px 5px #<span style="color: purple;">ff0000</span>, 6px 6px #<span style="color: purple;">ff0000</span>;<br />}<br />.main-inner .sidebar .widget-content {<br />margin: 0px;<br />padding: 2px 2px;<br />text-align: justify;<br />text-decoration: none;<br />border: 1px solid #<span style="color: lime;">674ea7</span>;<br />border-radius: 4px;<br />box-shadow: 1px 1px 6px 1px #<span style="color: lime;">7f7fff</span>;<br />background: #<span style="color: orange;">f2f2f2</span>;<br />}<br /><br />.main-inner .widget #ArchiveList {<br />margin: 0px;<br />}<br /><br />.main-inner .widget ul, <br />.main-inner .widget li,<br />.main-inner .widget ul li,<br />.main-inner .widget #ArchiveList ul.flat li {<br />margin: 0px;<br />padding: 2px;<br />list-style: none;<br />}</div></blockquote><div style="text-align: justify;">Keterangan:</div><ul style="text-align: justify;"><li>Untuk merubah warna background judul widget silahkan ganti tulisan berwarna <span style="color: red;">merah </span>dengan dengan warna lain yang di inginkan.</li><li>Untuk merubah warna font judul widget silahkan ganti tulisan berwarna <span style="color: blue;">biru </span>dengan warna lain yang di inginkan.</li><li>Untuk merubah warna font judul widget silahkan ganti tulisan berwarna <span style="color: purple;">ungu </span>dengan warna lain yang di inginkan. </li><li>Untuk merubah warna background konten widget silahkan ganti tulisan berwarna <span style="color: orange;">orange </span>dengan warna lain yang di inginkan.</li><li>Untuk merubah warna border dan efek menyala silahkan ganti tulisan berwarna <span style="color: lime;">hijau </span>dengan warna lain yang di inginkan.</li></ul><div style="text-align: justify;">3. Klik Terapkan ke Blog.</div>

Membuat Background dan Border Shadow Pada Sidebar Blog – merupakan cara sederhana untuk membuat bord…

Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog

Friday, 19 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDweph9k_h4eNLaEsOBE8PACwKQhuqXOAjsHfNA_WbqE8I9bbOZFviPN44egXGsTcxTuzXRwJVXRhs9wOYEI1JlJCU1wpuhPHmnsbx-RlQIi91SZa1KuaQmSc3r39wkxNZxfA5Gxmm-I/s1600/Efek-Teks-Shadow-3D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Teks Shadow 3D di Blog" border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDweph9k_h4eNLaEsOBE8PACwKQhuqXOAjsHfNA_WbqE8I9bbOZFviPN44egXGsTcxTuzXRwJVXRhs9wOYEI1JlJCU1wpuhPHmnsbx-RlQIi91SZa1KuaQmSc3r39wkxNZxfA5Gxmm-I/s320/Efek-Teks-Shadow-3D.png" title="Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog</b> – sebuah tips singkat dan simpel yang mungkin banyak dari sahabat <a href="http://mas-andes.blogspot.com/" target="_blank" title="Faceblog Evolutions">Faceblog Evolutions</a> yang sudah paham akan hal ini.<br /><a name='more'></a><div style="text-align: justify;">Untuk membuat sedikit efek yang tercipta pada sebuah konten posting blog maupun setiap aspek elemen blog yang tentunya memiliki tag h4 maka dengan tips ini saat sudah diterapkan kedalam blog akan mempunyai efek tersendiri, yakni tidak lain seperti yang sudah saya sebutkan pada judul diatas. Fitur dari Efek Teks Shadow 3D Pada Tag H4 di Blog ini adalah memiliki efek hover pada teks saat tesentuh mouse maka perubahan akan terlihat pada teks akan menjadi glowing 3D dan dapat dengan mudah dikolaborasikan dengan warna yang sesuai dengan template blog anda. Untuk lebih jelasnya, maka berikut adalah tutorial tentang cara <b>Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog</b>:</div><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/2013/04/demo-membuat-efek-teks-shadow-3d-pada.html" rel="nofollow" target="_blank"><button><b>LIVE DEMO</b></button></a></div>1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpAOX1RDLFmS07FmkZc3RaZqAo9oLRl4w7scT-rmISGAfyv41elMtQSPw4luzegULIa_Ju-AtMSTU4oQElfX1tMLyAHByFZbaTksru0JDwEJbOZ4iIwn72B1Bn0JdVuwCntiYjvZ-8zHU/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Teks Shadow 3D di Blog" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpAOX1RDLFmS07FmkZc3RaZqAo9oLRl4w7scT-rmISGAfyv41elMtQSPw4luzegULIa_Ju-AtMSTU4oQElfX1tMLyAHByFZbaTksru0JDwEJbOZ4iIwn72B1Bn0JdVuwCntiYjvZ-8zHU/s320/Kolom-kode-CSS.jpg" title="Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog" width="320" /></a></div><blockquote class="tr_bq">h4{ color: white; font: bold 24px Helvetica, Arial, Sans-Serif;<br />text-shadow: 1px 1px #<span style="color: blue;">7f7fff</span>, 2px 2px #<span style="color: blue;">7f7fff</span>, 3px 3px #<span style="color: blue;">7f7fff</span>;<br />-webkit-transition: all 0.12s ease-out;<br />-moz-transition: all 0.12s ease-out;<br />-o-transition: all 0.12s ease-out;<br />}<br />h4:hover {<br />text-shadow: 1px 1px #<span style="color: blue;">02a2fe</span>, 2px 2px #<span style="color: blue;">02a2fe</span>, 3px 3px #<span style="color: blue;">02a2fe</span>, 4px 4px #<span style="color: blue;">02a2fe</span>, 5px 5px #<span style="color: blue;">02a2fe</span>, 6px 6px #<span style="color: blue;">02a2fe</span>;<br />} </blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan warna yang di inginkan.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Efek Teks Shadow 3D Pada Tag H4 di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div style="text-align:center; border:2px solid #000; border-radius: 10px; padding:5px; box-shadow: 1px 1px 6px 1px #7f7fff;"><br /><h4><span style="color: red;">Faceblog Evolutions</span></h4><br /><h4 style="color:lime"><span style="color: red;">Admin: Andes Rizky Nugroho</span></h4><br /><h4 style="color:black; font:bold 50px verdana;"><span style="color: red;">Selamat Mencoba</span></h4><br /><marquee align="center" direction="left" onmouseout="this.start()" onmouseover="this.stop()"><br /><h4><a href="<span style="color: orange;">http://mas-andes.blogspot.com/</span>" target="_blank"><span style="color: red;">Don't forget to Come Back to My Blog</span></a></h4></marquee><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan teks yang di inginkan.<br />Silahkan ubah tulisan yang berwarna <span style="color: orange;">orange </span>dengan URL blog anda.</div>

Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog – sebuah tips singkat dan simpel yang mungkin banyak…

Membuat Gallery Gambar Efek Pop Up Image Dengan CSS

Thursday, 18 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnVp5RseIh6xaPjJayn6hV0-1BOZGtjhzPkbTF0S7j3tOoXO0x_fSStj4_ttOMWf46LmaqyYfgG_cqMQmsO-9tZfaDj6C32stQ5OZfuZiZR68NzKE0IzrBFp7vKhTN5l0I7lOB30AkEE/s1600/image-gallery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="gallery image" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnVp5RseIh6xaPjJayn6hV0-1BOZGtjhzPkbTF0S7j3tOoXO0x_fSStj4_ttOMWf46LmaqyYfgG_cqMQmsO-9tZfaDj6C32stQ5OZfuZiZR68NzKE0IzrBFp7vKhTN5l0I7lOB30AkEE/s320/image-gallery.jpg" title="Membuat Gallery Gambar Efek Pop Up Image Dengan CSS" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Gallery Gambar Efek Pop Up Image Dengan CSS</b> – setelah pada sebelumnya adalah membuat <a href="http://mas-andes.blogspot.com/2013/04/gallery-gambar-efek-smart-enlarger-with.html" target="_blank" title="Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS">Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS</a> maka sekarang tidak jauh berbeda dengan tutorial tersebut. Cuma yang sedikit jelas terlihat berbeda pada tutorial ini adalah pada link.  Jika setelah tips ini diterapkan kedalam blog maka yang terjadi adalah pada link juga akan menampilkan deskripsi berupa gambar yang sudah dimaksudkan untuk lebih memperjelas keterangan link tersebut. Membuat Gallery Gambar Efek Pop Up Image Dengan CSS ini adalah galeri foto berbasis murni CSS yang menampilkan versi gambar yang lebih besar dari gambar thumbnail dinamis ketika gambar tersorot oleh mouse. Sebuah keterangan berupa bahasa HTML juga dapat ditambahkan ke dalam gambar yang diperbesar, dan setiap aspek dari Image Gallery terdapat keterangan HTML pada halaman. Idenya adalah dengan menggunakan CSS, hover class semu menyebabkan elemen bereaksi onMouseOver. Ketika itu terjadi, maka elemen benar-benar diposisikan untuk memegang gambar yang diperbesar, berlabuh pada halaman dengan frame lain dengan posisi diatur untuk relatif, akan ditampilkan. Selanjutnya, itu mungkin untuk memodifikasi perilaku sehingga gambar diperbesar hanya ditampilkan onClick. Agar lebih jelasnya, berikut adalah tutorial tentang cara <b>Membuat Gallery Gambar Efek Pop Up Image Dengan CSS</b> kedalam posting blog:</div><br />1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTP605nDpiL9O5Ii7bleTSIeaEq3-mOXXPf6FRqG7Ln0nrgDgUsdUTdBMqf7NWjQRybT5m38mRaMc1z32iF-QC7zq-cokb9lAmRfL1rkvz0ki4MXJfQid5NWmdA_xFBt-96eorafsgGzw/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="gallery images" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTP605nDpiL9O5Ii7bleTSIeaEq3-mOXXPf6FRqG7Ln0nrgDgUsdUTdBMqf7NWjQRybT5m38mRaMc1z32iF-QC7zq-cokb9lAmRfL1rkvz0ki4MXJfQid5NWmdA_xFBt-96eorafsgGzw/s320/Kolom-kode-CSS.jpg" title="Membuat Gallery Gambar Efek Pop Up Image Dengan CSS" width="320" /></a></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">.gallerycontainer{<br />position: relative;<br />}<br /><br />.thumbnail img{<br />border: 1px solid white;<br />margin: 0 5px 5px 0;<br />}<br /><br />.thumbnail:hover{<br />background-color: transparent;<br />}<br /><br />.thumbnail:hover img{<br />border: 1px solid blue;<br />}<br /><br />.thumbnail span{ <br />position: absolute;<br />background-color: lightyellow;<br />padding: 5px;<br />left: -1000px;<br />border: 1px dashed gray;<br />visibility: hidden;<br />color: black;<br />text-decoration: none;<br />}<br /><br />.thumbnail span img{ <br />border-width: 0;<br />padding: 2px;<br />}<br /><br />.thumbnail:hover span{ <br />visibility: visible;<br />top: 0;<br />left: 230px; <br />z-index: 50;<br />}</blockquote>3. Klik Terapkan ke Blog.<br /><br /><div style="text-align: justify;">Selanjutnya apabila akan menampilkan Gallery Gambar Efek Pop Up Image Dengan CSS ini kedalam posting blog maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div class="gallerycontainer"><br /><br /><a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0FHubJ64VC_UIb8MTXkN6yLQVQLyfBXByOhVKKOAbersGRDCrtPcwQD49HLEVb5S1fJPK94p1WSgrfCcuu9kHdHAvo-I-Fx_YW579sz5VPwO1Ffv6fODSU9w04M25PmunwBOrJ_h2RA/w400-h300-no/Camilla+Belle-cute-06.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0FHubJ64VC_UIb8MTXkN6yLQVQLyfBXByOhVKKOAbersGRDCrtPcwQD49HLEVb5S1fJPK94p1WSgrfCcuu9kHdHAvo-I-Fx_YW579sz5VPwO1Ffv6fODSU9w04M25PmunwBOrJ_h2RA/w400-h300-no/Camilla+Belle-cute-06.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a><br /><br /><a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkIulZAx2N5G_X-LmcHMYhIdWXi_59P04cRt2ZD5Wva4l3k5KSRpIXVK8NtRWZLXjrZlkZgV-jc9E-j51GtLf0tnlPluK6oBASE-DMFeIeubWIDmYcJEt0k7hvAy2cVzICwxh1JpVDa8/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkIulZAx2N5G_X-LmcHMYhIdWXi_59P04cRt2ZD5Wva4l3k5KSRpIXVK8NtRWZLXjrZlkZgV-jc9E-j51GtLf0tnlPluK6oBASE-DMFeIeubWIDmYcJEt0k7hvAy2cVzICwxh1JpVDa8/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a><br /><br /><br /><br /><br /><a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPWoBkU2iYr2uVBNFnvQhxnzuiipQz0XpwIx7nif-l-InW1Y2Mv7PZCeFuDHNaM3pU1WbCZLxI3WsYBp4VFFZFwEa2RJPyNsW3VwuZbhx5DjUjbzbmET1ksBt0PW5RWxsUuEod0xzWbg/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPWoBkU2iYr2uVBNFnvQhxnzuiipQz0XpwIx7nif-l-InW1Y2Mv7PZCeFuDHNaM3pU1WbCZLxI3WsYBp4VFFZFwEa2RJPyNsW3VwuZbhx5DjUjbzbmET1ksBt0PW5RWxsUuEod0xzWbg/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a> <br /><br /><a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAx1GQgWNsXi8uOfR4q9fqV_LI9pZfrTZc_3xu1W0OErxH-Fyh21s078x4kH2_dUH0VfFcWQssPZ4m_fiaJrwH2K8pCP_spZYCuQK_TJqIhcPXThyHRUIT_JArxFCpXM7xuVVtm6rrfA/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAx1GQgWNsXi8uOfR4q9fqV_LI9pZfrTZc_3xu1W0OErxH-Fyh21s078x4kH2_dUH0VfFcWQssPZ4m_fiaJrwH2K8pCP_spZYCuQK_TJqIhcPXThyHRUIT_JArxFCpXM7xuVVtm6rrfA/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a><br /><br /><br /><br /><br /><a class="thumbnail" href="http://mas-andes.blogspot.com">Faceblog Evolutions<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIxrh44Rae9MwPrpbsBuMsWriP0V0GnInDziBoZJcjSAUPWzNz_3QgCUEwFg5-2z6TVClzJwo0ny0cMqrosJOzJkzoBCuS4vH8uD6yr2O0P3MyVi3tffHYilIoHqiGYok_I-34vs7HWE/w850-h533-no/faceblog-evolutions.jpg" width="500px" height="300px"/><br />Faceblog Evolutions</span></a><br /><br /></div></blockquote>Keterangan:<br />Ganti "http://mas-andes.blogspot.com"<span style="color: red;"> </span>dengan link tujuan yang di inginkan.<br />Ganti URL gambar dengan gambar lain yang di inginkan.<br /><br />DEMO:<br /><br /><style>.gallerycontainer{ position: relative; }  .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; }  .thumbnail:hover{ background-color: transparent; }  .thumbnail:hover img{ border: 1px solid blue; }  .thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }  .thumbnail span img{ border-width: 0; padding: 2px; }  .thumbnail:hover span{ visibility: visible; top: 0; left: 230px; z-index: 50; } </style> <div class="gallerycontainer"> <a class="thumbnail" href="http://mas-andes.blogspot.com/"><img alt="faceblog evolutions" height="66px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0FHubJ64VC_UIb8MTXkN6yLQVQLyfBXByOhVKKOAbersGRDCrtPcwQD49HLEVb5S1fJPK94p1WSgrfCcuu9kHdHAvo-I-Fx_YW579sz5VPwO1Ffv6fODSU9w04M25PmunwBOrJ_h2RA/w400-h300-no/Camilla+Belle-cute-06.jpg" width="100px"/><span><img alt="faceblog evolutions" height="300px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0FHubJ64VC_UIb8MTXkN6yLQVQLyfBXByOhVKKOAbersGRDCrtPcwQD49HLEVb5S1fJPK94p1WSgrfCcuu9kHdHAvo-I-Fx_YW579sz5VPwO1Ffv6fODSU9w04M25PmunwBOrJ_h2RA/w400-h300-no/Camilla+Belle-cute-06.jpg" width="500px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a> <a class="thumbnail" href="http://mas-andes.blogspot.com/"><img alt="faceblog evolutions" height="66px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkIulZAx2N5G_X-LmcHMYhIdWXi_59P04cRt2ZD5Wva4l3k5KSRpIXVK8NtRWZLXjrZlkZgV-jc9E-j51GtLf0tnlPluK6oBASE-DMFeIeubWIDmYcJEt0k7hvAy2cVzICwxh1JpVDa8/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="100px"/><span><img alt="faceblog evolutions" height="300px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkIulZAx2N5G_X-LmcHMYhIdWXi_59P04cRt2ZD5Wva4l3k5KSRpIXVK8NtRWZLXjrZlkZgV-jc9E-j51GtLf0tnlPluK6oBASE-DMFeIeubWIDmYcJEt0k7hvAy2cVzICwxh1JpVDa8/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="500px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a> <br /> <a class="thumbnail" href="http://mas-andes.blogspot.com/"><img alt="faceblog evolutions" height="66px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPWoBkU2iYr2uVBNFnvQhxnzuiipQz0XpwIx7nif-l-InW1Y2Mv7PZCeFuDHNaM3pU1WbCZLxI3WsYBp4VFFZFwEa2RJPyNsW3VwuZbhx5DjUjbzbmET1ksBt0PW5RWxsUuEod0xzWbg/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="100px"/><span><img alt="faceblog evolutions" height="300px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPWoBkU2iYr2uVBNFnvQhxnzuiipQz0XpwIx7nif-l-InW1Y2Mv7PZCeFuDHNaM3pU1WbCZLxI3WsYBp4VFFZFwEa2RJPyNsW3VwuZbhx5DjUjbzbmET1ksBt0PW5RWxsUuEod0xzWbg/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="500px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>   <a class="thumbnail" href="http://mas-andes.blogspot.com/"><img alt="faceblog evolutions" height="66px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAx1GQgWNsXi8uOfR4q9fqV_LI9pZfrTZc_3xu1W0OErxH-Fyh21s078x4kH2_dUH0VfFcWQssPZ4m_fiaJrwH2K8pCP_spZYCuQK_TJqIhcPXThyHRUIT_JArxFCpXM7xuVVtm6rrfA/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="100px"/><span><img alt="faceblog evolutions" height="300px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAx1GQgWNsXi8uOfR4q9fqV_LI9pZfrTZc_3xu1W0OErxH-Fyh21s078x4kH2_dUH0VfFcWQssPZ4m_fiaJrwH2K8pCP_spZYCuQK_TJqIhcPXThyHRUIT_JArxFCpXM7xuVVtm6rrfA/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="500px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a> <br /> <a class="thumbnail" href="http://mas-andes.blogspot.com">Faceblog Evolutions<span><img alt="faceblog evolutions" height="300px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIxrh44Rae9MwPrpbsBuMsWriP0V0GnInDziBoZJcjSAUPWzNz_3QgCUEwFg5-2z6TVClzJwo0ny0cMqrosJOzJkzoBCuS4vH8uD6yr2O0P3MyVi3tffHYilIoHqiGYok_I-34vs7HWE/w850-h533-no/faceblog-evolutions.jpg" width="500px"/><br />Faceblog Evolutions</span></a> </div>

Membuat Gallery Gambar Efek Pop Up Image Dengan CSS – setelah pada sebelumnya adalah membuat Gallery…

Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6CcGhrYIrDH3TBKgGCW7uR56dEFExJINCNaV7qBWg03S1F5ZWfysSS03_EsUaHDfWJ9T8PMbEEyKgQNbRqxAxstgJAy-KlZKUzofpWT3PvWkuJrstiAauBhRhXDmnbhk-gyJAbPdk9E/s1600/gallery-gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6CcGhrYIrDH3TBKgGCW7uR56dEFExJINCNaV7qBWg03S1F5ZWfysSS03_EsUaHDfWJ9T8PMbEEyKgQNbRqxAxstgJAy-KlZKUzofpWT3PvWkuJrstiAauBhRhXDmnbhk-gyJAbPdk9E/s320/gallery-gambar.jpg" title="Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS" width="320" /></a></div><div style="text-align: justify;"><b>Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog</b> – jika biasanya adalah membuat gambar hanya dengan single image, maka sekarang sedikit berbeda dengan biasanya. Kali ini adalah tidak hanya satu gambar saja, melainkan beberapa gambar yang ingin ditampilkan kedalam posting blog yang ingin dijadikan sebagai gallery gambar. Dengan menambahkan kode CSS yang berbasis sebagai pembesar gambar atau efek zoom yang dapat menampilkan thumbnail gambar yang mengubah ukuran dimensi aslinya ketika mouse berguling ke arah gambar. Kode CSS bekerja dengan cara yang meniadakan kebutuhan untuk untuk user secara manual yang biasanya harus menentukan dimensi setiap gambar jika akan diperbesar, hal ini menghemat banyak waktu. Sebuah deskripsi tekstual juga dapat ditampilkan di bawah gambar yang diperbesar. Dengan begitu maka keterangan gambar dapat secara langsung di tuliskan kedalam elemen HTML gambar dan dapat langsung tampil saat gambar tersentuh mouse. Berikut adalah tutorial untuk cara membuat <b>Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog</b> di posting blog:</div><br/>1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bI3XKHiYSEwEAlKtys6FrS3lRUNIO9bk7qSK529oOvHvoZnwQf9mjbbj8Co_7tHZcaiZX09GY0HI_Y6PeYAOJ4C2VqTrsU9M22zoxQuBFGk9b8DYOErbcFQbIf-9laKks4C2aqSAI2o/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bI3XKHiYSEwEAlKtys6FrS3lRUNIO9bk7qSK529oOvHvoZnwQf9mjbbj8Co_7tHZcaiZX09GY0HI_Y6PeYAOJ4C2VqTrsU9M22zoxQuBFGk9b8DYOErbcFQbIf-9laKks4C2aqSAI2o/s320/Kolom-kode-CSS.jpg" width="320" /></a></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">.ienlarger {<br />    float: left;<br />    clear: none; <br />    padding-bottom: 5px; <br />    padding-right: 5px; <br />}<br />.ienlarger a { <br />    display:block;<br />    text-decoration: none;<br />}<br />.ienlarger a:hover{ <br />     position:relative;<br />}<br />.ienlarger span img {<br />    border: 1px solid #FFFFFF; <br />    margin-bottom: 8px; <br />}<br />.ienlarger a span { <br />    position: absolute;<br />    display:none;<br />    color: #FFCC00; <br />    text-decoration: none;<br />    font-family: Arial, Helvetica, sans-serif;<br />    font-size: 13px; <br />    background-color: #000000;<br />    font-weight: bold;<br />    padding-top: 10px;<br />    padding-right: 10px;<br />    padding-bottom: 13px;<br />    padding-left: 10px;<br />}<br />.ienlarger img { <br />border-width: 0;<br />}<br />.ienlarger a:hover span { <br />    display:block;<br />    top: 50px; <br />    left: 90px; <br />    z-index: 100;<br />}<br />.resize_thumb {<br />    width: 150px; <br />    height : 120px;<br />} <br />.resize_large{<br />    width: 500px; <br />    height : 300px;<br />} </blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJs03WvCW-k5kvzZf3jXHE1tLEbaxW733DAQkGkOdZ-0gLDZ3qPcmRCDHmPEbg15z-a5YNTsCu44llsW9Lps9LqWA9AEKLElarU6vgth5dFgz4pxYbRKvZ7Roc-c_rWN7aq709qnuMqSA/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="thumb" class="resize_thumb" /><span><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJs03WvCW-k5kvzZf3jXHE1tLEbaxW733DAQkGkOdZ-0gLDZ3qPcmRCDHmPEbg15z-a5YNTsCu44llsW9Lps9LqWA9AEKLElarU6vgth5dFgz4pxYbRKvZ7Roc-c_rWN7aq709qnuMqSA/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="large" class="resize_large" /><br /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br /><br /><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oiN7Ku7tB9zcKOjn2Pyi-WvKSJ7gpK-TrKa0Hc_hyxpdofMRLvbpVZ1q8A3hIVOsdHmint0-XEfSzHAcUxnrlhXFkT-3LzWTJI7-MocoRqipYZ5PMnYPwsvjq7rBo_WE1ZHoQdZDlvg/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="thumb" class="resize_thumb" /><span><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oiN7Ku7tB9zcKOjn2Pyi-WvKSJ7gpK-TrKa0Hc_hyxpdofMRLvbpVZ1q8A3hIVOsdHmint0-XEfSzHAcUxnrlhXFkT-3LzWTJI7-MocoRqipYZ5PMnYPwsvjq7rBo_WE1ZHoQdZDlvg/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="large" class="resize_large" /><br /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br /><br /><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVighCzluFxsiDsdf32weT04xfDkP-rQLR8w0Hiw1jlD_ZZOOUfs0O0Ss9vn3PqBaHAU1az8omZWxsy3vCpIgs5BOEuTM-N1hfmRUwk-qucl7pxErfmFzbLCqky2QaQtcJykMuTBCBx0w/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="thumb" class="resize_thumb" /><span><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVighCzluFxsiDsdf32weT04xfDkP-rQLR8w0Hiw1jlD_ZZOOUfs0O0Ss9vn3PqBaHAU1az8omZWxsy3vCpIgs5BOEuTM-N1hfmRUwk-qucl7pxErfmFzbLCqky2QaQtcJykMuTBCBx0w/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="large" class="resize_large" /><br /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br /><br /><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jDK-DJ0JrecpG2LD_1bkbmrMQECtw-m-5vvsSAHQxywjTE20hzlKYvr_5oQw0jg17n8xQb1ehU8aRRdCJjwf7o9n856fF15NhXMvqHFQWsjbCcJs6YKMp8dCqY3lhjcq_bcvN_QpwfY/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="thumb" class="resize_thumb" /><span><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jDK-DJ0JrecpG2LD_1bkbmrMQECtw-m-5vvsSAHQxywjTE20hzlKYvr_5oQw0jg17n8xQb1ehU8aRRdCJjwf7o9n856fF15NhXMvqHFQWsjbCcJs6YKMp8dCqY3lhjcq_bcvN_QpwfY/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="large" class="resize_large" /><br /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br /><br /><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTVgqRm4Jt90Mjr5PWtAQbjUPdDlfQL2uJaQgutny-jpauNgLTKE1aiX2s1QaKMtclcnvgAZwxYb6LIEqQ4L7utH76uLMeyT_yOppDhOfAGlAqrNEsrFQxEckcsIScOd9tHPvfif_GZ4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="thumb" class="resize_thumb" /><span><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTVgqRm4Jt90Mjr5PWtAQbjUPdDlfQL2uJaQgutny-jpauNgLTKE1aiX2s1QaKMtclcnvgAZwxYb6LIEqQ4L7utH76uLMeyT_yOppDhOfAGlAqrNEsrFQxEckcsIScOd9tHPvfif_GZ4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="large" class="resize_large" /><br /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br /><br /><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_rAP6zRJV5tmafuQGx8s_dOO6aVXWcjxWf2mtN0rrwte4gOv1rZE4pywPgMobLS9yoTsdjH2s3VlSYVGJAHrm1AXjYv-RDfujsCwd8TeRmeoWntU_tp-FaRsa4sx2vtbhOSKIfPn5YI/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="thumb" class="resize_thumb" /><span><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_rAP6zRJV5tmafuQGx8s_dOO6aVXWcjxWf2mtN0rrwte4gOv1rZE4pywPgMobLS9yoTsdjH2s3VlSYVGJAHrm1AXjYv-RDfujsCwd8TeRmeoWntU_tp-FaRsa4sx2vtbhOSKIfPn5YI/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="large" class="resize_large" /><br /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br /><br style="clear:left" /></blockquote><div style="text-align: justify;">Keterangan:<br />Jika ingin menambah gambar lebih banyak lagi maka hanya perlu menambahkan kode dibawah ini:</div><blockquote class="tr_bq"><div class="ienlarger"><a href="URL TUJUAN"><img src="URL GAMBAR" alt="thumb" class="resize_thumb" /><span><br /><img src="URL GAMBAR" alt="large" class="resize_large" /><br /><br />TEKS DESKRIPSI GAMBAR</span></a></div></blockquote><div style="text-align: justify;">Sebelum atau diatas kode:</div><blockquote class="tr_bq"><br style="clear:left" /></blockquote><br/>DEMO:<br/><br/> <style>    .ienlarger {          float: left;          clear: none;          padding-bottom: 5px;          padding-right: 5px;      }      .ienlarger a {          display:block;          text-decoration: none;      }      .ienlarger a:hover{           position:relative;      }      .ienlarger span img {          border: 1px solid #FFFFFF;          margin-bottom: 8px;      }      .ienlarger a span {          position: absolute;          display:none;          color: #FFCC00;          text-decoration: none;          font-family: Arial, Helvetica, sans-serif;          font-size: 13px;          background-color: #000000;          font-weight: bold;          padding-top: 10px;          padding-right: 10px;          padding-bottom: 13px;          padding-left: 10px;      }      .ienlarger img {      border-width: 0;      }      .ienlarger a:hover span {          display:block;          top: 50px;          left: 90px;          z-index: 100;      }      .resize_thumb {          width: 150px;          height : 120px;      }      .resize_large{          width: 500px;          height : 300px;      }  </style><div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJs03WvCW-k5kvzZf3jXHE1tLEbaxW733DAQkGkOdZ-0gLDZ3qPcmRCDHmPEbg15z-a5YNTsCu44llsW9Lps9LqWA9AEKLElarU6vgth5dFgz4pxYbRKvZ7Roc-c_rWN7aq709qnuMqSA/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" /><span><img alt="large" class="resize_large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJs03WvCW-k5kvzZf3jXHE1tLEbaxW733DAQkGkOdZ-0gLDZ3qPcmRCDHmPEbg15z-a5YNTsCu44llsW9Lps9LqWA9AEKLElarU6vgth5dFgz4pxYbRKvZ7Roc-c_rWN7aq709qnuMqSA/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div> <div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oiN7Ku7tB9zcKOjn2Pyi-WvKSJ7gpK-TrKa0Hc_hyxpdofMRLvbpVZ1q8A3hIVOsdHmint0-XEfSzHAcUxnrlhXFkT-3LzWTJI7-MocoRqipYZ5PMnYPwsvjq7rBo_WE1ZHoQdZDlvg/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" /><span><img alt="large" class="resize_large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oiN7Ku7tB9zcKOjn2Pyi-WvKSJ7gpK-TrKa0Hc_hyxpdofMRLvbpVZ1q8A3hIVOsdHmint0-XEfSzHAcUxnrlhXFkT-3LzWTJI7-MocoRqipYZ5PMnYPwsvjq7rBo_WE1ZHoQdZDlvg/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div> <div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVighCzluFxsiDsdf32weT04xfDkP-rQLR8w0Hiw1jlD_ZZOOUfs0O0Ss9vn3PqBaHAU1az8omZWxsy3vCpIgs5BOEuTM-N1hfmRUwk-qucl7pxErfmFzbLCqky2QaQtcJykMuTBCBx0w/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" /><span><img alt="large" class="resize_large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVighCzluFxsiDsdf32weT04xfDkP-rQLR8w0Hiw1jlD_ZZOOUfs0O0Ss9vn3PqBaHAU1az8omZWxsy3vCpIgs5BOEuTM-N1hfmRUwk-qucl7pxErfmFzbLCqky2QaQtcJykMuTBCBx0w/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div> <div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jDK-DJ0JrecpG2LD_1bkbmrMQECtw-m-5vvsSAHQxywjTE20hzlKYvr_5oQw0jg17n8xQb1ehU8aRRdCJjwf7o9n856fF15NhXMvqHFQWsjbCcJs6YKMp8dCqY3lhjcq_bcvN_QpwfY/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" /><span><img alt="large" class="resize_large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jDK-DJ0JrecpG2LD_1bkbmrMQECtw-m-5vvsSAHQxywjTE20hzlKYvr_5oQw0jg17n8xQb1ehU8aRRdCJjwf7o9n856fF15NhXMvqHFQWsjbCcJs6YKMp8dCqY3lhjcq_bcvN_QpwfY/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div> <div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTVgqRm4Jt90Mjr5PWtAQbjUPdDlfQL2uJaQgutny-jpauNgLTKE1aiX2s1QaKMtclcnvgAZwxYb6LIEqQ4L7utH76uLMeyT_yOppDhOfAGlAqrNEsrFQxEckcsIScOd9tHPvfif_GZ4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" /><span><img alt="large" class="resize_large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTVgqRm4Jt90Mjr5PWtAQbjUPdDlfQL2uJaQgutny-jpauNgLTKE1aiX2s1QaKMtclcnvgAZwxYb6LIEqQ4L7utH76uLMeyT_yOppDhOfAGlAqrNEsrFQxEckcsIScOd9tHPvfif_GZ4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div> <div class="ienlarger"><a href="http://mas-andes.blogspot.com/"><img alt="thumb" class="resize_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_rAP6zRJV5tmafuQGx8s_dOO6aVXWcjxWf2mtN0rrwte4gOv1rZE4pywPgMobLS9yoTsdjH2s3VlSYVGJAHrm1AXjYv-RDfujsCwd8TeRmeoWntU_tp-FaRsa4sx2vtbhOSKIfPn5YI/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" /><span><img alt="large" class="resize_large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_rAP6zRJV5tmafuQGx8s_dOO6aVXWcjxWf2mtN0rrwte4gOv1rZE4pywPgMobLS9yoTsdjH2s3VlSYVGJAHrm1AXjYv-RDfujsCwd8TeRmeoWntU_tp-FaRsa4sx2vtbhOSKIfPn5YI/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" /><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a></div><br style="clear:left" />

Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog – jika biasanya adalah membuat gambar…

Membuat Profil Kartu Identitas Dengan CSS3

Tuesday, 16 April 2013

<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iCOpV6SPwm3P-5OtDcDBmAWnpCAfcM5OJIE6QuK_-gO7y70jtCb1irUCDHeotIwPUax8lgZZMkYvOo-fNRQoQ7b_FjP4aDNsnfNeT2uwgxBas5j-Wc0JT6z3lSUZAU4_ywP6z2m6cyU/s1600/id-card-css3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Profil Kartu Identitas Dengan CSS3" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iCOpV6SPwm3P-5OtDcDBmAWnpCAfcM5OJIE6QuK_-gO7y70jtCb1irUCDHeotIwPUax8lgZZMkYvOo-fNRQoQ7b_FjP4aDNsnfNeT2uwgxBas5j-Wc0JT6z3lSUZAU4_ywP6z2m6cyU/s320/id-card-css3.gif" title="Membuat Profil Kartu Identitas Dengan CSS3" width="320" /></a></div><b>Membuat Profil Kartu Identitas Dengan CSS3</b> – kalau di lihat-lihat pada sidebar blog kebanyakan blogger mencantumkan profil admin dari blog tersebut adalah informasi profil yang ada pada akun Google+ miliknya. Profil Kartu Identitas Dengan CSS3 ini akan bisa saja ditampilkan pada sidebar blog untuk menggantikan fungsi dari profil yang sudah ada pada sebelumnya, hanya dengan mengisi sedikit informasi tetang pemilik blog lalu menerapkannya kedalam widget blogger. Selain itu pula dapat pula ditampilkan kedalam posting blog, misalkan saja saat akan memposting tentang mengunggkapkan biography seseorang dan mencantumkan profil orang tersebut maka dengan Membuat Profil Kartu Identitas Dengan CSS3 ini bisa lebih beragam dan memiliki efek yang cantik saat mouse diarahkan kedalam bagian profil tersebut karena fitur dari efek Profil Kartu Identitas Dengan CSS3 ini menyediakan efek bergulir dan sedikit membuat gambar tampil agak membesar atau zoom. Maka dari itu, berikut adalah tutorial tentang cara <b>Membuat Profil Kartu Identitas Dengan CSS3</b> di blog:<br /><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/2013/04/demo-membuat-profil-kartu-identitas.html" target="_blank" class="button">Demo</a></div><br />1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63CWBD1Nhfrb8qObkwKB6Uu87NEe3djf7WXKU40VECwdEkkqjSU1lejEA_qCQJaSCDlQIj5lVtoor6yJPrItoWF7g-cHKNQU2PXmrFBMyZjEKdSIi8RuLYMwVgaz2aYnviX1ZqNiCfpM/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Profil Kartu Identitas Dengan CSS3" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63CWBD1Nhfrb8qObkwKB6Uu87NEe3djf7WXKU40VECwdEkkqjSU1lejEA_qCQJaSCDlQIj5lVtoor6yJPrItoWF7g-cHKNQU2PXmrFBMyZjEKdSIi8RuLYMwVgaz2aYnviX1ZqNiCfpM/s320/Kolom-kode-CSS.jpg" title="Membuat Profil Kartu Identitas Dengan CSS3" width="320" /></a></div><div style="text-align: left;"><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">ul#index_cards {<br />margin-top:50px;<br />text-align:center;<br />}<br />ul#index_cards li {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajspcrqf8KKFtPzamY-xaJJSQShYCYnLOw3UeJWqCRFpHr0FcsEyahtgOLX6orMRvogT1L0JqRe1pkE8pd8RLPb8t7jvTcg-PWpyKfWEKwCFfYFB12c1yEHgHasx70Pa7DM7f2i7M4unj/s150/bg.jpg) repeat;<br />height:450px;<br />width:160px;<br />display:block;<br />float:left;<br />border:1px solid #666;<br />padding:25px 10px;<br />position:relative;<br />-moz-border-radius: 10px;<br />-webkit-border-radius: 10px;<br />-moz-box-shadow: 2px 2px 10px #000;<br />-webkit-box-shadow: 2px 2px 10px #000;<br />-moz-transition: all 0.5s ease-in-out;<br />-webkit-transition: all 0.5s ease-in-out;<br />}<br />#card-1 {<br />-webkit-transform: rotate(-20deg);<br />-moz-transform: rotate(-20deg);<br />z-index:1;<br />left:150px;<br />top:40px;<br />}<br />#card-2 {<br />-webkit-transform: rotate(-10deg);<br />-moz-transform: rotate(-10deg);<br />z-index:2;<br />left:70px;<br />top:10px;<br />}<br />#card-3 {<br />background-color:#69732B;<br />z-index:3;<br />}<br />#card-4 {<br />-webkit-transform: rotate(10deg);<br />-moz-transform: rotate(10deg);<br />z-index:2;<br />right:70px;<br />top:10px;<br />}<br />#card-5 {<br />-webkit-transform: rotate(20deg);<br />-moz-transform: rotate(20deg);<br />z-index:1;<br />right:150px;<br />top:40px;<br />}<br />ul#index_cards li:hover {<br />z-index:4;<br />}<br />#card-1:hover {<br />-moz-transform: scale(1.1) rotate(-18deg);<br />-webkit-transform: scale(1.1) rotate(-18deg); <br />}<br />#card-2:hover {<br />-moz-transform: scale(1.1) rotate(-8deg);<br />-webkit-transform: scale(1.1) rotate(-8deg); <br />}<br /><br />#card-3:hover {<br />-moz-transform: scale(1.1) rotate(2deg);<br />-webkit-transform: scale(1.1) rotate(2deg); <br />}<br />#card-4:hover {<br />-moz-transform: scale(1.1) rotate(12deg);<br />-webkit-transform: scale(1.1) rotate(12deg); <br />}<br /><br />#card-5:hover {<br />-moz-transform: scale(1.1) rotate(22deg);<br />-webkit-transform: scale(1.1) rotate(22deg); <br />}<br />ul#index_cards li img {<br />margin-top:7px;<br />background:#eee;<br />-moz-border-radius: 5px;<br />-webkit-border-radius: 5px;<br />-moz-box-shadow: 0px 0px 5px #aaa;<br />-webkit-box-shadow: 0px 0px 5px #aaa;<br />}<br /><br />ul#index_cards li p {<br />margin-top:4px;<br />text-align:left;<br />line-height:28px;   <br />}</blockquote></div></div><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Profil Kartu Identitas Dengan CSS3 ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:<br /><div style="text-align: left;"><blockquote class="tr_bq"><ul id="index_cards"><br /><li id="card-2"><br /><h3>Profil</h3><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1YpfqfFS66hE2yOMEE1eOu2pQVsavPre9QIQorumiaXu1LRt7WFF5IhEE6d6huVG_s4l7UaY_kVbEFmCKZnPnzGxvAihlnKavqk3DjDnz2V4VA3pamKSKt6JN2hqtFLDy9010Qz4zzpV/w382-h533-no/Faceblog+Evolutions.jpg" height="130" width="130" alt="Faceblog Evolutions" /><br /><p>Nama: Kelly Lin<br /><br />Kelamin: Wanita<br /><br />Lahir: 29 Oktober 1975<br /><br />Pekerjaan: Aktris<br /><br />Zodiak: Scorpio<br /><br />Lin adalah seorang aktris dan model yang dibesarkan di santa Barbara, California</p><br /></li><br /><br /><li id="card-3"><br /><h3>Profil</h3><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwTLKUuK7gNqWG5c0NGMjA8jUIuS88fwG_Srt8pJuIAlUBrvYjlXYq-BoBJD5o66C3gMQLjsPc-2pWl-I3kAo1Ls1En1zg9J-XwylIgtiUBXp3eaKeG0ue2nx6VoJgNoG76zsY0xvCcx6/w294-h293-no/Mas+Andes+%252813%2529.JPG" height="130" width="130" alt="Faceblog Evolutions" /><br /><p>Nama: Andes Rizky Nugroho<br />Kelamin: Pria<br />Lahir: xx September xxxx<br />Pekerjaan: Blogging<br />Zodiak: Virgo<br />Mas Andes Rizky Nugroho adalah admin Faceblog Evolutions</p><br /></li><br /><br /><li id="card-4"><br /><h3>Profil</h3><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xD9Ll5L1skVWW5-QhDSzBHsEbzVL8QdK-xbjyrN5PciChsYzX4SxTUAOF22_7Xzsy_te1_fsw6vJ-BkQevx2ITwosifAmtGKvIvu7ln9V8HWMJ6AzKxk8Dg0l81z4cbLfsEGLx-RU9E/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" height="130" width="130" alt="Faceblog Evolutions" /><br /><p>Nama: Cecilia Cheung<br /><br />Kelamin: Wanita<br /><br />Lahir: 24 Juni 1980<br /><br />Pekerjaan: Aktris<br /><br />Zodiak: Gemini<br /><br />Cecilia Cheung adalah aktris dan juga penyanyi asal Hongkong</p><br /></li><br /></ul></blockquote></div></div>Setelah semuanya sudah sesuai bisa klik Publikasikan.

Membuat Profil Kartu Identitas Dengan CSS3 – kalau di lihat-lihat pada sidebar blog kebanyakan blogg…

Membuat Tab Vertikal Accordion Dengan CSS3 di Blog

Monday, 15 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_t9Qz0qNQNaQMigPY-QaJeHFYtWM977EwhPITR1l4CFqsmyPcdyiinpdUDoo-1CmbB9POcoVFuLi7MU7qa3MZpt6sv83kRUrxDNUkIyTe_R8IwaqKogAqshRtcqHWBbG3sPb4lP-q-4/s1600/vertikal-accordion.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_t9Qz0qNQNaQMigPY-QaJeHFYtWM977EwhPITR1l4CFqsmyPcdyiinpdUDoo-1CmbB9POcoVFuLi7MU7qa3MZpt6sv83kRUrxDNUkIyTe_R8IwaqKogAqshRtcqHWBbG3sPb4lP-q-4/s320/vertikal-accordion.gif" title="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Tab Vertikal Accordion Dengan CSS3 di Blog</b> – jika pada pembahasan yang sebelumnya sudah membahas tentang cara <a href="http://mas-andes.blogspot.com/2013/04/membuat-tab-horisontal-accordion-dengan.html" target="_blank" title="Membuat Tab Horisontal Accordion Dengan CSS3 di Blog">membuat tab horisontal accordion</a> maka kurang lengkap rasanya apabila kita tidak membahas mengenai tab vertikal accordion menggunakan kode CSS.</div><a name='more'></a><div style="text-align: justify;">Fitur dari tab vertikal accordion ini semuanya sama dengan yang ada pada tab horisontal accordion, hanya saja pada tab vertikal accordion ini berbentuk melebar kebawah saat hover. Tab vertikal accordion ini memiliki beragam fungsi, tergantung dari apa yang dikehendaki dan di inginkan tentunya yang sesuai dengan kebutuhan blog. Fitur yang sederhana dan ramping membuat tab vertikal accordion ini menjadi lebih terkesan minimalis namun apa daya jika setelah terpasang di blog malah menjadi tampilan dinamis. Untuk itu, maka berikut adalah tutorial langkah-langkah tentang cara <b>Membuat Tab Vertikal Accordion Dengan CSS3 di Blog</b>:</div><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/2013/04/demo-membuat-tab-vertikal-accordion.html" rel="nofollow" target="_blank"><button><b>LIHAT DEMO</b></button></a></div>1. Login ke akun blogger.<br />2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode CSS didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgmrVS-2IJZczKiQnS8yYCS8_aHvyDz8OhcHPdGfHrsbf8GinbQdNVJwFHyzv3jtJGSu489Ft8_jhDURWi6g67h_EsldHhVjZSwl3M9UV0X1QD6eK6mnE3mEDuwdhD6ZT_pchDCfaSUs/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgmrVS-2IJZczKiQnS8yYCS8_aHvyDz8OhcHPdGfHrsbf8GinbQdNVJwFHyzv3jtJGSu489Ft8_jhDURWi6g67h_EsldHhVjZSwl3M9UV0X1QD6eK6mnE3mEDuwdhD6ZT_pchDCfaSUs/s400/Kolom-kode-CSS.jpg" title="Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" width="400" /></a></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">.verticalaccordion>ul {<br />    margin: 0;<br />    padding: 0;<br />    list-style:none;<br />       width: 500px;<br />}<br /><br />.verticalaccordion>ul>li {<br />    display:block;<br />    overflow: hidden;<br />    margin: 0;<br />    padding: 0;<br />    list-style:none;<br />    height:40px;<br />    width: 500px;<br /><br />    /* Decorative CSS */<br />    background-color:#f0f0f0;<br /><br />    /* CSS3 Transition Effect */<br />    transition: height 0.3s ease-in-out;<br />    -moz-transition: height 0.3s ease-in-out;<br />    -webkit-transition: height 0.3s ease-in-out;<br />    -o-transition: height 0.3s ease-in-out;<br /><br />}<br /><br />.verticalaccordion>ul>li>h3 {<br />    display:block;<br />    margin: 0;<br />    padding:10px;<br />    height:19px;<br /><br />    /* Decorative CSS */<br />    border-top:#f0f0f0 1px solid;<br />    font-family: Arial, Helvetica, sans-serif;<br />    text-decoration:none;<br />    text-transform:uppercase;<br />    color: #000;<br />    background: #cccccc;<br /><br />    /* CSS3 Gradient Effect */<br />    background: -moz-linear-gradient( top, #999999, #cccccc);<br />    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br />    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */<br />    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   /* IE 8 */<br />}<br /><br />.verticalaccordion>ul>li>div {<br />    margin:0;<br />    overflow: auto;<br />    padding:10px;<br />    height:220px;<br />}<br /><br />.verticalaccordion>ul>li:hover {<br />    height: 280px;<br />}<br /><br />.verticalaccordion:hover>ul>li:hover>h3 {<br />    /* Decorative CSS */<br />    color:#fff;<br />    background: #000000;<br /><br />    /* CSS3 Gradient Effect */<br />    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br />    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br />    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */<br />    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */<br />}<br /><br />.verticalaccordion>ul>li>h3:hover {<br />    cursor:pointer;</blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Tab Vertikal Accordion Dengan CSS3 ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div class="verticalaccordion"><br /><ul><br />    <li><br />        <h3><span style="color: red;">Heading 1</span></h3><br />        <div> <span style="color: blue;">Kolom isi konten untuk Panel 1 </span></div><br />    </li><br />    <li><br />        <h3><span style="color: red;">Heading 2</span></h3><br />        <div> <span style="color: blue;">Kolom isi konten untuk Panel 2</span> </div><br />    </li><br />    <li><br />        <h3><span style="color: red;">Heading 3</span></h3><br />        <div> <span style="color: blue;">Kolom isi konten untuk Panel 3</span> </div><br />    </li><br />    <li><br />        <h3><span style="color: red;">Heading 4</span></h3><br />        <div> <span style="color: blue;">Kolom isi konten untuk Panel 4</span> </div><br />    </li><br /></ul><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br /><ul><li>Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan judul yang disukai.</li><li>Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan konten sesuai keinginan.</li><li>Apabila ingin ditampilkan sebagai widget maka langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/JavaScript kemudian paste kode yang ada diatas tersebut pada kolom yang tersedia.</li></ul></div>

Membuat Tab Vertikal Accordion Dengan CSS3 di Blog – jika pada pembahasan yang sebelumnya sudah memb…

Membuat Tab Horisontal Accordion Dengan CSS3 di Blog

Sunday, 14 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7CnsnGwL8DrvrdkyIrNAK4k6WD-AfDdUZLc_gZuoCAu320nAd3u-JKOt8kxo4sBSVZUxBkwyDJz4Vd37yagzZCWzv9PJJta97yQtZ09Z1aNCPsEYUI_OTCoduaWbiTbHiRfcNptGiy0/s1600/horisontal-accordion.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7CnsnGwL8DrvrdkyIrNAK4k6WD-AfDdUZLc_gZuoCAu320nAd3u-JKOt8kxo4sBSVZUxBkwyDJz4Vd37yagzZCWzv9PJJta97yQtZ09Z1aNCPsEYUI_OTCoduaWbiTbHiRfcNptGiy0/s320/horisontal-accordion.gif" title="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Tab Horisontal Accordion Dengan CSS3 di Blog</b> – sebuah fitur yang simple mudah didapatkan untuk membuat blog menjadi lebih variatif. Dengan menggunakan kode CSS tab horisontal accordion yang sederhana ini siap dipasang untuk digunakan kedalam blog bagi yang berminat.</div><a name='more'></a><div style="text-align: justify;">Layout dengan menampilkan warna silver sebagai warna utama dan warna hitam sebagai warna hover. Saat hover pula akan menampilkan panel yang muncul secara otomatis tanpa harus di klik dan konten akan terlihat secara halus nampak dari sebelah kiri akan menjadi melebar kesebelah kanan. Untuk melihat seperti apa previewnya, silahkan bisa dilihat pada halaman demo dengan klik tombol yang ada dibawah. Apabila setelah melihat halaman demo mungkin timbul minat untuk memasangnya kedalam blog, maka berikut adalah tutorial untuk cara <b>Membuat Tab Horisontal Accordion Dengan CSS3 di Blog</b>:</div><div style="text-align: center;"><a href="http://demofaceblog.blogspot.com/2013/04/demo-membuat-tab-horisontal-accordion.html" rel="nofollow" target="_blank"><button><b>LIHAT DEMO</b></button></a></div>1. Login ke akun blogger.<br />2. Copy kode dibawah ini, kemudian klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode di kolom CSS tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8sUBLQwn8Xm-ZCYa1cuc8-DJ7lgx-89X6e0lPSJFQH-RLO5LlIuxUWtJ0XF97CpCjvNl3YiZ-RFCAG3_X9w_jr6KGNWzLirdr-jVoQa0_wOAkOypShWKpvM4ts9O900a42ye_WW7tes/s1600/Kolom-kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8sUBLQwn8Xm-ZCYa1cuc8-DJ7lgx-89X6e0lPSJFQH-RLO5LlIuxUWtJ0XF97CpCjvNl3YiZ-RFCAG3_X9w_jr6KGNWzLirdr-jVoQa0_wOAkOypShWKpvM4ts9O900a42ye_WW7tes/s400/Kolom-kode-CSS.jpg" title="Membuat Tab Horisontal Accordion Dengan CSS3 Part 1" width="400" /></a></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">.horizontalaccordion>ul {<br />    margin: 0;<br />    padding: 0;<br />    list-style:none;<br />       height: 300px;<br />}<br /><br />.horizontalaccordion>ul>li {<br />    display:block;<br />    overflow: hidden;<br />    float:left;<br />    margin: 0;<br />    padding: 0;<br />    list-style:none;<br />    width:40px;<br />    height: 300px;<br /><br />    /* Decorative CSS */<br />    background:#f0f0f0;<br /><br />    /* CSS3 Transitions */<br />    transition: width 0.3s ease-in-out;<br />    -moz-transition: width 0.3s ease-in-out;<br />    -webkit-transition: width 0.3s ease-in-out;<br />    -o-transition: width 0.3s ease-in-out;<br />}<br /><br />.horizontalaccordion>ul>li>h3 {<br />    display:block;<br />    float:left;<br />    margin: 0;<br />    padding:10px;<br />    height:19px;<br />    width:280px;<br /><br />    /* Decorative CSS */<br />    border-left:#f0f0f0 1px solid;<br />    font-family: Arial, Helvetica, sans-serif;<br />    text-decoration:none;<br />    text-transform:uppercase;<br />    color: #000;<br />    background:#cccccc;<br /><br />    /* CSS3 Transform Rotate & Translate */<br />    white-space:nowrap;<br />    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */<br />    -moz-transform-origin: 0 100%;<br />    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */<br />    -o-transform-origin: 0 100%;<br />    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */<br />    -webkit-transform-origin: 0 100%;<br />    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */<br />    transform-origin: 0 100%;<br />    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);  /* IE6,IE7 */<br />    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */<br /><br />    /* CSS3 Gradient Effect */<br />    background: -moz-linear-gradient( top, #999999, #cccccc);<br />    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br />}<br /><br />.horizontalaccordion>ul>li>div {<br />    display:none;<br />    float:left;<br />    overflow: auto;<br />    position:relative;<br />    top:-40px;<br />    left:40px;<br />    *top:0px;       /* IE7 Hack */<br />    *left:0px;      /* IE7 Hack */<br />    margin:0;<br />    width:320px;<br />    height:280px;<br />    padding:10px;<br />}<br /><br />.horizontalaccordion>ul>li:hover {<br />    overflow: hidden;<br />    width: 380px;<br />}<br /><br />.horizontalaccordion:hover>ul>li:hover>h3 {<br />    /* Decorative CSS */<br />    color:#fff;<br />    background:#000000;<br /><br />    /* CSS3 Gradient Effect */<br />    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br />    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br />}<br /><br />.horizontalaccordion:hover>ul>li:hover>div {<br />    display:block;<br />}<br /><br />.horizontalaccordion>ul>li>h3:hover {<br />    cursor:pointer;<br />}</blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya apabila akan menampilkan Tab Horisontal Accordion Dengan CSS3 ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:</div><blockquote class="tr_bq"><div class="horizontalaccordion"><br /><ul><br />    <li><br />        <h3><span style="color: red;">Heading 1</span></h3><br />        <div><span style="color: blue;">Kolom isi konten untuk Panel 1</span></div><br />    </li><br />    <li><br />        <h3><span style="color: red;">Heading 2</span></h3><br />        <div><span style="color: blue;">Kolom isi konten untuk Panel 2</span></div><br />    </li><br />    <li><br />        <h3><span style="color: red;">Heading 3</span></h3><br />        <div><span style="color: blue;">Kolom isi konten untuk Panel 3</span></div><br />    </li><br />    <li><br />        <h3><span style="color: red;">Heading 4</span></h3><br />        <div><span style="color: blue;">Kolom isi konten untuk Panel 4</span></div><br />    </li><br /></ul><br /></div></blockquote><div style="text-align: justify;">Keterangan:</div><ul style="text-align: justify;"><li>Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan judul yang disukai.</li><li>Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan konten sesuai keinginan.</li><li>Apabila ingin ditampilkan sebagai widget maka langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/JavaScript kemudian paste kode yang ada diatas tersebut pada kolom yang tersedia.</li></ul>

Membuat Tab Horisontal Accordion Dengan CSS3 di Blog – sebuah fitur yang simple mudah didapatkan unt…

jQuery Headline Fitur Post Slider di Blog

Tuesday, 9 April 2013

<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-DCsbkq43J86Cmz8zHvAYcFyDBe_EGTozjP3-k45RXnJyx0RWgBLo3GAGx5jWXAXi6HlmcYnQAigHvHASEDwEoLK_ov-wMmZdUxdZCUtkZfBm09qcVeiq3GcEiJr6UmKdmrI3GSuZzk/s1600/headline-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Headline Fitur Post Slider di Blog" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-DCsbkq43J86Cmz8zHvAYcFyDBe_EGTozjP3-k45RXnJyx0RWgBLo3GAGx5jWXAXi6HlmcYnQAigHvHASEDwEoLK_ov-wMmZdUxdZCUtkZfBm09qcVeiq3GcEiJr6UmKdmrI3GSuZzk/s320/headline-slider.jpg" title="jQuery Headline Fitur Post Slider di Blog" width="320" /></a></div><b>jQuery Headline Fitur Post Slider di Blog</b> – merupakan sebuah slider yang terletak di atas elemen posting blog yang berguna untuk menampilkan gambar yang mewakili konten halaman posting. Headline Fitur Post Slider ini sebenarnya tidak harus di atas elemen posting, tetapi juga bisa dipasang pada sidebar blog dengan merubah lebar atau tinggi yang di inginkan sesuai dengan kebutuhan blog masing-masing. Hampir mirip dengan <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>, namun bedanya dengan jQuery Headline Fitur Post Slider di Blog ini adalah tidak menampilkan deskripsi konten posting dan hanya berupa gambar yang memanjang dan tidak memakan banyak ruang apabila dipasang kedalam blog. Ukurannya pun dapat dengan mudah disesuaikan, sehingga apabila ukuran yang sudah saya terapkan secara default pada kode css yang ada di kolom bawah dapat diganti dan diatur kembali sesuai dengan keinginan. Supaya dapat menerapkan kedalam blog, maka berikut adalah tutorial cara memasang <b>jQuery Headline Fitur Post Slider di Blog</b> untuk menampilkan headline diatas postingan secara otomatis:<br /><br /><div style="text-align: center;"><a href="http://demosliderblog.blogspot.com/" rel="nofollow" class="button" target="_blank">Demo</a></div>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">#slider{}#slider ul, #slider li{<br />margin:0;<br />padding:0;<br />list-style:none;<br />}<br />#slider li{<br />width:550px;<br />height:111px;<br />overflow:hidden;<br />}<br />#prevBtn, #nextBtn{<br />display:block;<br />width:30px;<br />height:77px;<br />position:absolute;<br />left:-30px;<br />top:15px;<br />}<br />#nextBtn{<br />left:550px;<br />}<br />#prevBtn a, #nextBtn a{<br />display:block;<br />width:30px;<br />height:77px;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7sLkb8WiJGS2EIp0iOiYUoum2xl3-R1AYGSa2dlF1RXIF_It9vEI4MAnWjtlcgxI9NKAlNhUm1hZP_azbaI7Nfn-Z_FsQKzoSeHpB8iWAV38RGfcw8ADg0HqIrR8GVyUxH3DCwhAWWs/s1600/btn_prev.gif) no-repeat 0 0;<br />}<br />#nextBtn a{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFA3mhQwzx6RbIRQlppRTxH1Ohkl1S_PRDSXITYJw4mx0orhdXJfx8ra66v8aPqeNZNTXnBfCkodN3me7ixKndMNi3VXdEp3JmVaWY4o6Cqk9ujxYS-Y2n2m_LCaJMhJ-tUyWbvDq_uog/s1600/btn_next.gif) no-repeat 0 0;<br />}</blockquote><div style="text-align: justify;">5. Selanjutnya cari kode <b></head></b> lalu taruh kode berikut ini tepat di atasnya.</div><blockquote class="tr_bq"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/><br /><script src='http://faceblog-evolutions.googlecode.com/files/easySlider1.7.js-blogger.js'/><br /><script><br />$(document).ready(function(){<br />$(&quot;#slider&quot;).easySlider({<br />auto: true,<br />continuous: true<br />});<br />});<br /></script></blockquote><div style="text-align: justify;">6.  Simpan Template.<br /><br />Sekarang tinggal untuk menampilkannya adalah dengan memasukkan kedalam HTML/Javascript . Caranya adalah dengan klik <b>Tata Letak > Tambah Widget > HTML/Javascript</b> kemudian copy kode berikut ini lalu paste kedalam kolom HTML/Javascript lalu <b>Save</b>.</div><blockquote class="tr_bq"><div id="slider"> <ul><br /><br /><li><a href="<span style="color: red;">URL Halaman Posting 1</span>"><img src="<span style="color: blue;">URL Gambar 1</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">URL Halaman Posting 2</span>"><img src="<span style="color: blue;">URL Gambar 2</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">URL Halaman Posting 3</span>"><img src="<span style="color: blue;">URL Gambar 3</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">URL Halaman Posting 4</span>"><img src="<span style="color: blue;">URL Gambar 4</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">URL Halaman Posting 5</span>"><img src="<span style="color: blue;">URL Gambar 5</span>" width="550px" height="111px" /></a></li><br /><br /></ul><br /></div></blockquote><div style="text-align: justify;"><b>Keterangan</b>:<br />Silahkan ganti tulisan berwarna <span style="color: red;">merah </span>dengan URL Halaman posting / link alamat konten.<br />Silahkan ganti tulisan berwarna <span style="color: blue;">biru </span>dengan URL Gambar yang akan ditampilkan pada slider.<br /><br />Sebagai contoh yang ada dihalaman demo kodenya seperti pada dibawah ini:</div><blockquote class="tr_bq"><div id="slider"> <ul><br /><br /><li><a href="<span style="color: red;">http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html</span>"><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8SaFo8gS0mJVjC3CQ9Sfnhd9e0jID7vocmXIzvdoqG20fp8SkGjtvN6pR2qOsMG9js0LM9WYiCYz-ANf3cDIPQOVm1CYsbWHlcocARdy7cGdfrEgVjmaNzKzBEprqQpXsN6fYjJwPqsk/s320/slider.gif</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">http://mas-andes.blogspot.com/2013/02/jquery-gambar-efek-lightbox-pada-blog.html</span>"><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoYCIK8lO-U_TZEV97hWkIaakHyF-6KE6EMJnzHCI58IlZUEPEtEHAPBkwIX4rXQE7zKZCZhdWJZ00rJQWoI9tkHjlJhDqV3CI0vT7nasoB2nuaFRNq3-urBcsnJGkV0jJzUHPcM_R-c/s320/elisha_cuthbert_face_wallpaper-2013-05.jpg</span>" width="550px" height="111px"/></a></li><br /><br /><li><a href="<span style="color: red;">http://mas-andes.blogspot.com/2013/02/jquery-image-efek-kubus-berputar.html</span>"><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4N0_uqnA_P1GnyxZ88B9W0aHUQe5j9bc1YZ0FYQuplNreWfOfLNuKSpTu8Oqkma6Pe8KdwHkG6-iUNwU8I-Gjc4lKjW2KtoqHMkjnFwNAMH-jINQJF1BXQDc2wCphCaw3YoN011zQKe4/s320/Untitled-1z.jpg</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">http://mas-andes.blogspot.com/2012/12/memasang-jquery-efek-zoom-bisa-gambar.html</span>"><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDvEhS9Us9ZfuFO11p5goJlHvhcdJ87vShGFz9IyoKtgFcnuSIXtQWikl0X4XmsxMBV6mCf-AaosagsJJUdTNEHbwCEOB0X40722NlkCOQZtdD8gzarxjLlO1C4W9odSfLkBSRdjNJV0/s1600/large-zoom-example.jpg</span>" width="550px" height="111px" /></a></li><br /><br /><li><a href="<span style="color: red;">http://mas-andes.blogspot.com/2013/04/efek-gambar-3d-flip-dengan-css.html</span>"><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoAD-URvXByPRDU-W6rnPGLfmVfjP_e_r1mZokbGyxKkUDv8jxMwfQUM7VGYD8VodN-RUYPY1waKYLOPFUwqva8vGlC1A4urBuniyS3X5MLmvPdNAKD3c1eatNW-0nSUfDB337ir29uqM/s320/3d-flip.jpg</span>" width="550px" height="111px" /></a></li><br /><br /></ul><br /></div></blockquote>

jQuery Headline Fitur Post Slider di Blog – merupakan sebuah slider yang terletak di atas elemen pos…

Membuat Blockquote Black Redble di Blog

Monday, 8 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwDr0UeaB0YP2dw56UWy5e7XzGRO1NmYGpwCyJHfG3x3bU8B-YZiuoD91gF-AZhYMBlSEoXnHsycObdu01bum94ATuoFWHS9A03dtbYPzn5xvaF8kamiURJYnhCDPkUuSAIt6R7JG5m4/s1600/blockquote.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Blockquote Black Redble di Blog" border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwDr0UeaB0YP2dw56UWy5e7XzGRO1NmYGpwCyJHfG3x3bU8B-YZiuoD91gF-AZhYMBlSEoXnHsycObdu01bum94ATuoFWHS9A03dtbYPzn5xvaF8kamiURJYnhCDPkUuSAIt6R7JG5m4/s320/blockquote.jpg" title="Membuat Blockquote Black Redble di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Blockquote Black Redble di Blog</b> – setiap blog pasti tentunya sudah tersedia fasilitas blockquote default blogger untuk membuat teks box atau bisa dikatakan sebagai kotak area untuk memisahkan teks agar terlihat berbeda tampilan apabila teks tersebut merupakan bagian isi konten yang penting.</div><a name='more'></a><div style="text-align: justify;">Selain itu fungsi dari blockquote juga berguna untuk meletakkan seperti kode script HTML, CSS, jQuery, dll terutama pada blog tutorial yang menyertakan teks berjenis script. Pada blog yang mengulas tentang artikel islami juga bisa menggunakan fungsi blockquote untuk meletakan sebagian konten semisal terdapat tulisan atau himbauan yang mengungkapkan inti dari konten tersebut, misalkan saja seperti kalimat dalil, huruf arab, dll. Dari bentuk Blockquote Black Redble ini sendiri juga sangat sederhana, tidak banyak menggunakan kode CSS untuk memasang kedalam template blog. Berikut adalah cara <b>Membuat Blockquote Black Redble di Blog</b> dengan tampilan sederhana dan minimalis:</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">blockquote { <br />margin: 1em 3em; <br />padding: .5em 1em; <br />color: white;<br />border-left: 7px solid #ff0000; <br />background-color: #000000; <br />box-shadow: 1px 1px 6px 1px #ff0000;<br />} <br />blockquote p { margin: 0; }</blockquote><div style="text-align: justify;">5. Simpan Template.<br /><br />Untuk memanggil kode tersebut kedalam postingan cukup hanya dengan cara block bagian teks yang ingin ditampilkan didalam blockquote, kemudian klik “<b>Quote</b>” yang terdapat pada panel atas kolom posting blog, selanjutnya untuk melihat hasilnya silahkan klik “<b>Pratinjau</b>”. Maka akan tampak hasil dari blockquote seperti dibawah ini:</div><blockquote style="background-color: black; border-left: 7px solid #ff0000; box-shadow: 1px 1px 6px 1px #ff0000; color: white; margin: 0; margin: 1em 3em; padding: .5em 1em;"><div style="text-align: justify;">Apabila warna background, border dan font dari blockquote ini kurang sesuai, silahkan bisa anda sesuaikan sendiri dengan mengubah pada bagian:</div><ul><li>color: white;</li><li>border-left: 7px solid #ff0000; </li><li>background-color: #000000; </li><li>box-shadow: 1px 1px 6px 1px #ff0000;</li></ul><b>Keterangan</b>:<br /><ul style="text-align: justify;"><li>White adalah warna font, silahkan sesuaikan.</li><li>7px dan #ff0000 adalah tebal dan warna border sebelah kiri blockquote, silahkan sesuaikan.</li><li>Untuk merubah warna merah pada luar kotak, silahkan ganti #ff0000 pada box-shadow dengan warna lain yang di inginkan.</li></ul></blockquote><div style="text-align: justify;">Sebagai Contoh:</div><blockquote style="background-color: black; border-left: 7px solid #ff0000; box-shadow: 1px 1px 6px 1px #3d85c6; color: lime; margin: 0; margin: 1em 3em; padding: .5em 1em;"><div style="text-align: justify;">Misalkan saja untuk merubah warna font menjadi hijau terang maka yang perlu diganti adalah “white” dirubah menjadi “lime” sedangkan pada box-shadow saya ubah warnanya menjadi #3d85c6, maka akan tampak hasil seperti pada blockquote ini. Untuk lebih lanjut silahkan bisa dicoba sendiri dengan merubah warna lain sesuai selera masing-masing.</div></blockquote><div style="text-align: justify;">Ini hanyalah tutorial sederhana untuk cara <b>Membuat Blockquote Black Redble di Blog</b>, apabila lebih menginkan hasil yang lebih maksimal selanjutnya anda bisa mengembangkan ataupun mencoba untuk membuat agar memperoleh hasil yang lebih bagus dan tentunya terlihat cantik.</div>

Membuat Blockquote Black Redble di Blog – setiap blog pasti tentunya sudah tersedia fasilitas blockq…

Efek Gambar 3D Flip Dengan CSS

Saturday, 6 April 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoAD-URvXByPRDU-W6rnPGLfmVfjP_e_r1mZokbGyxKkUDv8jxMwfQUM7VGYD8VodN-RUYPY1waKYLOPFUwqva8vGlC1A4urBuniyS3X5MLmvPdNAKD3c1eatNW-0nSUfDB337ir29uqM/s1600/3d-flip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Gambar 3D Flip Dengan CSS" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoAD-URvXByPRDU-W6rnPGLfmVfjP_e_r1mZokbGyxKkUDv8jxMwfQUM7VGYD8VodN-RUYPY1waKYLOPFUwqva8vGlC1A4urBuniyS3X5MLmvPdNAKD3c1eatNW-0nSUfDB337ir29uqM/s320/3d-flip.jpg" title="Efek Gambar 3D Flip Dengan CSS" width="320" /></a></div><div style="text-align: justify;"><b>Efek Gambar 3D Flip Dengan CSS</b> – sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa make up. Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek yang ditampilkan saat disentuh mouse atau yang biasa disebut onmouseover. Membuat efek hover pada gambar dipostingan blog sangat banyak dan bahkan beragam bentuk yang ditampilkan hanya dengan menggunakan tambahan kode CSS, dan salah satunya pada tutorial membuat Efek Gambar 3D Flip Dengan CSS ini. Salah satu fitur inovatif di CSS3 adalah kemampuan untuk memutar elemen HTML dalam ruang 3D. Kode CSS yang terdapat dibawah adalah menunjukkan bagaimana untuk memutar 2 sisi elemen, baik di X atau Y axis untuk mengungkapkan isi di sisi belakang gambar. Hanya dengan menyentuhkan mouse ke arah gambar maka melihat efek flip pada gambar akan terlihat dan ini tidak memerlukan banyak cara untuk proses menerapkannya. Supaya lebih mudah, maka berikut adalah tutorial untuk membuat <b>Efek Gambar 3D Flip Dengan CSS</b> di postingan blog:</div><br/>1. Login ke akun blogger.<br />2. Klik Template > Edit HTML.<br />3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br />4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b><br /><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">div.flip{<br />position:relative;<br />width: 300px;<br />height: 250px;<br />-webkit-perspective: 600px; <br />-moz-perspective: 600px;<br />-o-perspective: 600px;<br />perspective: 600px;<br />}<br />div.flip div.rotate{<br />width: 100%;<br />height: 100%;<br />-moz-transform-style: preserve-3d;<br />-webkit-transform-style: preserve-3d;<br />-o-transform-style: preserve-3d;<br />transform-style: preserve-3d;<br />-moz-transition: all 0.6s ease-in-out 0.3s;<br />-webkit-transition: all 0.6s ease-in-out 0.3s;<br />-o-transition: all 0.6s ease-in-out 0.3s;<br />transition: all 0.6s ease-in-out 0.3s;<br />}<br />div.flip div.rotate > *{ <br />position:absolute;<br />width: 100%;<br />height: 100%;<br />-moz-backface-visibility: hidden;<br />-webkit-backface-visibility: hidden;<br />-o-backface-visibility: hidden;<br />backface-visibility: hidden;<br />}<br />div.flip div.rotate > div{<br />-webkit-box-sizing: border-box; <br />-moz-box-sizing: border-box;<br />box-sizing: border-box;<br />padding: 8px;<br />background: #eee;<br />}<br />div.rotate.x *:nth-child(2){<br />-moz-transform: rotateX(180deg);<br />-webkit-transform: rotateX(180deg);<br />-o-transform: rotateX(180deg);<br />transform: rotateX(180deg);<br />}<br />div.flip:hover > div.rotate.x{<br />-moz-transform: rotateX(180deg);<br />-webkit-transform: rotateX(180deg);<br />-o-transform: rotateX(180deg);<br />transform: rotateX(180deg);<br />}<br />div.rotate.y *:nth-child(2){ <br />-moz-transform: rotateY(180deg);<br />-webkit-transform: rotateY(180deg);<br />-o-transform: rotateY(180deg);<br />transform: rotateY(180deg);<br />}<br />div.flip:hover > div.rotate.y{<br />-moz-transform: rotateY(180deg);<br />-webkit-transform: rotateY(180deg);<br />-o-transform: rotateY(180deg);<br />transform: rotateY(180deg);<br />}</blockquote><div style="text-align: justify;">5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting blog.</div><blockquote class="tr_bq"><div class="flip" style="width: 540px; height: 300px; display: inline-block;"><br /><div class="rotate x"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkBA1lylDZBqV3rRfEiKx3GeFC565mndYYaRStTz-9fwC915Sy0dDMoTK9fyBRhavATAYnzRkKheAcmLM0yjVyq8wdyaymDfxxDGrKFFnCCMd4Ug0MEVPouteCf3tiKA-vSI6n2WtSR-B/s320/mujeres-munecas-23132-13.jpg"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxYsTyFh4OPYGyS1pxNunV9lCgoJonxUD5j7FW7UGirTJQx6ZhOeD6nDJYSWyyw_EXA7-uLOHk5U2ZtFXKhqw5xXj2aeHWDAFSOzi_dasX_VW4bQw5MuHURYvXmM4gdE_3nMlxNIXSJoT/s320/mujeres-munecas-23132-23.jpg"><br /></div><br /></div><br /></br></br><br /><div class="flip" style="width: 540px; height: 300px; display: inline-block;"><br /><div class="rotate y"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0ZldH0BTGSo501lADeECn9BoX-yU2A5NoitjZv3RFCqkZvhHisOmAeP-GUsmmAK_BfOyqOhyphenhyphen3a499jHwedUsPSducqX8YR9pIJ3UGSr5qNEONWE5Oyx1dx2NxtP0E-vQ6qLNojiBjXxM/s320/mujeres-munecas-23132-19.jpg"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt6iz4eSbH7SD2Tk1Sy1gtZvXr8mTkhfOUmdbl9F7pey_jrfu8xooIJjJtXCS2d3BBrRojdHtcnObp-c4mVFR-qVogj1dhm6LrjWnN6Z2QBLPrml-EJNXpKbXDMIgEkQ3SLxYCtFk6LGIq/s320/mujeres-munecas-23132-12.jpg"><br /></div><br /></div></blockquote><div style="text-align: justify;">Keterangan: Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri.</div><br/><br/>DEMO:<br/><br/> <style>    div.flip{      position:relative;      width: 300px;      height: 250px;      -webkit-perspective: 600px;      -moz-perspective: 600px;      -o-perspective: 600px;      perspective: 600px;      }      div.flip div.rotate{      width: 100%;      height: 100%;      -moz-transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -o-transform-style: preserve-3d;      transform-style: preserve-3d;      -moz-transition: all 0.6s ease-in-out 0.3s;      -webkit-transition: all 0.6s ease-in-out 0.3s;      -o-transition: all 0.6s ease-in-out 0.3s;      transition: all 0.6s ease-in-out 0.3s;      }      div.flip div.rotate > *{      position:absolute;      width: 100%;      height: 100%;      -moz-backface-visibility: hidden;      -webkit-backface-visibility: hidden;      -o-backface-visibility: hidden;      backface-visibility: hidden;      }      div.flip div.rotate > div{      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;      padding: 8px;      background: #eee;      }      div.rotate.x *:nth-child(2){      -moz-transform: rotateX(180deg);      -webkit-transform: rotateX(180deg);      -o-transform: rotateX(180deg);      transform: rotateX(180deg);      }      div.flip:hover > div.rotate.x{      -moz-transform: rotateX(180deg);      -webkit-transform: rotateX(180deg);      -o-transform: rotateX(180deg);      transform: rotateX(180deg);      }      div.rotate.y *:nth-child(2){      -moz-transform: rotateY(180deg);      -webkit-transform: rotateY(180deg);      -o-transform: rotateY(180deg);      transform: rotateY(180deg);      }      div.flip:hover > div.rotate.y{      -moz-transform: rotateY(180deg);      -webkit-transform: rotateY(180deg);      -o-transform: rotateY(180deg);      transform: rotateY(180deg);      } </style>    <div class="flip" style="width: 540px; height: 300px; display: inline-block;">     <div class="rotate x">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkBA1lylDZBqV3rRfEiKx3GeFC565mndYYaRStTz-9fwC915Sy0dDMoTK9fyBRhavATAYnzRkKheAcmLM0yjVyq8wdyaymDfxxDGrKFFnCCMd4Ug0MEVPouteCf3tiKA-vSI6n2WtSR-B/s320/mujeres-munecas-23132-13.jpg">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxYsTyFh4OPYGyS1pxNunV9lCgoJonxUD5j7FW7UGirTJQx6ZhOeD6nDJYSWyyw_EXA7-uLOHk5U2ZtFXKhqw5xXj2aeHWDAFSOzi_dasX_VW4bQw5MuHURYvXmM4gdE_3nMlxNIXSJoT/s320/mujeres-munecas-23132-23.jpg">     </div>     </div>     </br></br>     <div class="flip" style="width: 540px; height: 300px; display: inline-block;">     <div class="rotate y">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0ZldH0BTGSo501lADeECn9BoX-yU2A5NoitjZv3RFCqkZvhHisOmAeP-GUsmmAK_BfOyqOhyphenhyphen3a499jHwedUsPSducqX8YR9pIJ3UGSr5qNEONWE5Oyx1dx2NxtP0E-vQ6qLNojiBjXxM/s320/mujeres-munecas-23132-19.jpg">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt6iz4eSbH7SD2Tk1Sy1gtZvXr8mTkhfOUmdbl9F7pey_jrfu8xooIJjJtXCS2d3BBrRojdHtcnObp-c4mVFR-qVogj1dhm6LrjWnN6Z2QBLPrml-EJNXpKbXDMIgEkQ3SLxYCtFk6LGIq/s320/mujeres-munecas-23132-12.jpg">     </div>     </div>

Efek Gambar 3D Flip Dengan CSS – sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa …