Oto Website

Cara Tambah Sintaks Highlighter V3 di Blogger

<span class="awal">S</span>tylizing 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.<br />
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.<br />
<br />
<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><br />
<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. <br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">Cara 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.<br />
<br />
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="http://dl.dropbox.com/u/63702052/Syntax%20Highlighter.html" style="height: 890px; width: 100%;"></iframe><br />
<br />
<ul><li><b>Langkah # 1:</b> 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><b>Langkah # 2:</b> 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><b>Langkah # 3: </b>Sekarang copy semua kode yang dihasilkan di area teks dan kemudian pindah ke langkah berikutnya.</li>
<li><b>Langkah # 4: </b>Sekarang pergi ke Blogger >> Template  >> Edit HTML.</li>
<li><b>Langkah # 5:</b> 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><b>Langkah # 6:</b> 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><br />
<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.<br />
<br />
<b>Untuk CSS (Style Sheet)</b><br />
<br />
<pre class="brush:css;"><pre class="brush:css;">ADD-THE-CSS-CODE-HERE

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

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

</pre>
</pre><br />
<b>Kustomisasi:</b><br />
<br />
Ganti ADD-THE-HTML-CODE-HERE dengan style sheet CSS coding. <br />
Jangan lupa untuk mengganti ADD-THE-HTML-CODE-HERE dengan HTML Anda.  <br />
Ganti ADD-THE-JavaScript-CODE HERE dengan kode JavaScript Anda.<br />
<br />
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.<br />
<br />
<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><br />
<b>Dari Meja Editor:</b><br />
<br />
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

S tylizing blog atau website sangat menguntungkan dan memiliki signifikansi besar karena tidak hanya menarik pengunjung tetapi juga terlihat...

Baca selengkapnya »

Membuat Query Loader Page Di Blogger

<span class="awal">A</span>pa 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.<br />
<br />
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.<br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">Priview Image Query Loader Page</div><br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Demo Halaman Query Loader Page</div><br />
<div style="text-align: center;"><a class="button" href="http://www.infooke.co.cc/" target="_blank"><b>LIHAT DEMO</b></a></div><br />
<div class="YOUR HEADLINE CLASS i.e ow">Membuat Query Loader Page Di Blogger</div><br />
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!<br />
<br />
<hr color="3e81c4" /><b><span style="color: #3d85c6; font-size: large;">jQuery</span></b><br />
<hr color="3e81c4" /><br />
<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><br />
<hr color="3e81c4" /><b><span style="color: #3d85c6; font-size: large;">CSS</span></b><br />
<hr color="3e81c4" /><br />
<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><br />
<hr color="3e81c4" /><b><span style="color: #3d85c6; font-size: large;">HTML</span></b><br />
<hr color="3e81c4" /><br />
<pre class="brush:html;"><script>
 jQueryLoader_OW.selectorPreload = "body";
 jQueryLoader_OW.init ();
</ script></pre>

Membuat Query Loader Page Di Blogger

A pa itu Query Loader Page? Query Loader Page di gunakan untuk menampilkan halaman blog Anda saat sedang di muat atau loading. Jadi para pen...

Baca selengkapnya »

Tambahkan Custom Facebook Like Box Untuk Blogger

<span class="awal">T</span>utorial 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.<br />
<br />
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.<br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">Priview Custom Facebook Like Box</div><br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Demo Custom Facebook Like Box Seperti Pada Kotak Berikut</div><br />
<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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Cara Tambah Custom Facebook Like Box Untuk Blogger</div><br />
1. Pertama Anda harus mengetahui ID Facebook Fans Page Anda.<br />
<br />
2. Untuk Cara mengetahuinya silahkan Anda gunakan Facebook ID Finder dengan menekan tombol berikut.<br />
<br />
<br />
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/OW-Facebook%20ID%20Finder.html" target="_blank"><b>Facebook ID Finder</b></a></div><br />
<br />
3. Pada Facebook ID Finder masukkan URL Facebook Fans Page Anda.<br />
<br />
4. Lalu Tekan tombol Get Id.<br />
<br />
5. Sekarang pergi ke Dasbor Blogger.<br />
<br />
6. Pilih Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script.<br />
<br />
7. Lalu copy kode berikut dan letakkan di dalamnya.<br />
<div class="md4"><br />
<iframe frameborder="0" height="<span style="background-color: #f6b26b;">250</span>" width="<span style="background-color: #93c47d;">300</span>" src="http://www.connect.facebook.com/widgets/fan.php?channel_url=http://otowebsite.blogspot.com/?fbc_channel=2&amp;id=<span style="background-color: #e06666;">ID_FACEBOOK</span>&amp;name=&amp;connections=<span style="background-color: yellow;">8</span>&amp;stream=0&amp;logobar=0&amp;css=https://otowebsite-blogspot.googlecode.com/svn/trunk/Fb-hack.css"></iframe></div><br />
<b><span style="color: red;">Penyesuaian dan Keterangan:</span></b><br />
<ul><li>Ganti <span style="background-color: #e06666;">ID_FACEBOOK</span> dengan ID Facebook Fans Page Yang Anda dapatkan dari Facebook ID Finder.</li>
<li>Angka <span style="background-color: #f6b26b;">250</span> menunjukkan tinggi widget ini.</li>
<li>Angka <span style="background-color: #93c47d;">300</span> menunjukkan lebar dari widget.</li>
<li>Angka <span style="background-color: yellow;">8</span> menunjukkan berapa jumlah penggemar yang akan kita tunjukkan.</li>
</ul>8. Akhirnya menyimpan dan melihat hasilnya!<br />
<br />
<div class="YOUR HEADLINE CLASS i.e ow">Bagaimana Kesan Anda ?!!</div><br />
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:<br />
<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

T utorial kali ini saya akan menunjukkan kepada Anda tentang Cara Tambah Kustom Facebook Like Box Untuk Blogger. Tambahkan Custom Facebook L...

Baca selengkapnya »

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><span class="awal">K</span>ali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar.<br />
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.<br />
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.<br />
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.<br />
<br />
<div style="text-align: center;"><a class="button" href="https://otowebsite-blogspot.googlecode.com/svn/trunk/CSS3GalleryBlogspot.html" target="_blank"><b>Lihat Demo</b></a></div><br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat CSS3 Image Gallery Blogspot</div><br />
Disini saya akan memberikan Anda kode-kode yang di perlukan untuk membuat CSS3 Image Gallery Blogspot. Gunakan kode yang saya berikan berikut untuk membuatnya!<br />
<br />
<hr color="3e81c4" /><b><span style="color: #3d85c6; font-size: large;">CSS</span></b><br />
<hr color="3e81c4" /><br />
<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><br />
<hr color="3e81c4" /><b><span style="color: #3d85c6; font-size: large;">HTML</span></b><br />
<hr color="3e81c4" /><br />
<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><br />
<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.<br />
Perhatikan Kode HTML di atas, ganti semua url gambar dengan url gambar Anda sendiri.<br />
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>.<br />

CSS3 Image Gallery Blogspot

K ali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar. Ini adalah salah satu trick terbaik yang bisa And...

Baca selengkapnya »

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><span class="awal">U</span>ntuk 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.<br />
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!<br />
<br />
<div style="text-align: center;"><a class="button" href="http://otowebsite.16mb.com/Fixed%20menu.html" target="_blank"><b>Lihat Demo</b></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><br />
<div class="YOUR HEADLINE CLASS i.e ow">Cara Menginstal Fixed Fade Out Menu di Blogger</div><br />
1. Pergi ke akun Blogger.<br />
<br />
2. Pada Dasbor klick Template ➨ Edit HTML.<br />
<br />
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.<br />
<br />
4. Sekarang temukan kode <b><i><span style="color: red;">]]></b:skin></span></i></b> (bila kesulitan mencarinya coba klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>)<br />
<br />
5. Lalu tambahkan kode CSS berikut tepat di atas kode tadi.<br />
<br />
<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><br />
6. Sekarang temukan kode <b><i><span style="color: red;"></head></span></i></b> dan letakkan kode berikut tepat di atasnya.<br />
<br />
<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><br />
7. Selanjutnya temukan kode <b><i><span style="color: red;"><body></span></i></b> dan copy kode berikut tepat di atasnya.<br />
<br />
<pre class="brush:html;"><div id="navix">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></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><br />
<blockquote class="tr_bq">Keterangan : Silahkan lakukan perubahan pada kode di atas, seperti memasang link/url Anda.</blockquote><br />
8. Simpan template.<br />
<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

U ntuk Tutorial Kali ini Saya Akan Membahas Cara Membuat Fixed Fade Out Menu untuk Blogger. Fixed Fade Out Menu Adalah Menu Navigasi Baru ...

Baca selengkapnya »

Set Of Heading Tags Dengan Hover Effect Untuk Blog

A da banyak alasan yang baik untuk menggunakan tag judul untuk mendefinisikan dokumen HTML Anda dan memberikan struktur. Tapi desainer Web p...

Baca selengkapnya »

Oto Website

Cara Tambah Sintaks Highlighter V3 di Blogger

Membuat Query Loader Page Di Blogger

Tambahkan Custom Facebook Like Box Untuk Blogger

CSS3 Image Gallery Blogspot

Fixed Fade Out Menu

Set Of Heading Tags Dengan Hover Effect Untuk Blog

Entri Populer

Arsip Blog