December 31, 2012
Lama nggak buka Blog nih, jadinya ya gak ada Post yang baru.
Tapi tenang aja, gw disini bakal kasih cara membuat Widget Twitter Box [Auto Hide].
O iya, ini juga post pertama gw loh ditahun 2013 :D *plak
Tahap2nya, siapin tempat duduk yang nyaman, komputer, rokok LA [yang mentol enak], kopi [gw saranin nescafe yang 3 in 1] atau nggak teh aja nggak papa xD wkawkawka. O iyo meh lali, seng pasti yo wes ndue twitter.
Langsung aja, nggak usah basa basi, nanti hasil akhirnya seperti ini.
- Buka Blog.
- Tata letak, tambah gadget.
- Kemudian pilih HTML/JavaScript.
- Setelah itu, masukkan script dibawah ini
<style type="text/css">
#bb{
position:fixed;
top:45px; z-index:+1000;}* html #bb{position:relative;}
.bbtab{
height:152px;
width:30px;
float:left;
cursor: pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3JhRppazhoupyUBOHFY45IBi_LaTZRGBZYZmizHNFPMuSo2YGa0USNhfeY4qyXC_vdDFhxPwzyHI6wIgSGINcfMBgBw2sDewQp6TV-7l1_pP3AbL3XteIV8dZW-PBStKbZWTAN3sAvwo/s320/allbloggingtips.com-twitter-icon.png') no-repeat;}
.bbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;}
</style><script type="text/javascript">
function showHideBB(){
var bb = document.getElementById("bb");
var w = bb.offsetWidth;bb.opened ? moveBB(0, 30-w) : moveBB(20-w, 0);
bb.opened = !bb.opened;}function moveBB(x0, xf){
var bb = document.getElementById("bb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;bb.style.right = x.toString() + "px";if(x0!=xf){
setTimeout("moveBB("+x+", "+xf+")", 10);}}
</script><div id="bb">
<div class="bbtab" onclick="showHideBB()"></div>
<div class="bbcontent">
<center>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({ version: 2,type: 'profile',rpp: 17,interval: 30000,width: 240,height: 250,theme: {shell: {background: '#ffffff',color: '#000000'},tweets: {background: '#000000',color: '#ffffff',links: '#33ccff'}},features: {scrollbar: true,loop: false,live: true,hashtags: true,avatars: true,behavior: 'all'}}).render().setUser('@rasfananta48').start();</script>
</center>
<div style="text-align:bottom">
<a href="javascript:showHideBB()">[close]</a>
</div>
<script type="text/javascript">
var bb = document.getElementById("bb");bb.style.right = (30-bb.offsetWidth).toString() + "px";
</script>
</div>
#bb{
position:fixed;
top:45px; z-index:+1000;}* html #bb{position:relative;}
.bbtab{
height:152px;
width:30px;
float:left;
cursor: pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3JhRppazhoupyUBOHFY45IBi_LaTZRGBZYZmizHNFPMuSo2YGa0USNhfeY4qyXC_vdDFhxPwzyHI6wIgSGINcfMBgBw2sDewQp6TV-7l1_pP3AbL3XteIV8dZW-PBStKbZWTAN3sAvwo/s320/allbloggingtips.com-twitter-icon.png') no-repeat;}
.bbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;}
</style><script type="text/javascript">
function showHideBB(){
var bb = document.getElementById("bb");
var w = bb.offsetWidth;bb.opened ? moveBB(0, 30-w) : moveBB(20-w, 0);
bb.opened = !bb.opened;}function moveBB(x0, xf){
var bb = document.getElementById("bb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;bb.style.right = x.toString() + "px";if(x0!=xf){
setTimeout("moveBB("+x+", "+xf+")", 10);}}
</script><div id="bb">
<div class="bbtab" onclick="showHideBB()"></div>
<div class="bbcontent">
<center>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({ version: 2,type: 'profile',rpp: 17,interval: 30000,width: 240,height: 250,theme: {shell: {background: '#ffffff',color: '#000000'},tweets: {background: '#000000',color: '#ffffff',links: '#33ccff'}},features: {scrollbar: true,loop: false,live: true,hashtags: true,avatars: true,behavior: 'all'}}).render().setUser('@rasfananta48').start();</script>
</center>
<div style="text-align:bottom">
<a href="javascript:showHideBB()">[close]</a>
</div>
<script type="text/javascript">
var bb = document.getElementById("bb");bb.style.right = (30-bb.offsetWidth).toString() + "px";
</script>
</div>
- Langkah terakhir tinggal klik "Simpan" atau "Save", alias KELARRR !!!
Keterangan : ganti text yang berwarna merah dengan username twitter kamu.
Baarrrrr, kalo ada pertanyaan, tinggal komen aja dibawah.
