Cara membuat label menjadi flash animasi

Ini berawal dari saya melihat flash animasi yaitu di dalam kotak yang ada tulisan-tulisan yang bergerak-gerak, lalu dengan sengaja saya cari cara membuatnya di internet lalu saya menemukan cara membuatnya, label yang di fitur blogger standart menjadi tidak standart.

Kalau biasanya seperti ini :

Trik (12), Blogger (45), Buku (8) Tips (20)

Maka dengan fitur widget yang baru ini maka label akan berubah menjadi bentuk flash animasi, seperti punya saya itu kawan. Nah, cara membuatnya cukup mudah kok kawan tinggal ikuti saja cara di bawah ini kawan. 

Cara buat label flash animasi :

1. Longin ke blogger 

2. Pilih Tata Letak

3. Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode di bawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Kalau sudah ketemu taruh script berikut ini dibawahnya

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/ruangsc/enes/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://twitter.com/fadhilcorbin'>@fadhilcorbin</a> Distributed by <a href='http://ini-hanya-blog.blogspot.com'>Ini Hanya Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "245", "180", "7", "#333333");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Simpan jika sudah selesai
Catatan :

Nah sekarang yang bisa kamu ubah adalah :

240 adalah lebar flash animasi
300 adalah tinggi flash animasi

Read more »

Cara membuat buku tamu buka tutup di blogger

Sekarang saya akan menjelaskan tentang sebuah trik blogger yang sangat berguna untuk blogger kita trik blogger itu adalah cara membuat buku tamu buka tutup di blogger. Sebelum kita membuat buku tamu yang bisa buka tutup di blogger kita harus mempunyai akun yang menyediakan widget buku tamu, tempatnya ada di ShoutMix atau Cbox. Jika belum memiliki akun kita membuat akun terlebih dahulu, jika terlalu sulit saya juga pernah menjelaskan tentang cara membuat kotak Cbox di blogger dan ikuti saja langkah-langkah itu. Nah, sekarang dari pada berlama-lama di sini dan tidak ada gunanya langsung saja kita belajar membuat buku tamu buka tutup di blogger, ikuti langkah-langkah di bawah ini.

Cara membuat buku tamu buka tutup di blogger

1. Login ke blogger 
2. Pilih Rancangan   
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

<style type="text/css">
#gb{
position:fixed;
top:100px;
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/AVvXsEgwMybhYJ9hgjdphbfNoKWVu0RogkkbO7QF55GpMVI7V6HmwxbMZGVGreaZUWrilnv4GWc57i3FO3MLpoXi3uB4z0_Vo9osG_B53fMaU4quJ35B5aQ6triPZTp_mTSlz0NRtHqt_ivzVfUL/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

Taruh Kode Widget Kamu Disini

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

6. Simpan jika sudah selesai

Catatan :

● Ganti tulisan yang berwarna merah dengan kode widget Anda sendiri

Read more »

Cara membuat floating follower blogger, twitter, facebook di blogger

Sekarang saya akan menjelaskan sebuah trik blogger yang cukup menarik dan sangat berguna, trik ini adalah membuat floating follower blogger, twitter, facebook. Dahulu saya juga sudah pernah menjelaskan tentang floating buku tamu, sekarang kita akan membuat yang sama dengan floating, tapi kali ini dengan blogger, twitter, dan facebook. Kita bisa membuat follower blogger, follower twitter, dan like facebook dengan floating ini. Cara ini cukup simple dan tidak memakan banyak tempat untuk menaruhnya. Nah, sekarang dari pada berlama-lama disini dan tidak ada gunanya langsung saja kita belajar membuat floating follower blogger, twitter, facebook di blogger, ikuti langkah-langkah di bawah ini.

Cara membuat floating follower blogger, twitter, facebook di blogger

1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8mMa8ao8H5dWENJvGe-4AjMgwWbHBF6sfyeDytzusm7OPivirFzSmga7uzaw1vt24nUh0tiKNqs15x_2_YTF6BFu8Ij5ezzRmKnOMqJT04cPFdNSvZvPoUGHQkMRHx8xTLbOBiwyuZQ1/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOEKBmSUiFPqrLSGTYVHXUfUQ5DVafhw4swsGuxWjaPvkXXmuCwbL8djeW-gZkgIlcTPQd2v-VsgWI-PDgFaQua_tXC2XE4NHORZNUM0TiIR5VTr1BJm6TV-mlym2ZYsl-SsCdPOwSndc_/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ_gmB5pcDa-a6kGa7UvjajZTOC-9VWBBbfFeF5QfAcAcMdMstEpNd0Uad0UUFikmyKZ5oZ4xxzL-sX01zDYQSHBQ3vpTWIcxnKSzIGrCMLNmgR2zExvlZ_NhfXoksc4C7BHvNiljgFm1h/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhkgvz6YzouoaSGHPFAc5DpZ49cT_t0ddK7iiZNeqDPb3II7iY0GAIiJUiDDX114xK_CogqkdLhhsReOz86ULQJSfeQrZJzNDWhq1cuhmkX22ImlD4G9qKDt-g1Lt-AqRyY2Ttn1kCN4n/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMdm0jHymVLNHcoWHyH0e2XH3OipDpFJ-dkj3m2nlFkEHEwrwxCyr8GyPNkVVtR0C1m1aCNFBBOFBeQ6FOtpMGJTGTcltmOM11kvNvr1KBPZZF_GsODsLZ96KKQ-i3Sf6y6isPUZ8ri-VL/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPcYord-tlIM6XmlZZbrbD0uLOlHYB0onrWW2yFORkxx3eHDRPXh64Yhfi8KzgRGW8vS7ZQUZpo9_RIbtRh1qP3B9SXHJpvsg3Po94_kR2ZpD-XReUdD4YSR3CjuaGrVaFmxWJVotxZpGX/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
 

Kode Blogger Disini

</div>
</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
 

Kode Twitter Disini

</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
 

Kode Facebook Disini

</div>
</div>

6. Simpan jika sudah selesai

Catatan :

● Ganti tulisan yang berwarna merah dengan kode HTML

● Mencari tempat kode HTML Blogger tempatnya disini

● Mencari tempat kode HTML Twitter tempatnya disini

● Mencari tempat kode HTML Facebook tempatnya disini

Read more »

Cara membuat permalink otomatis di blogger

Sekarang saya akan menjelaskan sebuah trik blogger yang cukup menarik dan mungkin cukup berguna bagi para blogger, trik ini adalah cara membuat permalink otomatis di blogger. Dahulu saya juga sudah pernah menjelaskan tentang

Cara membuat permalink otomatis di blogger

1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode berikut diatas kode ]]></b:skin>

.permalinkblogspot{border:0px solid #FFF; padding:5px; background:#fff; -moz-border-radius:5px}
.permalinkblogspot a{background:#none}
img.float-right{margin:5px 0px 0 10px}
img.float-left{margin:5px 10px 0 0px}

6. Kemudian cari kode <data:post.body/> atau <p><data:post.body/></p>
7. Jika sudah taruh kode berikut dibawah salah satu kode diatas

<center>
<div style='border: 3px solid #CCCCCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #DDF2FC ; text-align: left;'><b><medium>Tolong Dibaca Terlebih Dahulu !!!</medium></b><br/><br/><small><div style='text-align: justify;'>Anda sekarang sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan Anda bisa menemukan artikel <data:blog.pageName/> ini dengan URL <strong><data:post.url/></strong>, Anda boleh menyebar luaskannya dan copy paste jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi orang lain, namun jangan lupa untuk meletakkan link posting <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.</div></small></div></center></div>
</b:if>

8. Simpan jika sudah selesai

Read more »

Cara membuat link jump to comment di blogger

Sekarang saya akan menjelaskan tentang sebuah trik blogger yang cukup unik dan mungkin trik ini juga bisa untuk mempercantik tampilan blogger kita, trik ini adalah cara membuat link jump to comment di blogger. Fungsi dari link jump to comment ini adalah jika postingan kita memiliki banyak komentar masuk dan pengunjung ingin berkomentar, pengunjung terlalu lama untuk menscroll mousenya sampai kebawah untuk berkomentar di blogger kita, tapi dengan cara ini pengunjung bisa langsung mengeklik link jump to comment dan langsung berada di kotak komentar. Nah, sekarang dari pada berlama-lama disini dan tidak ada gunannya langsung saja kita belajar membuat link jump to comment di blogger, ikuti langkah-langkah di bawah ini.

Cara membuat link jump to comment di blogger

1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget

5. Taruh kode berikut diatas kode <b:if cond='data:post.commentPagingRequired'>

• Tidak dengan gambar

<div style='margin: -30px 0px 0px 250px;'> <a href='#comment-form'><b>Klik untuk Komentar</b></a> </div>

• Dengan gambar

<div style='margin: -30px 0px 0px 250px;'><a href='#comment-form'><b>Klik untuk Komentar</b><img src='http://cdn1.iconfinder.com/data/icons/woothemesiconset/32/comment.png'/></a></div>

6. Simpan jika sudah selesai

Catatan :

● Pilih salah satu kode HTML diatas
● Ganti tulisan yang berwarna merah dengan kata yang Anda inginkan
● Ganti tulisan yang berwarna biru dengan URL gambar yang Anda inginkan

Read more »

Cara membuat scroll pada blog archive di blogger

Sekarang saya akan menjelaskan tentang sebuah trik blogger yang mungkin sudah lama dan tapi masih berguna juga bagi para blogger saat ini, trik tersebut adalah cara membuat scroll pada blog archive di blogger. Seperti namanya scroll pada blog archive, trik ini berguna untuk membuat scroll di widget blog archive yang biasanya kita sangat rutin berposting setiap hari dan widget blog archive kita terlalu panjang dan terasa tidak rapi, tapi dengan adanya scroll pada blog archive blogger kita mungkin sedikit terlihat rapi di mata pengunjung. Nah, sekarang dari pada berlama-lama disini dan tidak ada gunanya langsung saja kita belajar membuat scroll pada blog archive di blogger, ikuti langkah-langkah di bawah ini.

Cara membuat scroll pada blog archive di blogger

1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode dibawah ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti dibawah ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

7. Simpan jika sudah selesai

Catatan :

● Kode yang berwarna merah dan biru adalah kode yang di tambahkan

● Angka yang berwarna biru bisa Anda ganti sesuai keinginan Anda

Read more »

Cara membuat efek kembang api pada blog

Setiap pada tahun baru kita pasti pernah melihat letusan kembang api, nah untuk sekarang kita tidak usah lama-lama untuk melihat letusan kempang api lagi, sekarang kembang api bisa ada pada blog anda caranya cukup mudah kok kawan tinggal ikutin cara berikut ini saja, langsung saja kita belajar membuatnya kawan.

Cara membuat efek kembang api

1. Login ke blogger

2. Pilih Rancangan

3. Klik Tambah Gadget

4. Pilih HTML/JavaScript

5. Masukan kode HTML berikut ini

<script src="http://postrecent.googlecode.com/files/kembangapi.js" type="text/javascript">
    </script>

6. Simpan jika sudah selesai

Read more »