Oto Website

Mystique Blogger Template

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc972Kh-OM72PqfNxtfuy8RWHPegR0cMKMHoDfewyrkBnaguVFyGBm8AF39UYhx1odkmduStWOKaqRBkAcVdBK9W3Dyd9CbQGJ0Z98iS6nfHguVE4xutIBs6TnH2tUvtRzO1-rPZrz1g/s1600/OW.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc972Kh-OM72PqfNxtfuy8RWHPegR0cMKMHoDfewyrkBnaguVFyGBm8AF39UYhx1odkmduStWOKaqRBkAcVdBK9W3Dyd9CbQGJ0Z98iS6nfHguVE4xutIBs6TnH2tUvtRzO1-rPZrz1g/s1600/OW.jpg" width="640" /></a></div>
 
<div style="text-align: center;">
<a class="button" href="http://mystique-theme.blogspot.com/" target="_blank">Demo Template</a></div>
 
<div style="text-align: center;">
<a class="button" href="http://adf.ly/d7yfr" target="_blank">Unduh Template</a></div>
 
Nama template: Mystique 
 
Keterangan: Mystique adalah Template premium blogger yang diadaptasi dari WordPress dengan 2 kolom dan sidebar kanan. 
 
Tata letak yang sangat baik untuk blog tentang fantasi atau buku harian. 
 
 
Tanggal rilis: Bulan 11 tahun 2009 
 
 
Template Auhor : ThemeCraft 
 
 
Dasar Instruksi: Bagaimana menginstal template Blogger 
 
 
Cara Pasang: 
<ol>
<li>Download dulu Templatenya.</li>
<li>Extract file .zip menjadi folder.</li>
<li>Masuk ke Blogger sobat.</li>
<li>Lalu menuju "Rancangan".</li>
<li>Centang "Expand Template Widget".</li>
<li>Pada Backup/Restore Template, pilihlah browse.</li>
<li>Ambil file "Precision Blogger Template" dan unggah.</li>
<li>Simpan.</li>
</ol>

Mystique Blogger Template

Demo Template Unduh Template Nama template: Mystique Keterangan: Mystique adalah Template premium blogger yang diadaptasi dari Wo...

Baca selengkapnya »

Membuat Navigation Menus Css3 Bergaya Attractive Dark

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVfvCLbatJJFKC1upLVLjjhW9WodN_uC6EPK0id4pCIfdP_0t4MOXRhzYCDf1QLyCKWzo4VycXiapWvsNwW_Kau1feVC2lR6ItfE6xWUZksqZnJbi-2bbGkoniL6XXXVBvEMtL4VJx2Q/s1600/Demo+Blog+Oto+Website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVfvCLbatJJFKC1upLVLjjhW9WodN_uC6EPK0id4pCIfdP_0t4MOXRhzYCDf1QLyCKWzo4VycXiapWvsNwW_Kau1feVC2lR6ItfE6xWUZksqZnJbi-2bbGkoniL6XXXVBvEMtL4VJx2Q/s640/Demo+Blog+Oto+Website.png" width="640" /></a></div>Navigation Menus adalah sebuah alat yang kegunaanya untuk memudahkan Pengunjung untuk mengetahui isi dari web kita. Navigation Menus Tidak jauh beda dengan daftas isi sebuah web, perbedaannya hanya jika daftar isi maka kita akan di suguhi semua daftar posting yang ada di web tersebut, sementara Navigation Menus kita akan di suguhi apa yang Admin web tersebut pasang pada Navigation Menus  seperti halaman, profil dan lain sebagainya. Untuk perjumpaan kali ini kita akan berbagi tutorial blogger yang membahas tentang Navigation Menus ya itu : Membuat Navigation Menus Css3 Bergaya Attractive Dark. 
Membuat Navigation Menus Css3 Bergaya Attractive Dark adalah sebuah navigasi bergaya Attractive Dark yang sangat menarik, untuk lebih jelasnya silahkan lihat demo berikut: 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Lihat Demo</div> 
<div style="text-align: center;"><a class="button" href="http://demo-otowebsite.blogspot.com/2013/05/membuat-navigasi-css3-bergaya.html" target="_blank">Lihat Demo</a></div> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat + Cara Memasang di Blogger</div>Mengingat akan banyaknya blogger yang kebingungan tentang cara pemasangan maka kali ini Saya akan memberikan Cara Membuat + Memasangnya di Blogger, silahkan ikuti langkah berikut untuk memulainya: 
 
 
1. Login ke Akun Blogger Anda. 
2. Pilih Template > Edit HTML. 
3. Sekarang temukan kode ]]></b:skin> 
4. Lalu letakkan kode berikut di atasnya 
 
<blockquote class="tr_bq">/* CSS3 Kode untuk menu dimulai di sini otowebsite.blogspot.com */ 
#ow_navs { 
 background:#2c2c2c; 
 margin:0 auto; 
 height:50px; 
 border-bottom:5px solid #cd2122; 
} 
 #ow_navs .menu-alert{ 
 float:left; 
 padding:18px 0 0 10px ; 
 font-style:italic; 
 color:#FFF; 
 } 
 #top-menu-mob , #main-menu-mob{ display:none; } 
 #ow_navs ul li { 
 text-transform: uppercase; 
 font-family: Oswald,arial,Georgia, serif; 
 font-size:16px; 
 position: relative; 
 display: inline-block; 
 float: left; 
 border:1px solid #222222; 
 border-width:0 0 0 1px; 
 height:50px; 
 } 
 #ow_navs ul li:first-child, 
 #ow_navs ul li:first-child a{border:0 none;} 
 #ow_navs ul li:last-child a{border-right:0 none;} 
 #ow_navs ul li a { 
 display: inline-block; 
 height: 50px; 
 line-height: 50px; 
 color: #ddd; 
 padding:0 14px; 
 text-shadow:0 1px 1px #000; 
 border-left:1px solid #383838; 
 } 
 #ow_navs ul li a .sub-indicator{} 
 #ow_navs ul li a:hover {} 
 #ow_navs ul ul{ 
 display: none; 
 padding:0; 
 position: absolute; 
 top: 50px; 
 width: 180px; 
 z-index: 99999; 
 float: left; 
 background: #2d2d2d !important; 
 -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2); 
 box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2); 
 -webkit-border-bottom-right-radius: 3px; 
 -webkit-border-bottom-left-radius: 3px; 
 -moz-border-radius-bottomright: 3px; 
 -moz-border-radius-bottomleft: 3px; 
 border-bottom-right-radius: 3px; 
 border-bottom-left-radius: 3px; 
 } 
 #ow_navs ul ul li, #ow_navs ul ul li:first-child { 
 background: none !important; 
 z-index: 99999; 
 min-width: 180px; 
 border:0 none; 
 border-bottom: 1px solid #222; 
 border-top: 1px solid #383838; 
 font-size:13px; 
 height:auto; 
 margin:0; 
 } 
 #ow_navs ul ul li:first-child ,#ow_navs ul li.current-menu-item ul li:first-child, 
 #ow_navs ul li.current-menu-parent ul li:first-child,#ow_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;} 
 #ow_navs ul ul ul ,#ow_navs ul li.current-menu-item ul ul, #ow_navs ul li.current-menu-parent ul ul, #ow_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; } 
 #ow_navs ul.sub-menu a , 
 #ow_navs ul ul li.current-menu-item a, 
 #ow_navs ul ul li.current-menu-parent a, 
 #ow_navs ul ul li.current-page-ancestor a{ 
 border:0 none; 
 background: none !important; 
 height: auto !important; 
 line-height: 1em; 
 padding: 10px 10px; 
 width: 160px; 
 display: block !important; 
 margin-right: 0 !important; 
 z-index: 99999; 
 color: #ccc !important; 
 text-shadow:0 1px 1px #000 !important; 
 } 
 #ow_navs ul li.current-menu-item ul a, 
 #ow_navs ul li.current-menu-parent ul a, 
 #ow_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;} 
 #ow_navs ul li:hover > a, #ow_navs ul :hover > a { color: #FFF ;} 
 #ow_navs ul ul li:hover > a, 
 #ow_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;} 
 #ow_navs ul li:hover > ul {display: block;} 
 #ow_navs ul li.current-menu-item, 
 #ow_navs ul li.current-menu-parent, 
 #ow_navs ul li.current-page-ancestor{ 
 margin-top:0; 
 height:50px; 
 border-left:0 none !important; 
 } 
 #ow_navs ul li.current-menu-item ul.sub-menu a, #ow_navs ul li.current-menu-item ul.sub-menu a:hover, 
 #ow_navs ul li.current-menu-parent ul.sub-menu a, #ow_navs ul li.current-menu-parent ul.sub-menu a:hover 
 #ow_navs ul li.current-page-ancestor ul.sub-menu a, #ow_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;} 
 #ow_navs ul li.current-menu-item a, #ow_navs ul li.current-menu-item a:hover, 
 #ow_navs ul li.current-menu-parent a, #ow_navs ul li.current-menu-parent a:hover, 
 #ow_navs ul li.current-page-ancestor a, #ow_navs ul li.current-page-ancestor a:hover{ 
 background:#cd2122; 
 text-shadow:0 1px 1px #b43300; 
 color:#FFF; 
 height:50px; 
 line-height:50px; 
 border-left:0 none !important; 
 } 
 #ow_navs ul.sub-menu li.current-menu-item,#ow_navs ul.sub-menu li.current-menu-item a, 
 #ow_navs li.current-menu-item ul.sub-menu a,#ow_navs ul.sub-menu li.current-menu-parent, 
 #ow_navs ul.sub-menu li.current-menu-parent a,#ow_navs li.current-menu-parent ul.sub-menu a, 
 #ow_navs ul.sub-menu li.current-page-ancestor,#ow_navs ul.sub-menu li.current-page-ancestor a, 
 #ow_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;} 
 #ow_navs ul li.menu-item-home ul li a, 
 #ow_navs ul ul li.menu-item-home a, 
 #ow_navs ul li.menu-item-home ul li a:hover{ 
 background-color:transparent !important; 
 text-indent:0; 
 background-image:none !important; 
 height:auto !important; 
 width:auto; 
 }</blockquote> 
5. Simpan template. 
 
6. Sekarang pergi ke Tata Letak > Tambah Gadget. 
 
7. Pilih Elemen HTML/JavaScript. 
 
8. Copy kode berikut dan letakkan di dalamnya. 
 
<blockquote class="tr_bq"><nav id="ow_navs"> 
<div class="container"> 
<div class="main-menu"> 
<ul class="menu" id="menu-main"> 
<li><a href="http://otowebsite.blogspot.com/">Home</a></li> 
<li><a href="#">Mode</a> 
<ul class="sub-menu"> 
<li><a href="#">Modeling</a></li> 
<li><a href="#">Kebanyakan Model</a></li> 
<li><a href="#">Model BonBin</a></li> 
<li><a href="#">Nggak ada Model</a></li> 
</ul> 
</li> 
<li><a href="#">Downloads</a> 
<ul class="sub-menu"> 
<li><a href="#">Template</a></li> 
<li><a href="#">Software</a></li> 
<li><a href="#">Social</a></li> 
<li><a href="#">Video Apa Aja</a></li> 
</ul> 
</li> 
<li><a href="#">Templates</a> 
<ul class="sub-menu"> 
<li><a href="#">Authors</a></li> 
<li><a href="#">Sitemap</a></li> 
<li><a href="#">Tags</a></li> 
<li><a href="#">Timeline</a></li> 
</ul> 
</li> 
<li><a href="#">Categori</a> 
<ul class="sub-menu"> 
<li><a href="#">Blogger Trick</a></li> 
<li><a href="#">CSS Trick</a></li> 
<li><a href="#">Berita Olahraga</a></li> 
<li><a href="#">Berita Social Media</a></li> 
<li><a href="#">Social Media</a></li> 
<li><a href="#">Dan Lain-lain deh</a></li> 
</ul> 
</li> 
<li><a href="#">Layout</a> 
<ul class="sub-menu"> 
<li><a href="#">Full Width</a></li> 
<li><a href="#">Right Sidebar</a></li> 
<li><a href="#">Left SIdebar</a></li> 
</ul> 
</li> 
<li><a href="#">Social Media</a> 
<ul class="sub-menu"> 
<li><a href="#">Google Plus</a></li> 
<li><a href="#">Facebook</a></li> 
<li><a href="#">Twitter</a></li> 
<li><a href="#">Pinterest</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</div> 
</nav></blockquote> 
9. Simpan. 
 
<ul><li>Keterangan: Silahkan Anda sesuaikan menu ini dengan menambahkan URL dan Nama Menu.</li>
</ul><style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor</div> 
Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/05/membuat-navigation-menus-css3-bergaya.html">Membuat Navigation Menus Css3 Bergaya Attractive Dark</a>, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan <a href="http://otowebsite.blogspot.com/2013/05/membuat-navigation-menus-css3-bergaya.html">Membuat Navigation Menus Css3 Bergaya Attractive Dark</a> maka silahkan ajukan pertanyaan Anda dalam komentar.

Membuat Navigation Menus Css3 Bergaya Attractive Dark

N avigation Menus adalah sebuah alat yang kegunaanya untuk memudahkan Pengunjung untuk mengetahui isi dari web kita. Navigation Menus Tidak ...

Baca selengkapnya »

Tema Vanila untuk Postingan Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGI7JZC6IZkQvmA2IOmzSAuKad4WJvE9CVjLarKLebTHQEEpWV6_nj1eg6m8wr07EVa67orBIJEAa8vJT4LdksoAw2BKrx8UtCf2OrvkwcN-kk_WcFnsaz3NAy6vm7Yk5j45iINHg4g/s1600/Tema+Vanila+-+OW.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/AVvXsEhjGI7JZC6IZkQvmA2IOmzSAuKad4WJvE9CVjLarKLebTHQEEpWV6_nj1eg6m8wr07EVa67orBIJEAa8vJT4LdksoAw2BKrx8UtCf2OrvkwcN-kk_WcFnsaz3NAy6vm7Yk5j45iINHg4g/s1600/Tema+Vanila+-+OW.png" /></a></div>
Mempercantik postingan atau artikel sebuah web dengan background merupakan salah satu trik untuk mempercantik web Anda. Di tutorial kali ini <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Oto Website</a> akan berbagi cara tentang mempercantik blog dengan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="">Tema Vanila untuk Postingan Blogger</a>. 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila</a> adalah tema atau background yang berguna untuk mempercantik artikel Anda, seperti memberi tema pada tag <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">HTML</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">CSS</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">JavaScript</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">JQuery</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">PHP</a>, dan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">XML</a>. 
Tema Vanila biasa juga di sebut dengan Tag PRE karna penggunaanya kita harus menyisipkan Tag PRE di antara Tag yang ingin kita bungkus dengan Tema Vanila. 
 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Fitur Tema Vanila untuk Postingan Blogger:</a> 
 
<ul>
<li>Memiliki Header atau title yang berbeda-beda.</li>
<li>Tema Vanila memiliki enam background standar yang berbeda.</li>
</ul>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
 
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/Demo%20Tema%20Vanila.html" target="_blank">Lihat Demo</a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat Tema Vanila untuk Postingan Blogger</div>
 
Untuk cara penginstalan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger</a> dan cara menggunakannya sangatlah mudah, kita hanya perlu menanamkan tag CSS pada template dan memanggil tema ini dengan tag pre sesuai dengan jenisnya. 
Disini <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> akan menjelaskan tentang cara menginstalnya pada blogger. Untuk blogger silahkan ikuti langkah berikut: 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Cara Menginstal Tema Vanila untuk Postingan Blogger</a> 
<hr color="#0071bb" />
 
1. Login ke Akun blogger Anda. 
2. Pada Dasbord pilih Template > Edit HTML. 
3. Lalu temukan tag ]]></b:skin> 
4. Setelah ketemu sekarang letakkan CSS berikut di atasnya. 
 
<blockquote class="tr_bq">
/*Tema Vanila untuk Postingan Blogger by: Oto Website */ 
pre { 
background-color:white; 
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:linear-gradient(top, #f5f5f5 50%, white 50%); 
-webkit-background-size:30px 30px; 
-moz-background-size:30px 30px; 
-ms-background-size:30px 30px; 
-o-background-size:30px 30px; 
background-size:30px 30px; 
background-repeat:repeat; 
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace; 
color:#333; 
border:2px solid #666;-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 
position:relative; 
padding:0 7px; 
margin:10px 5px; 
overflow:auto; 
word-wrap:normal; 
white-space:pre; 
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2); 
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2); 
box-shadow:0 1px 2px rgba(0,0,0,0.2); 
position:relative; 
} 
pre[data-codetype] { 
padding:29px 1em 7px 1em; 
} 
pre[data-codetype]:before { 
content:attr(data-codetype); 
display:block; 
position:absolute; 
top:0; 
right:0; 
left:0; 
background-color:#666; 
padding:0 7px; 
font:bold 11px/20px Arial,Sans-Serif; 
color:white; 
} 
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;} 
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;} 
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;} 
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;} 
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;} 
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;} 
pre[data-codetype="HTML"]:before {background-color:#0B7E88;} 
pre[data-codetype="CSS"]:before {background-color:#7B990C;} 
pre[data-codetype="JavaScript"]:before {background-color:#545448;} 
pre[data-codetype="JQuery"]:before {background-color:#395540;} 
pre[data-codetype="PHP"]:before {background-color:#FF9900;} 
pre[data-codetype="XML"]:before {background-color:#FF0C39; 
}</blockquote>
 
5. Simpan template. 
 
Jika CSS di atas sudah tertanam pada template blogger Anda, maka langkah selanjutnya untuk memanggil <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila</a> adalah dengan menggunakan Tag Pre seperti yang <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> sebutkan di atas. Berikut adalah tag yang di gunakan untug memanggil <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger</a>. 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Kode pemanggil Tema Vanila untuk Postingan Blogger</a> 
<hr color="#0071bb" />
 
Letakkan tag berikut di dalam postingan Anda, dan ketika Anda ingin menggunakan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila</a>! 
 
<blockquote class="tr_bq">
<pre data-codetype="HTML">Disini Tag XML</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="CSS">Disini Tag CSS</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="JavaScript">Disini Tag JavaScript</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="JQuery">Disini Tag JQuery</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="PHP">Disini Tag PHP</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="XML">Disini Tag XML</pre></blockquote>
 
 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">NB:</a> Ganti teks yang di BLOCK KUNING dengan tang yang ingin di masukkan sesuai temanya. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2</div>
 
Disini <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> juga menyediakan Trik Menginstal <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger Part 2</a>, sebenarnya cara ini sama saja, hanya saja <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> telah membungkus dan mengkompres tag tersebut dan menjadikan JavaScript, jadi Anda dapat memilih salah satu saja. 
Ingin menggunakan tag CSS standart atau menggunakan JavaScript? 
Jika Anda memilih menggunakan JavaScript maka Anda harus menghapus tag CSS di atas selanjutnya: 
 
1. Lalu letakkan JavaScript berikut di atas tag  </head> 
 
<blockquote class="tr_bq">
<link href='https://code-otowebsite.googlecode.com/svn/trunk/Tema Vanila.css' rel='stylesheet'type='text/css'/></blockquote>
 
2. Simpan. 
 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">NB:</a>Untuk pemanggilan Teman Vanila adalah sama dengan tag pemanggil di atas. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
 
Sekian untuk tutorial kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger</a>, jika ada pertanyaan atau masalah dalam penginstalan silahkan ajukan pertanyaan Anda melalui form komentar!

Tema Vanila untuk Postingan Blogger

M empercantik postingan atau artikel sebuah web dengan background merupakan salah satu trik untuk mempercantik web Anda. Di tutorial kali ...

Baca selengkapnya »

Windows 7 Logon Background Changer

Berikut ini Saya akan membagikan atau merekomendasikan sebuah alat atau perangkat lunak untuk pengguna Windows 7, yang di mana dengan menggunakan alat ini maka Anda akan dengan leluasa dapat mengganti <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Background Wellcome Screen Windows 7</a> tanpa harus bermain-main dengan Regedit. 
Tentunya Anda sudah paham apa dampaknya jika Anda bermain-main dengan Regedit dan jika Anda melakukan kesalan pada regedit windows komputer Anda. Besar atau kecil Anda melakukan kesalahan pada regedit maka dampaknya akan sangat terasa sekali bagi windows Anda. 
Seperti yang Saya alami ketika Saya mengganti background<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank"> LogOn</a> dengan mengutak atik regedit dan dampak kesalahannya akan sangat terasa, terasa sangat menyesal setelah melakukannya. 
Untuk itu Saya merekomendasikan Anda untuk menggunakan perangkat lunak ini yang bernama <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Windows 7 Logon Background Changer</a>. Dengan menggunakan alat ini maka Anda tidak perlu lagi khawatir akan masalah atau kesalah dalam regedit pada waktu penggantian background <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">logon</a>. Berikut ini penjelasan dari alat ini: 
 
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Windows 7 Logon Background Changer</a> adalah perangkat lunak open source gratis yang memungkinkan Anda mengubah wallpaper layar logon Windows 7 yang juga dikenal sebagai "<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">layar selamat datang</a>", "<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">layar login</a>" atau <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">LogonUI</a>. 
 
Alat ini bekerja dengan Windows 7 Home Basic, Home Premium, Professional, Ultimate, Enterprise dan Starter, di x86 atau x64 (32 atau 64 bit). Ini juga bekerja pada Windows Server 2008 R2 (tapi Anda tidak harus menggunakannya untuk menyesuaikan server). 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKJaZ2KB94SgaPEFGw_LRqsE0kAm99-S7a0mYMy9fAasmyoM3o5uLTnh45Scb3O8XMVQYjhJ-pxiE9IZx7ox-AkVReis_DrodmeMu4bGIZvRKbRLyr1UUY_Mw4SdgoIn35YVRGaDDXg/s1600/OW+logon+Background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="359" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKJaZ2KB94SgaPEFGw_LRqsE0kAm99-S7a0mYMy9fAasmyoM3o5uLTnh45Scb3O8XMVQYjhJ-pxiE9IZx7ox-AkVReis_DrodmeMu4bGIZvRKbRLyr1UUY_Mw4SdgoIn35YVRGaDDXg/s640/OW+logon+Background.png" width="640" /></a></div>
 
 
Di samping program ini kecil berbasis WPF, di atas adalah demo teknis kemampuan bagus Windows Presentation Foundation bagi mereka yang tertarik dalam WPF. Hal ini membutuhkan GPU layak untuk animasi 3D berjalan lancar. 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Apa yang dilakukannya?</a> 
<hr color="#0071bb" />
<ul>
<li>TIDAK mengubah sistem file, dan program itu sendiri tidak membutuhkan hak admin untuk menjalankan: itu hanya akan meminta Anda untuk menjalankan sebagai admin sebuah file cmd yang sangat sederhana yang menciptakan folder yang diperlukan dan kunci registri dengan hak yang sesuai. Setiap pengguna komputer akan dapat mengubah layar wallpaper Windows 7 logon. Anda juga dapat mencegah pengguna untuk dapat mengganti wallpaper layar logon jika Anda tidak ingin mereka dapat memodifikasi tanpa hak administrator (pilihan yang tersedia dengan mengklik tombol "Settings").</li>
<li>Ini menciptakan file beberapa JPEG berdasarkan gambar yang Anda ingin dan menempatkannya sebagai wallpaper untuk layar login Windows 7, berlaku sesuai ukuran dan menyimpannya menggunakan kualitas kompresi terbaik.</li>
</ul>
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Keterangan Tambahan</a> 
<hr color="#0071bb" />
<ul>
<li>Alat ini memiliki antar muka yang sangat sederhana sehingga akan sangat memudahkan untuk semua pengguna Windows 7.</li>
<li>Ukuran yang kecil.</li>
<li>Anda akan di berikan 2 file exe berbeda untuk menggunakannya: File Win7LogonBackgroundChanger dan Win7LogonBackgroundChangerSetup, Silahkan Anda pilih salah satu sesuai selera.</li>
</ul>
 
Untuk mengunduh <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Windows 7 Logon Background Changer</a> silahkan tekan tombol berikut ini: 
 
 
 
 
<div style="text-align: center;">
<a class="button" href="http://adf.ly/NW2kB" target="_blank">Windows 7 Logon Background Changer</a></div>
 
 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Masalah Yang biasa di hadapi!</a> 
<hr color="#0071bb" />
 
Pada beberapa komputer, pesan galat berikut akan muncul: "Tidak bisa menulis ke folder c:\windows\system32\oobe\info\backgrounds\". 
 
Solusi: Buka "c:\windows\system32\oobe\info\" folder di Windows Explorer, kemudian mengubah nama "backgrounds" folder menjadi "backgrounds2". 
 
 
 
<div style="text-align: right;">
Software By: <a href="http://julien-manici.com/" target="_blank">Julian Manici</a> and publish back by the <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>.</div>

Windows 7 Logon Background Changer

B erikut ini Saya akan membagikan atau merekomendasikan sebuah alat atau perangkat lunak untuk pengguna Windows 7, yang di mana dengan mengg...

Baca selengkapnya »

jQuery Slide Show Lembut Untuk Blogger

Menampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada dunia, sehingga semua pengunjung blog kita akan melihat semua gambar yang kita pamerkan pada blog tersebut. Dan untuk tutorial kali ini <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan membahas dan berbagi tentang gambar slider yang bertema '<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a>'. 
<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a> memiliki efek yang lebih menarik dari slider sebelumnya, karna gambar slider ini memiliki lebih dari satu efek yang berbeda-beda ketika pergantian gambar. 
Untuk lebih jelasanya silahkan lihat demo berikut! 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7pw3-ew7AiP59VN4CENclL7_sDnpslMNsyM1kYxgo0TlB46-fTnPXc__24JSVZAmV6ghn3ulMCr8xG7xEYogyPA2yvDh3kzDrVr4zjjj5Ogfg-10P3yiWLgUiqBxSPv-fR_aMMzdDyw/s1600/otowebsite-slide.png" /></a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
 
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/jQuery%20Slide%20Show%20Lembut.html" target="_blank">Lihat Demo</a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat</div>
 
Untuk cara membuatnya sendiri sebenarnya kita harus menambahkan dua kode berbeda, tapi disini Saya telah menjadikannya satu script mudah tanpa harus Mengedit HTML Anda. 
 
Cara membuatnya Anda hanya cukup ikuti langkah berikut: 
 
1. Login ke Akun Blogger Anda. 
2. Pada Dasbord pilih Tata Letak > Tambah Gadget. 
3. Pilih HTML/JavaScript. 
4. Lalu Copy kode berikut dan letakkan pada element tadi. 
 
<blockquote class="tr_bq">
<style> 
.nivoSlider { 
 position:relative; 
} 
.nivoSlider img { 
 position:absolute; 
 top:0px; 
 left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
 position:absolute; 
 top:0px; 
 left:0px; 
 width:100%; 
 height:100%; 
 border:0; 
 padding:0; 
 margin:0; 
 z-index:60; 
 display:none; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
 display:block; 
 position:absolute; 
 z-index:50; 
 height:100%; 
} 
/* Caption styles */ 
.nivo-caption { 
 position:absolute; 
 left:0px; 
 bottom:0px; 
 background:#000; 
 color:#fff; 
 opacity:0.8; /* Overridden by captionOpacity setting */ 
 width:100%; 
 z-index:89; 
} 
.nivo-caption p { 
 padding:5px; 
 margin:0; 
} 
.nivo-caption a { 
 display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
/* Gaya arah Nav (Next & Prev) */ 
.nivo-directionNav a { 
 position:absolute; 
 top:45%; 
 z-index:99; 
 cursor:pointer; 
} 
.nivo-prevNav { 
 left:0px; 
} 
.nivo-nextNav { 
 right:0px; 
} 
/* Gaya Control nav (1,2,3...) */ 
.nivo-controlNav a { 
 position:relative; 
 z-index:99; 
 cursor:pointer; 
} 
.nivo-controlNav a.active { 
 font-weight:bold; 
} 
table { 
 border-collapse:separate; 
 border-spacing:0; 
} 
caption, th, td { 
 text-align:left; 
 font-weight:normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
 content:""; 
} 
blockquote, q { 
 quotes:"" ""; 
} 
/* Tags HTML5 */ 
header, section, footer, 
aside, nav, article, figure { 
 display: block; 
} 
a, a:visited { 
 color:#2d3536; 
 text-decoration:none; 
 border-bottom:1px dotted #826a4d; 
} 
a:hover, a:active { 
 color:#9e805c; 
 text-decoration:none; 
} 
#slider-wrapper { 
    background:url(https://code-otowebsite.googlecode.com/svn/trunk/slider.png) no-repeat; 
    width:494px; 
    height:310px; 
    margin:0 auto; 
    padding-top:23px; 
    margin-top:50px; 
} 
#slider { 
 position:relative; 
    width:430px; 
    height:250px; 
    margin-left:32px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/loading.gif) no-repeat 50% 50%; 
} 
#slider img { 
 position:absolute; 
 top:0px; 
 left:0px; 
 display:none; 
} 
#slider a { 
 border:0; 
 display:block; 
} 
.nivo-controlNav { 
 position:absolute; 
 left:163px; 
 bottom:12px; 
 background: #000000; 
 -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    padding: 3px; 
    border: 2px solid #CCC; 
    opacity: 0.7; 
    z-index: 99; 
 } 
 .nivo-controlNav:hover{opacity: 1;} 
.nivo-controlNav a { 
 display:block; 
 width:22px; 
 height:22px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/bullets.png) no-repeat; 
 text-indent:-9999px; 
 border:0; 
 margin-right:0px; 
 float:left; 
} 
.nivo-controlNav a.active { 
 background-position:0 -22px; 
} 
.nivo-directionNav a { 
 display:block; 
 width:35px; 
 height:65px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/arrows.png) no-repeat; 
 text-indent:-9999px; 
 border:0; 
} 
a.nivo-nextNav { 
 background-position:-35px 0; 
 right: -40px; 
} 
a.nivo-nextNav:hover{right: -41px;} 
a.nivo-prevNav { 
 left:-40px; 
} 
a.nivo-prevNav:hover{left: -41px;} 
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
} 
.nivo-directionNav a{top: 40%;} 
.clear { 
 clear:both; 
} 
</style> 
    
<div id="wrapper"> 
<div id="slider-wrapper"> 
<div class="nivoSlider" id="slider"> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpbLesS9GAj7-y_RSytHFSOmnsuSAvn74H5-sklS3cT4TOWRJqi0-3hPCeACYSwypTubLYdhOsgQ7U5mcGJx3KV5P6-5ue_DRIluy-6ZxFmg2YY6HGg8mHzyn4SNQUWrfkCPdojxXrg/s1600/OtoWebsite-bedugul.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYinTFF-H1OtdKNLHhzINm06h3-7XFeLLy59H_SI2UCL9lHr2gO5qHVaxV6aCrc05HG9rmf5jR-XRgncKiGoRkFGOjb7Bp3VthQy0_Uesngq2ODMgfF8V9i9E-stroVo4udf7t3jbbmw/s1600/OtoWebsite-gunung+takuban+perahu.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lgl-7Kcv7EKejN-_7rTnCaJeJ7ZdMUkIGkhfDpuXEWk8l3F_zjI5Ur9kiYCjl1N-5sxFNTwsAR9GJPM9o-80mBbwJa34iOJ1KXBmzgmHMzAvTv7UbRFd7_O6loEAZ65VmUjMMoJ4Cw/s1600/OtoWebsite-raja+ampat.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRKnLIQNT4PE3lrJYQCBJzbp1ULM88HLfCqWw9AyALFhmhk8rCk3xIT0yPgSZY0oBRCbho1zPnvwplvv5xRkrO7JGsLIwTEgRB75geX4zMUPEhwK84kyDvWHKUzRjyEMtYYmB-2p7dA/s1600/OtoWebsite-watu+ulo.jpg" /> 
</div> 
</div> 
</div> 
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery-1.4.3.min.js" type="text/javascript"></script> 
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(window).load(function() { 
        $('#slider').nivoSlider({directionNavHide:false}); 
    }); 
    </script></blockquote>
 
<ul>
<li>Keterangan: Tag yang di blok kuning adalah Url gambar, silahkan Anda ganti dengan Url gambar Anda sendiri.</li>
</ul>
5. Simpan Widget. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
 
Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a>, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan <a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a> maka silahkan ajukan pertanyaan Anda dalam komentar.

jQuery Slide Show Lembut Untuk Blogger

M enampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada duni...

Baca selengkapnya »

Google Plus Badge Auto Hide

Google Plus Badge Adalah salah satu sarana untuk mendapatkan para pengunjung blog secara tetap, dengan memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a> Badge maka kita akan memperbolehkan pengunjung untuk mengikuti blog kita melalu Akun Google Plus mereka, dan mengetahui berbagai aktifitas blog kita seperti ada postingan terbaru dan lain sebagainya. 
Kali ini Oto Website akan berbagi cara tentag bagaimana cara membuat atau memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a> Badge di blogger! Karna cara untuk membuat atau memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a> Badge di blogger sangatlah mudah jadi kita akan mengganti topiknya menjadi "<a href="http://otowebsite.blogspot.com/2013/04/google-plus-badge-auto-hide.html">Google Plus Badge Auto Hide</a>". 
Bagi Anda (Admin) blogger/website yang merasa kekurangan atau kehabisan tempat widget di blog/web-nya maka dengan memasang  Google Plus Badge Auto Hide akan sedikit membantu Anda karna dengan memasang Google Plus Badge Auto Hide Anda tidak perlu memberikan tempa widget pada badge ini, di karenakan badge ini akan melayang di sisi kanan blog/situs Anda. 
Cara kerjanya sendiri sama dengan  <a href="http://otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html" target="_blank">Facebook Like Auto Hide</a>. Yaitu badge ini akan muncul ketikan menyentuh cursor dan menutup ketikan cursor tidak menyentuhnya. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">ScreenShot</div> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Nrej8tm0eTmwgb_ykWc9lBHabTDtgr8oGwkCESTmBAwBMbp-6kyBmtNxTT8euZ8RSnSrc6QVNrUm9KbyMfB3DprQa6Ad9LVqYUjyPUzVqlLQBACS3LW1lOsqqeV_lIeyRsuvOCGxfg/s1600/gplus+auto+hide.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Nrej8tm0eTmwgb_ykWc9lBHabTDtgr8oGwkCESTmBAwBMbp-6kyBmtNxTT8euZ8RSnSrc6QVNrUm9KbyMfB3DprQa6Ad9LVqYUjyPUzVqlLQBACS3LW1lOsqqeV_lIeyRsuvOCGxfg/s1600/gplus+auto+hide.png" /></a></div> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat dan Memasang</div> 
Jika Anda ingin menggunakan Google Plus Badge Auto Hide maka sebelumnya Anda harus sudah memiliki Akun Google Plus. Jika belum silahkan baca caranya <a href="http://otowebsite.blogspot.com/2012/05/membuat-halaman-fans-page-google-plus.html" target="_blank">disini</a>. 
Untuk Cara Membuat dan Memasangnya di Blogger silahkan Anda ikuti langkah-langkah berikut ini: 
 
1. Pergi ke Dasbor Blogger Anda. 
2. Pilih Template >> Edit HTML. 
3. Temukan tag <head> 
4. Lalu letakkan scrip berikut di atasnya: 
 
<div class="md4"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://code-otowebsite.googlecode.com/svn/trunk/gplusone.js"></script> 
</div> 
5. Simpan Template Anda. 
 
6. Pilih Tata Letak >> Tambah Gadget >> Pilih elemen HTML/JavaScript. 
 
7. Sekarang letakkan JavaScript berikut ke dalam elemen tadi. 
 
<div class="md8"><script type="text/javascript"> 
/*<![CDATA[*/ 
jQuery(document).ready(function() {jQuery(".OW-gplus").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); 
/*]]>*/ 
</script> 
<style type="text/css"> 
.OW-gplus{background: url("https://code-otowebsite.googlecode.com/svn/trunk/gplus.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 65px;width: 246px;z-index: 99999;position:fixed;right:-250px;top:44%;} 
.OW-gplus div{border:none;position:relative;display:block;} 
</style> 
<div class="OW-gplus" style=""> 
    <div> 
 
 
<div class="g-plus" data-href="//plus.google.com/115780777398536909642" data-rel="publisher"> 
 
 
</div> 
</div> 
</div> 
</div> 
Keterangan : Ganti teks yang di blok merah dengan ID <a href="https://plus.google.com/115780777398536909642?prsrc=1">Google Plus</a> Anda. 
 
8. Simpan. 
 
Sekarang Anda dapat melihat Google Plus Badge Auto Hide ini melayang di sisi kanan blog/web Anda. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor</div> 
Sekian untuk tutorial <a href="http://otowebsite.blogspot.com/2013/04/google-plus-badge-auto-hide.html" target="">Google Plus Badge Auto Hide</a>, Semoga tutorial yang Saya bagiakan kali ini dapat bermanfaat untuk Anda semua. Bila Anda menglami masalah atau pertanyaan tentang tutorial kali ini, silahkan Ajukan pertanyaaan Anda melalui komentar.

Google Plus Badge Auto Hide

G oogle Plus Badge Adalah salah satu sarana untuk mendapatkan para pengunjung blog secara tetap, dengan memasang Google Plus Badge maka kit...

Baca selengkapnya »

Oto Website

Mystique Blogger Template

Membuat Navigation Menus Css3 Bergaya Attractive Dark

Tema Vanila untuk Postingan Blogger

Windows 7 Logon Background Changer

jQuery Slide Show Lembut Untuk Blogger

Google Plus Badge Auto Hide

Entri Populer

Arsip Blog