Daftar UNIK lewat link ini dan dapatkan gratis Rp 2.000 untuk pulsa, voucher game, dan lainnya.

Daftar UNIK lewat link ini dan dapatkan gratis Rp 2.000 untuk pulsa, voucher game, dan lainnya.: Daftar UNIK lewat link ini dan dapatkan gratis Rp 2.000 untuk pulsa, voucher game, dan lainnya.

Read more

Tips Blogger | Memasang Widget Menu Tab View Tiga Kolom Di Sidebar

C

oba hitung berapa widget yang terpasang di sidebar Blog sobat! Apakah sobat ingin menambah daftar widget yang baru di sidebar Blog, wah tentunya sidebar Blog akan menjadi semakin panjang dan kurang nyaman dilihat. Untuk mengakali masalah ini sobat dapat memanfaatkan widget khusus yang bernama Menu Tab View 3 kolom di sidebar. Dengan Menu Tab view 3 kolom ini sobat dapat menghemat banyak space di sidebar Blog. Sehingga tampilan blog menjadi lebih cantik dan nyaman dipandang.


Membuat menu dengan tab view di sidebar ini memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini sebelum memulainya dan yang paling penting jangan lupa untuk backup template Blog terlebih dahulu.

Mari kita Mulai :



1). Login ke Akun Blogger sobat >> klik Rancangan/Design >> klik Edit HTML, beri tanda contreng pada kotak bertuliskan Expand Template Widget lalu jangan lupa klik terlebih dahulu pada tulisan Download Template Lengkap untuk membackup template blog sobat.

2). Cari kode yang bernama </head> , untuk lebih mudah mendapatkannya gunakan fasilitas search pada internet Browser dengan cara menekan tombol F3 lalu masukan kode yang diinginkan

3). Setelah kode </head> ketemu, kemudian langsung ganti dengan kode di bawah ini:

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
</head>

4). Setelah itu cari kode ]]></b:skin> dan langsung ganti dengan kode di bawah ini :

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /*Lebar Menu Utama Atas*/
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
]]></b:skin>

5). Kemudian simpan template sobat!

6). Langkah selanjutnya, kembali klik Rancangan/Design >> klik Add Gadget/Tambah Gadget >> pilih yang HTML/Javascript. Berilah judul pada kolom HTML/Javascript sesuai yang diinginkan dan masukan kode di bawah ini ke dalam content HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 300px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

7). Kemudian Simpan Widget yang sudah sobat buat tadi.

Read more

Membuat Box Twitter Follower

Blog dan twitter sepertinya sudah tidak bisa dipisahkan lagi. Karena keduanya bisa saja saling melengkapi. Blog sebagai media yang mampu memberikan ulasan secara mendalam, multi konten dan terarsipkan. Twitter sebagai media yang bisa sebagai tempat berbagi yang mudah, cepat dan populer.

Dan kali ini kita akan belajar untuk membuat box twitter follower. Bentuknya kurang lebih sama dengan box facebook fan page. Yaitu box yang menampilkan avatar-avatar follower, jumlah follower dan bagian atas ada avatar si pemilik twitter, username serta button 'follow'.

Cara Membuat Box Twitter Follower
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=kurniasepta" class="FB_SERVER_IFRAME" style="width: 300px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("kurniasepta");</script>

5. Ganti kurniasepta dengan username twittermu sendiri, dan 300 adalah ukuran lebar serta 250 adalah tingginya.
6. Simpan jika sudah selesai.

Siapa tahu dengan memasang box twitter follower ini bisa menambah follower kita. Sebagai sarana promosi untuk follow kita di twitter. Mungkin orang akan lebih tertarik memfollow, karena kalau itu dilakukan wajah (avatar) akun twitternya bisa tampil di box dan blog kita. Oh ya, jangan lupa juga untuk follow @kurniasepta di twitter ya ;) 

Read more

Mengganti Icon Blogger di Addres Bar

Ketika membuka atau blog kita maka akan muncul di addres bar (tempat unuk menuliskan alamat URL) akan muncul icon atau gambar kecil. Dan jika blog kita ada di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com seperti d ibawah ini.

http://andesskert.blogspot.com/

Untuk kita-kita yang sedikit tak meninginkan icon blogger itu muncul di Addres Bar blog kita, bisa juga kita ganti icon blogger itu dengan yang lainnya. Misalkan denagn foto kita sendiri atau gambar-gambar yang begerak atau berformat gif. Tapi yang paling penting adalah ini sebuah icon jadi usahakan yang berukuran kecil saja, misal 24 x 24 pixel atau 32 x 32 pixel saja supaya loadingnya cepat.

Cara Mengganti Icon Blogger di Addres Bar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head>
6. Taruh script berikut ini tepat diatas kode </head>

<link href='http://img401.imageshack.us/img401/7652/eqizqu6.gif' rel='SHORTCUT ICON'/>

7. Lalu Simpan kalu sudah selesai.

Berikut ini Icon-icon yang bisa kita gunakan:

 http://img100.imageshack.us/img100/4658/image12du2.gif
 http://img132.imageshack.us/img132/4733/image13lj1.gif
 http://img145.imageshack.us/img145/7793/image14zg9.gif
 http://img412.imageshack.us/img412/4403/image15jc7.gif
 http://img264.imageshack.us/img264/7575/image16kn8.gif
 http://img87.imageshack.us/img87/5862/image1an1.gif
 http://img110.imageshack.us/img110/6218/image2ie0.gif
 http://img98.imageshack.us/img98/9617/image3cr0.gif
 http://img134.imageshack.us/img134/633/image4hx4.gif
 http://img139.imageshack.us/img139/83/image5oa7.gif
 http://img509.imageshack.us/img509/6449/image6fu0.gif
 http://img527.imageshack.us/img527/6543/image7go9.gif
 http://img507.imageshack.us/img507/5774/image8wn8.gif 

Read more