Membuat Tombol Fan Page dan Follow Twitter Melayang

ADA beberapa cara dapat dilakukan agar pengunjung blog menyukai atau bergabung pada Fan Page dan Twitter Anda. Salah satunya dengan membuat Fan Page tersembunyi di samping blog. Namun, pada kesempatan ini kami akan membahas cara yang lain yaitu cara membuat tombol Fan Page dan follow Twitter melayang di Blog.

Berikut langkah cara membuat tombol fan page dan twitter melayang :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript. 

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Silahkan Bergabung Bersama Komunitas Kami</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Infoblog_ID/121738271193251?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=Infoblog_ID&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

Keterangan :
Tulisan yang berwarna hijau adalah judul dari widget Fan Page.
Tulisan yang berwarna merah adalah URL Fan Page blog Anda.
Tulisan yang biru adalah username dari akun Twitter Anda.
4. Kemudian Simpan.

Jika Anda hanya ingin menampilkan Fan Page saja, maka hapus kode berikut : 

<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=Infoblog_ID&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

Nah, kini Anda mempunyai Fan Page dan follow Twitter melayang pada blog. Semoga dapat membantu! 

Read More »

17.14 | 0 komentar

Membuat Iklan Text pada Widget Blog

Menyediakan ruang iklan teks pada blog merupakan trik menambah penghasilan dari blog. Bagaimana cara membuat iklan text pada widget blog ? Pada kesempatan ini kami akan membahasnya.

Berikut langkah cara membuat iklan text pada widget blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript.

<style type="text/css">
#teks {
height: 300px;
width: 300px;
border: 1px solid #333;
}
#teks #teks1 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 0px;
padding-bottom: 4px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#teks #teks2 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#teks #teks3 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#teks #teks4 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#buka {
height: 260px;
width: auto;
margin-right: 6px;
margin-left: 6px;
font-size: 16px;
color: #06F;
padding-right: 2px;
padding-left: 2px;
}
#teks #ads-by {
height: auto;
width: auto;
margin-top: 5px;
color: #666;
font-size: 12px;
text-align: right;
margin-bottom: 5px;
padding-top: 2px;
padding-bottom: 4px;
margin-right: 6px;
margin-left: 6px;
font-style: normal;
line-height: normal;
text-decoration: none;
}
.isi-iklan {
color: #333;
text-decoration: none;
line-height: normal;
font-style: normal;
font-size: 13px;
}
</style>
<div id="teks">
<div id="buka">
<div id="teks1"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
<div id="teks2"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
<div id="teks3"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
<div id="teks4"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
</div>
<div id="ads-by"><a href="http://id-pemula.blogspot.com/">Ads by ID-Pemula Blog</a></div>
</div>

Keterangan :
Warna biru adalah kode warna border atau kotak iklan.
Warna merah adalah link URL.
Warna kuning adalah judul teks iklan.
Warna hijau adalah keterangan iklan.
Warna ungu adalah pemilik layanan iklan.
4. Kemudian Simpan.

Semoga dapat membantu! 

Read More »

17.13 | 0 komentar

Membagi Widget Label Lebih dari 1 Kolom

WIDGET label merupakan widget yang digunakan untuk mengkelompokkan posting. Terkadang tampilan widget label pada blog hanya satu kolom, ini menyebabkan tampilan label memanjang kebawah jika label pada blog kita jumlahnya sangat banyak. Agar tampilan label tidak memanjang kebawah kita perlu membaginya menjadi dua kolom atau lebih.

Berikut langkah cara membagi widget label menjadi 2 atau 3 kolom:

1. Login akun blogger Anda.
2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.
4. Letakkan kode berikut diatas kode ]]></b:skin> 

#Label1 li { float:left; width:45%; }

5. Kode diatas untuk membuat label menjadi 2 kolom, sedangkan dibawah ini 3 kolom.

#Label1 li {float:left;width:33%;}
#Label2 li {float:left;width:33%;}

6. Simpan template.

Jika belum berhasil ubah ukuran width (lebar) sampai widget label berhasil menjadi beberapa kolom. 

Read More »

17.12 | 0 komentar

Web Penyedia Widget Counter Pengunjung Blog

Widget counter pengunjung adalah widget yang dipakai untuk menampilkan statistik jumlah kunjungan pada blog. Ada banyak website penyedia layanan widget counter pengunjung yang dapat digunakan secara gratis. Namun blogger sendiri sudah menyediakan fitur counter pengunjung pada gadget mereka, tapi masih ada beberapa orang yang menganggap widget dari blogger tersebut kuarang akurat.

Berikut beberapa website yang menyediakan layanan gratis widget counter pengunjung yang bisa Anda gunakan pada blog :

1. www.hit-counts.com
2. freebloghitcounter.com
3. www.free-counters.co.uk
4. www.histats.com
5. www.easycounter.com

Pilih salah satu website penyedia layanan counter pengunjung diatas, kemudian ikuti langkah-langkah pendaftrannya, selanjutnya Anda akan diberi kodenya dan pasang pada Gadget HTML/JavaScript. Dari beberapa pilihan diatas counter pengunjung yang paling banyak digunakan blogger adalah histats. Semoga dapat membantu! 

Read More »

17.12 | 0 komentar