Navigation Menus adalah sebuah alat yang kegunaanya untuk memudahkan Pengunjung untuk mengetahui isi dari web kita. Navigation Menus Tidak jauh beda dengan daftas isi sebuah web, perbedaannya hanya jika daftar isi maka kita akan di suguhi semua daftar posting yang ada di web tersebut, sementara Navigation Menus kita akan di suguhi apa yang Admin web tersebut pasang pada Navigation Menus  seperti halaman, profil dan lain sebagainya. Untuk perjumpaan kali ini kita akan berbagi tutorial blogger yang membahas tentang Navigation Menus ya itu : Membuat Navigation Menus Css3 Bergaya Attractive Dark.
Membuat Navigation Menus Css3 Bergaya Attractive Dark adalah sebuah navigasi bergaya Attractive Dark yang sangat menarik, untuk lebih jelasnya silahkan lihat demo berikut:





Mengingat akan banyaknya blogger yang kebingungan tentang cara pemasangan maka kali ini Saya akan memberikan Cara Membuat + Memasangnya di Blogger, silahkan ikuti langkah berikut untuk memulainya:


1. Login ke Akun Blogger Anda.
2. Pilih Template > Edit HTML.
3. Sekarang temukan kode ]]></b:skin>
4. Lalu letakkan kode berikut di atasnya

/* CSS3 Kode untuk menu dimulai di sini otowebsite.blogspot.com */
#ow_navs {
 background:#2c2c2c;
 margin:0 auto;
 height:50px;
 border-bottom:5px solid #cd2122;
}
 #ow_navs .menu-alert{
 float:left;
 padding:18px 0 0 10px ;
 font-style:italic;
 color:#FFF;
 }
 #top-menu-mob , #main-menu-mob{ display:none; }
 #ow_navs ul li {
 text-transform: uppercase;
 font-family: Oswald,arial,Georgia, serif;
 font-size:16px;
 position: relative;
 display: inline-block;
 float: left;
 border:1px solid #222222;
 border-width:0 0 0 1px;
 height:50px;
 }
 #ow_navs ul li:first-child,
 #ow_navs ul li:first-child a{border:0 none;}
 #ow_navs ul li:last-child a{border-right:0 none;}
 #ow_navs ul li a {
 display: inline-block;
 height: 50px;
 line-height: 50px;
 color: #ddd;
 padding:0 14px;
 text-shadow:0 1px 1px #000;
 border-left:1px solid #383838;
 }
 #ow_navs ul li a .sub-indicator{}
 #ow_navs ul li a:hover {}
 #ow_navs ul ul{
 display: none;
 padding:0;
 position: absolute;
 top: 50px;
 width: 180px;
 z-index: 99999;
 float: left;
 background: #2d2d2d !important;
 -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
 box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
 -webkit-border-bottom-right-radius: 3px;
 -webkit-border-bottom-left-radius: 3px;
 -moz-border-radius-bottomright: 3px;
 -moz-border-radius-bottomleft: 3px;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
 }
 #ow_navs ul ul li, #ow_navs ul ul li:first-child {
 background: none !important;
 z-index: 99999;
 min-width: 180px;
 border:0 none;
 border-bottom: 1px solid #222;
 border-top: 1px solid #383838;
 font-size:13px;
 height:auto;
 margin:0;
 }
 #ow_navs ul ul li:first-child ,#ow_navs ul li.current-menu-item ul li:first-child,
 #ow_navs ul li.current-menu-parent ul li:first-child,#ow_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
 #ow_navs ul ul ul ,#ow_navs ul li.current-menu-item ul ul, #ow_navs ul li.current-menu-parent ul ul, #ow_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
 #ow_navs ul.sub-menu a ,
 #ow_navs ul ul li.current-menu-item a,
 #ow_navs ul ul li.current-menu-parent a,
 #ow_navs ul ul li.current-page-ancestor a{
 border:0 none;
 background: none !important;
 height: auto !important;
 line-height: 1em;
 padding: 10px 10px;
 width: 160px;
 display: block !important;
 margin-right: 0 !important;
 z-index: 99999;
 color: #ccc !important;
 text-shadow:0 1px 1px #000 !important;
 }
 #ow_navs ul li.current-menu-item ul a,
 #ow_navs ul li.current-menu-parent ul a,
 #ow_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
 #ow_navs ul li:hover > a, #ow_navs ul :hover > a { color: #FFF ;}
 #ow_navs ul ul li:hover > a,
 #ow_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
 #ow_navs ul li:hover > ul {display: block;}
 #ow_navs ul li.current-menu-item,
 #ow_navs ul li.current-menu-parent,
 #ow_navs ul li.current-page-ancestor{
 margin-top:0;
 height:50px;
 border-left:0 none !important;
 }
 #ow_navs ul li.current-menu-item ul.sub-menu a, #ow_navs ul li.current-menu-item ul.sub-menu a:hover,
 #ow_navs ul li.current-menu-parent ul.sub-menu a, #ow_navs ul li.current-menu-parent ul.sub-menu a:hover
 #ow_navs ul li.current-page-ancestor ul.sub-menu a, #ow_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
 #ow_navs ul li.current-menu-item a, #ow_navs ul li.current-menu-item a:hover,
 #ow_navs ul li.current-menu-parent a, #ow_navs ul li.current-menu-parent a:hover,
 #ow_navs ul li.current-page-ancestor a, #ow_navs ul li.current-page-ancestor a:hover{
 background:#cd2122;
 text-shadow:0 1px 1px #b43300;
 color:#FFF;
 height:50px;
 line-height:50px;
 border-left:0 none !important;
 }
 #ow_navs ul.sub-menu li.current-menu-item,#ow_navs ul.sub-menu li.current-menu-item a,
 #ow_navs li.current-menu-item ul.sub-menu a,#ow_navs ul.sub-menu li.current-menu-parent,
 #ow_navs ul.sub-menu li.current-menu-parent a,#ow_navs li.current-menu-parent ul.sub-menu a,
 #ow_navs ul.sub-menu li.current-page-ancestor,#ow_navs ul.sub-menu li.current-page-ancestor a,
 #ow_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
 #ow_navs ul li.menu-item-home ul li a,
 #ow_navs ul ul li.menu-item-home a,
 #ow_navs ul li.menu-item-home ul li a:hover{
 background-color:transparent !important;
 text-indent:0;
 background-image:none !important;
 height:auto !important;
 width:auto;
 }

5. Simpan template.

6. Sekarang pergi ke Tata Letak > Tambah Gadget.

7. Pilih Elemen HTML/JavaScript.

8. Copy kode berikut dan letakkan di dalamnya.

<nav id="ow_navs">
<div class="container">
<div class="main-menu">
<ul class="menu" id="menu-main">
<li><a href="http://otowebsite.blogspot.com/">Home</a></li>
<li><a href="#">Mode</a>
<ul class="sub-menu">
<li><a href="#">Modeling</a></li>
<li><a href="#">Kebanyakan Model</a></li>
<li><a href="#">Model BonBin</a></li>
<li><a href="#">Nggak ada Model</a></li>
</ul>
</li>
<li><a href="#">Downloads</a>
<ul class="sub-menu">
<li><a href="#">Template</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Social</a></li>
<li><a href="#">Video Apa Aja</a></li>
</ul>
</li>
<li><a href="#">Templates</a>
<ul class="sub-menu">
<li><a href="#">Authors</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Timeline</a></li>
</ul>
</li>
<li><a href="#">Categori</a>
<ul class="sub-menu">
<li><a href="#">Blogger Trick</a></li>
<li><a href="#">CSS Trick</a></li>
<li><a href="#">Berita Olahraga</a></li>
<li><a href="#">Berita Social Media</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Dan Lain-lain deh</a></li>
</ul>
</li>
<li><a href="#">Layout</a>
<ul class="sub-menu">
<li><a href="#">Full Width</a></li>
<li><a href="#">Right Sidebar</a></li>
<li><a href="#">Left SIdebar</a></li>
</ul>
</li>
<li><a href="#">Social Media</a>
<ul class="sub-menu">
<li><a href="#">Google Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

9. Simpan.

• Keterangan: Silahkan Anda sesuaikan menu ini dengan menambahkan URL dan Nama Menu.

Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas Membuat Navigation Menus Css3 Bergaya Attractive Dark, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan Membuat Navigation Menus Css3 Bergaya Attractive Dark maka silahkan ajukan pertanyaan Anda dalam komentar.

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 dengan Tema Vanila untuk Postingan Blogger.
Tema Vanila adalah tema atau background yang berguna untuk mempercantik artikel Anda, seperti memberi tema pada tag HTML, CSS, JavaScript, JQuery, PHP, dan XML.
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.

Fitur Tema Vanila untuk Postingan Blogger:

• Memiliki Header atau title yang berbeda-beda.
• Tema Vanila memiliki enam background standar yang berbeda.

Untuk cara penginstalan Tema Vanila untuk Postingan Blogger dan cara menggunakannya sangatlah mudah, kita hanya perlu menanamkan tag CSS pada template dan memanggil tema ini dengan tag pre sesuai dengan jenisnya.
Disini Saya akan menjelaskan tentang cara menginstalnya pada blogger. Untuk blogger silahkan ikuti langkah berikut:

---

Cara Menginstal Tema Vanila untuk Postingan Blogger

---

1. Login ke Akun blogger Anda.
2. Pada Dasbord pilih Template > Edit HTML.
3. Lalu temukan tag ]]></b:skin>
4. Setelah ketemu sekarang letakkan CSS berikut di atasnya.

/*Tema Vanila untuk Postingan Blogger by: Oto Website */
pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}
pre[data-codetype] {
padding:29px 1em 7px 1em;
}
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;
}

5. Simpan template.

Jika CSS di atas sudah tertanam pada template blogger Anda, maka langkah selanjutnya untuk memanggil Tema Vanila adalah dengan menggunakan Tag Pre seperti yang Saya sebutkan di atas. Berikut adalah tag yang di gunakan untug memanggil Tema Vanila untuk Postingan Blogger.

---

Kode pemanggil Tema Vanila untuk Postingan Blogger

---

Letakkan tag berikut di dalam postingan Anda, dan ketika Anda ingin menggunakan Tema Vanila!

<pre data-codetype="HTML">Disini Tag XML</pre>

Atau

<pre data-codetype="CSS">Disini Tag CSS</pre>

Atau

<pre data-codetype="JavaScript">Disini Tag JavaScript</pre>

Atau

<pre data-codetype="JQuery">Disini Tag JQuery</pre>

Atau

<pre data-codetype="PHP">Disini Tag PHP</pre>

Atau

<pre data-codetype="XML">Disini Tag XML</pre>

NB: Ganti teks yang di BLOCK KUNING dengan tang yang ingin di masukkan sesuai temanya.



Disini Saya juga menyediakan Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2, sebenarnya cara ini sama saja, hanya saja Saya telah membungkus dan mengkompres tag tersebut dan menjadikan JavaScript, jadi Anda dapat memilih salah satu saja.
Ingin menggunakan tag CSS standart atau menggunakan JavaScript?
Jika Anda memilih menggunakan JavaScript maka Anda harus menghapus tag CSS di atas selanjutnya:

1. Lalu letakkan JavaScript berikut di atas tag  </head>

<link href='https://code-otowebsite.googlecode.com/svn/trunk/Tema Vanila.css' rel='stylesheet'type='text/css'/>

2. Simpan.

NB:Untuk pemanggilan Teman Vanila adalah sama dengan tag pemanggil di atas.



Sekian untuk tutorial kali ini yang membahas Tema Vanila untuk Postingan Blogger, jika ada pertanyaan atau masalah dalam penginstalan silahkan ajukan pertanyaan Anda melalui form komentar!

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 Background Wellcome Screen Windows 7 tanpa harus bermain-main dengan Regedit.
Tentunya Anda sudah paham apa dampaknya jika Anda bermain-main dengan Regedit dan jika Anda melakukan kesalan pada regedit windows komputer Anda. Besar atau kecil Anda melakukan kesalahan pada regedit maka dampaknya akan sangat terasa sekali bagi windows Anda.
Seperti yang Saya alami ketika Saya mengganti background LogOn dengan mengutak atik regedit dan dampak kesalahannya akan sangat terasa, terasa sangat menyesal setelah melakukannya.
Untuk itu Saya merekomendasikan Anda untuk menggunakan perangkat lunak ini yang bernama Windows 7 Logon Background Changer. Dengan menggunakan alat ini maka Anda tidak perlu lagi khawatir akan masalah atau kesalah dalam regedit pada waktu penggantian background logon. Berikut ini penjelasan dari alat ini:

Windows 7 Logon Background Changer adalah perangkat lunak open source gratis yang memungkinkan Anda mengubah wallpaper layar logon Windows 7 yang juga dikenal sebagai "layar selamat datang", "layar login" atau LogonUI.

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).





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.

---

Apa yang dilakukannya?

---

• 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").
• 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.

---

Keterangan Tambahan

---

• Alat ini memiliki antar muka yang sangat sederhana sehingga akan sangat memudahkan untuk semua pengguna Windows 7.
• Ukuran yang kecil.
• Anda akan di berikan 2 file exe berbeda untuk menggunakannya: File Win7LogonBackgroundChanger dan Win7LogonBackgroundChangerSetup, Silahkan Anda pilih salah satu sesuai selera.

Untuk mengunduh Windows 7 Logon Background Changer silahkan tekan tombol berikut ini:

---

Masalah Yang biasa di hadapi!

---

Pada beberapa komputer, pesan galat berikut akan muncul: "Tidak bisa menulis ke folder c:\windows\system32\oobe\info\backgrounds\".

Solusi: Buka "c:\windows\system32\oobe\info\" folder di Windows Explorer, kemudian mengubah nama "backgrounds" folder menjadi "backgrounds2".

Menampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada dunia, sehingga semua pengunjung blog kita akan melihat semua gambar yang kita pamerkan pada blog tersebut. Dan untuk tutorial kali ini Oto Website akan membahas dan berbagi tentang gambar slider yang bertema 'jQuery Slide Show Lembut Untuk Blogger'.
jQuery Slide Show Lembut Untuk Blogger memiliki efek yang lebih menarik dari slider sebelumnya, karna gambar slider ini memiliki lebih dari satu efek yang berbeda-beda ketika pergantian gambar.
Untuk lebih jelasanya silahkan lihat demo berikut!








Untuk cara membuatnya sendiri sebenarnya kita harus menambahkan dua kode berbeda, tapi disini Saya telah menjadikannya satu script mudah tanpa harus Mengedit HTML Anda.

Cara membuatnya Anda hanya cukup ikuti langkah berikut:

1. Login ke Akun Blogger Anda.
2. Pada Dasbord pilih Tata Letak > Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Lalu Copy kode berikut dan letakkan pada element tadi.

<style>
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
}
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Gaya arah Nav (Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Gaya Control nav (1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
table {
 border-collapse:separate;
 border-spacing:0;
}
caption, th, td {
 text-align:left;
 font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:"";
}
blockquote, q {
 quotes:"" "";
}
/* Tags HTML5 */
header, section, footer,
aside, nav, article, figure {
 display: block;
}
a, a:visited {
 color:#2d3536;
 text-decoration:none;
 border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
 color:#9e805c;
 text-decoration:none;
}
#slider-wrapper {
    background:url(https://code-otowebsite.googlecode.com/svn/trunk/slider.png) no-repeat;
    width:494px;
    height:310px;
    margin:0 auto;
    padding-top:23px;
    margin-top:50px;
}
#slider {
 position:relative;
    width:430px;
    height:250px;
    margin-left:32px;
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/loading.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}
.nivo-controlNav {
 position:absolute;
 left:163px;
 bottom:12px;
 background: #000000;
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 3px;
    border: 2px solid #CCC;
    opacity: 0.7;
    z-index: 99;
 }
 .nivo-controlNav:hover{opacity: 1;}
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:0px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}
.nivo-directionNav a {
 display:block;
 width:35px;
 height:65px;
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/arrows.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-35px 0;
 right: -40px;
}
a.nivo-nextNav:hover{right: -41px;}
a.nivo-prevNav {
 left:-40px;
}
a.nivo-prevNav:hover{left: -41px;}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
.nivo-directionNav a{top: 40%;}
.clear {
 clear:both;
}
</style>
    <br />
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img alt="" src="http://3.bp.blogspot.com/-eimUpFrIZGA/UXK22jbHDrI/AAAAAAAAG1w/93YDIvf1iyU/s1600/OtoWebsite-bedugul.jpg" />
<img alt="" src="http://1.bp.blogspot.com/-oFUwdRqrT_A/UXK21hyadSI/AAAAAAAAG1o/XzE49cQrBNc/s1600/OtoWebsite-gunung+takuban+perahu.jpg" />
<img alt="" src="http://4.bp.blogspot.com/-rL5BRIpq0q8/UXK23QRE8oI/AAAAAAAAG18/klzQ_uG-VDw/s1600/OtoWebsite-raja+ampat.jpg" />
<img alt="" src="http://3.bp.blogspot.com/-0fzDWSZjUdU/UXK23JbvLjI/AAAAAAAAG14/XZZGInTuYlg/s1600/OtoWebsite-watu+ulo.jpg" />
</div>
</div>
</div>
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({directionNavHide:false});
    });
    </script>

• Keterangan: Tag yang di blok kuning adalah Url gambar, silahkan Anda ganti dengan Url gambar Anda sendiri.

5. Simpan Widget.



Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas jQuery Slide Show Lembut Untuk Blogger, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan jQuery Slide Show Lembut Untuk Blogger maka silahkan ajukan pertanyaan Anda dalam komentar.

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 melalu Akun Google Plus mereka, dan mengetahui berbagai aktifitas blog kita seperti ada postingan terbaru dan lain sebagainya.
Kali ini Oto Website akan berbagi cara tentag bagaimana cara membuat atau memasang Google Plus Badge di blogger! Karna cara untuk membuat atau memasang Google Plus Badge di blogger sangatlah mudah jadi kita akan mengganti topiknya menjadi "Google Plus Badge Auto Hide".
Bagi Anda (Admin) blogger/website yang merasa kekurangan atau kehabisan tempat widget di blog/web-nya maka dengan memasang  Google Plus Badge Auto Hide akan sedikit membantu Anda karna dengan memasang Google Plus Badge Auto Hide Anda tidak perlu memberikan tempa widget pada badge ini, di karenakan badge ini akan melayang di sisi kanan blog/situs Anda.
Cara kerjanya sendiri sama dengan  Facebook Like Auto Hide. Yaitu badge ini akan muncul ketikan menyentuh cursor dan menutup ketikan cursor tidak menyentuhnya.






Jika Anda ingin menggunakan Google Plus Badge Auto Hide maka sebelumnya Anda harus sudah memiliki Akun Google Plus. Jika belum silahkan baca caranya disini.
Untuk Cara Membuat dan Memasangnya di Blogger silahkan Anda ikuti langkah-langkah berikut ini:

1. Pergi ke Dasbor Blogger Anda.
2. Pilih Template >> Edit HTML.
3. Temukan tag <head>
4. Lalu letakkan scrip berikut di atasnya:


5. Simpan Template Anda.

6. Pilih Tata Letak >> Tambah Gadget >> Pilih elemen HTML/JavaScript.

7. Sekarang letakkan JavaScript berikut ke dalam elemen tadi.


Keterangan : Ganti teks yang di blok merah dengan ID Google Plus Anda.

8. Simpan.

Sekarang Anda dapat melihat Google Plus Badge Auto Hide ini melayang di sisi kanan blog/web Anda.



Sekian untuk tutorial Google Plus Badge Auto Hide, 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.

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 mana bila kita ingin berkomentar kita harus menekan panel tersebut menggunakan cursor untuk membuka kotak komentar yang di sembunyikan di dalam panel tersebut.
Tutorial tersebutlah yang kali ini akan Oto Website bagikan kepada Anda. Untuk cara pembuatannya sendiri kita membutuhkan bantuan dari jQery agar Komentar Slide Panel ini berjalan dengan semestinya.






2. Masuk ke akun Blogger Anda.
3. Pada Dasor pilih Template >> Edit HTML.
4. Lalu temukan tag-tag berikut:

5. Letakkan tag berikut di bawah tag <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>

6.  Letakkan di atas ]]></b:skin>

/*----- Komentar Slide Panel by www.otowebsite.com ----*/
h3.trigger {
background: url(https://code-otowebsite.googlecode.com/svn/trunk/komentar slide panel.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

• Untuk mengganti tombol panel cukup rubah kode ini 518
• Anda juga dapat menyesuaikan kode yang lainnya sesuai keinginan Anda, contoh kode yang di block kuning adalah kode untuk mengganti jenis font huruf.

7. Selanjutnya cari tag berikut:

<b:includable id='comment-form' var='post'>

lalu letakkan tag berikut di bawahnya

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

8. Scroll sedikit kebawah dan letakkan tag berikut di atas tag </b:includable>

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

</div>
</div>

Penampilan peletakkan tag/kode nomer 7 dan 8 adalah seperti ini:


9. Simpan Tempalate Anda.


Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas Komentar Slide Panel, mudah-mudahan dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan Komentar Slide Panel maka silahkan ajukan pertanyaan Anda dalam komentar.

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 JavaScript yang tertanam pada template situs ini.
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.

Standar kode untuk penggunaan Iframe adalah seperti berikut:

<iframe src=”url halaman”></iframe>

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.

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.


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 SEO, 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).


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,


Lalu Simpan template Anda.


Sekian untuk Artikel JavaScript Anti Iframe, Semoga Artikel ini dapat bermanfaat untuk Anda semua! Jika Anda mengalami kesulitan tentang Artikel di atas silahkan lemparkan pertanyaan Anda pada form komentar!

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 gambar di setiap gambar yang Anda pasang. Dengan menambahkan Attractive Css3 Cycling Slideshow Untuk Blogger 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.
Sekarang mari kita lihat Demo dan bagaimana cara membuat Attractive Css3 Cycling Slideshow Untuk Blogger Anda.

---

The 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; }
}

---

HTML/JavaScript

---

<div class="otowebsite">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="http://2.bp.blogspot.com/-eINDQXdgC2w/UVP5Eh0KjnI/AAAAAAAAGtk/hKZ1jkV8PjI/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="http://4.bp.blogspot.com/-2r2Upu9KoxA/UVP5Fc_LGtI/AAAAAAAAGts/PKCRxtJ6afg/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="http://4.bp.blogspot.com/-h1lKSm6YL4c/UVP5WrGMZwI/AAAAAAAAGt0/lWDhrxbOJFQ/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="http://4.bp.blogspot.com/-pjDxQ7BeAuo/UVP5XQh3_aI/AAAAAAAAGt8/GjB4RqYSNH4/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="http://2.bp.blogspot.com/-KviFPOmUHPg/UVP5XsysEMI/AAAAAAAAGuE/quTu7kt9BFQ/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>

Apakah Anda bosan dengan tampilan Tema Windows 7 Anda? yang tampilannya begitu-begitu saja? Kalo iya maka kali ini Saya akan membagikan sebuah Tema Windows 7 yang tampilannya sangat menarik karna tampilan temanya berbeda dari tampilan tema-tema lainnya, ini adalah Windows 7 Theme Full Glass yang tampilannya Transparant.
Bagi Anda pengguna Windows 7 dan suka atau bosan dengan tampilan tema-tema milik Anda maka Windows 7 Theme Full Glass adalah sarana yang sangat baik untuk Anda, agar Anda tidak jenuh dengan tampilan Windows 7 milik Anda.

Berikut ini adalah ScreenShot dan Cara menginstal Windows 7 Theme Full Glass!






Download Universal Theme Patcher for x86 & x64 bit  + Visual Style full glass, fungsinya Universal Theme Patcher for x86 & x64 bit adalah untuk patch tema windows agar bisa menggunakan tema ini.










1. Extract Universal Theme Patcher for x86 dan x64 bit dan cari file .exe sesuai komputer Anda, x86 untuk 32 bit dan x64 untuk 64 bit. Klik kanan >> "Run As Administrator" >> Klik Patch.

2. Kalo sudah sekarang extract file Visual Style tadi ke folder C:

C:\Windows\Resources\Themes

(Lihat gambar)




3. Copy Glass.exe dan paste ke folder

C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup

lalu double klik Glass.exe



4. Finish.




Untuk yang microsoft word-nya menjadi hitam silahkan ikuti langkah berikut

1. Klik kanan desktop pilih >> Personalize.
2. Klik Window Color >> Advanced appearance settings.
3. Ganti item Desktop menjadi Window.
4. Ganti Color warna hitam menjadi warna putih.
5. Selesai.



Cukup sekian untuk tutorial kali ini semoga tutorial atau artikel tentang Windows 7 Theme Full Glass dapat bermanfaat untuk Anda! Jika Anda mengalami masalah dengan penerapan tutorial kali ini silahkan ajukan masalah Anda dalam form komentar!