Oto Website

Minimarket Theme WordPress

noreply@blogger.com (Dek Rifin) — Sat, 4 Apr 2015 14:15:00 +0700

Ini adalah Theme koleksi terbaru theme-id untuk project toko online anda.
Berikut beberapa fiturnya...

News ticker

Featured terbaru , pasang info terbaru , promo , lebih mudah , via theme option

Ready widget custom menu hover

Ready banner slider

untuk minimarket ane sediakan 5 slider

Hoverzoom , on off via theme option

Anda dapat membelinya dari theme-id atau Anda dapat membelinya lansung pada saya...

DEMO

Harga Minimarket Theme WordPress Rp. 120.000

Silahkan kontak saya via Facebook/Twitter jika Anda berminat membelinya lansung dari saya... Update Minimarket Theme WordPress v3.1 (5Januari 2015)

Cara Membuat PIN Cantik di BBM

noreply@blogger.com (Dek Rifin) — Mon, 9 Mar 2015 00:13:00 +0700

Mungkin kamu selama ini bertanya-tanya tentang bagaimana cara membuat PIN BBM (Blackberry Messenger) kita menjadi Cantik?!
Ketika kita mendaftar di Blackberry Messenger tentu kita akan mendapatkan PIN atau ID kita agar teman kita atau orang lain dapat meng-Invite kita menjadi teman di BBM, sayangnya ketika kita mendaftar di BBM, PIN kita tentu saja tidak sesuai dengan keinginan kita, ada yang PIN nya mudah di ingat dan ada pula yang sulit untuk di ingat…

Tapi bagi kamu yang susah menghafal PIN BBM, sekarang kamu tidak perlu khawatir lagi karna PIN BBM kamu dapat di ubah menjadi cantik sesuai keinginan kamu, Karna BBM sudah mengizinkan penggunanya untuk membuat PIN-nya sendiri. Pastinya harus terdiri dari 6-8 karakter, bias di gabungkan dengan huruf dan angka, atau huruf atau angka semua.

Penasaran bagaimana cara membuatnya? Simak Ulasannya berikut ini:

1. Update BBM kamu ke versi terbaru.

2. Buka BBM kamu, lalu buka profil.

3. Lihat tepat di bawah PIN BBM kamu, lalu klick “Customize My PIN”

4. Setelah itu klick ‘Berlangganan’ atau “Subcribe”

5. Perlu kamu ketahui, fitur Customize PIN ini adalah layanan berbayar. Pengguna akan di kenakan biaya sebesar $1,99 atau Rp. 20.000,- setiap bulannya. BBM menawarkan dua pilahan pembayaran bias lewat potong Pulsa atau Kartu Kredit, silahkan tentukan pilihan kamu.

6. Setelah itu kamu akan di alihkan ke halaman Customize PIN. Silahkan kamu pilih PIN yang kamu inginkan. INGAT PIN hanya bias diisi satu kali dan tak bias di gant lagi.

7. Finish!!! Sekarang kamu bisa membagikan PIN baru kamu kepada teman-teman kamu!

Tidak punya Kartu Kredit?
Kamu dapat membayarnya secara Gratis... KLIK DISINI untuk tau caranya.

Cara Mendapat Dollars Dengan Android

noreply@blogger.com (Dek Rifin) — Sun, 1 Mar 2015 01:52:00 +0700

Halo?
Apa Anda punya handphone Android??? Jika Anda pengguna handphone android dengan merek apapun mulai dari merek Cross, Samsung, dan lain-lain... maka silahkan Anda meneruskan membaca post Saya ini, tapi kalo belum berarti Anda gak gaul.... hehehe....

Taukah Anda dengan handphone Android Kita bisa menghasilkan uang, seperti judul di atas : Cara Mendapat Dollars Dengan Android , bagi Anda yang menggunakan handphone android, Saya rasa itu Rugi jika Anda hanya menggunakannya untuk Telponan, SMSan, Online, dan Maing Game saja. Karna dengan handphone android kita bisa menghasilkan uang dengan mudah lhooo...

Mumpung ada pelung bagus kenapa tidak kita manfaatkan?

Dengan aplikasi ini Alhamdullilah tiap bulan Saya tidak perlu repot membayar kreditan Saya, dan jadi nambah penghasilan, Saya sangat terbantu dengan aplikasi ini... bagaimana dengan Anda?!

Aplikasi Android yang saya gunakan untuk mencari uang tersebut adalah Whaff, mungkin sudah banyak yang sudah tau, tapi apa salahnya saya membagikannya bagi Anda yang belum tau dan ingin mendapatkannya seperti Saya, berikut ini langkah-langkahnya, di simak dan di lakukan dengan teliti ya....!!!

1. Dari Android Anda buka Google Play dan cari Aplikasi Whaff.

2. Unduh aplikasi tersebut dan Instah di android Anda.

3. Kemudia buka aplikasi tersebut dan lansung login dengan akun Facebook Anda.

gambar langkah 3

4. Masukkan Email dan Password Facebook Anda untuk meneruskan...

gambar langkah 4

5. Lalu lanjutkan sepeti tahap di bawah ini... Ok...

gambar langkah 5

6. Untuk mendapatkan BONUS Saldo Whaff $0.30, Invite Kode: AT54553
Code Invitation Whaff: AT54553
Whaff Invite Code: AT54553

gambar langkah 6

7. Finish.

Setelah berhasil login silahkan lakukan like FP dari WHAFF dan beberapa aksi lainnya untuk mendapatkan uang...

Untuk cara payout atau pembayarannya Whaff menggunakan banyak metode: Xbox Live Gift, Playstasion@store Gift Card, Amazon Gift Cards, Google play Gift card, steam gift card, facebook gift card, iTune gift card dan Paypal. Kalau Saya lebih suka menggunakan Paypal karena bisa dikirim ke Bank Indonesia. Jika belum mempunyai Paypal, Jika Anda tidak punya akun Paypal, Anda cukup mengumpulkan dulu Dollarnya setelah itu baru membuat akun Paypal agar balik modal, hehe.... Untuk yang belum yakin whaff tidak membayar. Ini Saya kasih SS Bukti pembayaran whaff rewards melalui Paypal

bukti 1

bukti 2

Tambahan:
Aplikasi ini bukan hanya untuk mencari dollars saja, Anda juga dapat menukarkannya dengan Google Play Gift Card yang bisa di gunakan untuk membeli aplikasi, game yang berbau Android...
Anda dapat melihat semua cara pembayaranya di Whaff Pembayaran... Salam sukses :)

Mystique Blogger Template

noreply@blogger.com (Rifin) — Thu, 6 Feb 2014 10:11:00 +0700

Demo Template

Unduh Template

Nama template: Mystique

Keterangan: Mystique adalah Template premium blogger yang diadaptasi dari WordPress dengan 2 kolom dan sidebar kanan.

Tata letak yang sangat baik untuk blog tentang fantasi atau buku harian.

Tanggal rilis: Bulan 11 tahun 2009

Template Auhor : ThemeCraft

Dasar Instruksi: Bagaimana menginstal template Blogger

Cara Pasang:

Download dulu Templatenya.
Extract file .zip menjadi folder.
Masuk ke Blogger sobat.
Lalu menuju "Rancangan".
Centang "Expand Template Widget".
Pada Backup/Restore Template, pilihlah browse.
Ambil file "Precision Blogger Template" dan unggah.
Simpan.

Membuat Navigation Menus Css3 Bergaya Attractive Dark

noreply@blogger.com (Rifin) — Thu, 2 May 2013 16:12:00 +0700

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:

Lihat Demo

Lihat Demo

Cara Membuat + Cara Memasang di Blogger

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.

Dari Meja Editor

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.

Tema Vanila untuk Postingan Blogger

noreply@blogger.com (Rifin) — Wed, 24 Apr 2013 19:30:00 +0700

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.

Lihat Demo

Lihat Demo

Cara Membuat Tema Vanila untuk Postingan Blogger

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.

Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2

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.

Dari Meja Editor

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!

Windows 7 Logon Background Changer

noreply@blogger.com (Rifin) — Tue, 23 Apr 2013 00:02:00 +0700

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

ScreenShot

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:

Windows 7 Logon Background Changer

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

Software By: Julian Manici and publish back by the dek rif.

jQuery Slide Show Lembut Untuk Blogger

noreply@blogger.com (Rifin) — Sun, 21 Apr 2013 16:10:00 +0700

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!

ScreenShot

Lihat Demo

Lihat Demo

Cara Membuat

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpbLesS9GAj7-y_RSytHFSOmnsuSAvn74H5-sklS3cT4TOWRJqi0-3hPCeACYSwypTubLYdhOsgQ7U5mcGJx3KV5P6-5ue_DRIluy-6ZxFmg2YY6HGg8mHzyn4SNQUWrfkCPdojxXrg/s1600/OtoWebsite-bedugul.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYinTFF-H1OtdKNLHhzINm06h3-7XFeLLy59H_SI2UCL9lHr2gO5qHVaxV6aCrc05HG9rmf5jR-XRgncKiGoRkFGOjb7Bp3VthQy0_Uesngq2ODMgfF8V9i9E-stroVo4udf7t3jbbmw/s1600/OtoWebsite-gunung+takuban+perahu.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lgl-7Kcv7EKejN-_7rTnCaJeJ7ZdMUkIGkhfDpuXEWk8l3F_zjI5Ur9kiYCjl1N-5sxFNTwsAR9GJPM9o-80mBbwJa34iOJ1KXBmzgmHMzAvTv7UbRFd7_O6loEAZ65VmUjMMoJ4Cw/s1600/OtoWebsite-raja+ampat.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRKnLIQNT4PE3lrJYQCBJzbp1ULM88HLfCqWw9AyALFhmhk8rCk3xIT0yPgSZY0oBRCbho1zPnvwplvv5xRkrO7JGsLIwTEgRB75geX4zMUPEhwK84kyDvWHKUzRjyEMtYYmB-2p7dA/s1600/OtoWebsite-watu+ulo.jpg" />
</div>
</div>
</div>
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({directionNavHide:false});
});
</script>

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

5. Simpan Widget.

Dari Meja Editor

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

noreply@blogger.com (Rifin) — Fri, 12 Apr 2013 16:48:00 +0700

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.

ScreenShot

Cara Membuat dan Memasang

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.

Dari Meja Editor

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.

Komentar Slide Panel

noreply@blogger.com (Rifin) — Thu, 11 Apr 2013 16:28:00 +0700

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.

Sceenshot dan Cara kerja

1. Cara Menginstal di Blogger

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(){

    $(".toggle_container").hide();

    $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
    });

});
</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.

Dari Meja Editor

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.

JavaScript Anti Iframe

noreply@blogger.com (Rifin) — Sun, 31 Mar 2013 22:13:00 +0700

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.

Kenapa kita harus menggunakan JavaScript Anti Iframe?

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

JavaScript Anti Iframe?

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.

Dari Meja Editor

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!

Attractive Css3 Cycling Slideshow Untuk Blogger

noreply@blogger.com (Rifin) — Thu, 28 Mar 2013 18:13:00 +0700

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.

ScreenShot

Lihat Demo

Lihat Demo

Cara Membuat

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

Memasang Meta Tag Alexa

noreply@blogger.com (Rifin) — Tue, 12 Mar 2013 07:58:00 +0700

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 kontribusi besar untuk blognya demi mendapatkan pengakuan dan nilai yang berupa traffik rank dan link in. Penilaian yang di berikan oleh Alexa sangat berguna untuk blog sebagai indikator kepopuleran sebuah blog dimata seorang Boss besar yang tak lain adalah “Google”.
Untuk lebih jelasnya tentang Alexa Anda bisa memaca aritikel Tentang Alexa.

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 Memasang Meta Tag Alexa yang sudah lama caranya sudah berbeda, Saya menulis artikel atau tutorial ini juga di karenakan Saya baru kemarin Memasang Meta Tag Alexa pada Oto Website. Tidak ada salahnya pula saya memberika Info dan cara Memasang Meta Tag Alexa kepada Anda yang masih belum mengetahui caranya.

Sebelumnya Anda pasti sudah tau apa keuntungan Memasang Meta Tag Alexa pada Situs Anda? Jika belum sebaiknya Anda baca tutorial sebelumnya yang membahasa Tentang Alexa.
Bisa di bilang dengan Memasang Meta Tag Alexa pada Situs kita, maka kita akan lebih mengoptimalkan Situs kita, terutama di mata Google.

Untuk Memasang Meta Tag Alexa pada situs sebenarnya sama saja dengan memasang pada blogger, disini Saya akan memberikan cara Memasang Meta Tag Alexa pada blogger. Lanjutkan membaca Anda untuk mengethui caranya!

Sebelum Memasang Meta Tag Alexa Anda harus sudah terdaftar pada Alexa, jika belum silahkan daftarkan diri Anda pada Situs www.alexa.com terlebih dahulu!

Memasang Meta Tag Alexa

Jika Anda sudah pernah mendaftarkan Situs Anda dan Anda ingin menambahnya lagi caranya adalah sebagai berikut:

Klik Dashboard.
Add a Site.
Lalu ikuti instruksi pada langkah nomer 2 di bawah.

Jika Anda belum mendaftarkan Situs Anda, Anda bisa mengikuti panduan berikut ini, sebelumnya Anda harus Login terlebih dahulu pada Situs Alexa maupun Blogger.

1. Klik Dashboard pada menu Alexa, Lalu Klik Get Started seperti pada gambar 1 berikut.

(Gambar 1 oleh dek rif)

2. Klik Sign Up untuk mendaftarkan Situs/Blog Anda.

(Gambar 2 oleh dek rif)

3. Masukkan URL Situs atau URL Blog Anda, contoh: otowebsite.blogspot.com. Tanpa menggunakan http:// ataupun www. Lalu klik Continue untuk melanjutkan.

(Gambar 3 oleh dek rif)

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.
Di opsi kedua tersebut Anda akan di berikan tiga tag, Saya sarankan Anda memilih atau mengcopy tag yang kedua saja(lihat gambar 4).
Contoh, disini Saya mengambil tag yang kedua dengan ID Oto Website:

<meta content='sF069dcUzmwTpU0Siglb3ngHjXk' name='alexaVerifyID'/>

Sekarang pergi ke Dahbord blogger >> Template >> Edit HTML.
Lalu letakkan meta tag dengan ID blog Anda tersebut di bawah tag <head> atau di atas tag </head>
Jika Anda sudah memasang Meta Tag Google Anda bisa Memasang Meta Tag Alexa tersebut, di atas Meta Tag Google lalu Simpa template.
Kembali ke halaman Alexa tadi lalu klik Veritify my ID.

(Gambar 4 oleh dek rif)

5. Jika Benar seharusnya akan muncul pemberitahuan bahwa Klaim Situs Anda sudah berhasil, Selanjutnya klik Continue untuk melanjutkan(lihat gambar 5).

(Gambar 4 oleh dek rif)

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.

(Gambar 6 oleh dek rif)

7. Finish, Anda sudah berhasil Memasang Meta Tag Alexa dan mendaftarkan situs Anda pada Alexa.

(Gambar 7 oleh dek rif)

8. Dan ini adalah tampilan Dashboard situs yang berhasih di klaim.

(Gambar 8 oleh dek rif)

9. Anda bisa melihat dan merubah data atau profil yang Anda buat tadi melalu Edit Site Listing.

(Gambar 9 oleh dek rif)

Dari Meja Editor

Oke sekian dulu untuk artikel atau tutorial kali ini semoga dapat bermanfaat untuk Anda, natikan lagi tutorial selanjutanya dari Oto Website. Jika ada pertanyaan tentang tutorial di atas silahkan kirimkan pertanyaan pada pada form komentar!

Cool Sunrise Gloss Drop Down Menu

noreply@blogger.com (Rifin) — Mon, 11 Mar 2013 01:23:00 +0700

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

Demo Cool Sunrise Gloss Drop Down Menu

LIHAT DEMO

Cara Membuat

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!

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;

}

HTML/JavaScript

<div class="ow-container-outer">

<img src="https://code-otowebsite.googlecode.com/svn/trunk/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://code-otowebsite.googlecode.com/svn/trunk/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="ow-container" class="ow-container">

<li><a class="item-primary" href="http://www.otowebsite.blogspot.com/">HOME</a>

</li>



<li><span class="divider divider-vert" ></span></li>

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



<ul style="width:150px;">

<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="#">100% CSS Menu</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><span class="divider divider-horiz" ></span></li>

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

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

</ul></li>



<li><span class="divider divider-vert" ></span></li>

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



<ul style="width:150px;">

<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="#">100% CSS Menu</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><span class="divider divider-horiz" ></span></li>

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

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

</ul></li>



<li><span class="divider divider-vert" ></span></li>

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



<ul style="width:150px;">

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

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Very Long Item</a>



<ul style="width:150px;">

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

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Fully Flexible</a>



<ul style="width:150px;">

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

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li class="clear"> </li></ul>

</div>

Dari Meja Editor!

Sekian dulu untuk tutorial tentang Cool Sunrise Gloss Drop Down Menu, mudah-mudahan Anda senang dengan tutorial kali ini dan bisa bermanfaat untuk Anda. Bila ada pertanyaan tentang tutorial di atas jangan ragu untuk bertanya, cukup lemparkan pertanyaan Anda di kotak komentar, Saya akan berusaha secepat mungkin membalasnya!

Oto Website Revolution

noreply@blogger.com (Rifin) — Sun, 10 Mar 2013 01:19:00 +0700

Dua Tahun lebih sudah Oto Website ikut bergabung di dunia Blogger dan memberikan konten-konten menarik(menurut saya). Situs ini sebenarnya sudah berulang-ulang kali bergati domain blogger dan berganti Nama bahkan juga sering berganti-ganti Template. Saya dek rif selaku dari Admin Oto Website ingin berusaha memberikan sesuatu yang menarik dan sedikit banyaknya bisa membantu Anda semua, mungkin dengan "News-Info-Internet-Setting-Create Account & Download" bisa sedikit membantu Anda. Blog ini sampai saat ini masih di urus oleh Saya sendiri, jadi mungkin Saya melakukan banyak keterlambatan dalam mempublikasikan berita dan lain sebagainya. Saya sendiri juga menyadari bahwa Saya banyak melakukan kesalahan dalam penulisan ataupun konten yang di publish di blog ini, Jadi Saya mohon maaf kepada teman-teman ataupun pembaca semua bila blog ini melakukan kesalahan, karna Admin blog ini adalah Manusia dan Manusia tidak pernah luput dari kesalahan.

Saya berusaha memberikan tulisan atupaun konten yang menarik untuk Anda, seperti tutorial blogger, tapi karna Saya yang juga masih dalam pembelajaran HTML, mungkin tutorial tersebut kurang menarik(jujur).

Oto Website Revolution

Artikel kali ini bukanlah sesuatu yang penting mungkin menurut Anda, tapi bagi blog ini adalah sesuatau yang penting, karna dalam artikel ini Saya akan memberitahukan kepada Anda bahwa dengan ini Oto Website akan berganti Logo! karna logo sebelumnya bukanlah logo buatan Saya, logo sebelumnya berbentuk 'Bumerang', entah apa yang Saya fikirkan sehingga logo tersebutlah yang Saya pilih. Intinya Saya suka sesuatu yang simpel, mungkin karna itu Saya memilih logo Bumerang tersebut.

Logo Lama

Untuk pengganti Logo tersebut Saya telah membuat Logo Baru Oto Website, sama seperti logo sebelumnya logo baru ini menurut Saya tidak ada yang menarik karna hanya untuk menjadi Symbol dari Oto Website. Perbedaanya hanya logo ini buatan Saya dan simpel juga!

Logo Baru

Sebenarnya Saya juga ingin sekali mengganti template, tapi karna Saya mengingat efek dari ganti template, jadi Saya mengurungkan niat Saya itu biarlah tampilah Oto Website seperti ini saja, simpel-simpel saja.

Mudah-mudahan dengan perubahan logo ini Oto Website bisa memberikan tulisan ataupun konten yang lebih menarik untuk Anda!

Terimakasih karna Anda telah membaca Artikel Oto Website Revolution dan menjadi saksi perubahan dari logo Oto Website! Silahkan lanjutkan membaca Artikel lainnya dari blog ini, Salam Blogger!

CSS3 Slide Style Navigation Bar

noreply@blogger.com (Rifin) — Fri, 8 Mar 2013 07:03:00 +0700

Perjumpaan kali ini kita akan membahas atau update tutorial tentang Navigation Menus dan untuk tema tutorial kali ini saya beri nama CSS3 Slide Style Navigation Bar.

Ini adalah Navigation Menus yang menarik untuk blogger Navigation Menus ini memiliki efek yang terbilang tampil beda dari kebanyakan menu-menu lainnya. Keistimewaan lagi tentang menu ini adalah, menu ini ringan untuk di gunakan, dan tidak mempengaruhi kecepatan atau pemuatan blog Anda, karna menu ini bekerja dengan CSS3, tanpa menggunakan bantuan dari jQuery sama sekali.

Untuk lebih jelasnya tentang Navigation Menus ini atau efek yang di gunakan oleh menu ini silahkan Anda lihat demonya untuk memperjelasnya.

Lihat Demo

Lihat Demo

Untuk membuatan menu tersebut kita hanya perlu menggunakan bantuan CSS, dan untuk lebih jelasnya kode apa saja untuk membuatanya silahkan Anda perhatikan kode-kode di bawah ini, dan silahkan rubah sendiri jika ada beberapa yang Anda rasa harus di rubah.

The CSS ver CSS3

OW {
        max-width: 900px !important;
            margin: 100px auto;
            margin-top: 20px;
        }
        OW ul {
            list-style: none;
            overflow: hidden;
        }
        OW li a {
            background: #000;
            border-right: 1px solid #fff;
            color: #fff;
            display: block;
            float: left;
            font: 400 13px 'Montserrat Alternates', Arial;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            width: 80px;
            -webkit-transition: transform 1s;
            -moz-transition: transform 1s;
        }

        OW#nojquery li a:hover, .rotate {
            -moz-animation: animrotate 2s; 
            -webkit-animation: animrotate 2s; 
            background: #222;
        }
        @-moz-keyframes animrotate {
            100% {background: blue;-moz-transform: perspective( 200px ) rotateY( 360deg );}
        }

        @-webkit-keyframes animrotate {
            100% {background: blue;-webkit-transform: perspective( 200px ) rotateY( 360deg );}
 }

The HTML/JavaScript

<OW id="nojquery">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
</OW>

Dari Meja Editor!

Saya rasa cukup sekian untuk kali ini, Saya harap Anda menyukai Artikel kali ini, jika ada pertanyaan tentang artikel di atas silahkan lemparkan pertanyaan Anda di kotak komentar Saya akan berusaha secepat mungkin untuk membalas dan membantu Anda.

Tambahkan Icons External Link di Postingan Blogger

noreply@blogger.com (Rifin) — Sun, 3 Mar 2013 03:03:00 +0700

Halo Sobat semua, lama Oto Website tidak share Tutorial, Software , Info dan Sebagainya di karenakan Admin terlalu sibuk di dunia nyata.
Untuk pertemuan kali ini kita akan membahas tentang tutorial blogger yang bertemakan Tambahkan icons External link di Postingan Blogger. Mungkin Anda sedikit kebingungan dengan judul kali ini? atau mungkin saja tidak? Ya bagi Anda para blogger atau Admin dari sebuah blog/website pasti sangat mengenal dan memahami External Link atau bahasa Indonesianya di sebut dengan Link Eksternal. Bagi Anda yang tidak mengetahui External Link maka sungguh terlalu.

Bagi Anda yang masih awam atau baru di dunia blogger, sebenarnya jika Anda membuat sebuah artikel pada postingan Anda, sebenarnya lagi Anda telah membuat Link Ekstenal dan mungkin Anda tidak mengetahuinya karna Anda tidak tahu namanya?namun bagi Anda yang masih awam akan saya jelaskan sedikit tentang External Link/Link Eksternal!

Apa itu External Link?

Link external adalah hyperlink yang menunjuk pada (target) setiap domain selain domain link yang ada di (sumber).

Dalam istilah awam, jika link pada website lain untuk Anda, ini dianggap link external karna menuju ke situs Anda. Demikian pula sebaliknya, jika Anda link ke website lain, hal ini juga dianggap sebagai link external.

Dengan kata lain di tutorial ini kita akan mengubah Link Eksternal standar blogger menjadi lebih cantik dengan Icons di sudut sebelah kiri, Untuk lebih jelasnya adalah seperti demo berikut ini (Lihat Icon Link di sudut kiri)

Icons External Link

Click Aja ...!!!

Sukses Bersama Clixsense

PTC Terpecaya dan Terbukti Membayar

PTC Indonesia Dengan Bayaran Tertinggi

Berikut ini adalah cara Tambahkan Icons External Link di Postingan Blogger

Original CSS

.post-body a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
background: url(//bits.wikimedia.org/static-1.20wmf8/skins/vector/images/external-link-ltr-icon.png?2012-07-23T14:50:00Z) center right no-repeat!ie;
padding-right: 13px;
}
.separator a{ background:none;}

Manual CSS (Saya sarankan)

Letakkan di atas tag ]]</b:skin>

a.external OW{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
background: url(//bits.wikimedia.org/static-1.20wmf8/skins/vector/images/external-link-ltr-icon.png?2012-07-23T14:50:00Z) center right no-repeat!ie;
padding-right: 13px;
}

Standar Pemanggil Manual CSS

Pada saat membuat atau mengedit artikel letakkan kode berikut untuk memanggil:

Perhatikan tag yang di blok di atas, ganti tag tersebut dengan Link dan Judul Anda sendiri!

Dari Meja Editor!

Wordpress Style Author Bio Box For Blogger

noreply@blogger.com (Rifin) — Mon, 11 Feb 2013 02:31:00 +0700

Welcome to the Website of Oto Website, Saya ucapkan bagi seluruh pengunjung yang sedang membaca Artikel Oto Website, atau mungkin sedang tersesat di blog ini melalui Search Engine. Kali ini dalam artikel ini kita akan umembahas tentang tutorial blogger kembali.

Apakah Anda pernah melihat Author Box atau Kotak Admin di salah satu blog Wordpress? Kalo Anda pernah melihatnya apakah Author Box tersebut cukup membuat Anda terkesan?

Kenapa Saya bertanya seperti itu? Ya karna kali ini Author Box yang ada pada Wordpress lah yang akan kita bahas tentang bagaimana cara menambahkannya pada blogspot dan tutorial kali ini Saya beri judul: Wordpress Style Author Bio Box For Blogger. Sebelumnya blog ini juga pernah membahas Kotak Admin untuk blogspot yang berada DISINI.

Untuk lebih jelasnya tentang Wordpress Style Author Bio Box For Blogger dan bentuknya silahkan Anda lihat demo berikut ini:

SceenShot ▼

(gambar oleh dek_rif)

Live Demo

Lihat Demo

Tambah Wordpress Style Author Bio Box For Blogger

Wordpress Style Author Bio Box For Blogger ini peletakkan di bawah postingan blogger, atau di bawah artikel blog Anda, berikut ini adalah kode yang di gunakan untuk membuat Wordpress Style Author Bio Box For Blogger.
Letakkan tag berikut di bawah tag <data:post.body/> yang kedua dalam template Anda.
Atau
Letakkan tag berikut sebelum tag <div class='post-footer-line post-footer-line-1'> dalam template Anda.

/* Code for the author box starts here otowebsite.blogspot.com */
<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:105px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("https://code-otowebsite.googlecode.com/svn/trunk/gp-icon.png") no-repeat 0 0px; color: #666; font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Author Name"'>
<div id="postauthor">
<div id="author-info">
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_118ChHKE4ltjG9-88QU5E_y2TMlW0MNx-fkbuIH1WVeOkETkXkVL958h4xk7_PBpsqVcg9MWSqdp-1Y6p1wcpqouzA7gHFsGSNWWxYfYKgJAhFWbBQ38ZSjIXYw6lzaGj9SOK9oVA4/s1600/author.jpg' height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName Semoga Artikel ini banyak berguna.</h5>
<p>Jika Anda menyukai Artikel ini Anda dapat mengikuti Oto Website di <strong>
<a href="http://twitter.com/otowebsite" rel="nofollow" >Twitter </a> </strong>.Berlangganan <strong> feed Oto Website via <a href="http://feeds.feedburner.com/otowebsite" rel="nofollow" >RSS</a> atau <a href="http://feedburner.google.com/fb/a/mailverify?uri=otowebsite&loc=en_US" rel="nofollow" > EMAIL </a> </strong>untuk mendapatkan Update terbaru.</p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21&appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/otowebsite" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @otowebsite</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://plus.google.com/115780777398536909642" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if></b:if>

Keterangan:

Ganti kode yang di blok biru dengan URL Gambar Anda.
Ganti kode yang di blok kuning dengan ID feedburner Anda
Ganti kode yang di blok hijau dengan ID twitter Anda
Ganti kode yang di blok ungu dengan URL ID facebook Anda.
Ganti kode yang di blok merah dengan ID Google Plus Anda.

Dari Meja Editor

Saya rasa cukup untuk kali ini, yang membahas tutorial blogger berjudul Wordpress Style Author Bio Box For Blogger. Saya harap Anda menyukai tutorial di atas dan tidak mengalami kesulitan dalam pembuatan atau pemasangan, Jika Anda mengalami masalah tentang tutorial di atas silahkan tinggalkan pertanyaan Anda pada form komentar!

IDM 6.15 Full Patch

noreply@blogger.com (Rifin) — Fri, 8 Feb 2013 01:08:00 +0700

Di artikel kali ini kita akan berbagi sebuah software yang sangat penting untuk mengunduh sebuah file vide, mp3 dan lain sebagainya. Mungkin Anda sudah tau software apa yang akan kita bagikan? di bilang sangat penting untuk mengunduh sebuah file apa lagi kalo bukan IDM atau bisa juga di sebut Internet Download Manager. IDM telah merilis versi terbarunya yang di rilis pada tanggal 29 januari 2013 yaitu IDM 6.15 Full Patch, perilisan berbeda dua puluh hari dengan IDM 6.14 Build 5 Full Patch yang di rilis pada tanggal 9 januari 2013 yang kita bahas kemarin.

Bagi para pecinta IDM(Internet Download Manager) atau pecinta Download pasti Anda akan sangat membutuhkan software ini, apa lagi software ini berukuran kecil, jika di total IDM 6.15 dan Patch hanya berukuran 4.91 MB.

Bagi Anda yang tidak tau kegunaan atau apa itu IDM bisa lihat penjelasannya berikut ini:

Internet Download Manager (IDM) adalah alat untuk meningkatkan kecepatan download sampai 5 kali, melanjutkan dan jadwal mingguan. Comprehensive error recovery dan melanjutkan kemampuan akan restart download rusak atau terputus karena kehilangan koneksi, masalah jaringan, komputer shutdowns, atau listrik padam tak terduga. Antarmuka pengguna grafis sederhana membuat IDM user friendly dan mudah untuk use.Internet Download Manager memiliki logika download accelerator cerdas yang segmentasi file fitur cerdas dinamis dan teknologi download multipart aman untuk mempercepat download Anda. Tidak seperti manajer download lain dan akselerator segmen Internet Download Manager file secara dinamis selama proses download dan menggunakan kembali sambungan tersedia tanpa menghubungkan dan login langkah tambahan untuk mencapai kinerja percepatan terbaik.
Internet Download Manager mendukung proxy server, ftp dan protokol http, firewall, pengalihan, kue, otorisasi, MP3 audio dan pengolahan isi video MPEG. IDM diintegrasikan ke dalam Microsoft Internet Explorer, Netscape, MSN Explorer, AOL, Opera, Mozilla, Mozilla Firefox, Mozilla Firebird, Avant Browser, MyIE2, dan semua browser populer lainnya untuk secara otomatis menangani download Anda. Anda juga dapat drag dan drop file, atau menggunakan Internet Download Manager dari baris perintah. Internet Download Manager dapat dial modem Anda pada waktu yang ditetapkan, download file yang Anda inginkan, kemudian menggantung atau bahkan mematikan komputer Anda ketika selesai. Fitur lainnya termasuk dukungan multibahasa, zip preview, download kategori, scheduler pro, suara di berbagai aktivitas , dukungan HTTPS, prosesor antrian, membantu dan tutorial html, perlindungan virus ditingkatkan di download selesai, download progresif dengan kuota (berguna untuk koneksi yang menggunakan beberapa jenis kebijakan akses yang adil atau FAP seperti Direcway, Direct PC, Hughes, dll), dibangun -in download accelerator, dan banyak lainnya. Di kutip oleh IDM.

Instruksi dari Admin:

Jika Anda berniat mengunduh software atau tool ini saya sarankan Anda untuk menghapus intalasi IDM sebelumnya(yang versi lama), karna dari survey IDM akan lambat waktu mendownloadnya jika di Update. Artinya hapus Intasli Sebelumnya secara penuh, lalu Instal IDM yang terbaru tanpa menumpuk IDM yang lama dengan yang baru.

Berikut ini beberapa IDM yang telah atau pernah O.W posting untuk Anda:
IDM 6.14 Build 3 Final Full Patch (Dirilis 24 Desember 2013)
IDM 6.14 Build 5 Full Patch (Dirilis 9 januari 2013)
IDM 6.15 Full Patch (Dirilis 29 januari 2013)

ScreenShot

ScreenShot IDM 6.15 Full Patch (gambar oleh dek_rif)

ScreenShot IDM (gambar oleh IDM)

Apa yang baru di versi 6.15?

Ditambahkan dukungan untuk script konfigurasi proxy otomatis (digunakan dalam layanan seperti premiumize.me dan lain-lain)
Fixed bug kritis dalam modul integrasi IE
Terselesaikan masalah dengan men-download situs file sharing beberapa
Berubah "Minimalkan ke tray" tombol gaya untuk Windows 8

System requirements

Operating systems Windows 7, Windows 2003, Windows Me, Windows 98, Windows 2000, Windows 8, Windows Vista, Windows XP, Windows NT, Windows Server 2008
Additional requirements Not available

Download IDM 6.14 Build 5 Full Patch

Disini saya telah menyediakan IDM 6.15 Full Patch jadi IDM Anda akan menjadi full, Untuk mengunduh IDM 6.15 Full Patch silahkan Anda tekan tombol di bawah ini. Untuk cara Patch IDM 6.14 Build 5 telah saya sediakan caranya di file Path IDM, silahkan baca path yang ada di file tersebut untuk menjadikan IDM 6.15 menjadi Full.

IDM 6.15 Full Patch

Attractive Css Image Hover Effect Untuk Blogger

noreply@blogger.com (Rifin) — Wed, 6 Feb 2013 15:16:00 +0700

Attractive Css Image Hover Effect Untuk Blogger Adalah salah satu cara terbaik untuk mempercantik tampilan gambar yang ada di blog Anda.Sebelumnya kita juga pernah membahas berbagai effect pada gambar di antaranya Membuat Gambar Bergetar Menggunakan jQuery. Dengan penerapan Attractive Css Image Hover Effect Untuk Blogger maka Anda telah membuat gambar Anda menjadi lebih menarik, sehingga Anda dapat menambahkannya di setiap postingan Anda.

Effect gambar ini sama sekali tidak memberatkan blog atau tidak membuat loading menjadi lama karna kita hanya menggunakan CSS.
Untuk cara menambahkan effect ini pada gambar kita hanya perlu melakukan dua langkah mudah, yaitu menambahkan css pada template dan pada postingan blog kita. Sebelum kita tau cara membuatnya lebih baik kita lihat dulu demo yang telah saya persiapkan untuk Anda di bawah ini agar Anda mengerti effect yang kita maksud. Silahkan arahkan cursor Anda pada gambar, dan lihat effectnya pada gambar tersebut.

Demo

Kode yang di gunakan untuk membuat

Berikut ini adalah kode yang di gunakan untuk membuat effect gambar seperti di atas. Anda dapat merubah kode CSS sesuai keinginan Anda.

CSS

.OWeffect {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.OWeffect:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

POST

Berikut ini adalah kode untuk memanggil kode CSS di atas. Pada saat membuat atau mengedit postingan letakkan script kode berikut untu memanggail gambar Attractive Css Image Hover Effect.

<img class="OWeffect"
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" />

Atau

<img class="OWeffect"
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" />

Atau

<img class="OWeffect"
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" height="230" />

Perhatikan kode yang telah di block di atas, kode tersebut bisa Anda ganti sesuai keinginan Anda.

Dari Meja Editor!

Saya rasa cukup sekian untuk kali ini, jika ada pertanyaan tentang artikel di atas silahkan lemparkan pertanyaan Anda di komentar Saya akan berusaha secepat mungkin untuk membalas dan membantu Anda.

AudioShell Tag Editor File Music

noreply@blogger.com (Rifin) — Sat, 2 Feb 2013 15:17:00 +0700

AudioShell adalah MS freeware Windows Explorer shell extension plugin yang memungkinkan Anda untuk melihat dan mengedit tag file musik secara langsung pada Windows Explorer.

AudioShell mendukung semua file dan standar tag didukung oleh Tag & Rename. AudioShell menambahkan tag editor dan tab penampil ke menu file musik properti (Anda dapat mengedit file tag dengan file atau oleh kelompok), file musik petunjuk dengan tag dan informasi file rinci, dan kolom tambahan dalam daftar file Explorer. Ini juga memiliki dukungan Unicode penuh.

Inti dari AudioShell: Anda dapatmerubah ataupun mengedit isi dalam file mp3 dan sebagainya, seperti menembahkan Cover album, Title, Album, Comment, Artist dan lain sebagainya.

Mendukung file dan format tag:

mp3 (semua versi tag ID3)
wma, asf dan wmv (termasuk file DRM)
Apple iTunes dan iPod aac (m4a, M4B, m4v dan m4p) dan file mp4
ogg, flac (vorbis tag komentar)
mpc, mp + (APE/APEv2 tag)
monkey's audio (APE/APEv2 tags)
wav pack (APE/APEv2 tags)
optim frog (APE/APEv2 tags)
wav (ID3v2 tag dalam potongan 'tag' RIFF)

Bahasa yang terdapat pada AudioShell:

Cina Sederhana
Ceko
Inggris
Perancis
Jerman
Italia
Polandia
Rusia
Spanyol

ScreenShot Pengeditan AudioShell

(gambar oleh dek rif)

Interface dan penggunaan yang sangatmudah menjadikan AudioShell alat yang sangat di butuhkan untuk mengedit isi dari File Music, Jika Anda pernah Download sebuah Mp3 dan di Cover Mp3 tersebut terdapat gambar orang lain maka kita dapat dengan mudah merubahnya sesuka hati kita dengan software ini dengan cara klick kanan-properties. software ini juga berukuran sangat kecil yaitu 1.10 MB.

ScreenShot Hasil Pengeditan AudioShell dan Pemutaran di Windows Media Player Win 7

(gambar oleh dek rif)

System requirements: AudioShell dirancang untuk Windows 32 bit sistem 2000.

Jika Anda kurang paham cara menggunakan AudioShell maka Anda tidak perlu khawatir, karna setelah Anda mengunduh AudioShell maka akan muncul petunjuk cara menggunakannya.

Unduh AudioShell

Silahkan tekan tombol di bawah ini untuk mengunduh AudioShell secara gratis!

Unduh AudioShell

Drop Down Menu Bar Mengagumkan Untuk Blogger

noreply@blogger.com (Rifin) — Fri, 1 Feb 2013 01:18:00 +0700

Dalam tutorial kali ini kita akan mencoba Update artikel tentang Navigation Menus, Seperti yang pernah saya utarakan pada tutorial terdahulu bahwa jika kita membahas tentang Navigation Menus maka Anda tidak perlu bertanya ada berapa atau total Navigation Menus yang Ada. Karna setiap waktu Navigation Menus ini dapat kita buat sendiri dengan keahlian kita. Di tutorial atau artikel kali ini kita membahas Navigation Menus yang saya beri nama Drop Down Menu Bar Mengagumkan Untuk Blogger. Mungkin judul ini kurang cocok bagi Anda, tapi ini hanyalah sebuah nama, apalah arti sebuah nama yang penting fungsinya. Untuk tempilan Drop Down Menu Bar Mengagumkan Untuk Blogger yang kita bahas kali ini adalah seperti ini:

ScreenShot

(gambar oleh dek rif)

Lihat Demo

Demo

Kode Yang Digunakan

HTML/JavaScript

<script src='https://code-otowebsite.googlecode.com/svn/trunk/awesome menu.js' type='text/javascript'></script>
<style>
#OWmenu *{
margin:0px; padding:0px; list-style-type:none; text-decoration:none}
div#OWmenu{position:relative}
#OWmenu ul.OWmenu{ white-space:nowrap}#OWmenu ul.OWmenu li{ display:inline-block; height:57px; position:relative}#OWmenu ul.OWmenu li div{ position:absolute; top:55px; left:0px}#OWmenu ul.OWmenu li div div{ position:absolute; top:-6px; left:176px}#OWmenu ul.OWmenu li div ul li{ display:block; float:none; width:auto; height:auto}#OWmenu ul.OWmenu li a{ padding-left:15px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-qVWe2hggpF9lFYw3iD851rW-nR7DH8g8A6iMGwehShdlgM_9ZoUXzVdZfuoXXpU2oawinUvXvXSjzrljG1WZEvaBpHnhOzZrcP7Y81ddhVGM0Fgay6V8YYYsopR4XFhxxxHe6i6z1x8/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:left -1000px; display:inline-block; margin:6px 2px}#OWmenu ul.OWmenu li a span{ padding-right:15px; padding-left:0px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-qVWe2hggpF9lFYw3iD851rW-nR7DH8g8A6iMGwehShdlgM_9ZoUXzVdZfuoXXpU2oawinUvXvXSjzrljG1WZEvaBpHnhOzZrcP7Y81ddhVGM0Fgay6V8YYYsopR4XFhxxxHe6i6z1x8/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:right -1000px; display:inline-block; height:40px; line-height:40px; cursor:pointer}#OWmenu ul.OWmenu li:hover a{ background-position:left -90px}#OWmenu ul.OWmenu li:hover a span{ background-position:right -135px}#OWmenu ul.OWmenu li.active a{ background-position:left 0px}#OWmenu ul.OWmenu li.active a span{ background-position:right -45px}#OWmenu ul.OWmenu li div ul li a{ display:block; padding:0px; margin:0px; background:none}#OWmenu ul.OWmenu li div ul li a span{ display:block; padding:0px; background:none; height:auto; line-height:25px; padding:10px 0 10px 12px; white-space:normal}#OWmenu ul.OWmenu li div{ width:194px; padding-top:6px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGEOkgay42Ssl00tg3x3SRDytzY0ojFVvRd-l4l3wNzvpmpMmfrurtOp9f6JvjuLo0SQqN7DVyYtRNXi-SprQxUoHgfalvQ_QJUP3dlMdMJQeBh8kgodIot2rm5-r0P9e1GUYV5MV4CRl/s1600/submenu-top.png"); background-repeat:no-repeat; background-position:0px top}#OWmenu ul.OWmenu li div ul{ padding:9px; padding-top:0; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIinJt9oNWULXL8pdDLr1Qr3VkPv2xPlb_GFPxZtB8YcSZpH-1SycnbfnvnasrvQVcBBICcVkVi4t_OYLTwBi7dnTU_3ROob5xxUaumjgtcNxe6r7N6IBPQbXsmTDRHmMDZbPmw6eM67D-/s1600/submenu-bottom.png"); background-repeat:no-repeat; background-position:0px bottom}#OWmenu ul.OWmenu ul li:hover{ background-repeat:repeat-x; background-position:0% 100%; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehds1MrZZHk_DIUla5Fmq8bzEC7M5ddpC1mRsUYOoNn8_0F84IxQEOqhih3kRaw83S6sJcxBrMxRs5gQvfsmu4mK_FxzZGVV5EMjZjd_M23Lo9dLpPpBoa4-mac1U0c15POkYUUtLD_sn/s1600/menu_level2_item_hover.png)}#OWmenu ul.OWmenu ul li:hover>a{ background-repeat:repeat-x; background-position:0% 0%; background-color:transparent; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehds1MrZZHk_DIUla5Fmq8bzEC7M5ddpC1mRsUYOoNn8_0F84IxQEOqhih3kRaw83S6sJcxBrMxRs5gQvfsmu4mK_FxzZGVV5EMjZjd_M23Lo9dLpPpBoa4-mac1U0c15POkYUUtLD_sn/s1600/menu_level2_item_hover.png)}
#OWmenu{ height:57px; padding-left:14px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3TZkYYKIk2Z9rJVDPU1yU1EZXLKMMCHefu2uzhca9A1tWhUA2-cnC5k1t7MDabZv4kdHGsq4hrceTsPivRJU7h9IuapsJHSw9CHNUT3x1c1xrha0e-mwdGYmDmA0TRERR80r_YHC2z38/s1600/page_header_b.png) repeat-x;
-webkit-border-radius: 20px;-khtml-border-radius: 10px; -moz-border-radius: 20px;border-radius: 10px;}
#OWmenu span{ color:#edf0f1; text-shadow:0 -1px 1px #000}#OWmenu li:hover>a>span { color:#fff; text-shadow:0 1px 1px #000,0 2px 10px #969696}#OWmenu ul.OWmenu li a span{ font-family:Arial; font-size:18px; font-weight:400}#OWmenu ul.OWmenu li div ul li a span{ font-family:Arial; font-size:15px; font-weight:400}#OWmenu ul.OWmenu li div ul{ padding-bottom:8px}#OWmenu ul.OWmenu li div ul li:first-child{ border-top-width:0px}#OWmenu li>div{visibility:hidden}#OWmenu li:hover>div{visibility:visible}/* */#OWmenu ul.OWmenu ul li:hover{ background-color:#393c45}#OWmenu ul.OWmenu li div ul li{ border-bottom:1px solid #70757b; border-top:1px solid #31363b}/* ie7 */#OWmenu ul.OWmenu li{ *zoom:1; *display:inline}#OWmenu ul.OWmenu li a{ *zoom:1; *display:inline}#OWmenu ul.OWmenu li a span{ *zoom:1; *display:inline}#OWmenu ul.OWmenu li div ul li a{ *display:inline}#OWmenu ul.OWmenu ul li:hover{ *background-image:none}#OWmenu ul.OWmenu ul li:hover>a{ *background-image:none}/* IE6 */#OWmenu ul.OWmenu li a{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEital45-OCWPtdf39qckraPm1UxpcDVIvohZbCSzv_TKhx5NLwu1obFVC3tv8zXcXgO192dWytdN7gahWclJJ4CZtylrxrTlpSySGY9rFSKTk_X-Vyy7C1UtzFzfqbTJH8SvyvX2LFHR4od/s1600/menu_level1_item.gif")}#OWmenu ul.OWmenu li a span{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEital45-OCWPtdf39qckraPm1UxpcDVIvohZbCSzv_TKhx5NLwu1obFVC3tv8zXcXgO192dWytdN7gahWclJJ4CZtylrxrTlpSySGY9rFSKTk_X-Vyy7C1UtzFzfqbTJH8SvyvX2LFHR4od/s1600/menu_level1_item.gif")}#OWmenu ul.OWmenu li div{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs0n6nzEHo4-IYfkcSpp9GjWuZKhUTc7KA0VcnwZ0_qFk3fyqZMSkTXy6foKZVkhVHGSXlu6GAn5es-n13kDij1yaFIH-xrZeLYTnyL2noUovDG4ebAeQ5nw9dUtTnwyiwupMT1SZ5_-42/s1600/submenu-top.gif");z-index:10}#OWmenu ul.OWmenu li div ul{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QqsjK3C6CmCer_BA2Jne-doFpNDhwysqdLDVfGo2fii64BkrqVaaRyBzB8tEn-Npq3c-oR9zfYpHnUe5P-xOfYsyPzsOq6YvVqnO3yjlrcqwKmS0YOWZiqt-XRu4cuWJTgfABF4VZC9-/s1600/submenu-bottom.gif")}#OWmenu ul.OWmenu li a:hover{ _background-position:left -90px}#OWmenu ul.OWmenu li a:hover span{ _background-position:right -135px}#OWmenu div{_display:none}#OWmenu div li:hover div{_display:block}#OWmenu div li:hover li:hover div{_display:block}#OWmenu div li:hover li:hover li:hover div{_display:block}/* */
</style>

<div id="OWmenu">
    <ul class="OWmenu">
        <li><a href="#" class="parent"><span>LINK 1</span></a>
        </li>
        <li><a href="#" class="parent"><span>LINK 2</span></a>
            <div><ul>
            <li><a href="#" class="parent"><span>ITEM 1</span></a>
                    <div><ul>
                      <li><a href="#"><span>ITEM 1.1</span></a>
                       <div><ul>
                        <li><a href="#"><span>ITEM 1.1.1</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.2</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.3</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.4</span></a></li>
                       </ul></div>
                       </li>
<li><a href="#"><span>ITEM 1.2</span></a></li>                                        <li><a href="#"><span>ITEM 1.3</span></a></li>
                        <li><a href="#"><span>ITEM 1.4</span></a></li>
                        <li><a href="#"><span>ITEM 1.5</span></a></li>
                        <li><a href="#"><span>ITEM 1.6</span></a></li>
                                        <li><a href="#"><span>ITEM 1.7</span></a></li>
                        <li><a href="#"><span>ITEM 1.8</span></a></li>
                        <li><a href="#"><span>ITEM 1.9</span></a></li>
                   </ul></div>
                </li>
                <li><a href="#" class="parent"><span>ITEM 2</span></a>
                </li>
<li><a href="#" class="parent"><span>ITEM 3</span></a>
                </li>
<li><a href="#" class="parent"><span>ITEM 4</span></a>
                </li>
             </ul></div>
        </li>
    <li><a href="#" class="parent"><span>LINK 3</span></a></li>
<li><a href="#" class="parent"><span>LINK 4</span></a></li>
    <li><a href="#"><span>LINK 5</span>
        <li class="last"><a href="#"><span>LINK 6</span></a></li>

<li class="last"><a href="#"><span>LINK 7</span></a></li></a></li>

<li class="last"><a href="http://www.otowebsite.blogspot.com/"><span>Oto Website</span></a></li>
</ul>
</div>

Banshee Screamer Alarm (Software Alarm)

noreply@blogger.com (Rifin) — Mon, 28 Jan 2013 01:49:00 +0700

Banshee Screamer Alarm adalah sebuah jam alarm yang dirancang dengan satu tujuan yaitu hanya Untuk membangunkan Anda. Apakah jam Alarm Anda rusak di rumah? Atau Anda tidak pernah memiliki Jam Alarm? Anda tidak dapat diganggu atau untuk pergi keluar dan membeli sebuah jam alarm? Apakah Anda tidur di meja Anda?

Karena Banshee Screamer Alarm dirancang untuk Anda. Lihatlah ini screen shot berikut untuk gagasan tentang fitur-fiturnya.

ScreenShot

(Gambar oleh Hanov Solutions)

Banshee Screamer Alarm adalah tool gratis untuk PC Anda. Jika Saya boleh menganjurkan gunakanlah tool ini pada PC Anda untuk membangunkan Anda. Ini adalah Software Alarm terbaik!

Fitur Banshee Screamer Alarm

Layar besar
Jendela program dapat ditampilkan dalam mode normal, mode besar, atau kecil. Impor lebih dari 500 tema Beatnik dan QuickClock untuk mengubah penampilan.

Interface yang mudah
Mengoperasikannya dengan cara yang sama sebagai Jam standar. Klik lampu Wake untuk mengaktifkan alarm. Dalam mode alarm set, klik mouse di atas angka untuk menggulir ke atas dan ke bawah. (Atau cukup ketik waktu) Klik kanan pada jumlah sedikit untuk menambahkan atau menghapus alarm. Uji alarm Anda dengan menekan 't'.

Tombol Tunda
Modus snooze secara otomatis diaktifkan bila Anda menghentikan alarm dengan menekan tombol mouse atau bashing tangan Anda di atas keyboard. Bila lampu berkedip snooze, alarm akan berbunyi lagi dalam beberapa menit. Anda dapat menghentikan tidur dengan mengklik lampu berkedip.

Perangkat Timing Lengkap
Lebih dari sekedar jam alarm, Screamer Banshee Alarm sekarang termasuk timer dan counter. Hal ini memungkinkan hingga 99 alarm terpisah, yang dapat dikonfigurasi untuk setiap hari dalam seminggu. Banshee Screamer Alarm adalah jam Anda akurat dengan menetapkan waktu dari Internet.

Failsafe
Screamer Banshee Alarm dirancang untuk membangunkan Anda, tidak peduli apa, dimana dan sedang apa. Jika tindakan alarm yang Anda pilih tidak dapat dilakukan untuk beberapa alasan, (seperti tidak ada CD drive) Anda juga dapat menset sendiri suara alarm seperti menggunakan suara dari file mp3. Suara beberapa masih akan dibuat. Jika semuanya gagal, maka suara akan menjadi default bip.

Bahasa
Mendukung bahasa Inggris, Perancis, Bulgaria, Jerman, Yunani, Hungaria, Italia, Portugis, Spanyol, dan Turki.

Hotkeys
Berikut ini adalah tombol-tombol yang bisa Anda gunakan untuk memerintah aplikasi/softwaew/tool ini.

'I' - waktu Set dari Internet.
't' - Uji alarm.
'SPACE' -. modus set Beralih
'n' - modus berikutnya (jam-alarm-timer-counter)
'h' -. (dalam mode set) jam perubahan
'm' - (dalam mode set) menit perubahan.
'w' - Beralih bangun.
'o' - Tampilkan pilihan dialog.
'd' - Membuat jendela kecil.
'D' - Membuat jendela yang lebih besar.
'/' - window Move.
' > ' - tema selanjutnya.
'F8' - jendela debug SkinScript.
'ESC' - Minimalkan.
'v' - Tampilkan versions.
'q' - Keluar.

Unduh Banshee Screamer Alarm

Dikutip Oleh Hanov Solutions dan di Edit oleh @dek_rif

IDM 6.14 Build 5 Full Patch

noreply@blogger.com (Rifin) — Sun, 27 Jan 2013 03:05:00 +0700

Internet Download Manager atau biasa di sebut dengan IDM telah mengeluarkan versi terbarunya yaitu IDM 6.14 Build 5 yang dirilis tanggal 9 januari 2013.
Bagi Anda yang suka mendownload video, mp3 atau file lainnya dari internet pasti akan sangat membutuhkan Internet Download Manager(IDM) yang telah terinstal di Laptop ataupun PC Anda. Karna dengan menggunakan Software Internet Download Manager(IDM) ini maka kecepatan Download kita akan berkali-kali lebih cepat, dan dapat menghemat waktu kita. Anda mendownload File berukuran kecil ataupun besar dengan Internet Download Manager(IDM) maka akan menjadi sangat cepat pada waktu mendownloadnya (buktikan sendiri).

Download kita pun tidak akan terputus-putus, contohnya saja jika pada waktu kita mendownload file berukuran besar menggunakan browser, maka sering sekali terputus di tengah jalan dan tidak dapat melanjutkannya lagi, Alhasil berarti file tersebut tidak bisa kita buka di Laptop/PC kita. Tetapi dengan menggunakan IDM 6.14 Build 5 Full Patch ini maka hal tersebut takkan terulang lagi. walapun Laptop/PC kita mati maka pada waktu hidup kita masih bisa melanjutkan file yang tadi kita download, hal itu bisa Anda lakukan dengan IDM 6.14 Build 5 Full Patch.

ScreenShot

ScreenShot IDM 6.14 Build 5 Full Patch (gambar oleh dek_rif)

ScreenShot IDM (oleh IDM)

System requirements

Operating systems Windows 7, Windows 2003, Windows Me, Windows 98, Windows 2000, Windows 8, Windows Vista, Windows XP, Windows NT, Windows Server 2008
Additional requirements Not available

Download IDM 6.14 Build 5 Full Patch

Disini saya telah menyediakan IDM 6.14 Build 5 Full Patch jadi IDM Anda akan menjadi full, Untuk mengunduh IDM 6.14 Build 5 Full Patch silahkan Anda tekan tombol di bawah ini. Untuk cara Patch IDM 6.14 Build 5 telah saya sediakan caranya di file Path IDM, silahkan baca path yang ada di file tersebut untuk menjadikan IDM 6.14 Build 5 menjadi Full.

Unduh IDM + Patch

Blogger Image Protection - Part 1

noreply@blogger.com (Rifin) — Thu, 24 Jan 2013 04:15:00 +0700

Apakah Anda pernah membuat atau mengedit suatu gambar yang Anda senangi dan meng Upload-nya pada blog atau situs Anda?!? Di artikel ini kita akan membahas dan berbicara tentang Blogger Image Protection - Part 1. Silahkan lanjutkan membaca Anda sampai selesai untuk mengetahui isi dan maksud dari artikel kali ini!!!
Cara menampilkan gambar pada blog/situs sangatlah mudah, seperti kita upload gambar dari pc kesayangan kita dan kita pasang di halaman postingan atau widget blog/situs, namun gambar-gambar yang tadi kita upload atau pasang pada blog/situs kita sangatlah mudah untuk di curi atau di salin dengan mudah. Bahkan pengguna awam pun dapat dengan mudah melakukannya, dengan cara klick kanan pada gambar untuk menyimpannya ke komputer yang akhirnya diteruskan kepada orang lain dan akhirnya muncul di beberapa situs, blog atau bisa juga di majalah!
Alasan paling umum / cara mencuri gambar adalah :

Dari Google Image Search.
Dengan Klik Kanan -> "Save Image As ..."
Dengan Menyalin alamat gambar dari "Page Source"

Metode Untuk Melindungi Gambar Anda :

Menonaktifkan gambar pada Google Image Search merupakan salah satu media yang bisa kita lakukan untuk melindungi gambar kita, Jika Anda ingin menggunakan media ini maka semua gambar pada blog/situs Anda tidak akan muncul pada Google Image Search.
Menonaktifkan klick kanan adalah salah satu metode yang sudah terkenal, Anda para pembaca O.W mungkin sudah menggunakan metode ini untuk blog/situs Anda. mungkin metode ini dapat melindungi gambar Anda, apa lagi Anda menggunakan script Anti klick kanan ini di seluruh halaman blog/situs Anda (teks ataupun gambar Anda protec) dengan script tersebut. Sebagai pop-up ini tidak terlihat bagus.
Metode terkenal lainnya untuk melindungi gambar Anda dari para pencuri adalah dengan menggunakan CSS bukan HTML murni. Meskipun bahkan dalam kasus ini gambar dapat dengan mudah dicuri (dengan mengambil screenshot dan mengeditnya), tetapi karena proses panjang sebagian besar pencuri konten pasti akan menjatuhkan rencananya untuk mengambil gambar dari blog/situs Anda. Teknik ini juga akan melindungi gambar Anda dari pencuri tetapi tidak dapat diindeks dan di tampilkan dalam hasil pencarian gambar Google.

Cara Melindungi Gambar Anda!

Barikut ini akan saya berikan beberapa cara untuk melindungi gambar Anda, karna penjelasan dan artikel ini sudah terlalu panjang (menurut saya), maka metode selanjutnya akan kita bahas pada Blogger Image Protection - Part 2 yang akan datang tentang bagaimana agar gambar kita tidak bisa di curi.

1. Protect Semua Gambar di Blog Anda dengab jQuery trick

jQury merupakan salah satu media yang bisa kita gunakan untuk melindungi gambar kita, berikut saya berikan kode-kode jQuery untuk melindungi gambar Anda dan di mana Anda harus meletakkannya.

1. Letakkan jQuery berikut di atas tag <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

2. Selanjutnya Pilih salah satu script berikut dan letakkan di bawah tag </head>

Lindungi hanya gambar pertama di setiap Post

Melindungi semua gambar dalam setiap postingan

2. Protect Gambar Anda dengan Menyisipkan kode

Saya sendiri tidak tau judul apa yang tepat dan harus saya pakai untuk metode yang kedua ini. Cara ini mungkin sudah banyak bertebaran di blogger-blogger tetangga, jadi tidak ada salahnya saya mencoba memperkenalkan pada Anda yang belum tau trick ini. Dengan menggunakan metode ini kita bisa melindungi gambar kita dari para pencuri atau bisa di bilang juga ini media khusus disable klik kanan pada gambar. Akan tetapi kita harus menerapkan metode ini secara manual.

Untuk demo Protect Gambar Anda dengan Menyisipkan kode bisa Anda lihat dan coba pada gambar berikut. Coba arahkan cursor Anda pada gambar, dan coba klick kanan atau menyimpan atau menyalin URL gambar berikut seperti biasa.

Demo

Untuk membuat gambar protectc sepertti di atas Anda cukup menyisipkan kode berikut di belakang URL gambar Anda:

Kode yang di gunakan!

oncontextmenu="return false;"

Penempatan Kode pada URL/Script Gambar

<img src="http://URL GAMBAR" oncontextmenu="return false;" />

Atau

<img border="0" height="200" src="http://URL GAMBAR"oncontextmenu="return false;" width="300" /></a>

Atau

<a href="http://URL TARGET.com" target="_blank"><img alt="Oto Website" src="URL GAMBAR"oncontextmenu="return false;" /></a>

Sayangnya metode di atas dan kebanyakan metode untuk melindungi gambar atau content lain pada blog/situs masih bisa di curi atau tidak benar-benar aman total. Untuk caranya mematahkan metode di atas atau metode yang di pasang blog-blog lain yang mematikan klick kanan adalah dengan mematikan script Anti Klick Kanan itu sendiri. Melalui browser kesayangan kita semua browser bisa Menonaktifkan Anti Klick Kanan (Firefox, Chrome, Opera, dan lain sebagainya).
Berikut ini cara Mengaktifkan kembali Klick Kanan pada pada blog/situs yang sudah di protect gambarnya ataupun semua contentnya, seperti yang saya bilang di atas kita bisa Menonaktifkan script anti klick kanan melalui browser, silahkan Anda ikuti ilustrasi berikut (disini saya menggunakan Forefox).

Cara Menonaktifkan Anti klick kanan.

1. Klick Tool -> Options -> Options.

2. Hilangkan tanda centang pada enable JavaScript -> Ok.

Setelah Anda melakukan langkah-langkah di atas, sekarang coba klick kanan pada gambar yang telah di protect di atas atau pada blog/situs lainnya yang menggunakan media Anti Klick Kanan!

3. Menyembunyikan Gambar dari Google Image Search

Sekarang kode ini memiliki semua manfaat melebihi metode di atas dan apalagi alamat gambar juga tidak terlihat dalam Page Source. Mencegah gambar Anda muncul dalam pencarian gambar Search Engine (atau Image Search hanya Google).

Gunakan dan letakkan meta tag berikut di tag < head> daerah template Anda:

<meta name="robots" content="noimageindex"></meta>

Dari Meja Editor!

Finish, Akhirnya kita menjumpai titik akhir dari artikel Blogger Image Protection - Part 1 mudah-mudahan artikel kali ini Anda sukai, dan bisa meningkatkan pengetahuan Anda. Nantikan lanjutan dari artikel ini, yaitu Blogger Image Protection - Part 2 yang dimana kita akan membahas cara agar gambar kita tidak bisa di curi. Dari meja editor saya mengucapkan Selamat Membaca Artikel Oto Website lainnya, dan Salam Blogger.