Oto Website

Tambah Tooltip jQuery Untuk Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DnZ_FXr4ltyCmf_Awt6gRqiIINMq75jy18LrbZCOLlX_NM_HBD5nAaxDDi4187wQu_8DSxx9Kb0HX97p04kopn9CRA56uSbGsUDN9mh6dgaD3s1GmdSWmfhyphenhyphenHtQnf7hH-8l_5W7AVg/s1600/untitled.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DnZ_FXr4ltyCmf_Awt6gRqiIINMq75jy18LrbZCOLlX_NM_HBD5nAaxDDi4187wQu_8DSxx9Kb0HX97p04kopn9CRA56uSbGsUDN9mh6dgaD3s1GmdSWmfhyphenhyphenHtQnf7hH-8l_5W7AVg/s1600/untitled.JPG" /></a></div>
<span class="awal">P</span>lugin tooltip jQuery adalah salah satu alat yang hebat untuk menjelaskan kepada banyak pengunjung dari blog Anda. Anda dapat dengan mudah menerapkan ini ke dalam blog juga sangat mudah untuk menggunakannya.<br />
<br />
Anda dapat menyorot beberapa kata dan menambahkan tooltip kepada mereka, bila ada pengguna melayang pada kata sebuah tooltip mulus akan muncul tepat di atas dari kata disorot dengan tooltip jQuery description.<br />
<br />
Tooltip ini dirancang oleh Nettuts + dan saya telah membagikan ulang ini pada Helper Blogger.Now mari kita lihat bagaimana untuk menambahkannya dan menggunakannya,<br />
<br />
<div style="text-align: center;">
<a class="button" href="http://otowebsite.16mb.com//Tambah%20Tooltip%20jQuery%20Untuk%20Blogger.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">
Tambah Tooltip JQuery Untuk Blogger?</div>
<br />
Seperti yang saya sebutkan di atas instalasi dan penggunaan tooltip sangat mudah, Anda hanya perlu meletakkan beberapa kode dalam template Anda, cukup ikuti langkah-langkah sederhana di bawah ini.<br />
<br />
<hr color="3e81c4" />
<b><span style="color: #3d85c6; font-size: large;">jQuery</span></b><br />
<hr color="3e81c4" />
<br />
<blockquote class="tr_bq">
<span style="background-color: lime;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></span><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery-tooltip.js"></script></blockquote>
<br />
<hr color="3e81c4" />
<b><span style="color: #3d85c6; font-size: large;">CSS</span></b><br />
<hr color="3e81c4" />
<br />
<blockquote class="tr_bq">
.tip {<br />
    width: 212px;<br />
    padding-top: 37px;<br />
    overflow: hidden;<br />
    display: none;<br />
    position: absolute;<br />
    z-index: 500;<br />
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbL9SD3E2wVyRyZJCGq9aATsTn3tgheOxHi80Tn4XatqZxxYgwfP1tvLXYwonAzIKzKH9SDMeUhkywx5_RuEwJZBcJm3o5w_Vpa3n7yJNNiP5TKIJBRfJsaJnSrMMWaB4npby9qSY6hg/s1600/OW_tipTop.png) no-repeat top;<br />
}<br />
.tipMid {<br />
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvA0uig35jt4cRH-MRCUxF8Pis9YiH4y3tF6_bdNvVF2-PDaBhYq3Oz60Szw4uofp4zybOfK8NUaxHPivfn_WEJ_G8A6cT0DYMViVBpFZIlF2rCPBLe0eUSfa0zw-CSG5YA-vqNbB2ig/s1600/OW_tipMid.png) repeat-y;<br />
    padding: 0 25px 20px 25px;<br />
}<br />
.tipBtm {<br />
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm8GPpX0q3efSHVO0pEZNELWq6hfjyCGQbEEWqzAD8Jp4zMbChr3BOEN9Ut9p-AplX6sGGcEQ_RpCM9TymeOy9XPRAdoDwTCsdmvvsuazUB9iersAEH6nSO0h6p7Lyw3_wdW8XS9OeHg/s1600/OW_tipBtm.png) no-repeat bottom;<br />
    height: 32px;<br />
}</blockquote>
<br />
<hr color="3e81c4" />
<b><span style="color: #3d85c6; font-size: large;">Pemanggil</span></b><br />
<hr color="3e81c4" />
<br />
Pada saat menulis atau mengedit postingan Anda letakkan kode berikut untuk memanggil Tooltip<br />
<br />
<blockquote class="tr_bq">
<div class="tTip" title="<span style="background-color: red;"><span style="color: white;">Tambahkan Pesan Tooltip Disini</span></span>"><span style="background-color: red;"><span style="color: white;">Tambahkan Text Anda Disini</span></span></div></blockquote>
Dan jangan lupa untuk merubah teks yang di block merah di atas dengan teks Anda sendiri.

Tambah Tooltip jQuery Untuk Blogger

P lugin tooltip jQuery adalah salah satu alat yang hebat untuk menjelaskan kepada banyak pengunjung dari blog Anda. Anda dapat dengan muda...

Baca selengkapnya »

Update Facebook Sekarang Dengan Emoticons

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhtBswqhS3vLmFzd06MQq1RvU-oGG1tHo10crEdrf05GmrQEY0ZgcyrBuIuAoMSYMOjxCJjqCEOKqt9KEO1wcwXya07kdlCp3gvv-bPSEoYGO1ZgjCrtLHhvOE3WkNt_p-rf_QvlZ5w/s1600/Facebook-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhtBswqhS3vLmFzd06MQq1RvU-oGG1tHo10crEdrf05GmrQEY0ZgcyrBuIuAoMSYMOjxCJjqCEOKqt9KEO1wcwXya07kdlCp3gvv-bPSEoYGO1ZgjCrtLHhvOE3WkNt_p-rf_QvlZ5w/s640/Facebook-logo.jpg" width="640" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJFpNhAbLycVcQBFzypzVkx5Y9xjMMXPXQNukNfEbifXMMsN4B4lPOM5d1OczhOzkIMHnFO0-_nxZ9-zS5H1AqW0yp5mwc53690W-VB6NC_LxHjTaRKUa6nE23egfz9D2xDBn-hA2sA/s1600/original.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJFpNhAbLycVcQBFzypzVkx5Y9xjMMXPXQNukNfEbifXMMsN4B4lPOM5d1OczhOzkIMHnFO0-_nxZ9-zS5H1AqW0yp5mwc53690W-VB6NC_LxHjTaRKUa6nE23egfz9D2xDBn-hA2sA/s640/original.jpg" width="640" /></a></div><span class="awal">M</span>elihat sesuatu yang aneh di feed Facebook Anda belakangan ini?<br />
<br />
Jika Anda melihat proliferasi wajah smiley dan hati dalam komentar teman-teman Anda ', bukan itu Anda belum melihat mereka sebelumnya. Facebook diam-diam meluncurkan kemampuan untuk menambahkan emoticon untuk komentar akhir pekan lalu.<br />
<br />
Jika Anda tidak tahan ikonografi tersebut, mengambil hati dalam kenyataan bahwa pengguna Facebook masih belum dapat menggunakannya dalam pembaruan status sendiri - hanya dalam komentar, yang lebih mudah disembunyikan atau diabaikan.<br />
<br />
Facebook juga tidak membiarkan Anda menambahkan emoticon melalui aplikasi mobile-nya, bahkan dalam komentar. Ini tidak membiarkan Anda menggunakannya dalam obrolan dan aplikasi Messenger, bagaimanapun. Check out gambar di atas untuk contoh jenis penawaran ikon Facebook, ada berbagai lebih luas daripada yang mungkin Anda harapkan, seperti hiu dan penguin.<br />
<br />
Apa yang Anda pikirkan tentang emoticon facebook ? Apakah mereka emoticon tambahan yang berguna untuk komunikasi, atau alasan malas dalam berbahasa? Beri kami tanggapan Anda di komentar - dengan atau tanpa emoticon.

Update Facebook Sekarang Dengan Emoticons

M elihat sesuatu yang aneh di feed Facebook Anda belakangan ini? Jika Anda melihat proliferasi wajah smiley dan hati dalam komentar teman...

Baca selengkapnya »

Social Bookmarking Widget Dengan Tooltips Untuk Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRI0fHOfRiV9En1FP1FVsFwsQF8rUnteaqE2F4UfM3M9t6PaLx33nG6ZvD8rVP4rFMZWB2CWDAgguhJrEzJZ6qcYmzcPEXt4KMpMyiFGKZzEkeqAtDo5V3CBVY2ZbFx0e0l1muUuJx8w/s1600/Social+Bookmarking+Widget+Dengan+Tooltips+Untuk+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRI0fHOfRiV9En1FP1FVsFwsQF8rUnteaqE2F4UfM3M9t6PaLx33nG6ZvD8rVP4rFMZWB2CWDAgguhJrEzJZ6qcYmzcPEXt4KMpMyiFGKZzEkeqAtDo5V3CBVY2ZbFx0e0l1muUuJx8w/s640/Social+Bookmarking+Widget+Dengan+Tooltips+Untuk+Blogger.jpg" width="640" /></a></div>
<span class="awal">W</span>idget sosial bookmark adalah salah satu kebutuhan dari setiap blogger, mengapa Anda selalu melihat gadget seperti ini hampir pada setiap widget bookmark blog ? Social boomark membantu Anda untuk meningkatkan lalu lintas di blog.Jadi hari ini saya akan berbagi widget sosial bookmark yang menakjubkan datang dengan tooltips animasi yang indah, ketika user melayang pada ikon sosial tooltip keluar juga berlaku efek opacity terhadap ikon sosial, peningkatan efek keindahan ini widget. Pencipta widget ini adalah Shareaholic. Sekarang mari kita lihat cara untuk menambahkannya ke blog 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">
Cara Tambah Widget Ini Untuk Blog Anda !!!</div>
Saya telah menciptakan sebuah blogger widget generator untuk widget ini. Ikuti langkah sederhana di bawah ini untuk menambahkan widget ini ke blog Anda. <br />
<br />
Anda harus login ke account blogger Anda terlebih dahulu.<br />
Klik tombol Add to Blogger di bawah ini.<br />
Sekarang Anda akan redirect ke halaman add blogger widget.<br />
Pilih blog Anda dan menambahkan klik pada tombol Add Widget<br />
Tarik widget di bagian bawah tata letak halaman Anda<br />
Terakhir, klik tombol Simpan Pengaturan dan Anda selesai.<br />
<br />
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<div style="text-align: center;">
<input name="widget.content" type="hidden" value="<b:if cond='data:blog.pageType == "item"'> 

<script type="text/javascript">
  var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  var SHRCB_Globals = {"perfoption":"1"};
  </script>

<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

Social Bookmarking Widget Dengan Tooltips Untuk Blogger

W idget sosial bookmark adalah salah satu kebutuhan dari setiap blogger, mengapa Anda selalu melihat gadget seperti ini hampir pada setiap...

Baca selengkapnya »

Percantik Label Blogger Dengan CSS3

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR7WMA6jN_gh9Lzevl0MiL6Y28qXVPIptWaT0d6dkfF1z5VOKeUkYQT9fpg9oBfEzD-C7fu6gXt_-NF0kWkFFIVi8mQaWaxTTxyyKQpmRltAUDW2x1tjTEKoz5BEcDg5sNGYhTCaTDg/s1600/customize-blogger-labels-with-css.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/AVvXsEgtR7WMA6jN_gh9Lzevl0MiL6Y28qXVPIptWaT0d6dkfF1z5VOKeUkYQT9fpg9oBfEzD-C7fu6gXt_-NF0kWkFFIVi8mQaWaxTTxyyKQpmRltAUDW2x1tjTEKoz5BEcDg5sNGYhTCaTDg/s1600/customize-blogger-labels-with-css.jpg" /></a></div>
<span class="awal">D</span>alam perjumpaan kali ini blog Oto Website akan membahas tentang <a href="http://otowebsite.blogspot.com/2012/10/percantik-label-blogger-dengan-css3.html">Percantik Label Blogger Dengan CSS3</a>.<br />
<br />
Untuk cara <a href="http://otowebsite.blogspot.com/2012/10/percantik-label-blogger-dengan-css3.html">Percantik Label Blogger Dengan CSS3</a> ini juga sangatlah mudah, kita hanya perlu menambahkan widget label blog pada sidebar dan menginstal CSS3 ke dalam Template blogger Anda. Untuk hasil dari Percantik Label Blogger Dengan CSS3 bisa Anda lihat pada gambar di samping.<br />
Bila sudah jelas sekarang akan saya berikan kode CSS untuk membuatnya.<br />
<br />
Perhatikan: Disini saya hanya membahas tentang cara membuatnya, bukan cara memasangnya, bila Anda mengalami kesulitan silahkan ajukan pertanyaan Anda di dalam komentar.<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 Percantik Label Blogger Dengan CSS3</div>
<br />
1. Pertama buatlah widget baru untuk menampilkan Label blog Anda.<br />
<br />
2. Lalu letakkan CSS3 berikut ke dalam template blog Anda.<br />
<br />
<span style="font-size: large;"><b>The CSS</b></span><br />
<br />
<pre class="brush:css;">.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}</pre>

Percantik Label Blogger Dengan CSS3

D alam perjumpaan kali ini blog Oto Website akan membahas tentang Percantik Label Blogger Dengan CSS3 . Untuk cara Percantik Label Blog...

Baca selengkapnya »

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 »

Oto Website

Tambah Tooltip jQuery Untuk Blogger

Update Facebook Sekarang Dengan Emoticons

Social Bookmarking Widget Dengan Tooltips Untuk Blogger

Percantik Label Blogger Dengan CSS3

Tambahkan Tombol Social Bookmarking dan Unit Iklan Adsense di Blogger

Awesome Page Navigation Widget Untuk Blogger Dengan Scroll

Entri Populer

Arsip Blog