Oto Website

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><span class="awal">N</span>avigation 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.<br />
Membuat Navigation Menus Css3 Bergaya Attractive Dark adalah sebuah navigasi bergaya Attractive Dark yang sangat menarik, untuk lebih jelasnya silahkan lihat demo berikut:<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Lihat Demo</div><br />
<div style="text-align: center;"><a class="button" href="http://demo-otowebsite.blogspot.com/2013/05/membuat-navigasi-css3-bergaya.html" target="_blank"><b>Lihat Demo</b></a></div><br />
<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><br />
<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:<br />
<br />
<br />
1. Login ke Akun Blogger Anda.<br />
2. Pilih Template > Edit HTML.<br />
3. Sekarang temukan kode ]]></b:skin><br />
4. Lalu letakkan kode berikut di atasnya<br />
<br />
<blockquote class="tr_bq">/* CSS3 Kode untuk menu dimulai di sini otowebsite.blogspot.com */<br />
#ow_navs {<br />
 background:#2c2c2c;<br />
 margin:0 auto;<br />
 height:50px;<br />
 border-bottom:5px solid #cd2122;<br />
}<br />
 #ow_navs .menu-alert{<br />
 float:left;<br />
 padding:18px 0 0 10px ;<br />
 font-style:italic;<br />
 color:#FFF;<br />
 }<br />
 #top-menu-mob , #main-menu-mob{ display:none; }<br />
 #ow_navs ul li {<br />
 text-transform: uppercase;<br />
 font-family: Oswald,arial,Georgia, serif;<br />
 font-size:16px;<br />
 position: relative;<br />
 display: inline-block;<br />
 float: left;<br />
 border:1px solid #222222;<br />
 border-width:0 0 0 1px;<br />
 height:50px;<br />
 }<br />
 #ow_navs ul li:first-child,<br />
 #ow_navs ul li:first-child a{border:0 none;}<br />
 #ow_navs ul li:last-child a{border-right:0 none;}<br />
 #ow_navs ul li a {<br />
 display: inline-block;<br />
 height: 50px;<br />
 line-height: 50px;<br />
 color: #ddd;<br />
 padding:0 14px;<br />
 text-shadow:0 1px 1px #000;<br />
 border-left:1px solid #383838;<br />
 }<br />
 #ow_navs ul li a .sub-indicator{}<br />
 #ow_navs ul li a:hover {}<br />
 #ow_navs ul ul{<br />
 display: none;<br />
 padding:0;<br />
 position: absolute;<br />
 top: 50px;<br />
 width: 180px;<br />
 z-index: 99999;<br />
 float: left;<br />
 background: #2d2d2d !important;<br />
 -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);<br />
 box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);<br />
 -webkit-border-bottom-right-radius: 3px;<br />
 -webkit-border-bottom-left-radius: 3px;<br />
 -moz-border-radius-bottomright: 3px;<br />
 -moz-border-radius-bottomleft: 3px;<br />
 border-bottom-right-radius: 3px;<br />
 border-bottom-left-radius: 3px;<br />
 }<br />
 #ow_navs ul ul li, #ow_navs ul ul li:first-child {<br />
 background: none !important;<br />
 z-index: 99999;<br />
 min-width: 180px;<br />
 border:0 none;<br />
 border-bottom: 1px solid #222;<br />
 border-top: 1px solid #383838;<br />
 font-size:13px;<br />
 height:auto;<br />
 margin:0;<br />
 }<br />
 #ow_navs ul ul li:first-child ,#ow_navs ul li.current-menu-item ul li:first-child,<br />
 #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;}<br />
 #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; }<br />
 #ow_navs ul.sub-menu a ,<br />
 #ow_navs ul ul li.current-menu-item a,<br />
 #ow_navs ul ul li.current-menu-parent a,<br />
 #ow_navs ul ul li.current-page-ancestor a{<br />
 border:0 none;<br />
 background: none !important;<br />
 height: auto !important;<br />
 line-height: 1em;<br />
 padding: 10px 10px;<br />
 width: 160px;<br />
 display: block !important;<br />
 margin-right: 0 !important;<br />
 z-index: 99999;<br />
 color: #ccc !important;<br />
 text-shadow:0 1px 1px #000 !important;<br />
 }<br />
 #ow_navs ul li.current-menu-item ul a,<br />
 #ow_navs ul li.current-menu-parent ul a,<br />
 #ow_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}<br />
 #ow_navs ul li:hover > a, #ow_navs ul :hover > a { color: #FFF ;}<br />
 #ow_navs ul ul li:hover > a,<br />
 #ow_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}<br />
 #ow_navs ul li:hover > ul {display: block;}<br />
 #ow_navs ul li.current-menu-item,<br />
 #ow_navs ul li.current-menu-parent,<br />
 #ow_navs ul li.current-page-ancestor{<br />
 margin-top:0;<br />
 height:50px;<br />
 border-left:0 none !important;<br />
 }<br />
 #ow_navs ul li.current-menu-item ul.sub-menu a, #ow_navs ul li.current-menu-item ul.sub-menu a:hover,<br />
 #ow_navs ul li.current-menu-parent ul.sub-menu a, #ow_navs ul li.current-menu-parent ul.sub-menu a:hover<br />
 #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;}<br />
 #ow_navs ul li.current-menu-item a, #ow_navs ul li.current-menu-item a:hover,<br />
 #ow_navs ul li.current-menu-parent a, #ow_navs ul li.current-menu-parent a:hover,<br />
 #ow_navs ul li.current-page-ancestor a, #ow_navs ul li.current-page-ancestor a:hover{<br />
 background:#cd2122;<br />
 text-shadow:0 1px 1px #b43300;<br />
 color:#FFF;<br />
 height:50px;<br />
 line-height:50px;<br />
 border-left:0 none !important;<br />
 }<br />
 #ow_navs ul.sub-menu li.current-menu-item,#ow_navs ul.sub-menu li.current-menu-item a,<br />
 #ow_navs li.current-menu-item ul.sub-menu a,#ow_navs ul.sub-menu li.current-menu-parent,<br />
 #ow_navs ul.sub-menu li.current-menu-parent a,#ow_navs li.current-menu-parent ul.sub-menu a,<br />
 #ow_navs ul.sub-menu li.current-page-ancestor,#ow_navs ul.sub-menu li.current-page-ancestor a,<br />
 #ow_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}<br />
 #ow_navs ul li.menu-item-home ul li a,<br />
 #ow_navs ul ul li.menu-item-home a,<br />
 #ow_navs ul li.menu-item-home ul li a:hover{<br />
 background-color:transparent !important;<br />
 text-indent:0;<br />
 background-image:none !important;<br />
 height:auto !important;<br />
 width:auto;<br />
 }</blockquote><br />
5. Simpan template.<br />
<br />
6. Sekarang pergi ke Tata Letak > Tambah Gadget.<br />
<br />
7. Pilih Elemen HTML/JavaScript.<br />
<br />
8. Copy kode berikut dan letakkan di dalamnya.<br />
<br />
<blockquote class="tr_bq"><nav id="ow_navs"><br />
<div class="container"><br />
<div class="main-menu"><br />
<ul class="menu" id="menu-main"><br />
<li><a href="http://otowebsite.blogspot.com/">Home</a></li><br />
<li><a href="<span style="background-color: yellow;">#</span>"><span style="background-color: orange;">Mode</span></a><br />
<ul class="sub-menu"><br />
<li><a href="#">Modeling</a></li><br />
<li><a href="#">Kebanyakan Model</a></li><br />
<li><a href="#">Model BonBin</a></li><br />
<li><a href="#">Nggak ada Model</a></li><br />
</ul><br />
</li><br />
<li><a href="#">Downloads</a><br />
<ul class="sub-menu"><br />
<li><a href="#">Template</a></li><br />
<li><a href="#">Software</a></li><br />
<li><a href="#">Social</a></li><br />
<li><a href="#">Video Apa Aja</a></li><br />
</ul><br />
</li><br />
<li><a href="#">Templates</a><br />
<ul class="sub-menu"><br />
<li><a href="#">Authors</a></li><br />
<li><a href="#">Sitemap</a></li><br />
<li><a href="#">Tags</a></li><br />
<li><a href="#">Timeline</a></li><br />
</ul><br />
</li><br />
<li><a href="#">Categori</a><br />
<ul class="sub-menu"><br />
<li><a href="#">Blogger Trick</a></li><br />
<li><a href="#">CSS Trick</a></li><br />
<li><a href="#">Berita Olahraga</a></li><br />
<li><a href="#">Berita Social Media</a></li><br />
<li><a href="#">Social Media</a></li><br />
<li><a href="#">Dan Lain-lain deh</a></li><br />
</ul><br />
</li><br />
<li><a href="#">Layout</a><br />
<ul class="sub-menu"><br />
<li><a href="#">Full Width</a></li><br />
<li><a href="#">Right Sidebar</a></li><br />
<li><a href="#">Left SIdebar</a></li><br />
</ul><br />
</li><br />
<li><a href="#">Social Media</a><br />
<ul class="sub-menu"><br />
<li><a href="#">Google Plus</a></li><br />
<li><a href="#">Facebook</a></li><br />
<li><a href="#">Twitter</a></li><br />
<li><a href="#">Pinterest</a></li><br />
</ul><br />
</li><br />
</ul><br />
</div><br />
</div><br />
</nav></blockquote><br />
9. Simpan.<br />
<br />
<ul><li><b>Keterangan:</b> 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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor</div><br />
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

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 ji…

Baca selengkapnya »

02 May 2013

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>
<span class="awal">M</span>empercantik 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>.<br />
<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 <i><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">HTML</a></i>, <i><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">CSS</a></i>, <i><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">JavaScript</a></i>, <i><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">JQuery</a></i>, <i><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">PHP</a></i>, dan <i><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">XML</a></i>.<br />
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.<br />
<br />
<b><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Fitur Tema Vanila untuk Postingan Blogger:</a></b><br />
<br />
<ul>
<li>Memiliki Header atau title yang berbeda-beda.</li>
<li>Tema Vanila memiliki enam background standar yang berbeda.</li>
</ul>
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
<br />
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/Demo%20Tema%20Vanila.html" target="_blank"><b>Lihat Demo</b></a></div>
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat Tema Vanila untuk Postingan Blogger</div>
<br />
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.<br />
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:<br />
<br />
<hr color="#0071bb" />
<span style="color: #0071bb; font-size: large;"><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Cara Menginstal Tema Vanila untuk Postingan Blogger</a></span><br />
<hr color="#0071bb" />
<br />
1. Login ke Akun blogger Anda.<br />
2. Pada Dasbord pilih Template > Edit HTML.<br />
3. Lalu temukan tag <b><i><span style="color: #cc0000;">]]></b:skin></span></i></b><br />
4. Setelah ketemu sekarang letakkan CSS berikut di atasnya.<br />
<br />
<blockquote class="tr_bq">
/*Tema Vanila untuk Postingan Blogger by: Oto Website */<br />
pre {<br />
background-color:white;<br />
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);<br />
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);<br />
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);<br />
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);<br />
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);<br />
-webkit-background-size:30px 30px;<br />
-moz-background-size:30px 30px;<br />
-ms-background-size:30px 30px;<br />
-o-background-size:30px 30px;<br />
background-size:30px 30px;<br />
background-repeat:repeat;<br />
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;<br />
color:#333;<br />
border:2px solid #666;-moz-border-radius: 5px;<br />
-webkit-border-radius: 5px;<br />
-khtml-border-radius: 5px;<br />
border-radius: 5px;<br />
position:relative;<br />
padding:0 7px;<br />
margin:10px 5px;<br />
overflow:auto;<br />
word-wrap:normal;<br />
white-space:pre;<br />
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);<br />
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);<br />
box-shadow:0 1px 2px rgba(0,0,0,0.2);<br />
position:relative;<br />
}<br />
pre[data-codetype] {<br />
padding:29px 1em 7px 1em;<br />
}<br />
pre[data-codetype]:before {<br />
content:attr(data-codetype);<br />
display:block;<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
left:0;<br />
background-color:#666;<br />
padding:0 7px;<br />
font:bold 11px/20px Arial,Sans-Serif;<br />
color:white;<br />
}<br />
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}<br />
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}<br />
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}<br />
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}<br />
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}<br />
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}<br />
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}<br />
pre[data-codetype="CSS"]:before {background-color:#7B990C;}<br />
pre[data-codetype="JavaScript"]:before {background-color:#545448;}<br />
pre[data-codetype="JQuery"]:before {background-color:#395540;}<br />
pre[data-codetype="PHP"]:before {background-color:#FF9900;}<br />
pre[data-codetype="XML"]:before {background-color:#FF0C39;<br />
}</blockquote>
<br />
5. Simpan template.<br />
<br />
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>.<br />
<br />
<hr color="#0071bb" />
<span style="color: #0071bb; font-size: large;"><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Kode pemanggil Tema Vanila untuk Postingan Blogger</a></span><br />
<hr color="#0071bb" />
<br />
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>!<br />
<br />
<blockquote class="tr_bq">
<pre data-codetype="HTML"><span style="background-color: yellow;">Disini Tag XML</span></pre></blockquote>
<br />
Atau<br />
<br />
<blockquote class="tr_bq">
<pre data-codetype="CSS"><span style="background-color: yellow;">Disini Tag CSS</span></pre></blockquote>
<br />
Atau<br />
<br />
<blockquote class="tr_bq">
<pre data-codetype="JavaScript"><span style="background-color: yellow;">Disini Tag JavaScript</span></pre></blockquote>
<br />
Atau<br />
<br />
<blockquote class="tr_bq">
<pre data-codetype="JQuery"><span style="background-color: yellow;">Disini Tag JQuery</span></pre></blockquote>
<br />
Atau<br />
<br />
<blockquote class="tr_bq">
<pre data-codetype="PHP"><span style="background-color: yellow;">Disini Tag PHP</span></pre></blockquote>
<br />
Atau<br />
<br />
<blockquote class="tr_bq">
<pre data-codetype="XML"><span style="background-color: yellow;">Disini Tag XML</span></pre></blockquote>
<br />
<br />
<b><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">NB:</a></b> Ganti teks yang di <span style="background-color: yellow;">BLOCK KUNING</span> dengan tang yang ingin di masukkan sesuai temanya.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2</div>
<br />
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.<br />
Ingin menggunakan tag CSS standart atau menggunakan JavaScript?<br />
Jika Anda memilih menggunakan JavaScript maka Anda harus menghapus tag CSS di atas selanjutnya:<br />
<br />
1. Lalu letakkan JavaScript berikut di atas tag  </head><br />
<br />
<blockquote class="tr_bq">
<link href='https://code-otowebsite.googlecode.com/svn/trunk/Tema Vanila.css' rel='stylesheet'type='text/css'/></blockquote>
<br />
2. Simpan.<br />
<br />
<b><a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">NB:</a></b>Untuk pemanggilan Teman Vanila adalah sama dengan tag pemanggil di atas.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
<br />
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!<br />
<br />

Tema Vanila untuk Postingan Blogger

Mempercantik postingan atau artikel sebuah web dengan background merupakan salah satu trik untuk mempercantik web Anda. Di tutorial kali ini Oto Website akan berbagi cara tentang mempercantik blog de…

Baca selengkapnya »

24 Apr 2013

Windows 7 Logon Background Changer

<span class="awal">B</span>erikut 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 <i><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Background Wellcome Screen Windows 7</a></i> tanpa harus bermain-main dengan Regedit.<br />
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.<br />
Seperti yang Saya alami ketika Saya mengganti background<i><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank"> LogOn</a></i> dengan mengutak atik regedit dan dampak kesalahannya akan sangat terasa, terasa sangat menyesal setelah melakukannya.<br />
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 <i><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">logon</a></i>. Berikut ini penjelasan dari alat ini:<br />
<br />
<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 "<i><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">layar selamat datang</a></i>", "<i><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">layar login</a></i>" atau <i><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">LogonUI</a></i>.<br />
<br />
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).<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
<br />
<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>
<br />
<br />
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.<br />
<br />
<hr color="#0071bb" />
<span style="color: #0071bb; font-size: large;"><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Apa yang dilakukannya?</a></span><br />
<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>
<br />
<hr color="#0071bb" />
<span style="color: #0071bb; font-size: large;"><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Keterangan Tambahan</a></span><br />
<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>
<br />
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:<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<a class="button" href="http://adf.ly/NW2kB" target="_blank"><b>Windows 7 Logon Background Changer</b></a></div>
<br />
<br />
<br />
<hr color="#0071bb" />
<span style="color: #0071bb; font-size: large;"><a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Masalah Yang biasa di hadapi!</a></span><br />
<hr color="#0071bb" />
<br />
Pada beberapa komputer, pesan galat berikut akan muncul: "<b>Tidak bisa menulis ke folder c:\windows\system32\oobe\info\backgrounds\</b>".<br />
<br />
Solusi: Buka "c:\windows\system32\oobe\info\" folder di Windows Explorer, kemudian mengubah nama "<b>backgrounds</b>" folder menjadi "<b>backgrounds2</b>".<br />
<br />
<br />
<br />
<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

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…

Baca selengkapnya »

23 Apr 2013

jQuery Slide Show Lembut Untuk Blogger

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

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 gam…

Baca selengkapnya »

21 Apr 2013

Google Plus Badge Auto Hide

<span class="awal">G</span>oogle 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"><i>Google Plus</i></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.<br />
Kali ini Oto Website akan berbagi cara tentag bagaimana cara membuat atau memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank"><i>Google Plus</i></a> Badge di blogger! Karna cara untuk membuat atau memasang <i><a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a></i> 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>".<br />
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.<br />
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.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">ScreenShot</div><br />
<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><br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat dan Memasang</div><br />
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>.<br />
Untuk Cara Membuat dan Memasangnya di Blogger silahkan Anda ikuti langkah-langkah berikut ini:<br />
<br />
1. Pergi ke Dasbor Blogger Anda.<br />
2. Pilih Template >> Edit HTML.<br />
3. Temukan tag <head><br />
4. Lalu letakkan scrip berikut di atasnya: <br />
<br />
<div class="md4"><br />
<br />
<span style="background-color: yellow;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></span><br />
<script type="text/javascript" src="https://code-otowebsite.googlecode.com/svn/trunk/gplusone.js"></script> <br />
</div><br />
5. Simpan Template Anda.<br />
<br />
6. Pilih Tata Letak >> Tambah Gadget >> Pilih elemen HTML/JavaScript.<br />
<br />
7. Sekarang letakkan JavaScript berikut ke dalam elemen tadi.<br />
<br />
<div class="md8"><script type="text/javascript"><br />
/*<![CDATA[*/<br />
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);}); <br />
/*]]>*/<br />
</script><br />
<style type="text/css"><br />
.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%;}<br />
.OW-gplus div{border:none;position:relative;display:block;}<br />
</style><br />
<div class="OW-gplus" style=""><br />
    <div><br />
<br />
<br />
<div class="g-plus" data-href="//plus.google.com/<span style="background-color: #cc0000;">115780777398536909642</span>" data-rel="publisher"><br />
<br />
<br />
</div><br />
</div><br />
</div><br />
</div><br />
Keterangan : Ganti teks yang di blok merah dengan ID <a href="https://plus.google.com/115780777398536909642?prsrc=1"><i>Google Plus</i></a> Anda.<br />
<br />
8. Simpan.<br />
<br />
Sekarang Anda dapat melihat Google Plus Badge Auto Hide ini melayang di sisi kanan blog/web Anda.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor</div><br />
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.<br />
<br />

Google Plus Badge Auto Hide

Google Plus Badge Adalah salah satu sarana untuk mendapatkan para pengunjung blog secara tetap, dengan memasang Google Plus Badge maka kita akan memperbolehkan pengunjung untuk mengikuti blog kita mel…

Baca selengkapnya »

12 Apr 2013

Komentar Slide Panel

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4ehA5ggi6h_OjFZJHSWbNvuAJAs2Qb3xmGGRE6vogzLasUnVnQbjWY6ObXnU6wXYu7tNIY_1sq4uR2JLpeiYymDRyI1K_TCyRF_LNcnV4Tv0veAuv9KNl4EEqLRzA2jQHEBJIRdFBg/s1600/komentar+slide+panel.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4ehA5ggi6h_OjFZJHSWbNvuAJAs2Qb3xmGGRE6vogzLasUnVnQbjWY6ObXnU6wXYu7tNIY_1sq4uR2JLpeiYymDRyI1K_TCyRF_LNcnV4Tv0veAuv9KNl4EEqLRzA2jQHEBJIRdFBg/s1600/komentar+slide+panel.png" width="320" /></a></div><span class="awal">U</span>ntuk di perjumpaan kali ini <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan berbagi sebuah tutorial blogger. Jika Anda sering kemari maka Anda pasti pernah melihat kotak komentar blog ini menggunakan <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html" target="">Komentar Slide Panel</a>, yang di mana bila kita ingin berkomentar kita harus menekan panel tersebut menggunakan cursor untuk membuka kotak komentar yang di sembunyikan di dalam panel tersebut.<br />
Tutorial tersebutlah yang kali ini akan <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> bagikan kepada Anda. Untuk cara pembuatannya sendiri kita membutuhkan bantuan dari jQery agar <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html">Komentar Slide Panel</a> ini berjalan dengan semestinya.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Sceenshot dan Cara kerja</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html"><img border="0" height="608" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4WrtSl3URzFADl_Qy4q0pXUNjRSAYMEi6WfHeNoR6NxOSs5WWb4WNxSi5OkaSq7k0S-Z2_oH37bm1xO1dIQOf9EZVsb784lV-7GcizYgr7EJVT6-6OUP_L99SUBczkivuNMb-WaBjw/s1600/Scrolling+Recent+Posts+Widget+For+Blogg.png" width="640" /></a></div><br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">1. Cara Menginstal di Blogger</div>2. Masuk ke akun Blogger Anda.<br />
3. Pada Dasor pilih Template >> Edit HTML.<br />
4. Lalu temukan tag-tag berikut:<br />
<br />
5. Letakkan tag berikut di bawah tag <head><br />
<br />
<blockquote class="tr_bq"><span style="background-color: lime;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> </span><br />
<script type='text/javascript'> <br />
$(document).ready(function(){ <br />
    <br />
    $(&quot;.toggle_container&quot;).hide(); <br />
  <br />
    $(&quot;h3.trigger&quot;).click(function(){ <br />
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;); <br />
    }); <br />
  <br />
}); <br />
</script></blockquote><br />
6.  Letakkan di atas ]]></b:skin><br />
<br />
<blockquote class="tr_bq">/*----- Komentar Slide Panel by www.otowebsite.com ----*/<br />
h3.trigger { <br />
background: url(https://code-otowebsite.googlecode.com/svn/trunk/komentar slide panel.png) no-repeat; <br />
height: 44px; <br />
line-height: 46px; <br />
width: <span style="color: red;"><span style="font-size: large;"><b>518</b></span></span>px; border-radius:4px; <br />
<span style="background-color: yellow;">font-family:Arial; </span><br />
font-size: 1.4em; <br />
font-weight: bold; <br />
text-align:left; <br />
color:#A1A1A1; <br />
float: left; <br />
cursor:pointer; <br />
box-shadow: #333 0px 1px 3px; <br />
padding:0 0 0 50px; <br />
margin:10px 0px 10px 10px; <br />
}<br />
<br />
h3.active { <br />
background-position: bottom left; <br />
color:#ddd; <br />
} <br />
.toggle_container { <br />
padding-left:10px; <br />
overflow: hidden; <br />
clear: both; <br />
}</blockquote><br />
<ul><li>Untuk mengganti tombol panel cukup rubah kode ini <span style="color: red;"><span style="font-size: large;"><b>518</b></span></span></li>
<li>Anda juga dapat menyesuaikan kode yang lainnya sesuai keinginan Anda, contoh kode yang di block kuning adalah kode untuk mengganti jenis font huruf.</li>
</ul><br />
7. Selanjutnya cari tag berikut:<br />
<br />
<blockquote class="tr_bq"><b:includable id='comment-form' var='post'></blockquote><br />
lalu letakkan tag berikut di bawahnya<br />
<br />
<blockquote class="tr_bq"><h3 class='trigger'><b>Click Here To add Comment</b></h3><br />
<div class='toggle_container'><br />
<div class='block'></blockquote><br />
8. Scroll sedikit kebawah dan letakkan tag berikut di atas tag </b:includable><br />
<blockquote class="tr_bq"><br />
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html' style='color:#CAC8C8;'><i>Oto Website</i></a></p><br />
<br />
</div><br />
</div></blockquote><br />
Penampilan peletakkan tag/kode nomer 7 dan 8 adalah seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5TKyO3Y0KC0AqaZ9WWVE7U02E_uSVPg_nTsyKsORq6wczvkv680YH69vL2Jm1HmWDP6RcEeTVvzErcSWqOmLj0t4u36MXxJwcUqGpHoUFgR9qOzW4L0gEs1rVPEykPpZb01UoePuuw/s1600/gg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5TKyO3Y0KC0AqaZ9WWVE7U02E_uSVPg_nTsyKsORq6wczvkv680YH69vL2Jm1HmWDP6RcEeTVvzErcSWqOmLj0t4u36MXxJwcUqGpHoUFgR9qOzW4L0gEs1rVPEykPpZb01UoePuuw/s1600/gg.png" width="574" /></a></div><br />
9. Simpan Tempalate Anda.<br />
<br />
<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><br />
<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/komentar-slide-panel.html" target="_blank">Komentar Slide Panel</a>, mudah-mudahan dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html" target="_blank">Komentar Slide Panel</a> maka silahkan ajukan pertanyaan Anda dalam komentar.<br />
<br />

Komentar Slide Panel

Untuk di perjumpaan kali ini Oto Website akan berbagi sebuah tutorial blogger. Jika Anda sering kemari maka Anda pasti pernah melihat kotak komentar blog ini menggunakan Komentar Slide Panel, yang di …

Baca selengkapnya »

11 Apr 2013

JavaScript Anti Iframe

<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/javascript-anti-iframe.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SUlqB8XAXf1ARtYVTKxBiDR-uHoEz9oWsX6Jces_flP7xsOYefwRFuKwmBuWL8bd_BXFER-s5VEcUZ9khdV-7K8G85KZuQuM4ntlERJ3cuQpYLNquFTHwcscUQrsVyZvpm15hsg9tQ/s200/disable+iframe.png" width="200" /></a></div>
<span class="awal">P</span>ernahkan Anda berfikir untuk Menonaktifkan Iframe pada Situs Anda?<br />
Seperti yang Saya lakukan pada situs ini, Saya sendiri lupa bahwa Saya telah Menonaktifkan Iframe pada situs ini menggunakan JavaScript yang tertanam pada template situs ini.<br />
Sebelumnya Anda pasti sudah tau apa itu Iframe? Jika belum tau Iframe adalah serangkaina kode yang dimana dengan kode tersebut kita dapat  menampilkan suatu situs secara utuh pada situs kita, atau lebih tepatnya pada postingan kita.<br />
<br />
Standar kode untuk penggunaan Iframe adalah seperti berikut:<br />
<br />
<blockquote class="tr_bq">
<iframe src=”<a href="http://otowebsite.blogspot.com/2013/03/javascript-anti-iframe.html" target="_blank"><i>url halaman</i></a>”></iframe></blockquote>
<br />
Dengan menggunakan kode tersebut maka halaman yang ada pada SRC tersebut akan tampil pada halaman kita. Namun hal tersebut tidak bisa di lakukan untuk beberapa situs tertentu seperti 4shared.com atau detik.com. karena ketika kita menampilkannya untuk situs tersebut, akan ter-Redirect ke halaman aslinya.<br />
<br />
Lalu bagaimana caranya agar Situs kita juga menolak Iframe seperti yang di lakukan oleh 4shared dan detik.com? maka sebenarnya ada JavaScript sederhana yang bisa anda gunakan agar ketika situs kita di tampilkan dalam cara Iframe ataupun Iframe demo template maka akan secara otomatis ter-redirect ke situs kita, sehingga dengan begitu kita akan mendapatkan keuntungan traficc.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Kenapa kita harus menggunakan JavaScript Anti Iframe?</div>
Seperti yang Saya katakan di atas, Penggunaan iframe ini tentunya bisa menguntungkan bagi yang pemasang iframe, namun sebaliknya bagi pemilik Situs yang dipasang iframe tentu sangat merugikan karena dapat mengurangi peringkat mesin pencari, dipengaruhi oleh konten yang kaya kata kunci. juga sudah melanggar <a href="http://otowebsite.blogspot.com/2012/06/tentang-seo-search-engine-optimization.html" target="_blank">SEO</a>, terutama bagi Situs yang di pasangi Iframe. dan hal ini juga sangat merugikan karena Situs yang di pasangi Iframe tidak mendapatkan jumlah kunjungan yang sebenarnya dan dapat mengambil jatah bandwidth (apabila Situs tersebut adalah situs sendiri).<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
JavaScript Anti Iframe?</div>
Berikut ini kode JavaScript nya, simpan saja di bagian Header yaitu di atas kode </head> kode JavaScript ini berlaku untuk semua Situs, baik itu Blogspot, WordPress maupun yang lainnya,<br />
<br />
<div class="md1">
<br />
<br />
<script type="text/javascript"><br />
    <br />
</script></div>
<br />
Lalu Simpan template Anda.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
Sekian untuk Artikel <a href="http://otowebsite.blogspot.com/2013/03/javascript-anti-iframe.html" target="_blank">JavaScript Anti Iframe</a>, Semoga Artikel ini dapat bermanfaat untuk Anda semua! Jika Anda mengalami kesulitan tentang Artikel di atas silahkan lemparkan pertanyaan Anda pada form komentar!<br />
<br />

JavaScript Anti Iframe

Pernahkan Anda berfikir untuk Menonaktifkan Iframe pada Situs Anda? Seperti yang Saya lakukan pada situs ini, Saya sendiri lupa bahwa Saya telah Menonaktifkan Iframe pada situs ini menggunakan JavaSc…

Baca selengkapnya »

31 Mar 2013

Attractive Css3 Cycling Slideshow Untuk Blogger

<span class="awal">H</span>ari ini blog <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan berbagi tentang slideshow gambar untuk blogger yang berjudul <a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">Attractive Css3 Cycling Slideshow Untuk Blogger</a>, ini adalah slideshow menarik di sertai dengan efek memuat gambar di setiap gambar yang Anda pasang. Dengan menambahkan <a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">Attractive Css3 Cycling Slideshow Untuk Blogger</a> ini Anda akan mengubah link Anda sebagai link gambar! Satu hal yang perlu Anda ingat adalah ukuran dari gambar harus Anda rubah beberapa pixel untuk menyesuaikannya.<br />
Sekarang mari kita lihat Demo dan bagaimana cara membuat <a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html">Attractive Css3 Cycling Slideshow Untuk Blogger</a> Anda.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gVqCcIqEkZJfI06VEco2ywdA0EhxFAZxzraPs_wu__xsue1hSOFGGfKSdyLWt7pKnP9dA-849CTJTgc7xLlpwsTFL7tBR70DWtwXhQRA0CQfdRXkW0W-E0hqVJInxb6aJL9a2xK66w/s1600/OW-Attractive+Css3+Cycling+Slideshow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gVqCcIqEkZJfI06VEco2ywdA0EhxFAZxzraPs_wu__xsue1hSOFGGfKSdyLWt7pKnP9dA-849CTJTgc7xLlpwsTFL7tBR70DWtwXhQRA0CQfdRXkW0W-E0hqVJInxb6aJL9a2xK66w/s640/OW-Attractive+Css3+Cycling+Slideshow.png" width="640" /></a></div>
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
<br />
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/Attractive%20Css3%20Cycling%20Slideshow.html" target="_blank"><b>Lihat Demo</b></a></div>
<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat</div>
<br />
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html"><b><span style="font-size: large;"><span style="color: #0071bb;">The CSS</span></span></b><br />
</a><br />
<hr color="#0071bb" />
<br />
<pre class="brush:css;">/* fade slider www.otowebsite.blogspot.com*/
.content h1 {
 font-size:48px;
 color:#000;
 text-shadow:0px 1px 1px #f4f4f4;
 text-align:center;
 padding:60px 0 30px;
}

/* LAYOUT */
.otowebsite {
 margin:0 auto;
 overflow:hidden;
 width:960px;
}

/* CONTENT SLIDER */
#content-slider {
 width:100%;
 height:360px;
 margin:10px auto 0;
}
/* SLIDER */
#slider {
 background:#000;
 border:5px solid #eaeaea;
 box-shadow:1px 1px 5px rgba(0,0,0,0.7);
 height:320px;
 width:680px;
 margin:40px auto 0;
 overflow:visible;
 position:relative;
}
#mask {
 overflow:hidden;
 height:320px;
}
#slider ul {
 margin:0;
 padding:0;
 position:relative;
}
#slider li {
 width:680px;
 height:320px;
 position:absolute;
 top:-325px;
 list-style:none;
}

#slider li.firstanimation {
 -moz-animation:cycle 25s linear infinite;
 -webkit-animation:cycle 25s linear infinite; 
}
#slider li.secondanimation {
 -moz-animation:cycletwo 25s linear infinite;
 -webkit-animation:cycletwo 25s linear infinite; 
}
#slider li.thirdanimation {
 -moz-animation:cyclethree 25s linear infinite;
 -webkit-animation:cyclethree 25s linear infinite; 
}
#slider li.fourthanimation {
 -moz-animation:cyclefour 25s linear infinite;
 -webkit-animation:cyclefour 25s linear infinite; 
}
#slider li.fifthanimation {
 -moz-animation:cyclefive 25s linear infinite;
 -webkit-animation:cyclefive 25s linear infinite; 
}

#slider .tooltip {
 background:rgba(0,0,0,0.7);
 width:300px;
 height:60px;
 position:relative;
 bottom:75px;
 left:-320px;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out; 
}
#slider .tooltip h1 {
 color:#fff;
 font-size:24px;
 font-weight:300;
 line-height:60px;
 padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
 left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
 -moz-animation-play-state:paused;
 -webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar {
 position:relative;
 top:-5px;
 width:680px;
 height:5px;
 background:#000;
 -moz-animation:fullexpand 25s ease-out infinite;
 -webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; }
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; }
 36% { top:0px; opacity:1; z-index:0; }
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; }
 56% { top:0px; opacity:1; }
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; }
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 50% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; }
 36% { top:0px; opacity:1; z-index:0; }
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; }
 56% { top:0px; opacity:1; z-index:0; }
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}</pre>
<br />
<br />
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/03/attractive-css3-cycling-slideshow-untuk.html"><b><span style="font-size: large;"><span style="color: #0071bb;">HTML/JavaScript</span></span></b><br />
</a><br />
<hr color="#0071bb" />
<br />
<pre class="brush:javascript;"><div class="otowebsite">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWvcLEMuyBp92jJchMXz1-zj6dyEeyeS29ZfrnOzaVHlYI91gcKwkzOYw7Gkyb0cd_KlehLH8oJJAeV4gvHyh4btO90JHhQdNPX-ty8qrnLVAJROdtF64BdMQ5mj4smP571Wq_i7SYQ/s1600/OW-Kepulauan+Raja+Ampat,+Papua+Barat.jpg" alt="Raja Ampat"/>
            </a>
            <div class="tooltip">
            <h1>Raja Ampat</h1>
            </div>
            </li>

<li id="second" class="secondanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnDsCCz31zfTium-nFr3lhXE-kj9jG3VkK8-ko4i2crUxhDSXdqW-ALMh4tL_jsjjtHSCHxDCuysPpJvhCdQVCDhcJptLEs0GfBGnePU7Gb8tzqqfVWb1tBt9kTgNgUsF5lFeKLyzxw/s1600/OW-Gunung+Rinjani,+Lombok.jpg" alt="Gunung Rinjani"/>
            </a>
            <div class="tooltip">
            <h1>Gunung Rinjani</h1>
            </div>
            </li>
          
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0y4MktfUccg4zkFv_zQ1qwyEdCMz-ss8x7ClzpndgZvS0BMRIBXNHMY6hK0JzjgHveQCj4ujJ4LaQ3X76uqQ15k1_Np-DaTOureoMuSZzWttriZm0UejMahTqC6-D5kIvl3cnl7zm8g/s1600/OW-Ngarai+Sianok+dan+Lembah+Harau,+Sumatera+Barat.jpg" alt="Ngarai Sianok & L.Harau"/>
            </a>
            <div class="tooltip">
            <h1>Ngarai Sianok & L.Harau</h1>
            </div>
            </li>
                      
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhStTcCBhRe6LhlvKW5OLEkQLDPEq5RlpwVnHKRXWgiPdb_fmBH21jGXiF0OfWe4edmVdkYDHAbV_O6g_dt5OtOyVGjTFsPyYIjDgFrVLjXw2HK4ERgCVglp5FT19EbXmYbjefPlpj7w/s1600/OW-Taman+Nasional+Baluran,+Jawa+Timur.jpg" alt="Taman Nasional Baluran"/>
            </a>
            <div class="tooltip">
            <h1>Taman Nasional Baluran</h1>
            </div>
            </li>
                      
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMGYg2Ys8o8UnnXRfq0FwOnjtisgbrcLhcpBickxPcyXMDGMsv-hpyTCPU1b2cHxMoXqEOoqHj0HjyLJcq2hyphenhyphen3pQhXIk9MaXU3h8T8GmdevxZe-A__CwsXb59RupoZW30M5BT0HLMZg/s1600/OW-Danau+Toba,+Sumatera+Utara.jpg" alt="Danau Toba"/>
            </a>
            <div class="tooltip">
            <h1>Danau Toba</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div></pre>
<br />
<br />

Attractive Css3 Cycling Slideshow Untuk Blogger

Hari ini blog Oto Website akan berbagi tentang slideshow gambar untuk blogger yang berjudul Attractive Css3 Cycling Slideshow Untuk Blogger, ini adalah slideshow menarik di sertai dengan efek memuat g…

Baca selengkapnya »

28 Mar 2013

Memasang Meta Tag Alexa

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHT9qKiGorjxiurm9VjVuMtrISzhg6eAbLMQFI2sjrR5148ubb-A7pD8hS8QBf4G47YpIrVlhu9cFV2z0RokR_SCPE0AjR04kt1crjJHKZf4y1KCQJmdehkzFlYkY8gG5bhOGzZXHOw/s1600/meta+tag+alexa.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHT9qKiGorjxiurm9VjVuMtrISzhg6eAbLMQFI2sjrR5148ubb-A7pD8hS8QBf4G47YpIrVlhu9cFV2z0RokR_SCPE0AjR04kt1crjJHKZf4y1KCQJmdehkzFlYkY8gG5bhOGzZXHOw/s1600/meta+tag+alexa.png" width="320" /></a></div>
<span class="awal">A</span>lexa adalah salah satu dosen yang akan mengawasi dan memantau kinerja blog atau web yang anda kelola. oleh sebab itu, sebagian besar para admin blogger atau webmaster berlomba-lomba memberikan kontribusi besar untuk blognya  demi mendapatkan pengakuan dan nilai yang berupa traffik rank dan link in. Penilaian yang di berikan oleh <a href="http://www.alexa.com/" target="_blank">Alexa</a> sangat berguna untuk blog sebagai indikator kepopuleran   sebuah blog dimata seorang Boss besar yang tak lain adalah “<a href="http://www.google.co.id/" target="_blank">Google</a>”.<br />
Untuk lebih jelasnya tentang <a href="http://www.alexa.com/" target="_blank">Alexa</a> Anda bisa memaca aritikel <a href="http://otowebsite.blogspot.com/2012/03/tentang-alexa.html" target="_blank">Tentang Alexa</a>.<br />
<br />
Mungkin menurut sebagian dari Anda tutorial ini sudah kuno, Tapi saya tetap menulis artikel kali ini di karenakan waktu Saya googling kemarin Saya hanya menemukan cara <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="">Memasang Meta Tag Alexa</a> yang sudah lama caranya sudah berbeda, Saya menulis artikel atau tutorial ini juga di karenakan Saya baru kemarin <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="">Memasang Meta Tag Alexa</a> pada <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a>. Tidak ada salahnya pula saya memberika Info dan cara <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="">Memasang Meta Tag Alexa</a> kepada Anda yang masih belum mengetahui caranya.<br />
<br />
Sebelumnya Anda pasti sudah tau apa keuntungan <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> pada Situs Anda? Jika belum sebaiknya Anda baca tutorial sebelumnya yang membahasa <a href="http://otowebsite.blogspot.com/2012/03/tentang-alexa.html" target="_blank">Tentang Alexa</a>.<br />
Bisa di bilang dengan <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> pada Situs kita, maka kita akan lebih mengoptimalkan Situs kita, terutama di mata Google.<br />
<br />
Untuk <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> pada situs sebenarnya sama saja dengan memasang pada blogger, disini Saya akan memberikan cara <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> pada blogger. Lanjutkan membaca Anda untuk mengethui caranya!<br />
<br />
Sebelum <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> Anda harus sudah terdaftar pada <a href="http://www.alexa.com/" target="_blank">Alexa</a>, jika belum silahkan daftarkan diri Anda pada Situs <a href="http://www.alexa.com/" target="_blank">www.alexa.com</a> terlebih dahulu!<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Memasang Meta Tag Alexa</div>
<br />
Jika Anda sudah pernah mendaftarkan Situs Anda dan Anda ingin menambahnya lagi caranya adalah sebagai berikut:<br />
<br />
<ul>
<li>Klik Dashboard.</li>
<li>Add a Site.</li>
<li>Lalu ikuti instruksi pada langkah nomer 2 di bawah.</li>
</ul>
<br />
Jika Anda belum mendaftarkan Situs Anda, Anda bisa mengikuti panduan berikut ini, sebelumnya Anda harus Login terlebih dahulu pada Situs <a href="http://www.alexa.com/" target="_blank">Alexa</a> maupun <a href="https://www.blogger.com/" target="_blank">Blogger</a>.<br />
<br />
1. Klik Dashboard pada menu <a href="http://www.alexa.com/" target="_blank">Alexa</a>, Lalu Klik Get Started seperti pada gambar 1 berikut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsR1sVxAGgWjPwxzPrthwokft9So8QiWSTEQEQaNwQLLMob0e8l7eyhLJqQP_ixg060wTAEuy_D01Cj1RVIXGqgmrL9XGcmsacrZqW2NgXypkPVuJqrGqz2jrjMtybwh5ZfavOKDrtrQ/s1600/al1.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 1 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
2. Klik Sign Up untuk mendaftarkan Situs/Blog Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZMsZ9YVkxpe0ONMNI-l5HYI5fcrt5gCymNLjd6bHVg9IwHfy21Za0tJ3tVwCzHy8j9o5eIytc0lQic5zAk82eOT2r0sqRvVDguUwHZ9nKEs4xwHiF31jMIu_zChToX0TCSM2AcR2Uw/s1600/al2.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 2 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
3. Masukkan URL Situs atau URL Blog Anda, contoh: otowebsite.blogspot.com. Tanpa menggunakan <i><a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank">http://</a></i> ataupun <i><a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank">www.</a></i> Lalu klik Continue untuk melanjutkan.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEevSpqA37U4QncfioVFGuTzXMLQ6J8dVEiLBSZcEXaxxGLgxtWQzska3QQngPokHM8LN9jC_dFwASfyUFori7WpkihjbRhaKPWgmtuzxZXyNTzfzz0KPBiNwiOJ4kIoUHbk3L4ZgSnQ/s1600/al3.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 3 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
4.  Selanjutnya Anda akan di bawa ke halaman Claim Your Site, di halaman tersebut ada dua opsi untuk Mengklaim Situs Anda, Saya sarankan menggunakan opsi yang kedua.<br />
Di opsi kedua tersebut Anda akan di berikan tiga tag, Saya sarankan Anda memilih atau mengcopy tag yang kedua saja(lihat gambar 4).<br />
Contoh, disini Saya mengambil tag yang kedua dengan ID <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a>:<br />
<br />
<blockquote class="tr_bq">
<meta content='sF069dcUzmwTpU0Siglb3ngHjXk' name='alexaVerifyID'/></blockquote>
<br />
Sekarang pergi ke Dahbord blogger >> Template >> Edit HTML.<br />
Lalu letakkan meta tag dengan ID blog Anda tersebut di bawah tag <span style="color: red;"><b><head></b></span> atau di atas tag <b><span style="color: red;"></head></span></b><br />
Jika Anda sudah memasang <a href="http://otowebsite.blogspot.com/2012/07/meta-tag-generator-tool.html" target="_blank">Meta Tag Google</a> Anda bisa <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> tersebut, di atas <a href="http://otowebsite.blogspot.com/2012/07/meta-tag-generator-tool.html" target="_blank">Meta Tag Google</a> lalu Simpa template.<br />
Kembali ke halaman <a href="http://www.alexa.com/" target="_blank">Alexa</a> tadi lalu klik Veritify my ID.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="486" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lITJFfe68Bd1jgRFEfbT2JtZHEZuykb3Zp-F3VKplz276KZI4xNvFNEk70m28kZI_3K4exf_mZUDbIh5Yz_DOtLoeprS9No7pzAuRLRcmM-axfv-r6R7VoMNxfu9Q81IVMKr1lEqtA/s1600/al4.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 4 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
5. Jika Benar seharusnya akan muncul pemberitahuan bahwa Klaim Situs Anda sudah berhasil, Selanjutnya klik Continue untuk melanjutkan(lihat gambar 5).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pl00kVgzewUDZpR9F3zzjgw5A2QRp9C-NBQu6uCFtHIIuHhOmd3HNRDO72-mJNkWMAk0qEyvohOLWjEENQ9MCU-T2NS0ruxZ5iyvTvra5DuiD3eN5Ez0AyVgodl2Uk9WcKpCWxSCvg/s1600/al5.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 4 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
6. Sekarang silahkan isi data-data Anda ataupun situs Anda seperti Site Title dan sebagainya, untuk tahap ini sepertinya tidak perlu di jelaskan, Jika sudah silahkan Anda klik Save & Continue.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnxKpkmNBQCWxt1ZC2wmQEqhMLcWL_rV9sGgl3xkpAkt-TYzBpPCwgfXLXS_iA_xgvk6vYBHAbHKIxgKd7TZdui6jGVdUQBDVgR6NtPZ-eHC737SNqy5CnRGTMtVysJCj7pNnJohvoA/s1600/al6.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 6 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
7. Finish, Anda sudah berhasil <a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html">Memasang Meta Tag Alexa</a> dan mendaftarkan situs Anda pada <a href="http://www.alexa.com/" target="_blank">Alexa</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBsAMWtPntnTkAF4ukbzenDSpC0ZJu6kbQdB4gSu8slCN3SfeNn5rcdxxj0zRzm_bMMz4LWW1gWBCeWdRiO9ou-mb4ULmPv2ooF3jYF2eqk1ZvUrdpN0cFjNcBtuw6B9W7iJ99cbgJg/s1600/al7.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 7 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
8. Dan ini adalah tampilan Dashboard situs yang berhasih di klaim.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/03/memasang-meta-tag-alexa.html" target="_blank"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H-yVzhe2nkrOmpDfn6988e6fnITIjiy1j5KRLO6mtixLRezb-ww35dr7s3SOI3x9uVvV1Rj3cyTDQEfoMh-sdzAxytupaG64t3y0j3lMnlP2721EQLsajArVFAEEKeL3f340SQ5i4w/s1600/al8.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 8 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<br />
9. Anda bisa melihat dan merubah data atau profil yang Anda buat tadi melalu Edit Site Listing.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbgfowGN2Ci5J7BDyNFeJiilW4KRUg_X2gUS4AUwAye9eTEjLpsxTJcoIvI2lmsqO0VRaP6Wnr5uakDSft99YLlwGh0jgdCnJsym6xkVKPr0wEg3PcHiyquLGzhyJxQr8zISypc4P0Nw/s1600/al9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbgfowGN2Ci5J7BDyNFeJiilW4KRUg_X2gUS4AUwAye9eTEjLpsxTJcoIvI2lmsqO0VRaP6Wnr5uakDSft99YLlwGh0jgdCnJsym6xkVKPr0wEg3PcHiyquLGzhyJxQr8zISypc4P0Nw/s1600/al9.png" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(Gambar 9 oleh <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>)</span></div>
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
<br />
Oke sekian dulu untuk artikel atau tutorial kali ini semoga dapat bermanfaat untuk Anda, natikan lagi tutorial selanjutanya dari <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a>. Jika ada pertanyaan tentang tutorial di atas silahkan kirimkan pertanyaan pada pada form komentar!

Memasang Meta Tag Alexa

Alexa adalah salah satu dosen yang akan mengawasi dan memantau kinerja blog atau web yang anda kelola. oleh sebab itu, sebagian besar para admin blogger atau webmaster berlomba-lomba memberikan kontr…

Baca selengkapnya »

12 Mar 2013

Cool Sunrise Gloss Drop Down Menu

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKHK50wBC56Uy9TXt3pi7GLDbmImW5-oEfRcp5cgajxnEqakfoPzRZQy_oJUYk7AWezQ2-Od-bmcyHlmpRxpsiSFMU5uQ9eKhc2vdsEwhueMOaM5SP8TP3xnbF6JTvxvg3B1a5X72W8A/s1600/Cool+Sunrise+Gloss+Drop+Down+Menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKHK50wBC56Uy9TXt3pi7GLDbmImW5-oEfRcp5cgajxnEqakfoPzRZQy_oJUYk7AWezQ2-Od-bmcyHlmpRxpsiSFMU5uQ9eKhc2vdsEwhueMOaM5SP8TP3xnbF6JTvxvg3B1a5X72W8A/s1600/Cool+Sunrise+Gloss+Drop+Down+Menu.png" width="640" /></a></div>
<span class="awal">C</span>ool Sunrise Gloss Drop Down Menu, ini adalah salah satu Navigation Menus menakjubkan yang di desain khusuh untuk Blogger. Tampilan yang sangat menakjubkan menjadikan menu ini salah satu menu paling cool.<br />
Untuk pembuatan menu ini sama sekali tanpa menggunakan bantuan jQuery, atau dengan kata lain bila anda menggunakan menu ini maka tidak akan begitu berpengaruh pada kecepatan atau pemuatan situs atau blog Anda, di karenakan Cool Sunrise Gloss Drop Down Menu ini menggunkana bantuan CSS.<br />
Mengingat banyaknya blogger yang mengeluh akan kecepatan atau pemuatan situs atau blog mereka karna Navigation Menus yang di gunakan, maka menu ini merupakan salah satu sarana atau alternatif yang cocok untuk situs atau blog mereka.<br />
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Demo Cool Sunrise Gloss Drop Down Menu</div>
<br />
<br />
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/Cool%20Sunrise%20Gloss%20Drop%20Down%20Menu.html" target="_blank"><b>LIHAT DEMO</b></a></div>
<br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat</div>
<br />
Berikut ini adalah CSS dan JavaScript standar yang di gunakan untuk membuat Cool Sunrise Gloss Drop Down Menu. Silahkan Anda lakukan sedikit perubahan pada kode JavaScript untuk menyesuaikannya pada situs atu blog Anda!<br />
<br />
<hr color="#0071bb" />
<b><span style="font-size: large;"><span style="color: #0071bb;"><a href="http://otowebsite.blogspot.com/2013/03/cool-sunrise-gloss-drop-down-menu.html" target="_blank">CSS</a></span></span></b><br />
<hr color="#0071bb" />
<br />
<pre class="brush:css;">/*----Cool Sunrise Gloss Drop Down Menu by Oto Website----*/

@otowebsite "utf-8";

/* CSS Document */
body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/

.ow-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(https://code-otowebsite.googlecode.com/svn/trunk/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.ow-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.ow-container .divider-vert{

float:left;

width:0px;

display: none;

}

.ow-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.ow-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.ow-container a, .ow-container li{

float:left;

display:block;

white-space:nowrap;

}

.ow-container div a, .ow-container ul a, .ow-container ul li{

float:none;

}

.ow-container ul{

left:-10000px;

position:absolute;

}

.ow-container, .ow-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.ow-container li a{

float:none

}

.ow-container li{

position:relative;

}

.ow-container ul{

z-index:10;

}

.ow-container ul ul{

z-index:20;

}

.ow-container ul ul ul{

z-index:30;

}

.ow-container ul ul ul ul{

z-index:40;

}

.ow-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#ow-container ul {

top:100%;

}

#ow-container ul li:hover>ul{

top:0px;

left:100%;

}

/*^'^ Primary Items ^'^*/

#ow-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}

#ow-container a:hover{

color: #6C3600;

background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}

/*^'^ Secondary Items Container ^'^*/

#ow-container div, #ow-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}

/*^'^ Secondary Items ^'^*/

#ow-container div a, #ow-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}

/*^'^ Secondary Items Hover State ^'^*/

#ow-container div a:hover, #ow-container ul a:hover{

background-color: #FFFFFF;

background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}

/*^'^ Secondary Item Titles ^'^*/

#ow-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}

/*^'^ Horizontal Dividers ^'^*/

#ow-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}

/*^'^ Vertical Dividers ^'^*/

#ow-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}</pre>
<br />
<br />
<hr color="#0071bb" />
<b><span style="font-size: large;"><span style="color: #0071bb;"><a href="http://otowebsite.blogspot.com/2013/03/cool-sunrise-gloss-drop-down-menu.html" target="_blank">HTML/JavaScript</a></span></span></b><br />
<hr color="#0071bb" />
<br />
<pre class="brush:javascript;"><div class="ow-container-outer">

</li>

<li><a class="item-primary" href="#">Products</a>

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>

<li><a class="item-primary" href="#">Quality</a>

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>

<li><a class="item-primary" href="#">Services</a>

<li><span class="item-secondary-title" >Title For Links</span></li>