Oto Website

Mengganti Tulisan Poskan Komentar Dengan Gambar Keren

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KFgBdLjOgUMc8-zCppYGVSqym5DvjtQ7jcPIvxK1Ars7JqSPG3s5JcngGYj2HZSkbXltywgQ04wyKNGOoBe-HLbm5YoFnhloegNdbV2MjepNNiCtdomng9LDBqLF8BV5Z3HkiILzgw/s1600/Comment.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KFgBdLjOgUMc8-zCppYGVSqym5DvjtQ7jcPIvxK1Ars7JqSPG3s5JcngGYj2HZSkbXltywgQ04wyKNGOoBe-HLbm5YoFnhloegNdbV2MjepNNiCtdomng9LDBqLF8BV5Z3HkiILzgw/s1600/Comment.png" /></a></div>Di Tutorial ini saya akan menunjukkan kepada Anda Bagaimana mengubah / menghapus / mengganti teks "Post a Comment" atau "Poskan Komentar" Dengan Gambar Keren. 
Saya akan memberikan beberapa gambar yang dapat Anda gunakan atau Anda dapat menambahkan gambar Anda sendiri. 
 
Sebelumnya saya pernah membahas <a href="http://otowebsite.blogspot.com/2012/06/mengganti-tulisan-poskan-komentar-pada.html" target="_blank">Mengganti Tulisan Poskan Komentar Pada Blog</a>. 
Mungkin tidak perlu berlama-lama lagi silahkan ikuti tutorial berikut untuk mulai Mengganti Tulisan Poskan Komentar Dengan Gambar Keren. 
 
<hr color="#3e81c4" />Mengganti Tulisan Poskan Komentar Dengan Gambar Keren 
<hr color="#3e81c4" /> 
1. Pergi ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Lalu centang <input checked="" id="expandWidgets" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; font-size: small; margin: 0px 2px 4px; padding: 0.2em 0.4em;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
 
4. Untuk Mengganti Tulisan Poskan Komentar Pada Blog sekarang dalam Edit HTML temukan kode: 
 
<blockquote class="tr_bq"><data:postCommentMsg/></blockquote> 
Bila kesulitan mencari Kode HTML klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
5. Bila sudah ketemu sekarang ganti kode tersebut dengan salah satu kode berikut: 
 
<blockquote class="tr_bq">Bila Anda menemukan kode tersebut lebih dari satu makan cukup ganti kode yang pertama, atau anda juga bisa mengganti semuanya.</blockquote> 
<hr color="#3e81c4" />Picture Post Comments 
<hr color="#3e81c4" /> 
Di sini kita berbagi beberapa koleksi Picture Post Comments yang keren yang dikumpulkan oleh  Wanti . Anda juga dapat mengedit kode dan mengubahnya sebagai Picture Post Comments. 
 
Sample 1 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNVy0gNLHsueOkdb9SYXvdPd6Ufdv-GsIhGf_ABiDwGZUThPD4yVOo6Ufd8CQ1EfmdZ2tQATzXbdlRvdk77_3G8liFRgAgrElmg28WCt6Ir_300Ac0E0J9Yk06ILPn9f9w2EoYxXdvw/s1600/ow-kom1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNVy0gNLHsueOkdb9SYXvdPd6Ufdv-GsIhGf_ABiDwGZUThPD4yVOo6Ufd8CQ1EfmdZ2tQATzXbdlRvdk77_3G8liFRgAgrElmg28WCt6Ir_300Ac0E0J9Yk06ILPn9f9w2EoYxXdvw/s1600/ow-kom1.png" /></a></div><blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNVy0gNLHsueOkdb9SYXvdPd6Ufdv-GsIhGf_ABiDwGZUThPD4yVOo6Ufd8CQ1EfmdZ2tQATzXbdlRvdk77_3G8liFRgAgrElmg28WCt6Ir_300Ac0E0J9Yk06ILPn9f9w2EoYxXdvw/s1600/ow-kom1.png" /></blockquote> 
 
Sample 2 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieCPrb5ppgs1XpDT1xVGGQpm2F5n5v5sqnbCJhz2mcJZygiO6k3u1U5STPcLewGBRwXHRcvQxqLukuGEmBp4q3-hfNxussZSxA92MMJYu6PeiY0w2U84LqxHoVsrQ-Ce2u9LBw81-Gg/s1600/ow-kom2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieCPrb5ppgs1XpDT1xVGGQpm2F5n5v5sqnbCJhz2mcJZygiO6k3u1U5STPcLewGBRwXHRcvQxqLukuGEmBp4q3-hfNxussZSxA92MMJYu6PeiY0w2U84LqxHoVsrQ-Ce2u9LBw81-Gg/s1600/ow-kom2.png" /></a></div><blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieCPrb5ppgs1XpDT1xVGGQpm2F5n5v5sqnbCJhz2mcJZygiO6k3u1U5STPcLewGBRwXHRcvQxqLukuGEmBp4q3-hfNxussZSxA92MMJYu6PeiY0w2U84LqxHoVsrQ-Ce2u9LBw81-Gg/s1600/ow-kom2.png" /></blockquote> 
 
Sample 3 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sRfwJyrUgmzJ7vVh10dhVOb6Iud7jsPijWkE8LuX2MtGAipK7vnRESJKO1FmlaPPPcwS6rbsQYHfLYMjWUz08ytx9Ix2J5_qvuZEAdpT_JLoLSOYX8jimIsmdfvdGFhMm2Wvt16OCQ/s1600/ow-kom3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sRfwJyrUgmzJ7vVh10dhVOb6Iud7jsPijWkE8LuX2MtGAipK7vnRESJKO1FmlaPPPcwS6rbsQYHfLYMjWUz08ytx9Ix2J5_qvuZEAdpT_JLoLSOYX8jimIsmdfvdGFhMm2Wvt16OCQ/s1600/ow-kom3.png" /></a></div> 
<blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sRfwJyrUgmzJ7vVh10dhVOb6Iud7jsPijWkE8LuX2MtGAipK7vnRESJKO1FmlaPPPcwS6rbsQYHfLYMjWUz08ytx9Ix2J5_qvuZEAdpT_JLoLSOYX8jimIsmdfvdGFhMm2Wvt16OCQ/s1600/ow-kom3.png" /></blockquote> 
 
Sample 4 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEnfly4R8a7jxMRUo09cJe8lbzGcTTekgkFlSpoCH8g-qWPrPBWrJO76R7HYlPIxz0kKdzrQj_1GcvKSpZPedE9yaLWWR2fZTa8m_QrCQniIrkI1IwsKwEyb-Z2H3zx6qYQ-tjaQgcA/s1600/ow-kom4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEnfly4R8a7jxMRUo09cJe8lbzGcTTekgkFlSpoCH8g-qWPrPBWrJO76R7HYlPIxz0kKdzrQj_1GcvKSpZPedE9yaLWWR2fZTa8m_QrCQniIrkI1IwsKwEyb-Z2H3zx6qYQ-tjaQgcA/s1600/ow-kom4.png" /></a></div><blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEnfly4R8a7jxMRUo09cJe8lbzGcTTekgkFlSpoCH8g-qWPrPBWrJO76R7HYlPIxz0kKdzrQj_1GcvKSpZPedE9yaLWWR2fZTa8m_QrCQniIrkI1IwsKwEyb-Z2H3zx6qYQ-tjaQgcA/s1600/ow-kom4.png" /></blockquote> 
 
Sample 5 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyCXj08i-yM1VUwWCW56eoBZOJCc_1pvsoK4LtGuzbwB50A2zsazCXmpK4bVJZPmK243b1nU1qPpvQxjX5bTFOWDtq1qF58bdwCFQyEGkUhyphenhyphenWigvV9Gh_QPwazqKlXNLWPw_1s8kK1g/s1600/ow-kom5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyCXj08i-yM1VUwWCW56eoBZOJCc_1pvsoK4LtGuzbwB50A2zsazCXmpK4bVJZPmK243b1nU1qPpvQxjX5bTFOWDtq1qF58bdwCFQyEGkUhyphenhyphenWigvV9Gh_QPwazqKlXNLWPw_1s8kK1g/s1600/ow-kom5.png" /></a></div> 
<blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyCXj08i-yM1VUwWCW56eoBZOJCc_1pvsoK4LtGuzbwB50A2zsazCXmpK4bVJZPmK243b1nU1qPpvQxjX5bTFOWDtq1qF58bdwCFQyEGkUhyphenhyphenWigvV9Gh_QPwazqKlXNLWPw_1s8kK1g/s1600/ow-kom5.png" /></blockquote> 
 
Sample 6 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FKtdXnB-n0JxUhzcDuffVKWguV6eg8jlwTOoVQGx7evkaq-xnH5wwNipN54U9SdzSJTctCkheCQz_UbSK9o7qOlFaYy1TliNcIhAdnAT_H4vXdwB4HZrcIOpq4LlG6ZPDVAoqeWZOQ/s1600/ow-kom6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FKtdXnB-n0JxUhzcDuffVKWguV6eg8jlwTOoVQGx7evkaq-xnH5wwNipN54U9SdzSJTctCkheCQz_UbSK9o7qOlFaYy1TliNcIhAdnAT_H4vXdwB4HZrcIOpq4LlG6ZPDVAoqeWZOQ/s1600/ow-kom6.png" /></a></div><blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FKtdXnB-n0JxUhzcDuffVKWguV6eg8jlwTOoVQGx7evkaq-xnH5wwNipN54U9SdzSJTctCkheCQz_UbSK9o7qOlFaYy1TliNcIhAdnAT_H4vXdwB4HZrcIOpq4LlG6ZPDVAoqeWZOQ/s1600/ow-kom6.png" /></blockquote> 
6. Simpan template. 
 
Sekarang Anda dapat melihat hasilnya pada kotak komentar Blog Anda. 
 
<hr color="#3e81c4" />Menemukan Kesulitan? 
<hr color="#3e81c4" /> 
Bila Anda menemukan kesulitan dalam Mengganti Tulisan Poskan Komentar Dengan Gambar Keren jangan sungkan untuk bertanya saya akan dengan senang hati membantu Anda.

Mengganti Tulisan Poskan Komentar Dengan Gambar Keren

Di Tutorial ini saya akan menunjukkan kepada Anda Bagaimana mengubah / menghapus / mengganti teks "Post a Comment" atau "Poskan Komentar" Dengan Gambar Keren. Saya akan memberikan beberapa gambar yang…

Baca selengkapnya »

31 Jul 2012

Membuat Link Nudging dengan jQuery atau CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mPvY8bDSC3nj4nF6PaVUP6JPhfMJt5IT0HefxUvT9DmvB_WKuGlmZQZg0ubtPU27tj9K12k5OqtJ8TvZ2wxM348AMDpBPX5LLq6RTA9bcCufZJ0KGxsO2jqeCcNzqZHaeiGp8CUXTQ/s1600/photo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mPvY8bDSC3nj4nF6PaVUP6JPhfMJt5IT0HefxUvT9DmvB_WKuGlmZQZg0ubtPU27tj9K12k5OqtJ8TvZ2wxM348AMDpBPX5LLq6RTA9bcCufZJ0KGxsO2jqeCcNzqZHaeiGp8CUXTQ/s640/photo.jpg" width="640" /></a></div>T utorial kali ini saya akan membahas tentang <a href="http://otowebsite.blogspot.com/2012/07/membuat-link-nudging-dengan-jquery-atau.html" target="_blank">Membuat Link Nudging dengan jQuery atau CSS</a>. 
Link nudding adalah link yang menyenggol atau bergoyang bila di sentuh oleh cursor. 
Efek Link Nudging ini akan membuat link di blog Anda menjadi lebih menarik. dalam Membuat Link Nudging kita akan menggunakan bantuan dari jQuery atau CSS jadi Anda harus memilih salah satu cara ingin menggunakan jQuery atau CSS??? Untuk lebih jelasnya tentang Link Nudging silahkan lihat demo berikut. 
 
<div style="text-align: center;">Live Link Nudging Demo ↓</div><div style="text-align: center;"> 
</div><iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/link-nudging.html" style="height: 190px; width: 100%;"></iframe> 
Perlu Anda ketahui sebelumnya Oto Website pernah membahas tentang Link Nudging juga yang berada di article <a href="http://www.otowebsite.blogspot.com/2012/05/cara-membuat-link-bergoyang.html" target="_blank">Cara Membuat Link Bergoyang</a>. 
Jika Anda sudah paham dengan maksud tutorial kali ini mari kita bahas cara membuatnya pada blog Anda. 
Pilih salah satu mana yang ingin Anda gunakan, <a href="http://otowebsite.blogspot.com/2012/07/membuat-link-nudging-dengan-jquery-atau.html" target="_blank">Membuat Link Nudging dengan jQuery atau CSS</a> ? 
 
<hr color="#3e81c4" />Membuat Link Nudging dengan jQuery 
<hr color="#3e81c4" /> 
1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Dalam Edit HTML temukan kode </head> blia kesulitan mencarinya coba klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
4. Bila sudah ketemu sekarang letakkan script jQuery berikut tepat di atas kode kode tadi. 
 
<div class="md7"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> 
</script> 
<script type='text/javascript'> 
var dur = 400; // Duration Of Animation in Milli Seconds 
$(document).ready(function() { 
$('a.ow').hover(function() { 
$(this).animate({ 
paddingLeft: '25px' 
}, dur); 
}, function() { 
$(this).animate({ 
paddingLeft: 0 
}, dur); 
}); 
}); // end of Jquery Script 
</script></div> 
5. Simpan template. 
 
Kode Pemanggil Link Nudging dengan jQuery 
 
Pada saat mengedit postingan masukkan kode berikut: 
 
<blockquote class="tr_bq"><a class='ow' href='http:/otowebsite.blogspot.com'>Oto Website</a></blockquote> 
Keterangan: 
<ul><li>Ganti teks yang di block kuning dengan url tujuan.</li>
<li>Ganti teks yang di block biru dengan nama link.</li>
</ul> 
<hr color="#3e81c4" />Membuat Link Nudging dengan CSS 
<hr color="#3e81c4" /> 
Dalam Membuat Link Nudging dengan CSS ini kita membaginya menjadi dua cara: 
<ul><li>A. Link Nudging Untuk Semua Link (otomatis semua link)</li>
<li>B. Link Nudging Untuk Link Terpilih (kita yang menentukan)</li>
</ul>Jadi silahkan pilih salah satu. 
 
1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Dalam Edit HTML temukan kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
4. Bila sudah ketemu sekarang letakkan salah satu kode CSS berikut tepat di atasnya. 
 
<hr color="#000000" />A. Link Nudging Untuk Semua Link 
<hr color="#000000" /> 
<div class="md4"> 
a:link { 
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out; 
} 
a:hover { 
padding-left: 12px;} 
 
</div> 
5. Simpan template. 
 
<hr color="#000000" />B. Link Nudging Untuk Link Terpilih 
<hr color="#000000" /> 
<div class="md4"> 
.ow { 
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out; 
} 
.ow:hover { 
padding-left: 12px;} 
 
</div> 
5. Simpan template. 
 
Kode Pemanggil Link Nudging dengan CSS Untuk Link Nudging Terpilih (B) 
 
Pada saat mengedit postingan masukkan kode berikut: 
 
<blockquote class="tr_bq"><a class="ow" href="http://otowebsite.blogspot.com">Oto Website</a></blockquote> 
Keterangan: 
<ul><li>Ganti teks yang di block kuning dengan url tujuan.</li>
<li>Ganti teks yang di block biru dengan nama link</li>
</ul> 
<hr color="#3e81c4" />Bagaimana Selanjutnya? 
<hr color="#3e81c4" /> 
Saya rasa cukup untuk kali ini, bila Anda kesulitan dalam <a href="http://otowebsite.blogspot.com/2012/07/membuat-link-nudging-dengan-jquery-atau.html">Membuat Link Nudging dengan jQuery atau CSS</a> silahkan bertanya, saya akan dengan senang hati membantu Anda!!!

Membuat Link Nudging dengan jQuery atau CSS

T utorial kali ini saya akan membahas tentang Membuat Link Nudging dengan jQuery atau CSS. Link nudding adalah link yang menyenggol atau bergoyang bila di sentuh oleh cursor. Efek Link Nudging ini aka…

Baca selengkapnya »

31 Jul 2012

10+ Custom 404 Error Pages Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2C8hyWutNJH2ISqhUYXC6TTeMg5Hr2k5fA01lkfylya-Br6ee9qnVNrXqfhc_-xW2IvdJgSRi-tNkel9fu3GwqWGH9yJkcy9XG3cu-iPJlPgG_ezVx1ZyTzES-wuwy_8sYnkl_8mTYQ/s1600/404-error-ow.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2C8hyWutNJH2ISqhUYXC6TTeMg5Hr2k5fA01lkfylya-Br6ee9qnVNrXqfhc_-xW2IvdJgSRi-tNkel9fu3GwqWGH9yJkcy9XG3cu-iPJlPgG_ezVx1ZyTzES-wuwy_8sYnkl_8mTYQ/s640/404-error-ow.gif" width="640" /></a></div>Sebelumnya Oto Website pernah membahas <a href="http://otowebsite.blogspot.com/2012/07/membuat-404-error-page-di-blogger.html" target="_blank">Membuat 404 Error Page di Blogger</a>, dan untuk kali ini Oto Website akan membahas <a href="http://otowebsite.blogspot.com/2012/07/10-custom-404-error-pages-untuk-blogger.html">10+ Custom 404 Error Pages Untuk Blogger</a>. 
Fitur 404 error page ini sebenarnya sudah lumayan lama di terbitkan oleh Blogger Pencarian Preferensi pilihan untuk blog blogger. Dengan diperkenalkannya preferensi pencarian terbaru mereka memperkenalkan " Kesalahan Dan Pengalihan "di sederhana kita dapat mengatakan" Error 404 "Ini adalah fitur besar blogger yang akan membantu Anda untuk menetapkan Halaman Error 404 kustom. 
Jadi saya memberikan beberapa sampel dari 404 halaman Kesalahan Anda dapat menggunakannya atau Anda dapat menambahkan pengaturan Anda sebelum menambahkan kesalahan 404 custom template yang Anda harus menonaktifkan pesan default oleh 404 blogger. 
 
Dengan Default, halaman Anda Kesalahan Blogger akan menampilkan pesan kesalahan 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8Fx88Qv_7gDvj5nTzIUWVER5i8Q98SaSc_W5nfsKsv-C7s0voXGfzy1Y8kxj_YWZIOXM2E6PX07snkw4N6HVusQ75sApUeZa0zgNVuquwfgw9B1INITzDASl6euzvwRwU_EkKYx7Gg/s1600/zz.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8Fx88Qv_7gDvj5nTzIUWVER5i8Q98SaSc_W5nfsKsv-C7s0voXGfzy1Y8kxj_YWZIOXM2E6PX07snkw4N6HVusQ75sApUeZa0zgNVuquwfgw9B1INITzDASl6euzvwRwU_EkKYx7Gg/s1600/zz.bmp" /></a></div> 
Jika Anda ingin menambahkan pesan khusus maka anda harus menonaktifkan pesan default di atas. 
Untuk menonaktifkan pesan tersebut dengan status default ikuti instruksi di bawah ini: 
 
1. Pergi ke <a href="http://draft.blogger.com/" target="_blank">draft.blogger.com</a>. 
2. Pada Dasbor klick Template ➨ Edit HTML. 
3. Tambahkan kode berikut tepat di atas tag </head> (Bila kesulitan mencarinya klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>.) 
 
<blockquote class="tr_bq"><b:if cond='data:blog.pageType == "error_page"'> 
<style type="text/css"> 
.status-msg-wrap { 
    font-size: 100%; 
    margin: none; 
    position: static; 
    width: 100%; 
} 
.status-msg-border { 
    display:none 
} 
.status-msg-body { 
    padding: none; 
    position: static; 
    text-align: inherit; 
    width: 100%; 
    z-index: auto; 
} 
.status-msg-wrap a { 
    padding: none; 
    text-decoration: inherit; 
} 
</style> 
</b:if></blockquote> 
4. Simpan template. 
 
Anda telah berhasil menonaktifkan pesan default, dan sekarang ikuti langkah selanjutnya untuk membuat Custom 404 Error Pages. 
 
<hr color="#cc0000" />Error 404 Template Kustom 
<hr color="#cc0000" /> 
Di sini kita berbagi beberapa koleksi Custom 404 Error Pages template yang keren yang dikumpulkan oleh  Wanti . Anda juga dapat mengedit kode dan mengubahnya sebagai halaman.Anda dapat menggunakan <a href="http://otowebsite.blogspot.com/2012/07/ow-html-editor.html" target="_blank">HTML Editor</a> untuk melihat live preview dari perubahan Anda. 
 
<ul><li>Sekarang pergi ke Setting.➨ Preferensi penelusuran.</li>
<li>Selanjutnya Anda klick Edit di samping Pesan Khusus untuk Laman Tidak Ditemukan.</li>
<li>Pilih salah satu 404 template di bawah.</li>
<li>Copy kode dan paste di kotak textarea dan simpan.</li>
</ul> 
<hr color="#3e81c4" />Error Page Template 1 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-oTpBaVkluo3bSJAa8gD9FvHI4vnGxRw0Q_J8ixusLdMkc_mE3AiIMkhoWiIhl__dqeCrAZfg3uZAxDxTPbjfVEkqrouJd2E58wGkOwrbvv0B2kNWpOcGZD1P3nZlrF2qE_KYhW3Bw/s1600/ow1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-oTpBaVkluo3bSJAa8gD9FvHI4vnGxRw0Q_J8ixusLdMkc_mE3AiIMkhoWiIhl__dqeCrAZfg3uZAxDxTPbjfVEkqrouJd2E58wGkOwrbvv0B2kNWpOcGZD1P3nZlrF2qE_KYhW3Bw/s1600/ow1.png" /></a></div><div class="separator" style="clear: both; text-align: center;"> 
</div><blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-oTpBaVkluo3bSJAa8gD9FvHI4vnGxRw0Q_J8ixusLdMkc_mE3AiIMkhoWiIhl__dqeCrAZfg3uZAxDxTPbjfVEkqrouJd2E58wGkOwrbvv0B2kNWpOcGZD1P3nZlrF2qE_KYhW3Bw/s1600/ow1.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 2 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-OtGPXivbKMA7Tnw1zqOU8khiRw6M0LGW9pxSN3d_5yZ-CSdwb6G9_X6NSH2yuUz39-l5-L6flgeRLfpaWA-beXGJC1HKJ7l8QREACaBya2O5xcYsJtLqJvwxQpFplQsIkvU0yW9OQ/s1600/ow10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-OtGPXivbKMA7Tnw1zqOU8khiRw6M0LGW9pxSN3d_5yZ-CSdwb6G9_X6NSH2yuUz39-l5-L6flgeRLfpaWA-beXGJC1HKJ7l8QREACaBya2O5xcYsJtLqJvwxQpFplQsIkvU0yW9OQ/s1600/ow10.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"> 
</div><blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-OtGPXivbKMA7Tnw1zqOU8khiRw6M0LGW9pxSN3d_5yZ-CSdwb6G9_X6NSH2yuUz39-l5-L6flgeRLfpaWA-beXGJC1HKJ7l8QREACaBya2O5xcYsJtLqJvwxQpFplQsIkvU0yW9OQ/s1600/ow10.jpg')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 3 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mKRfGYvGbzhHAje37RMgtiS0LgN4g8qWLXrBqBFDadMeZGwVEyoXGbFiUxoWnTdvD0Lpurm9xbY5Qm-d0VtGJHM7dd8dCgpxMPywoF0TU30vfGAEew1LBATg9lcTkw_0yWDrtooIow/s1600/ow11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mKRfGYvGbzhHAje37RMgtiS0LgN4g8qWLXrBqBFDadMeZGwVEyoXGbFiUxoWnTdvD0Lpurm9xbY5Qm-d0VtGJHM7dd8dCgpxMPywoF0TU30vfGAEew1LBATg9lcTkw_0yWDrtooIow/s1600/ow11.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mKRfGYvGbzhHAje37RMgtiS0LgN4g8qWLXrBqBFDadMeZGwVEyoXGbFiUxoWnTdvD0Lpurm9xbY5Qm-d0VtGJHM7dd8dCgpxMPywoF0TU30vfGAEew1LBATg9lcTkw_0yWDrtooIow/s1600/ow11.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 4 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9DENx8ZrxXK-A3sDpUHoQH0QP07qvMOL6OypWAGB1eRkPFGN5IRhfiKnawxC4raJ-4Jwi2U7ATBAp39IFCNEPKFYVj7ypYHstzeQorkm35xHV-jZ6fdY_MJNTJS2xyE430qXAjuj_g/s1600/ow12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9DENx8ZrxXK-A3sDpUHoQH0QP07qvMOL6OypWAGB1eRkPFGN5IRhfiKnawxC4raJ-4Jwi2U7ATBAp39IFCNEPKFYVj7ypYHstzeQorkm35xHV-jZ6fdY_MJNTJS2xyE430qXAjuj_g/s1600/ow12.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9DENx8ZrxXK-A3sDpUHoQH0QP07qvMOL6OypWAGB1eRkPFGN5IRhfiKnawxC4raJ-4Jwi2U7ATBAp39IFCNEPKFYVj7ypYHstzeQorkm35xHV-jZ6fdY_MJNTJS2xyE430qXAjuj_g/s1600/ow12.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 5 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FpTl6iNBs4kykuUtCEzGxBH8fb-neupKnNKPVPAMd_iE61MQxHFoDA45P6131lroSkyipCEAsy5GVbxaoJeenbXPdwCobcy_YtMb0dD1BLAjiRWzF79FRGILT4M8ir0SOOkImf7JeA/s1600/ow2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FpTl6iNBs4kykuUtCEzGxBH8fb-neupKnNKPVPAMd_iE61MQxHFoDA45P6131lroSkyipCEAsy5GVbxaoJeenbXPdwCobcy_YtMb0dD1BLAjiRWzF79FRGILT4M8ir0SOOkImf7JeA/s1600/ow2.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"> 
</div><blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FpTl6iNBs4kykuUtCEzGxBH8fb-neupKnNKPVPAMd_iE61MQxHFoDA45P6131lroSkyipCEAsy5GVbxaoJeenbXPdwCobcy_YtMb0dD1BLAjiRWzF79FRGILT4M8ir0SOOkImf7JeA/s1600/ow2.jpg')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 6 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBEZU9FxwDf3fFFuoVQZzzt2jYZ_2GXh-TCZDYdvKZxeyUVRWqFci-AqdbskfvMAkg1MLQIwhJ3w7kDpPU2gPgHQ161SDYGV1xy_3wdy7SoCQLRnXPGkoIHOZD19Z157j0wJRbndEOw/s1600/ow3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBEZU9FxwDf3fFFuoVQZzzt2jYZ_2GXh-TCZDYdvKZxeyUVRWqFci-AqdbskfvMAkg1MLQIwhJ3w7kDpPU2gPgHQ161SDYGV1xy_3wdy7SoCQLRnXPGkoIHOZD19Z157j0wJRbndEOw/s1600/ow3.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"> 
</div><blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBEZU9FxwDf3fFFuoVQZzzt2jYZ_2GXh-TCZDYdvKZxeyUVRWqFci-AqdbskfvMAkg1MLQIwhJ3w7kDpPU2gPgHQ161SDYGV1xy_3wdy7SoCQLRnXPGkoIHOZD19Z157j0wJRbndEOw/s1600/ow3.jpg')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 7 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kTzE4JR-JHkkOlx7D_TBMNAq5zNMI-1CcbdMTyOK7oLWWgpsGqfjdhfKgdzhpMPsGMaarTSg3cjVIHkxOuKrs9886avpiJ55UHCAw3KHdkgE88SSUKAL6d5en0gqDMHquOx0ISzJLw/s1600/ow4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kTzE4JR-JHkkOlx7D_TBMNAq5zNMI-1CcbdMTyOK7oLWWgpsGqfjdhfKgdzhpMPsGMaarTSg3cjVIHkxOuKrs9886avpiJ55UHCAw3KHdkgE88SSUKAL6d5en0gqDMHquOx0ISzJLw/s1600/ow4.jpg" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kTzE4JR-JHkkOlx7D_TBMNAq5zNMI-1CcbdMTyOK7oLWWgpsGqfjdhfKgdzhpMPsGMaarTSg3cjVIHkxOuKrs9886avpiJ55UHCAw3KHdkgE88SSUKAL6d5en0gqDMHquOx0ISzJLw/s1600/ow4.jpg')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 8 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANn2I1R6YmcjmBNEu5NW6IXoNjtIjXn06sTENUzrX3o5mmmq3HsqS0oQCMA5xc-uBdZnE1g5e7WTDeWbZFugldWHRcH8UFEeyEU43kLBRcrJcPEFXyEMz18Yno9DqXOWSCTzd1sb1uw/s1600/ow5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANn2I1R6YmcjmBNEu5NW6IXoNjtIjXn06sTENUzrX3o5mmmq3HsqS0oQCMA5xc-uBdZnE1g5e7WTDeWbZFugldWHRcH8UFEeyEU43kLBRcrJcPEFXyEMz18Yno9DqXOWSCTzd1sb1uw/s1600/ow5.jpg" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANn2I1R6YmcjmBNEu5NW6IXoNjtIjXn06sTENUzrX3o5mmmq3HsqS0oQCMA5xc-uBdZnE1g5e7WTDeWbZFugldWHRcH8UFEeyEU43kLBRcrJcPEFXyEMz18Yno9DqXOWSCTzd1sb1uw/s1600/ow5.jpg')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 9 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVbQs_PFFcZZwmbKQ-osq5cOVTMcFNPkRpEk7AULrCIQP2a2ECdFSY-UcPI2uAu7IPdOgcanDcRodoNsY0qJnCfB32RbLEjQTROXYO0bEGOIITxwD0QHWxV6FMN78BPV9Kb9Q23Reh1w/s1600/ow6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVbQs_PFFcZZwmbKQ-osq5cOVTMcFNPkRpEk7AULrCIQP2a2ECdFSY-UcPI2uAu7IPdOgcanDcRodoNsY0qJnCfB32RbLEjQTROXYO0bEGOIITxwD0QHWxV6FMN78BPV9Kb9Q23Reh1w/s1600/ow6.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVbQs_PFFcZZwmbKQ-osq5cOVTMcFNPkRpEk7AULrCIQP2a2ECdFSY-UcPI2uAu7IPdOgcanDcRodoNsY0qJnCfB32RbLEjQTROXYO0bEGOIITxwD0QHWxV6FMN78BPV9Kb9Q23Reh1w/s1600/ow6.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 10 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmZ1rAmsoeFD9yKAUUrApqLXxRI3x4GOftNwkRZWAgWOqJtzzKA9ueGgscEdAB5ySJ09i8RuwmNaHBT48A4-MhaKsWX30hJFjsGRyiVAEqW5yc6OIpP5Bsoah6KRZmzQCEqM27rL1aA/s1600/ow7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmZ1rAmsoeFD9yKAUUrApqLXxRI3x4GOftNwkRZWAgWOqJtzzKA9ueGgscEdAB5ySJ09i8RuwmNaHBT48A4-MhaKsWX30hJFjsGRyiVAEqW5yc6OIpP5Bsoah6KRZmzQCEqM27rL1aA/s1600/ow7.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmZ1rAmsoeFD9yKAUUrApqLXxRI3x4GOftNwkRZWAgWOqJtzzKA9ueGgscEdAB5ySJ09i8RuwmNaHBT48A4-MhaKsWX30hJFjsGRyiVAEqW5yc6OIpP5Bsoah6KRZmzQCEqM27rL1aA/s1600/ow7.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 11 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1ZRp-WjBW-g97f-n4YxnP4sGTOV8Df9My1afNy6ARmN1QvHKcezXgh6d_jgrUurESuZ0zotif_bJXj-ZdMMiUyZ9IqdD0Xqo2SBicRWRBYzgzHlO68-7nphovgDhLGFTwott_OkyUg/s1600/ow8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1ZRp-WjBW-g97f-n4YxnP4sGTOV8Df9My1afNy6ARmN1QvHKcezXgh6d_jgrUurESuZ0zotif_bJXj-ZdMMiUyZ9IqdD0Xqo2SBicRWRBYzgzHlO68-7nphovgDhLGFTwott_OkyUg/s1600/ow8.png" /></a></div><div class="separator" style="clear: both; text-align: center;"> 
</div><blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1ZRp-WjBW-g97f-n4YxnP4sGTOV8Df9My1afNy6ARmN1QvHKcezXgh6d_jgrUurESuZ0zotif_bJXj-ZdMMiUyZ9IqdD0Xqo2SBicRWRBYzgzHlO68-7nphovgDhLGFTwott_OkyUg/s1600/ow8.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
<hr color="#3e81c4" />Error Page Template 12 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDMz42wDpmz_k9TesMNNjXBLqt7pLnXBPs5c4ZogKmkrk0nXYm52L4cchDUM713mSGpFV2Dto810h0shZEYDMasheIa5J2J8QvCzGglYE3Br_SNQCOhB14eL1v9fB7w4pvYDhoNa9hQ/s1600/ow9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDMz42wDpmz_k9TesMNNjXBLqt7pLnXBPs5c4ZogKmkrk0nXYm52L4cchDUM713mSGpFV2Dto810h0shZEYDMasheIa5J2J8QvCzGglYE3Br_SNQCOhB14eL1v9fB7w4pvYDhoNa9hQ/s1600/ow9.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css" > 
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDMz42wDpmz_k9TesMNNjXBLqt7pLnXBPs5c4ZogKmkrk0nXYm52L4cchDUM713mSGpFV2Dto810h0shZEYDMasheIa5J2J8QvCzGglYE3Br_SNQCOhB14eL1v9fB7w4pvYDhoNa9hQ/s1600/ow9.png')  50% 0% no-repeat !important;z-index:10000000;} 
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} 
body {min-width: 0px !important;} 
</style></blockquote> 
Sekarang Anda bisa melihat hasilnya, coba anda ketik url pada pada blog Anda yang tidak ada. 
 
Jika Anda mengalami kesulitan dalam penerapan article di atas jangan sungkan untuk bertanya, karna saya ada disini.

10+ Custom 404 Error Pages Untuk Blogger

Sebelumnya Oto Website pernah membahas Membuat 404 Error Page di Blogger, dan untuk kali ini Oto Website akan membahas 10+ Custom 404 Error Pages Untuk Blogger. Fitur 404 error page ini sebenarnya sud…

Baca selengkapnya »

30 Jul 2012

OW - HTML Editor

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jSq2effYTFub_Mm9NsCjY_vRCMtmmSKt8xdqueWyDn_MkKRMddnRC7VAU5I6Y-bG2SSoiQ4cF4i0fAlbw-mwF8JesCyfpvfJ_HE-JjF8d4mBrqA1dtoPmhikxYzIV7_AdX7Ru3Yf8g/s1600/html+editor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jSq2effYTFub_Mm9NsCjY_vRCMtmmSKt8xdqueWyDn_MkKRMddnRC7VAU5I6Y-bG2SSoiQ4cF4i0fAlbw-mwF8JesCyfpvfJ_HE-JjF8d4mBrqA1dtoPmhikxYzIV7_AdX7Ru3Yf8g/s640/html+editor.jpg" width="640" /></a></div>OW - HTML Editor adalah aplikasi perangkat lunak atau alat untuk membuat halaman web . Meskipun HTML markup dari suatu halaman web dapat ditulis dengan editor teks , khusus HTML editor dapat menawarkan kenyamanan dan menambahkan fungsionalitas. Misalnya, banyak HTML editor bekerja tidak hanya dengan HTML, tetapi juga dengan teknologi terkait seperti CSS , XML dan JavaScript atau ECMAScript . Dalam beberapa kasus mereka juga mengelola komunikasi dengan web server remote melalui FTP dan WebDAV , dan sistem manajemen versi seperti CVS atau Subversion . 
 
Dan untuk kali ini saya membagikan alat yang biasa saya gunakan agar Anda juga bisa lebih belajar tentang HTML dan bisa turut menikmatinya, tool kali ini bernama OW - HTML Editor. 
Tekan tombol di bawah ini untuk menggunakan OW - HTML Editor. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/HTML%20Editor.html" target="_blank">OW - HTML Editor</a></div> 
Silahkan Anda berkresai sendiri untuk menggunakan OW - HTML Editor, gunakan OW - HTML Editor tersebut dengan bijak!

OW - HTML Editor

OW - HTML Editor adalah aplikasi perangkat lunak atau alat untuk membuat halaman web . Meskipun HTML markup dari suatu halaman web dapat ditulis dengan editor teks , khusus HTML editor dapat menawarka…

Baca selengkapnya »

29 Jul 2012

Tema Batik Untuk Twitter atau Situs

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQ_NtWcXLaXmAWHEt56n5VtbOdote4mtEkIFyTAZUSu2ykDAzeSYI5K5OIhMSUm7uyyFJ8IVbckuaqTDgmsES7fxhXqEz_bHAMjgVI3xmJS9Z0D-9uw3THELdWjd0VFsDw1wQuOlCNQ/s1600/free-twitter-background-beautiful-batik.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQ_NtWcXLaXmAWHEt56n5VtbOdote4mtEkIFyTAZUSu2ykDAzeSYI5K5OIhMSUm7uyyFJ8IVbckuaqTDgmsES7fxhXqEz_bHAMjgVI3xmJS9Z0D-9uw3THELdWjd0VFsDw1wQuOlCNQ/s640/free-twitter-background-beautiful-batik.jpg" width="640" /></a></div>Dalam latar belakang twitter tema gratis, kita menggunakan "Batik" seni untuk gaya latar belakang twitter. Batik adalah salah satu seni tradisional khas Indonesia. Ini seperti pola tetapi lebih unik. 
Desain latar belakang twitter datang dengan 2 gaya batik yang berbeda dan 4 warna kustom dalam setiap gaya, memberi Anda kebebasan untuk memilih dan membuat latar belakang twitter Anda terlihat indah. 
 
Fitur 
<ol><li>Latar belakang batik yang indah.</li>
<li>Dua gaya tema yang berbeda</li>
<li>Empat kustom warna dalam setiap gaya</li>
<li>Cocok untuk resolusi populer 1024, × 768 1280 × 1024, 1680 × 1050 dan 2000 × 1920</li>
</ol>Preview 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUvhLWhS8WIshEf063s1lu1KEqfkP9_YBgeyNGZyCxxxfcoQp_N4dcD9hhQZyo0JRxzwV5SMCfaX8kFz2D-e_p9j8m2vCkRxT1ZV6nhenJWr_KITXu8dCpSUjhZel-LoxFvjqpIZYMQ/s1600/previewtwitt.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="470" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUvhLWhS8WIshEf063s1lu1KEqfkP9_YBgeyNGZyCxxxfcoQp_N4dcD9hhQZyo0JRxzwV5SMCfaX8kFz2D-e_p9j8m2vCkRxT1ZV6nhenJWr_KITXu8dCpSUjhZel-LoxFvjqpIZYMQ/s640/previewtwitt.jpg" width="640" /></a></div> 
<div style="text-align: center;"><a class="button" href="http://www.ziddu.com/download/20010616/beautiful-batik-twitter-background.rar.html">Unduh Tema Twitter</a></div> 
Disini ada 8 tema, untuk mengunduh silahkan klick tombol di atas.Silahkan Anda upload dan pasang di twitter atau bisa juga untuk tema blog/situs Anda.

Tema Batik Untuk Twitter atau Situs

Dalam latar belakang twitter tema gratis, kita menggunakan "Batik" seni untuk gaya latar belakang twitter. Batik adalah salah satu seni tradisional khas Indonesia. Ini seperti pola tetapi lebih unik. …

Baca selengkapnya »

29 Jul 2012

Tambahkan Facebook Recommendation Bar Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYQbE473ifFS8_NP8o1RR3zqKfjLo-USxz1475pTZd8wW87l6kMlliNeOP9kqfik-2_7bSmdHq-ryoUiDD6HXZWpcB4f1asnlzPjNEIuMtFxpoIiO5D0SjINcTEhELdRtumYI5bKPnTg/s1600/soccial.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYQbE473ifFS8_NP8o1RR3zqKfjLo-USxz1475pTZd8wW87l6kMlliNeOP9kqfik-2_7bSmdHq-ryoUiDD6HXZWpcB4f1asnlzPjNEIuMtFxpoIiO5D0SjINcTEhELdRtumYI5bKPnTg/s320/soccial.gif" width="309" /></a></div>Dalam rangka untuk melibatkan lebih banyak pembaca dan biarkan pengunjung Anda menghabiskan lebih banyak waktu di website Anda. 
Facebook akhirnya meluncurkan " Rekomendasi Bar "dalam versi beta. Ini dirancang untuk menampilkan artikel direkomendasikan tambahan setelah pembaca telah selesai membaca artikel atau menghabiskan beberapa waktu di blog Anda. 
 
Widget ini akan menutup dan terbuka dan halaman dan memperluas ketika pembaca telah mencapai lokasi tertentu di blog atau selesai membaca posting tersebut. 
 
Hanya artikel-artikel yang ditampilkan yang sebelumnya disukai atau berbagi di Facebook. Jumlah orang seperti ditampilkan di bawah setiap artikel bersama dengan judul halaman dan thumbnail. Hal ini juga berisi tombol seperti sebelumnya dan mengandung Tambahkan ke Timeline tombol yang telah dihapus. 
 
Tidak seperti Facebook kotak Rekomendasi yang menawarkan cerita dan namun dengan kurangnya antarmuka user friendly dan keterlibatan, Facebook bar akan memaksa pembaca untuk tinggal lebih lama di situs Anda yang mengarah ke tampilan halaman meningkat , tayangan halaman dan dengan demikian lalu lintas. Ini adalah alternatif pintar untuk Posting Slides Direkomendasikan widget yang kita diterbitkan sebelumnya. 
 
Jika Anda seorang pengguna Blogspot Anda dapat mengikuti tutorial ini: 
 
Lihat demo di blog ini ke arah sudut kanan bawah (Jika blog ini masih meggunakannya). Jangan lupa untuk menekan tombol like untuk membiarkan teman Anda tahu bahwa Anda mengunjungi halaman ini. 
 
Apakah bisa meningkatkan lalu lintas Anda dengan memasang widget ini? 
 
Oh ya yakin tanpa keraguan! saya sering berbagi widget tapi kita tidak melaksanakan setiap plugin pada blog kita kecuali memberikan beberapa nilai untuk lalu lintas atau pendapatan. Seperti yang Anda lihat kami telah menambahkan bar rekomendasi pada semua postingan dan ini pasti akan menempatkan efek positif pada tampilan halaman karena sekarang pengunjung dapat melihat apa yang teman-teman mereka sebelumnya suka di blog Anda dan karena rasa ingin tahu manusia mereka pasti akan memeriksa posting ini ekstra sepanjang jalan yang muncul di bawah Label " Anda mungkin juga menyukai ". Google Ditambah tombol menunjukkan teman rekomendasi dalam hasil pencarian dan Bar Facebook akan menampilkan orang-orang seperti di blog Anda. 
Dengan demikian konsumen dari semua plugin tersebut selalu dalam manfaat. 
 
Menginstalnya di Blogger 
 
Hal ini dapat diinstal dengan mudah pada kedua BlogSpot blog dan Wordpress tapi dengan sedikit kesabaran. Kami telah terus instalasi sangat mudah dan mengabaikan langkah-langkah yang tidak perlu seperti pemasangan Meta Tags Grafik Terbuka . Kami akan menginstal kode diperlukan untuk menjaga struktur membersihkan dan membuat pekerjaan widget dengan baik. Kode saya berbagi dioptimalkan dan akan menampilkan judul blog Anda dan gambar fitur dengan benar dan dengan banyak atribut kontrol. 
 
Ikuti langkah-langkah mudah berikut: 
 
<hr color="#3e81c4" />Langkah 1: Membuat Aplikasi Facebook 
<hr color="#3e81c4" /> 
Untuk membuat plugin ini bekerja Anda perlu membuat sebuah App Facebook dalam hitungan detik. Metode di bawah ini adalah metode standar dan benar untuk membuat App FB Anda. 
 
1. Masuk ke <a href="https://developers.facebook.com/apps/" target="_blank">Facebook Apps</a>. 
 
2. Klik tombol Create New App di kanan Atas 
 
<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha3cGn0FefGsnnm2ley8qoBnrCVLwUz6NZycv3EA_8soKxYIBImGBAI7p2N8dti0HboJRt1iNmqHSQS7Cxf_G5XOOV1rTbkrK-RMw4y2Hso620Qm1evQO5JXcWoHrxO1JlPMw5pLKu7kc/s1600/1.png" /></a></div> 
3. Pada kotak yang muncul, ketik " My recommendation Bar atau Bar Rekomendasi saya "di dalam App Name dan meninggalkan pilihan lain sebagai default, lalu Klik Lanjutkan. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTB8Fz26UD5tN354WchVG5d1eAZFL9sJXG7inVn2lzwWJJlvSqKCVFxGJRS9qSJtONE1OAXuVlGhnVPZ_upbNb7D0N_VzUtrfNfjlxVq6U4hzWGXXkX_Wr9HFC0oZrCx0sMyBIMzWb4xU/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTB8Fz26UD5tN354WchVG5d1eAZFL9sJXG7inVn2lzwWJJlvSqKCVFxGJRS9qSJtONE1OAXuVlGhnVPZ_upbNb7D0N_VzUtrfNfjlxVq6U4hzWGXXkX_Wr9HFC0oZrCx0sMyBIMzWb4xU/s640/2.PNG" width="640" /></a></div> 
4. Masukkan kode keamanan captcha, lalu Klik Submit 
 
5. App Anda hampir selesai. Cukup klik tab Website with Facebook Login dan di dalam kotak input URL blog Anda. Lihat gambar di bawah ini. Jangan menyentuh pilihan yang tersisa dan klik Simpan Perubahan . 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmN5kXd748kzy6t8RJu-hAcnXHgNF4Hn1dOuVEotUJO1rkaenL_Ki4VBxRJdogA580tH0LRGuYopsihOZBlb8FEkDYMyJVKYzUGrxOO_DC4EAiiA2PKkMYmSdXZX9flyg-pNo5aNjH6w/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmN5kXd748kzy6t8RJu-hAcnXHgNF4Hn1dOuVEotUJO1rkaenL_Ki4VBxRJdogA580tH0LRGuYopsihOZBlb8FEkDYMyJVKYzUGrxOO_DC4EAiiA2PKkMYmSdXZX9flyg-pNo5aNjH6w/s640/3.png" width="640" /></a></div> 
6. Anda akan melihat dua string alfa-numerik karakter. Salah satunya adalah ID App dan yang lainnya adalah App rahasia. Anda hanya perlu menyalin kode App ID dan menyimpan dalam notepad. Nanti kita akan membutuhkannya. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOa4UBnUAIOPlqG7qVUi3_iW5h446n0YocHgm7WYFzoau4WoQUy4_IFMbcc789IwDGXE0PYdiDOdg55h6oIo9VWaTBQDIkIgFkI_0Vc8-Favg_vBWMi0VBG7zc-toxXXZfdyKg9iZVa2I/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOa4UBnUAIOPlqG7qVUi3_iW5h446n0YocHgm7WYFzoau4WoQUy4_IFMbcc789IwDGXE0PYdiDOdg55h6oIo9VWaTBQDIkIgFkI_0Vc8-Favg_vBWMi0VBG7zc-toxXXZfdyKg9iZVa2I/s640/4.png" width="640" /></a></div> 
Congrats akhirnya Apps tercipta! Mari kita lanjutkan ke Langkah 2. 
 
<hr color="#3e81c4" />Langkah 2: Tambahkan "Recommendation Bar" Untuk Blog Anda 
<hr color="#3e81c4" /> 
Ikuti langkah-langkah berikut untuk menambahkan Recommendation Bar untuk Blogger: 
 
1. Pergi ke Blogger klick Template ➨ Edit HTML 
2. Centang <input checked="" id="expandWidgets" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; font-size: small; margin: 0px 2px 4px; padding: 0.2em 0.4em;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
3. Sekarang Anda harus mencari kode HTML jika tidak bisa mencari kode HTML klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
4. Dalam Edit HTML temukan kode : 
<blockquote class="tr_bq"><html</blockquote>Ganti kode tersebut dengan kode ini : 
<blockquote class="tr_bq"><html xmlns:fb='http://ogp.me/ns/fb#'</blockquote> 
Ini akan membuat plugin yang kompatibel dalam versi internet explorer juga. Karena blogger template dikodekan dalam XML sehingga memasukkan ini namespace XML akan meningkatkan kinerja plugin dan kompatibilitas. 
 
5. Pencarian berikutnya untuk kode <body> dan tepat di bawah tag tersebut paste kode berikut: 
 
Catatan: Jika Anda menggunakan blogger template baru seperti Awesome Inc., Travel, Watermark atau Picture window maka silakan mencari <body gantinya. Pastikan untuk paste kode di bawah ini. 
 
<blockquote class="tr_bq"><div id='fb-root'/> 
<script> 
//Facebook Recommendation bar by www.otowebsite.blogspot.com 
//<![CDATA[ 
(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
//]]> 
</script> 
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'> 
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.otowebsite.blogspot.com' trigger='40%'/></div> 
</b:if></b:if></blockquote> 
Anda hampir selesai. 
 
Membuat perubahan ini: 
 
Ganti *************** dengan 15 digit Id App yang Anda Anda simpan dan dapatkan pada Langkah 1. 
Ganti  http://www.otowebsite.blogspot.com  dengan link blog Anda. 
 
6. Simpan template Anda dan semua telah selesai dilakukan! 
 
Kunjungi blog Anda dan gulir ke bawah sekitar 50% dari halaman Anda dan tunggu selama 10 detik untuk plugin ini berkembang/muncul. Nikmati cara baru tampilan  Facebook Rekomendasi akan muncul di halaman postingan bebas. 
 
<hr color="#3e81c4" />Opsionts Langkah 
<hr color="#3e81c4" /> 
Di bawah ini adalah opsionts dan pilihan kustomisasi kontrol. Anda dapat melewatkan ini jika Anda ingin. 
 
<ul><li>max_age: akan memutuskan batas usia artikel. Kadang-kadang Anda tidak ingin menampilkan artikel terlalu tua sehingga Anda dapat mengaturnya untuk menampilkan hingga 1 - 180 posting hari. Tapi jika Anda tidak ingin mengambil usia mempertimbangkan maka biarlah 0 sebagai default.</li>
<li>num_recommendations: Anda dapat mengatur berapa banyak artikel untuk ditampilkan. Dengan meningkatkan atau menurunkan nilai 3</li>
<li>read_time: Segera setelah pengguna mencapai lokasi yang ditentukan, plugin ini akan memperluas/muncul dan sebelum mengembangkannya akan memakan waktu. Saya menyimpannya sama dengan 10 detik, Anda dapat meningkatkannya menjadi 30 atau lebih sesuai keinginan.</li>
<li>side: Anda dapat memutuskan lokasi plugin. Secara default itu muncul di bagian bawah right = kanan sudut halaman Anda. Anda menetapkan mengapung ke ke left = kiri.</li>
<li>trigger: Pada halaman memuat plugin dan secepat itu mencapai lokasi yang ditentukan mengembang. Anda dapat memilih lokasi itu dalam tiga cara yaitu onvisible, X% atau manual. Saya lebih suka menempatkan titik pemicu oleh persentase untuk tampilan halaman yang lebih baik. Widget akan memperluas segera setelah pengguna menggulir 40% dari halaman Anda. Anda dapat menambah atau mengurangi nilai ini. Jika Anda berharap bahwa plugin harus memperluas segera setelah pembaca mencapai akhir artikel Anda maka bukannya menyisipkan kode di antara garis ungu paste tepat di bawah data: post.body tag dan menggunakan nilai onvisible bukan  40%.</li>
<li>Widget akan menampilkan hanya pada halaman posting dan bukan pada homepage atau halaman statis. Untuk menampilkannya pada semua halaman, maka cukup menghapus teks tebal ungu .</li>
</ul> 
Masalah: 
 
Sejak Kebanyakan template tidak terstruktur dengan baik dan memerlukan pemasangan meta tag untuk memberitahu Facebook untuk mengambil judul halaman yang benar, thumbnail dan judul blog. Untuk melakukan hal ini cukup sisipkan kode berikut tepat di bawah tag <head> dalam template Anda 
 
<blockquote class="tr_bq"><meta content='article' property='og:type'/> 
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<meta expr:content='data:blog.pageName' property='og:title'/> 
<b:if cond='data:blog.metaDescription != ""'> 
<meta expr:content='data:blog.metaDescription' name='description'/> 
</b:if></blockquote> 
Simpan template Anda dan sekarang Anda dapat melihat plugin jika benar menunjukkan judul halaman baik di blog Anda dan Facebook. 
 
<hr color="#3e81c4" />Pandangan Anda? 
<hr color="#3e81c4" /> 
Saya berharap instalasi ini tidak terlalu rumit, tapi jika Anda mendapat masalah apapun maka Anda hanya perlu bersantai dan beritahu saya. Widget ini sangat penting dan suatu keharusan untuk setiap blog. Saya akan segera menambahkan update lebih di atasnya setelah saya mendengar dari dokumentasi Facebook. Jangan lupa untuk menyukai halaman ini melalui Facebook Rekomendasi Bar!

Tambahkan Facebook Recommendation Bar Untuk Blogger

Dalam rangka untuk melibatkan lebih banyak pembaca dan biarkan pengunjung Anda menghabiskan lebih banyak waktu di website Anda. Facebook akhirnya meluncurkan " Rekomendasi Bar "dalam versi beta. Ini d…

Baca selengkapnya »

29 Jul 2012

Meta Tag Generator Tool

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/" target="_blank"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmLeaM6-4w5u20KnLZCwPVJK0mjPEnwFqIUo2pSpmNQcpXQFt1vTMT3vzFm87MUO_HQY_PWP3x4YK3_oBNS3SprptzOQuxRSCULS_UON_xgnsOcdBDh4jz3wJBxCO4pPIWWeXNvTb7Q/s640/Meta+tag+seo+frienly+blogspot.jpg" width="640" /></a></div>Meta Tag adalah elemen atau tag dalam bahasa program HTML atau XHTML yang digunakan untuk mengaplikasikan meta data dalam suatu Situs web atau blog. 
 
Sedangkam Fungsinya untuk mendeskripsikan atau memberikan pernjelasan mengenai web atau blog kita kepada search engine. 
 
Terus bagaimana pengaruh meta tag terhadap SEO ?. Banyak orang yang mengatakan Meta tag sangat penting untuk SEO dan banyak pula yang mengatakan tidak terlalu penting. Apabila dari sudut pandang Saya Sendiri Meta Tag pada blog sangat penting karena dengan kita memasang Meta Tag pada Blog berarti kita sudah membantu Search engine untuk mengenal blog yang kita miliki. 
 
Seperti Pepatah Mengatakan "Jika tak kenal maka tak sayang". Artinya jika search egine sudah mengenal blog yang anda miliki ada kemungkinan search engine akan menyangi blog Anda. 
 
Meta tag yang dipasang pada blog sangat beragam jenisnya dan yang akan di bahas Oto Website kali ini adalah meta tag sederhana yang penggunaannya menggunakan generator jadi sangat mudah. 
 
<hr color="#3e81c4" />Cara Menggunakan Meta Tag Generator 
<hr color="#3e81c4" /> 
<ul><li>Description : Isi dengan dengan deskripsi blog Anda.</li>
<li>Keywords : Isikan dengan keyword blog yang Anda inginkan mengenai blog Anda,pisahkan tiap keyword dengan tanda koma (,).</li>
<li>Author (Optional) : Isi dengan nama Anda.</li>
<li>Robots (Optional) Lalu isikan Robots dengan index follow atau All (terserah Anda)</li>
<li>Jika sudah klick Generate untuk mengambil kode meta tag.</li>
</ul> 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/MetaTagGenerator.html" style="height: 630px; width: 100%;"></iframe> 
 
<hr color="#3e81c4" />Cara Memasang Meta Tag 
<hr color="#3e81c4" /> 
1. Login ke Akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Tata Letak. 
 
3. Edit HTML ➨ Backup Template Anda. 
 
4. Lalu temukan kode <head> bila kesulitan mencarinya silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
5. Selanjutnya letakkan kode meta tag yang Anda dapatkan tadi tepat di bawah kode <head>. 
 
6. Simpan template. 
 
Finish!!! Sekarang Anda telah berhasil memasang meta tag pada template Anda!

Meta Tag Generator Tool

Meta Tag adalah elemen atau tag dalam bahasa program HTML atau XHTML yang digunakan untuk mengaplikasikan meta data dalam suatu Situs web atau blog. Sedangkam Fungsinya untuk mendeskripsikan atau mem…

Baca selengkapnya »

29 Jul 2012

1000+ Tema Kotak Komentar Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYV5pTLosS06RZAmZQ54lHmYZq8EqGGjyq8rR5umQlgRu_hgJhQ6xpk5hO0lDISCENor_9kddXlP0IGub1MtFX6Nu29m-8t1tS3NPjpBB_WhRJEyBlLCeHG7xYj-5G3v7quRqMdGsGYMQ/s1600/10+komentar.JPG" /></a></div>Apakah Anda suka dengan tema terang atau tema gelap??? 
Untuk kali ini Oto Website akan share postingan tentang <a href="http://otowebsite.blogspot.com/2012/07/1000-tema-kotak-komentar-untuk-blogger.html">1000+ Tema Kotak Komentar Untuk Blogger</a>. 
 
Ketika Anda melihat formulir komentar Anda yang biasa-biasa saja dengan tema default, dan sekarang Anda bisa merubah tema formulir komentar tersebut menjadi lebih cantik sesuai dengan selera Anda. 
Kode tema ini di ciptakan oleh teman saya yang dimana saya melakukan  perubahan agar kode dan ini bisa Anda gunakan. 
 
Sebelumnya saya telah membahas kotak komentar juga yang berada di article <a href="http://otowebsite.blogspot.com/2012/07/kotak-komentar-blogger-dengan-tema.html" target="_blank">Kotak Komentar Blogger Dengan Tema Hitam</a>. 
 
Sebenarnya <a href="http://otowebsite.blogspot.com/2012/07/1000-tema-kotak-komentar-untuk-blogger.html">1000+ Tema Kotak Komentar Untuk Blogger</a> ini bukanlah saya menyediakan 1000 tema untuk Anda karna itu tidak mungkin, arti <a href="http://otowebsite.blogspot.com/2012/07/1000-tema-kotak-komentar-untuk-blogger.html">1000+ Tema Kotak Komentar Untuk Blogger</a> adalah Anda bisa merubah tema background komentar sesuai selera Anda. 
 
Disini saya menyediakan beberapa url tema komentar untuk blogger yang bisa Anda gunakan, dan bila Anda kurang suka dan ingin tema yang lainnya saya sarankan Anda mencarinya di <a href="http://www.backgroundlabs.com/" target="_blank">BackgroundLabs</a> yang merupakan sumber yang bagus untuk mencari tema/latar belakang gratis yang menyediakan 1000+ tema. 
 
Untuk membuat tema pada kotak komentar sangatlah mudah, sama dengan Article sebelumnya, Anda hanya perlu menambahkan kode css dan merubah kode komentar menjadi kode pemanggil. 
 
<hr color="3e81c4" />Cara membuat 1000+ Tema Kotak Komentar Untuk Blogger 
<hr color="3e81c4" /> 
1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Rancangan.➨ Edit HTML. 
 
3. Centang <input checked="" id="expandWidgets" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; font-size: small; margin: 0px 2px 4px; padding: 0.2em 0.4em;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
 
4. Lalu dalam Edit Template temukan kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba lihat <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">Cara Cepat Mencari Kode HTML</a>. 
 
5. Jika sudah ketemu sekarang letakkan kode berikut tepat di atasnya. 
 
<blockquote class="tr_bq">#ow-form iframe{ 
background:#ffffff url(IMAGE-LINK) repeat; 
border:1px solid #ddd; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding:5px; 
font:normal 12pt "ms sans serif", Arial; 
color:#2F97FF; 
width:560px; height:213px !important; 
} 
#ow-form a{ 
color:#fff; 
}</blockquote> 
<ul><li>Ganti IMAGE-LINK dengan salah satu tema yang Anda dapat dari website backgroundlabs atau yang saya telah saya sediakan di bawah.</li>
<li>Untuk mengubah warna heksadesimal dari teks " komentar sebagai "cukup mengubah # 2F97FF.</li>
<li>Untuk mengubah lebar kotak komentar silahkan edit lebar : 560px . </li>
</ul> 
6. Selanjutnya temukan kode <div class='comment-form'> dan ganti kode tersebut dengan kode di bawah ini. 
 
<blockquote class="tr_bq"><div id='ow-form'></blockquote> 
7. Simpan template. 
 
<hr color="3e81c4" />Tema dan Pola Kotak Koemntar beserta Urlnya 
<hr color="3e81c4" /> 
METALLIC 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVaRk25qkJWiD8bOm4ebEX8NwTCBTTMW5fgi2awQCA-EIptIa3eo7WbYKB39qUMrjmIaOv3akAXX5UuCsskMcTY_28ZKsXbn083YiCzGji6BlJlvOj8uz-Gpnv6n5Pgzrefbm4xFFm7Q/s1600/ow1.png</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnzTQS49au25bUExdnRSUOurbmLgftEt4XWm7U0X2BSpo_N_XwAxBljp3GN26dYN4PZgefZ4QD5bCtcnwvKYQ6Z_fS4XoucPzNEQii-pC-1Rmrd4lUHjpttv0AwdNNz_w75EJjyXZcRY0/s1600/kom1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnzTQS49au25bUExdnRSUOurbmLgftEt4XWm7U0X2BSpo_N_XwAxBljp3GN26dYN4PZgefZ4QD5bCtcnwvKYQ6Z_fS4XoucPzNEQii-pC-1Rmrd4lUHjpttv0AwdNNz_w75EJjyXZcRY0/s640/kom1.JPG" width="640" /></a></div> 
Happy Christmas Background  
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ipBbsmi5vKPGZZTT-_BB_rC2zzezk3r5-zmQk32I3_0F5exaleqS2itxVxD3YMdkb3_8sRJVqbrPSrEH_maTQBY1VmlCfP-efogamEHkXm2bde3P-A3u6nCm0DxYg88muhrNGFg5oQ/s1600/ow10.jpg</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuBfV5A6OFbnKZ82XG1HzzRxpPeyKI-jsfErwfwHLZ0zbq-dfxmPDl-yC97m3P4-d8YpM_yKBwaDs1OTI9eWgAMomadAZa4aVDDZICWuHAzZyWC3RdL5G9w7cAhZOwDo7lr7viry71umA/s1600/kom10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuBfV5A6OFbnKZ82XG1HzzRxpPeyKI-jsfErwfwHLZ0zbq-dfxmPDl-yC97m3P4-d8YpM_yKBwaDs1OTI9eWgAMomadAZa4aVDDZICWuHAzZyWC3RdL5G9w7cAhZOwDo7lr7viry71umA/s640/kom10.JPG" width="640" /></a></div> 
TILES 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWKTHsXktgz8ED55hXApKJFn1s5r4d_f-zAGKg-_Wazv08Vu8fPohjbIDEKdRpMFPHpLyMhdb0uhLQp9FnvE2P8onrW3BcuqxRZyzNgCp-MR0Z1wrvN1hkh61PA2VlCvJ-sQTQBX3HSg/s1600/ow2.png</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPotuzv9S1q3qWX6dmDdHsZwumb5TUNq55VcQx3Zzsco3u6BSdfoRHhU7aQlaYmLg81nEvs0qNmFYX1qzQCov2x9ypby-rbs2mkdYCEqWcP1q8OwXo6k5KTB8tZ-eifVZfT5ts6ZuSPc/s1600/kom2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPotuzv9S1q3qWX6dmDdHsZwumb5TUNq55VcQx3Zzsco3u6BSdfoRHhU7aQlaYmLg81nEvs0qNmFYX1qzQCov2x9ypby-rbs2mkdYCEqWcP1q8OwXo6k5KTB8tZ-eifVZfT5ts6ZuSPc/s640/kom2.JPG" width="640" /></a></div> 
Blocks 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguDcBD9mt6unrnSQSXKxoeFXmJQek8PaRXotBfYxOpPLP7pXE54GC_8Qed49t9tOmjNrXC3FYnTIpV_aNTlKfVQe6LMIwo8zWk5re_daXfSHk261MCnuBNWWZCkGkPrlWwJsfvG42t8g/s1600/ow3.png</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGbJA0bTaWmLbYZrGYExXLGxO-pZp4MH1TyjkWA5oEdLa27ZDXHwkm3AdBJQrIHYknKDYFY26jNIRVnkQ_KX6cPb3t1seSFcyXUKLHEF30x4W4jND91T1b0I11npVe8lk12CNw3XYQsM/s1600/kom3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGbJA0bTaWmLbYZrGYExXLGxO-pZp4MH1TyjkWA5oEdLa27ZDXHwkm3AdBJQrIHYknKDYFY26jNIRVnkQ_KX6cPb3t1seSFcyXUKLHEF30x4W4jND91T1b0I11npVe8lk12CNw3XYQsM/s640/kom3.JPG" width="640" /></a></div> 
WOODEN 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBbWH6VU89QwrCT9tjO8ZbozHl8MCI3F5RtiIzr_SjlyhU_1AwJYOBIwJRIC42kNkvXix-sA1j-iCPle3-5pdERdGEklJsd3lueHGkZSnnroVwJk-XDOC1bMG9cOAIiqL4-WERfawTg/s1600/ow4.png</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPS-qjZowGCTu-nwB-aYbVEimU7ne3dGiS_1d7h3N-S7g555G9XRLFBKS8AS7v8QGsIG0oeUWPdxXbbHN50SEgxl1xVZbPqZ0vO-2FxB0h2VWdT9dDzUz0polBfzS6xtz4WA7QnnKntpk/s1600/kom4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPS-qjZowGCTu-nwB-aYbVEimU7ne3dGiS_1d7h3N-S7g555G9XRLFBKS8AS7v8QGsIG0oeUWPdxXbbHN50SEgxl1xVZbPqZ0vO-2FxB0h2VWdT9dDzUz0polBfzS6xtz4WA7QnnKntpk/s640/kom4.JPG" width="640" /></a></div> 
CHECKER 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmqC5YQeKG76BxARoM3dniBiMAq5PtvlbiNs6ZnMlhrr_jxfVSfMeZTXtzwRne2iQjIzghClC6JU96pzV2QMBgl_9g97iXLAlhnyr-ACaK2dpE6gABnmKoPo3MeBSvSDRoy5CiDlUGg/s1600/ow5.png</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7gXERyE1ILEW9mQq2B-1Slsa_VSFR1XUyG2SBGbQy27-gjQMU7BHKp7B7vGoD1F90WnEsAk2gnH744IOhjWw2fA9J30sTu0kOYVs9M51w8ZYNkoSk_oc-vhyOQEfdDenCncc-gB4ML4/s1600/kom6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7gXERyE1ILEW9mQq2B-1Slsa_VSFR1XUyG2SBGbQy27-gjQMU7BHKp7B7vGoD1F90WnEsAk2gnH744IOhjWw2fA9J30sTu0kOYVs9M51w8ZYNkoSk_oc-vhyOQEfdDenCncc-gB4ML4/s640/kom6.JPG" width="640" /></a></div> 
BLUE OCEAN 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAahWzp2pX2qIAZRPR2Yu0mggVy1TW_tE4ucdolbcYQTTd29cCSJibhr6-lWjtEHYxSsYFBn3nWctiq8lzlj70jCtkTLIVs3csJmjDiafuAAvLm_a8QcKFAoNsF0VBKlJVZ8pKSNQKlw/s1600/ow6.png 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Yv1Ge8e4BdaqkhmfvLpoGTQj0sm7wcUYfsbEzrlhRXM0Fvt2mHYvPIECo-Mxo1bkgb-Zf8McLIxV7Qj2rRVgP2x15cRshxC9TGqgzFE5XgVB3OHcchWPdbWCzpwc-I3ASBWPlMQ3x5Y/s1600/kom7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Yv1Ge8e4BdaqkhmfvLpoGTQj0sm7wcUYfsbEzrlhRXM0Fvt2mHYvPIECo-Mxo1bkgb-Zf8McLIxV7Qj2rRVgP2x15cRshxC9TGqgzFE5XgVB3OHcchWPdbWCzpwc-I3ASBWPlMQ3x5Y/s640/kom7.JPG" width="640" /></a></div> 
AQUA 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrx1LBh4kuKtGI5yerrEnmbi1Pd_k9TZ0MCoytxemYfydq7r1G4GlUfWR23SXD6DiZYvFACyfHXW9zcSbXuo7l69hDQ20_hyphenhyphenZAVHHWRUXOsugQgJxv1XplknQKnxUu3oCvsNqjH02ag/s1600/ow9.gif</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWJ0owixQP6Az16uBzA81b984VkMsNENLukosKILNI_1rJ-iI6USWZ45oZZeLWXgYR_yl9fCzPy_E6fs29pYDihm0LugKIIzjvvTMKmYWT9GdfZslFwtsy3Z4rYH2JCMLL78tNHf8nso/s1600/kom8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWJ0owixQP6Az16uBzA81b984VkMsNENLukosKILNI_1rJ-iI6USWZ45oZZeLWXgYR_yl9fCzPy_E6fs29pYDihm0LugKIIzjvvTMKmYWT9GdfZslFwtsy3Z4rYH2JCMLL78tNHf8nso/s640/kom8.JPG" width="640" /></a></div> 
GARDEN 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubKzgeI4kQ4YR8rO2zO6TU-ZuR9Np1_slcBuoWjel4bGqN6VbWBJgdA845DezO6L7VW7S3KwGvTlXk06MPWkFcpWvQmKPaSSWJR5R9DWHx7OYK1_xjiYwkQBzGLUcVooIMc5BWEWs1w/s1600/ow9.jpg</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tIaJv6cxRZbFRRt88gPcufZVcOa9jvCgnY75XTftzjInDzty5EBkMBcIn6G1DdhqHfmY-Maf2rzAe9_WUeR0PvGz-bEfLJzHpktlhKNisDs3gwlklP8BLzRfXlNF2-5PFRKYmc-b4d8/s1600/kom9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tIaJv6cxRZbFRRt88gPcufZVcOa9jvCgnY75XTftzjInDzty5EBkMBcIn6G1DdhqHfmY-Maf2rzAe9_WUeR0PvGz-bEfLJzHpktlhKNisDs3gwlklP8BLzRfXlNF2-5PFRKYmc-b4d8/s640/kom9.JPG" width="640" /></a></div> 
CHALK 
<blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lnXdvpK7ogh8BAEmSiFtkuLLGWrUdi3Pd3KRQMBDiAVAlSjm2FaSibN-TE7YEgVK-FaGoymDYdFJ1-owBFwZDv2Paaay3i6sxhyFk67jtT13klUSLXCHGaI_7gfsX5kdgcx9xE2xDQ/s1600/ow7.png</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8fB94wOvpjNrRnTRfrgDAFCMJ1KEg1ztWcCIZG1vAftDVxtdwxXSjBRZcVJEJ53VZJeTMNOR-3bdZWJpavzTCmtpEo7HrxppjdQyAuJIJekJmX1jjg98BAzPkicgeMa1jKUuf1Yh0y0/s1600/kom9_2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8fB94wOvpjNrRnTRfrgDAFCMJ1KEg1ztWcCIZG1vAftDVxtdwxXSjBRZcVJEJ53VZJeTMNOR-3bdZWJpavzTCmtpEo7HrxppjdQyAuJIJekJmX1jjg98BAzPkicgeMa1jKUuf1Yh0y0/s640/kom9_2.jpg" width="640" /></a></div> 
<hr color="3e81c4" />Apa Selanjutnya??? 
<hr color="3e81c4" /> 
Saya akan menyiapkan artikel yang lebih menarik lagi dan mungkin saja tentang kotak komentar lagi! Intinya tunggu saja artikel selanjutnya yang tidak kalah menarik!

1000+ Tema Kotak Komentar Untuk Blogger

Apakah Anda suka dengan tema terang atau tema gelap??? Untuk kali ini Oto Website akan share postingan tentang 1000+ Tema Kotak Komentar Untuk Blogger. Ketika Anda melihat formulir komentar Anda yang …

Baca selengkapnya »

28 Jul 2012

Gambar dengan Zoom Effect

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjppBrXbg-y0SrD3-n2y94cnDRb1-zb3CiyW3NJb8PWiIMGCE8uhbUEtdriwbFDxa8ctYEzIkKDVsfy0yJV5ss8Dzy9jTHebHafuJOLXWofmb9pG4z6bBIq-nKAcmdTJK_jRhEKrMgNZk/s1600/zoom.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjppBrXbg-y0SrD3-n2y94cnDRb1-zb3CiyW3NJb8PWiIMGCE8uhbUEtdriwbFDxa8ctYEzIkKDVsfy0yJV5ss8Dzy9jTHebHafuJOLXWofmb9pG4z6bBIq-nKAcmdTJK_jRhEKrMgNZk/s1600/zoom.jpg" /></a></div>Pada kesempatan kali ini blog Oto Website akan membahas tentang efek gambar pada blog dan kali ini temanya adalah <a href="http://otowebsite.blogspot.com/2012/07/gambar-dengan-zoom-effect.html">Gambar dengan Zoom Effect</a>. Sebelumnya Oto Website pernah membahas tentang efek gambar sederhana lainnya di antaranya: 
<ul><li><a href="http://otowebsite.blogspot.com/2012/05/cara-membuat-gambar-melayang.html" target="_blank">Cara Membuat Gambar Melayang</a></li>
<li><a href="http://otowebsite.blogspot.com/2012/06/efek-memutar-dan-membesar-pada-gambar.html" target="_blank">Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse</a>.</li>
</ul>Meginstal dan penerapan <a href="http://otowebsite.blogspot.com/2012/07/gambar-dengan-zoom-effect.html">Gambar dengan Zoom Effect</a> pada blog juga sangat mudah di bandingkan dengan efek gambar sebelumnya. 
 
Untuk lebih jelasnya tentang <a href="http://otowebsite.blogspot.com/2012/07/gambar-dengan-zoom-effect.html">Gambar dengan Zoom Effect</a> silahkan Anda lihat demo berikut ini. 
 
<div style="text-align: center;">Live Demo ▼</div><div style="text-align: center;"> 
</div><div style="background-color: white; border: 2px #3e81c4 dashed; padding: 10px; text-align: left;"><style>
.ow img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style> 
<div style="text-align: center;"><a class="ow" href="http://otowebsite.blogspot.com/" target="_blank"> 
<img src="https://lh3.googleusercontent.com/-R-uhsoNgp-s/AAAAAAAAAAI/AAAAAAAAADc/A1eF2Q9dqKc/s250-c-k/photo.jpg" /></a></div></div> 
<hr color="#3e81c4" />Cara menginstal Gambar dengan Zoom Effect 
<hr color="#3e81c4" /> 
1. Masuk ke akun blogger Anda. 
 
2. Pada Dasbor klick ➨ Template ➨ Edit HTML. 
 
3. Lalu temukan kode ]]></b:skin> atau </style> bila kesulitan mencari kode HTML silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
4. Lalu letakkan kode berikut tepat di atas kode tadi. 
 
<div class="md7">.ow img{ 
 
-webkit-transform:scale(0.8); 
-moz-transform:scale(0.8); 
-o-transform:scale(0.8); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
opacity: 0.7; 
margin: 0 10px 5px 0; 
} 
 
.ow img:hover{ 
-webkit-transform:scale(1.1); 
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
opacity: 1; 
} 
 
</div> 
6. Simpan template. 
 
<hr color="#3e81c4" />Cara Penerapan atau memanggil Gambar dengan Zoom Effect 
<hr color="#3e81c4" /> 
1. Sekarang untuk menerapkan <a href="http://otowebsite.blogspot.com/2012/07/gambar-dengan-zoom-effect.html">Gambar dengan Zoom Effect</a>. 
 
2. Pada saat mengedit postingan masukkan kode berikut. 
 
<div class="md6"> 
 
<a class="ow" href="http://otowebsite.blogspot.com/" target="_blank"> 
<img src="https://lh3.googleusercontent.com/-R-uhsoNgp-s/AAAAAAAAAAI/AAAAAAAAADc/A1eF2Q9dqKc/s250-c-k/photo.jpg" /></a> 
 
</div> 
Keterangan: 
Ganti teks warna ungu dengan url Anda. 
Ganti teks warna kuning dengan url gambar. 
 
Saya rasa cukup untuk kali ini, Silahkan tinggalkan tanggapan atau komentar Anda.

Gambar dengan Zoom Effect

Pada kesempatan kali ini blog Oto Website akan membahas tentang efek gambar pada blog dan kali ini temanya adalah Gambar dengan Zoom Effect. Sebelumnya Oto Website pernah membahas tentang efek gambar …

Baca selengkapnya »

27 Jul 2012

Membuat Animasi Cover CD/DVD Pada Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ErQEMvBUQkKLkX5lypsuj9xcC4w36btVhwu5asP1vF1NpBdh16AEVti48Eua7yrXvVmTaod27UPynqTCwRYEVzrZf0aBlwqLnmPZAM-30nVUqkllEOLLTawXjb-UE6H3z9YBm1WAOws/s1600/DVD.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ErQEMvBUQkKLkX5lypsuj9xcC4w36btVhwu5asP1vF1NpBdh16AEVti48Eua7yrXvVmTaod27UPynqTCwRYEVzrZf0aBlwqLnmPZAM-30nVUqkllEOLLTawXjb-UE6H3z9YBm1WAOws/s640/DVD.bmp" width="640" /></a></div>Kembali di tutorial Blogger!!! 
Dalam postingan kali ini Oto Website akan berbagi sebuah tutorial dan untuk kali ini kita membahas tentang menu atau navigasi dan kali ini lagi temanya adalah <a href="http://otowebsite.blogspot.com/2012/07/membuat-animasi-cover-cddvd-pada-blog.html" target="">Membuat Animasi Cover CD/DVD Pada Blog</a>. Anda pasti sering melihat Cover CD/DVD entah itu CD/DVD bajakan ataupun yang asli bahkan di dunia maya Anda pasti sering melihat gambar dari Cover CD/DVD. 
Nah tapi bagaimana bila kita <a href="http://otowebsite.blogspot.com/2012/07/membuat-animasi-cover-cddvd-pada-blog.html">Membuat Animasi Cover CD/DVD Pada Blog</a> kita plus beserta Disketnya, pasti gak kefikiran kan? dan pastinya akan sangat menarik dan keren. Untuk lebih jelasnya tentang Animasi Cover CD/DVD Pada Blog silahkan Anda lihat dulu demonya dengan menekan tombol berikut ini. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/Cover%20CD%20di%20Blogger.html" target="_blank">LIHAT DEMO</a></div> 
 
<hr color="#3e81c4" />Membuat Animasi Cover CD/DVD Pada Blog !!! 
<hr color="#3e81c4" /> 
Untuk <a href="http://otowebsite.blogspot.com/2012/07/membuat-animasi-cover-cddvd-pada-blog.html">Membuat Animasi Cover CD/DVD Pada Blog</a> ini juga sangat-sangatlah mudah sekali Anda hanya perlu mengcopy dua kode yang saya siapkan untuk <a href="http://otowebsite.blogspot.com/2012/07/membuat-animasi-cover-cddvd-pada-blog.html">Membuat Animasi Cover CD/DVD Pada Blog</a>. Untuk itu silahkan Anda lihat langkah-langkah berikut ini untuk mulai <a href="http://otowebsite.blogspot.com/2012/07/membuat-animasi-cover-cddvd-pada-blog.html">Membuat Animasi Cover CD/DVD Pada Blog</a>. 
 
1.Masuk ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Dalam Edit HTML temukan kode ]]></b:skin> atau <style>, Bila kesulitan mencari kode HTML coba Anda lihat DISINI. 
 
4. Jika sudah ketemu sekarang letakkan kode berikut tepat di atasnya. 
 
<blockquote class="tr_bq">div.dvd-cover { 
width : 940px; 
margin : 0 auto 3em auto; 
} 
div.dvd-cover:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; 
} 
div#dvd-cover-wadah { 
position : relative; 
float : left; 
width : 240px; 
margin-right : 60px; 
padding : 320px 0 1.5em 0; 
} 
div.dvd-cover img[alt*="Cover"] { 
z-index : 2; 
position: absolute; 
top : 0; 
left : 0; 
} 
div.dvd-cover img[alt*="Disc"] { 
z-index : 1; 
position: absolute; 
top : 70px; 
left : 85px; 
} 
div.dvd-cover a:hover img[alt*="Cover"] { 
-moz-transform : rotate(-1deg); 
-moz-transform-origin : 50% 100%; 
-o-transform : rotate(-1deg); 
-o-transform-origin : 50% 100%; 
-webkit-transform : rotate(-1deg); 
-webkit-transform-origin : 50% 100%; 
transform : rotate(-1deg); 
transform-origin : 50% 100%; 
} 
div.dvd-cover a:hover img[alt*="Disc"] { 
-moz-transform : translate(40px,0) rotate(300deg); 
-o-transform : translate(40px,0) rotate(300deg); 
-webkit-transform : translate(40px,0) rotate(300deg); 
transform : translate(40px,0) rotate(300deg); 
} 
div.dvd-cover img[alt*="Cover"], div.dvd-cover img[alt*="Disc"] { 
-moz-transition : all .5s ease-in-out; 
-o-transition : all .5s ease-in-out; 
-webkit-transition : all .5s ease-in-out; 
transition : all .5s ease-in-out; 
}</blockquote> 
5. Simpan template. 
 
6. Pergi ke Dasbor klick Tata Letak. 
 
7. Klick Tambah Gadget ➨ Pilih elemen HTML/Java Script. 
 
8. Lalu copy kode berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script 
 
<blockquote class="tr_bq"><div class="dvd-cover"> 
<div id="dvd-cover-wadah"> 
<a href="http://otowebsite.blogspot.com"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcMeCza5yRkMObDCKAjIHaNhOuIwUIjTY6VySswv42rRRJS2rkKQeakvn_mC2x-lQ5BV6FagQXbpCQxgibLfkCKU2S3QA16L7FQUReFtC6VEonbD9N23mpx_8jFP84N-gC_RfPWAWA6g/s1600/page1.jpg" alt="DVD Cover"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg727eaoPfhyntcgzFETptNTBjKKOADEtV4V1hRGCbQg6nZagC34SDe9PkiPO7INV87YZiX0hJYxB6njaStVD4yvp2Mtwg9Pn-Tu4E_dni2J4d4ubHZnoGmb8UBUIBxUvmIeLdp6OA7sg/s1600/OW.png" alt="DVD Disc"></a> 
</div> 
</div></blockquote> 
9. Simpan. 
 
<hr />Melakukan perubahan 
<hr /> 
Dari kode pada tahap 8 ada beberapa kode yang bisa Anda rubah: 
 
<ul><li>Warna kuning Adalah url tujuan silahkan Anda rubah sesuai dengan ke'ingingan Anda.</li>
<li>Warna biru adalah kode url gambar Cover CD/DVD juga bisa Anda rubah.</li>
<li>Warna hijau adalah kode url gambar Disk CD/DVD menurut saya tidak perlu di rubah, tapi terserah Anda.</li>
</ul> 
<hr color="#3e81c4" />Bagaimana Selanjutnya ?!? 
<hr color="#3e81c4" /> 
Dari langkah-langkah di atas bila Anda masih mengalami kesulitan dalam <a href="http://otowebsite.blogspot.com/2012/07/membuat-animasi-cover-cddvd-pada-blog.html">Membuat Animasi Cover CD/DVD Pada Blog</a> Maka silahkan untuk bertanya di kotak komentar, saya akan secepat mungkin membantu Anda. 
Karna saya ada di sini! 
 
Mudah-mudahan Anda suka dengan postingan kali ini, tunggu saja postingan selanjutnya untuk article yang lebih keren dan tak kalah menarik!

Membuat Animasi Cover CD/DVD Pada Blog

Kembali di tutorial Blogger!!! Dalam postingan kali ini Oto Website akan berbagi sebuah tutorial dan untuk kali ini kita membahas tentang menu atau navigasi dan kali ini lagi temanya adalah Membuat An…

Baca selengkapnya »

26 Jul 2012

Multi Level Drop Down Menu Dengan CSS3 Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigcFQvBtaygpClvDJSkLSyDe6Y5za-gDedGa_YYj4DWsN6g-Dx16Qx1UcNSf7TnhKRSg5rZdCZhL7slLLJF4uxtiUr34QJDrnI6wt2IuJ4VlhefldEqWCErcZALo5BzTfvYphtcfHr6lg/s1600/dropdownwithcc3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigcFQvBtaygpClvDJSkLSyDe6Y5za-gDedGa_YYj4DWsN6g-Dx16Qx1UcNSf7TnhKRSg5rZdCZhL7slLLJF4uxtiUr34QJDrnI6wt2IuJ4VlhefldEqWCErcZALo5BzTfvYphtcfHr6lg/s640/dropdownwithcc3.gif" width="640" /></a></div>Hari ini saya akan berbagi Multi Level Drop Down Menu dari CSS3, dalam tutorial hari ini saya berbagi Multi Level Drop Down Menu Dengan CSS3 yang bekerja dengan CSS3 murni dan setiap gambar tunggal tidak termasuk dalam menu, adalah bekerja dengan CSS3 murni, tidak akan mempengaruhi kecepatan loading blog Anda dibandingkan dengan menu jQuery dan menu lainnya yang bekerja dengan script. 
Menu ini dirancang oleh Rethnaraj Rambabu dari bloggermint saya melakukan banyak perubahan pada menu ini untuk bekerja dengan baik di blogger. Jadi sebelum kita membahas cara menginstalnya pada blogger Anda silahkan Anda lihat dulu demonya. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/Multi%20Level%20Drop%20Down%20CSS3.html" target="_blank">LIHAT DEMO</a></div> 
 
<hr color="#3e81c4" />Cara Tambah This Menu Untuk Blogger? 
<hr color="#3e81c4" /> 
Menu ini dapat dengan mudah diinstal pada setiap blog blogger dalam 2 langkah mudah. Pertama kita akan menerapkan bagian CSS menu dalam template dan dalam Bagian Kedua terakhir kita akan menambahkan bagian widget HTML dari menu sebagai HTML / JavaScript. Menu ini begitu bersih dan rapi sehingga blogger baru juga dapat dengan mudah menambahkannya ke blog Anda, jika Anda tidak bisa saya di sini. 
 
<hr />1. Menginstal Kode CSS3 pada template 
<hr /> 
1.Masuk ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Dalam Edit HTML temukan kode 
 
<blockquote class="tr_bq">]]></b:skin> atau <style></blockquote>Bila kesulitan mencari kode HTML coba Anda lihat <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
4. Lalu letakkan kode berikut tepat di atasnya. 
 
<blockquote class="tr_bq">/* Drop Down Menu By otowebsite.blogspot.com */ 
#nav { 
 float: left; 
 font: bold 12px Arial, Helvetica, Sans-serif; 
 border: 1px solid #121314; 
 border-top: 1px solid #2b2e30; 
 overflow: hidden; 
 width: 100%; 
 background: #3C4042; 
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) ); 
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); 
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); 
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; 
} 
#nav ul { 
 margin: 0; 
 padding: 0; 
 list-style: none; 
} 
#nav ul li { 
 float: left; 
} 
#nav ul li a { 
 float: left; 
 color: #d4d4d4; 
 padding: 10px 20px; 
 text-decoration: none; 
 background: #3C4042; 
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) ); 
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); 
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); 
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; 
 border-left: 1px solid rgba(255, 255, 255, 0.05); 
 border-right: 1px solid rgba(0,0,0,0.2); 
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); 
} 
/* Drop Down Menu By otowebsite.blogspot.com */ 
#nav ul li a:hover, 
#nav ul li:hover > a { 
 color: #252525; 
 background: #3C4042; 
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); 
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); 
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); 
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; 
} 
#nav li ul a:hover, 
#nav ul li li:hover > a { 
 color: #2c2c2c; 
 background: #5C9ACD; 
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) ); 
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); 
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); 
 border-bottom: 1px solid rgba(0,0,0,0.6); 
 border-top: 1px solid #7BAED9; 
 text-shadow: 0 1px rgba(255, 255, 255, 0.3); 
} 
/* Drop Down Menu By otowebsite.blogspot.com */ 
#nav li ul { 
 background: #3C4042; 
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); 
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); 
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); 
 left: -999em; 
 margin: 35px 0 0; 
 position: absolute; 
 width: 160px; 
 z-index: 9999; 
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
 border: 1px solid rgba(0, 0, 0, 0.5); 
} 
#nav li:hover ul { 
 left: auto; 
} 
#nav li ul a { 
 background: none; 
 border: 0 none; 
 margin-right: 0; 
 width: 120px; 
 box-shadow: none; 
 -moz-box-shadow: none; 
 -webkit-box-shadow: none; 
 border-bottom: 1px solid transparent; 
 border-top: 1px solid transparent; 
} 
.nav ul li ul { 
    position: absolute; 
    left: 0; 
    display: none; 
    visibility: hidden; 
} 
.nav ul li ul li { 
    display: list-item; 
    float: none; 
} 
.nav ul li ul li ul { 
    top: 0; 
} 
.nav ul li ul li a { 
    font: normal 13px Verdana; 
    width: 160px; 
    padding: 5px; 
    margin: 0; 
    border-top-width: 0; 
    border-bottom: 1px solid gray; 
} 
#nav li li ul { 
 margin: -1px 0 0 160px; 
 visibility: hidden; 
} 
#nav li li:hover ul { 
 visibility: visible; 
} 
/* Drop Down Menu By otowebsite.blogspot.com */</blockquote> 
5. Simpan template. 
 
Anda sudah berhasil meginstal CSS Multi Level Drop Down Menu dan sekarang kita lanjut ke langkah ke dua. 
 
<hr />2. Menambahkan Widget HTML/Java Script. 
<hr /> 
1. Sekarang pergi ke Tata Letak. 
 
2. Klick Tambah Gadget (Peletakkan Gadget tersebut seperti pada gambar) 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivarJULJ0FyQC4sOlqzGxsQtiaI2_sBuSP31mqnQk2fPL9BCGMC0n2Jq1gVT-rZPWuDFKuKqKhbMmM_5G4GqgSvr43EJK47EB9UHa_O8VPHCnSVN4rj3dfJYMhlAhmNWaVoIoEN5nT-lg/s1600/aa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivarJULJ0FyQC4sOlqzGxsQtiaI2_sBuSP31mqnQk2fPL9BCGMC0n2Jq1gVT-rZPWuDFKuKqKhbMmM_5G4GqgSvr43EJK47EB9UHa_O8VPHCnSVN4rj3dfJYMhlAhmNWaVoIoEN5nT-lg/s640/aa.png" width="640" /></a></div> 
3. Pilih element HTML/Java Script. 
 
4. Lalu copy kode di bawah ini dan paste di dalam element HTML/Java Script tadi. 
 
<div class="md7"><div id="nav"> 
 <ul> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About Us</a></li> 
  <li><a href="#">Our Portfolio</a></li> 
  <li><a href="#">One Dropdown</a></li> 
  <li><a href="#">Three Levels</a> 
  <ul> 
   <li><a href="#">Level 2.1</a></li> 
   <li><a href="#">Level 2.2</a></li> 
   <li><a href="#">Level 2.3</a></li> 
   <li><a href="#">Level 2.4</a></li> 
   <li><a href="#">Level 2.5</a></li> 
  </ Ul> 
  </li> 
  <li><a href="#">Services</a></li> 
  <li><a href="#">Contact Us</a></li> 
 </ Ul> 
</div></div> 
5. Simpan 
 
<hr color="#3e81c4" />Menyesuaikan Menu 
<hr color="#3e81c4" /> 
Sekarang waktunya anda menyesuaikan menu dengan megganti  # Url Anda. 
Ganti Home dan seterusnya dengan nama menu. 
 
<hr color="#3e81c4" />Butuh Bantuan 
<hr color="#3e81c4" /> 
Dengan mengikuti langkah di atas, jika Anda tidak dapat membuat menu yang Anda inginkan maka cukup hubungi saya di komentar dengan pertanyaan Anda. Saya akan berusaha secepat mungkin membalasnya!

Multi Level Drop Down Menu Dengan CSS3 Untuk Blogger

Hari ini saya akan berbagi Multi Level Drop Down Menu dari CSS3, dalam tutorial hari ini saya berbagi Multi Level Drop Down Menu Dengan CSS3 yang bekerja dengan CSS3 murni dan setiap gambar tunggal ti…

Baca selengkapnya »

25 Jul 2012

Twitter Followers Box Auto Hide

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVvBDyGw_ZBbUixgTakx1EOXpUhIRhQbb5RzJUjWUA19AGXlunUTE-arwfhaEHg2O2mu9qIX8gGENg9nrdXFvQMgDiT7Vu09dde0oDYcenyw96EZYuJbDQla2neHWSnP6-OqtKKPwfmg0/s1600/follow+box.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVvBDyGw_ZBbUixgTakx1EOXpUhIRhQbb5RzJUjWUA19AGXlunUTE-arwfhaEHg2O2mu9qIX8gGENg9nrdXFvQMgDiT7Vu09dde0oDYcenyw96EZYuJbDQla2neHWSnP6-OqtKKPwfmg0/s1600/follow+box.png" /></a></div>Tidak perlu di jelaskan lagi apa itu twitter dan apa ke untungannya bila di pasang di Blog/Situs Anda. 
Kegunaan memasang twitter box memanglah sangat banyak di antaranya untuk mendapatkan banyak pengikut di blog/situs, untuk memodifikasi blog/situs ataupun untuk mempercantik blog/situs. 
 
Sebelumya Oto Website pernah membahas tentang twitter di blog/situs ya itu <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-oto-website.html" target="_blank">Twitter Followers Box Oto Website Generator</a>. 
 
Untuk kali ini masih sama dengan memasang twitter di blog/situs dan kali ini temanya adalah <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-auto-hide.html">Twitter Followers Box Auto Hide</a>. 
Widget ini ada perbedaan dari <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-oto-website.html" target="_blank">Twitter Followers Box Oto Website Generator</a> perbedaanya adalah widget ini akan melayang di bagian kanan blog/situs Anda dan widget ini juga memiliki fitur Auto Hide sama dengan <a href="http://otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html" target="_blank">Cara Membuat Facebook Like Auto Hide Di Blog</a>. 
 
<hr color="#3e81c4" />Cara Memasang Twitter Followers Box Auto Hide di Blogger 
<hr color="#3e81c4" /> 
Untuk cara memasangnya pada situs/blog Anda juga cukup mudah, silahkan ikuti langkah berikut ini. 
 
1. Login ke akun blogger Anda. 
 
2. Sekarang kita akan menginstal kode jQuery 1.6.1 - Lewati tahap ini bila di template Anda sudah terinstal jQuery 1.6.1 dan silaahkan lansung menuju tahap no 6. 
 
3. Pada Dasbor klick Template ➨ Edit HTML. 
 
4. Lalu cari kode </head> dan letakkan kode jQuery berikut tepat di atasya ( Bila kesulitan mencari kode HTML silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a> ) 
 
<blockquote class="tr_bq"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"type="text/javascript"></script></blockquote> 
5. Simpan Template. 
 
6. Sekarang menambah gadget, caranya : Pergi ke Dasbor klick Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script. 
 
7. Lalu letakkan kode berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script. 
 
<blockquote class="tr_bq"><script type="text/javascript"> 
// 
</script> 
<style type="text/css">.owlikebox{background: url("http://3.bp.blogspot.com/-erfRWcXzmgU/TwFo5Voq2oI/AAAAAAAACLA/9sdI9M7iwhg/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 275px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.owlikebox div{border:none;position:relative;display:block;}.owlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.owlikebox span a{color: #808080;text-decoration:none;}.owlikebox span a:hover{text-decoration:underline;}</style><div class="owlikebox" style=""><div><div id="twitterfanbox"><script type="text/javascript">fanbox_init("otowebsite");</script> 
</div id="twitterfanbox">By <a href="http://www.otowebsite.blogspot.com/">Oto Website</a> / <a href="http://otowebsite.blogspot.com/2012/04/static-twitter-pop-out-fan-follow-me.html">+Get This!</a></div></div></blockquote> 
<blockquote class="tr_bq">Keterangan : Ganti otowebsite dengan username twitter Anda.</blockquote> 
8. Simpan. 
 
Sekarang Anda bisa lihat hasilnya pada blog/situs Anda. 
 
Sekian untuk kali ini, mudah-mudahan anda suka dengan tutorial di atas !!!

Twitter Followers Box Auto Hide

Tidak perlu di jelaskan lagi apa itu twitter dan apa ke untungannya bila di pasang di Blog/Situs Anda. Kegunaan memasang twitter box memanglah sangat banyak di antaranya untuk mendapatkan banyak pengi…

Baca selengkapnya »

24 Jul 2012

Load more posts

Oto Website

Mengganti Tulisan Poskan Komentar Dengan Gambar Keren

Membuat Link Nudging dengan jQuery atau CSS

10+ Custom 404 Error Pages Untuk Blogger

OW - HTML Editor

Tema Batik Untuk Twitter atau Situs

Tambahkan Facebook Recommendation Bar Untuk Blogger

Meta Tag Generator Tool

1000+ Tema Kotak Komentar Untuk Blogger

Gambar dengan Zoom Effect

Membuat Animasi Cover CD/DVD Pada Blog

Multi Level Drop Down Menu Dengan CSS3 Untuk Blogger

Twitter Followers Box Auto Hide

Entri Populer

Arsip Blog