Oto Website: Blogger Widgets

jQuery Slide Show Lembut Untuk Blogger

Menampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada dunia, sehingga semua pengunjung blog kita akan melihat semua gambar yang kita pamerkan pada blog tersebut. Dan untuk tutorial kali ini <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan membahas dan berbagi tentang gambar slider yang bertema '<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a>'. 
<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a> memiliki efek yang lebih menarik dari slider sebelumnya, karna gambar slider ini memiliki lebih dari satu efek yang berbeda-beda ketika pergantian gambar. 
Untuk lebih jelasanya silahkan lihat demo berikut! 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7pw3-ew7AiP59VN4CENclL7_sDnpslMNsyM1kYxgo0TlB46-fTnPXc__24JSVZAmV6ghn3ulMCr8xG7xEYogyPA2yvDh3kzDrVr4zjjj5Ogfg-10P3yiWLgUiqBxSPv-fR_aMMzdDyw/s1600/otowebsite-slide.png" /></a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
 
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/jQuery%20Slide%20Show%20Lembut.html" target="_blank">Lihat Demo</a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat</div>
 
Untuk cara membuatnya sendiri sebenarnya kita harus menambahkan dua kode berbeda, tapi disini Saya telah menjadikannya satu script mudah tanpa harus Mengedit HTML Anda. 
 
Cara membuatnya Anda hanya cukup ikuti langkah berikut: 
 
1. Login ke Akun Blogger Anda. 
2. Pada Dasbord pilih Tata Letak > Tambah Gadget. 
3. Pilih HTML/JavaScript. 
4. Lalu Copy kode berikut dan letakkan pada element tadi. 
 
<blockquote class="tr_bq">
<style> 
.nivoSlider { 
 position:relative; 
} 
.nivoSlider img { 
 position:absolute; 
 top:0px; 
 left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
 position:absolute; 
 top:0px; 
 left:0px; 
 width:100%; 
 height:100%; 
 border:0; 
 padding:0; 
 margin:0; 
 z-index:60; 
 display:none; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
 display:block; 
 position:absolute; 
 z-index:50; 
 height:100%; 
} 
/* Caption styles */ 
.nivo-caption { 
 position:absolute; 
 left:0px; 
 bottom:0px; 
 background:#000; 
 color:#fff; 
 opacity:0.8; /* Overridden by captionOpacity setting */ 
 width:100%; 
 z-index:89; 
} 
.nivo-caption p { 
 padding:5px; 
 margin:0; 
} 
.nivo-caption a { 
 display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
/* Gaya arah Nav (Next & Prev) */ 
.nivo-directionNav a { 
 position:absolute; 
 top:45%; 
 z-index:99; 
 cursor:pointer; 
} 
.nivo-prevNav { 
 left:0px; 
} 
.nivo-nextNav { 
 right:0px; 
} 
/* Gaya Control nav (1,2,3...) */ 
.nivo-controlNav a { 
 position:relative; 
 z-index:99; 
 cursor:pointer; 
} 
.nivo-controlNav a.active { 
 font-weight:bold; 
} 
table { 
 border-collapse:separate; 
 border-spacing:0; 
} 
caption, th, td { 
 text-align:left; 
 font-weight:normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
 content:""; 
} 
blockquote, q { 
 quotes:"" ""; 
} 
/* Tags HTML5 */ 
header, section, footer, 
aside, nav, article, figure { 
 display: block; 
} 
a, a:visited { 
 color:#2d3536; 
 text-decoration:none; 
 border-bottom:1px dotted #826a4d; 
} 
a:hover, a:active { 
 color:#9e805c; 
 text-decoration:none; 
} 
#slider-wrapper { 
    background:url(https://code-otowebsite.googlecode.com/svn/trunk/slider.png) no-repeat; 
    width:494px; 
    height:310px; 
    margin:0 auto; 
    padding-top:23px; 
    margin-top:50px; 
} 
#slider { 
 position:relative; 
    width:430px; 
    height:250px; 
    margin-left:32px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/loading.gif) no-repeat 50% 50%; 
} 
#slider img { 
 position:absolute; 
 top:0px; 
 left:0px; 
 display:none; 
} 
#slider a { 
 border:0; 
 display:block; 
} 
.nivo-controlNav { 
 position:absolute; 
 left:163px; 
 bottom:12px; 
 background: #000000; 
 -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    padding: 3px; 
    border: 2px solid #CCC; 
    opacity: 0.7; 
    z-index: 99; 
 } 
 .nivo-controlNav:hover{opacity: 1;} 
.nivo-controlNav a { 
 display:block; 
 width:22px; 
 height:22px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/bullets.png) no-repeat; 
 text-indent:-9999px; 
 border:0; 
 margin-right:0px; 
 float:left; 
} 
.nivo-controlNav a.active { 
 background-position:0 -22px; 
} 
.nivo-directionNav a { 
 display:block; 
 width:35px; 
 height:65px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/arrows.png) no-repeat; 
 text-indent:-9999px; 
 border:0; 
} 
a.nivo-nextNav { 
 background-position:-35px 0; 
 right: -40px; 
} 
a.nivo-nextNav:hover{right: -41px;} 
a.nivo-prevNav { 
 left:-40px; 
} 
a.nivo-prevNav:hover{left: -41px;} 
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
} 
.nivo-directionNav a{top: 40%;} 
.clear { 
 clear:both; 
} 
</style> 
    
<div id="wrapper"> 
<div id="slider-wrapper"> 
<div class="nivoSlider" id="slider"> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpbLesS9GAj7-y_RSytHFSOmnsuSAvn74H5-sklS3cT4TOWRJqi0-3hPCeACYSwypTubLYdhOsgQ7U5mcGJx3KV5P6-5ue_DRIluy-6ZxFmg2YY6HGg8mHzyn4SNQUWrfkCPdojxXrg/s1600/OtoWebsite-bedugul.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYinTFF-H1OtdKNLHhzINm06h3-7XFeLLy59H_SI2UCL9lHr2gO5qHVaxV6aCrc05HG9rmf5jR-XRgncKiGoRkFGOjb7Bp3VthQy0_Uesngq2ODMgfF8V9i9E-stroVo4udf7t3jbbmw/s1600/OtoWebsite-gunung+takuban+perahu.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lgl-7Kcv7EKejN-_7rTnCaJeJ7ZdMUkIGkhfDpuXEWk8l3F_zjI5Ur9kiYCjl1N-5sxFNTwsAR9GJPM9o-80mBbwJa34iOJ1KXBmzgmHMzAvTv7UbRFd7_O6loEAZ65VmUjMMoJ4Cw/s1600/OtoWebsite-raja+ampat.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRKnLIQNT4PE3lrJYQCBJzbp1ULM88HLfCqWw9AyALFhmhk8rCk3xIT0yPgSZY0oBRCbho1zPnvwplvv5xRkrO7JGsLIwTEgRB75geX4zMUPEhwK84kyDvWHKUzRjyEMtYYmB-2p7dA/s1600/OtoWebsite-watu+ulo.jpg" /> 
</div> 
</div> 
</div> 
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery-1.4.3.min.js" type="text/javascript"></script> 
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(window).load(function() { 
        $('#slider').nivoSlider({directionNavHide:false}); 
    }); 
    </script></blockquote>
 
<ul>
<li>Keterangan: Tag yang di blok kuning adalah Url gambar, silahkan Anda ganti dengan Url gambar Anda sendiri.</li>
</ul>
5. Simpan Widget. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
 
Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a>, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan <a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a> maka silahkan ajukan pertanyaan Anda dalam komentar.

jQuery Slide Show Lembut Untuk Blogger

M enampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada duni...

Baca selengkapnya »

Scrolling Recent Posts Widget For Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81BVmR8s8c-7RE1BR_HDrp7rYuEWxIjgGkbUiazLK83G-d7dOXggxWhqScVdQRMphXNh6t6l2FoPVK6xCNTVgWaL7IkoKM2gC7_yo5npxx1jgDoGTl-pud5ccGt_MVhElT4H-rhdHgw/s1600/pp.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81BVmR8s8c-7RE1BR_HDrp7rYuEWxIjgGkbUiazLK83G-d7dOXggxWhqScVdQRMphXNh6t6l2FoPVK6xCNTVgWaL7IkoKM2gC7_yo5npxx1jgDoGTl-pud5ccGt_MVhElT4H-rhdHgw/s1600/pp.PNG" width="277" /></a></div>
S<a href="http://otowebsite.blogspot.com/2012/12/scrolling-recent-posts-widget-for.html" target="_blank">crolling Recent Posts Widget For Blogger</a> adalah widget terbaik untuk memamerkan postingan aatau artikel terbaru dari blog Anda widget ini dilengkapi dengan efek gulir menggunakan jQuery, yang dapat meraih perhatian pengunjung yang sangat banyak dari blog/situs Anda. 
 
Saya pernah berbagi widget <a href="http://otowebsite.blogspot.com/2012/12/scrolling-recent-posts-widget-for.html">Scrolling Recent Posts Widget For Blogger</a> ini di postingan Oto Website tetapi beberapa dari Anda menghadapi beberapa masalah ketika menginstalnya, itulah mengapa di sini saya berbagi <a href="http://otowebsite.blogspot.com/2012/12/scrolling-recent-posts-widget-for.html">Scrolling Recent Posts Widget For Blogger</a> di postingan terbaru ini, yang bekerja dengan efek Spy jQuery , ini adalah fitur terbaik dari ini widget ini. 
 
Widget ini dilengkapi dengan judul posting, thumbnail pos, tanggal ketika pos itu diterbitkan dan jumlah komentar pada post. Jadi bahwa semua pilihan di atas sepenuhnya disesuaikan, sehingga Anda dapat dengan mudah menyesuaikan widget ini. Di atas adalah beberapa fitur widget ini sekarang mari kita lihat kode apa saja yang di gunakan untuk membuat widget ini. Pemasang widget ini sama dengan pemasang widget sebelumnya. 
 
Sebelumnya widget ini sudah saya guanakan anda bisa melihatnya di widget blog ini, jika widget ini sudah tidak saya guanakan silahkan Anda lihat dulu demonya di bawah ini. 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Live Demo Widget ▼</div>
 
<div style="background-color: white; border: 2px #3e81c4 dashed; padding: 10px; text-align: left;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="http://dl.dropbox.com/u/63702052/recentpost.html" style="height: 405px; width: 100%;"></iframe></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Kode yang di gunakan</div>
<div style="color: #3d85c6;">
jQuery </div>
 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script></blockquote>
 
<div style="color: #3d85c6;">
JavaScrip yang di gunakan</div>
 
<blockquote class="tr_bq">
<style type="text/css" media="screen"> 
 
</style> 
 
<script language='JavaScript'> 
imgr = new Array(); 
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png"; 
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png"; 
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png"; 
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png"; 
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png"; 
showRandomImg = true; 
boxwidth = 255; 
cellspacing = 6; 
borderColor = "#232c35"; 
bgTD = "#000000"; 
thumbwidth = 50; 
thumbheight = 50; 
fntsize = 15; 
acolor = "#666"; 
aBold = true; 
icon = " "; 
text = "comments"; 
showPostDate = true; 
summaryPost = 40; 
summaryFontsize = 10; 
summaryColor = "#666"; 
icon2 = " "; 
numposts = 10; 
home_page = "http://www.otowebsite.blogspot.com/"; 
limitspy=4; 
intervalspy=4000; 
</script> 
 
<div id="otowebsite-widget"> 
<script src='http://www.otowebsite.16mb.com/recent-posts-spy.js' type='text/javascript'></script> 
</div></blockquote>
 
Cukup sekian untuk kali ini, jika ada pertanyaan silahkan tinggalkan komentar Anda.

Scrolling Recent Posts Widget For Blogger

S crolling Recent Posts Widget For Blogger adalah widget terbaik untuk memamerkan postingan aatau artikel terbaru dari blog Anda widget i...

Baca selengkapnya »

Spinning Social Icons With CSS3 For Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmHzR7i2Q7S5mh5YqAQ0DFsdVwsBy8IFgw9Ops1_0Bigv5OT9Mc8Z0oASenL8umqzlTkezxe9WvtEg8ypO7uOdqvKalZJMDB7oG7sHuOHvzcPeqOFHYHvLhwlBBqaHgcaG_t2yxgIgw/s1600/ss.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmHzR7i2Q7S5mh5YqAQ0DFsdVwsBy8IFgw9Ops1_0Bigv5OT9Mc8Z0oASenL8umqzlTkezxe9WvtEg8ypO7uOdqvKalZJMDB7oG7sHuOHvzcPeqOFHYHvLhwlBBqaHgcaG_t2yxgIgw/s320/ss.jpg" width="320" /></a></div>
Oto Website selalu ingin mencoba membuat sesuatu yang berbeda yang akan bisa menarik pengunjung/pembaca untuk membaca tutorial O.W. 
Untuk hari ini dan dalam Artikel ini kita akan mencoba bermain dengan beberapa sifat sederhana CSS3 seperti -moz-transform dan membuat widget sosial yang sederhana dengan CSS3 widget effect. 
Widget ini pasti akan membantu Anda untuk meningkatkan jumlah pelanggan sosial juga akan menarik pembaca Anda dan diperebutkan perhatian pengunjung. Widget ini membawa mereka berputar (berputar) beberapa derajat dan ketika mouse di atasnya mereka kembali ke posisi semula, efek ini disebabkan oleh properti CSS3 yang telah saya sebutkan di atas. Untuk melihat demo dan cara menambahkan <a href="http://otowebsite.blogspot.com/2012/11/spinning-social-icons-with-css3-for.html" target="_blank">Spinning Social Icons With CSS3 For Blogger</a> silahkan Anda lihat di bawah ini. 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Tambah Spinning Social Icons With CSS3 For Blogger</div>
 
<ul>
<li>Memilih gaya.</li>
<li>Salin kode.</li>
<li>Ganti nama pengguna saya dengan Anda.</li>
<li>Pergi ke Blogger Dasbor >> Laman.</li>
<li>Klik Tambah Gadget.</li>
<li>Pilih HTML / JavaScript.</li>
<li>Paste kode Anda dan simpan. </li>
</ul>
 
Gaya 1 : 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/GY1.html" style="height: 100px; width: 100%;"></iframe> 
 
<blockquote class="tr_bq">
<style>p#OW_socialicons img { 
/* Spinning Social Icons Widget By Oto Website */ 
-moz-transition: all 0.4s ease-in-out; 
-webkit-transition: all 0.4s ease-in-out; 
-o-transition: all 0.4s ease-in-out; 
-ms-transition: all 0.4s ease-in-out; 
transition: all 0.4s ease-in-out; 
} 
 
p#OW_socialicons img:hover { 
-moz-transform: rotate(120deg); 
-webkit-transform: rotate(120deg); 
-o-transform: rotate(120deg); 
-ms-transform: rotate(120deg); 
transform: rotate(120deg); 
} 
 
/* Spinning Social Icons Widget By Oto Website */ 
</style> 
 
 
 
<center> 
<a href="http://www.facebook.com/dekrif/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QMXWwccRSfHf3-F06oa_28CbWTYq6rcpHwtrmyCfp6WuM2hH8_WHY1LVtN4Hsic7mBMX08c3RuEr7Y7Vvupt55_LDwGSUhby11wrNkkDEF9fE41xRcR_pjvCZOzMOibp51MSpvFxDA/s1600/otowebsite.blogspot.com-facebook.png" /></a> 
<a href="http://www.twitter.com/otowebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWzcMVEx9he0dqz5-q5NcIxKdrdN-UMF7nRXQHVGa8xTiOAdfjtKfaHLKl4zDrIW5d5wFGXV6vKnc1DfTtyi0OJQg3qaBk4a-6U1pGreUdbUCowDD6pBv8pviHtW0SWLDNL-fKQUZPA/s1600/otowebsite.blogspot.com-twitter.png" /></a> 
<a href="https://plus.google.com/115780777398536909642"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEP1FlUc-swTB9nEvzahWYRDohiV9yp9Y9g2i6DE2LxmI13yyn7POKuFEY4peCHEdXKoMRbMVBqplXNuwIXyY92pvc7duim-xC1QcDwkvA2CMKmYhCD065GVxJV-VtjTyFLq10jEN8cA/s1600/otowebsite.blogspot.com-google_plus.png" /></a> 
<a href="http://www.feeds.feedburner.com/otowebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXj1SY0DgTlApy2KECXjyZZr-NvZOCbb92vDNqQnZUMf6rtKvJL146XiePeXtg70wYBCyullv2mwWCVnw29MItrnCLsJxcMDLzbhrxkkrpOuIgjMLj8LMhbRVLn0wopXhja0xk2fw4Q/s1600/otowebsite.blogspot.com-rss.png" /></a> 
<a href="https://www.youtube.com/OtoWebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqTvC3ucJv9dJh3KiU8N9st7SGpopAXp_5kpxTPG_Vb-Kqa13V4c1mPsGMvGkAXQYKxGhJsIaIZ2ToIOsd3AyJHCY0AcVtwPXx2ue9NWCZcGmlQClZUyM8rrezhMy6LfRT9w3qSzAfg/s1600/otowebsite.blogspot.com-youtube.png" /></a> 
</center></blockquote>
 
 
Gaya 2 : 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/GY2.html" style="height: 100px; width: 100%;"></iframe> 
 
<blockquote class="tr_bq">
<style>p#OW_socialicons img { 
 /* Spinning Social Icons Widget By Oto Website */ 
    -moz-transition: all 0.8s ease-in-out; 
    -webkit-transition: all 0.8s ease-in-out; 
    -o-transition: all 0.8s ease-in-out; 
    -ms-transition: all 0.8s ease-in-out; 
    transition: all 0.8s ease-in-out; 
} 
 
p#OW_socialicons img:hover { 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 
 
/* Spinning Social Icons Widget By Oto Website */ 
</style>  
 
 
 
<center> 
    <a href="http://www.facebook.com/dekrif/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QMXWwccRSfHf3-F06oa_28CbWTYq6rcpHwtrmyCfp6WuM2hH8_WHY1LVtN4Hsic7mBMX08c3RuEr7Y7Vvupt55_LDwGSUhby11wrNkkDEF9fE41xRcR_pjvCZOzMOibp51MSpvFxDA/s1600/otowebsite.blogspot.com-facebook.png" /></a> 
    <a href="http://www.twitter.com/otowebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWzcMVEx9he0dqz5-q5NcIxKdrdN-UMF7nRXQHVGa8xTiOAdfjtKfaHLKl4zDrIW5d5wFGXV6vKnc1DfTtyi0OJQg3qaBk4a-6U1pGreUdbUCowDD6pBv8pviHtW0SWLDNL-fKQUZPA/s1600/otowebsite.blogspot.com-twitter.png" /></a> 
    <a href="https://plus.google.com/115780777398536909642"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEP1FlUc-swTB9nEvzahWYRDohiV9yp9Y9g2i6DE2LxmI13yyn7POKuFEY4peCHEdXKoMRbMVBqplXNuwIXyY92pvc7duim-xC1QcDwkvA2CMKmYhCD065GVxJV-VtjTyFLq10jEN8cA/s1600/otowebsite.blogspot.com-google_plus.png" /></a> 
    <a href="http://www.feeds.feedburner.com/otowebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXj1SY0DgTlApy2KECXjyZZr-NvZOCbb92vDNqQnZUMf6rtKvJL146XiePeXtg70wYBCyullv2mwWCVnw29MItrnCLsJxcMDLzbhrxkkrpOuIgjMLj8LMhbRVLn0wopXhja0xk2fw4Q/s1600/otowebsite.blogspot.com-rss.png" /></a> 
    <a href="https://www.youtube.com/OtoWebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqTvC3ucJv9dJh3KiU8N9st7SGpopAXp_5kpxTPG_Vb-Kqa13V4c1mPsGMvGkAXQYKxGhJsIaIZ2ToIOsd3AyJHCY0AcVtwPXx2ue9NWCZcGmlQClZUyM8rrezhMy6LfRT9w3qSzAfg/s1600/otowebsite.blogspot.com-youtube.png" /></a> 
</center></blockquote>
 
Gaya 3 : 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/GY3.html" style="height: 100px; width: 100%;"></iframe> 
 
<blockquote class="tr_bq">
<style>p#OW_socialicons img { 
 /* Spinning Social Icons Widget By Oto Website */ 
    -moz-transition: all 0.8s ease-in-out; 
    -webkit-transition: all 0.8s ease-in-out; 
    -o-transition: all 0.8s ease-in-out; 
    -ms-transition: all 0.8s ease-in-out; 
    transition: all 0.8s ease-in-out; 
} 
 
p#OW_socialicons img:hover { 
    -moz-transform: rotate(-360deg); 
    -webkit-transform: rotate(-360deg); 
    -o-transform: rotate(-360deg); 
    -ms-transform: rotate(-360deg); 
    transform: rotate(-360deg); 
} 
 
/* Spinning Social Icons Widget By Oto Website */ 
</style> 
 
 
 
<center> 
    <a href="http://www.facebook.com/dekrif/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QMXWwccRSfHf3-F06oa_28CbWTYq6rcpHwtrmyCfp6WuM2hH8_WHY1LVtN4Hsic7mBMX08c3RuEr7Y7Vvupt55_LDwGSUhby11wrNkkDEF9fE41xRcR_pjvCZOzMOibp51MSpvFxDA/s1600/otowebsite.blogspot.com-facebook.png" /></a> 
    <a href="http://www.twitter.com/otowebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWzcMVEx9he0dqz5-q5NcIxKdrdN-UMF7nRXQHVGa8xTiOAdfjtKfaHLKl4zDrIW5d5wFGXV6vKnc1DfTtyi0OJQg3qaBk4a-6U1pGreUdbUCowDD6pBv8pviHtW0SWLDNL-fKQUZPA/s1600/otowebsite.blogspot.com-twitter.png" /></a> 
    <a href="https://plus.google.com/115780777398536909642"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEP1FlUc-swTB9nEvzahWYRDohiV9yp9Y9g2i6DE2LxmI13yyn7POKuFEY4peCHEdXKoMRbMVBqplXNuwIXyY92pvc7duim-xC1QcDwkvA2CMKmYhCD065GVxJV-VtjTyFLq10jEN8cA/s1600/otowebsite.blogspot.com-google_plus.png" /></a> 
    <a href="http://www.feeds.feedburner.com/otowebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXj1SY0DgTlApy2KECXjyZZr-NvZOCbb92vDNqQnZUMf6rtKvJL146XiePeXtg70wYBCyullv2mwWCVnw29MItrnCLsJxcMDLzbhrxkkrpOuIgjMLj8LMhbRVLn0wopXhja0xk2fw4Q/s1600/otowebsite.blogspot.com-rss.png" /></a> 
    <a href="https://www.youtube.com/OtoWebsite/"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqTvC3ucJv9dJh3KiU8N9st7SGpopAXp_5kpxTPG_Vb-Kqa13V4c1mPsGMvGkAXQYKxGhJsIaIZ2ToIOsd3AyJHCY0AcVtwPXx2ue9NWCZcGmlQClZUyM8rrezhMy6LfRT9w3qSzAfg/s1600/otowebsite.blogspot.com-youtube.png" /></a> 
</center></blockquote>
 
Saya harap Anda suka dengan tutorial kali ini, Jangan lupa untuk memfollow <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> agar Anda tidak ketinggalan tutorial lainnya dan dari tempat saya mengucapkan selamat menikmati. Salam Blogger!

Spinning Social Icons With CSS3 For Blogger

O to Website selalu ingin mencoba membuat sesuatu yang berbeda yang akan bisa menarik pengunjung/pembaca untuk membaca tutorial O.W. Untu...

Baca selengkapnya »

Tambahkan Custom Facebook Like Box Untuk Blogger

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

Tambahkan Custom Facebook Like Box Untuk Blogger

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

Baca selengkapnya »

Widget Jam animasi flash Untuk Blogger

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

Widget Jam animasi flash Untuk Blogger

W idget Jam animasi flash adalah salah satu widget paling umum untuk widget blogger dan webmaster di letakkan di situs Web mereka / blog ada...

Baca selengkapnya »

Beautiful Email Subscription Forms Untuk Blogger

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

Beautiful Email Subscription Forms Untuk Blogger

B erlangganan via email adalah cara yang sangat populer untuk berlangganan setiap blog / situs dan mendapatkan update langsung di kotak emai...

Baca selengkapnya »

Tambahkan Widget Berlangganan Di bawah Posting Blogger

Pada tutorial kali ini saya akan berbagi sebuah Widget Berlangganan Di bawah Posting Blogger Anda. 
Widget ini pasti akan meningkatkan jumlah subscribers sosial Anda. Anda menulis posting yang baik dan mengharapkan lebih banyak jumlah pelanggan maka widget ini pasti akan membantu Anda. Widget ini berisi formulir berlangganan email, facebook seperti tombol, twitter dan beberapa ikon sosial yang indah di bagian kanan dari widget. Widget ini dapat diinstal dalam satu langkah, Anda hanya perlu copy yang saya berikan dan paste kode di template Anda. Jadi mari kita lihat bagaimana untuk menambahkannya ke blog blogger Anda! 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUdVYp1sUmMh3zCZM97imXqJ1pOxQFxubi2UPPh9VqFGsF1oq_w_FQxbAPfDdXA17TOmANBlaRXMZSnV-JKvfSo3M_3zjT41N8H3B-GSCXTEUx0jtnyGYKrTexWNWz1YarHTs-LcRhAA/s1600/email-subscription-widget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUdVYp1sUmMh3zCZM97imXqJ1pOxQFxubi2UPPh9VqFGsF1oq_w_FQxbAPfDdXA17TOmANBlaRXMZSnV-JKvfSo3M_3zjT41N8H3B-GSCXTEUx0jtnyGYKrTexWNWz1YarHTs-LcRhAA/s1600/email-subscription-widget-for-blogger.png" /></a></div> 
<hr color="#3e81c4" />Cara Tambahkan Widget Berlangganan Di bawah Posting Blogger 
<hr color="#3e81c4" /> 
1. Login ke akun blogger Anda. 
2. Pada Dasbor klick Template ➨ Edit HTML. 
3. Centang <input checked="" id="expandWidgets" style="font-size: small;" type="checkbox" /> Expand Template Widget ➨ Backup template Anda. 
4. Sekarang temukan kode <data:post.body/> (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>) 
5. Lalu letakkan kode berikut ini di bawah kode tersebut (Bila menemukan kode tersebut lebih dari dua maka pilih yang ke dua) 
 
<blockquote class="tr_bq"><b:if cond='data:blog.pageType == "item"'> 
<style type="text/css"> 
form.feedburner { 
    margin: 20px 0 0; 
    display: block; 
    clear: both; 
} 
.OW { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVaBJ2yzVY1TOoS05_kgWjg74J0SMAxhhP2D_WZ6vXUOXX2g_4BHzFkMTXY5wX4Dy7vh5gpHU5fizDVQBZKNTHH6_hpbbS8FSBulEPndN_BAz6FTv5Mcp1krLY_h0QDD8yS7ZEuS-pg/s1600/otowebsite.blogspot.com-email-icon.png) no-repeat scroll 4px center transparent; 
    padding: 7px 15px 7px 35px; 
    color: #666; 
    font-weight: bold; 
    text-decoration: none; 
    border: 1px solid #D3D3D3; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: 1px 1px 2px #CCC inset; 
    -webkit-box-shadow: 1px 1px 2px #CCC inset; 
    box-shadow: 1px 1px 2px #CCC inset; 
} 
.OWsubmit { 
    color: #666; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 6px 15px; 
    border: 1px solid #D3D3D3; 
    cursor: pointer; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -goog-ms-border-radius: 4px; 
    border-radius: 4px; 
    background: #fbfbfb; 
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); 
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' 
    #FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); 
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
} 
#OW-widget { 
    -moz-border-radius: 10px 10px 10px 10px; 
    -webkit-border-radius: 10px 10px 10px 10px; 
    -goog-ms-border-radius: 10px 10px 10px 10px; 
    border-radius: 10px; 
    background: none repeat scroll 0 0 transparent; 
    border: 1px solid #D3D3D3; 
    padding: 8px; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    -webkit-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    width: 480px; 
    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75); 
    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75); 
    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D; 
} 
#OW-widget:hover { 
    background: none repeat scroll 0 0 #FFF; 
    -moz-box-shadow: 1px 1px 2px #CCC inset; 
    -webkit-box-shadow: 1px 1px 2px #CCC inset; 
    box-shadow: 1px 1px 2px #CCC inset; 
} 
#OW-widget td { 
    padding: 3px 0; 
} 
</style> 
<center> <div id='OW-widget'> 
 <div id='emailwidget'> 
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> 
  <tbody> 
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> 
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> 
    
     Get free daily email updates! 
    
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> 
     <input name='uri' type='hidden' value='otowebsite'/> 
     <input name='loc' type='hidden' value='en_US'/> 
     <input class='OWstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/> 
     <input alt='' class='OWsubmit' title='' type='submit' value='Submit'/> 
    </form> 
   </td> 
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> 
    
     Follow us! 
    
    <a href='http://feeds.feedburner.com/otowebsite' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknkcC8qSF0btPOnYr_-dU5R_ZAPxqvPsHw_SJarWz4Tn4GzbEwTcFA_GEh8-FG7Xc30F4ZQYfGKI7L7xw55NTI6AH1bAjUAIQgOMUXCEW4F_9bJarHgyoiEYiwXwoTqk2gUPL73Obgg/s1600/otowebsite.blogspot.com-rss.png'/></a> 
    <a href='http://twitter.com/otowebsite' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oJsDnuM77vPm8mKYPZcS8P5BJhWSQEmmXlyNlveGYNJKoMguT6cXIknflT0f0KTk8fwNTgG-_JBWnfsI7HJjfjVpCc0045Tlnt7xm019DEcJ1xmoCMQeXqq9T7UW9R26sNyR1V0jSg/s1600/otowebsite.blogspot.com-twitter.png'/></a> 
    <a href='http://www.facebook.com/dekrif' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4FFmWNUuFX5lrq37JLla449zgvs4VCPqWMtUTxiZ-ygjFFt61d-8WOd-VySbvvX_M3H6o4o_CgBqjLGCiLFhA8K1V9KRme2mkl8a0Lr1-PJ7S2JU0VWziGAAfOTkBw_zQL6po5CbbyA/s1600/otowebsite.blogspot.com-fb.png'/></a> 
    <a href='https://plus.google.com/115780777398536909642/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlgsn-gKK618nW-XcRrUo-rGwY0xJogvxvz3muTHisuGtV1ICKMZnSxg8fNWoVp0WDeBTLTWjqMXDSFvzxYGbQLeaO03ZCGlzhKubDHLZEhs175UnUpYlNTiCBDXDfMLOkb1MSIV1hw/s1600/otowebsite.blogspot.com-gplus.png'/></a> 
   </td> 
  </tr> 
  </tbody> 
  </table> 
  <div align='right'> 
   <a href='http://www.otowebsite.blogspot.com/' style='text-decoration: none;' target='_blank'>[Get this widget]</a> 
  </div> 
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true"> 
  </iframe> 
  <a class='twitter-follow-button' href='http://twitter.com/otowebsite' rel='nofollow'></a> 
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> 
 </div> 
</div> 
</center> 
</b:if></blockquote> 
Keterangan: 
<ul><li>Ganti semua (tiga) otowebsite dengan Nama Pengguna Feedburner</li>
<li>Ganti semua (dua) dekrif dengan Nama Pengguna Facebook</li>
<li>Ganti semua (dua) otowebsite dengan Nama Pengguna Twitter</li>
<li>Ganti  115780777398536909642 dengan ID Google +.</li>
<li>Anda dapat menyesuaikan widget ini dengan menggunakan <a href="http://otowebsite.blogspot.com/2012/07/ow-html-editor.html" target="_blank">OW - HTML Editor</a>.</li>
</ul>5. Akhirnya menyimpan template. 
 
Sekarang Anda dapat melihat widget ini di bawah setiap postingan blog Anda. 
 
Jika Anda masih mendapatkan masalah tentang widget ini maka jangan ragu untuk menyebutkannya melalui komentar, saya akan membalas sesegera mungkin.

Tambahkan Widget Berlangganan Di bawah Posting Blogger

P ada tutorial kali ini saya akan berbagi sebuah Widget Berlangganan Di bawah Posting Blogger Anda. Widget ini pasti akan meningkatkan juml...

Baca selengkapnya »

Twitter Followers Box Auto Hide

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVvBDyGw_ZBbUixgTakx1EOXpUhIRhQbb5RzJUjWUA19AGXlunUTE-arwfhaEHg2O2mu9qIX8gGENg9nrdXFvQMgDiT7Vu09dde0oDYcenyw96EZYuJbDQla2neHWSnP6-OqtKKPwfmg0/s1600/follow+box.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/AVvXsEhVvBDyGw_ZBbUixgTakx1EOXpUhIRhQbb5RzJUjWUA19AGXlunUTE-arwfhaEHg2O2mu9qIX8gGENg9nrdXFvQMgDiT7Vu09dde0oDYcenyw96EZYuJbDQla2neHWSnP6-OqtKKPwfmg0/s1600/follow+box.png" /></a></div>Tidak perlu di jelaskan lagi apa itu twitter dan apa ke untungannya bila di pasang di Blog/Situs Anda. 
Kegunaan memasang twitter box memanglah sangat banyak di antaranya untuk mendapatkan banyak pengikut di blog/situs, untuk memodifikasi blog/situs ataupun untuk mempercantik blog/situs. 
 
Sebelumya Oto Website pernah membahas tentang twitter di blog/situs ya itu <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-oto-website.html" target="_blank">Twitter Followers Box Oto Website Generator</a>. 
 
Untuk kali ini masih sama dengan memasang twitter di blog/situs dan kali ini temanya adalah <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-auto-hide.html">Twitter Followers Box Auto Hide</a>. 
Widget ini ada perbedaan dari <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-oto-website.html" target="_blank">Twitter Followers Box Oto Website Generator</a> perbedaanya adalah widget ini akan melayang di bagian kanan blog/situs Anda dan widget ini juga memiliki fitur Auto Hide sama dengan <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>. 
 
<hr color="#3e81c4" />Cara Memasang Twitter Followers Box Auto Hide di Blogger 
<hr color="#3e81c4" /> 
Untuk cara memasangnya pada situs/blog Anda juga cukup mudah, silahkan ikuti langkah berikut ini. 
 
1. Login ke akun blogger Anda. 
 
2. Sekarang kita akan menginstal kode jQuery 1.6.1 - Lewati tahap ini bila di template Anda sudah terinstal jQuery 1.6.1 dan silaahkan lansung menuju tahap no 6. 
 
3. Pada Dasbor klick Template ➨ Edit HTML. 
 
4. Lalu cari kode </head> dan letakkan kode jQuery berikut tepat di atasya ( Bila kesulitan mencari kode HTML silahkan klick <a href="http://otowebsite.blogspot.com/2012/02/cara-cepat-mencari-kode-html.html" target="_blank">DISINI</a> ) 
 
<blockquote class="tr_bq"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"type="text/javascript"></script></blockquote> 
5. Simpan Template. 
 
6. Sekarang menambah gadget, caranya : Pergi ke Dasbor klick Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script. 
 
7. Lalu letakkan kode berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script. 
 
<blockquote class="tr_bq"><script type="text/javascript"> 
// 
</script> 
<style type="text/css">.owlikebox{background: url("http://3.bp.blogspot.com/-erfRWcXzmgU/TwFo5Voq2oI/AAAAAAAACLA/9sdI9M7iwhg/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 275px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.owlikebox div{border:none;position:relative;display:block;}.owlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.owlikebox span a{color: #808080;text-decoration:none;}.owlikebox span a:hover{text-decoration:underline;}</style><div class="owlikebox" style=""><div><div id="twitterfanbox"><script type="text/javascript">fanbox_init("otowebsite");</script> 
</div id="twitterfanbox">By <a href="http://www.otowebsite.blogspot.com/">Oto Website</a> / <a href="http://otowebsite.blogspot.com/2012/04/static-twitter-pop-out-fan-follow-me.html">+Get This!</a></div></div></blockquote> 
<blockquote class="tr_bq">Keterangan : Ganti otowebsite dengan username twitter Anda.</blockquote> 
8. Simpan. 
 
Sekarang Anda bisa lihat hasilnya pada blog/situs Anda. 
 
Sekian untuk kali ini, mudah-mudahan anda suka dengan tutorial di atas !!!

Twitter Followers Box Auto Hide

T idak perlu di jelaskan lagi apa itu twitter dan apa ke untungannya bila di pasang di Blog/Situs Anda. Kegunaan memasang twitter box meman...

Baca selengkapnya »

10 Beautiful Page Navigation Widgets For Blogger

Widget navigasi dapat membantu pembaca Anda untuk dengan mudah menavigasi melalui halaman blogger Anda.Sebelumya saya telah berbagi navigasi halaman dengan judul <a href="http://otowebsite.blogspot.com/2012/07/colorful-blogger-numbered.html" target="_blank">Colorful Blogger Numbered Pagenavigation</a> dan kali ini saya akan berbagi <a href="http://otowebsite.blogspot.com/2012/07/10-beautiful-page-navigation-widgets_17.html">10 Beautiful Page Navigation Widgets For Blogger</a>. 
Menggunakan navigasi halaman akan membantu Anda pergi ke halaman yang dipilih. 
Di postingan kali ini saya telah menyediakan generator yang siap lansung di pakai dan akan membuat pekerjaan anda lebih mudah karna widget ini akan secara otomatis terinstal pada blog/situs Anda. 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYl4Ggx1GNp7Y43vJ1NrGRlZn7Kfo8ZmEc8JYgAEb9mo5c-CSGVACAOBTtpwtH-ad7nVhfK3Ok8RRgObZvoPBQ0xxNsBP1bPaRu3ykHStwQSMNQqumbMDqnx8aM6eEiv5p6Yn3NfTkZU/s1600/otowebsite-page-navigation-for-bloger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYl4Ggx1GNp7Y43vJ1NrGRlZn7Kfo8ZmEc8JYgAEb9mo5c-CSGVACAOBTtpwtH-ad7nVhfK3Ok8RRgObZvoPBQ0xxNsBP1bPaRu3ykHStwQSMNQqumbMDqnx8aM6eEiv5p6Yn3NfTkZU/s320/otowebsite-page-navigation-for-bloger.png" width="304" /></a></div> 
 
<hr color="#3e81c4" />Cara Menambah Navigasi Halaman Widget Untuk Blogger? 
<hr color="#3e81c4" /> 
Sebagaimana disebutkan di atas saya telah menyediakan generator widget untuk navigasi halaman sehingga akan mempermudah Anda.Silahkan ikuti langkah di bawah untuk mulai Cara Menambah Navigasi Halaman Widget Untuk Blogger Anda. 
 
1. Pertama-tama Anda harus log in ke account blogger anda 
2. Pilih style dari 10 gaya 
3. Sesuaikan pengaturan sesuai keinginan 
4. Jika sudah tekan tombol Generate. 
5. Akhirnya menekan tombol Add to Blogger. 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/10page-navigations.html" style="height: 785px; width: 100%;"></iframe> 
6. Sekarang widget Ini akan ditambahkan ke tata letak halaman Anda 
Tarik widget tersebut tepat di bawah posting (Seperti gambar di bawah) 
<div style="text-align: center;">Penempatan widget</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSVgTaPv3UTGM7ONpehb-F4wdgwxKSZespzkZYe9yXhcHIbC0POrgpAazkl7dRl8VChm06CYdMojND8DIbuomWMPVZ2qPCQ6Av0LwacsDS8FsF3QQZhSUSk2tqAfEwh3oNtIAYmjnjE4/s1600/Blogger++++Edit+Tata+Letak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSVgTaPv3UTGM7ONpehb-F4wdgwxKSZespzkZYe9yXhcHIbC0POrgpAazkl7dRl8VChm06CYdMojND8DIbuomWMPVZ2qPCQ6Av0LwacsDS8FsF3QQZhSUSk2tqAfEwh3oNtIAYmjnjE4/s400/Blogger++++Edit+Tata+Letak.png" width="400" /></a></div> 
7. Terakhir klick Simpan. 
 
Sekarang Anda bisa lihat sendiri hasilya pada halaman blog Anda. 
 
Saya rasa cukup untuk kali ini, mudah-mudahan Anda senang dengan widget ini. 
 
Silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article di atas!

10 Beautiful Page Navigation Widgets For Blogger

W idget navigasi dapat membantu pembaca Anda untuk dengan mudah menavigasi melalui halaman blogger Anda.Sebelumya saya telah berbagi navigas...

Baca selengkapnya »

Twitter Followers Box Oto Website Generator

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGdCRUG6veBR4tAxzbvfAhGOA1uuOGY_4RsqifqMvgcA66XcnNiZylsyn1Xr5Rkm0mY8BQiummMVi85KXcqd1-QaSX_qn1K343M6qFivengzTtN6IIlmJfPC1UtMpJzxH-I2BEvJgRgo/s1600/follow+box.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/AVvXsEhIGdCRUG6veBR4tAxzbvfAhGOA1uuOGY_4RsqifqMvgcA66XcnNiZylsyn1Xr5Rkm0mY8BQiummMVi85KXcqd1-QaSX_qn1K343M6qFivengzTtN6IIlmJfPC1UtMpJzxH-I2BEvJgRgo/s1600/follow+box.jpg" /></a></div>Twitter Followers Box atau kotak pengikut di twitter adalah salah satu sarana yang di sediakan oleh twitter khusus untuk di pasang di blog/situs kita. 
 
Dengan menampilkan atau memasag Widget Followers Box ini di blog/situs kita maka kita juga akan mempermudah pengunjung untuk menikuti kita di akun twitter kita. 
 
Seperti contohnya adalah akun twitter yang telah saya buat khusus untuk fans blog ini '<a href="http://twitter.com/otowebsite" target="_blank">@otowebsite</a>' bila anda mengikuti atau follow akun twitter tersebut maka Anda akan mendapat ke'untungan tersendiri, contohya : Anda akan mengetahui semua kegiatan <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> seperti bila ada postingan baru dari blog ini dan semua kegiatan blog ini di twitter. 
 
Blog/situs lain mungkin sudah banyak sekali yang membahas tentang widget ini, tapi gak ada salahnya dong kalo blog ini ingin share kepada Anda yang belum tau. 
 
Karna <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> ingin tampil beda dengan blog lainnya maka kali ini saya tidak menyuruh anda untuk mengcopy kode script, jika Anda ingin memasang widget Twitter Follow Box ini Anda cukup memasukkan username anda pada kotak box berikut, itulah perbedaannya <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> dari blog lain, hehehe . . . 
 
Untuk alat kali ini saya beri nama <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-oto-website.html">Twitter Followers Box Oto Website Generator</a> sama seperti judul di atas, oke kalo begitu silahkan Anda isi form dengan username anda, lalu tekan Generate dan Add to Blogger untuk menginstalnya secara otomatis ke blog Anda! 
 
Dan setelah itu jangan lupa meninggalkan kesan dan pesan anda di komentar tentang <a href="http://otowebsite.blogspot.com/2012/07/twitter-followers-box-oto-website.html">Twitter Followers Box Oto Website Generator</a>! 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/Twitter%20Followers%20Box%20Oto%20Website%20Generator%20by%20Oto%20Website.html" style="height: 280px; width: 100%;"></iframe> 
Sekian semoga alat di atas dapat membantu dan lebih mempermudah anda untuk memasang widget Twitter Followers Box!

Twitter Followers Box Oto Website Generator

T witter Followers Box atau kotak pengikut di twitter adalah salah satu sarana yang di sediakan oleh twitter khusus untuk di pasang di blog/...

Baca selengkapnya »

Feedburner FeedCount Widget Generator

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPARm35Q1pPiw7pcm7QMnA7e84z3Llp9TL56CuHuvUqaDwi1qkjs85SFepKeSdB9z6VoyCogR6JMVhXvU8JulIKTKZ577gWuXUxAHy2iiTR1w7-Hl5QEKmdnnJjZNjVkrPDxrEULEnwA0/s1600/feed.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPARm35Q1pPiw7pcm7QMnA7e84z3Llp9TL56CuHuvUqaDwi1qkjs85SFepKeSdB9z6VoyCogR6JMVhXvU8JulIKTKZ577gWuXUxAHy2iiTR1w7-Hl5QEKmdnnJjZNjVkrPDxrEULEnwA0/s640/feed.jpg" width="640" /></a></div>Feedburner FeedCount adalah widget widget terbaik untuk menunjukkan jumlah subscribers dari para member atau pelanggan dari blog atau situs anda. FeedCount adalah tombol animasi cukup kecil yang menunjukkan jumlah feedburner pelanggan web atau situs Anda. Feedburner telah memberi kita kemampuan untuk menyesuaikan gadget ini seperti yang anda inginkan tetapi mereka tidak  menawarkan banyak warna yang sesuai untuk blog Anda 
Dan kali ini saya membuatkan tools widget generator yang bisa Anda gunakan.  Dengan menggunakan tool ini Anda dapat menambahkan gadget dengan hanya satu click. Anda ingin mengubah latar belakang gadget FeedCount Anda warna dan font warna maka Anda tidak perlu pergi ke account feedburner Anda anda bisa langsung menggunakan tool Feedburner FeedCount Widget Generator. Show ini mari kita lihat bagaimana menggunakan alat ini. 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmWPIWRK-WpzwMCN1OFwlMhoJ01wfph96RuALk1dNWeOumFya_3Xd-nDhQzY1GH56eQm6Sr_r3oWusBco0_Pyb60TBEpeDJqY4-d4vpGC5K8qSjuPXj0uQrF5bf7mTajXmXfrDhPD2PA/s1600/z.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmWPIWRK-WpzwMCN1OFwlMhoJ01wfph96RuALk1dNWeOumFya_3Xd-nDhQzY1GH56eQm6Sr_r3oWusBco0_Pyb60TBEpeDJqY4-d4vpGC5K8qSjuPXj0uQrF5bf7mTajXmXfrDhPD2PA/s320/z.bmp" width="320" /></a></div> 
<hr color="#3e81c4" /> 
<div style="text-align: center;">Cara Menggunakan Alat Ini</div><div style="text-align: center;"> 
</div><hr color="#3e81c4" /> 
Pertama login ke akun Blogger Anda, lalu kembali kemari lagi. 
Dalam textarea pertama masukkan Nama Pengguna FeedBurner 
Dalam area teks kedua Anda dapat mengubah warna latar belakang dari widget FeedCount Anda menggunakan colorpicker.Select warna menggunakan color picker dan klik tombol kecil di sudut bawah kanan color picker. 
Dalam area teks ketiga Anda dapat mengubah warna font, ikuti langkah di atas untuk mengubah warna font. 
Terakhir tekan Generate and Add To Blogger. 
 
<hr color="#3e81c4" /> 
<div style="text-align: center;">Feedburner FeedCount Widget Generator</div> 
<hr color="#3e81c4" /> 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/FeedCount%20Widget%20Generator.html" style="height: 370px; width: 100%;"></iframe> 
 
Nah saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau generator di atas!

Feedburner FeedCount Widget Generator

F eedburner FeedCount adalah widget widget terbaik untuk menunjukkan jumlah subscribers dari para member atau pelanggan dari blog atau situs...

Baca selengkapnya »

Colorful Blogger Numbered Pagenavigation

Akhirnya saya berhasil membuat satu generator untuk blog atau situs. 
 
Biasanya untuk membuat satu generator paling cepat menghabiskan waktu kira-kira dua jam, sementara saya menghabiskan waktu untuk membuat generator ini menghabiskan waktu lima jam lebih, gila . . . 
makanya generator paling enak di pelajarinnya belakangan aja, karna paling ruwet alias susah, hehehe . . . 
Dan ahhirnya saya berhasil membuat satu generator yang bisa sobat gunakan lho, ckckck . . . 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dobz6lPemPZwPVicNCJ1k6iz8NdDUExv_x4WM0a28InqxRsH8UT1w5OjKyfDdfmjqS2yd2Tg5on-zM2O8kFrN0rGwLapp8XeB69GKoRDw8hBoQ6IA917BCzCNoBXnVLYvVzOvo7yp_w/s1600/Blogger+Page+Navigation+Widgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dobz6lPemPZwPVicNCJ1k6iz8NdDUExv_x4WM0a28InqxRsH8UT1w5OjKyfDdfmjqS2yd2Tg5on-zM2O8kFrN0rGwLapp8XeB69GKoRDw8hBoQ6IA917BCzCNoBXnVLYvVzOvo7yp_w/s320/Blogger+Page+Navigation+Widgets.png" width="287" /></a></div> 
Untuk kali ini saya akan share masih di blog Oto Website, dan kali ini temanya adalah Colorful Blogger Numbered Pagenavigation (sok bahasa inggris, hehehe . . . ) 
 
Widget kali ini adalah widget navigasi yang berada di bagian paling bawah blog anda, bisa di bilang widget ini menggantikan tombol next atau privious dengan page numbered angka, dan warnaya sendiri juga keren. 
 
Mungkin tidak perlu berlama-lama lagi ya !!! 
 
Seperti yang saya bilang di atas, bahwa saya telah membuat satu tools yang bisa sobat gunakan, dan kali ini sobat tidak perlu meng copy kode script yang saya berikan sobat cukup gunakan tool yang telah saya siapkan untuk sobat. 
 
Jika sobat berhasil atau menggunakan widget ini jangan lupa untuk komentarnya agar saya tau bahwa anda menggunakannya jadi saya tidak rugi membuat generator ini selama lima jam lebih! 
 
Nah lansung aja, sobat gunakan generator di bawah ini: 
 
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/Colorful%20Numbered%20Pagenavigation.html" style="height: 630px; width: 100%;"></iframe> 
 
Widget Colorful Blogger Numbered Pagenavigation harus berada di bawah postingan. Jika widget tersebut tidak berada di bawah postingan maka sobat cukup memindahkannya di bawah postingan sehingga menjadi seperti ini: 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSVgTaPv3UTGM7ONpehb-F4wdgwxKSZespzkZYe9yXhcHIbC0POrgpAazkl7dRl8VChm06CYdMojND8DIbuomWMPVZ2qPCQ6Av0LwacsDS8FsF3QQZhSUSk2tqAfEwh3oNtIAYmjnjE4/s1600/Blogger++++Edit+Tata+Letak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSVgTaPv3UTGM7ONpehb-F4wdgwxKSZespzkZYe9yXhcHIbC0POrgpAazkl7dRl8VChm06CYdMojND8DIbuomWMPVZ2qPCQ6Av0LwacsDS8FsF3QQZhSUSk2tqAfEwh3oNtIAYmjnjE4/s400/Blogger++++Edit+Tata+Letak.png" width="400" /></a></div> 
Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Colorful Blogger Numbered Pagenavigation

A khirnya saya berhasil membuat satu generator untuk blog atau situs. Biasanya untuk membuat satu generator paling cepat menghabiskan wakt...

Baca selengkapnya »

Touch Me Sharing Widget

<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-6VFbKksA-8CoPjEazatiPAG9C7oa7IEKH3j9jauFDtY7njyBTgdqyrhFH-yaSduOlVTjQHIYBoejjwNFkCQEWhs_de8L1baOmaGVcgNkEw-6Wtmj51Vg_5JFzbx_N6_orKFeISVyfo/s1600/touch+me+sw.jpg" /></a></div>Happy blogging !!! 
Sekarang dalam kesempatan yang biasa-biasa blog Oto Website akan update postingan kembali, dengan article yang keren punya dan kali ini blog Oto Website akan share tentang <a href="http://otowebsite.blogspot.com/2012/06/touch-me-sharing-widget.html">Touch Me Sharing Widget</a>. 
Widget kali ini sangat cantik dan sangat mudah pemasangannya, yang namanya di pasang di widget pasti gampang kan? mungkin kita gak perlu berlama-lama lagi berbincang-bincangnya, bagi sobat yang belum paham dengan widget kali ini sobat bisa lansung melihat demonya! 
 
<div style="text-align: center;"><a class="button" href="http://www.otowebsite.co.cc/" target="_blank">Lihat Demo</a></div><div style="text-align: center;"> 
</div>Nah kalo udah paham sekarang mari kita bahas cara memasang <a href="http://otowebsite.blogspot.com/2012/06/touch-me-sharing-widget.html">Touch Me Sharing Widget</a> di blog sobat : 
 
1. Login ke akun blogger sobat. 
 
2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (di bagian manapun sobat ingin widget ini muncul) 
 
3. Lalu sobat pilih HTML/Java Scrip ( terserah mau di beri judul atau tidak) ➨ Setelah itu copy kode berikut dan paste atau letakkan di dalamnya! 
 
<div class="md8"><style> 
/*--------Touch Me Sharing Widget ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(http://otowebsite.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all; 
cursor:pointer; 
} 
 
.touchme a.googleplus { 
background-position: 0px -58px; 
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
} 
 
.touchme a.twitter { 
background-position: 0px -290px; 
} 
.touchme a.twitter:hover { 
background-position: 0px -232px; 
} 
.touchme a.facebook { 
background-position: 0px -406px; 
} 
.touchme a.facebook:hover { 
background-position: 0px -348px; 
} 
 
.touchme a.rss { 
background-position: 0px -174px; 
} 
.touchme a.rss:hover { 
background-position: 0px -116px; 
} 
 
</style> 
 
<div class='touchme'> 
 
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a> 
 
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a> 
 
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a> 
 
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a> 
 
</div></div> 
4. Simpan. 
 
Keterangan : 
<ul><li>Ganti YOUR RSS LINK dengan Feed burner link sobat.</li>
<li>Ganti YOUR GOOGLE PROFILE LINK dengan Google+ URL sobat.</li>
<li>Ganti YOUR FACEBOOK LINK dengan Facebook URL sobat.</li>
<li>Ganti YOUR TWITTER LINK dengan Twitter Profile URL sobat.</li>
</ul>Sekian. 
 
Saya rasa cukup untuk postingan atau article <a href="http://otowebsite.blogspot.com/2012/06/touch-me-sharing-widget.html">Touch Me Sharing Widget</a>, mudah-mudahan article ini bisa bermanfaat! 
 
Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas!

Touch Me Sharing Widget

H appy blogging !!! Sekarang dalam kesempatan yang biasa-biasa blog Oto Website akan update postingan kembali, dengan article yang keren pu...

Baca selengkapnya »

Widget Profil Twitter Keren Part 2

Sebelumnya blog Oto Website pernah membahas tentang <a href="http://otowebsite.blogspot.com/2012/05/wiget-profil-twitter-keren.html" target="_blank">Widget Profil Twitter Keren Part 1</a>, dan kali ini blog Oto Website akan share tentang widget yang sama dengan versi berbeda ya itu Widget Profil Twitter Keren Part 2. Fungsinya juga sama dengan part 1 ya itu untuk menampilkan tweet kita di widget tersebut. Untuk contohnya Widget Profil Twitter Keren Part 2 sobat bisa lihat gambar di bawah ini. 
<div style="text-align: center;">Contoh Widget Profil Twitter Keren Part 2</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWBvrHaMFDquNiCFfsu-2KykqiiX0bVoISs5DQt_MkK9FgWQtBGD_fU3z0-oGhlRB4IhqriG72ykd9UOcuoQkyHPapehAOG5mnCyo5crnpSJA9yfi6ouxndnCurUOjpYIW2FHu61oBFA/s1600/twit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWBvrHaMFDquNiCFfsu-2KykqiiX0bVoISs5DQt_MkK9FgWQtBGD_fU3z0-oGhlRB4IhqriG72ykd9UOcuoQkyHPapehAOG5mnCyo5crnpSJA9yfi6ouxndnCurUOjpYIW2FHu61oBFA/s1600/twit.png" /></a></div>Okelah kalo begitu sekarang mari kita bahas cara memasangnya : 
 
1. Login ke akun blogger sobat. 
 
2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (di bagian mana saja sobat ingin menampilkan widget ini) 
 
3. Lalu sobat pilih HTML/Java Scrip ➨ Setelah itu copy kode berikut dan paste atau letakkan di dalamnya! 
 
<div class="md2"><div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXLPd1zjrVV6m2Z2sso6i65Y12x0Qv22JsW4AJPlkYyZW0LbcM449OCw6uoIgNFagB0QH-8j5ZEPM7OmCtn43bfQSw92yUTX2wWGrPgMrhzRFaQ32eTme7vjdDN0aZl7ExgecfjLd7uY/s1600/otowebsite.blogspot.com-twitter.png" width="64" height="64" alt="Twitter icon" /></div><h2 class="tut">My Tweets</h2></div><div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38eO_j0tzYE6wM7whJmrzw8GAyghyphenhyphenx1H9_HdBxSlSWcwwV0LzQTdKcCN4FmvmzNYnP7XZM0ggsKhtcVvlXU75xzueNzrBdAccPlTMG6yEvPqSUhRYrZUWqEOWJeDG9e0Q49bckw6YOkM/s1600/otowebsite.blogspot.com-loading.gif" width="16" height="11" alt="Loading.." /></div><div id="scroll"></div></div><style>/* CSS Document */h2.tut{/* This is the "MY TWEETS" title */    color: white;font-family: "Myriad Pro", Arial, Helvetica, sans-serif;font-size: 16px;padding: 12px 0 0 58px;text-transform: uppercase;/* The CSS3 text-shadow property */    text-shadow: 2px 1px 6px #333;}#twitter-ticker{/* Styling the ticker */    width: 300px;height: 300px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xM7ktwv0JGYRB9_ieqlMnF7w_nzmomnWgENtwPsCXX1pnI5UKr2eOUrRSPlIvCWCczsjBPsaJ7mmo1BdaWdWQqmFz7W5amXrUsqK1ZKXOjTDef9wUtzLYqQjVlQA2lRdHsyKmTAZZXo/s1600/otowebsite.blogspot.com-slickbg.png) no-repeat #f5f5f5;color: #666666;display: none;/* Rounded corners */    -moz-border-radius: 10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;text-align: left;}#tweet-container{/* This is where the tweets are inserted */    height: 230px;width: auto;overflow: hidden;}#twitIcon{/* Positioning the icon holder absolutely and moving it to the upper-left */    position: absolute;top: -25px;left: -10px;width: 64px;height: 64px;}#top-bar{height: 45px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhilTshK_sMy3brZsoMB03nHgDTy9jVNCemE0TNawP1VyQ1V_lCcQAUUlbHD5vS2R3fAodpc9XkRAznaCmK3zuS5oYKcjCa-xinqd-n979f-W51dhqGecx54QwD2MihQY_g2-enYo06UBQ/s1600/otowebsite.blogspot.com-top_bar.png) repeat-x;border-bottom: 1px solid white;position: relative;margin-bottom: 8px;/* Rounding the top part of the ticker, works only in Firefox unfortunately */    -moz-border-radius: 6px 6px 0 0;}.tweet{/* Affects the tweets */    padding: 5px;margin: 0 8px 8px;font-family: calibri;border: 1px solid #F0F0F0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKSzIxpZ5KKZ2AR7j3e8WHztsk-i5pJS0rMp5nFWAH8oYBurXvbsgUJ5rxGuHbH6d_n9LtbagVnjfP4ywlylUcfookYgHbzC4-TQOk_lU35Jd1Yex7YeyAgYhp6cQaPm48rYUfVWqipgs/s1600/otowebsite.blogspot.com-transparent.png);width: auto;overflow: hidden;}.tweet .avatar, .tweet .user, .tweet .time{float: left;}.tweet .time{text-transform: uppercase;font-size: 10px;color: #AAAAAA;white-space: nowrap;}.tweet .avatar img{width: 36px;height: 36px;border: 2px solid #eeeeee;margin: 0 5px 5px 0;}.tweet .txt{/* Using the text container to clear the floats */    clear: both;}.tweet .user{font-weight: bold;}a, a:visited{/* Styling the links */    color: #00BBFF;text-decoration: none;outline: none;}a:hover{text-decoration: underline;}#loading{/* The loading gif animation */    margin: 100px 95px;}.jScrollPaneContainer{position: relative;overflow: hidden;z-index: 1;}.jScrollPaneTrack{position: absolute;cursor: pointer;right: 4px;top: 0;height: 100%;background: #ddd;}.jScrollPaneDrag{position: absolute;background: #999;cursor: pointer;overflow: hidden;}.jScrollPaneDragTop{position: absolute;top: 0;left: 0;overflow: hidden;}.jScrollPaneDragBottom{position: absolute;bottom: 0;left: 0;overflow: hidden;}a.jScrollArrowUp{display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowUp:hover{/*background-color: #f60;*/}a.jScrollArrowDown{display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowDown:hover{/*background-color: #f60;*/}a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color: #f00;*/}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.mousewheel.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jScrollPane-1.2.3.min.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/ticker-script.js"></script><script type="text/javascript">var tweetUsers=['otowebsite'];</script></div> 
4. Simpan. 
 
Keterangan : 
Ganti teks warna merah otowebsite dengan usernmae twitter sobat. 
 
Selesai ! 
 
Nah sekian dulu untuk postingan/article Widget Profil Twitter Keren Part 2, semoga bisa bermanfaat untuk sobat semua. 
 
Bagaiman apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas!

Widget Profil Twitter Keren Part 2

S ebelumnya blog Oto Website pernah membahas tentang Widget Profil Twitter Keren Part 1 , dan kali ini blog Oto Website akan share tentang ...

Baca selengkapnya »

Oto Website

jQuery Slide Show Lembut Untuk Blogger

Scrolling Recent Posts Widget For Blogger

Spinning Social Icons With CSS3 For Blogger

Tambahkan Custom Facebook Like Box Untuk Blogger

Widget Jam animasi flash Untuk Blogger

Beautiful Email Subscription Forms Untuk Blogger

Tambahkan Widget Berlangganan Di bawah Posting Blogger

Twitter Followers Box Auto Hide

10 Beautiful Page Navigation Widgets For Blogger

Recommended Post Slide out Widget

Twitter Followers Box Oto Website Generator

Feedburner FeedCount Widget Generator

Colorful Blogger Numbered Pagenavigation

Touch Me Sharing Widget

Widget Profil Twitter Keren Part 2

Entri Populer

Arsip Blog