Membuat Menu Vertikal Floating Image di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIj8xT02MyphtuvaiVBlJ3Mc7f3ojkel6nq-IH6pmgXpckPqD54K1m2pnWveNERWJQgHtnFU2QIFeFGI3F-ANwWFKBfSbAeaxE3mSBxpg9z2iPCAqfKiHxz9EJ3LukKPUlMMhRIQj2hzc/s1600/menu-vertikal-floating-image.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Vertikal Floating Image di Blog" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIj8xT02MyphtuvaiVBlJ3Mc7f3ojkel6nq-IH6pmgXpckPqD54K1m2pnWveNERWJQgHtnFU2QIFeFGI3F-ANwWFKBfSbAeaxE3mSBxpg9z2iPCAqfKiHxz9EJ3LukKPUlMMhRIQj2hzc/s320/menu-vertikal-floating-image.gif" title="Membuat Menu Vertikal Floating Image di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Menu Vertikal Floating Image di Blog</b> – pada awalnya ngeblog mungkin hanya karena iseng-isengan saja, tapi apa boleh buat jika lama-kelamaan sudah terbiasa dan menjadi hoby keseharian.</div><a name='more'></a><div style="text-align: justify;">Menu blog memang sangat banyak dan bermacam ragam sehingga terkadang kita dibuat bingung untuk memilih mau menerapkan yang cocok pada template blog yang sudah kita pakai. Jika ingin menggunakan menu blog versi vertikal floating image mungkin ini adalah langkah yang sangat mudah untuk diterapkan kedalam blog. Menu vertikal ini cukup ramping, hanya berbentuk gambar kecil yang berjajar dari atas kebawah berupa gambar yang nantinya apabila tersentuh oleh mouse maka akan nampak animasi menu yang akan melebar kesamping kanan. Menu ini juga tidak satu warna tapi melainkan berwarna-warni. Untuk memasang menu vertikal ini kedalam blog maka berikut adalah tutorialnya tentang cara <b>Membuat Menu Vertikal Floating Image di Blog</b> dengan CSS:<br /><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO51EWTb8zczNLBJ0Ks0oMb8Jqh8Jl3GFUV0ab8YLLJSQYOwzw4eKS9vUZs8fkjLHbQMQOlyCoGrjGm5wHbBwxj0MdpZahTVoK6DyTSkBxIsQFFainkqjolCUFirwJqeZVbA2tYtlZ7kM/s1600/Script+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Vertikal Floating Image di Blog" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO51EWTb8zczNLBJ0Ks0oMb8Jqh8Jl3GFUV0ab8YLLJSQYOwzw4eKS9vUZs8fkjLHbQMQOlyCoGrjGm5wHbBwxj0MdpZahTVoK6DyTSkBxIsQFFainkqjolCUFirwJqeZVbA2tYtlZ7kM/s320/Script+CSS.jpg" title="Membuat Menu Vertikal Floating Image di Blog" width="320" /></a></div><blockquote class="tr_bq" style="height: 300px; overflow: auto; padding: 10px;">#hor {<br />list-style:none;<br />padding:0;<br />margin:0;<br />}<br /><br />#hor li {<br />float:left;<br />padding:5px;<br />}<br /><br />#hor a {<br />display:block;<br />height: 12px;<br />text-indent:-999em;<br />}<br /><br />#hor a.home {<br />width:46px;<br />background:url(vHome.gif) no-repeat 0 0;<br />}<br /><br />#hor a.download {<br />width:94px;<br />background:url(vDownload.gif) no-repeat 0 0;<br />}<br /><br />#hor a.contact {<br />width:74px;<br />background:url(vContact.gif) no-repeat 0 0;<br />}<br /><br />#ver {<br />list-style:none;<br />padding:0;<br />margin:0;<br />}<br /><br />#ver li {<br />padding:2px;<br />}<br /><br />#ver li a {<br />display:block;<br />height:12px;<br />text-indent:-999em;<br />}<br /><br />#ver a.home {<br />width:47px;<br />background:url(hHome.gif) no-repeat 0 0;<br />}<br /><br />#ver a.download {<br />width:95px;<br />background:url(hDownload.gif) no-repeat 0 0;<br />}<br /><br />#ver a.contact {<br />width:74px;<br />background:url(hContact.gif) no-repeat 0 0;<br />}<br /><br />.clear {<br />clear:both;<br />}<br /><br />*{<br />margin:0;<br />padding:0;<br />}<br /><br />#navigationMenu body{<br />font-size:14px;<br />color:#666;<br />background:#111 no-repeat;<br />background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);<br />background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));<br />font-family:Arial, Helvetica, sans-serif;<br />}<br /><br />#navigationMenu li{<br />list-style:none;<br />height:39px;<br />padding:2px;<br />width:40px;<br />}<br /><br />#navigationMenu span{<br />width:0;<br />left:38px;<br />padding:0;<br />position:absolute;<br />overflow:hidden;<br />font-family:'Myriad Pro',Arial, Helvetica, sans-serif;<br />font-size:18px;<br />font-weight:bold;<br />letter-spacing:0.6px;<br />white-space:nowrap;<br />line-height:39px;<br />-webkit-transition: 0.25s;<br />-moz-transition: 0.25s;<br />transition: 0.25s;<br />}<br /><br />#navigationMenu a{<br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHbvgptoJWYrEfalzbLI6DoT-asip07iUjNhbKI0sV0w_-dLm9LbfNw_TzqVRrW0XeR_X9U-OOWfNow5sxL6p0v5XPazRmwF_aWsgt3MNdexmMdpsQOcavCAtldHcrbCdsr-1CZuiKkQ/s1600/navigation.jpg') no-repeat;<br />height:39px;<br />width:38px;<br />display:block;<br />position:relative;<br />}<br /><br />#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }<br />#navigationMenu a:hover{<br />text-decoration:none;<br />-moz-box-shadow:0 0 5px #9ddff5;<br />-webkit-box-shadow:0 0 5px #9ddff5;<br />box-shadow:0 0 5px #9ddff5;<br />}<br /><br />#navigationMenu .home { background-position:0 0;}<br />#navigationMenu .home:hover { background-position:0 -39px;}<br />#navigationMenu .home span{<br />background-color:#7da315;<br />color:#3d4f0c;<br />text-shadow:1px 1px 0 #99bf31;<br />}<br /><br />#navigationMenu .about { background-position:-38px 0;}<br />#navigationMenu .about:hover { background-position:-38px -39px;}<br />#navigationMenu .about span{<br />background-color:#1e8bb4;<br />color:#223a44;<br />text-shadow:1px 1px 0 #44a8d0;<br />}<br /><br />#navigationMenu .services { background-position:-76px 0;}<br />#navigationMenu .services:hover { background-position:-76px -39px;}<br />#navigationMenu .services span{<br />background-color:#c86c1f;<br />color:#5a3517;<br />text-shadow:1px 1px 0 #d28344;<br />}<br /><br />#navigationMenu .portfolio { background-position:-114px 0;}<br />#navigationMenu .portfolio:hover{ background-position:-114px -39px;}<br />#navigationMenu .portfolio span{<br />background-color:#d0a525;<br />color:#604e18;<br />text-shadow:1px 1px 0 #d8b54b;<br />}<br /><br />#navigationMenu .contact { background-position:-152px 0;}<br />#navigationMenu .contact:hover { background-position:-152px -39px;}<br />#navigationMenu .contact span{<br />background-color:#af1e83;<br />color:#460f35;<br />text-shadow:1px 1px 0 #d244a6;<br />}</blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.<br /><br />4. Selanjutnya untuk memanggil dan menampilkan Menu Vertikal Floating Image di Blog caranya copy kode HTML dibawah ini, kemudian klik <b>Tata Letak >> Tambah Widget >> HTML/Javascript</b> lalu paste kode ini didalamnya:</div><blockquote class="tr_bq"><div style='position: fixed; top: 40%; left: 0%;'/><br /><ul id="navigationMenu"><br /><li><br /><a class="Home" href="#"><br /><span>Home</span><br /></a><br /></li><br /><br /><li><br /><a class="about" href="#"><br /><span>About</span><br /></a><br /></li><br /><br /><li><br /><a class="services" href="#"><br /><span>Services</span><br /></a><br /></li><br /><br /><li><br /><a class="portfolio" href="#"><br /><span>Portfolio</span><br /></a><br /></li><br /><br /><li><br /><a class="contact" href="#"><br /><span>Contact us</span><br /></a><br /></li><br /></ul><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tanda # dengan URL tujuan yang di inginkan.<br /><br />Langkah terakhir klik Save, maka selesai dan silahkan lihat hasilnya dari cara <b>Membuat Menu Vertikal Floating Image di Blog</b>.</div>

Membuat Menu Vertikal Floating Image di Blog – pada awalnya ngeblog mungkin hanya karena iseng-iseng…

Read More

Simple Gallery Photo di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUIFUOWvQUmhUrtciCL97ZZmOomxgaNreYbgnnw1WCCWJHvC3hxLFPEirAlUeHBOVhG_8UcIyluoLz4zU5u6IduyaCdHqlTplmpghvTniTorwlDMpEn2JpKxc7tO3TC2np59JD2gXXoQ/s1600/gallery-photo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Photo di Blog" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUIFUOWvQUmhUrtciCL97ZZmOomxgaNreYbgnnw1WCCWJHvC3hxLFPEirAlUeHBOVhG_8UcIyluoLz4zU5u6IduyaCdHqlTplmpghvTniTorwlDMpEn2JpKxc7tO3TC2np59JD2gXXoQ/s320/gallery-photo.jpg" title="Simple Gallery Photo di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Simple Gallery Photo di Blog</b> - banyak dari blogger apabila membuat efek pada blog mereka takut kalau blognya berpengaruh pada loading blog yang berubah menjadi lambat. Pertanyaan tersebut seringkali muncul atau bisa di jumpai pada konten posting yang khususnya mengupas tutorial blog entah itu pada jenis CSS maupun jQuery dan lain sebagainya.</div><a name='more'></a><div style="text-align: justify;">Namun apa jadinya saat akan memposting konten namun pada konten tersebut membutuhkan photo dan berjumlah banyak, apabila hanya photo tersusun secara vertikal pasti tentunya akan memakan banyak ruang konten dan terlalu panjang kebawah untuk memasukkan photo-photo tersebut. Maka dari itu untuk meminimalisirkan ruang posting dan untuk membuat konten walaupun banyak photo namun hasilnya agar tetap terlihat sejajar dan rapi maka perlu untuk mengatur photo tersebut supaya tidak terlihat berantakan saat terposting di blog. Berikut adalah tutorial membuat <b>Simple Gallery Photo di Blog</b> secara mudah dan singkat:<br /><br />1. Login ke akun blogger.<br />2. Lalu klik Entri Baru, kemudian copy kode berikut ini lalu paste di kolom posting mode HTML.</div><blockquote class="tr_bq"><style type="text/css"><br />.gallery {<br />margin: auto;<br />}<br />.gallery-item {<br />float: left;<br />margin-top: 0px;<br />text-align: center;<br />width: 50%; }<br />.gallery img {<br />border: 2px solid #cfcfcf;<br />}<br />.gallery-caption {<br />margin-left: 0;<br />}<br /></style><br /><br /><br /><div class="gallery snap_nopreview"><br /><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="<span style="color: red;">URL GAMBAR</span>" width="230" /><br /></dt><br /></dl><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="<span style="color: red;">URL GAMBAR</span>" width="230" /><br /></dt><br /></dl><br /><br /><br style="clear: both;" /><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="<span style="color: red;">URL GAMBAR</span>" width="230" /><br /></dt><br /></dl><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="<span style="color: red;">URL GAMBAR</span>" width="230" /><br /></dt><br /></dl> <br /><span style="color: blue;"></div></span></blockquote><div style="text-align: justify;"><b>Keterangan</b>:<br /><ul><li>Ganti tulisan warna <span style="color: red;">merah </span>dengan URL Gambar yang di inginkan.</li><li>Height dan Width silahkan sesuaikan dengan yang di inginkan.</li><li>Jika ingin menambah gambar lebih banyak lagi, copy kode berikut ini kemudian taruh sebelum kode <span style="color: blue;"></div></span></li></ul></div><blockquote class="tr_bq"><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" /><br /></dt><br /></dl><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" /><br /></dt><br /></dl><br /><br /><br style="clear: both;" /><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" /><br /></dt><br /></dl><br /><dl class="gallery-item"><br /><dt class="gallery-icon"><br /><img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" /><br /></dt><br /></dl></blockquote><div style="text-align: justify;"></div>

Simple Gallery Photo di Blog - banyak dari blogger apabila membuat efek pada blog mereka takut kalau…

Read More

Membuat Menu Drop Down Purple Style di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSTgh5q-se4lQpVRldoDq1Hw28hneZF4Rp_jD-cptf50y1QgdUYrwW0hImbk3jnXw5FVxjnadBcdZHNEQ8yyZkBuHJfCGvjjGAsdJe5w9oWItmGKtxESJ-OuN8FjZHNNuE9DcewFf0DFA/s1600/menu-drop-down-purple-style.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Drop Down Purple Style di Blog" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSTgh5q-se4lQpVRldoDq1Hw28hneZF4Rp_jD-cptf50y1QgdUYrwW0hImbk3jnXw5FVxjnadBcdZHNEQ8yyZkBuHJfCGvjjGAsdJe5w9oWItmGKtxESJ-OuN8FjZHNNuE9DcewFf0DFA/s320/menu-drop-down-purple-style.gif" title="Membuat Menu Drop Down Purple Style di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Menu Drop Down Purple Style di Blog</b> – masih sama seperti pada tutorial yang sebelumnya, namun yang berbeda hanyalah tampilan warna tema pada menu dan sub menunya atau sering disebut drop down. Jika pada menu yang sebelumnya berwarna coklat caramel maka pada <a href="http://mas-andes.blogspot.com/2013/05/membuat-menu-drop-down-purple-style-di.html" target="_blank">menu drop down purple style</a> ini berwarna ungu. Akan sangat manis tentunya terlihat apabila jika diterapkan pada template blog yang juga menggunakan warna latar ungu. Maka kombinasi color yang sangat serasi dengan tema warna menu drop down ini lebih terlihat menyala. Blog tidak hanya sekedar memiliki menu, namun juga akan memiliki tampilan minimalis yang lebih membuat visitor mungkin akan klik menu-menu yang sudah anda tampilkan pada menu drop down tersebut. Sangat menarik bukan jika visitor blog anda juga merasa senang dengan keadaan yang nyaman, tentu hal tersebut akan membuat visitor untuk lebih tinggal berlama-lama di blog kesayangan anda tersebut. Bagaimana untuk membuat menu drop down ini supaya dapat terpasang di blog anda tersebut? Maka berikut adalah tutorial cara <b>Membuat Menu Drop Down Purple Style di Blog</b> dengan menggunakan kode CSS:<br /><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFB6sarIALL87LL-7D8hkraDkAMPC1aeYyGDpp-VDb5GAAVb6V2_EKBrMCmXUxzEtti3RaAIlGaR7MuAMsh_YJZpQJbBXxWjC_eYfcVpby8N3TyRFAuppQtaukLzVpnjxc_TAWIBU5-SI/s1600/Script+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Drop Down Purple Style di Blog" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFB6sarIALL87LL-7D8hkraDkAMPC1aeYyGDpp-VDb5GAAVb6V2_EKBrMCmXUxzEtti3RaAIlGaR7MuAMsh_YJZpQJbBXxWjC_eYfcVpby8N3TyRFAuppQtaukLzVpnjxc_TAWIBU5-SI/s320/Script+CSS.jpg" title="Membuat Menu Drop Down Purple Style di Blog" width="320" /></a></div><blockquote class="tr_bq" style="height: 350px; overflow: auto; padding: 10px;">.menu {<br />    font-family: "Verdana", Arial, san-serif;<br />    width:auto;<br />    height:42px;<br />    position:relative;<br />    font-size:11px;<br />    margin: 0;<br />}<br />.menu ul li a {<br />    display:block;<br />    text-decoration:none;<br />    color:#fff;<br />    font-weight:bold;<br />    width:81px; <br />    height:42px; <br />    text-align:center;<br />    border-bottom: 0;<br />    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir2dzP8R6caqI0gkAP1C6gkyGpm1tUo-0lqQKCJgOYnZ2O3RFTO4ExVWzqe-f_k7mpO1Jy0Zi-_kDELkmVKiXj9xicimDerPVA03xdX1DQTEdv3x1mhrBh9DGSAL7LhuBsLdeR7VtLG5AM/s82/center.png');<br />    line-height:48px; <br />    font-size:11px; <br />    overflow:hidden;<br />    padding-left: 1px;<br />}<br />.menu .left_nosub {<br />    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUaa7ayYkTFkgdoVzXQGjc1CE1y-W3h0RuBimYXYpQszdpp63CtdbJIqC_i6jGLe7LvRLHFNaW6fSDxhhuhKUWOpdNRVzhliXCGd4DR5HmYJmYD9wBdaNJQUiOZsnWQ1vjCNFroSH5JfKZ/s82/left.png');<br />    padding-left: 1px;<br />    margin-right: -1px;<br />}<br />.menu .right_hassub {<br />    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdtUrJZqYV08YyiaPR9v39zsvyvICdAAv6UPrzrPuiRVsEjNx5mfO-iX1wXL_K-mqpexPN6QqJ1IAkvhJaYNVb7uFpabMtMr_dh1bxWhhECLndtsDRC-z_T5c3kAjD9YRfhdhp3YLWXA7/s82/right.png');<br />}<br />.menu .right_nosub {<br />    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdtUrJZqYV08YyiaPR9v39zsvyvICdAAv6UPrzrPuiRVsEjNx5mfO-iX1wXL_K-mqpexPN6QqJ1IAkvhJaYNVb7uFpabMtMr_dh1bxWhhECLndtsDRC-z_T5c3kAjD9YRfhdhp3YLWXA7/s82/right.png');<br />}<br />.menu ul {padding:0; margin:0; list-style: none;}<br />.menu ul li {float:left; position:relative;}<br />.menu ul li ul {display: none;}<br />.menu ul li:hover a {<br />color:#200033; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1picZCQSTuStVN1B9M-J4pHNXeXNuBdL5CZW0bie1zJjeGy-iIVPLIcmk-3b3btTodC9fdPWtz67oW15oOUq8f4sMpZHRb6I-GCLcMFuZ7jSXi_bobX_9Ri5fzk0FfwoAufsKsjvLtMm/s82/center_hassub.png');<br />}<br />.menu ul li:hover ul {<br />display:block; <br />position:absolute; <br />top:42px; left:0; <br />width:152px; <br />margin: 0; <br />padding: 0;<br />}<br />.menu ul li:hover ul li a.center_hassub {<br />background:#6a3; <br />color:#fff;<br />}<br />.menu ul li:hover ul li:hover a.center_hassub {<br />background:#6fc; <br />color:#544a3a;<br />}<br />.menu ul li:hover ul li ul {display: none;}<br />.menu ul li:hover .left_nosub {<br />color:#200033; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKodbdNW1NYwxR5Pu3PlLonbKgo3WgV-yeraqrv6hac_3Km0y4bqgzIn6SXAq0Gt8HIuX5aiXY6V3VHduwaDahyphenhyphennpzQ1zUBRSaFgIiGDiivachnrgbmMa9yi_tCnIOwpnbIHox9XS_mIxE/s82/left_nosub.png');<br />}<br />.menu ul li:hover .right_hassub {<br />color:#200033; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vHjPsxKs7tY-cCqCpSGYYOoKuo4UZB4TgsED4Mo2MTDAYiwHiRHTpmaLNi6LlNCwUysGE0gg6fVqzpbSxg3VEX4sQ61HU0CzU2MhedP-6rkRIOaZN9SJV6F62WgOCRbEb3Px7rsBZp6C/s82/right_hassub.png');<br />}<br />.menu ul li:hover .right_nosub {<br />color:#200033; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1ivl_fd2NuSBhEk0WbK2e1PiHRtqGdHijsD71hbbBQh5x9V9lpH1A35zQMY-q3ctm1EgIk3yFCkor3x-z45djq5hRHYE5Ec2boBBbYoR6AekCN16495CcxHt6fLDJ_aPxy66nsUO7gOV/s82/right_nosub.png');<br />}<br />.menu ul li:hover ul li a {<br />background-image: none; <br />display:block;height: 28px; <br />line-height: 26px; <br />color:#200033; <br />width:142px; <br />text-align:left; <br />margin: 0; <br />padding:0 0 0 11px;<br />font-weight:normal;<br />}<br />.menu ul li:hover ul {<br />    margin: 0 0 0 3px;<br />    padding: 0;<br />    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOo7do1UDor3pnp61U4FLGZfwio68Zz3iESzK_IHc1l-Jx4TLK4QQ1mCAuCEWl0jsBUyBBYquRXifYSI7NdNYc4C69oMrhIpbL7p0hO1pMXN5Tkg6qP_ZcLuSqh2a-Bv2oAPRywZoXjj1C/s202/dropdown.png');<br />    background-repeat:no-repeat;<br />    background-position:bottom left; <br />}<br />.menu ul li:hover ul .sub_active {<br />    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiuZb0-s5vhnLaRgNYoE41HFDfWuajAhfZt_bAPKqhXluo7K12hYgOPqP2l-h9ozkH95Jwr1Qr-5CAPTV02pIIOG9nIUXnSdJ8wfzXnmIcFqzFy3Li1lyXZvxxbL0Ub1kIHlfBQwPUedAQ/s152/sub_active.png');<br />    margin-right: 1px;<br />}<br />.menu ul li:hover ul li a:hover {<br />color:#fff; <br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXYBy4vuVcx3VjVk5JyO6xMUEU6zrB-rMYZkgeJjRHAUY1OgnVtbIxMgfweDJgrxb9ITREN9aUWFNBhIcf9UzAtGSmqn0vSLBQmRkbFRY_TCxyBZVSjZ-Z_KFv1ygoyBFUOELdyCGJvnX/s152/sub_hover.png');<br />}<br />.menu ul li:hover ul li:hover ul {<br />display:block; <br />position:absolute; <br />left:105px; top:0;<br />}<br />.menu ul li:hover ul li:hover ul.left {left:-105px;}</blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br /><b>Perlu diperhatikan:</b> Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik <b>Template >> Edit HTML</b> lalu cari kode <b>]]></b:skin></b> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.<br /><br />4. Selanjutnya untuk memanggil dan menampilkan Menu Drop Down Purple Style di Blog caranya copy kode HTML dibawah ini, kemudian klik <b>Tata Letak >> Tambah Widget >> HTML/Javascript</b> lalu paste kode ini didalamnya:</div><blockquote class="tr_bq"><div class="menu"><br /><ul><br /><li><a class="left_nosub" href="#">Home</a></li><br /><li><a class="center_hassub" href="#">Tutorial</a><br />    <ul><br />    <li><a href="#">CSS</a></li><br />    <li><a href="#">PHP</a></li><br />    <li><a href="#">HTML</a></li><br />    <li><a href="#">Javascript</a></li><br />    </ul><br /></li><br /><li><a class="center_hassub" href="#">Designs</a><br />    <ul><br />    <li><a href="#">Website Designs</a></li><br />    <li><a href="#">Logo Designs</a></li><br />    <li><a href="#">Banner Designs</a></li><br />    <li><a href="#">Print Designs</a></li><br />    <li class="sub_active"><a href="#" style="color: rgb(255, 255, 255);">Request Custom Design</a></li><br />    </ul><br /></li><br /><li><a class="center_hassub" href="#">Download</a><br />    <ul><br />    <li><a href="#">Ebook</a></li><br />    <li><a href="#">Software</a></li><br />    <li><a href="#">Film</a></li><br />    </ul><br /></li><br /><li><a class="center_hassub" href="#">Tips Trik</a><br />    <ul><br />    <li><a href="#">Blogger</a></li><br />    <li><a href="#">Wordpress</a></li><br />    <li><a href="#">SEO</a></li><br />    <li><a href="#">Computer</a></li><br />    </ul><br />    </li><br /><li><a class="right_nosub" href="#">Contact</a></li><br /></ul><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tanda # dengan URL tujuan yang di inginkan.<br /><br />Langkah terakhir klik Save, maka selesai dan silahkan lihat hasilnya dari cara <b>Membuat Menu Drop Down Purple Style di Blog</b>.</div>

Membuat Menu Drop Down Purple Style di Blog – masih sama seperti pada tutorial yang sebelumnya, namu…

Read More

Membuat Menu Drop Down Brown Style di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgearQLd6-Ycl6AU7HDBxqTvKcn-Q9tELhnLrIW0sNWB-4eNVqaU0SEttWDE_C75NiTvdgWeQThv7AqShAWdIzErQLpnXaY6j-8-7iSdF2wpETye1YcLoImR5xp70NSEVfUD6UvoNb7JZI/s1600/menu-drop-down-brown-style.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Drop Down Brown Style di Blog" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgearQLd6-Ycl6AU7HDBxqTvKcn-Q9tELhnLrIW0sNWB-4eNVqaU0SEttWDE_C75NiTvdgWeQThv7AqShAWdIzErQLpnXaY6j-8-7iSdF2wpETye1YcLoImR5xp70NSEVfUD6UvoNb7JZI/s320/menu-drop-down-brown-style.gif" title="Membuat Menu Drop Down Brown Style di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Menu Drop Down Brown Style di Blog</b> – masih melanjutkan tentang tutorial membuat menu pada blog, sebagai intermezzo kemarin sudah saya posting tentang cara <a href="http://mas-andes.blogspot.com/2013/05/membuat-gallery-photo-efek-polaroid.html" target="_blank" title="membuat gallery photo efek polaroid di blog">membuat gallery photo efek polaroid di blog</a> dan sekarang kita mulai lagi dengan pembahasan mengenai tutorial cara membuat menu drop down. Drop down menu brown style ini bagi yang menggunakan template blog dengan tema warna yang terang mungkin akan kurang sesuai dengan warna dasarnya,  akan tetapi tidak ada salahnya jika ingin mencoba apabila mau menerapkannya terlebih dahulu. Tampilan yang minimalis tidak membuat menu ini terlihat rumit, tampilan drop down dengan sub menu yang rapi maka akan tampak pula mempercantik blog. Untuk lebih lanjut lagi, maka berikut adalah tutorial tentang cara <b>Membuat Menu Drop Down Brown Style di Blog</b> dengan cara pemasangan yang mudah:</div><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6QqOtICzAJ6mi1rIoy0168i9J1zUBID3HX-sH3XWsmqfVUkNYskmgiLL85pltzgoFpGCgRSFt8d4B5xiwf3AuVpg704EMoHhUgiPaEaq0he4VhGIgZ2GrBUmbpr-HBTgeJIILD6kI5g/s1600/Script+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Drop Down Brown Style di Blog" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6QqOtICzAJ6mi1rIoy0168i9J1zUBID3HX-sH3XWsmqfVUkNYskmgiLL85pltzgoFpGCgRSFt8d4B5xiwf3AuVpg704EMoHhUgiPaEaq0he4VhGIgZ2GrBUmbpr-HBTgeJIILD6kI5g/s320/Script+CSS.jpg" title="Membuat Menu Drop Down Brown Style di Blog" width="320" /></a></div><blockquote class="tr_bq" style="height: 350px; overflow: auto; padding: 10px;">.menu {<br />font-family: "Verdana", Arial, san-serif;<br />width:auto;<br />height:42px;<br />position:relative;<br />font-size:11px;<br />margin: 0;<br />}<br />.menu ul li a {<br />display:block;<br />text-decoration:none;<br />color:#EBE0D5;<br />font-weight:bold;<br />width:81px; <br />height:42px; <br />text-align:center;<br />border-bottom: 0;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQrRpBbLZg6YJNwcY9zbXtWNh4iIRKn2LbmUm0mSHn3zO5_3IKpTvvJyLupIjkdCXJ0zew5wmNxLeKVgDQjRGqfyPJ9VodO9KWx-NNIAi897NTdDATIhXFXMNVs-4IwUJtOmPtKQDSQ1D/s82/center.png');<br />line-height:48px; <br />font-size:11px; <br />overflow:hidden;<br />padding-left: 1px;<br />}<br />.menu .left_nosub {<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSYDTfBU9QK7g4acslSkpYaBWSttR44YF7T0BkM1H96I57IkGLWYEtIdx75PG8y6O9AtglLQKMPNPUIEdtix33uREM9-R1oWjyl-Vfo-2cHHxK9waz7y2xUBQLWZ3gulyxYaHyIaSPl4-/s82/left.png');<br />padding-left: 1px;<br />margin-right: -1px;<br />}<br />.menu .right_hassub {<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhun7FxXk4Mxq9WwIuc3LcJJLI43El1CNn_drNwlM_pOISlnkOh1gIwj6gzDOHPIoy2fkjldOYRkvNGN-K78o8niOEUotnEdsd8aAMjJYF80dO_akURtQl6YgR8Y1miGwQSsZyWGoc2jsrL/s82/right.png');<br />}<br />.menu .right_nosub {<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhun7FxXk4Mxq9WwIuc3LcJJLI43El1CNn_drNwlM_pOISlnkOh1gIwj6gzDOHPIoy2fkjldOYRkvNGN-K78o8niOEUotnEdsd8aAMjJYF80dO_akURtQl6YgR8Y1miGwQSsZyWGoc2jsrL/s82/right.png');<br />}<br />.menu ul {padding:0; margin:0; list-style: none;}<br />.menu ul li {float:left; position:relative;}<br />.menu ul li ul {display: none;}<br />.menu ul li:hover a {<br />color:#381B01; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6IVQzfQEwPzf4G0IYcTacnR5YhRdD1MoKKW3HE-bGB9rhW3qMglFTpwKt1zwjrAuTZrdIg33XhoZcdyHDeT2mWC5gRj91sDUut5YDrjHEiPLggFyhyf0-8V_4bsSIAMCcS45AHQIrYPp6/s82/center_hassub.png');<br />}<br />.menu ul li:hover ul {<br />display:block; <br />position:absolute; <br />top:42px; <br />left:0; <br />width:152px; <br />margin: 0; <br />padding: 0;<br />}<br />.menu ul li:hover ul li a.center_hassub {<br />background:#6a3; <br />color:#EBE0D5;<br />}<br />.menu ul li:hover ul li:hover a.center_hassub {<br />background:#6fc; <br />color:#381B01;<br />}<br />.menu ul li:hover ul li ul {display: none;}<br />.menu ul li:hover .left_nosub {<br />color:#381B01; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExBwNkZy0HijFbREVl2CX-K2pLGnJjajncuuNgLZPmjUWAog2_FimwoSL5i1Qfh47Vh14Uyze39ENvKedIaLD4EhcXiLO-E8thkKKG2zoBq5RLrGINHhodt1zY_quawB-vkMJzbdovdNE/s82/left_nosub.png');<br />}<br />.menu ul li:hover .right_hassub {<br />color:#381B01; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga7ITgx2M0VpEOuzikMJkGnPbvOog7cIGmRTiGjwToH7FPFF0baQ1L2mgDHdZzfB-Q1t2jlejnBd0YnKiu0yafcy4gxjzVPOpZtHTss-KKOkiBf31A1NYIzeMHEtBLHx80n-X29XR0krrK/s82/right_hassub.png');<br />}<br />.menu ul li:hover .right_nosub {<br />color:#381B01; <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0PXb6kyS7VZ9YdDURUpyTcJ1wuNmW8kNm8oWAraQ871_pmYBHZzBMPH77lQSXtEJh0NH_g53RvdTX7UtIRIxI3UJ0bvrCoNpTZiLN7GlJGYA0MFtNbvNJ2KZbB2JPurwMTapjlFI_vva/s82/right_nosub.png');<br />}<br />.menu ul li:hover ul li a {<br />background-image: none; <br />display:block;<br />height: 28px; <br />line-height: 26px; <br />color:#381B01; <br />width:142px; <br />text-align:left; <br />margin: 0; padding:0 0 0 11px;<br />font-weight:normal;<br />}<br />.menu ul li:hover ul {<br />margin: 0 0 0 3px;<br />padding: 0;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaYw6XFxCqdsf7eHC6krg2BJw1pQn9dCPLAc3RL4EwA0YZ5f0DNFFn8S6tNBLcT8Qsdh0Q6_JgypgOHIrBIT-hqEfqnuvDexrwyK1jtZIar-3DpfXS2q0kvNMCgczXMME3MxAgU5Efa_xW/s202/dropdown.png');<br />background-repeat:no-repeat;<br />background-position:bottom left; <br />}<br />.menu ul li:hover ul .sub_active {<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NPD5o2u4eRtnSv8x5uUBoe0Mm-4aE7S51oQ9F3QS1woy2f-AP7rg5t8TAgNFZPAIhA3c4dLjo95E0X7Sb9BytcLvqgy5M2A1laEpDuZqibIqpGzyQ9gQBvPH1YHGI-nNoy_lGGKxoUm9/s152/sub_active.png');<br />margin-right: 1px;<br />}<br />.menu ul li:hover ul li a:hover {<br />color:#381B01 !important; <br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sPQEpoeTCsUEaXmoXlU5nwRwWSnK1kodEyw3-6CbOqL6iUxt1xEBFt5Eat61WTGbxNPwDboAwY1ZW0vok2jH0clB4VCGc9TGA7y8hohVeb2gjuVjS3J2ahwg4ded2gLxhZK4wkqzhPfE/s152/sub_hover.png');<br />}<br />.menu ul li:hover ul li:hover ul {<br />display:block; <br />position:absolute; <br />left:105px; <br />top:0;<br />}<br />.menu ul li:hover ul li:hover ul.left {left:-105px;} </blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br /><b>Perlu diperhatikan:</b> Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik <b>Template >> Edit HTML</b> lalu cari kode <b>]]></b:skin></b> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.<br /><br />4. Selanjutnya untuk memanggil dan menampilkan Menu Drop Down Brown Style di Blog caranya copy kode HTML dibawah ini, <b>kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript</b> lalu paste kode ini didalamnya:</div><blockquote class="tr_bq"><div class="menu"><br /><ul><br /><li><a class="left_nosub" href="#">Home</a></li><br /><li><a class="center_hassub" href="#">Tutorial</a><br />    <ul><br />    <li><a href="#">CSS</a></li><br />    <li><a href="#">PHP</a></li><br />    <li><a href="#">HTML</a></li><br />    <li><a href="#">Javascript</a></li><br />    </ul><br /></li><br /><li><a class="center_hassub" href="#">Designs</a><br />    <ul><br />    <li><a href="#">Website Designs</a></li><br />    <li><a href="#">Logo Designs</a></li><br />    <li><a href="#">Banner Designs</a></li><br />    <li><a href="#">Print Designs</a></li><br />    <li class="sub_active"><a href="#" style="color: rgb(255, 255, 255);">Request Custom Design</a></li><br />    </ul><br /></li><br /><li><a class="center_hassub" href="#">Download</a><br />    <ul><br />    <li><a href="#">Ebook</a></li><br />    <li><a href="#">Software</a></li><br />    <li><a href="#">Film</a></li><br />    </ul><br /></li><br /><li><a class="center_hassub" href="#">Tips Trik</a><br />    <ul><br />    <li><a href="#">Blogger</a></li><br />    <li><a href="#">Wordpress</a></li><br />    <li><a href="#">SEO</a></li><br />    <li><a href="#">Computer</a></li><br />    </ul><br />    </li><br /><li><a class="right_nosub" href="#">Contact</a></li><br /></ul><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ganti tanda # dengan URL tujuan yang di inginkan.<br /><br />Langkah terakhir klik Save, maka selesai sudah dan silahkan lihat hasilnya dari tutorial cara <b>Membuat Menu Drop Down Brown Style di Blog</b>.</div>

Membuat Menu Drop Down Brown Style di Blog – masih melanjutkan tentang tutorial membuat menu pada bl…

Read More

Membuat Gallery Photo Efek Polaroid Pada Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBQXD6OnuWeuNLBb523cGj1mDFsDli9dcsS8JsOTyEjBQEpsr0ciQNihETgTGciHJZYcxghLfM-eEM67y_yg4EwZ6FuSgxXfg0LOce6R-qDJQuk48PBkBsdau2_YenagTBI-5e0Z7uQLk/w565-h300-no/gallery-photo_polaroid.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Photo Efek Polaroid Pada Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBQXD6OnuWeuNLBb523cGj1mDFsDli9dcsS8JsOTyEjBQEpsr0ciQNihETgTGciHJZYcxghLfM-eEM67y_yg4EwZ6FuSgxXfg0LOce6R-qDJQuk48PBkBsdau2_YenagTBI-5e0Z7uQLk/w565-h300-no/gallery-photo_polaroid.gif" title="Membuat Gallery Photo Efek Polaroid Pada Blog" width="550" /></a></div><div style="text-align: justify;"><b>Membuat Gallery Photo Efek Polaroid Pada Blog</b> – pada umumnya kebanyakan atau bahkan mayoritas gallery photo yang terpadat pada blog rata-rata memang rapi dan tertata secara teratur, tidak seperti pada gallery photo yang satu ini. gallery photo ini memang terlihat sangat acak-acakan tidak karuan hingga seperti photo yang bertumpuk. Ukurannya photo juga tidak seluruhnya sama, dalam satu gallery ini size atau ukuran photo terlihat berbeda dari yang kecil hingga yang besar seingga efek polaroid pada gallery blog ini bukan malah membuat gallery blog semakin rapi tapi malah sebaliknya. Namun apa yang terjadi jika pada photo tersebut tersentuh oleh mouse? Maka tidak lain adalah efek hover pada photo cantik yang akan tampil dengan jelas walaupun photo tersebut pada sebelumnya terletak pada bagian bawah dan sudah tertutup oleh photo yang terdapat di atasnya. Walaupun photo tersebut pada posisi miring akan tetapi akan terlihat seperti posisi sediakala saat hover dan photo juga akan tampil sedikit lebih besar atau memiliki efek zoom dan rotate. Untuk melihat seperti apa hasilnya dari gallery photo ini, silahkan bisa di tinjau terlebih dahulu pada halaman demo. Untuk yang ingin menerapkannya kedalam blog, maka berikut adalah tutorial cara <b>Membuat Gallery Photo Efek Polaroid Pada Blog</b>:</div><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFduutftdjqYmrRh0i6tSNuaSIKKPCQM93rVvd-4L4NuShZw_nGwB2T6rS2zpPRhv9MhspI_4AywRcR3b78AwFD_GfTHUIsc43Ri3bibJM0MsT-XIw-HdqUan0MCFwLBEapGy_mBi6Iek/s1600/Kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Photo Efek Polaroid Pada Blog" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFduutftdjqYmrRh0i6tSNuaSIKKPCQM93rVvd-4L4NuShZw_nGwB2T6rS2zpPRhv9MhspI_4AywRcR3b78AwFD_GfTHUIsc43Ri3bibJM0MsT-XIw-HdqUan0MCFwLBEapGy_mBi6Iek/s320/Kode-CSS.jpg" title="Membuat Gallery Photo Efek Polaroid Pada Blog" width="550" /></a></div><blockquote class="tr_bq" style="height: 150px; overflow: auto; padding: 10px;">a.polaroid {<br />display: block;<br />text-decoration: none;<br />color: #333;<br />padding: 10px 20px 20px 10px;<br />width: 150px;<br />border: 1px solid #BFBFBF;<br />background-color: white;<br />z-index: 2;<br />font-size: 0.7em;<br />-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />-webkit-transition: -webkit-transform 0.5s ease-in;<br />}<br />a.polaroid:hover,<br />a.polaroid:focus,<br />a.polaroid:active {<br />z-index: 999;<br />border-color: #6A6A6A;<br />-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />-webkit-transform: rotate(0deg);<br />-moz-transform: rotate(0deg);<br />transform: rotate(0deg);<br />}<br />.polaroid img {<br />margin: 0 5 15px;<br />width: 150px;<br />height: 150px;<br />}<br /><br />a img {<br />border: none;<br />display: block;<br />}<br /><br />.photo-album {<br />position: relative;<br />width: 80%;<br />margin: 0 auto;<br />max-width: 70em;<br />height: 450px;<br />margin-top: 5em;<br />min-width: 800px;<br />max-width: 900px;<br />}<br />.photo-album .polaroid {<br />position: absolute;<br />}<br />.photo-album h1 {<br />position: absolute;<br />z-index: 5;<br />top: 150px;<br />text-align: center;<br />width: 80%;<br />line-height: 1.9;<br />}<br />.photo-album h1 span {<br />background-color: white;<br />font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;<br />padding: 0.4em 0.8em 0.3em 0.8em;<br />-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);<br />border: 1px solid #6A6A6A;<br />}<br />.photo-album .small {<br />width: 75px;<br />padding: 6px 12px 12px 6px;<br />font-size: 0.6em;<br />}<br />.photo-album .small img {<br />width: 75px;<br />height: 75px;<br />}<br />.photo-album .medium {<br />width: 200px;<br />padding: 13px 26px 26px 13px;<br />font-size: 0.8em;<br />}<br />.photo-album .medium img {<br />width: 200px;<br />height: 200px;<br />}<br />.photo-album .large {<br />width: 300px;<br />padding: 20px 30px 30px 20px;<br />font-size: 1em;<br />}<br />.photo-album .large img {<br />width: 300px;<br />height: 300px;<br />}<br />.photo-album .img1 {<br />bottom: 10px;<br />right: 365px;<br />-webkit-transform: rotate(10deg);<br />-moz-transform: rotate(10deg);<br />transform: rotate(10deg);<br />}<br />.photo-album .img2 {<br />top: 50px;<br />right: 220px;<br />-webkit-transform: rotate(-4deg);<br />-moz-transform: rotate(-4deg);<br />transform: rotate(-4deg);<br />}<br />.photo-album .img3 {<br />left: 300px;<br />top: 0;<br />-webkit-transform: rotate(-5deg);<br />-moz-transform: rotate(-5deg);<br />transform: rotate(-5deg);<br />}<br />.photo-album .img4 {<br />top: 10px;<br />left: 300px;<br />-webkit-transform: rotate(-20deg);<br />-moz-transform: rotate(-20deg);<br />transform: rotate(-20deg);<br />}<br />.photo-album .img5 {<br />bottom: 0;<br />right: 200;<br />-webkit-transform: rotate(1deg);<br />-moz-transform: rotate(1deg);<br />transform: rotate(1deg);<br />}<br />.photo-album .img6 {<br />bottom: 10px;<br />right: 230px;<br />-webkit-transform: rotate(6deg);<br />-moz-transform: rotate(6deg);<br />transform: rotate(6deg);<br />}<br />.photo-album .img7 {<br />bottom:0;<br />left:300px;<br />-webkit-transform: rotate(-10deg);<br />-moz-transform: rotate(-10deg);<br />transform: rotate(-10deg);<br />}<br />.photo-album .img8 {<br />bottom: -20px;<br />left: 300px;<br />-webkit-transform: rotate(-8deg);<br />-moz-transform: rotate(-8deg);<br />transform: rotate(-8deg);<br />}<br />.photo-album .img9 {<br />bottom: 0;<br />left: 0;<br />-webkit-transform: rotate(-8deg);<br />-moz-transform: rotate(-8deg);<br />transform: rotate(-8deg);<br />}<br />.photo-album .img10 {<br />top: 0;<br />left: 20px;<br />-webkit-transform: rotate(8deg);<br />-moz-transform: rotate(8deg);<br />transform: rotate(8deg);<br />}<br />.photo-album .img11 {<br />top: 0;<br />right: 200;<br />-webkit-transform: rotate(-8deg);<br />-moz-transform: rotate(-8deg);<br />transform: rotate(-8deg);<br />}<br />.photo-album .img12 {<br />top: 0;<br />left: 300px;<br />-webkit-transform: rotate(18deg);<br />-moz-transform: rotate(18deg);<br />transform: rotate(18deg);<br />}<br />.photo-album .img13 {<br />bottom: -20px;<br />right: 630px;<br />-webkit-transform: rotate(4deg);<br />-moz-transform: rotate(4deg);<br />transform: rotate(4deg);<br />}<br />.photo-album .img14 {<br />top: 90px;<br />left: 300px;<br />-webkit-transform: rotate(15deg);<br />-moz-transform: rotate(15deg);<br />transform: rotate(15deg);<br />}<br />.photo-album .img15 {<br />left:176px;<br />top:20px;<br />-webkit-transform: rotate(-8deg);<br />-moz-transform: rotate(-8deg);<br />transform: rotate(-8deg);<br />}<br /><br />a:hover,<br />a:focus {<br />z-index: 5;<br />}</blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Note: Untuk menaruh kode CSS tidak harus seperti langkah di atas, bisa juga dengan cara klik <b>Template >> Edit HTML</b> lalu cari kode <b>]]></b:skin></b> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.<br /><br />4. Selanjutnya untuk menampilkan gallery photo efek polaroid di Blog caranya copy kode HTML dibawah ini, kemudian paste ke dalam kolom posting mode HTML:</div><blockquote class="tr_bq"><div class="photo-album"><br /><h1><span>Faceblog Evolutions Gallery</span></h1><br /><a href="http://mas-andes.blogspot.com" class="large polaroid img1"><img src="https://lh3.googleusercontent.com/-56cDkhODmBE/Ubv07yocBQI/AAAAAAAAEmE/-r2ya929wBE/w800-h533-no/Andes+%25285%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="polaroid img2"><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" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="small polaroid img3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiov2LemjChA0FqajMETwlXL_Mu2AS_eZo0lhOSRs0rFCGHMGErUizZlbPZmVzwvGRcW2o3tQqSCxpqYopOlmruGe-DoscgrABY8C9LoUqqD8xGPj-ybmwmVRDqaWHYs5YGkUfkL77GPzw/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="medium polaroid img4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9d42BevmoxSCUwxomkvZtd5qwsgg5P4Xy0SN_fspBihvj8V83rBJ9u6dtlPqM0n2txuaPaYYlBRsXXxpcX9QhEGJ938VChyjwyeJeRmUet38Xvwwr09BMrqgqmBmiRHYd1nCc7CyrJs/w300-h200-no/Faceblog+Evolutions+%25281%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="polaroid img5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilNsg2N3-lzSMFGAYoT7cqFmU0m4yktrKTkCKAXWS5GbX8zvtVNiWp2su9TS8J5Em8efUXkJJlaNxcIKNrY1ZHkOnHWwO4G6Hwy72cUg_e0COZaMQ-xo0NJBlvm7re3jsfwrj0JFljPn4/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="polaroid img6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBBVF5gjDg7hPqGUAgtmubAQo9ZiW46Up40rwaofpxDF0voQrZtX0xUDxOWILjbvjxbUYU6PmENZ68YNW6ZEjhsBB_KmJjG2b6xm7CQIYAFfhYEHxIlnG4wej8Gw8Wv7mFdcyGyOo1cY/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="polaroid img7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FTb4fi5DtcC7gBdlH-qwhdltpKIVsd4FrFYW466AP2T7qeVrVpojy8Nz078KY3g75dTLJda1LytaZ8Va_GTQ0qZM1rr77V0bh9uJ8mDgDyjpDpgptwC3goyfDAekBYH0nSClRz1kHu0/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="small polaroid img8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGN-uKsfk1gGB2OlBvljzda8mauohysU-2pOLWb96skfRARHNFrgjH59Sx4nu3FZfGAXm4CsddCa9I053Zvl1fH9bArcBPupcvqXrrkri8cjQnH2hG6dis3ZBwAaI9_CPDjflgR3RTls/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="medium polaroid img9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpmRhwPf-qQU8IYuCVjz7qVTDuLss6Ot0tCNEmGRrjvYXXObG1iXPplTZmS-_wRTSApEHM3HEvaRexE-VcMx0ka5t6H963N9AD9lvBFsCtPSSFSgpG-_8VK95I9KJZDXpE5Rf0Q7ZOJc/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="polaroid img10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcpQtmQ5LEnLrKHqEY7JbM8DlAQ3hpmfIKgeXs42kvThLUGlUhuPz1fuC56l1Y7_S8CFIR9HWusOZJS29RDIE2B83LVX2-E7q2h-YLfcyDpWW-N3MJwtj1WPnhljBMAkpEsSGtETeKTg/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="small polaroid img11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR6xy3YfUyMqjYXVYxZehSX-VHcgeWNGNwW_l7qkQQXhHcixGzpCBquf7hAnYywaF2S2qbb53GQyY22Xol23n363e-aeiKl6pg_2AxAvfsp9JIKyeqVhSwjN_JrFXqFNaAAMEgA-Lt_0/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="small polaroid img12"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Yb5V5Fkrdw6FQonzJp0lxpFW3xarup4q3b1a5mIMojXQ6AfCdej_SOlWCBblpgNsO-K_Fc8Jt7aQN9q6qOYgG_YKGywKEScYFRQc7_s0iLLXNJ6Zd4QZI8FMI8zqr0sM5XMNviXAcSE/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="small polaroid img13"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxn1vlArwf4A6IDeDqytutzMb0Eji9zv3Ev8tmL__Vo-9gEQNBQkWFX86yIcKw_CkHT7vyQw2CC_2I06YRhDvrXK_WQC4LAJDrPbeQVIaPLOyI3nzcGTVagDH57sr1EV5I5gSu7NBs8zw/w300-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="small polaroid img14"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVf29UUVG77FaXIRDFcTy32aWUNlPUgbkghlUII82oGxf7uPmaVxnCfSaq3sPDDq4WZLwR59COSGYWx_DdPjM4zOAuFX3alWAdiges-QIphlIL5jpdTCtgGUJxOP3ujqzkw9QpYUFkSpZ/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /><a href="http://mas-andes.blogspot.com" class="polaroid img15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvy4wB9B3E166Z_NwsxYp3REHYF9OlTiFq94KF3V9__BWDMEFqtzt6Y7HH8VugL_l8Fqyo28sxfjKm9iOVa1hQ7BfbufhmMwIBu5C0f1M0SC7k5uhXBcm2IKuGFZ3beKhYaBGxpEUOc4d2/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt=““>DESKRIPSI PHOTO</a><br /></div></blockquote><div style="text-align: justify;">Keterangan:</div><div style="text-align: justify;">Ganti "http://mas-andes.blogspot.com"<span style="color: red;"> </span>dengan URL halaman yang di inginkan.<br />Ganti  URL gambar yang di inginkan.</div><div style="text-align: justify;"><br />Langkah terakhir klik Save, maka selesai dan lihat hasilnya dari cara <b>Membuat Gallery Photo Efek Polaroid Pada Blog</b>.</div><br />DEMO:<br /> <style> a.polaroid { display: block; text-decoration: none; color: #333; padding: 10px 20px 20px 10px; width: 150px; border: 1px solid #BFBFBF; background-color: white; z-index: 2; font-size: 0.7em; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transition: -webkit-transform 0.5s ease-in; } a.polaroid:hover, a.polaroid:focus, a.polaroid:active { z-index: 999; border-color: #6A6A6A; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } .polaroid img { margin: 0 5 15px; width: 150px; height: 150px; } a img { border: none; display: block; } .photo-album { position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top: 5em; min-width: 800px; max-width: 900px; } .photo-album .polaroid { position: absolute; } .photo-album h1 { position: absolute; z-index: 5; top: 150px; text-align: center; width: 80%; line-height: 1.9; } .photo-album h1 span { background-color: white; font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; padding: 0.4em 0.8em 0.3em 0.8em; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); border: 1px solid #6A6A6A; } .photo-album .small { width: 75px; padding: 6px 12px 12px 6px; font-size: 0.6em; } .photo-album .small img { width: 75px; height: 75px; } .photo-album .medium { width: 200px; padding: 13px 26px 26px 13px; font-size: 0.8em; } .photo-album .medium img { width: 200px; height: 200px; } .photo-album .large { width: 300px; padding: 20px 30px 30px 20px; font-size: 1em; } .photo-album .large img { width: 300px; height: 300px; } .photo-album .img1 { bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } .photo-album .img2 { top: 50px; right: 220px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); } .photo-album .img3 { left: 300px; top: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg); } .photo-album .img4 { top: 10px; left: 300px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg); } .photo-album .img5 { bottom: 0; right: 200; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); transform: rotate(1deg); } .photo-album .img6 { bottom: 10px; right: 230px; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); transform: rotate(6deg); } .photo-album .img7 { bottom:0; left:300px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } .photo-album .img8 { bottom: -20px; left: 300px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg); } .photo-album .img9 { bottom: 0; left: 0; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg); } .photo-album .img10 { top: 0; left: 20px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); transform: rotate(8deg); } .photo-album .img11 { top: 0; right: 200; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg); } .photo-album .img12 { top: 0; left: 300px; -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); transform: rotate(18deg); } .photo-album .img13 { bottom: -20px; right: 630px; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); transform: rotate(4deg); } .photo-album .img14 { top: 90px; left: 300px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } .photo-album .img15 { left:176px; top:20px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg); } a:hover, a:focus { z-index: 5; } </style><div class="photo-album"><h1><span>Faceblog Evolutions Gallery</span></h1><a href="http://mas-andes.blogspot.com" class="large polaroid img1"><img alt="“faceblog" src="https://lh3.googleusercontent.com/-56cDkhODmBE/Ubv07yocBQI/AAAAAAAAEmE/-r2ya929wBE/w800-h533-no/Andes+%25285%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="polaroid img2"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xD9Ll5L1skVWW5-QhDSzBHsEbzVL8QdK-xbjyrN5PciChsYzX4SxTUAOF22_7Xzsy_te1_fsw6vJ-BkQevx2ITwosifAmtGKvIvu7ln9V8HWMJ6AzKxk8Dg0l81z4cbLfsEGLx-RU9E/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="small polaroid img3"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiov2LemjChA0FqajMETwlXL_Mu2AS_eZo0lhOSRs0rFCGHMGErUizZlbPZmVzwvGRcW2o3tQqSCxpqYopOlmruGe-DoscgrABY8C9LoUqqD8xGPj-ybmwmVRDqaWHYs5YGkUfkL77GPzw/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="medium polaroid img4"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9d42BevmoxSCUwxomkvZtd5qwsgg5P4Xy0SN_fspBihvj8V83rBJ9u6dtlPqM0n2txuaPaYYlBRsXXxpcX9QhEGJ938VChyjwyeJeRmUet38Xvwwr09BMrqgqmBmiRHYd1nCc7CyrJs/w300-h200-no/Faceblog+Evolutions+%25281%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="polaroid img5"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilNsg2N3-lzSMFGAYoT7cqFmU0m4yktrKTkCKAXWS5GbX8zvtVNiWp2su9TS8J5Em8efUXkJJlaNxcIKNrY1ZHkOnHWwO4G6Hwy72cUg_e0COZaMQ-xo0NJBlvm7re3jsfwrj0JFljPn4/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="polaroid img6"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBBVF5gjDg7hPqGUAgtmubAQo9ZiW46Up40rwaofpxDF0voQrZtX0xUDxOWILjbvjxbUYU6PmENZ68YNW6ZEjhsBB_KmJjG2b6xm7CQIYAFfhYEHxIlnG4wej8Gw8Wv7mFdcyGyOo1cY/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="polaroid img7"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FTb4fi5DtcC7gBdlH-qwhdltpKIVsd4FrFYW466AP2T7qeVrVpojy8Nz078KY3g75dTLJda1LytaZ8Va_GTQ0qZM1rr77V0bh9uJ8mDgDyjpDpgptwC3goyfDAekBYH0nSClRz1kHu0/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="small polaroid img8"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGN-uKsfk1gGB2OlBvljzda8mauohysU-2pOLWb96skfRARHNFrgjH59Sx4nu3FZfGAXm4CsddCa9I053Zvl1fH9bArcBPupcvqXrrkri8cjQnH2hG6dis3ZBwAaI9_CPDjflgR3RTls/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="medium polaroid img9"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpmRhwPf-qQU8IYuCVjz7qVTDuLss6Ot0tCNEmGRrjvYXXObG1iXPplTZmS-_wRTSApEHM3HEvaRexE-VcMx0ka5t6H963N9AD9lvBFsCtPSSFSgpG-_8VK95I9KJZDXpE5Rf0Q7ZOJc/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="polaroid img10"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcpQtmQ5LEnLrKHqEY7JbM8DlAQ3hpmfIKgeXs42kvThLUGlUhuPz1fuC56l1Y7_S8CFIR9HWusOZJS29RDIE2B83LVX2-E7q2h-YLfcyDpWW-N3MJwtj1WPnhljBMAkpEsSGtETeKTg/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="small polaroid img11"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR6xy3YfUyMqjYXVYxZehSX-VHcgeWNGNwW_l7qkQQXhHcixGzpCBquf7hAnYywaF2S2qbb53GQyY22Xol23n363e-aeiKl6pg_2AxAvfsp9JIKyeqVhSwjN_JrFXqFNaAAMEgA-Lt_0/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="small polaroid img12"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Yb5V5Fkrdw6FQonzJp0lxpFW3xarup4q3b1a5mIMojXQ6AfCdej_SOlWCBblpgNsO-K_Fc8Jt7aQN9q6qOYgG_YKGywKEScYFRQc7_s0iLLXNJ6Zd4QZI8FMI8zqr0sM5XMNviXAcSE/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="small polaroid img13"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxn1vlArwf4A6IDeDqytutzMb0Eji9zv3Ev8tmL__Vo-9gEQNBQkWFX86yIcKw_CkHT7vyQw2CC_2I06YRhDvrXK_WQC4LAJDrPbeQVIaPLOyI3nzcGTVagDH57sr1EV5I5gSu7NBs8zw/w300-h200-no/Faceblog+Evolutions+%25285%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="small polaroid img14"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVf29UUVG77FaXIRDFcTy32aWUNlPUgbkghlUII82oGxf7uPmaVxnCfSaq3sPDDq4WZLwR59COSGYWx_DdPjM4zOAuFX3alWAdiges-QIphlIL5jpdTCtgGUJxOP3ujqzkw9QpYUFkSpZ/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg">DESKRIPSI PHOTO</a><a href="http://mas-andes.blogspot.com" class="polaroid img15"><img alt="“faceblog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvy4wB9B3E166Z_NwsxYp3REHYF9OlTiFq94KF3V9__BWDMEFqtzt6Y7HH8VugL_l8Fqyo28sxfjKm9iOVa1hQ7BfbufhmMwIBu5C0f1M0SC7k5uhXBcm2IKuGFZ3beKhYaBGxpEUOc4d2/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg">DESKRIPSI PHOTO</a></div>

Membuat Gallery Photo Efek Polaroid Pada Blog – pada umumnya kebanyakan atau bahkan mayoritas galler…

Read More

Menu Horisontal Inverted Shiftdown

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbljuXXWbplC-rRO924ZhlMvXAWRhRWuBQv7C3WWdEKjl1tz1C_vnILZpQm4rKbqbf4f5QRVWIYat210lRbvZ163sIRrv2uxiIKxM3uxO6uvcF_shZ2XSpVpNtb2kF5VbTxz0i8UFuvIs/s1600/menu-horisontal-shiftdown.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Horisontal Inverted Shiftdown" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbljuXXWbplC-rRO924ZhlMvXAWRhRWuBQv7C3WWdEKjl1tz1C_vnILZpQm4rKbqbf4f5QRVWIYat210lRbvZ163sIRrv2uxiIKxM3uxO6uvcF_shZ2XSpVpNtb2kF5VbTxz0i8UFuvIs/s320/menu-horisontal-shiftdown.gif" title="Menu Horisontal Inverted Shiftdown" width="320" /></a></div><div style="text-align: justify;"><b>Menu Horisontal Inverted Shiftdown</b> – seperti yang sudah saya bahas pada sebelumnya, bahwa menu merupakan bagian penting dalam blog yang berfungsi untuk mengelompokan beberapa label pada konten yang terdapat pada blog.</div><a name='more'></a><div style="text-align: justify;">Menu horisontal yang simpel dan sederhana ini, untuk menerapkannya kedalam blog juga tidak terlalu rumit. Hanya saja pada menu horisontal inverted shiftdown ini memang tidak terlihat begitu mewah jika di banding dengan menu-menu hosrintal yang lain. Namun walaupun demikian, apabila mungkin ada yang berminat untuk memasang kedalam blognya maka berikut adalah tutorialnya untuk cara memasang <b>Menu Horisontal Inverted Shiftdown</b> kedalam blog dengan menggunakan rangkain kode CSS yang sangat sederhana dan sangat mudah.</div><br />1. Login ke akun blogger.<br />2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFduutftdjqYmrRh0i6tSNuaSIKKPCQM93rVvd-4L4NuShZw_nGwB2T6rS2zpPRhv9MhspI_4AywRcR3b78AwFD_GfTHUIsc43Ri3bibJM0MsT-XIw-HdqUan0MCFwLBEapGy_mBi6Iek/s1600/Kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Horisontal Inverted Shiftdown" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFduutftdjqYmrRh0i6tSNuaSIKKPCQM93rVvd-4L4NuShZw_nGwB2T6rS2zpPRhv9MhspI_4AywRcR3b78AwFD_GfTHUIsc43Ri3bibJM0MsT-XIw-HdqUan0MCFwLBEapGy_mBi6Iek/s320/Kode-CSS.jpg" title="Menu Horisontal Inverted Shiftdown" width="320" /></a></div><blockquote class="tr_bq"><div style="text-align: justify;">.invertedshiftdown{<br />padding: 0;<br />width: 100%;<br />border-top: 5px solid #000;<br />background: transparent;<br />voice-family: "\"}\"";<br />voice-family: inherit;<br />}<br /><br />.invertedshiftdown ul{<br />margin:0;<br />margin-left: 40px;<br />padding: 0;<br />list-style: none;<br />}<br /><br />.invertedshiftdown li{<br />display: inline;<br />margin: 0 2px 0 0;<br />padding: 0;<br />text-transform:uppercase;<br />}<br /><br />.invertedshiftdown a{<br />float: left;<br />display: block;<br />font: bold 12px verdana;<br />color: black;<br />text-decoration: none;<br />margin: 0 1px 0 0;<br />padding: 5px 10px 9px 10px;<br />background-color: #7f7fff;<br />-moz-border-radius-bottomleft: 5px;<br />border-bottom-left-radius: 5px;<br />-moz-border-radius-bottomright: 5px;<br />border-bottom-right-radius: 5px;<br />}<br /><br />.invertedshiftdown a:hover{<br />background-color: #000;<br />padding-top: 9px;<br />padding-bottom: 5px;<br />color: white;<br />}<br /><br />.invertedshiftdown .current a{<br />background-color: #000;<br />padding-top: 9px;<br />padding-bottom: 5px;<br />color: white;<br />}<br /><br />#myform{<br />float: right;<br />margin: 0;<br />margin-top: 2px;<br />padding: 0;<br />}<br /><br />#myform .textinput{<br />width: 190px;<br />border: 1px solid gray;<br />}<br /><br />#myform .submit{<br />font: normal 12px Verdana;<br />height: 22px;<br />background-color: black;<br />color: white;<br />}</div></blockquote><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br /><b>Note</b>: Untuk menaruh kode CSS tidak harus seperti langkah di atas, bisa juga dengan cara klik <b>Template > Edit HTML</b> > lalu cari kode <b>]]></b:skin></b> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.<br /><br />4. Selanjutnya untuk memanggil dan menampilkan Menu Horisontal Inverted Shiftdown di Blog caranya copy kode HTML dibawah ini, kemudian klik <b>Tata Letak > Tambah Widget > HTML/Javascript</b> lalu paste kode ini didalamnya:</div><blockquote class="tr_bq"><div class="invertedshiftdown"><br /><ul><br /><li class="current"><a href="<span style="color: red;">#</span>"><span style="color: blue;">Home</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">CSS</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">jQuery</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">SEO</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">Blogging</span></a></li><br /><li><a href="<span style="color: red;">#</span>"><span style="color: blue;">Tool</span></a></li><br /></ul><br /><form id="myform"><br /><input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" /><br /></form><br /></div><br /><br style="clear: both;" /></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tulisan yang berwarna <span style="color: red;">merah </span>dengan URL tujuan.<br />Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan judul menu.<br /><br />Langkah terakhir klik <b>Save</b>, maka selesai dan lihat hasilnya dari cara membuat <b>Menu Horisontal Inverted Shiftdown di Blog</b>.</div>

Menu Horisontal Inverted Shiftdown – seperti yang sudah saya bahas pada sebelumnya, bahwa menu merup…

Read More

Membuat Menu Horisontal Ribbon Style CSS3 di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzt4eYnu6lDcGuvbBvs2QwiWEU3ufQzfl8nV4s46k7pE87inOWH-eLwzJxj6rgdyiATjeusfecQROYOMpCi-XhIbBy9XM7fGWyO00dl8rLf47EzWntVMiDecuh-g-nefldymMQ1wJwLns/s1600/Menu-Horisontal-Ribbon-Style.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Horisontal Ribbon Style CSS3 di Blog" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzt4eYnu6lDcGuvbBvs2QwiWEU3ufQzfl8nV4s46k7pE87inOWH-eLwzJxj6rgdyiATjeusfecQROYOMpCi-XhIbBy9XM7fGWyO00dl8rLf47EzWntVMiDecuh-g-nefldymMQ1wJwLns/s320/Menu-Horisontal-Ribbon-Style.gif" title="Membuat Menu Horisontal Ribbon Style CSS3 di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Menu Horisontal Ribbon Style CSS3 di Blog</b> – seperti yang terlihat pada gambar, menu horisontal ini memang cukup sederhana.</div><a name='more'></a><div style="text-align: justify;">Menu yang hanya berbentuk seperti pita dan memilki hover yang agak berbeda dari menu lain membuat menu ini mungkin terkesan lebih minimalis dan hanya terbentuk dari susunan kode CSS murni atau tanpa melibatkan jQuery. Apabila menu horisontal ini sudah terpasang di blog namun warna yang kurang sesuai dengan template blog juga masih bisa diatur kembali dengan merubah warna pada kode CSS yang berada pada bagian background maupun hover. Warna default yang sudah terpasang pada adalah gradient linear warna hijau dan hitam sedangkan saat hover menampilkan warna hitam dan biru. Pada bagian samping sudah tersetting secara default yaitu warna hitam, dan apabila ingin dirubah maka bisa menggantinya pada bagian border after dan border before yang terdapat didalam kode CSS. Untuk cara pemasangannya, maka berikut adalah tutorial cara <b>Membuat Menu Horisontal Ribbon Style CSS3 di Blog</b>:<br /><br />1. Login ke akun blogger.<br />2. Copy kode dibawah ini, lalu pada dashboard blog anda 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/AVvXsEhbMj22O1R4WlLODirzCGnb84E9p2VXBSpM3DzeGTwVvavIs01M5SnAsARnGhhB40uxn8DMsiTx2PGdLcs8fBvhapIEqcfFuFc2jjfG6_6obfR8gBEx_74117d6_6e43aoPL7Dub7p-31w/s1600/Kode-CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Horisontal di Blog" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMj22O1R4WlLODirzCGnb84E9p2VXBSpM3DzeGTwVvavIs01M5SnAsARnGhhB40uxn8DMsiTx2PGdLcs8fBvhapIEqcfFuFc2jjfG6_6obfR8gBEx_74117d6_6e43aoPL7Dub7p-31w/s320/Kode-CSS.jpg" title="Membuat Menu Horisontal Ribbon Style CSS3 di Blog" width="320" /></a></div><div style="text-align: left;"><blockquote class="tr_bq">.ribbon span {<br />background:-moz-linear-gradient(top, #00ff00 1%, #000 50%);<br />display:inline-block;<br />line-height:3em;<br />padding:0 1em;<br />margin-top:0.5em;<br />position:relative;<br />-webkit-transition: background-color 0.2s, margin-top 0.2s;<br />-moz-transition: background-color 0.2s, margin-top 0.2s;<br />-ms-transition: background-color 0.2s, margin-top 0.2s;<br />-o-transition: background-color 0.2s, margin-top 0.2s;<br />transition: background-color 0.2s, margin-top 0.2s;<br />}<br />.ribbon a:hover span {<br />background:-moz-linear-gradient(top, #000 1%, #00f 50%);<br />margin-top:0;  <br />}<br /><br />.ribbon span:before {<br />content: "";<br />position:absolute;<br />top:3em;<br />left:0;<br />border-right:0.5em solid #7f7fff;<br />border-bottom:0.5em solid #000;<br />}<br /><br />.ribbon span:after {<br />content: "";<br />position:absolute;<br />top:3em;<br />right:0;<br />border-left:0.5em solid #7f7fff;<br />border-bottom:0.5em solid #000;<br />}<br />.ribbon a:link, .ribbon a:visited { <br />color:#fff;<br />font: bold 16px verdana;<br />text-decoration:none;<br />float:left;<br />height:3.5em;<br />overflow:hidden;<br />}<br />.ribbon:after, .ribbon:before {<br />margin-top:0.5em;<br />content: "";<br />float:left;<br />border: 1.5em solid #000;<br />}<br />.ribbon:after {<br />border-right-color:transparent;<br />}<br /><br />.ribbon:before {<br />border-left-color:transparent;<br />}</blockquote></div><div style="text-align: justify;">3. Klik Terapkan ke Blog.<br /><br />Selanjutnya untuk memanggil dan menampilkan Menu Horisontal Ribbon Style CSS3 di Blog caranya copy kode dibawah ini, kemudian klik <b>Tata Letak > Tambah Widget > HTML/Javascript</b> lalu paste kode ini didalamnya:</div><blockquote class="tr_bq"><div class='ribbon'><br /><a href='<span style="color: red;">#</span>'><span><span style="color: blue;">Home</span></span></a><br /><a href='<span style="color: red;">#</span>'><span><span style="color: blue;">About Me</span></span></a><br /><a href='<span style="color: red;">#</span>'><span><span style="color: blue;">Contact Me</span></span></a><br /><a href='<span style="color: red;">#</span>'><span><span style="color: blue;">jQuery</span></span></a><br /><a href='<span style="color: red;">#</span>'><span><span style="color: blue;">Teknik SEO</span></span></a><br /><a href='<span style="color: red;">#</span><span style="color: red;"></span>'><span><span style="color: blue;">Tutorial CSS</span></span></a><br /><a href='<span style="color: red;">#</span>'><span><span style="color: blue;">Blogging</span></span></a><br /></div></blockquote><div style="text-align: justify;">Keterangan:<br />Silahkan ubah tanda <span style="color: red;">#</span> yang berwarna <span style="color: red;">merah </span>dengan URL tujuan.<br />Silahkan ubah tulisan yang berwarna <span style="color: blue;">biru </span>dengan judul menu.<br /><br />Langkah terakhir klik Save, maka selesai sudah dan silahkan bisa di lihat hasilnya dari cara <b>Membuat Menu Horisontal Ribbon Style CSS3 di Blog</b>.</div>

Membuat Menu Horisontal Ribbon Style CSS3 di Blog – seperti yang terlihat pada gambar, menu horisont…

Read More

Kode Chat Emoticon Facebook Spesial Love Symbol

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8KlngAVIigpHqru4oP9FnKptTLHT-V6SsRbt7bPkwS3L5JgK7l480Yjx9S_tsaSg6OQvhAl6k4HIwt3Es_PFDVl7mTil3xUjVRoJ-YlugJVmVJHeo2ft-pVkeppbCRKmNS3-SP-IzHA/s1600/chat-emoticon-facebook.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Chat Emoticon Facebook Spesial Love Symbol" border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8KlngAVIigpHqru4oP9FnKptTLHT-V6SsRbt7bPkwS3L5JgK7l480Yjx9S_tsaSg6OQvhAl6k4HIwt3Es_PFDVl7mTil3xUjVRoJ-YlugJVmVJHeo2ft-pVkeppbCRKmNS3-SP-IzHA/s320/chat-emoticon-facebook.jpg" title="Kode Chat Emoticon Facebook Spesial Love Symbol" width="320" /></a></div><div style="text-align: justify;"><b>Kode Chat Emoticon Facebook Spesial Love Symbol</b> – bukan alay dan bukan lebay, tapi ini Kode Chat Emoticon Facebook Spesial Love Symbol. Bagi pecinta facebook apalagi para perayu mungkin kode ini bisa digunakan untuk mencari mangsanya saat sedang berchatting ria.</div><a name='more'></a><div style="text-align: justify;">Mungkin bagi perayu jitu yang terbiasa sudah menjalankan aksinya melalui jejaring sosial facebook bisa dikatakan cinta adalah tidak memandang tempat. Katakanlah hal yang paling manis dan biarkan pacarmu tahu betapa berartinya bagi anda dengan salah satu kode cantik dan romantis Facebook emoticon yang ada dibawah. Cukup memilih kode emoticon Facebook yang menurut anda cocok kemudian untuk mengatakan pesan yang ingin anda sampaikan. Kemudian salin kode di bawahnya, dan paste di pesan atau chat box. Tekan enter dan lihat emoticon cinta anda muncul dan kekasih anda akan tersenyum untuk yakin bahwa anda salah seorang yang romantis. Anda dapat memilih orang-orang yang berbeda untuk emoticon yang berbeda. Anda dapat mengirim Emoticon Facebook Spesial Love Symbol yang berbeda setiap hari dalam seminggu. Pilihannya adalah milikmu, dan jangan lupa anda memberitahu teman anda tentang kode ini agar mereka ingin menggunakannya untuk pesan romantis mereka juga. Cinta benar-benar akan tumbuh di sekitar anda. Membuat orang-orang terkasih anda tertawa dan tersenyum dengan menggunakan Kode Chat Emoticon Facebook Spesial Love Symbol untuk mencerahkan hari mereka. Silahkan jika ingin segera di praktekan, dan berikut adalah kumpulan beberapa <b>Kode Chat Emoticon Facebook Spesial Love Symbol</b>:</div><style type="text/css">.gallery { margin: auto; } .gallery-item { float: left; margin-top: 0px; text-align: center; width: 50%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-caption { margin-left: 0; } </style> <div class="gallery snap_nopreview"> <dl class="gallery-item"><dt class="gallery-icon"><img alt="Chat Emoticon Facebook Spesial Love Symbol" class="attachment-thumbnail" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTyEsxrIC5uRCn2bte66AsJX45YbcsQ0PIqVfoV2oNO-Wfid-a95DL24mGgenZdQaCpxGUsNidvGw8z9G-0Tlwif8ooTTAbQQVVxt9LCR6qRvwj-cyo-v2GfXDUaXgGR6hAB1Fli8qAQ/s1600/Hurt-injured-heart.jpg" title="Kode Chat Emoticon Facebook Spesial Love Symbol" width="230" /><div><form name="gallery"><div align="center" style="margin-bottom: 0; margin-top: 0;"><textarea cols="25" name="txt" onmouseover="this.form.txt.select()" readonly="" rows="3" style="height: 120; width: 184;">[[455326797846249]] [[455326804512915]] [[455326794512916]] [[455326801179582]] [[455326791179583]] [[455326867846242]] [[455326864512909]] [[455326874512908]] [[455326871179575]] [[455326877846241]] [[455326944512901]] [[455326941179568]] [[455326937846235]] [[455326947846234]] [[455326934512902]] [[455327004512895]] [[455327011179561]] [[455327007846228]] [[455327014512894]] [[455327017846227]] [[455327084512887]] [[455327081179554]] [[455327087846220]] [[455327094512886]] [[455327091179553]] [[455327164512879]] [[455327157846213]] [[455327154512880]] [[455327151179547]] [[455327161179546]]