Cara Membuat Judul Postingan Rata Kiri, Tengah, Kanan atau Sama Rata

Apabila kita membuat postingan di blog tentunya judul dari postingan kita akan berada dalam posisi rata kiri. Itu terjadi karena dalam setiap template sudah di setting demikian. Apabila anda bosan dengan judul postingannya yang selalu di kiri dan ingin memodifikasinya, misalkan ingin berada di rata tengah atau rata kanan, anda tinggal ikuti saja cara-caranya berikut ini:

 

1. Login ke Blogger

2. Klik menu Template dan Edit HTML 

3. Back Up dulu template Anda untuk berjaga-jaga 

4. Kemudian cari kode yang seperti ini :

 

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

5. Kalau sudah ketemu yang seperti itu atau mirip, hapus dan ganti dengan kode di bawah ini :

 

#header-inner {text-align: center ;}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

Catatan: Silahkan ganti tulisan yang berwarna merah dengan salah satu yang ada di bawah ini sesuai keinginan Anda

• left = rata kiri
• center = rata tengah
• right = rata kanan
• justify = sama rata

Semoga bermanfaat....

Cara Membuat Arsip Blog dengan Scroll

Gadget Arsip Blog dari blogger secara otomatis akan terus panjang ke bawah jika anda menambahkan postingan baru. Apabila Anda bosan dengan tampilan seperti itu, anda bisa memodifikasinya lewat template blog Anda. Yaitu dengan menambahkan fungsi scroll pada arsip blog. Gunanya yaitu untuk lebih menghemat space di blog dan kelihatan lebih profesional. Berikut saya jelaskan caranya:

1. Masuk ke Blogger > Tata Letak > Tambah Gadget > Arsip Blog

2. Setelah itu, pilih Template > Edit Html

3. Beri tanda centang pada tulisan Expand Widget Template

4. Tambahkan script ini <div style='overflow:auto; width:ancho; height:200px;'> tepat dibawah script <div class='widget-content'>

<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'>

v                            5. Selanjutnya tambahkan </div> disamping</div>

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

v                             6. Hasilnya seperti di bawah ini

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

v                             7. Secara keseluruhan hasilnya akan seperti 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>

             8. Simpan Template dan lihat hasilnya

Catatan:
<div style='overflow:auto; width:ancho; height:200px;'>
200 px adalah tinggi dari scroll tersebut jadi tinggal dirubah nilainya sesuai dengan selera Anda. Gimanaaa......??  Mudah kan!!!

Cara Membuat Label Animasi - Tag Cumulus

Kali ini Bangiz akan berbagi Tips dan trik bagaimana cara membuat label animasi atau tag cumulus yang keren. Label ini tentunya dibuat untuk memudahkan dalam pengelompokkan catatan agar sesuai dengan kategorinya. Tentunya dengan adanya animasi akan lebih mempercantik tampilan label atau blog itu sendiri. Selain itu akan memudahkan pengunjung untuk mencari hal-hal lainnya berdasarkan kategori.

Untuk cara kerjanya yaitu seperti bola, akan selalu berputar jika kursor kita diletakkan di daerah tag cumulus tersebut. Kita tinggal cari dan klik labelnya maka akan keluar semua catatan yang diberi label tersebut. Sekarang langsung saja ikuti cara pembuatannya:

1. Login ke akun blogger >> pilih nama blog

2. Pilih Tata Letak >> Tambahkan Gadget

3. Pilih HTML/Javascript >> Copy code di bawah ini:

<div align="center" style="padding:1px;border:0px solid #FF00FF;">
<script src='http://tagcloud-cumulus.googlecode.com/files/bgsGR_cumulus.js' type='text/javascript'></script>
<div id='flashcontent'>bangiz</div>
<script type='text/javascript'>
var so = new
SWFObject('http://www.swfcabin.com/swf-files/1275932799.swf', 'tagcloud', '290', '290', '6', '#FFFF00');
/*  bgsGR -bangiz */
// so.addParam("wmode", "transparent");
so.addVariable("tcolour", "#FF0000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "180");
so.addVariable("tagcloud", "<tags><a target='_blank' href='Cerita Cinta' style='14'>Cerita Cinta</a><a href='http://downloadwallpaperanimasi.blogspot.com//search/label/Biografi' style='14'>Biografi</a><a href='http://downloadwallpaperanimasi.blogspot.com//search/label/Cerita Lucu' style='18'>Cerita Lucu</a><a href='http://downloadwallpaperanimasi.blogspot.com//search/label/Tips dan Trik' style='14'>Tips dan Trik</a><a href='http://downloadwallpaperanimasi.blogspot.com//search/label/Download' style='14'>Download</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>

Catatan: 

• Ganti yang berwarna merah dengan alamat URL blog anda
• Ganti yang berwarna hijau dengan label anda
• Selanjutnya anda juga bisa merubah colour, speed dll

4. Jangan lupa simpan >> atur tata letaknya mau disimpan dimana

5. Selesai. Tinggal langsung lihat hasilnya.

Cara Membuat Fans Page Facebook Auto Hidden

Untuk saat ini banyak cara untuk menambahkan sosial media anda untuk terhubung dengan blog atau website yang anda miliki. Tentunya anda harus punya dulu akunnya baik itu Facebook, Twitter, Google+ atau yang lainnya. Sebelumnya saya sudah membuat tulisan tentang Cara Membuat Halaman di FB / Facebook. Tutorial kali ini masih berhubungan dengan Facebook yaitu cara memasang fans page Facebook auto hidden.

1. Masuk Dasbor Blogger
2. Pilih Template > Edit HTML
3. Cari kode </head> (gunakan Ctrl+F untuk memudahkan)
4. Copy-paste kode berikut diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Langkah berikutnya adalah memasang kode fans page faebook pada gadget anda

1. Dari Dasbor Blogger pilih Tata Letak > Tambahkan Gadget 

2. Pilih HTML/Javascript

3. Copy-paste kode di bawah ini pada kolom konten

<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});

/*]]>*/

</script>

<style type="text/css">

.likebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:44%;}

.likebox div{border:none;position:relative;display:block;}

.likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}

.likebox span a{color: gray;text-decoration:none;}

.likebox span a:hover{text-decoration:underline;}

</style>

<div class="likebox" style="">

    <div>

 <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBangiz%2F557274137622952&width=300&height=290&show_faces=true&colorscheme=dark&stream=false&border_color&header=true&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#ffffff;"></iframe><span><b></b></span></div>

</div>

4. Ganti kode yang berwarna merah dengan kode fanpage Facebook Anda

5. Simpan dan lihat hasilnya