Oto Website

Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger

<span class="awal">T</span>utorial ini akan menunjukkan kepada Anda tentang Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger. Keuntungan utama menggunakan widget ini adalah Anda dapat meningkatkan tayangan Adsense Anda atau klick iklan Anda dan mengisi ruang kosong di samping unit Adsense dengan Tombol Social Bookmarking, membuat blog Anda terlihat lebih indah dan profesional. Widget ini di lengkapi dengan tombol termasuk tombol untuk Google Plus, Del.icio.us, Twitter, Facebook, StumbleUpon dan Digg.<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</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiPTyyt7MUF_4_jqZH_FfcDzBxhwEJgRqYr7JZTDQJm4LuJXBxNNvb7P1C6398VNvE6qYnMKZoWO-2vONx9rxfneAczo17aJSf4J_HEgxmXpFwc5pjDSTkRlxw-3lmC4S8sRW8q98Pgg/s1600/social-bookmarking-icons-besides-adsense-ads.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiPTyyt7MUF_4_jqZH_FfcDzBxhwEJgRqYr7JZTDQJm4LuJXBxNNvb7P1C6398VNvE6qYnMKZoWO-2vONx9rxfneAczo17aJSf4J_HEgxmXpFwc5pjDSTkRlxw-3lmC4S8sRW8q98Pgg/s640/social-bookmarking-icons-besides-adsense-ads.jpg" width="640" /></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 Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger</div><br />
<ul><li>Pergi ke <b><i>Blogger.com</i></b></li>
<li>Pada <b><i>Dasbor</i></b> klick >> Template</li>
<li>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.</li>
<li>Sekarang gunakan tool di bawah ini dan masukkan kode iklan Adsense Anda >> lalu tekan tombol Generate.</li>
</ul><iframe allowtransparency="true" frameborder="0" height="670px" scrolling="no" src="http://dl.dropbox.com/u/63702052/Social%20Bookmarking%20Buttons%20Beside%20Adsense%20Ad%20Unit%20Code%20Generator.html" width="100%"></iframe><br />
<ul><li>Kembali ke template Anda >> copy kode CSS yang telah di hasilkan Generator tadi dan letakkan di atas kode <b><i>]]></b:skin></i></b> (Bila kesulitan mencari kode HTML klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>).</li>
<li>Pencarian untuk kode <b><i><data:post.body/></i></b> dan copy kode HTML pada Generator tadi dan letakkan pada kode <data:post.body/></li>
<li>Simpan template Anda dan lihat hasilnya.</li>
</ul>

Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger

T utorial ini akan menunjukkan kepada Anda tentang Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger. Keuntungan utama m...

Baca selengkapnya »

Awesome Page Navigation Widget Untuk Blogger Dengan Scroll

<span class="awal">A</span>wesome Page Navigation Widget Untuk Blogger Dengan Scroll adalah widget Navigasi halaman dan membantu pembaca Anda untuk melompat dari satu halaman ke halaman lain directly. Widget navigasi halaman ini dikembangkan oleh <a href="http://karaboz.ru/2007/11/19/paginator-3000-postranichnaya-navigaciya-budushhego/" target="_blank">karaboz</a> dan <a href="http://www.abu-farhan.com/" target="_blank">abu-farhan</a> dikonversi menjadi blogger. Widget ini memiliki tombol kecil di bawah dimana setiap pengunjung bisa langsung pada halaman terakhir , juga mereka dapat memilih halaman di blog.Search Anda di Google Anda akan melihat widget banyak tentang navigasi halaman tetapi jika Anda menggunakan widget ini maka pembaca / pengunjung bisa pergi ke halaman tertentu yang mereka inginkan.<br />
<br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">See Demo At Bottom Of My Homepage</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHBfrqhXKjj8BRrs20CB4YhnJs9TNnnfg9cWJjc3MDMlZkGBCT_nQmd1zbSHJHUep6Uo1dWS89ITt1_J_IkVcQ3i6v7-abg7-JHBECpItr0duAopL2ANI6qrSPAIuWe8zlHOvy1ymaYA/s1600/page-navigation-widget-for-blogger-pagination-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHBfrqhXKjj8BRrs20CB4YhnJs9TNnnfg9cWJjc3MDMlZkGBCT_nQmd1zbSHJHUep6Uo1dWS89ITt1_J_IkVcQ3i6v7-abg7-JHBECpItr0duAopL2ANI6qrSPAIuWe8zlHOvy1ymaYA/s640/page-navigation-widget-for-blogger-pagination-in-blogger.png" width="640" /></a></div><br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat Awesome Page Navigation Widget</div><br />
Berikut ini adalah kode-kode yang di gunakan untuk membuat Awesome Page Navigation Widget Untuk Blogger Dengan Scroll<br />
<br />
The CSS<br />
<br />
<pre class="brush:css;">.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaV2hMRr2uXatqQb47SuDDWfBFprxz5fxzE3tQUWoJ28ksv_gzDQ6sWxeGBARnR5aU60QUiVHKfbFq7vuYglvOMx20apFV4GgcdyBe-S3nbJz2ITci-i3FpNS9XiOSEbkZBzv0CsAkquE/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}</pre><br />
The JavaScript<br />
<br />
<pre class="brush:javascript;"><script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/Awesome%20Page%20Navigation%2001.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/Awesome%20Page%20Navigation%2000.js' type='text/javascript'/></pre><br />

Awesome Page Navigation Widget Untuk Blogger Dengan Scroll

A wesome Page Navigation Widget Untuk Blogger Dengan Scroll adalah widget Navigasi halaman dan membantu pembaca Anda untuk melompat dari sat...

Baca selengkapnya »

New Facebook Recommendation Bar Untuk Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tzQ1zq9fQrKYte3ysEv_cK2blAVNc0DIsaVZk4s8et7XgMtxluW3gkU3_iNMeXrBgZ5yHnbSToI2AkDMqD2jVClVmyuHel0wY3tR8Iu6jE3YnYGh1I1OIt7m4t_8AcPQAIG7xHPMnQ/s1600/tes.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tzQ1zq9fQrKYte3ysEv_cK2blAVNc0DIsaVZk4s8et7XgMtxluW3gkU3_iNMeXrBgZ5yHnbSToI2AkDMqD2jVClVmyuHel0wY3tR8Iu6jE3YnYGh1I1OIt7m4t_8AcPQAIG7xHPMnQ/s1600/tes.png" /></a></div><span class="awal">D</span>alam perjumpaan kali ini saya akan berbagi sebuah tutorial dan untuk tutorial kali ini saya beri judul <a href="http://otowebsite.blogspot.com/2012/09/new-facebook-recommendation-bar-untuk.html">New Facebook Recommendation Bar Untuk Blogger</a>. Ini sebenarnya Updatean dari artikel sebelumnya yang berada di tutorial <a href="http://otowebsite.blogspot.com/2012/07/tambahkan-facebook-recommendation-bar.html" target="_blank">Tambahkan Facebook Recommendation Bar Untuk Blogger</a>.<br />
<br />
Karna artikel tersebut sekarang sudah tidak berjalan dengan sempurna untuk itu saya update tutorialnya disini. Jika Anda sebelumnya sudah membaca artikel sebelumnya maka saya tidak perlu lagi menjelaskan untuk apa dan fungsi widget Facebook Recommendation Bar bila di pasang di blogger Anda.<br />
<br />
Facebook Rekomendasi Bar Ini adalah Plugins Beta. <br />
Dalam tutorial ini, kita pergi untuk belajar cara menginstal Facebook Bar Rekomendasi di Blog Blogger. Widget ini lebih bermanfaat untuk mengarahkan lalu lintas dari Facebook dan sejenisnya dengan instan dan posting terkait.<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</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxMnOD0-o3zRCVAek4oy2kEspRpi3EeLTcnxo9q-gWdNrBKFAE9y7avRIW7sEKXuvVwD-KsvlflYTRiWakPDeoMPA_9OiDAoRHkCTaN0O8ES9-GHYEHEDWJE6KpbEWsZfBiSXRBWe1g/s1600/demo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxMnOD0-o3zRCVAek4oy2kEspRpi3EeLTcnxo9q-gWdNrBKFAE9y7avRIW7sEKXuvVwD-KsvlflYTRiWakPDeoMPA_9OiDAoRHkCTaN0O8ES9-GHYEHEDWJE6KpbEWsZfBiSXRBWe1g/s1600/demo.jpg" /></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 INSTAL WIDGET FACEBOOK RECOMMONDATIONS BAR DI BLOGGER?</div><br />
1. Pertama Tambahkan kode berikut sebelum kode <b><head></b><br />
<br />
<blockquote class="tr_bq"><br />
<b:if cond='data:blog.pageType == "item"'><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta content='article' property='og:type'/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta expr:content='data:blog.title' property='og:site_name'/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta expr:content='data:blog.pageName' property='og:title'/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:if cond='data:blog.postImageThumbnailUrl'><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></b:if><br />
<b:else/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta expr:content='data:blog.title' property='og:title'/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta content='website' property='og:type'/><br />
</b:if><br />
<meta expr:content='"en_US"' property='og:locale'/><br />
<meta expr:content='data:blog.canonicalUrl' property='og:url'/><br />
</blockquote><br />
2. Kedua Pergi ke <a href="https://developers.facebook.com/docs/reference/plugins/recommendationsbar/" target="_blank">Halaman Resmi Facebook Rekomendasi Bar</a>.<br />
<br />
3. Lansung klick tombol <b>Get Code</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoccMTaOJb0w0iUCWOrE1pzmZO8qfRZE-JUWTS_Vc7Oj_8YU1jxEZdGOigNNLRS3GtXu63xYIo33e79vG_TWP4Mru3GXBLvH1tpSoQ5pwyUFxu-Wu6s7LXNwjjGlAWQzm_3QoATzUA1g/s1600/f1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoccMTaOJb0w0iUCWOrE1pzmZO8qfRZE-JUWTS_Vc7Oj_8YU1jxEZdGOigNNLRS3GtXu63xYIo33e79vG_TWP4Mru3GXBLvH1tpSoQ5pwyUFxu-Wu6s7LXNwjjGlAWQzm_3QoATzUA1g/s1600/f1.png" /></a></div><br />
4. Klick Tautan <b>buat aplikasi baru.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTEQYpGQo4pDwdIVNpKX3MCgtRB-m3O3cIXBkxAIJJ4lSvBhELwCfjTwyX-ZVXkTemsD5tZW8czB1GnnciguKB03p4Ja2IDdnWFEH5d9mTWo4Ny148g6z_XG952wxebcNfUEj_tfLS9g/s1600/f2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTEQYpGQo4pDwdIVNpKX3MCgtRB-m3O3cIXBkxAIJJ4lSvBhELwCfjTwyX-ZVXkTemsD5tZW8czB1GnnciguKB03p4Ja2IDdnWFEH5d9mTWo4Ny148g6z_XG952wxebcNfUEj_tfLS9g/s1600/f2.png" /></a></div><br />
5. Masukkan <b>Nama App</b> dengan Judul Blog Anda dan <b>URL Web</b> dengan URL Blog Anda, seperti seperti di bawah ini dan klik tombol <b>Lanjutkan</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhD58fEb1YF8PCVdEWFXKsfE9JG5Op2EqIFhrmsQ6gU0c3XEFM5Gq4-6TGwpoaLDfhhi7ik6EWiu9hxUHVmaSorpGi34cI0KKdsAe1tebijLl7ZxaBaS5cTu0mpP7o8pG_vXwHIsG6Dg/s1600/f3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhD58fEb1YF8PCVdEWFXKsfE9JG5Op2EqIFhrmsQ6gU0c3XEFM5Gq4-6TGwpoaLDfhhi7ik6EWiu9hxUHVmaSorpGi34cI0KKdsAe1tebijLl7ZxaBaS5cTu0mpP7o8pG_vXwHIsG6Dg/s1600/f3.png" /></a></div><br />
6. Masukkan Kode Captcha dengan benar dan klik tombol <b>Kirim</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgia7woK6Zvx32Y0TiDIfu79nZ0OSwn3v1NUIdN-nZhiQHaHWLQMrQP3lZhL-tPSSpp8Fil5-pd51Y2oZQUxDvFfTNLFqARSvWWlw317Ltkvwh3KoZg4y4qUpfsEpm8q03RrzZu52I3JQ/s1600/f4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgia7woK6Zvx32Y0TiDIfu79nZ0OSwn3v1NUIdN-nZhiQHaHWLQMrQP3lZhL-tPSSpp8Fil5-pd51Y2oZQUxDvFfTNLFqARSvWWlw317Ltkvwh3KoZg4y4qUpfsEpm8q03RrzZu52I3JQ/s1600/f4.png" /></a></div><br />
7. Kemudian Klik Tombol <b>Get Code</b> sekali lagi.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtqgF_ZytSslYIEj9DS65pY23slcwDlwQEqL1vofYKyV2Dlhfr5_cC2UamGxg6h0fEOM1_kdbpo-Hfzdrq_puZJk54uALOs4qNXYsH06BFizmSh1Qt1aQyqL85J8rNmXbiYAMBYJ9Cg/s1600/f6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtqgF_ZytSslYIEj9DS65pY23slcwDlwQEqL1vofYKyV2Dlhfr5_cC2UamGxg6h0fEOM1_kdbpo-Hfzdrq_puZJk54uALOs4qNXYsH06BFizmSh1Qt1aQyqL85J8rNmXbiYAMBYJ9Cg/s1600/f6.png" /></a></div><br />
8. Salin kode JavaScript Pertama SDK (Kode Kotak Pertama) dan Encode Kode tersebut menggunakan Alat <a href="http://otowebsite.blogspot.com/2012/03/parse-kode-html-atau-script.html" target="_blank">Parse Kode Script atau HTML</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HSPXBG-a3ggkGWZsQrmrKKF9KJcY1ymKsUFtRdW_McQghLJbuhOHbbtCytB6n-iSVb8pZyRo_H2tY947mOFZNRr40eCl2srYjxc8jJKLsVpfy1tx7ld_-l1DsMC1zGx-iXfxyUd3zg/s1600/f5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HSPXBG-a3ggkGWZsQrmrKKF9KJcY1ymKsUFtRdW_McQghLJbuhOHbbtCytB6n-iSVb8pZyRo_H2tY947mOFZNRr40eCl2srYjxc8jJKLsVpfy1tx7ld_-l1DsMC1zGx-iXfxyUd3zg/s1600/f5.png" /></a></div><br />
9. Masuk ke akun <b>Blogger</b> Anda >> Pilih Template >> <b>Edit HTML</b> .<br />
<br />
10. Centang <input checked="" id="expandWidgets" style="font-size: small;" type="checkbox" /><b>Expand Template Widget</b> >> <b>Backup Template Anda</b>.<br />
<br />
11. Cari kode <b><body></b> dan letakkan kode yang Anda dapatkan tadi tepat di atasnya. (Bila kesulitan mencari kode HTML klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a>)<br />
<br />
12. Kustomisasi <b>Facebook Rekomendasi Bar</b>:<br />
Anda dapat menyesuaikan pengaturan Facebook Rekomendasi Bar<br />
<br />
Cari kode <b><data:post.body/></b> dan menempatkan kode berikut setelah kode <data:post.body/><br />
<br />
<blockquote class="tr_bq"><b:if cond='data:blog.pageType == "item"'><div class="fb-recommendations-bar" data-trigger="onvisible" expr:data-href="data:post.url" data-read-time="<span style="background-color: yellow;">30</span>" data-action="like" data-side="<span style="background-color: #45818e;">right</span>" expr:data-site="data:blog.homepageUrl" data-num-recommendations="<span style="background-color: #38761d;">2</span>"></div></b:if></blockquote><br />
<b>Keterangan:</b><br />
<ul><li>Angka <span style="background-color: yellow;">30</span> menunjukkan widget Facebook Recommendation Bar akan muncul setelah 30 detik.</li>
<li>Anda dapat mengatur berapa banyak artikel untuk ditampilkan. Dengan meningkatkan atau menurunkan nilai <span style="background-color: #38761d;">2</span></li>
<li>Anda dapat memutuskan lokasi plugin. Secara default itu muncul di bagian bawah  <span style="background-color: #45818e;">right</span> = kanan sudut halaman Anda. Anda menetapkan mengapung ke ke left = kiri.</li>
</ul><br />
13. Simpan template.<br />
<br />
Sekarang Anda bisa menikmati widget <a href="http://otowebsite.blogspot.com/2012/09/new-facebook-recommendation-bar-untuk.html">New Facebook Recommendation Bar Untuk Blogger</a> ini!

New Facebook Recommendation Bar Untuk Blogger

D alam perjumpaan kali ini saya akan berbagi sebuah tutorial dan untuk tutorial kali ini saya beri judul New Facebook Recommendation Bar Un...

Baca selengkapnya »

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 »

Oto Website

Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger

Awesome Page Navigation Widget Untuk Blogger Dengan Scroll

New Facebook Recommendation Bar Untuk Blogger

Cara Tambah Sintaks Highlighter V3 di Blogger

Membuat Query Loader Page Di Blogger

Tambahkan Custom Facebook Like Box Untuk Blogger

Entri Populer

Arsip Blog