Oto Website

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>