Tutorial Cara Membuat Widget Icon Burung Terbang Twitter

Cara mebuat widget Burung Twitter terbang  di blog. Agan-agan cuma perlu tambah widget aja, tapi yang bingung itu kode scriptnya itu apa.hehe. Langsung saja caranya sebagai berikut :

1. Login ke blogger.Dashboard.
2. Buka Rancangan - Elemen Laman
3. Tambah Widget - Html/javascript
4. Copy Paste Kode Dibawah ini



<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
    <script type="text/javascript">
    var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJDy3j-bbNwjyf5a2lhzIT3xg5Qogi0yW_FaWRbwAoI5T3Fox8w9fGZKsY43gm9Z-Fy0XbXukl6fi_9rwodgkzc47AaHC-_KNntgsxa30TgK16UXizFMw4hsJFl7MnaixyrA0BgOq6tE/s1600/birdsprite+copy+copy.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/TwitterKamu";var tweetThisText = "Twitter - Twitter kamu https://twitter.com/TwitterKamu/";tripleflapInit();</script>

5. Yang berwarna biru url gambarnya. bisa kamu upload sendiri atau pakai yang sudah saya sediakan

Kalau mau pakai ini pakai kode ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-Qq3L61xqdtFVA3uzIK6jVsE7G2hou23ZY-LBx8oPMvyVyFTuw2c7-guoJgpesTToC1eab0tpecJw89sFyIzwuLtcFmrXGRB7Z9M-MltQjbRaOE9Tu-YHaloQFL__gTZmkMYU_Nh7bI/s1600/birdsprite.png






Atau

Atau pakai ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO6zTIbVtmwtCYYS9ycGHmL8Vrp75OcDEwTB7BP99QZMzDw1offt8JiKTBtEIiYYZSIXkVXzwIxQW3lsumf2IAV1_q0pQ8nNGDyLaADYAVhbzSJc6Ijo344mMxYsfa0TgWOYUVIJBL-SU/s1600/birdsprite+copy+copy.png







6. Kode yang merah ganti nengan Url rwitter Kamu

Selamat mencoba.

Read more

Cara Menyembunyikan Widget/Gadget Facebook Di Kiri

Cara Membuat Wiget/Gadget Facebook di Kiri, sama seperti menyembunyikan Gadget di sebelah kanan. Scriptnya hanya di ubah - ubah sedikit.  Langsung saja di masuk ke tutorialnya saja.

1. Seperti biasa login dulu di Blogger.com
2. Buka Rancangan - Elemen Laman.
3. Tambah Widget/Gatget - Html/Javascript
4. Copy paste kode script di bawah ini



<!-- left/right hidden chatbox byhttp://www.ryuuku-sena.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx7LaqTyD9a_oGGPYZPiQjwQNI7YNb5ueYbL3zBknTGX8XLHSGbCCCJ-WgqeQbOb3_d0E9xfc2akyHbANoKzhQsps_hpdMkmn4M5qtjF7U_EtLzsjanKKDqQTguKpyuuyjDeX0XJh2cwA/s1600/cbred-LEFT+copy4545.png') no-repeat;
}
.hclcontent {
float:left;
border:6px solid #e08200;
background:#ffffff;
padding:5px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

Ganti Tulisan Ini Dengan Script Facebook Atau Widget Lain

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href=http://www.ryuuku-sena.blogspot.com/ target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left/right hidden chatbox by http://ryuuku-sena.blogspot.com/ END -->

5. Ganti tulisan Yang berwarna merah dengan script facebook anda.
6. Yang terakhir simpan. lalu lihat tampilan blog anda sekarang

Read more

Cara menyembunyikan Widget/ Gadget Chatbox ( Buku Tamu ) di kanan

Setelah Memberikan Cara membuat Chatbox (Buku Tamu) . Sekarang saya akan memberikan cara menyembunyikan Widget atau Chat Box (buku tamu) di kanan. Bagi blog yang tidak mempunyai banyak ruang di blognya, pasti cara ini sangat di perlukan, karena Widget-widget yang di tempel di blog hanya mengotori/Mengurangi space di blog. Langsung saja caranya sebagai berikut :

1. Login ke blogger terlebih dahulu.
2. Setelah itu Buka Rancangan - Elemen Laman.
3. Tambah Widget - Html/javascript
4. Copy paste Code berikut di sana

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiGSt_-XQu94tctpngkMwQMfpxENM1CZWLy8ERGFodDdhgt3O4cmkGhF-f_XAYOZ4s7uH72GoOkIzZgU4Nq8krPbbhOHtbFRczVQN9a91vjiL_N3d170K0_YLtIyITw52d_cJp4KIeQ1E/s1600/cbred-LEFT+copyasasd.png') no-repeat;
}
.gbcontent{
float:left;
border:6px solid #de7300;
background:#F5F5F5;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Ganti Dengan Code Script Chat Box (Buku Tamu) Kamu



Get This <a href="http://ryuuku-sena.blogspot.com/2011/02/cara-menyembunyikan-widget-gadget.html">Gadget</a></div>
<div style="text-align: right;">
    <a href="javascript:showHideGB()">
    Close
    </a></div>

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

5. Ganti tulisan yang berwarna Merah erw dengan script chat box kamu, jika belum memiliki chat box silahkan klik di sini

6. Lalu simpan.
Selamat Anda memiliki tampilan Chatbox baru.

Jika anda belum membuat chat box, silahkan klik link di bawah ini untuk membuat chat boxnya
http://www.idsena.web.id/2011/02/cara-membuat-chat-box-buku-tamu.html

Read more

Cara Membuat Chat Box ( Buku Tamu )

Cara membuat chatbox di blogspot. Membuat chatbox sangat mudah sekali, kalian hanya tinggal mendaftar di situs website yang menyediakan sarana Chatbox seperti Shoutmix, cbox dan lain-lain.tapi aku sarankan untuk memakai Cbox, karena lebih di sukai oleh para blogger. langsung saja caranya sebagai berikut.

1. Buka website cbox.ws .
2. Setelah itu klik pilihan Signup. Isi semua form yang telah di sediakan
3. Sekarang anda tinggal log in dengan e-mail yang anda daftarkan
4. Pilih Look & Feel - Style Presets
5. Pilih tampilan yang anda sukai
6. Setelah itu buka publish
7. Copy Paste Script (CSS) Chatboxnya.
8. Login ke Blog anda di blogger.com
9. Buka Rancangan - Elemen Laman . Lalu Tambah widget - Html/javascript
10. Paste Script tadi di situ lalu simpan.
Nah sekarang blog anda sudah ada chatboxnya. selamat mencoba

Jika anda ingin chat box anda tersembunyi di sebelah kanan seperti di blog ini silahkan klik link di bawah ini
http://www.idsena.web.id/2011/02/cara-menyembunyikan-widget-gadget.html

Read more

Cara Menambah Efek Zoom Pada Gambar

Efek ini berfungsi untuk membuat gambar menjadi besar atau zoom ketika gambar di klik dan untuk mengembalikannya lagi ke ukuran semula tinggal di klik lagi. contohnya seperti di bawah ini

ketika kamu arahkan crusor pada gambar di atas, dan klik satu kali. untuk mengembalikan seperti semula klik gambar yang sudah di perbesar tadi. Langkah untuk membuatnya cukup copy paste (copas) code di bawah ini. Setelah itu buka Rancangan - Edit Html. cari code </head> dengan cara tekan Ctrl + F . setelah ketemu copy paste (copas) kode di bawah ini di atas code </head>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/ryuukusena/javascript/jquery.magnifier.js"> </script>

Selanjutnya simpan.

Langkah selanjutnya adalah penerapan gambar. di sarankan untuk upload gambar di image host seperti photobucket.com , imageshack.com dan lain-lain. caranya :
Ambil Url gambar yang kamu pasang, contoh :
<img src="http://i317.photobucket.com/albums/mm393/ryuukusena/header.jpg"/>
kemudian tambahkan code class="magnify" di dalam code gambar tadi, hasilnya seperti ini :  <img src="http://i317.photobucket.com/albums/mm393/ryuukusena/header.jpg" class="magnify"/>
code class="magnify" harus kamu copy di setiap kode gambar kamu.

untuk menentukan besarnya zoom gambar, tinggal tambahkan code class="magnify" width="100px;" height="150px;"  . Keterangan : width = lebar, height = tinggi. codenya akan seperti ini

<img src="http://i317.photobucket.com/albums/mm393/ryuukusena/header.jpg" class="magnify" width="100px;" height="150px;"/>
jika anda meng upload gambar dari blogger. maka hapus beberapa code. contoh code saat upload gambar
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" />
hapus semua code seperti ini <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

maka kodenya seperti ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" class="magnify" width="100px;" height="150px;" />

sekian tutorial dari saya, semoga berguna dan bermanfaat bagi anda sekalian.

Read more

Cara Menyembunyikan Widget Follow

Ini buat agan-agan yang tidak memiliki banyak ruang di sidebar blognya. Untuk membuat alternatifnya, saya buat tutorial ini. Mudah-mudahan bebermanfaat.

Berikut langkah-langkahnya :
1. Login ke Blogger
2. Masuk Rancangan - Elemen Laman
3. Tambah Gadget Html/Java Script
4. Copy -  Paste kode berikut :

<style type="text/css"> #fl{ position:fixed; right:190px; z-index:+1000; } * html #fl{position:relative;} .fltab{ height:32px; width:270px; float:top; cursor:pointer; background:url(#) no-repeat; } .flcontent{ float:right; border:2px solid #676767; background:url()#F90 repeat-x bottom center scroll; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style> <script type="text/javascript"> function showHideFL(){ var fl = document.getElementById("fl"); var w = fl.offsetWidth; fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0); fl.opened = !fl.opened; } function moveFL(x0, xf){ var fl = document.getElementById("fl"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fl.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);} } </script> <div id="fl"> <div class="fltab" onclick="showHideFL()"> </div> <div class="flcontent"> GANTI TEXT INI DENGAN CODE FOLLOWERS ANDA <div style="text-align: right;"> <a href="javascript:showHideFL()"> [Tutup] </a></div> <span style="font-size:85%;"><a href="http://ryuuku-sena.blogspot.com/2011/02/cara-menyembunyikan-widget-follow.html"><div style="color: rgb(68, 68, 68);"> <span style="font-size:xx-small;">Get This Gadget</span></div></a></span> </div> </div> <script type="text/javascript"><br />var fl = document.getElementById("fl");<br />fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";<br /></script>

5. Ambil code script followers anda di sini
6. Setelah itu,bika rancangan - edit Html.cari code <body> dengan cara tekan Ctrl + F, copy paste kode di atas <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:65px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86My29fYbAstKq3M-OHQI6i7tLbS0wlwVuhkt8Ufl6EIe2a__h9ARUkREk5MO7DHmRDrjzOYbkqgwZWlC5OrBNCAYwSeo83LnhJuDcW4tXNJXYz6S2bKmLOMdKXMuXOAd5lJpCbYAQSM/s1600/FOLLOWERS-LOGO-.jpg'/></a>

Read more