Friday, 6 July 2012

Floating Button Facebook , Twitter dan Blog


Floating button Facebook , Twitter , dan Blog digunakan untuk memudahkan reader connect dengan sosial networksobat  .  Kalau sobat juga ingin memasangnya ikut langkah - langkah berikut ini :

1. Sing in Akun Blogger
2. Klik Rancangan => Tambah Gadget => Html/Javascript
3. Masukkan kode dibawah ini

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />


</div>

Keterangan :
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog sobat .
- Pada tulisan berwarna merah itu adalah Image dari Button . Jika sobat mau mengganti nya , silahkan atau mau pake yang saya sediakan bisa juga .
 - Yang warna hijau sobat boleh ganti sesuaikan dengan blog sobat . Left bisa diganti dengan right.


4. Simpan

Thursday, 5 July 2012

Cara Membuat Tombol Hide/Show

Kali ini saya akan menerangkan bagaimana cara membuat tombol Hide/Show atau yang biasa disebut tombol Spoiler . Sebelum saya menjelaskan cara pembuatan nya silahkan sobat lihat dulu contoh tombol Hide/Show .

Contoh Tombol Hide/Show
alt="" src="data:image/png;base64,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" />


Sobat tertarik untuk membuatnya ? Jika Ya silahkan ikuti langkah - langkah dibawah ini :

1. Sing in akun blogger
2. Klik Rancangan => Tambah Gadget => Pilih HTML/Javascript
3. Masukkan kode dibawah ini

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">


Silahkan kalian isi dengan apa yang perlu kalian singkat.

</div></div></div></div>

Keterangan :
   => Warna Merah sobat bisa ganti sesuai dengan keinginan sobat
   => Warna Biru sobat ganti dengan apa yang sobat perlu singkatkan

4. Simpan

Tuesday, 3 July 2012

Tampilan Welcemo dengan Image

Kali ini saya akan posting Artikel tentang Tampilan Welcome dengan Image saat sobat mau masuk ke blog orang . Kalau sobat mau memasangnya ikuti Tutorial berikut ini :

1. Sing in akun blogger sobat
2. Klik Rancangan => Edit HTML => Expand Template Widget
3. Cari Kode ]]></b:skin> dengan menggunakan Ctrl + F biar lebih cepat
4. Setelah ketemu , masukkan kode dibawah ini di atas kode  ]]></b:skin>

</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="http://img831.imageshack.us/img831/7031/46029943.gif"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>

Keterangan :
   => Kode yang berwarna BIRU  itu adalah Url Image , sobat bisa menggantinya dengan image sobat sendiri atau mau pake yang aku sediakan

5. Simpan

Humor - Pepe ( Real Madrid )

Si A : Pepe ( Real Madrid ) tiap main bola kasar terus yah ? Kayak Pegulat ajah .

Si B : Biasa Lah .

Si A : Lo , Ko' biasa ?

Si B : Nama lengkapnya ajah Satpol Pepe , gimana ngak kasar .

Humor - Seorang Bapak Menyetopkan Taksi

Suatu hari, ada orang Batak yang sedang berwisata di kota Jakarta dan ia bermarga Manalu, saat menunggu taksi yang lewat iapun duduk untuk beristirahat.

Saat itu ia melihat ada taksi tak berpenumpang yang kebetulan lewat maka segera iapun menyetop taksi itu, dan saat diberhentikan sang supir taksi bertanya kepada si Batak ini. "Mana lu?" tanyanya sambil mengintip dari jendela (maksudnya kamu mau ke mana?), si Batak ini kaget dan bergumam "Bah, hebat kali supir taksi di Jakarta ini? Belum apa-apa sudah tahu namaku."

Lalu ia bertanya lagi pada si supir taksi ini "Hei kau, kau paranormal ya?" Lalu supir taksi ini menjawab sambil nyeleneh dan pergi "Sinting." Si Batak ini bergumam lagi "Bah, lebih hebat lagi supir taksi ini, dia tahu kemana tujuanku.

Aku kan mau pergi ke rumah temanku si Ginting." Karena dari 5 taksi yang ia berhentikan mengatakan hal yang sama saja, si Batak ini frustasi dan akhirnya memutuskan untuk naik metro mini saja daripada repot-repot cari taksi.

Di dalam metro mini ia berkata dalam hati "Supir-supir taksi di Jakarta ini paranormal semua kelihatannya tetapi aneh, kok mereka tak mau kutumpangi ya? Padahal uangku cukup."