Trik Membuat Kotak Banner

<p>Posting merupakan tanggapan kami terhadap pertanyaan Saudari <strong>Sri Wahyuni</strong> dengan menggunakan fasilitas “<a href="http://optimasi-blog.blogspot.com/p/contact.html">Kontak</a>” tanggal 14 September 2011. Mungkin mba telah membaca posting sebelumnya yang berjudul “<a href="http://optimasi-blog.blogspot.com/2006/07/membuat-kotak-banner.html">membuat kotak banner</a>”. Tetapi tidak ada demo untuk melihat hasil pengkodean tersebut.</p><a name='more'></a> <p>Pada trik blogger kali ini, kita akan mencoba memperbaharui trik sebelumnya dengan menggunakan <abbr title="Cascading Style Sheets">CSS</abbr>3. Widget dikustomisasi untuk pemanfaatan banner berukuran 125×125. Setiap kode CSS dapat diletakkan sebelum <mark><code>]]></b:skin></code></mark> <span class="amp">&</span> <abbr title="HyperText Markup Language">HTML</abbr> dimasukkan ke dalam <mark>penambahan gadget atau widget</mark>. Mari kita ikuti bersama trik membuat kotak banner yang dimaksud.</p> <h3>Widget Banner I</h3> <div class="kotak-banner1"> <div class="banner1"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner1"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner1"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div> <div class="banner1"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div> <div class="banner1"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner1"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div></div><br /><h4>CSS</h4> <pre><code>/* Area yang akan digunakan untuk memasang Banner */<br />.kotak-banner {<br />background:#999;<br />border:2px solid #c3c3c3;<br />margin:0 auto 1.7143em;<br />padding:2% 0 0 3%;<br />position:relative;<br />overflow:hidden;<br />width:300px;<br />}<br /><br />/* Tempat untuk memasang Banner di atas kode ini */<br />.banner {<br />background:#c3c3c3;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />float:left;<br />height:135px;<br />margin-right:3%;<br />margin-bottom:4%;<br />position:relative;<br />width:45.5%;<br />text-align:center;<br />-webkit-transition:all 0.5s linear;<br />-moz-transition:all 0.5s linear;<br />-o-transition:all 0.5s linear;<br />transition:all 0.5s linear;<br />}<br /><br />/* Memunculkan title image saat di dekati tetikus (mouse) */<br />.banner a:hover:after {<br />background-color:rgba(0,0,0,0.25);<br />font-size:0.875em;<br />color:#000;<br />text-decoration:none;<br />content:attr(title);<br />left:4%;<br />bottom:3%;<br />width:92%;<br />position:absolute;<br />z-index:1;<br />}<br /><br />.banner img {<br />margin:4% auto 0;<br />width:125px;<br />height:125px;<br />}<br /><br />.banner:hover {<br />background:#f1f1f1;<br />-webkit-box-shadow:0px 0px 5px #fff;<br />-moz-box-shadow:0px 0px 5px #fff;<br />-o-box-shadow:0px 0px 5px #fff;<br />-ms-box-shadow:0px 0px 5px #fff;<br />box-shadow:0px 0px 5px #fff;<br />}</code></pre> <h4 id="HTML-widget-banner1">HTML</h4> <pre><code><div class="kotak-banner"><br /> <span style="color:red"><div class="banner"><a href="<span style="color:black"><strong>###</strong></span>" title="<span style="color:blue">Banner 125x125</span>"><img src="<span style="color:purple">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png</span>" alt="<span style="color:green">Banner</span>"/></a><br /> </div></span><br /><br />...<br /><br /></div></code></pre> <p>Catatan:</p> <ul><li>Copy <span class="amp">&</span> paste dimulai kode <span style="color:red"><div class="banner"> … </div></span> pada titik, titik,titik (...) untuk menambah banner.</li> <li>Ganti kode yang dicetak tebal dengan alamat website/halaman blog tujuan banner.</li> <li>Rubah <em>title</em> (warna biru) sesuai dengan <em>title</em> banner. Nah, title inilah yang akan muncul nantinya dalam banner kita, ketika banner di hover.</li> <li>Ganti gambar (warna ungu) sesuai dengan alamat gambar (banner) disimpan.</li> <li>Tambahkan <code>alt</code> seperti yang dicontohkan pada kode yang diberi warna hijau.</li></ul> <h3>Widget Banner II</h3> <div class="kotak-banner"> <div class="banner"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div> <div class="banner"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div></div> <h4>CSS</h4> <p>cara pengkodean hampir mirip dengan kode CSS pada “Widget Banner I”, cuma merubah <code>background</code>, <code>border</code>, dan ditambah sedikit variasi <code>transform:scale</code> (warna orange). Berikut gambaran kode CSS keseluruhannya.</p> <pre><code>.kotak-banner {<br />border:2px solid <span style="color:orangered">#444</span>;<br />margin:0 auto 1.7143em;;<br />padding:2% 0 0 3%;<br />position:relative;<br />overflow:hidden;<br />width:300px;<br />}<br /><br />.banner {<br />background:<span style="color:orangered">#444</span>;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />float:left;<br />height:135px;<br />margin-right:3%;<br />margin-bottom:4%;<br />text-align:center;<br />position:relative;<br />width:45.5%;<br />-webkit-transition:all 1s ease-in-out;<br />-moz-transition:all 1s ease-in-out;<br />-o-transition:all 1s ease-in-out;<br />transition:all 1s ease-in-out;<br />}<br /><br />.banner a:hover:after {<br />background-color:rgba(0,0,0,0.15);<br />font-size:0.875em;<br />color:#000;<br />text-decoration:none;<br />content:attr(title);<br />position:absolute;<br />left:4%;<br />bottom:3%;<br />width:92%;<br />z-index:1;<br />}<br /><br />.banner img {<br />margin:4% auto 0;<br />width:125px;<br />height:125px;<br />}<br /><br />.banner:hover {<br />background:<span style="color:orangered">#eee</span>;<br />-webkit-box-shadow:<span style="color:orangered">0px 2px 5px #333</span>;<br />-moz-box-shadow:<span style="color:orangered">0px 2px 5px #333</span>;<br />-o-box-shadow:<span style="color:orangered">0px 2px 5px #333</span>;<br />-ms-box-shadow:<span style="color:orangered">0px 2px 5px #333</span>;<br />box-shadow:<span style="color:orangered">0px 2px 5px #333</span>;<br /><span style="color:orangered">-webkit-transform:scale(1.1,1.1);<br />-moz-transform:scale(1.1,1.1);<br />-o-transform:scale(1.1,1.1);<br />-ms-transform:scale(1.1,1.1);<br />transform:scale(1.1,1.1);<br />z-index:5;</span><br />}</code></pre> <h4>HTML</h4> <p>Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “<strong><a href="#HTML-widget-banner1">Widget Banner I</a></strong>”.</p> <h3>Widget Banner III (Rotasi Banner Random)</h3> <div class="kotak-banner2"> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsuiSQms_rsO2ol8J_HlpKk1JqurZg4P4voZ25BO8_SeRlVGvxHZQSGjf2GRgRsV1qwfxeeaqZvrNuSUNxPX5G_cMBTqobODEeIVUnqXVLs8Tw1m5TXBaWyxyvLIbNEKQfvpfrvtzrGc/s144/300x250jpg.jpg"/></a></div><div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div> <div class="banner2"><a href="/" title="Banner 125x125"><img alt="Banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjw0OgKStoDixDIrvo4AipfH245eLyQRhOhXuWMa4ZjAKacHWNE0ipxTpWSVU5sGLS1VGazPkNM-rKlBAlllc1ZhuHfrn5gXrbonXjPAobt7_CjpD8ULrg2dKyUcbnm7kHJ1osxQrSElE/s800/125x125png.png"/></a></div></div> <h4>CSS</h4> <pre><code>.kotak-banner {<br />background:#fff;<br />border:2px solid #d4d4d4;<br />margin:0 auto 1.7143em;<br />padding:2% 0 0 3%;<br />position:relative;<br />overflow:hidden;<br />width:300px;<br />}<br /><br />.banner {<br />background:#fafafa;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />float:left;<br />height:135px;<br />margin-right:3%;<br />margin-bottom:4%;<br />text-align:center;<br />position:relative;<br />width:45.5%;<br />-webkit-transition:all 0.5s linear;<br />-moz-transition:all 0.5s linear;<br />-o-transition:all 0.5s linear;<br />transition:all 0.5s linear;<br />-webkit-transform:rotate(-2deg);<br />-moz-transform:rotate(-2deg);<br />-o-transform:rotate(-2deg);<br />-ms-transform:rotate(-2deg);<br />transform:rotate(-2deg);<br />}<br /><br />.banner:nth-child(even) {<br />-webkit-transform:rotate(4deg);<br />-moz-transform:rotate(4deg);<br />-o-transform:rotate(4deg);<br />-ms-transform:rotate(4deg);<br />transform:rotate(4deg);<br />}<br /><br />.banner:nth-child(3n) {<br />-webkit-transform:none;<br />-moz-transform:none;<br />-o-transform:none;<br />-ms-transform:none;<br />transform:none;<br />position:relative;<br />}<br /><br />.banner:nth-child(4n) {<br />-webkit-transform:rotate(-4deg);<br />-moz-transform:rotate(-4deg);<br />-o-transform:rotate(-4deg);<br />-ms-transform:rotate(-4deg);<br />transform:rotate(-4deg);<br />}<br /><br />.banner a:hover:after {<br />background-color:rgba(0,0,0,0.25);<br />font-size:0.875em;<br />color:#000;<br />text-decoration:none;<br />content:attr(title);<br />position:absolute;<br />left:4%;<br />bottom:3%;<br />width:92%;<br />z-index:1;<br />}<br /><br />.banner img {<br />margin:4% auto 0;<br />width:125px;<br />height:125px;<br />}<br /><br />.banner:hover {<br />background:#fafafa;<br />-webkit-box-shadow:2px 4px 5px #333;<br />-moz-box-shadow:2px 4px 5px #333;<br />-o-box-shadow:2px 4px 5px #333;<br />-ms-box-shadow:2px 4px 5px #333;<br />box-shadow:2px 4px 5px #333;<br />-webkit-transform:scale(1.1,1.1);<br />-moz-transform:scale(1.1,1.1);<br />-o-transform:scale(1.1,1.1);<br />-ms-transform:scale(1.1,1.1);<br />transform:scale(1.1,1.1);<br />position:relative;<br />z-index:5;<br />}</code></pre> <h4>HTML</h4> <p>Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “<strong><a href="#HTML-widget-banner1">Widget Banner I</a></strong>”.</p> <h3>Generalisasi</h3> <p>Anda pun dapat menambah, menghilangkan, <span class="amp">&</span> memodifikasi widget banner di atas sehingga sesuai dengan yang Anda inginkan. Berhubungan dengan “<strong>Widget Banner III</strong>” mungkin akan lebih baik jika diterapkan dalam <em>image gallery</em>. Lebih jelas tentang penggunaan CSS3 transform dalam <em>polaroids</em>—termasuk juga <em>image gallery</em>—dapat dipelajari pada website <cite title="ZURBexpo: Polaroids with CSS3"><a href="http://www.zurb.com/playground/css3-polaroids">ZURBexpo</a></cite>.Silakan memilih bentuk widget banner yang Anda kehendaki.</p><br /><style><br />.kotak-banner1 {<br />background:#999;<br />border:2px solid #c3c3c3;<br />margin:0 auto 1.7143em;<br />padding:2% 0 0 3%;<br />position:relative;<br />overflow:hidden;<br />width:300px;<br />}<br />.banner1 {<br />background:#c3c3c3;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />float:left;<br />height:135px;<br />margin-right:3%;<br />margin-bottom:4%;<br />position:relative;<br />width:45.5%;<br />text-align:center;<br />-webkit-transition:all 0.5s linear;<br />-moz-transition:all 0.5s linear;<br />-o-transition:all 0.5s linear;<br />transition:all 0.5s linear;<br />}<br />.banner1 a:hover:after {<br />background-color:rgba(0,0,0,0.25);<br />font-size:0.875em;<br />color:#000;<br />text-decoration:none;<br />content: attr(title);<br />left:4%;<br />bottom:3%;<br />width:92%;<br />position:absolute;<br />text-shadow:none;<br />z-index:1;<br />}<br />.banner1 img {<br />margin:4% auto 0;<br />width:125px;<br />height:125px;<br />}<br />.banner1:hover {<br />background:#f1f1f1;<br />-webkit-box-shadow:0px 0px 5px #fff;<br />-moz-box-shadow:0px 0px 5px #fff;<br />-o-box-shadow:0px 0px 5px #fff;<br />-ms-box-shadow:0px 0px 5px #fff;<br />box-shadow:0px 0px 5px #fff;<br />}<br /><br />.kotak-banner {<br />border:2px solid #444;<br />width:300px;<br />margin:0 auto 1.7143em;;<br />padding:2% 0 0 3%;<br />position:relative;<br />overflow:hidden;<br />}<br />.banner {<br />background:#444;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />float:left;<br />width:45.5%;<br />height:135px;<br />margin-right:3%;<br />margin-bottom:4%;<br />text-align:center;<br />-webkit-transition:all 1s ease-in-out;<br />-moz-transition:all 1s ease-in-out;<br />-o-transition:all 1s ease-in-out;<br />transition:all 1s ease-in-out;<br />position:relative;<br />}<br />.banner a:hover:after {<br />text-decoration:none;<br />content: attr(title);<br />position:absolute;<br />left:4%;<br />bottom:3%;<br />font-size:0.875em;<br />width:92%;<br />background-color:rgba(0,0,0,0.15);<br />color:#000;<br />text-shadow:none;<br />z-index:1;<br />}<br />.banner img {<br />margin:4% auto 0;<br />width:125px;<br />height:125px;<br />}<br />.banner:hover {<br />background:#eee;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />-webkit-transform:scale(1.1,1.1);<br />-moz-transform:scale(1.1,1.1);<br />-o-transform:scale(1.1,1.1);<br />-ms-transform:scale(1.1,1.1);<br />transform:scale(1.1,1.1);<br />z-index:5;<br />}<br /><br />.kotak-banner2 {<br />background:#fff;<br />border:2px solid #d4d4d4;<br />width:300px;<br />margin:0 auto 1.7143em;<br />padding:2% 0 0 3%;<br />position:relative;<br />overflow:hidden;<br />}<br />.banner2 {<br />background:#fafafa;<br />-webkit-box-shadow:0px 2px 5px #666;<br />-moz-box-shadow:0px 2px 5px #666;<br />-o-box-shadow:0px 2px 5px #666;<br />-ms-box-shadow:0px 2px 5px #666;<br />box-shadow:0px 2px 5px #666;<br />float:left;<br />width:45.5%;<br />height:135px;<br />margin-right:3%;<br />margin-bottom:4%;<br />text-align:center;<br />-webkit-transition:all 0.5s linear;<br />-moz-transition:all 0.5s linear;<br />-o-transition:all 0.5s linear;<br />transition:all 0.5s linear;<br />position:relative;<br />-webkit-transform: rotate(-2deg);<br />-moz-transform: rotate(-2deg);<br />-o-transform: rotate(-2deg);<br />-ms-transform: rotate(-2deg);<br />transform: rotate(-2deg);<br />}<br />.banner2:nth-child(even) {<br />-webkit-transform: rotate(4deg);<br />-moz-transform: rotate(4deg);<br />-o-transform: rotate(4deg);<br />-ms-transform: rotate(4deg);<br />transform: rotate(4deg);<br />}<br />.banner2:nth-child(3n) {<br />-webkit-transform: none;<br />-moz-transform: none;<br />-o-transform: none;<br />-ms-transform: none;<br />transform: none;<br />position:relative;<br />}<br />.banner2:nth-child(4n) {<br />-webkit-transform: rotate(-4deg);<br />-moz-transform: rotate(-4deg);<br />-o-transform: rotate(-4deg);<br />-ms-transform: rotate(-4deg);<br />transform: rotate(-4deg);<br />}<br />.banner2 a:hover:after {<br />text-decoration:none;<br />content: attr(title);<br />position:absolute;<br />left:4%;<br />bottom:3%;<br />font-size:0.875em;<br />width:92%;<br />background-color:rgba(0,0,0,0.25);<br />color:#000;<br />text-shadow:none;<br />z-index:1;<br />}<br />.banner2 img {<br />margin:4% auto 0;<br />width:125px;<br />height:125px;<br />}<br />.banner2:hover {<br />background:#fafafa;<br />box-shadow:2px 4px 5px #333;<br />-webkit-transform:scale(1.1,1.1);<br />-moz-transform:scale(1.1,1.1);<br />-o-transform:scale(1.1,1.1);<br />-ms-transform:scale(1.1,1.1);<br />transform:scale(1.1,1.1);<br />position: relative;<br />z-index: 5;<br />}<br /></style>

Posted by Hii Sekai

Tips SEO pada Blogger.com Bagian Kedua

<p>Ok! Kita akan lanjut pada ulasan tentang SEO. Perlu menjadi catatan penting bahwa posting ini merupakan kelanjutan posting sebelumnya. So, jika Anda terlewat untuk membacanya, saya menyediakan link untuk meloncat ke posting <a href="http://optimasi-blog.blogspot.com/2011/09/tips-search-engine-optimization-seo.html">Tips Search Engine Optimization (SEO) pada Blogger.com</a> sebelumnya.</p><a name='more'></a> <h3>Men-submit Blog ke Perkakas Webmaster</h3> <p>Tentu kita tidak asing lagi dengan yang namanya perkakas web. Betul, <strong>perkakas webmaster</strong> merupakan salah satu layanan google yang memungkinkan kita untuk mengoptimalkan blog agar terindeks dengan baik. Bagaimana caranya dapat anda baca pada posting <a href="http://optimasi-blog.blogspot.com/2009/03/submit-sitemap-bloggercom-di-google.html">Submit Sitemap Blogger.com di Google Webmaster Tools</a> dan <a href="http://optimasi-blog.blogspot.com/2010/06/solusi-submit-sitemap-di-webmaster.html">Solusi Submit Sitemap di Webmaster Tools</a>.</p><p>Update (<span class="updated">27 September 2012</span>): cara men-submit situs web atau blog di tiga mesin pencari dapat dibaca pada posting <a href="http://optimasi-blog.blogspot.com/2012/09/mendaftarkan-situs-web-atau-blog-ke.html">Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing</a>.</p><h3>Link Building</h3> <p><a href="http://optimasi-blog.blogspot.com/2009/05/tips-menaikkan-serp-dengan-link.html">Link building</a> merupakan usaha untuk membangun tautan dengan menggunakan kata-kata yang mengandung <em>keyword</em> <span class="amp">&</span> sesuai dengan tema blog. Tautan dengan kata atau frase kata yang mengandung kata kunci berarti memperjelas target tema yang telah ditetapkan, sedangkan sesuai dengan tema dapat berati bahwa tautan-tautan tersebut mempertahankan tradisi kata kunci utama blog dalam <em>search engine</em>. Terkadang kita keliru mengartikan link building sebagai mengumpulkan tautan sebanyak-banyaknya tanpa mengindahkan <a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-kualitas-link-dalam-blog.html">kualitas dari kata kunci</a> maupun web/blog yang kita beri tautan (sumber tautan).</p> <p>Berikut merupakan daftar yang seharusnya kita lakukan dalam membangun tautan yang baik.</p> <ul><li>Menautkan kata kunci yang sesuai pada posting satu dengan lainnya dalam blog. Ini sesuai dengan posting tips SEO sebelumnya pada tahapan “Membuat Posting dengan hati SEO”.</li> <li>Kata kunci pada tautan seharusnya menggambarkan dengan jelas tentang apa yang ditautkannya dengan sumber tautan. Dalam bahasa sederhana mungkin dapat dikatakan bahwa kata-kata dalam <em>link</em> menggambarkan sumber <em>link</em> tersebut. Contoh: <ul style="list-style:none;margin-bottom:0.75em;margin-top:0.75em"><li>Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [<span style="color:blue">link</span>]<span style="color:green">Tips Blogging SEO dalam posting</span>[<span style="color:blue">/link</span>] dan [<span style="color:blue">link</span>]<span style="color:green">SEO dalam Tautan</span>[<span style="color:blue">/link</span>].</li> <li>Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [<span style="color:blue">link</span>]<span style="color:red">di sini</span>[<span style="color:blue">/link</span>] dan [<span style="color:blue">link</span>]<span style="color:red">di sana</span>[<span style="color:blue">/link</span>].</li></ul> Berdasarkan contoh di atas, manakah menurut Anda tautan yang lebih ber-kualitas?</li> <li>Sesekali buatlah sedikit ulasan (<em>review</em>) tentang sumber tautan yang berasal dari web/blog lain. Hal tersebut terkadang mendapat respon positif dari sang empu-nya tautan. Coba bayangkan, jika sumber tautan tetrtarik dengan <em>review</em> kita <span class="amp">&</span> kemudian membalas dengan tautan yang mengarah ke posting di blog kita. Bukankah hal tersebut lebih positif dibandingkan dengan “meminta” ditautkan?</li> <li>Berkenaan dengan poin di atas, bagaimana web/blog lain akan tahu tentang isi posting kita, jika mereka tidak diberitahu. Banyak cara untuk menuju ke sana, salah satu jalan yang cukup ampuh adalah meninggalkan komentar yang relevan serta memiliki bobot dengan posting yang telah dibaca. Memang tidak akan menimbulkan banyak pengaruh di <em>search engine</em>, tetapi jika komentar kita tersebut berguna, maka secara tidak langsung pemilik web/blog <span class="amp">&</span> pengguna lain akan tertarik untuk mengunjungi blog kita.</li> <li>Sebuah blog akan memiliki nilai tersendiri dalam <em>search engine</em>, jika <em>link</em> yang keluar lebih banyak daripada <em>link</em> yang masuk. Dan akan lebih besar lagi nilainya, jika <em>link</em> yang keluar ditaut oleh web/blog yang memiliki kesamaan tema. Jangan pula karena ingin menghindari link yang masuk, maka posting yang seharusnya bersumber pada posting lain, malah tidak mencantumkan tautan sumber tersebut. Ingat! kita telah melakukan <em>repost</em>, sehingga menjadi sebuah keharusan jika kita mencantumkan tautan sumber. Ironisnya lagi, kita telah mencantumkan tautan sumber, tetapi tautan tersebut memiliki properti <code>rel="nofollow"</code>. Pernahkan Anda berpikir, seseorang mungkin butuh berhari-hari untuk menyempurnakan postingnya?</li> <li>Mana yang lebih dominan, sebuah tautan yang me-link ke web/blog kita atau me-link ke posting kita? Mari kita diskusikan ini pada kolom komentar.</li> <li>Tautkan blog <span class="amp">&</span> posting dengan beberapa <em><a href="http://optimasi-blog.blogspot.com/2009/03/meningkatkan-trafik-blog-melalui-blog.html">blog directory</a></em>, <em>social network</em> dan <em>social bookmarking</em>. <strong>Pembaharuan (04 Desember 2012)</strong>: Terutama yang memberikan layanan berkualitas dan tidak mengharuskan pranala timbal balik.</li> <li>Jangan lupa, tautkan pula blog <span class="amp">&</span> posting ke layanan feed. Tidak jarang narablog menemukan posting yang dia cari pada layanan ini. Untuk Blogger.com dapat menggunakan fasilitas <strong>feedburner</strong>, silakan membuka kembali posting terdahulu tentang <a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-rss-feed.html">Apa itu RSS FEED</a> dan <a href="http://optimasi-blog.blogspot.com/2009/03/bagaimana-cara-berlangganan.html">Cara berlangganan</a>.</li></ul> <h3>Tetaplah memposting dengan hasil karya orisinil Anda</h3> <p><em>Yah</em>, ini merupakan langkah yang pasti dan akurat. <em>Search engine</em> akan lebih menghargai sebuah karya yang original. Bukan saja mesin saya kira, narablog pun pasti menghargainya. Apalagi karya tersebut memiliki alur yang jelas, mudah untuk dipahami <span class="amp">&</span> nyaman untuk dibaca. Tentu, karya yang dimaksud adalah tentang tulisan atau catatan kita di blog. Orisinil bukan berarti melakukan modifikasi kata-kata di sana-sini agar posting yang akan diterbitkan tampak berbeda dengan posting yang kita ‘contek’. Tetapi lebih kepada <strong>asal ide</strong>. Anda memiliki sebuah ide yang mungkin berbeda, tuangkanlah ide itu dalam suatu bentuk tulisan (posting/artikel).</p> <blockquote><p>Saya mempunyai sebuah ide, tapi ide tersebut melenceng dari tema blog saya. Bagaimana sebaiknya?</p></blockquote> <p>Wow, sebuah pertanyaan yang sulit. Terus terang saya sendiri mungkin belum/tidak menemukan jawaban yang tepat untuk masalah ini—ada, tetapi hasil meraba-raba. <strong>Bagaimana dengan Anda?</strong></p>

Posted by Hii Sekai

Tips Search Engine Optimization (SEO) pada Blogger.com

<p>Terlebih dulu saya mengucapkan terima kasih kepada Saudara <strong>Indra (arek raos)</strong> yang telah memanfaatkan <a href="http://optimasi-blog.blogspot.com/p/contact.html">form kontak</a> untuk menanyakan sesuatu kepada kami. Pertanyaan Anda telah sampai kepada kami <span class="amp">&</span> semoga posting ini menjadi penawarnya.<a name='more'></a> Agar lebih mudah dalam pendeskripsian, <em><a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-search-engine-optimization-seo.html">Search Engine Optimization</a></em> selanjutnya akan kita sebut “<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog.html">SEO</a>”.</p><p>Perlu menjadi catatan bahwa saya bukan pakar SEO atau sejenisnya, namun hanya sebagai perpanjangan tangan informasi yang pernah didapat melalui berbagai sumber. Pokok bahasan ini kita batasi tentang pemanfaatan SEO pada Blogger.com <span class="amp">&</span> jika terdapat beberapa kejanggalan atau pendapat yang berbeda, dapat kita diskusikan bersama pada kolom komentar.</p><h3>Kenali Blog Anda, sebelum Anda ‘menyentuh’ SEO</h3><p>Sebelum melangkah lebih jauh, sebaiknya kita terlebih dulu kenal dengan blog yang kita kelola. Blog tersebut akan banyak bercerita tentang apa? komputer, internet, tutorial, desain web, cerpen, puisi, atau hal-hal yang lain. Artinya disini kita perlu sebuah tema yang akan kita angkat dalam bentuk catatan di web. Apabila sebuah blog memiliki tema tertentu, maka <em>the next step</em> akan lebih mudah untuk melakukan kustomisasi SEO.</p><p>Pemilihan tema yang tepat, akan menghasilkan sasaran yang tepat pula. Dengan syarat, kita selalu mempertimbangkan pesaing (kompetitor) yang memiliki tema serupa. Semakin umum sebuah tema, maka semakin banyak terbuka peluang untuk saling berkompetisi.<em>Yah</em>, tentu saja dengan sasaran yang lebih banyak pula. Sebaliknya, tema yang lebih khusus menyebabkan kompetisi akan berkurang <span class="amp">&</span> sasaran akan semakin sedikit.</p><p>Jika kita membuat blog untuk jangka waktu yang panjang sebaiknya pemilihan tema bisa lebih khusus, bahkan sangat khusus. Tinggal usaha kita untuk mempopulerkan tema tersebut agar dapat diterima oleh orang lain, terutama insan <em>online</em>. Anda tidak memiliki waktu sepanjang itu, maka bersiap-siaplah dengan tantangan para kompetitor yang sudah barang tentu berusaha untuk tampil menjadi nomor 1 (satu) dalam halaman hasil pencarian pada setiap mesin pencari. <em>It's Your Choice</em>.</p><h3>Optimalisasi Template agar lebih SEO <em>Friendly</em></h3><p>Pada tahap ini, pengetahuan <span class="amp">&</span> pemahaman tentang koding sangat dibutuhkan. Bagaimana kalau di “copas” saja? Saya tidak menyalahkan langkah tersebut, tetapi ketika suatu pengkodean dari web/blog sumber ada yang keliru—mungkin disebabkan oleh ke-khilaf-an <em>author</em> ketika menulis—tentu kode kita akan menjadi keliru pula.</p><p>Adapun secara garis besar langkah-langkah SEO pada tahap ini, antara lain:</p><ul><li>Usahakan kata kunci utama berada pada posisi pembuka <span class="amp">&</span> penutup blog. Sebagai pembuka berarti berkenaan dengan kepala (<em>header</em>), sedangkan penutup berkenaan dengan kaki (<em>footer</em>) blog.</li><br /><li>Merubah markup title <pre><code><title><data:blog.pageTitle/></title></code></pre>menjadi <pre><code><b:if cond='data:blog.homepageUrl == data:blog.url'><br /><title><data:blog.title/></title><br /><b:else/><br /><title><data:blog.pageName/> | <data:blog.title/></title><br /></b:if></code></pre>Arti dari markup di atas lebih kurang seperti ini, <q>jika yang ditampilkan adalah halaman posting, maka <em>title</em> blog adalah judul posting diikuti dengan <em>title</em> blog. <q>Jika tidak, maka <em>title</em> blog adalah <em>title</em> blog itu sendiri</q></q>.</li><br /><li>Menambah <a href="http://optimasi-blog.blogspot.com/2009/03/memasang-meta-tags-dan-manfaatnya.html">meta tag</a>, letakkan saja di bawah title seperti pada point di atas. <pre><code><meta content='<span style="color:red">deskripsi tentang blog Anda</span>' name='description'/><br /><meta content='<span style="color:red">keyword1,keyword2,keyword3,…</span>' name='keywords'/><br /><meta content='INDEX, FOLLOW' name='robots'/></code></pre><p>Update (<span class="updated">27 September 2012</span>): Lihat simpulan pada posting <a href="http://optimasi-blog.blogspot.com/2012/09/kustomisasi-setelan-pada-preferensi.html">Kustomisasi Setelan pada Preferensi Penelusuran</a>.</p></li><br /><li>Kustomasi kata kunci pada <em>footer</em> blog, contoh: <pre><code><p style="font-weight:bold">kata kunci blog Anda</p></code></pre>Atau Anda dapat berkreasi dengan gaya lain, seperti menambahkan kata kunci pada <em>copyright</em> <span class="amp">&</span> sebagainya.</li><br /><li>Kustomisasi (X)HTML ((eXtensible) HyperText Markup Language) pada atribut <code>main</code>, widget id <code>Blog1</code>. Custom yang dilakukan pada area ini dapat berupa: pengaturan heading (<code>h1</code> sampai <code>h6</code>), paragraf, ordered list <span class="amp">&</span> unordered list, dan sebagainya. Dengan harapan posting kita akan tampak lebih semantik—bukan hanya sekedar memberikan tanda—namun lebih jauh akan memberikan suatu makna tersendiri bagi pembaca (mendukung keterbacaan).</li><br /><li>Mengatur template agar <em>user friendly</em>. Buang widget-widget yang dirasa tidak perlu untuk ditampilkan. Minimal sebuah blog berisikan elemen-elemen identitas blog, posting, alur waktu yang terurut, arsip, <span class="amp">&</span> formulir komentar.</li><br /><li>Mengatur posisi kode elemen <code>main</code> (bagian posting) di atas kode <code>sidebar</code>. Jika kita pernah melihat posisi sidebar berada di sebelah kiri, bukan berarti kode elemen <code>main</code> (bagian posting) berada di bawah kode sidebar. Nah, ini yang saya maksud bahwa kita perlu mempelajari <span class="amp">&</span> memahami pengkodean, baik CSS (Cascading Style Sheets) maupun HTML (HyperText Markup Language).</li><br /></ul><h3>Membuat Posting dengan hati SEO</h3><p>Mungkin kedengaran agak asing. Anda telah memiliki suatu tema <span class="amp">&</span> usahakan tema tersebut sebagai acuan untuk membuat posting. Ilustrasi, ketika Anda mengikuti upacara bendera, bertepatan pada saat itu bendera merah putih akan dinaikkan. Lagu apa yang Anda dengar? Betul, “Indonesia Raya” <span class="amp">&</span> bukan lagu “Balonku Ada Lima”.</p><p>Sampai ke tahap ini, Anda sama sekali belum berhadapan langsung dengan yang namanya SEO. Why? Karena kita akan mencoba untuk menyentuhnya terlebih dulu. Aktivitas yang akan kita lakukan pada tahap ini meliputi:</p><ul><li>Membuat posting buah karya sendiri yang sesuai dengan tema blog. Setidak-tidaknya blog telah dipersiapkan dengan posting sejumlah 7–10 postingan.</li><br /><li>Posting sebaiknya menggunakan bahasa Indonesia yang baik. Tidak ada salahnya, bukan? Pengunjung bukan hanya berasal dari negara asal penulis, sehingga tindakan ini dapat menjadi antisipasi ke-salahtafsir-an berbagai fitur penterjemah. Terkecuali Anda memiliki target pembaca tertentu.</li><br /><li>Usahakan posting seakan-akan mengajak pembaca untuk berinteraksi di dalamnya. Tidak mencari pembenaran, tetapi mencari kebenaran atas suatu pokok bahasan yang diuraikan. Sulit? Rajin-rajinlah membaca karya orang lain, bukan untuk di “copas” tetapi untuk dipelajari tata bahasa, irama, dan struktur bacaannya.</li><br /><li>Posting bukan hanya dinikmati oleh diri sendiri, namun lebih luas mencakup seluruh aspek, Anda, pembaca, dan mesin. Mesin? <em>Yah</em>, jika mesin tidak dapat membaca, bagaimana halaman blog kita muncul pada hasil pencarian.</li><br /><li>Tambahkan <code>alt</code> pada image (gambar) yang <em>include</em> dalam postingan, karena gambar tidak dapat dibaca. Nah, dengan menambahkan <code>alt</code> dalam markup image, kita memberikan alternatif teks yang dapat memaknai arti gambar tersebut.</li><br /><li>Tautkan posting dengan posting lain, jika terdapat keterkaitan <span class="amp">&</span> hal tersebut dianggap membantu pengunjung untuk memahami bacaannya. Terkadang kita menemui kata atau frase kata yang memiliki tautan tertentu, tetapi seharusnya hal itu tidak perlu dilakukan (dipaksa untuk bertaut). Jangan lakukan tindakan tersebut!</li><br /><li>Jangan menerbitkan posting 4–5 postingan dalam sehari (apalagi lebih), karena kemungkinan blog Anda akan dianggap sebagai SPAM. Lakukanlah penskedulan posting, walaupun kita dapat menulis 10 posting dalam sehari. Posting terjadwal dapat berarti mengatur tanggal terbit posting. Anda dapat menemukannya pada saat membuat posting <span class="amp">&</span> memilih opsi posting (“Post Options”) tepat berada di bawah form editor (penulisan posting).</li><br /><li>Mungkin ada sebagian yang berpendapat, memberikan tanda-tanda tertentu pada teks yang menjadi kata kunci akan meningkatkan SEO, seperti memberi huruf tebal (<em>bold</em>), miring (<em>italic</em>), pewarnaan yang berbeda (<em>color</em> dan/atau <em>background</em>), dan sebagainya.</li><br /></ul><h3>Mendaftarkan Blog ke beberapa Mesin Pencari</h3><p>Setelah kita melakukan beberapa tahapan seperti di atas, maka mulailah kita berhadapan dengan SEO. Kita telah memiliki senjata, amunisi yang cukup, dan perangkat pendukung. Bagaimana cara mendaftarkan blog ke beberapa mesin pencari? Anda dapat membaca pada posting sebelumnya, seperti: mendaftar di <a href="http://optimasi-blog.blogspot.com/2009/03/cara-mendaftarkan-blogger-di-google.html">google</a>, <a href="http://optimasi-blog.blogspot.com/2009/03/cara-mendaftar-blogger-di-search-engine.html">yahoo</a>, dan <a href="http://optimasi-blog.blogspot.com/2009/06/search-engine-baru-dari-microsoft.html">bing</a></p><p><mark>Update (07 Nopember 2012)</mark>: Untuk cara mendaftarkan situs web atau blog ke beberapa mesin penelusur lihat pada posting <a href="http://optimasi-blog.blogspot.com/2012/09/mendaftarkan-situs-web-atau-blog-ke.html">Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing</a>.</p><h3>Generalisasi</h3><p>Berdasarkan pokok bahasan di atas, mungkin ini hanya merupakan <strong>tahap awal</strong> untuk mengoptimalkan sebuah blog dalam mesin pencari. Kita pun belum bisa mengetahui secara pasti hasil pencarian setelah melakukan tahapan-tahapan tersebut. Bukan hanya berhubungan dengan kompetitor, tetapi terkait pula pada relevansi sebuah blog yang dikategorikan masuk dalam daftar pencarian serta—mungkin—umur blog. Namun yang pasti, kita telah melakukan usaha SEO pada blog kita. Terlepas dari itu semua, ini merupakan posting permulaan untuk memperkaya pengetahuan kita tentang langkah demi langkah menuju SEO <span class="amp">&</span> tidak menutup kemungkinan akan terbit artkel lain yang menjadi kelanjutannya. <em>Keep your eyes on Optimasi Blog</em>.</p><blockquote><p>Ingat! <strong>Tema</strong>, <strong>deskripsi</strong>, dan <strong>keyword</strong> haruslah sesuai dengan apa terkandung dalam blog kita. Jangan menggunakan manipulasi apapun terhadap unsur-unsur yang saya beri huruf tebal. Pembaca akan senang jika ketiga unsur tersebut sesuai dengan apa yang dia pindai di dalam blog kita. Sebaliknya, ketidak-sesuaian akan mengundang pembaca untuk meninggalkan kesan antipati.</p><footer class="author">admin quote</footer></blockquote>

Posted by Hii Sekai