Oto Website

Cara Tambah Sintaks Highlighter V3 di Blogger

Stylizing blog atau website sangat menguntungkan dan memiliki signifikansi besar karena tidak hanya menarik pengunjung tetapi juga terlihat rapi dan bersih, sebagian besar blogger dan webmaster menghabiskan banyak dolar dalam stylizing dan demi menyesuaikan desain blog mereka yang memang merupakan langkah terbaik. 
Ketika blogger menyediakan kode di blog mereka, mereka biasanya menyediakan dengan cara biasa, menulis teks normal yang biasa kita lakukan, "adalah kode bukan teks" kita perlu untuk menyesuaikan dgn mode dan juga membuatnya lebih menonjol berbeda dari teks biasa. Untuk menyelesaikan masalah, kami telah memperkenalkan Highlighter Sintaks yang sangat populer di Wordpress tapi sekarang Anda memiliki kemewahan menggunakan alat indah ini di Blog BlogSpot. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6w-NCYpPpBtPjA1JVExlD7AYuvZF0xXY4r10vrS_OrkAkvv0juQQ-vDQlGA8aC86ZBPe_4OmKbRmBbSw4f2V0BPF1Wl2OJTUfchmHXhh6Ptc9X-wk0ryehZkCMJdaq31i5aRqxMoAg/s1600/MyBloggerLab-SyntaxHighlighter-Tool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6w-NCYpPpBtPjA1JVExlD7AYuvZF0xXY4r10vrS_OrkAkvv0juQQ-vDQlGA8aC86ZBPe_4OmKbRmBbSw4f2V0BPF1Wl2OJTUfchmHXhh6Ptc9X-wk0ryehZkCMJdaq31i5aRqxMoAg/s640/MyBloggerLab-SyntaxHighlighter-Tool.png" width="640" /></a></div> 
<div class="YOUR HEADLINE CLASS i.e ow">Apa stabilo Sintaks</div>Sintaks stabilo adalah alat yang brilian untuk menunjukkan CSS, Html, JavaScript, SQL, dan banyak lainnya kode bahasa dalam tubuh posting Anda. Ini mengatur coding Anda di baris yang membuatnya terlihat lebih menonjol. Anda bahkan akan mendapatkan pilihan untuk memilih dari berbagai tema, yang akan menambah warna lebih untuk blog Anda dan membuatnya terlihat berharga. 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Tambah Highlighter Sintaks Untuk Blog BlogSpot?</div>Menambahkan stabilo sintaks untuk seorang blogger merupakan prosedur menyenangkan dan tidak rumit. Kami telah menciptakan sebuah alat Highlighter Sintaks yang luar biasa untuk kenyamanan Anda sehingga jika Anda ikuti langkah-langkah berikut bijaksana saya yakin Anda akan dapat melakukannya dengan benar, sekarang mari kita lihat alat yang akan kita gunakan dalam tutorial ini. 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="http://dl.dropbox.com/u/63702052/Syntax%20Highlighter.html" style="height: 890px; width: 100%;"></iframe> 
 
<ul><li>Langkah # 1: Pertama pilih tema dari Alat stabilo Sintaks, untuk memilih tema favorit Anda lebih mudah sesuai dengan kepribadian Anda dapat memeriksa demo <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/" target="_blank">Disini</a>.</li>
<li>Langkah # 2: Sekarang kita perlu memilih brushes sesuai dengan kebutuhan kita, jika Anda seorang blogger maka anda bisa memilih CSS dan HTML, tapi alat ini tidak terbatas pada blogger bahkan webmaster dan programmer dapat menggunakan alat ini. Jadi silahkan Anda pilih CSS, HTML, atau apa pun yang Anda sukai dan kemudian menekan tombol "Get Code".</li>
<li>Langkah # 3: Sekarang copy semua kode yang dihasilkan di area teks dan kemudian pindah ke langkah berikutnya.</li>
<li>Langkah # 4: Sekarang pergi ke Blogger >> Template  >> Edit HTML.</li>
<li>Langkah # 5: Kemudian dalam Kode template temukan kode </head>  (Bila kesulitan mencari kode HTML coba klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>)</li>
<li>Langkah # 6: Sekarang ketika Anda sudah menemukan kode </head> , tepat di atasnya paste kode yang Anda disalin dari sebelumnya (Alat Highlighter Sintaks).</li>
<li>Selamat stabilo Sintaks sekarang sepenuhnya terintegrasi dalam Blog Anda BlogSpot blogger! Dan sekarang Anda dapat menggunakan stabilo Sintaks dengan perintah.</li>
</ul> 
<div class="YOUR HEADLINE CLASS i.e ow">Sisipkan HTML / CSS / JavaScript Kode di Posting Anda Menggunakan SyntaxHighlighter:</div>Sekarang jika Anda ingin menyisipkan CSS coding dalam template Anda, kemudian Pergi ke Blogger.com >> Post  >> Add New Posting >> Pilih Edit Tab HTML dan paste kode berikut. 
 
Untuk CSS (Style Sheet) 
 
<pre class="brush:css;"><pre class="brush:css;">ADD-THE-CSS-CODE-HERE

</pre>
</pre> 
Untuk Coding HTML: 
 
<pre class="brush:html;"><pre class="brush:html;">ADD-THE-HTML-CODE-HERE

</pre>
</pre> 
Untuk JavaScript Coding: 
 
<pre class="brush:javascript;"><pre class="brush:javascript;">ADD-THE-JavaScript-CODE HERE

</pre>
</pre> 
Kustomisasi: 
 
Ganti ADD-THE-HTML-CODE-HERE dengan style sheet CSS coding. 
Jangan lupa untuk mengganti ADD-THE-HTML-CODE-HERE dengan HTML Anda. 
Ganti ADD-THE-JavaScript-CODE HERE dengan kode JavaScript Anda. 
 
Jika Anda belum terintegrasi dengan stabilo Sintaks benar menggunakan alat kami, maka kemungkinan sangat tinggi bahwa Anda mungkin melihat keluar pop yang akan menunjukkan sesuatu yang tidak beres. Misalnya, Anda menggunakan <pre class='brush:css;'> </ pre> dalam posting blog Anda, tetapi Anda belum memasukkan script CSS stabilo Sintaks di header Anda maka Anda akan melihat error berikut. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu22FNEVV2tehuK88jOO2gzp8ALVM3dqCHDZWr3wa7ta6gRVGKHTAKTXqjW6GD-v0A9XZpQKZBVNCxdaTAuan4m-IhPZg8uTH-pvelfsBy4FqvRWsA9TsGtTbp_jmEyBxJznIiUqJ3WQ/s1600/Error.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu22FNEVV2tehuK88jOO2gzp8ALVM3dqCHDZWr3wa7ta6gRVGKHTAKTXqjW6GD-v0A9XZpQKZBVNCxdaTAuan4m-IhPZg8uTH-pvelfsBy4FqvRWsA9TsGtTbp_jmEyBxJznIiUqJ3WQ/s1600/Error.png" /></a></div> 
Dari Meja Editor: 
 
Jadi kami berharap Anda menikmati memperlakukan dan pastikan Anda menggunakannya dengan perintah, dan senang belajar. Senang bisa berbagi alat-alat menarik yang mungkin dapat membantu kerja Anda.

Cara Tambah Sintaks Highlighter V3 di Blogger

Stylizing blog atau website sangat menguntungkan dan memiliki signifikansi besar karena tidak hanya menarik pengunjung tetapi juga terlihat rapi dan bersih, sebagian besar blogger dan webmaster mengha…

Baca selengkapnya »

30 Aug 2012

Membuat Query Loader Page Di Blogger

Apa itu Query Loader Page? Query Loader Page di gunakan untuk menampilkan halaman blog Anda saat sedang di muat atau loading. Jadi para pengunjung blog/situs Anda tidak akan melihat bagaimana widget Anda atau bagaimana artikel Anda sebelum pemuatan/loading blog Anda selesai. 
 
Pengunjung akan melihat halaman loading dengan bar dan persentase loading blog secara keseluruhan. Untuk lebih jelasnya tentang artikel Membuat Query Loader Page Di Blogger ada baiknya anda lihat demonya terlebih dahulu dengan menekan tombol di bawah ini. 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Priview Image Query Loader Page</div> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCV-GHacbVMwvjuXMmPJie_ZQz9fTHFT5I0qmAvkfA_p2h_4WAkW9GPGS9Rs-mF1pqgMoHnXE609V3gOpHtY6TbCfWZ1rkv5PbtSDw62bAfACtuyQqG2H_iR-nBriw4k6tTImYhBNnQ/s1600/untitled.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCV-GHacbVMwvjuXMmPJie_ZQz9fTHFT5I0qmAvkfA_p2h_4WAkW9GPGS9Rs-mF1pqgMoHnXE609V3gOpHtY6TbCfWZ1rkv5PbtSDw62bAfACtuyQqG2H_iR-nBriw4k6tTImYhBNnQ/s640/untitled.jpg" width="640" /></a></div> 
<div class="YOUR HEADLINE CLASS i.e ow">Demo Halaman Query Loader Page</div> 
<div style="text-align: center;"><a class="button" href="http://www.infooke.co.cc/" target="_blank">LIHAT DEMO</a></div> 
<div class="YOUR HEADLINE CLASS i.e ow">Membuat Query Loader Page Di Blogger</div> 
Berikut ini saya berikan kode-kode yang di gunakan untuk Membuat Query Loader Page Di Blogger. Anda juga dapat memodifikasi kode CSS di berikut sesuai selera Anda! 
 
<hr color="3e81c4" />jQuery 
<hr color="3e81c4" /> 
<pre class="brush:javascript;"><script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/jqueryLoader_OW.js' type='text/javascript'/></pre> 
<hr color="3e81c4" />CSS 
<hr color="3e81c4" /> 
<pre class="brush:css;">. jQOverlay_OW {
 background-color: # 000000 ;
 z-index: 9999;
}

. jQLoader_OW {
 background-color: # CCCCCC ;
 height: 1px;
}

. jQAmt_OW {
 color: # FF530D ;
 font-size: 50px;
 font-weight: bold,
 line-height: 50px;
 height: 50px;
 width: 100px;
 margin:-60px 0 0-50px;
}</pre> 
<hr color="3e81c4" />HTML 
<hr color="3e81c4" /> 
<pre class="brush:html;"><script>
 jQueryLoader_OW.selectorPreload = "body";
 jQueryLoader_OW.init ();
</ script></pre>

Membuat Query Loader Page Di Blogger

Apa itu Query Loader Page? Query Loader Page di gunakan untuk menampilkan halaman blog Anda saat sedang di muat atau loading. Jadi para pengunjung blog/situs Anda tidak akan melihat bagaimana widget A…

Baca selengkapnya »

29 Aug 2012

Tambahkan Custom Facebook Like Box Untuk Blogger

Tutorial kali ini saya akan menunjukkan kepada Anda tentang Cara Tambah Kustom Facebook Like Box Untuk Blogger. <a href="http://otowebsite.blogspot.com/2012/08/tambahkan-custom-facebook-like-box.html">Tambahkan Custom Facebook Like Box Untuk Blogger</a> adalah cara terbaik untuk mendapatkan lebih banyak penggemar facebook. Sebuah Fan Box atau Kotak Facebook memungkinkan pengunjung Blog anda menyukai halaman Anda Fans Facebook, tanpa meninggalkan blog Anda. Widget ini  dibuat oleh line25.com. 
 
Disini saya telah menyingkat pekerjaan Anda agar Anda dapat lebih dengan mudah Menambahkan Custom Facebook Like Box Untuk Blogger Anda. Sebelumnya silahkan Anda lihat Priview dan Demonya di bawah ini, jangan lupa untuk meng-LIKE <a href="http://www.facebook.com/dekrif" target="_blank">Fans Oto Website</a> agar Anda dapat memantau <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> melalui akun Facebook Anda. 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Priview Custom Facebook Like Box</div> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxKx-PFTZjD7C8MoRmcjXe0ZSTe5cQHNGqEA-iCjozm9eQBWhjytoXCn3-tDYoGNpJIE5SjAIy0fKB04yPBViqqUHNMm_AF41ovkELPdPwwAMBFyPhOE61_d7zThZp-XD9E7UNxvCdbw/s1600/fb.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxKx-PFTZjD7C8MoRmcjXe0ZSTe5cQHNGqEA-iCjozm9eQBWhjytoXCn3-tDYoGNpJIE5SjAIy0fKB04yPBViqqUHNMm_AF41ovkELPdPwwAMBFyPhOE61_d7zThZp-XD9E7UNxvCdbw/s1600/fb.jpg" /></a></div> 
<div class="YOUR HEADLINE CLASS i.e ow">Demo Custom Facebook Like Box Seperti Pada Kotak Berikut</div> 
<div style="background-color: white; border: 2px #000000 dashed; padding: 10px; text-align: left;"><div style="text-align: center;"><iframe frameborder="0" height="500" src="http://www.connect.facebook.com/widgets/fan.php?channel_url=http://latesthack.com/?fbc_channel=2&id=314174371016&name=&connections=28&stream=0&logobar=0&css=https://otowebsite-blogspot.googlecode.com/svn/trunk/Fb-hack.css" width="510"></iframe></div></div> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Tambah Custom Facebook Like Box Untuk Blogger</div> 
1. Pertama Anda harus mengetahui ID Facebook Fans Page Anda. 
 
2. Untuk Cara mengetahuinya silahkan Anda gunakan Facebook ID Finder dengan menekan tombol berikut. 
 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/OW-Facebook%20ID%20Finder.html" target="_blank">Facebook ID Finder</a></div> 
 
3. Pada Facebook ID Finder masukkan URL Facebook Fans Page Anda. 
 
4. Lalu Tekan tombol Get Id. 
 
5. Sekarang pergi ke Dasbor Blogger. 
 
6. Pilih Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script. 
 
7. Lalu copy kode berikut dan letakkan di dalamnya. 
<div class="md4"> 
<iframe frameborder="0" height="250" width="300" src="http://www.connect.facebook.com/widgets/fan.php?channel_url=http://otowebsite.blogspot.com/?fbc_channel=2&amp;id=ID_FACEBOOK&amp;name=&amp;connections=8&amp;stream=0&amp;logobar=0&amp;css=https://otowebsite-blogspot.googlecode.com/svn/trunk/Fb-hack.css"></iframe></div> 
Penyesuaian dan Keterangan: 
<ul><li>Ganti ID_FACEBOOK dengan ID Facebook Fans Page Yang Anda dapatkan dari Facebook ID Finder.</li>
<li>Angka 250 menunjukkan tinggi widget ini.</li>
<li>Angka 300 menunjukkan lebar dari widget.</li>
<li>Angka 8 menunjukkan berapa jumlah penggemar yang akan kita tunjukkan.</li>
</ul>8. Akhirnya menyimpan dan melihat hasilnya! 
 
<div class="YOUR HEADLINE CLASS i.e ow">Bagaimana Kesan Anda ?!!</div> 
Jika Anda kurang suka dengan <a href="http://otowebsite.blogspot.com/2012/08/tambahkan-custom-facebook-like-box.html">Tambahkan Custom Facebook Like Box Untuk Blogger</a>, Anda bisa melihat tutorial Facebook lainnya yang berada di artikel berikut: 
<ul><li><a href="http://otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html" target="_blank">Cara Membuat Facebook Like Auto Hide Di Blog</a>.</li>
<li><a href="http://otowebsite.blogspot.com/2012/06/facebook-pop-up-box-untuk-blogger.html" target="_blank">Facebook Pop-Up Box Untuk Blogger</a>.</li>
<li><a href="http://otowebsite.blogspot.com/2012/06/facebook-pop-up-box-v2.html" target="_blank">Facebook Pop-Up Box V2</a>.</li>
<li><a href="http://otowebsite.blogspot.com/2012/06/cara-membuat-facebook-like-auto-hide-di.html" target="_blank">Cara Membuat Facebook Like Auto Hide Di Blog - V2</a>.</li>
<li><a href="http://otowebsite.blogspot.com/2012/07/new-version-facebook-like-auto-hide-generator.html" target="_blank">New Version Facebook Like Auto Hide Blogger Widget Generator</a>.</li>
</ul>Semoga dapat bermanfaat dan dapat membantu Anda, Salam Blogger!

Tambahkan Custom Facebook Like Box Untuk Blogger

Tutorial kali ini saya akan menunjukkan kepada Anda tentang Cara Tambah Kustom Facebook Like Box Untuk Blogger. Tambahkan Custom Facebook Like Box Untuk Blogger adalah cara terbaik untuk mendapatkan l…

Baca selengkapnya »

19 Aug 2012

CSS3 Image Gallery Blogspot

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxYuEl9hR9b5YAMpGJhTVJfeEkVVMROLN3DnyQLnGc1I8wPZP0pNfQaLF7DctbQ7N4ltI5tYe4d1Kx7R1XG5F12DgQGurUQfZP1XYo8d_owa2APi8pDMcnmefr4-ZzjQvCqQStbnhrQ/s640/CSS3+Image+Gallery+Blogspot.jpg" width="640" /></a></div>Kali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar. 
Ini adalah salah satu trick terbaik yang bisa Anda terapkan dan gunakan pada blog/situs Anda, dan untuk tutorial kali ini saya beri tema <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html" target="_blank">CSS3 Image Gallery Blogspot</a>. Trick ini bekerja dengan CSS3 dan tidak akan begitu berpengaruh pada kecepatan pemuatan blog/situs Anda. 
Dengan Anda menggunakan <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html">CSS3 Image Gallery Blogspot</a> maka Anda dapat dengan mudah memamerkan koleksi foto-foto Anda pada pengunjung blog/situs Anda. 
Untuk lebih jelasnya tentang <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html" target="_blank">CSS3 Image Gallery Blogspot</a> silahkan Anda lihat demonya terlebih dahulu. 
 
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/CSS3GalleryBlogspot.html" target="_blank">Lihat Demo</a></div> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat CSS3 Image Gallery Blogspot</div> 
Disini saya akan memberikan Anda kode-kode yang di perlukan untuk membuat CSS3 Image Gallery Blogspot. Gunakan kode yang saya berikan berikut untuk membuatnya! 
 
<hr color="3e81c4" />CSS 
<hr color="3e81c4" /> 
<pre class="brush:css;">#gallery {
border: 10px solid #1D0C16;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background: #272229;
/* Kotak efek bayangan di Safari dan Chrome*/
-webkit-box-shadow: #272229 10px 10px 20px;
/* Kotak efek bayangan di Firefox*/
-moz-box-shadow: #272229 10px 10px 20px;
/*Kotak efek bayangan di IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);
/* Kotak efek bayangan di Browser yang mendukung, Opera 10,5 pra-alpha release*/
box-shadow: #272229 10px 10px 20px;
}

#gallery ul{
/* Posisi isi ul di tengah galeri */
margin-left:-30px;
}

#gallery ul li {
/* Untuk menciptakan efek yang tepat dengan melayang-layang kita harus menggunakan display inline-tabel
Ini akan menampilkan gambar besar di sebelah kanan thumbnail
*/
list-style:none; display:inline-table; padding:10px;
}

/*  Ini adalah pic untuk menampilkan saat efek yang melayang-layang terjadi selama li yang berisi thumbnail */
#gallery ul li .pic{
/* Animasi dengan transisi di Safari dan Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animasi dengan transisi di Firefox (No supported Yet) */
-moz-transition: all 0.6s ease-in-out;
/* Animasi dengan transisi di Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The opacity menjadi 0 untuk menciptakan efek fadeOut*/
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid black;
/* Kotak efek bayangan di Safari dan Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/*Kotak efek bayangan di Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* Kotak efek bayangan di IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}

#gallery ul li .mini:hover{
cursor:pointer;
}

/* Ini menciptakan efek yang diinginkan menampilkan gambar ketika kita mengarahkan mouse ke thumbnail*/
#gallery ul li:hover .pic {
/ * Lebar dan tinggi adalah seberapa besar gambar akan pertumbuhan dengan efek * /
width:200px;
height:200px;
opacity:1;
visibility:visible;
float:right;
}</pre> 
<hr color="3e81c4" />HTML 
<hr color="3e81c4" /> 
<pre class="brush:html;"><div id="gallery">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM52cPJP7GUAW5EBPod3o2WTFoBhc2uKN8SWJEtVoeTd-X2MQ3N7hwnYrCfO1BVh_Z7kjX2p0dee_5DDUdJWtWuLpag_AJtFtkp9m7E-S42_Bbo-InEasiEspLUq9X0bLo9Ft1IzfC9Q/s1600/transformers.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM52cPJP7GUAW5EBPod3o2WTFoBhc2uKN8SWJEtVoeTd-X2MQ3N7hwnYrCfO1BVh_Z7kjX2p0dee_5DDUdJWtWuLpag_AJtFtkp9m7E-S42_Bbo-InEasiEspLUq9X0bLo9Ft1IzfC9Q/s1600/transformers.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIECZYEYcU_ryxoiBn6OXEiqjPhGb-1YkUIfp6idvcadGwC7ZGviMSeOSJlqSaJRc6TM2R6hMYtuCRP5mf6nkqxT4xOBIp-DoBOoEKtV_ANHQFkdUG6WIAhhlWmbvhuIezZ6A5SSgw/s1600/Transformers+3.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIECZYEYcU_ryxoiBn6OXEiqjPhGb-1YkUIfp6idvcadGwC7ZGviMSeOSJlqSaJRc6TM2R6hMYtuCRP5mf6nkqxT4xOBIp-DoBOoEKtV_ANHQFkdUG6WIAhhlWmbvhuIezZ6A5SSgw/s1600/Transformers+3.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcDbEEHWemjSxmUNQwPzAgtNAoo_ijpK6v8J9Tu3dXb0AI_PRSp47R7Qietrz3155FxfDjDzrF4974IMGHUb582qsW3SeW8LVsS8TodBOTYGB6pDxQEhZf2Tdf_KuCEdWV0PLlMAlbQ/s1600/Transformers-Bumblebee-by-DevinePliskin.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcDbEEHWemjSxmUNQwPzAgtNAoo_ijpK6v8J9Tu3dXb0AI_PRSp47R7Qietrz3155FxfDjDzrF4974IMGHUb582qsW3SeW8LVsS8TodBOTYGB6pDxQEhZf2Tdf_KuCEdWV0PLlMAlbQ/s1600/Transformers-Bumblebee-by-DevinePliskin.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZbbyv361si_YiMcMINkrIHmKCM6aIMB3GmS5NsQErWfFIV0uymnTpVkudKF9KUeaokcPuZ2B9OQtsAcWzYHj_yBWIOPZNDaykX_saOA79qej4XLTj99qd75z6QxfJQNKi_BpErn9KQ/s1600/megan-fox-transformers-2.jpg" class="mini"  width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZbbyv361si_YiMcMINkrIHmKCM6aIMB3GmS5NsQErWfFIV0uymnTpVkudKF9KUeaokcPuZ2B9OQtsAcWzYHj_yBWIOPZNDaykX_saOA79qej4XLTj99qd75z6QxfJQNKi_BpErn9KQ/s1600/megan-fox-transformers-2.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgG-pWzssh50btmZkWGmP8R2YmTBB6NAdVJNmo5IyLQ9OuhSvTAYc95ru9lstRSK5qiVY7Vx0Zc4X4uahGJ2-MwMMJvued5Ia6tYWnWLDjl0kC-4xZWX_d7vU16cWtMbIB0M4EaQKtQ/s1600/transformers3(2).jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgG-pWzssh50btmZkWGmP8R2YmTBB6NAdVJNmo5IyLQ9OuhSvTAYc95ru9lstRSK5qiVY7Vx0Zc4X4uahGJ2-MwMMJvued5Ia6tYWnWLDjl0kC-4xZWX_d7vU16cWtMbIB0M4EaQKtQ/s1600/transformers3(2).jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuhjc6BsY1dRtB6DvRcyHeUqIDLaueXhZPA6wxhmpD-NmOY7cZeAh5RzeD-SLwgVHeEQuX_c9W042hnDF9a9VUCRjbAWem7leFInY-2xJsTZbyYtTG_kfHUVgB914zoo4S1Djg2XRGA/s1600/transformers_movie_image_gallery_016.jpg" class="mini" width="100" height="100"  /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuhjc6BsY1dRtB6DvRcyHeUqIDLaueXhZPA6wxhmpD-NmOY7cZeAh5RzeD-SLwgVHeEQuX_c9W042hnDF9a9VUCRjbAWem7leFInY-2xJsTZbyYtTG_kfHUVgB914zoo4S1Djg2XRGA/s1600/transformers_movie_image_gallery_016.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepLHQy35KIbVzVP2SIWSUZWjBXKa38fiswRgkT5fGOEa0nm_1zEwV6hmzENvPfpyti2LujKFUQxdlXTi9TCT-hNL_7DiDIeQ3Dhy5gygkvKTPIPMzbq3oyW_ofotLp_F3HCz-SFZl-g/s1600/transformers3.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepLHQy35KIbVzVP2SIWSUZWjBXKa38fiswRgkT5fGOEa0nm_1zEwV6hmzENvPfpyti2LujKFUQxdlXTi9TCT-hNL_7DiDIeQ3Dhy5gygkvKTPIPMzbq3oyW_ofotLp_F3HCz-SFZl-g/s1600/transformers3.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszWRIZVEqw6lsGsLKhEnI3EBPERclir09VLirmVDghB4hE7oeGqKqD5xAtEpcXQoHeB2aj68MvQu1H4lDOWqlimEfL14qZki3FXzPokYleLFlHwG8t-2rfKnaEHuFBt40VjuUPyQWeQ/s1600/Transformers_2_Optimus_Prime_3_by_CrossDominatriX5.png" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszWRIZVEqw6lsGsLKhEnI3EBPERclir09VLirmVDghB4hE7oeGqKqD5xAtEpcXQoHeB2aj68MvQu1H4lDOWqlimEfL14qZki3FXzPokYleLFlHwG8t-2rfKnaEHuFBt40VjuUPyQWeQ/s1600/Transformers_2_Optimus_Prime_3_by_CrossDominatriX5.png" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEfxyc754p6yhcI1TNALXcCnfy4_5BZae4_0ZWIJztv1zHNpv_j69JQmalKDFYv5YHdDPprpmppcJl0MO75X2I_fKVfFhQoyGpNCMkJV3nPW4Z3YBPQ2Brr515E0VFziAbZWKOOF86A/s1600/Transformers-313.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEfxyc754p6yhcI1TNALXcCnfy4_5BZae4_0ZWIJztv1zHNpv_j69JQmalKDFYv5YHdDPprpmppcJl0MO75X2I_fKVfFhQoyGpNCMkJV3nPW4Z3YBPQ2Brr515E0VFziAbZWKOOF86A/s1600/Transformers-313.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyU2uNAw5KSjvtxEto4k2LT5LUe4mLsyT_CjnzPkjbvH-ml8CDaWsNJ__ShZNeh7Mhl1F6zDBbOrSO26tGEvgTcU_97wWWm4N7qCFN8NjLnic3zftlE5uFdpGa0yNp57dqbA5VgZZ5Q/s1600/wp_transformers1322_1280.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyU2uNAw5KSjvtxEto4k2LT5LUe4mLsyT_CjnzPkjbvH-ml8CDaWsNJ__ShZNeh7Mhl1F6zDBbOrSO26tGEvgTcU_97wWWm4N7qCFN8NjLnic3zftlE5uFdpGa0yNp57dqbA5VgZZ5Q/s1600/wp_transformers1322_1280.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTRRCPzhqWX1CPwEwe7J2KSpGC4tEYvx2IhIMF9PdHnzw_OmYIjPJTdsCE3oW5upbsNDzVg_6NIXRlAT0ERd5iJLFSIw3arV5A9anv31aMtpMoAdX7NodtGuXFWSjvnRg1c8Ew6ge8A/s1600/20100802164107!Megatron.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTRRCPzhqWX1CPwEwe7J2KSpGC4tEYvx2IhIMF9PdHnzw_OmYIjPJTdsCE3oW5upbsNDzVg_6NIXRlAT0ERd5iJLFSIw3arV5A9anv31aMtpMoAdX7NodtGuXFWSjvnRg1c8Ew6ge8A/s1600/20100802164107!Megatron.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUtyBqDbGFSNPpfLr0zm2ei3CHLW7o_Jwd9Zggwr11MboSt8Osza-nWgnGw2wCwAcyoeJF1lG-xAqCJ2q9Ntmz5QzAdw_Y6_lOHue2K450ynOSRveKqUZbrs9pfH6JavyPiHptWTMw/s1600/megan-fox-transformers-3.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUtyBqDbGFSNPpfLr0zm2ei3CHLW7o_Jwd9Zggwr11MboSt8Osza-nWgnGw2wCwAcyoeJF1lG-xAqCJ2q9Ntmz5QzAdw_Y6_lOHue2K450ynOSRveKqUZbrs9pfH6JavyPiHptWTMw/s1600/megan-fox-transformers-3.jpg" class="pic"  />
</li>
</ul>
</div></pre> 
<div class="YOUR HEADLINE CLASS i.e ow">Melakukan Perubahan dan Modifikasi</div>Anda dapat memodifikasi <a href="http://otowebsite.blogspot.com/2012/08/css3-image-gallery-blogspot.html">CSS3 Image Gallery Blogspot</a> ini dengan mengedit kode CSS di atas yang telah saya beri tanda dan jika Anda ingin bereksperimen sendiri. 
Perhatikan Kode HTML di atas, ganti semua url gambar dengan url gambar Anda sendiri. 
Jika Anda kesulitan mencari kode HTML dalam Template silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>.

CSS3 Image Gallery Blogspot

Kali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar. Ini adalah salah satu trick terbaik yang bisa Anda terapkan dan gunakan pada blog/situs Anda, dan untuk tutoria…

Baca selengkapnya »

17 Aug 2012

Fixed Fade Out Menu

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGRbfQQJCFp9Aa7csdSe6zCryGHnQaXSq8ZdHCMm5QcVHFZxKkqLJLj7SDmXZQ4FOvZVd4bjDWBc3Q4lnVrdKcgf_ubihPmpxurIg3Jd3utP57-MYF3yc2Zo9Tt6n48iUIfUyeSnlKIw/s640/fixedFadeOutMenu.png" width="640" /></a></div>Untuk Tutorial Kali ini Saya Akan Membahas Cara Membuat <a href="http://otowebsite.blogspot.com/2012/08/fixed-fade-out-navigation-menu.html">Fixed Fade Out Menu</a> untuk Blogger. <a href="http://otowebsite.blogspot.com/2012/08/fixed-fade-out-navigation-menu.html">Fixed Fade Out Menu</a> Adalah Menu Navigasi Baru Yang Telah Ditambahkan Perpaduannya dengan CSS Dan JQuery Hingga Mempunyai Fungsi Dan Efek Scroll Fade Out Yang Patut Anda Coba. 
Menu ini di buat oleh Codrops. Seperti yang saya bilang di atas menu ini sudah memiliki tombol top dan bottom, Untuk lebih jelasnya tentang <a href="http://otowebsite.blogspot.com/2012/08/fixed-fade-out-navigation-menu.html">Fixed Fade Out Menu</a> silahkan Anda lihat demonya terlebih dahulu! 
 
<div style="text-align: center;"><a class="button" href="http://otowebsite.16mb.com/Fixed%20menu.html" target="_blank">Lihat Demo</a></div><style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Menginstal Fixed Fade Out Menu di Blogger</div> 
1. Pergi ke akun Blogger. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Centang <input checked="checked" id="expandWidgets" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; font-size: small; margin: 0px 2px 4px; padding: 0.2em 0.4em;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
 
4. Sekarang temukan kode ]]></b:skin> (bila kesulitan mencarinya coba klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>) 
 
5. Lalu tambahkan kode CSS berikut tepat di atas kode tadi. 
 
<pre class="brush:css;">#navix{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKQNq-VicPf44S7Q6fwq4dtLepJVGRv6ve713gr992OtM3VPNkayxPBWjzwhkAFzvzCwXbiXkiSFZnX1S7cZzwER_H_OknKRwIvzTS_XeyrRt6ZvgR9jiF572EWx-g2wgJuqP3R-UA7fo/s400/nav.png) repeat-x center left;
z-index:999999;
}
#navix ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#navix ul li{
display:inline;
float:left;
margin:0px 2px;
}
#navix a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkk5voghwX267fxbdNSdceN7OjIsiQ-KMmVQrjlUoa5CMR-yuKhBC6hgOdDC_FEYCryY5woyCcqCdZZ50S6izgxLhS3Xe7BI-8iVhbHdYlFetSFlee_D9it8fIxBuMFwrMZeYqBQ86XCP5/s400/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#navix a:hover{
background:#D9D9DA none;
color: #fff;
}
#navix a.top span, #nav a.bottom span{
float:left;
width:16px;
height:16px;
}
#navix a.top span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnfcEeVCshvfi2ufKvwfCwLXA0ZaUA55DxCRa51ZkZAfsbaKObIE2F-BqCrV3yGgjDKok9hA9Os8Sod4Pfkz0O-VmE4MIeTQP0LSAXD6EIgQ9w-FHSQ9uUqtxq3ki0OnnjqLQDo0dLqQQ/s400/top.png) no-repeat center center;
}
#navix a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMgFKEH1cxMFAhoCnYwcsDvZkkqWnfQdiGESatbgVMdQybaWV0qUIbDOboSRfGJ-Err8tJLlqvOtYvWk828nQXsamL2OQ6py3xP_y4qbn_7itrtX54f9EBbGWQ_NDmE9MeGoNfVhRf9Em/s400/bottom.png) no-repeat center center;
}

#navix ul li.search{
float:right;
}
#navix input[type="text"]{
float:left;
border:1px solid #ccc;
margin:0px 1px 0px 50px;
padding:2px 2px 2px 2px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCSCOEaz7YCyPDwyQUHQ8zwcI1Cr-73y8guu0A-5a4ZnUMAqm_fsDXncVvIwBZ5U3426sVEzrmwz-AQ1eP9rSNRNEMtMu1fCAIFLI_UpaaahrIyMvbRVl10AsX-ev_fvVinoeikG_Ow/s1600/otowebsite.search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}</pre> 
6. Sekarang temukan kode </head> dan letakkan kode berikut tepat di atasnya. 
 
<pre class="brush:javascript;"><script type="text/javascript" src="http://otowebsite.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#navix').stop().animate({'opacity':'0.2'},400);
else
$('#navix').stop().animate({'opacity':'1'},400);
});

$('#navix').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#navix').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#navix').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script></pre> 
7. Selanjutnya temukan kode <body> dan copy kode berikut tepat di atasnya. 
 
<pre class="brush:html;"><div id="navix">
<ul>
<li><a class="top" href="#top"></a></li>
<li><a class="bottom" href="#bottom"></a></li>
<li><a href=’YOUR_LINK_HERE‘>Link 1</a></li>
<li><a href=’YOUR_LINK_HERE‘>Link 2</a></li>
<li><a href=’YOUR_LINK_HERE‘>Link 3</a></li>
<li><a href=’YOUR_LINK_HERE‘>Link 4</a></li>
<li><a href=’YOUR_LINK_HERE‘>Link 5</a></li>
<li><a href=’YOUR_LINK_HERE‘>Link 6</a></li>
<li class="search">
<input type="text"/>
<input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div></pre> 
<blockquote class="tr_bq">Keterangan : Silahkan lakukan perubahan pada kode di atas, seperti memasang link/url Anda.</blockquote> 
8. Simpan template. 
<div class="YOUR HEADLINE CLASS i.e ow">Ada Kesulitan ?!?</div>Jika Anda mengalami kesulitan dalam Instalasi <a href="http://otowebsite.blogspot.com/2012/08/fixed-fade-out-navigation-menu.html">Fixed Fade Out Menu</a> jangan sungkan untuk bertanya, saya akan membantu Anda, karna Saya ada disini!

Fixed Fade Out Menu

Untuk Tutorial Kali ini Saya Akan Membahas Cara Membuat Fixed Fade Out Menu untuk Blogger. Fixed Fade Out Menu Adalah Menu Navigasi Baru Yang Telah Ditambahkan Perpaduannya dengan CSS Dan JQuery Hingg…

Baca selengkapnya »

15 Aug 2012

Set Of Heading Tags Dengan Hover Effect Untuk Blog

Ada banyak alasan yang baik untuk menggunakan tag judul untuk mendefinisikan dokumen HTML Anda dan memberikan struktur. Tapi desainer Web pada umumnya mendapatkan dalam kebiasaan tidak menggunakan tag…

Baca selengkapnya »

14 Aug 2012

AddThis Floating Horizontal Share Bar Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWkhSvBedF2gfD-Ht2XlgZFzBKWd7hI75sG636PTdz_CFj4e6FNVl_gRWHuaY9-LsjP9pRUeQjaqw8FkW1VbqbmO4N8PRrZudepMtqpLXMkhNha33HxGh_DtSIaeExeenTQXI5TEcYw/s1600/share+bar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWkhSvBedF2gfD-Ht2XlgZFzBKWd7hI75sG636PTdz_CFj4e6FNVl_gRWHuaY9-LsjP9pRUeQjaqw8FkW1VbqbmO4N8PRrZudepMtqpLXMkhNha33HxGh_DtSIaeExeenTQXI5TEcYw/s640/share+bar.jpg" width="640" /></a></div>AddThis adalah salah satu situs share and boomarks yang keberadaannya sangat membantu para blogger. Widget AddThis banyak sekali di gunakan oleh para blogger tidak lain tidak bukan karena mereka ingin agar pengunjung bisa membagikan artikel atau keberadaan blog mereka kepada teman-teman yang lain. 
 
Di artikel ini saya akan berbagi widget addthis kembali kepada Anda, dan kali ini temanya adalah AddThis Floating Horizontal Share Bar Untuk Blogger. Widget ini sangat keren, akan melayang di bagian atas dan disertai tombol close. 
 
Yang perlu Anda kethui bahwa widget ini diciptakan oleh AddThis.com dan saya merubah gadget ini agar bekerja dengan sempurna pada blog Anda. 
 
Saya telah membuat instalasi semudah mungkin karena Anda hanya harus menyalin dan menyisipkan dua potongan kode. Sekarang lihat demo terlebih dahulu sebelum menerapkannya pada blog Anda. 
 
<div style="text-align: center;"><a class="button" href="http://www.addthis.com/pages/labs-demo-horizontal-bar" target="_blank">Lihat Demo</a></div> 
 
<hr color="#3e81c4" />Cara Menginstal AddThis Floating Horizontal Share Bar Untuk Blogger 
<hr color="#3e81c4" /> 
1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Sekarang temukan kode </head> (Bila kesulitan mencari kode HTML coba klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>) 
 
4. Sekarang letakkan kode berikut tepat di atas kode tadi. 
 
<div class="md1"> 
 
<script type="text/javascript"> 
var addthis_config = { 
    bar_show_below : 150 
} 
</script> 
<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/addthis_widget.js"></script></div> 
5. Selanjutnya temukan kode </body> dan letakkan kode berikut tepat di atasnya. 
 
<div class="md7"><div class="addthis_bar addthis_bar_medium"> 
    <label>Share This Page:</label> 
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> 
        <a class="addthis_button_preferred_1"></a> 
        <a class="addthis_button_preferred_2"></a> 
        <a class="addthis_button_preferred_3"></a> 
        <a class="addthis_button_preferred_4"></a> 
        <a class="addthis_button_compact"></a> 
        <a class="addthis_counter addthis_bubble_style"></a> 
    </div> 
</div></div> 
6. Simpan template. 
 
Sekarang Anda bisa lihat hasilnya pada blog Anda!

AddThis Floating Horizontal Share Bar Untuk Blogger

AddThis adalah salah satu situs share and boomarks yang keberadaannya sangat membantu para blogger. Widget AddThis banyak sekali di gunakan oleh para blogger tidak lain tidak bukan karena mereka ingin…

Baca selengkapnya »

13 Aug 2012

jQuery Follow Us Dengan Social Icons Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDVTaW205de5UC4G6MQzltVrVc7uf_iAA5lqIDOj_WhxasLxeC0S71zJ99rAWr7myMWzQ6CQ_2BwrQuKM7L2Psihu8k4Anx6k_hPWhuSciBGqAjpoMix_wWqM3et_Fi30e1d-JY5Z-Q/s1600/sa.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDVTaW205de5UC4G6MQzltVrVc7uf_iAA5lqIDOj_WhxasLxeC0S71zJ99rAWr7myMWzQ6CQ_2BwrQuKM7L2Psihu8k4Anx6k_hPWhuSciBGqAjpoMix_wWqM3et_Fi30e1d-JY5Z-Q/s320/sa.jpg" width="320" /></a></div>Hari ini Oto Website akan berbagi tutorial dan untuk tutorial kali ini temanya adalah <a href="http://otowebsite.blogspot.com/2012/08/jquery-follow-us-dengan-social-icons.html">jQuery Follow Us Dengan Social Icons Untuk Blogger</a>. 
Ini adalah widget Follow Us yang memiliki beberapa icon di antaranya icon rss, berlangganan, facebook dan twitter. Widget ini sangat indah dan para blogger harus mencobanya karna blog Anda layak menjadi lebih Indah. 
 
Untuk cara mengistal <a href="http://otowebsite.blogspot.com/2012/08/jquery-follow-us-dengan-social-icons.html">jQuery Follow Us Dengan Social Icons Untuk Blogger</a> ini juga sangat mudah,. Sebelum kita membahas cara menginstalnya pada blog Anda lebih baik Anda lihat dulu demonya dengan menekan tombol di bawah ini! 
 
<div style="text-align: center;"><a class="button" href="http://otowebsite.16mb.com/jqueryfollowus.html" target="_blank">Lihat Demo</a></div> 
<hr color="3e81c4" />Cara Menginstal jQuery Follow Us Dengan Social Icons Untuk Blogger 
<hr color="3e81c4" /> 
Seperti yang saya bilang di atas untuk menginstal <a href="http://otowebsite.blogspot.com/2012/08/jquery-follow-us-dengan-social-icons.html">jQuery Follow Us Dengan Social Icons Untuk Blogger</a> sangatlah mudah, silahkan ikuti petunjuk berikut untuk mulai menginstalnya pada blogger Anda. 
 
1. Pergi ke akun blogger Anda. 
 
2. Pada Dasbor klick Template ➨ Edit HTML. 
 
3. Centang <input checked="" id="expandWidgets" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; font-size: small; margin: 0px 2px 4px; padding: 0.2em 0.4em;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
 
4. Selanjutnya dalam Edit HTML temukan kode ]]></b:skin> (Bila kesulitan mencari kode HTML klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>) 
 
5. Lalu letakkan kode css berikut tepat di atas kode tadi 
 
<blockquote class="tr_bq">#social { 
width: 98%; 
height: 45px; 
margin: 0; 
padding: 10px 5px 5px 30px; 
list-style: none; 
border-right:solid 1px #853529; 
position: relative; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Nmx3WtWZRy4p_U-yGg8Bdrl_HvqwQ1EHlw-dKG-LHhcrIeMrGdvo_qxrb_U8tXwBX9PexRGZLaA0osYTSswG8j9SuKhYzlhRH7YuJTMhPBDMO1qpBb7uUKrOy64wR4WEYV3hFiIX7w/s1600/otowebsite_background.png) no-repeat left top; 
} 
#social p{ 
font-size:1.5em; 
color:#FFFB98; 
font-weight:bold; 
float:left; 
margin: 10px 10px 0 0; 
text-shadow: 1px 1px 0px #000000; 
filter: dropshadow(color=#000000, offx=1, offy=1); 
} 
.abt{ 
font-size:0.8em; 
color:#787878; 
float:right; 
margin: 0 -30px 0 0; 
text-shadow: 1px 1px 0px #ffffff; 
filter: dropshadow(color=#ffffff, offx=1, offy=1); 
} 
#social li { 
width: 32px; 
height: 32px; 
float: left; 
margin-right: 3px; 
} 
#social li a { 
float: left; 
display: block; 
width: 100%; 
height: 100%; 
text-indent: -1000em; 
background-repeat: no-repeat; 
text-decoration: none; 
} 
#social #rss { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEnaT39EBd0FlHDT2aenDn7Nfm46klLq6CLKRUZSm3_moF_0yThu0MieY7BAveuHANqlubvUOBS8lROXAhget6kz1obfEjq0XhoTlqAZZbYjgmInHd161KtiTnnTAi_lkFDqPs9xAtw/s1600/otowebsite_rss.png); 
} 
#social #facebook { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Pv97sW6T3S5PoxurT_LCFvMVlBK28bZPlI63CjHF8vaboyDZKL1V2h3pUXfKYVahOESTXPyMiJbaOqmuPYDs0eSmaqnfpLynmAtsWZJvKV9w6O-_Z82-c4jClzGQ4IuzWNrQWOs3AQ/s1600/otowebsite_facebook.png); 
} 
#social #twitter { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2jgK3_9iD56tmauQvCwd_ZJ427_yQN7bycXSD-oPrvoYMNRTURuj1y1Jg96iUe54YknHsBiluEaETRLP795LFoqSdsENlF6vWH8WssjqIkATfqmhcYsb34S-6AssuTze6Mgjl4CSx3g/s1600/otowebsite_twitter.png); 
} 
#social #mail { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4-GWVBYkdkWLQzBsBM30c1ZJC-p4i8LoU5pgn6UFssn4wB0elbh9PpkK5dBkoImULFLJcNRO2cdDXX1cq5_sZAEDeb0Z7Df8leYvufNiSp-n_lD1IaxoNAIxWzf0U0WY-sWCZxlf99w/s1600/otowebsite_email.png); 
} 
span.tooltip { 
background: #575757; 
padding: 3px; 
display: block; 
width: 140px; 
border: 1px solid #000000; 
position: absolute; 
margin-top:-40px; 
color: #F0F0F0; 
font-size:10px; 
text-indent: 0; 
font: Arial, sans-serif; 
text-align: center; 
-webkit-box-shadow: inset 2px 2px 2px #616161; 
-moz-box-shadow: inset 2px 2px 2px #616161; 
box-shadow: inset 2px 2px 2px #616161; 
-moz-border-radius: 5px; 
border-radius: 5px; 
}</blockquote> 
6. Langkah selanjutnya temukan kode </body> dan letakkan kode berikut tepat di atasnya. 
 
<div><div><blockquote class="tr_bq"><script type='text/javascript'> 
window.setTimeout(function() { 
document.body.className = document.body.className.replace('loading', ''); 
}, 10); 
</script> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function() { 
$('#social li').each(function() { 
var $li = $(this); 
var title = $li.find('a').attr('title'); 
$li.find('a').removeAttr('title'); 
$('').text(title).appendTo($li.find('a')).hide(); 
 
$li.find('a').mouseover(function() { 
 
var top = $(this).position().top; 
var left = $(this).position().left; 
$(this).find('span').fadeIn()({ 
top: top, 
left: left 
}, 'slow'); 
}); 
$li.find('a').mouseout(function() { 
 
$(this).find('span').fadeOut('slow'); 
 
}); 
}); 
 
}); 
//]]> 
</script></blockquote></div></div><div> 
6. Simpan Template. 
 
</div><div>7. Sekarang Pergi ke Dasbor ➨ Tata Letak. 
 
8. Tambah gadget ➨ Pilih elemen HTML/Java Script. 
 
9. Lalu letakkan script berikut ke dalamnya.</div><div> 
</div><blockquote class="tr_bq"><ul id="social"> 
Follow Us 
<li><a href="http://Nama Blog.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li> 
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=otowebsite" id="mail" title="Subscribe To Our News Letter">Mail</a></li> 
<li><a href="https://www.facebook.com/pages/dekrif" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li> 
<li><a href="http://twitter.com/otowebsite" id="twitter" title="Follow Us On Twitter">Twitter</a></li> 
</ul> 
<a href="http://otowebsite.blogspot.com/2012/08/jquery-follow-us-dengan-social-icons.html">Get This Widget</a> | By <a href="http://www.latesthack.com">Oto Website</a></blockquote> 
<ul><li>Keterangan: Ganti semua teks yang di block merah dengan id Anda sendiri.</li>
</ul> 
10. Simpan. 
 
Sekarang Anda bisa lihat hasilnya pada blog Anda. 
 
<hr color="3e81c4" />Cara Menginstal jQuery Follow Us Dengan Social Icons Untuk Blogger 
<hr color="3e81c4" /> 
Jika Anda mengalami kesulitan atau masalah dalam penginstalan <a href="http://otowebsite.blogspot.com/2012/08/jquery-follow-us-dengan-social-icons.html">jQuery Follow Us Dengan Social Icons Untuk Blogger</a> jangan sungkan untuk bertanya melalui komentar, Saya akan berusaha dengan cepat membalas komentar Anda!

jQuery Follow Us Dengan Social Icons Untuk Blogger

Hari ini Oto Website akan berbagi tutorial dan untuk tutorial kali ini temanya adalah jQuery Follow Us Dengan Social Icons Untuk Blogger. Ini adalah widget Follow Us yang memiliki beberapa icon di ant…

Baca selengkapnya »

13 Aug 2012

Entri Populer Dengan Slide - Part 4

Entri Populer Dengan Slide - Part 4. 
Di dalam tutorial <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> kali ini saya akan membahas <a href="http://otowebsite.blogspot.com/2012/08/entri-populer-dengan-slide-part-4.html">Entri Populer Dengan Slide - Part 4</a> untuk melengkapi artikel sebelumnya. Ini adalah trick sederhana dan sangat mudah. 
Seperti yang pernah saya sebelumnya Entri Populer adalah Entri/artikel blog Anda yang paling sering di baca oleh pengunjung blog Anda jadi saya rasa tidak perlu menjelaskan lagi tentang Entri Populer dan Apa itu Entri Populer. 
Dan perlu Anda ketahui Script ini di buat oleh Abu Fahran untuk melihat hasil dari penerapan <a href="http://otowebsite.blogspot.com/2012/08/entri-populer-dengan-slide-part-4.html">Entri Populer Dengan Slide - Part 4</a> di blogger bisa Anda lihat contoh gambar berikut. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7p6HdUykdk4YVob5G_kxFkmABHqkqjxmORn4LZ4ZCTw33AwoCAwv18yTLj-ptPT0JgRk01OTnh6v1-lTIGUTGtGxocAF5gZesSMyR1XJe3wKJWn1Qyg7CzlebQayvNGiBXDWp-1rAg/s1600/b.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7p6HdUykdk4YVob5G_kxFkmABHqkqjxmORn4LZ4ZCTw33AwoCAwv18yTLj-ptPT0JgRk01OTnh6v1-lTIGUTGtGxocAF5gZesSMyR1XJe3wKJWn1Qyg7CzlebQayvNGiBXDWp-1rAg/s640/b.bmp" width="640" /></a></div><div style="text-align: center;">Hasil penerapan Entri Populer Dengan Slide - Part 4</div><div style="text-align: center;"> 
</div><hr color="#3e81c4" />Artikel Sebelumnya 
<hr color="#3e81c4" /> 
Perlu juga Anda ketahui juga, sebelumnya <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> pernah membahas Entri Populer yang lainnya di antaranya: 
<ul><li><a href="http://otowebsite.blogspot.com/2012/06/entri-populer-dengan-slide-part-1.html" target="_blank">Entri Populer Dengan Slide - Part 1</a>.</li>
<li><a href="http://otowebsite.blogspot.com/2012/07/entri-populer-dengan-slide-part-2.html" target="_blank">Entri Populer Dengan Slide - Part 2</a>.</li>
<li><a href="http://otowebsite.blogspot.com/2012/07/entri-populer-dengan-slide-part-3.html" target="_blank">Entri Populer Dengan Slide - Part 3</a>.</li>
</ul><hr color="#3e81c4" />Cara membuat Entri Populer Dengan Slide - Part 4 
<hr color="#3e81c4" /> 
1. Pergi ke akun blogger Anda. 
 
2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget ➨ Pilih Entri Populer dan Simpan (Penempatan Entri Populer seperti gambar berikut) 
 
<div style="text-align: center;">Contoh penerapan Widget Entri Populer dan Widget HTML/Java Script.</div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"> 
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXMUJ6hd4McgkET9n_rthU8FT7ZzcIICOLM15Pf1OxVq9mh-UplZIht2DY63bVKxmvDMDHcI6Pl9UN70ftHCx_XL3ctHwPFwjnw_6xvjmLFpNus7doW2ikzNbxMnzvK8WQ9AMUqk3XUI/s1600/aa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXMUJ6hd4McgkET9n_rthU8FT7ZzcIICOLM15Pf1OxVq9mh-UplZIht2DY63bVKxmvDMDHcI6Pl9UN70ftHCx_XL3ctHwPFwjnw_6xvjmLFpNus7doW2ikzNbxMnzvK8WQ9AMUqk3XUI/s400/aa.png" width="400" /></a></div> 
 
3. Lalu tambah Gadget ➨ Pilih elemen HTML/Java Script ➨ Copy kode berikut dan paste atau letakkan di dalamnya (Penempatan elemen HTML/Java Script seperti pada gambar di atas). 
 
<blockquote class="tr_bq"><style> 
@charset "utf-8"; 
/* CSS Document */ 
.lof-slidecontent, .lof-slidecontent a { 
 color:#FFF; } 
.lof-slidecontent a.readmore{ 
 color:#58B1EA; 
 font-size:95%; 
 } 
.lof-slidecontent{ 
 position:relative; 
 overflow:hidden; 
 border:#F4F4F4 solid 1px; 
} 
.lof-slidecontent .preload{ 
 height:100%; 
 width:100%; 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:100000; 
 text-align:center; 
 background:#FFF 
} 
.lof-slidecontent .preload div{ 
 height:100%; 
 width:100%; 
 background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_load-indicator.gif) no-repeat scroll 50% 50%; 
} 
.lof-main-outer{ 
 position:relative; 
 height:100%; 
 width:800px; 
 z-index:3px; 
 overflow:hidden; 
} 
 
/*******************************************************/ 
.lof-main-item-desc{ 
 z-index:100px; 
 position:absolute; 
 bottom:50px; 
 left:0px; 
 width:350px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png); 
 height:100px; 
 /* filter:0.7(opacity:60) */ 
 padding:10px; 
} 
.lof-main-item-desc p{ 
 margin:0 8px; 
 padding:8px 0 
} 
.lof-main-item-desc h3{ 
 padding:0; 
 margin:0 
} 
.lof-main-item-desc h2{ 
 padding:0; 
 margin:15px 0 0 0px; 
} 
.lof-main-item-desc h3 a{ margin:0; 
 background:#C01F25; 
 font-size:75%; 
 padding:2px 3px; 
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif; 
 text-transform:uppercase; 
 text-decoration:none 
} 
.lof-main-item-desc h3 a:hover{ 
 text-decoration:underline; 
} 
.lof-main-item-desc h3 i { 
 font-size:70%; 
} 
/* main flash */ 
ul.lof-main-wapper{ 
 /* margin-right:auto; */ 
 overflow:hidden; 
 background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_load-indicator.gif) no-repeat scroll 50% 50%; 
 padding:0px; 
 margin:0   !important; 
 position:absolute; 
 overflow:hidden; 
} 
ul.lof-main-wapper li{ 
 overflow:hidden; 
 padding:0px   !important; 
 margin:0px; 
 float:left; 
 position:relative; 
} 
.lof-opacity  li{ 
 position:absolute; 
 top:0; 
 left:0; 
 float:inherit; 
} 
ul.lof-main-wapper li img{ 
 padding:0px  !important; } 
/* item navigator */ 
.lof-navigator-wapper { 
 position:absolute; 
 bottom:10px; 
 right:10px; 
 background:url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_transparent_ow.png) repeat; 
 padding:5px 0px; 
} 
.lof-navigator-outer{ 
 position:relative; 
 z-index:100; 
 height:180px; 
 width:310px; 
 overflow:hidden; 
 color:#FFF; 
 float:left 
} 
ul.lof-navigator{ 
 top:0; 
 padding:0; 
 margin:0; 
 position:absolute; 
 width:100%; 
 background:none !important; 
 margin-top: 0 !important; 
 margin-left: 0 !important; 
 margin-right: 0 !important; 
} 
ul.lof-navigator li{ 
 cursor:hand !important; 
 cursor:pointer !important; 
 list-style:none !important; 
 padding:0 !important; 
 margin-left:0px !important; 
 overflow:hidden !important; 
 float:left !important; 
 display:block !important; 
 text-align:center !important; 
} 
ul.lof-navigator li img{ 
 border:#666 solid 3px; } 
ul.lof-navigator li.active img, ul.lof-navigator li:hover img { 
 border:#A8A8A8 solid 3px; 
} 
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{ 
 display:block; 
 width:22px; 
 height:30px; 
 color:#FFF; 
 cursor:pointer; 
} 
.lof-navigator-wapper .lof-next { 
 float:left; text-indent:-999px; 
 margin-right:5px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center; 
} 
.lof-navigator-wapper .lof-previous { 
 float:left; text-indent:-999px; 
 margin-left:5px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center; 
} 
#lofslidecontent45 {width:880px;height:340px;} 
.lof-main-outer {width:880px; height:340px;} 
.lof-main-wapper img {height:340px !important; width:880px !important} 
.lof-navigator-wapper img {height:32px !important; width:80px !important} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.easing.js"></script> 
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script> 
<script type="text/javascript"> 
 $(document).ready( function(){ var buttons = { previous:$('#lofslidecontent45 .lof-previous') , 
 next:$('#lofslidecontent45 .lof-next') }; 
 $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000, 
 direction : 'opacitys', easing : 'easeOutBounce', 
 duration : 1200, 
 auto : true, 
 maxItemDisplay  : 4, 
 navPosition     : 'horizontal', // horizontal 
 navigatorHeight : 32, 
 navigatorWidth  : 80, 
 mainWidth:880, 
 buttons : buttons} ); }); 
</script></blockquote> 
4. Simpan. 
 
 
Sekarang Anda bisa lihat hasilnya! 
 
Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar Anda tentang postingan/article di atas!

Entri Populer Dengan Slide - Part 4

Entri Populer Dengan Slide - Part 4. Di dalam tutorial Oto Website kali ini saya akan membahas Entri Populer Dengan Slide - Part 4 untuk melengkapi artikel sebelumnya. Ini adalah trick sederhana dan s…

Baca selengkapnya »

12 Aug 2012

Tambahkan CSS3 Drop Down Menu Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr-jeQS2eJHq_jfyjFQhs4PhYi-6WY5ZYOBcMyGWua-mmDy8JS9pzoHhUScoEpdfa27580HGf_uqn3-SBuRTTCms8e7D15dQmVd93XHDYYTCNR9ZjGvEPs9OVnRIbXIVf9sElK6hZ5w/s1600/otowebsite.dropdownmenu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr-jeQS2eJHq_jfyjFQhs4PhYi-6WY5ZYOBcMyGWua-mmDy8JS9pzoHhUScoEpdfa27580HGf_uqn3-SBuRTTCms8e7D15dQmVd93XHDYYTCNR9ZjGvEPs9OVnRIbXIVf9sElK6hZ5w/s1600/otowebsite.dropdownmenu.jpg" /></a></div>CSS3 Menu adalah cara terbaik untuk mengatur link penting di blog Anda agar terlihat rapi. CSS3 Menu juga membantu pembaca Anda untuk menavigasi melalui blog dengan mudah. 
Tambahkan CSS3 Drop Down Menu Untuk Blogger Anda juga meningkatkan keindahan blog Anda bahwa mengapa Navigasi Menu memainkan peran penting dalam meningkatkan blog Anda SEO atau lalu lintas di blog. 
Saya sedikit banyak telah berbagi Menu tetapi yang satu ini sedikit berbeda dari sebelumnya juga keuntungan terbesar dari menu ini adalah terbuat dari CSS3 murni dan hanya dua gambar kecil yang digunakan dalam menu ini sehingga menu ini tidak akan mempengaruhi pada blog Anda pada saat waktu pemuatan. Jadi mari kita lihat bagaimana untuk menambahkannya ke blogger blog? Sebelumnya silahkan demonya di bawah ini! 
 
<div style="text-align: center;">Live Demo ▼</div> 
<div style="background-color: white; border: 2px #a40629 dashed; padding: 10px; text-align: left;"><iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/red-css3-menu.html" style="height: 280px; width: 100%;"></iframe></div> 
<hr color="#3e81c4" />Tambahkan CSS3 Drop Down Menu Untuk Blogger 
<hr color="#3e81c4" /> 
Untuk cara Menambahkan atau Membuat CSS3 Drop Down Menu Untuk Blogger ini juga sangatlah mudah untuk caranya Anda bisa ikuti instruksi berikut ini: 
 
1. Pergi ke Akun blogger Anda. 
 
2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget. 
 
3. Pilih elemen HTML/Java Script. 
 
4. Lalu copy kode css berikut dan letakkan ke dalam elemen HTML/Java Script tadi. 
 
<pre class="brush:css;"><style> /*Start Css Menu*/
.menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}

.menu ul {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3R5by_o1wfftFGexYHdgy-f8zm1RwP4wc0IVIF9TXanymlHqurQbLTWP33Oeaz5S8gm1W0OtkIg0nI_ViwhmLYWItN9TraOaZi_xTykwfggt6Gc5kxDwr4EN5M_YEbERauVwXXXdwDk/s1600/otowebsite.blogspot.com-menu-bg.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
    padding: 0px 8px 0px 8px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.menu p {
    clear: left;
}

.menu #current {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjjEZtRSYo309U6QCfVwlUtADxmtEtvBL6q-90jdHOgPC5q5MIJ8PZGa7ntiGFnrOuLGX1Bun6iWSTTUpt1MVoda4CbtCf11aWbumqXK_L0fCnOASgj07oG1BVVqsb8iB1Xbj1b6kFTI/s1600/otowebsite.blogspot.com-current-bg.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu from http://www.otowebsite.blogspot.com/*/
</style>

<div class="menu">
 <ul>
  <li><a href="#" id="current">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">FAQ</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://www.otowebsite.blogspot.com/">Create This</a></li>
 </ul>
</div></pre> 
5. Sebelum menyimpan sebaiknya Anda lakukan sedikit perubahab pada css di atas. 
 
Sekarang ganti tanda # dengan link Anda sendiri. 
Mengganti teks menu dengan teks menu Anda sendiri yang ingin ditampilkan pada menu. 
 
<hr color="#3e81c4" />Kustomisasi 
<hr color="#3e81c4" /> 
Catatan - saya sangat menyarankan Anda untuk menggunakan <a href="http://otowebsite.blogspot.com/2012/07/ow-html-editor.html" target="_blank">OW HTML Editor</a> untuk membuat perubahan. 
Anda dapat melihat live preview dari menu Anda dengan menggunakan <a href="http://otowebsite.blogspot.com/2012/07/ow-html-editor.html" target="_blank">OW HTML Editor</a>, Copy semua kode diatas dan paste ke editor.. 
 
<hr color="#3e81c4" />Selanjutnya Bantuan? 
<hr color="#3e81c4" /> 
Banyak pemula blogger mendapat masalah saat menambahkan link dan texts. Jika Anda mendapatkan masalah yang sama maka Anda cukup menghubungi saya melalu komentar Saya akan berusaha secepat mungkin menjawab pertanyaan Anda. 
 
<hr color="#3e81c4" />Drop Down Menu Lainnya . . . 
<hr color="#3e81c4" /> 
Anda juga dapat melihat dan menggunakan Drop Down Menu lainnya yang berada pada artikel <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a>!

Tambahkan CSS3 Drop Down Menu Untuk Blogger

CSS3 Menu adalah cara terbaik untuk mengatur link penting di blog Anda agar terlihat rapi. CSS3 Menu juga membantu pembaca Anda untuk menavigasi melalui blog dengan mudah. Tambahkan CSS3 Drop Down Men…

Baca selengkapnya »

12 Aug 2012

Widget Jam animasi flash Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcryqaRhkUx16fE2WrGt8BKIJ31n-r9bMrCr8g2WOMsV-PaXFTjut3AxbWa8YgYxsc2o9GwrYeO6aIi_B4jyG1mvNbT6NAhyYFOKwRoZMb71fzzhG39Na-egGNCjdLw5T1Vfg0G6uiQ/s1600/Add+Animated+Flash+Clock+otowebsite.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcryqaRhkUx16fE2WrGt8BKIJ31n-r9bMrCr8g2WOMsV-PaXFTjut3AxbWa8YgYxsc2o9GwrYeO6aIi_B4jyG1mvNbT6NAhyYFOKwRoZMb71fzzhG39Na-egGNCjdLw5T1Vfg0G6uiQ/s1600/Add+Animated+Flash+Clock+otowebsite.jpg" /></a></div>Widget Jam animasi flash adalah salah satu widget paling umum untuk widget blogger dan webmaster di letakkan di situs Web mereka / blog adalah sebuah Jam dan jam Calendar memberikan tampilan yang indah untuk sebuah website. 
 
Jam adalah keharusan untuk blog pribadi. jadi saya telah menciptakan generator untuk widget ini karena Anda dapat dengan mudah menambahkan widget ini ke blog Anda yang berada dalam artike ini: <a href="http://otowebsite.blogspot.com/2012/08/tambahkan-widget-jam-animasi-flash.html">Widget Jam animasi flash Untuk Blogger</a>. 
 
Sebelumnya saya mengucapkan banyak terimakasih kepada <a href="http://flash-clocks.com/">http://flash-clocks.com/</a> karna telah menyediakan Jam animasi flash di situs mereka, dan perlu Anda ketahui juga bahwa widget ini saya dapatkan dari situs tersebut dan saya hanya menggabungkannya menjadi satu sehinggan dapat dengan mudah membantu kerja Anda. 
 
<hr color="#3e81c4" />Cara Menggunakan Generator Jam animasi flash 
<hr color="#3e81c4" /> 
Sebenarnya saya tidak perlu menjelaskan bagaimana cara menggunakan generator ini, karna sebelumya saya sudah membahas caranya yang sangat simple di generator-generator sebelumnya. 
 
Saya akan jelaskan saja agar Anda lebih mengerti. 
<ul><li>Tekan tombol untuk menggunakan generator.</li>
<li>Pilih jenis jam di generator.</li>
<li>Isi Tinggi dan Lebar dari Widget.</li>
<li>Klik tombol "Genetate" untuk menginstal.</li>
<li>Sesuaikan sendiri judul dari widget.</li>
<li>Terakhir, klik "Add to Blogger" untuk menambahkannya ke blog Anda.</li>
</ul> 
<div style="text-align: center;"><a class="button" href="http://otowebsite.16mb.com/Clock%20Generator.html" target="_blank">Widget Generator</a></div> 
Bila Anda mengalami kesulitan dalam menggunakan generator ini jangan sungkan untuk bertanya karna saya ada disini!

Widget Jam animasi flash Untuk Blogger

Widget Jam animasi flash adalah salah satu widget paling umum untuk widget blogger dan webmaster di letakkan di situs Web mereka / blog adalah sebuah Jam dan jam Calendar memberikan tampilan yang inda…

Baca selengkapnya »

11 Aug 2012

Breadcrumbs Navigation Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9rxticBTnp1R4rPQqG-WiRjLCON-BsWnDnCjMPa9JkjeZOv1RulXByWBNuRXji7rMsyDVqUY4h7RJunaosADeQwe_57JVdcYrB85ZwY4kiCqGNDuz5Xruzc-EFVGYevEUOAF-7pCvQ/s1600/backgroum.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9rxticBTnp1R4rPQqG-WiRjLCON-BsWnDnCjMPa9JkjeZOv1RulXByWBNuRXji7rMsyDVqUY4h7RJunaosADeQwe_57JVdcYrB85ZwY4kiCqGNDuz5Xruzc-EFVGYevEUOAF-7pCvQ/s1600/backgroum.gif" /></a></div>Menambahkan <a href="http://otowebsite.blogspot.com/2012/08/breadcrumbs-navigation-untuk-blogger.html">Breadcrumbs Navigation Untuk Blogger</a> adalah salah satu cara untuk membuat blog/situs menjadi seo. 
Menambahkan <a href="http://otowebsite.blogspot.com/2012/08/breadcrumbs-navigation-untuk-blogger.html">Breadcrumbs Navigation Untuk Blogger</a> membantu pembaca Anda untuk melacak posisi mereka di blog Anda dengan menunjukkan jejak breadcrumb dengan cara ini ( Home »Label Nama» Judul Posting ) Ini navigasi muncul tepat di atas dari judul posting Anda dan link yang jejak dari homepage untuk title. Posting juga pilihan untuk menampilkan beberapa label dalam navigasi yaitu jika posting apapun memiliki lebih dari satu label maka ia akan menampilkan semua ide. Breadcrumbs Navigation asli diberikan oleh HOCTRO dan Aneesh dari bloggerplugins lebih lanjut dapat bekerja seperti di atas. 
 
<hr color="#3e81c4" />Cara Menambahkan Breadcrumbs Navigation Untuk Blogger 
<hr color="#3e81c4" /> 
1. Pergi ke akun blogger Anda. 
 
2. Pada Dasbor klick Template Edit HTML. 
 
3. Centang <input checked="" id="expandWidgets" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; font-size: small; margin: 0px 2px 4px; padding: 0.2em 0.4em;" type="checkbox" />Expand Template Widget ➨ Backup template Anda. 
 
4. Sekarang Anda harus bisa mencari kode HTML, bila kesulitan mencari kode HTML silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>. 
 
5. Dalam Edit HTML temukan kode berikut 
 
<blockquote class="tr_bq"><b:include data='top' name='status-message'/></blockquote> 
Tepat di atasnya letakkan kode ini 
 
<blockquote class="tr_bq"><b:include data='posts' name='breadcrumb'/></blockquote> 
6. Sekarang cari kode di bawah ini (jika Anda menemukan dua kode yang sama, maka pilih yang kedua) 
 
<blockquote class="tr_bq"><b:includable id='main' var='top'></blockquote> 
Tepat di atasnya sisipkan kode berikut 
 
<blockquote class="tr_bq"> 
<b:includable id='breadcrumb' var='posts'> 
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType == "static_page"'> 
<div class='breadcrumbs'> 
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> » <data:blog.pagename/> 
</div> 
<b:else/> 
<b:if cond='data:blog.pageType == "item"'> 
 
<b:loop values='data:posts' var='post'> 
<b:if cond='data:post.labels'> 
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> 
 <a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a> 
 <b:loop values='data:post.labels' var='label'> 
 <b:if cond='data:label.isLast == "true"'> 
 » <a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a> 
 </b:if> 
 </b:loop> 
 » <data:post.title/> 
</div> 
<b:else/> 
<div class='breadcrumbs'> 
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> » Unlabelled » <data:post.title/> 
</div> 
</b:if> 
</b:loop> 
<b:else/> 
<b:if cond='data:blog.pageType == "archive"'> 
 
<div class='breadcrumbs'> 
 <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pagename/> 
</div> 
<b:else/> 
<b:if cond='data:blog.pageType == "index"'> 
<div class='breadcrumbs'> 
 <b:if cond='data:blog.pageName == ""'> 
 <a expr:href='data:blog.homepageUrl'>Home</a> » All posts 
 <b:else/> 
 <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pagename/> 
 </b:if> 
</div> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:includable> 
</blockquote> 
<ul><li>Kode ini hanya akan menampilkan label terakhir dari posting di breadcrumb. Jika Anda ingin menampilkan semua label, maka Anda harus menghapus kode di baris 16 dan 18. Sekarang cari kode di bawah ini,</li>
</ul>Mencari kode ini 
 
<blockquote class="tr_bq">]]></b:skin></blockquote><div> 
</div><div>Dan letakkan kode css berikut ini tepat di atasnya 
 
</div><div><blockquote class="tr_bq">.breadcrumbs { 
background: #F7F7F7; 
float: left; 
border: 1px solid #E6E6E6; 
width: 575px; 
font-size: 11px; 
margin: 10px 10px 10px 10px; 
padding: 5px 10px 5px 10px; 
}</blockquote></div><div> 
Sekarang simpan perubahan Anda dan Anda selesai. 
 
Jika menemukan masalah tentang kinerja Breadcrumbs Navigation ini silahkan untuk bertanya!</div>

Breadcrumbs Navigation Untuk Blogger

Menambahkan Breadcrumbs Navigation Untuk Blogger adalah salah satu cara untuk membuat blog/situs menjadi seo. Menambahkan Breadcrumbs Navigation Untuk Blogger membantu pembaca Anda untuk melacak posis…

Baca selengkapnya »

10 Aug 2012

Beautiful Email Subscription Forms Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN8C4MnWcn3_0V3owYOJ3lqx_ok-IqcY9lcB2wItGyyW7AdnFXWa9IwJzbNazdow74Prcw_pECxC0CTmMD7bWm7uF2FAPXg0E2VLC7KZVa3Z3nR-HyTLAC2I7O6GD7i3cQ8b5AXBjkfA/s1600/as.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN8C4MnWcn3_0V3owYOJ3lqx_ok-IqcY9lcB2wItGyyW7AdnFXWa9IwJzbNazdow74Prcw_pECxC0CTmMD7bWm7uF2FAPXg0E2VLC7KZVa3Z3nR-HyTLAC2I7O6GD7i3cQ8b5AXBjkfA/s320/as.jpg" width="320" /></a></div>Berlangganan via email adalah cara yang sangat populer untuk berlangganan setiap blog / situs dan mendapatkan update langsung di kotak email, itu sebabnya Anda selalu dapat melihat bahwa jumlah pelanggan feed . 
Disini saya akan berbagi beberapa formulir berlangganan email indah yang dirancang oleh <a href="http://www.design3edge.com/" target="_blank">design3edge</a> dan saya telah mengkonversi mereka dari file ke dalam widget blogger. Saya telah mencoba yang terbaik untuk membuat tutorial ini dengan satu langkah installation. Anda hanya perlu copy dan paste kode. Sekarang mari kita pergi ke bentuk dan melihat bagaimana cara menambahkan widget ini ke blogger blog. 
 
<hr color="##cc0000" />Cara Tambah Formulir Berlangganan Email Untuk Blogger 
<hr color="##cc0000" /> 
1. Login ke akun blogger Anda. 
 
2. Pada Dasbor klick Tata Letak. 
 
3. Tambah Gadget. 
 
4. Pilih elemen HTML/Java Script. 
 
5. Lalu letakkan salah satu kode script berikut ke dalamnya. 
 
<hr color="#3e81c4" />Email Formulir Gaya 1 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNi2TV6FMXEhO4tfGt1YvdQjUcOV0PhmtF9bCoCZv6Z6nack3x6zn70Gwv7qWwpDxK1PBUYgPju02m2M1VDG_53AJrHUqk3Ye5Eco8MS49ojK0Pem-AA4Lw9xfHh_RoYInSMLYFLUow/s1600/otowebsite.blogspot.com-blue.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNi2TV6FMXEhO4tfGt1YvdQjUcOV0PhmtF9bCoCZv6Z6nack3x6zn70Gwv7qWwpDxK1PBUYgPju02m2M1VDG_53AJrHUqk3Ye5Eco8MS49ojK0Pem-AA4Lw9xfHh_RoYInSMLYFLUow/s1600/otowebsite.blogspot.com-blue.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css"> 
#otowebsite-emailbox { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNi2TV6FMXEhO4tfGt1YvdQjUcOV0PhmtF9bCoCZv6Z6nack3x6zn70Gwv7qWwpDxK1PBUYgPju02m2M1VDG_53AJrHUqk3Ye5Eco8MS49ojK0Pem-AA4Lw9xfHh_RoYInSMLYFLUow/s1600/otowebsite.blogspot.com-blue.png)no-repeat scroll center center transparent; 
    height: 143px; 
    width: 368px; 
} 
form#otowebsite-emailform { 
    display: block; 
    margin: 0; 
    padding-left: 42px; 
    padding-top: 67px; 
} 
form#otowebsite-emailform #s { 
    background: transparent; 
    border: none; 
    color: #444242; 
    font-family: georgia; 
    font-size: 15px; 
    font-style: italic; 
    height: 30px; 
    margin-top: -2px; 
    padding-left: 2px; 
    vertical-align: top; 
    width: 227px; 
} 
form#otowebsite-emailform #sbutton { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    height: 30px; 
    padding-right: 45px; 
}</style> 
<div id="otowebsite-emailbox"> 
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify" 
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
        <input type="hidden" value="otowebsite" name="uri" /> 
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here" 
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}' 
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}' 
        /> 
        <input type="hidden" name="loc" value="en_US" /> 
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" 
        /> 
    </form> 
</div></blockquote> 
<hr color="#3e81c4" />Email Formulir Gaya 2 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPJqT1hKp5mD8xnfCB-UVy2O_eTBmvnefLTx_GDv43Pzp8KJP-NZbh9FfB5pB4lMHUQlbIK5MgRUpEd5ygoRO8O1haEajKrmyVxvJZnvxp3R4eQZrntQxLh6-VNGk7YmH36ypVcTVMw/s1600/otowebsite.blogspot.com-red.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPJqT1hKp5mD8xnfCB-UVy2O_eTBmvnefLTx_GDv43Pzp8KJP-NZbh9FfB5pB4lMHUQlbIK5MgRUpEd5ygoRO8O1haEajKrmyVxvJZnvxp3R4eQZrntQxLh6-VNGk7YmH36ypVcTVMw/s1600/otowebsite.blogspot.com-red.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css"> 
#otowebsite-emailbox { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPJqT1hKp5mD8xnfCB-UVy2O_eTBmvnefLTx_GDv43Pzp8KJP-NZbh9FfB5pB4lMHUQlbIK5MgRUpEd5ygoRO8O1haEajKrmyVxvJZnvxp3R4eQZrntQxLh6-VNGk7YmH36ypVcTVMw/s1600/otowebsite.blogspot.com-red.png)no-repeat scroll center center transparent; 
    height: 143px; 
    width: 368px; 
} 
form#otowebsite-emailform { 
    display: block; 
    margin: 0; 
    padding-left: 42px; 
    padding-top: 67px; 
} 
form#otowebsite-emailform #s { 
    background: transparent; 
    border: none; 
    color: #444242; 
    font-family: georgia; 
    font-size: 15px; 
    font-style: italic; 
    height: 30px; 
    margin-top: -2px; 
    padding-left: 2px; 
    vertical-align: top; 
    width: 227px; 
} 
form#otowebsite-emailform #sbutton { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    height: 30px; 
    padding-right: 45px; 
}</style> 
<div id="otowebsite-emailbox"> 
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify" 
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
        <input type="hidden" value="otowebsite" name="uri" /> 
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here" 
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}' 
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}' 
        /> 
        <input type="hidden" name="loc" value="en_US" /> 
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" 
        /> 
    </form> 
</div></blockquote> 
<hr color="#3e81c4" />Email Formulir Gaya 3 
<hr color="#3e81c4" /> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2V5TuHo5g2SoCexMVacSmU6atshwBnZBphtHe3ZVyM0nZfvM97A-_Ib_0fK9hGzsIkonw2aJ63MpRYjPHAFnI-hMzkcM2guD9UbGej4ErA5N2HznrHsxrTogOpFwl-Cq6OmGuK0aLg/s1600/otowebsite.blogspot.com-silver.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2V5TuHo5g2SoCexMVacSmU6atshwBnZBphtHe3ZVyM0nZfvM97A-_Ib_0fK9hGzsIkonw2aJ63MpRYjPHAFnI-hMzkcM2guD9UbGej4ErA5N2HznrHsxrTogOpFwl-Cq6OmGuK0aLg/s1600/otowebsite.blogspot.com-silver.png" /></a></div> 
<blockquote class="tr_bq"><style type="text/css"> 
#otowebsite-emailbox { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2V5TuHo5g2SoCexMVacSmU6atshwBnZBphtHe3ZVyM0nZfvM97A-_Ib_0fK9hGzsIkonw2aJ63MpRYjPHAFnI-hMzkcM2guD9UbGej4ErA5N2HznrHsxrTogOpFwl-Cq6OmGuK0aLg/s1600/otowebsite.blogspot.com-silver.png)no-repeat scroll center center transparent; 
    height: 143px; 
    width: 368px; 
} 
form#otowebsite-emailform { 
    display: block; 
    margin: 0; 
    padding-left: 42px; 
    padding-top: 67px; 
} 
form#otowebsite-emailform #s { 
    background: transparent; 
    border: none; 
    color: #444242; 
    font-family: georgia; 
    font-size: 15px; 
    font-style: italic; 
    height: 30px; 
    margin-top: -2px; 
    padding-left: 2px; 
    vertical-align: top; 
    width: 227px; 
} 
form#otowebsite-emailform #sbutton { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    height: 30px; 
    padding-right: 45px; 
}</style> 
<div id="otowebsite-emailbox"> 
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify" 
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
        <input type="hidden" value="otowebsite" name="uri" /> 
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here" 
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}' 
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}' 
        /> 
        <input type="hidden" name="loc" value="en_US" /> 
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" 
        /> 
    </form> 
</div></blockquote> 
<ul><li>Ganti dua kode otowebsite dengan id feedsburner Anda.</li>
</ul>6. Akhirnya menyimpan. 
 
Sekarang Anda dapat melihat hasilnya pada sidebar blog Anda. 
 
Saya rasa cukup untuk kali ini, mudah-mudahan Anda suka dengan Beautiful Email Subscription Forms For Blogger di atas! 
Saya berharap bahwa Anda tidak akan menghadapi masalah ketika menerapkannya ke blog Anda. Namun jika Anda mendapatkan masalah Anda cukup melemparkan masalah dalam komentar!

Beautiful Email Subscription Forms Untuk Blogger

Berlangganan via email adalah cara yang sangat populer untuk berlangganan setiap blog / situs dan mendapatkan update langsung di kotak email, itu sebabnya Anda selalu dapat melihat bahwa jumlah pelang…

Baca selengkapnya »

09 Aug 2012

Load more posts