EDIT ME

EDIT ME

EDIT ME

Loading

Tutorial Blogger Sampai Anda Bisa

Kamis, 24 Februari 2011 | Diposting oleh blog.it | | Edit Entri
Menu Dropdown

# Metode yang pertama :

langkah #1 :
  1. Login ke blogger dengan ID anda
  2. Setelah berada pada halaman dashboard, klik Layout.
  3. Kemudian klik tab edit HTML.
  4. Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
  5. Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]></b:skin>
  6. Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>

  1. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :
    2. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/> </b:section>
  2. Ubahlah kode yang saya cetak hijau, sehingga kodenya menjadi seperti ini :
    3. <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/> </b:section>
  3. Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.
langkah #2
  1. Klik pada tab elemen Halaman yang berada di bagian atas. Perhatikan gambar berikut :
    2. page element
  2. Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:
    3. add a page element
  3. setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:
  4. Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :

  1. Klik tombol Simpan Template
  2. Selesai. Silahkan lihat hasilnya.
Catatan : untuk beberapa template, cara ini tidak menghasilkan tampilan yang bagus, maka anda bisa mencoba cara berikut.

Metode kedua

Karena desain dari template sangat berbeda antara satu dengan yang lainnya, maka saya
hanya mengambil contoh untuk template minima saja (template asli blogger) sebagai gambaran saja.
langkahnya adalah sebagai berikut :
  1. Login ke blogger dengan ID anda
  2. setelah berada di halaman dashbord , klik Layout.
  3. Kemudian klik tabedit HTML.
  4. Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
  5. Silahkan anda beri tanda tik/cek pada kotak kecil di samping tulisan Expand Templates Widget. Tunggu beberapa saat.
  6. Lihat ke kode template anda dan temukan kode berikut : ]]></b:skin>
  7. Copy kode di bawah ini, lalu paste di atas kode: ]]></b:skin>

lihat ke bagian bawah dan temukan kode ini:

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>


Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :

 

  1. Klik tombol Simpan Perubahan
  2. Selesai. Silahkan lihat hasilnya.
Langkah-langkah di atas hanyalah untuk template minima , jadi untuk template anda terkadang kode nya sama dan banyak juga
yang berbeda, silahkan di pelajari saja.

Sedikit tambahan :

Pada kode menu drop down yang saya berikan, ada kode seperti ini :

<dt><a href="../menu/index.html">DEMOS</a></dt>

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>


Perhatikan pada kode <dt> dan <dd>

Kode yang di awali dengan <dt>, adalah judul pada menu utama (tulisan yang muncul di muka).

Kode yang di awali dengan <dd>, adalah judul untuk sub menu (tulisan pada drop menu).

Anda harus mengganti link yang ada dengan link milik anda sendiri, sebagai contoh :

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page"> zero dollars</a></dd>

ganti menjadi :

<dd><a href="http://template-unik.blogspot.com/2007/11/unique-template-r-21.html" title="free template R 1.2">UniQue Template R 1.2</a></dd>

Selamat mencoba dan mempelajari, Dikarenakan lagi malas posting,jadi tutorial ini saya copy dari blog Kang Rohman,jika anda masih bingung boleh langsung ke postingan blog tersebut.


Cara Membuat Blog






Ayo kita langsung praktek saja, ikuti langkah - langkah berikut ini :

Langkah 1: Daftar Google

Daftarkan Diri Anda di Google 

Lho koq? Koq di Google? Katanya mau ngajarin bikin blog di blogger.com, koq malah di Google? Tidak salah, karena untuk masuk ke blogger, Anda harus memiliki login google.com.

Silahkan kunjungi http://www.blogger.com. Anda akan mendapatkan halaman seperti pada gambar dibawah.

Jika Anda sudah memiliki login di Google, Anda tinggal login, maka Anda akan masuk ke Control Panel atau Panel Kontrol.

Oh ya, Anda bisa memilih bahasa, apakah Bahasa Indonesia atau bahasa Inggris.

Untuk kali ini saya anggap Anda belum memiliki login Google.

Klik tanda panah besar yang bertuliskan CIPTAKAN BLOG ANDA.

Sejauh ini sangat mudah dan akan terus mudah.



Halaman Pertama 

Langkah 2: Daftar Blog  

Lengkapi Pendaftaran Anda 

Setelah Anda klik tanda panah besar yang bertuliskan CIPTAKAN BLOG ANDA, maka akan muncul formulir seperti yang ada pada gambar dibawah ini.

Proses ini akan menciptakan account Google yang dapat Anda gunakan pada layanan Google lainnya. Jika Anda sudah memiliki sebuah account Google mungkn dari Gmail, Google Groups, atau Orkut.

Satu account Google bisa digunakan untuk mengakses semua fasilitas yang disediakan oleh Google.

Jika Anda sudah memiliki accout google, Anda bisa langsung login (masuk). Untuk login ke Google, Anda harus login dengan menggunakan alamat email.
Silahkan lengkapi.

1. Alamat email yang Anda masukan harus sudah ada sebelumnya. Anda akan
dikirim konfirmasi ke email tersebut. Jika Anda menggunakan email palsu
atau email yang baru rencana akan dibuat, maka pendaftaran bisa gagal.
Anda tidak perlu menggunakan email gmail.com. Email apa saja bisa.

2. Lengkapi data yang lainnya.

3. Tandai "Saya menerima Persyaratan dan Layanan" sebagai bukti bahwa Anda setuju. BTW Anda sudah membacanya?
Setelah lengkap, klik tanda panah yang bertuliskan lanjutkan.



Form Pendaftaran 1 




Form Pendaftaran 2 

Langkah 3: Membuat Blog  

Memilih Nama Blog dan URL Blog

Jika Anda berhasil, Anda akan dibawa ke
halaman seperti pada gambar dibawah. Jika gagal? Gagal biasanya karena
verifikasi kata Anda salah. Itu wajar karena sering kali verifikasi kata
sulit dibaca. Yang sabar saja, ulangi sampai benar. Saya sendiri sampai
mengulang 3X.

Setelah Anda berhasil mendaftar, Anda akan dibawa ke halaman seperti yang ada pada gambar dibawah. Sekarang Anda mulai membuat blog dengan mengisi nama dan alamat blog Anda.

Sebagai contoh, saya menamakan blog tersebut dengan nama Blog It, dengan alamat http://blog-it.blogspot.com sebagai alaternatif, bisa juga http://blog-teknik.blogspot.com.

Anda juga bisa meneliti kata kunci yang paling banyak dicari orang (tentu harus berhubungan dengan produk yang Anda jual) di https://adwords.google.com/select/KeywordToolExternal

Anda bisa mengecek ketersediaan alamat blog yang Anda pilih. Jika
tersedia bisa Anda lanjutkan. Jika tidak tersedia, maka Anda harus
kreatif mencari nama lain atau memodifikasi alamat yang sudah ada,
misalnya ditambahkan abc, xzy, 101, dan bisa juga dengan menyisipkan
nama Anda.

Lanjutkan dengan klik tanda panah bertuliskan LANJUTKAN.



Proses Pembuatan Blog 

Langkah ke 4 Blog Template  

Pilih desain yang sesuai dengan selera Anda. 

Berhasil? Tentu saja berhasil, memang
mudah koq. Jika berhasil, Anda akan diarahkan ke halaman seperti yang
ada pada gambar dibawah.

Pilihlah tema yang sesuai dengan selera Anda. Jika tidak ada yang sesui
dengan selera Anda, jangan khawatir, nanti masih banyak pilihan tema
yang bisa Anda install sendiri. Sekarang pilih saja tema agar proses
pembuatan blog bisa diselesaikan. Anda bisa preview tema dengan klik gambarnya.

Untuk Memilih tema Anda klik (tandai) bulatannya o seperti pada gambar dibawah. Lihat yang saya tunjuk dengan panah merah buatan saya.

Setelah itu Anda klik tanda panah yang bertuliskan LANJUTKAN



Memilih Tema 

Belajar Membuat Blog Selesai  

Sekarang tinggal posting, pengaturan, dan tata letak 

Selamat, sekarang Anda sudah memiliki sebuah blog. Sekarang Anda sudah mulai bisa memposting pemikiran Anda di blog dan dibagi ke seluruh dunia (eh Indonesia).

Memang masih ada beberapa hal yang harus Anda lakukan, yaitu pengaturan,
tata letak, penambahan eleman, dan penggantian tema jika Anda
menginginkan tema yang lain. Ini untuk tingkat lanjut.

Setidaknya, Anda sudah memiliki blog dan bisa posting. Hal ini sudah cukup untuk tahap awal. Untuk mendalami masalah Blog lebih dalam, saya anjurkan seringlah berkunjung di blog ini..

Sebab blog saya ini sering juga membahas cara mempercantik (dekorasi blog), Dan ada beberapa gadget yang saya postingin boleh dilihat dihalaman gadget,jika anda mengalami kesulitan,anda dapat tanyakan dalam forum komentar,jika kami dapat membantu,pasti akan kami usahakan.

Gadget News Posts

Cara Membuatnya :

Masukkan kode dibawah ini ke halaman web Anda (sebelum tag </body> tag):

(Atau di Tambah Gadget,html Java/Script,lalu masukan Skript dibawah ini),-

terserah mau pilih cara yang mana,hehe...

Di bawah ini Sript aslinya yang belum ada link dan keterangan


Keterangan :

Gadgetnya sama seperti dibawah sudut kanan Postingan ini.

Sesudah anda membuatnya,tolong berikan sedikit komentar anda,Thangs
Heder Ganti Gambar Otomatis

Membuat header otomatis berganti gambar. Contoh ini untuk ukuran Header lebar 980px dan tinggi 160px. Ingat untuk mendapatkan URL gambarnya, bisa anda upload dulu ke hosting gambar. Cara Mebuatnya ikuti instruksi di bawah ini :

1.Masuk Ke akun Blogger Anda,Pilih Rancangan,Edit HTML

2.Cari Kode </head>,Setelah ketemu,Copy paste kode di bawah ini.

3.Tepat Diatas Kode </head>,Simpan Template.

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:980px;
height:160px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:980px;
height:160px;
border:none;
}
#slideshow-caption {
width:980px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

4.Selanjutnya pilih Rancangan,Tambah Gadget,html java/script.

5.Copy paste code dibawah ini kedalamnya.

<ul class="slideshow">

<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 1 DISINI" alt="MASUKAN Description POST 1 DISINI" /></a></li>

<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 1 DISINI" alt="MASUKAN Description POST 1 DISINI" /></a></li>

<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 1 DISINI" alt="MASUKAN Description POST 1 DISINI" /></a></li>

<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 1 DISINI" alt="MASUKAN Description POST 1 DISINI" /></a></li>

</ul>

Sekian dulu postingan kali ini,semoga bermanfaat,saya mohon bantuannya untuk memberikan sedikit komentar untuk postingan ini.

Cara Membuat Slider Gambar Untuk Header

cara menambahkan slider jquery konten ke blog atau website Anda. Contoh ini untuk ukuran gambar 307px lebar dan 254px tinggi slidernya. Ingat untuk mendapatkan URL gambarnya, bisa anda upload dulu ke hosting gambar. Cara Mebuatnya ikuti instruksi di bawah ini :

1.Masuk Ke akun Blogger Anda,Pilih Rancangan,Edit HTML

2.Cari Kode </head>,Setelah ketemu,Copy paste kode di bawah ini.

3.Tepat Diatas Kode </head>,Simpan Template

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });

          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpT6QY8GzkhUl8nLyKg3kSWWcp_TMk0W6csoGiXqG5YAHx2WcUjk_4DwQh3RCwdsD76ClTjmYDRBd2lZBm-35nvqJT5UfFXcsqNoJf2GQS22wAI0xK_mmSzAUx1SjWlbiPAEBE062KLpJs/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpT6QY8GzkhUl8nLyKg3kSWWcp_TMk0W6csoGiXqG5YAHx2WcUjk_4DwQh3RCwdsD76ClTjmYDRBd2lZBm-35nvqJT5UfFXcsqNoJf2GQS22wAI0xK_mmSzAUx1SjWlbiPAEBE062KLpJs/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4.Kemudian pilih Rancangan,Tambah Gadget,html java script,Trus masukan kode dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-DISINI'><img src='SLIDE-1-URL-GAMBAR-DISINI'/></a></li>
<li><a href='SLIDE-2-LINK-DISINI'><img src='SLIDE-2-URL-GAMBAR-DISINI'/></a></li>
<li><a href='SLIDE-3-LINK-DISINI'><img src='SLIDE-3-URL-GAMBAR-DISINI'/></a></li>
<li><a href='SLIDE-4-LINK-DISINI'><img src='SLIDE-4-URL-GAMBAR-DISINI'/></a></li>
<li><a href='SLIDE-5-LINK-DISINI'><img src='SLIDE-5-URL-GAMBAR-DISINI'/></a></li>
</ul>
</div>

Lihat contohnya Klik disini

Sekian dulu postingan kali ini,Saya mohon berikan sedikit komentar anda pada postingan ini.

Yahoo Media Player

Yahoo Media Player adalah cara termudah  untuk  memutar  file audio dari website atau blog Anda.Pemutar ini akan bekerja bila anda klik pada nama file audionya.

Ini adalah fitur utama dari Yahoo Media Player:



     * Menambahkan audio ke situs Anda dengan satu baris HTML

     * Menggunakan sederhana,untuk hack HTML markup-

        tidak rumit, mengantarkan di REAL Media Web

     * Desain magical mengambang tidak pernah hilang,-

        tersedia ketika Anda membutuhkannya,-

        keluar dari jalan ketika Anda tidak membutuhkannya

     * Secara otomatis menemukan semua link audio pada halaman-

        Anda, mengubah halaman Anda ke daftar putar

     * Dapat memainkan semua entri musik blog Anda,dengan mengklik-

        tombol tunggal

     * Memungkinkan Anda untuk menempatkan tombol bermain di mana-

        mereka berada: DALAM KONTEKS

     * Pengunjung blog dapat tetap berada dihalaman blog,jika ingin memutar lagu

     * Pilih gambar sesukamu dan jadikan sebagai cover art

     * Jika dibutuhkan dapat di download, diinstal, atau perbaikan

Cara Membuatnya :

1.Masuk ke akun blogger mu,Rancangan,Edit HTML

2.Cari kode berikut ini </head>

3.Copy paste kode dibawah ini,letakkan tepat diatas kode </head>,Simpan Template

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

4.Sekarang masuk,Rancangan edit tata letak,tambah Gadget,html java/script

5.Copy paste code dibawah ini,lalu Simpan

<a href="MASUKAN_URL_FILE-MP3 DISINI">Nama_File</a>

Catatan :

* Ubah yang saya tandai dengan warna/huruf besar

* Contoh

<a href="http://mediaplayer.yahoo.com/example1.mp3">Link pertama</a>

Sekian dulu toritorial

Cara Pasang FeedShare + Pencari Kustom

 



Cara pasang gadgetnya sebagai berikut :

1.Masuk ke Akun blogger mu,pilih Rancangan.

2.Edit HTML,cari kode ini </head>

3.Masukan kode dibawah ini,tepat diatas kode </head>,Simpan.

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

4.Masuk Eleman Laman,tambah gadget,html java/script.

5.Masukan kode dibawah ini,Simpan.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQ3yMzOSnro19d6w0ubMeBXdckTtEzGPOExSqzx3I56QFVDKJBFWfWMVSWcGW9oEAra-ePCUQy6ngNZ4_-eFGWWQ_XQW-em6ZOCX093nq2L32zr89qqtEcXk-3luausmb5esO7kdSMSeL/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjfu5-oBWxc-ZD7znkt-w4CZ_IWY5dsf80v99bc7Mzj61xVspfeJ73aiwdDKY5O7VjmRkxpofnJWjV18KZGSSKEiz2Gdk4qQTH19E7FCkHCR8pyIGKOjBUcUmFfulkPoYUiUrep8Q_MlJ/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHU8BY0DpaiKgmguvHMm33EWe4ycr363Yrus0pYmaFMePXg3oihe1MzosI9u1jG0F2SOhvwTaFdDkOW6fCjx6Rcqm3Nx8Or55QE7s8tGLb5vJaPZtLhs8muMpZm2sLeiLbeNKnGzKGZWPI/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRn7Ptn6L2yqLD5u8kVyde1LsE3VGcVo9Sq1akQlSjngGmS20sk2B8duU1wa6Z60z631CPe2uY2nwMiD6WOtKuU55jYDZ-d2WMs4BcYak8ofGM6wHB7GyEOZdXC5QfQc62dBJN4V7UUHj/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.beautifullshop.co.cc/" target="_blank">B3N7Y BLOG</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjosm5ccT38ZADS_SSHUOWV4kW7fyB0or3KiFtwYlDL2Ujh08w5qFo9188-xfj231FYWqFDFVxm5rw66eJkGOi7snAJ-xT2YpiPOTKBbmuTcyHduxg4i0rVzwV9xZmLaX7gzvBsbXkJais/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixfJMpnrkn-dchsTPy8LEL8EraCMSj_W-NB1htuUVItMZSPr8ZKEUK-V_v4kVnX7LFrXgE1fVhHyxPaVwG2ENMkMUtAwq-D4IASRAehFF5DV4TJKRNL4oguW7z40zZcFE34UWcjynHmw/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIG1_Fu0N-UCXQ0ob_m1hEhFKBlGWGhaR4z77kBrteuHJd-XMH8My111mJVBo6EIpqeN7Qu0IOurJEZMuNFhkScbG_htlp-85y3R7AC5wY0V7TSg1hQWdUTCQd0hLq4yXNfizLciCC7Vk/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1urO38K_QOlMAcX8JRUPpZ0_MrKeT-8JmjNhEb56enWGG9VPbbkC1ObFAbJhx0Z3tMfYoFWtpOcsdPXEWcnjJdZE8PovSq9u_TqLMNm8T6Hoe9BxHKlSPcuzNZ0nZ1hHoioUEJqQizY/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7N9x_YAf3Wbzjv5D6DxoS9trQktb7cUSvWy9XU3tz2zXTubXhsSGq3tvxtlYrG5cuXlihwyGETFmzRL-BAprrJ95NjGwk3UbqqzOLgfEDLUJKamliWF7ooCZpi3rpIfr69W17XNHS0c/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgg6X2GH-2YDO5XfttkpW86JiDfgvjqDw6KJdthUDXAJzwRUtkaK9OuhPgnAGMv1fAJSqfPJe8RWov4MBCyRGf9q0QmwhqeE3T9i3sij3zDxVhlJZCZjvrizqNjN8hkgSPF6Gw5VuEt8/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QqlC3crPuWA0OEEavmOAIA7L13Xc2aWRF0GZd67TA2vnP6dg_zcdDQW8mYEQxMb-f5hpbRhRsyGOp_2dn4DcWjIro9swJw96MUOnRu9WD7FJcSLh1NTTuVBOeBy8Pty8VFQn-t1w12Y/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Selamat mencoba,sekiranya dapat membantu.

Sekian dulu pembahasan kali ini,jika Gadget ini bermanfaat,mohon berikan komentar anda pada postingan.

Cara Pasang Google Translate (penerjemah)

Cara Memasang Gadgetnya

1.Masuk Keakun Blogger mu

2.Pilih edit tata letak,tambah gadget

3.Pilih html java/script,masukan salah satu kode dibawah ini,dan simpan

Gadget I
<div style="border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:#FFFFFF;">

<!---GOOGLE TRANSLATE MINI FLAGS--->
<div align="left">

<!-- Add English to Chinese (Simplified) BETA -->

<strong> Google Translate</strong>™<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/>  Chinese</a>

<!-- END English to Chinese (Simplified) BETA-->

<br/>

<!-- Add English to French -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>

<!-- END English to French -->

<br/>

<!-- Add English to German -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>

<!-- END English to German -->

<br/>

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>

<!-- END English to Italian -->

<BR/>

<!-- Add English to Japanese BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<!-- END English to Japanese BETA -->

<br/>

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>

<!-- END English to Korean BETA -->

<br/>

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>

<!-- END English to Russian BETA -->

<br/>

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>

<!-- END English to Spanish -->

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.beautifullshop.co.cc" target="_blank">?</a> <a href="http://www.madtomatoe.com/google-translate-mini-flags-widget" target="_blank">Grab this Widget</a></small><br/>

</div>

Tampilannya seperti Gambar dibawah ini :


Gadget II
<div style="border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:none;margin:7px 0 7px 0;">

<!---GOOGLE TRANSLATE MINI FLAGS--->
<div align="left">

<!-- Add English to Chinese (Simplified) BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/>  Chinese</a>

<!-- END English to Chinese (Simplified) BETA-->

<br/>

<!-- Add English to French -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>

<!-- END English to French -->

<br/>

<!-- Add English to German -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>

<!-- END English to German -->

<br/>

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>

<!-- END English to Italian -->

<BR/>

<!-- Add English to Japanese BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<!-- END English to Japanese BETA -->

<br/>

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>

<!-- END English to Korean BETA -->

<br/>

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>

<!-- END English to Russian BETA -->

<br/>

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>

<!-- END English to Spanish -->

</div>

<span >Powered by</span> <br/>
<strong>Google</strong>™ Translate<br/>
<span ><a href="http://www.beautifullshop.co.cc" target="_blank">?</a> <a href="http://www.madtomatoe.com/google-translate-mini-flags-widget" target="_blank">Grab this Widget</a></span>

</div>

Tampilannya seperti Gambar dibawah ini : 

[google-translate-mini-flags2.jpg]

Gadget III
<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:235px; margin: 5px 0 5px 0;">

<!--GOOGLE TRANSLATE MINI FLAGS-->
<div align="center" style="width:auto;">

<!-- Add English to Chinese (Simplified) BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>

<!-- END English to Chinese (Simplified) BETA-->

<!-- Add English to French -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>

<!-- END English to French -->

<!-- Add English to German -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>

<!-- END English to German -->

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a>

<!-- END English to Italian -->

<!-- Add English to Japanese BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>

<!-- END English to Japanese BETA -->

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>

<!-- END English to Korean BETA -->

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>

<!-- END English to Russian BETA -->

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>

<!-- END English to Spanish -->

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.beautifullshop.co.cc" target="_blank">?</a> <a href="http://www.madtomatoe.com/google-translate-mini-flags-widget" target="_blank">Grab this Widget</a></small><br/>

</div>

Tampilannya seperti Gambar dibawah ini :


Gadget IV

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:180px; margin: 5px 0 5px 0;">

<!--GOOGLE TRANSLATE MINI FLAGS-->
<div align="center" style="width:auto;">

<!-- Add English to Chinese (Simplified) BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>

<!-- END English to Chinese (Simplified) BETA-->

<!-- Add English to French -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>

<!-- END English to French -->

<!-- Add English to German -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>

<!-- END English to German -->

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a><!--END English to Italian--><BR/><!--Add English to Japanese BETA--><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>

<!-- END English to Japanese BETA -->

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>

<!-- END English to Korean BETA -->

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>

<!-- END English to Russian BETA -->

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>

<!-- END English to Spanish -->

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.beautifullshop.co.cc" target="_blank">?</a> <a href="http://www.madtomatoe.com/google-translate-mini-flags-widget" target="_blank">Grab this widget</a></small><br/>

</div>

Selamat Mencoba,semoga totorial gadget ini bermanfaat,untuk kemajuan blog ini,tolong berikan sedikit komentar anda.
0 komentar

Tutorial Blogger Sampai Anda Bisa (Bagian-2)

Sabtu, 12 Februari 2011 | Diposting oleh blog.it | | Edit Entri
Gadget News Posts

Cara Membuatnya :
Masukkan kode dibawah ini ke halaman web Anda (sebelum tag </ body> tag):
Di bawah ini Sript aslinya yang belum ada link dan keterangan


Pasang Tombol Donasi Via Paypal di Blog





Salom para sahabat blogger,kali ini kita membahas mengenai paypal,pasang tombol via paypal akan sangat berguna buat kamu yang mau berbisnis online,mungkin juga terima donasi (sumbangan) dari pengunjung blog. donasi disini
artinya bukan kita minta-minta, tapi barangkali ada pengunjung
favorit atau yang suka ma artikel blog kita trus mereka pengen sedikit
bantu blog kita bisa trus berkarya, y mereka bisa memberikan donasi via
paypal ini..atau bisa juga ada orang yang mungkin terlalu kebanyakan
duitnya di paypal trus dia pengen bagi2 rezekinya(mungkin kah..?, hehe..)..y mereka bisa kirim donasi lewat tombol
ini..
canda,hehe.., nah sekarang buat kamu yang pengen pasang tombol   

 donasi tersebut..begini caranya :

1. Harus punya paypal dulu pastinya, klo belum punya.. klik disini

2. Login di paypal kamu, lalu pilih "Merchant Services"

3. Setelah masuk di bagian "Merchant Services" lihat di bagian bawah ada-

    "Key Features" (di sebelah kanan)..lalu pilih yang "Donations"

4. Selanjutnya kamu bakalan masuk di menu "Create Paypal Menu Button" lalu tinggal isi deh..

untuk petunjuk pengisiannya :

a. Step 1

- Accept payments for : kamu pilih yang "Donations"
- Organization name/service : kamu isi "Nama organisasi (klo ada) atau Nama kamu aja"
- Donation ID (optional) : Kamu isi kode donasinya, bisa diisi alamat blog km..
- Pada bagian "Customize Button", klik "Customize Appearance" lalu ada 2 bagian :

1. Paypal Button (tinggal pilih aja buat tampilannya). untuk bagian country biarkan saja "international"
2. Use your own button image (klo kamu punya gambar / tampilan sendiri)

- Currency biarkan saja pake "USD"
- Contribution Amount..

1. Donors enter their own contribution amount artinya orang yang memberikan 

    sumbangan bebas untuk menentukan jumlah sumbangannya

2. Donors contribute a fixed amount artinya orang yang akan memberikan sumbangan

    akan memberikan sumbangan sesuai dengan nilai yang telah kita tentukan..

5. Untuk step 2 dan Step 3 biarkan saja

6. Terakhir, klik "Create Button"

7. Lalu copy paste kodenya ke blog / situs kamu..

8. "langkah selanjutnya"
    "Layout"---->"Add A Gadget"---->"HTML / JavaScript"---->"Paste disitu kodenya"

Ahirkata,selamat mencoba semoga bermanfaat.

cara membuat balasan email otomatis

Salom para sahabat blogger yang budiman,untuk turitorial kali ini saya mau membahas cara balas email secara otomatis,bagi sahabat yang terlalu sibuk beraktifitas atau sering keluar kota,tentu tidak dapat membalas semua email yang masuk,mungkin cara ini anda bisa atasi persoalan itu dengan email jawaban otomatis. Jadi setiap email yang masuk pada anda, akan mendapatkan jawaban otomatis.

Langsung saja mari kita bahas cara membuat jawaban otomatis email…



Untuk Yahoomail.

1. Pertama silakan anda  masuk (sign in) ke email
anda dengan memasukkan Yahoo ID  serta password. Setelah masuk ke dalam
halaman email yahoo anda, silakan klik tulisan option (opsi) pada kanan atas dan klik mail option.




2.    Lalu pada halaman baru yang terbuka, anda pilih vacation response dan bila fitur tersebut belum diaktifkan anda bisa klik enable auto- response during your vacation untuk mengaktifkannya.



3.    Kemudian anda akan dibawa ke halaman baru. Dan di sana anda bisa atur duration (waktu jawaban email otomatis tersebut diaktifkan). Anda bisa atur dengan mengatur tanggal aktif (start date) sampai akhir tanggal aktif (end date). Serta pada generic response, bisa dilengkapi dengan pesan singkat anda. Misalkan berupa pesan sebagai berikut:


Terimakasi atas emailnya,segera saya akan membalasnya,

Salam,

Liu Benz

http://beautifullshop.co.cc

PS : Sambil menunggu anda dapat kunjungi blog saya di :

http://www.beautifullshop.co.cc/id=liu.benz


Pada teks berwarna merah, sesuaikan dengan ID formulabisnis anda. Bila sudah klik turn auto-response on.


Untuk gmail

1. Silakan sign in ke Gmail anda. Kemudian klik settings yang terletak di kanan atas.


2. Kemudian pada tab General anda cari Vacation responder, pilih Vacation responder on, dan masukkan pesan anda pada subject and message. Misalnya seperti pesan berikut ini:
Terima kasih. Segera saya akan membalasnya.
Salam,
Liu Benz                                                                                                                    
PS: Sambil menunggu, anda bisa kunjungi http://www.beautifullshop.co.cc/?id=bisnisLiu
Dan jangan lupa klik save changes pada bagian bawah halaman.

Mudah kan? Anda bisa praktekkan tips di atas saat beraktifitas seperti kerja atau keluar kota.

Ahirkata,selamat mencoba semoga bermanfaat

SET CUSTOM DOMAIN CO.CC DI BLOGGER

Salom Para Sahabat Blogger Yang Budiman,Untuk Tutorial kali ini saya akan Menunjukan langkah-langkah cara melakukan setting custom domain dengan subdomain co.cc di blogger.

Jika sudah memiliki domain .co.cc, anda bisa langsung signin menggunakan account .co.cc anda


Jika belum memiliki domain, anda bisa daftar terlebih dahulu ke alamat ini http://www.co.cc


Cek apakah domain yang anda inginkan bisa digunakan atau tidak. Ketik nama Domain, kemudian tekan Enter


CEKNYA DISINI AJA


Bisa juga melakukan cek domain menggunakan tools diatas. Kemudian tipe domain yang anda inginkan bayar atau gratis. (Disarankan bagi anda yang masih pemula, ada baiknya menggunakan domain yang gratis/free.)


Kemudian klik Continue to Registration, untuk melakukan registrasi

Kemudian klik Setup. (Domain anda akan hangus jika tidak disetup selama 48 Jam/2 hari).

Setelah domain anda di setup, kemudian sign ke blog anda. Lalu masuk ke
menu pengaturan di account blog anda. Jika belum mempunyai account
blogger, terlebih dahulu anda mendaftarkan diri anda ke alamat ini http://www.blogger.com



Setelah itu masuk ke blogger dashboard -> Settings -> Publishing -> Custom Domain




Karena kita sudah memiliki domain yang sudah kita daftar sebelumnya, kemudian klik [switch to advanced settings]




Masukkan nama domain yang sudah anda daftarkan sebelumnya di page [Advanced Settings], kemudian klik [Save Settings]

Kemudian kembali ke http://www.co.cc,
login menggunakan account domain anda, masuk ke menu Manage Domain ->
Zone Records. Adan empat kolom yang harus diisi, yaitu Host, TTL, Type,
Value. Isi Host dengan nama domain anda, isi TTL dengan 1 D, Type
menggunakan CNAME, dan Value dengan ghs.google.com. Setelah selesai,
klik Setup. Contoh bisa lihat gambar dibawah (Gambar 9 Setting Zone
Record Domain .co.cc)


Kemudian Klik Set Up. Proses setting DNS Anda telah
selesai. Tunggulah kurang lebih 2  jam agar server dapat
memverifikasi DNS Anda.

Selamat menikmati alamat blog anda yang baru.

Cara Membuat Menu Daftarkan Email Anda Pada Blog

Salom dan selamat pagi para sahabat blogger yang budiman,pada pertemuan pagi ini saya mau menunjukan cara membuat menu daftarkan email anda,yang saya sesuaikan dengan judul pada postingan ini,saya rasa menu ini cukup bermaafaat buat sahabat blog yang sering membuat artikel blog,disamping itu menu ini sekaligus menjadi feed untuk blog kita,untuk pengunjung blog yang sudah mendaftarkan emailnya di blog kita,akan secara otomatis dikirimin artikel postingan kita,jadi buat pengunjung yang mau berlangganan artikel postingan kita,cukup hanya mendaftarkan emainya saja,jadi cukup mudah untuk berlangganan artikel blog,kalau sudah membuat menu ini di blog para sahabat blogger.Cara membuatnya saya menggunakan jasa FeedBurner,miliknya Mmbah Google..,Untuk memulai memasang feed tersebut,ikuti langkah-langkah berikut ini:

1. Login ke Blogger. (Agar anda tidak melakukan Login 2x, dengan login ke Blogger, maka akun FeedBurner anda otomatis aktif, itu karena  keduanya buatan mmbah google),hehe..

2. Lankah selanjutnya sigin Web FeedBurner.

3. Lalu ketikkan alamat blog anda di kotak "Burn a feed right this instant" dan centang kotak "I am a podcaster!" >> Klik Next>>

4. Pilih bentuk Feed yang anda inginkan. Atom atau RSS


5. Kalau yang tampil sesuai dengan nama blog anda, langsung klik next>>

6. Selanjutnya FeedBurner anda telah aktif dengan ditandai munculnya halaman berikut ini (kalau tidak ada masalah, silahkan langsung untuk mengklik Next):

7. Ketika anda berada di halaman "Set up podcast", silahkan langsung klik Next. (Bagi anda yang ingin mengubah beberapa setting-an, silahkan):

8. Di halaman "Analyze traffic", silahkan untuk mencentang semua kotak yang kosong, lalu klik Next>>

9. Sekarang FeedBurner anda telah ter-update dengan munculnya halaman seperti berikut ini, lalu untuk langkah selanjutnya, silahkan untuk mengklik pilihan Publicize



10. Pilih opsi Email Subscriptions

11. Aktifkan "Email Subscriptions" anda.

12. Setelah "Email Subscriptions" anda aktif, maka langkah selanjutnya adalah: Memilih di antara dua kode yang tersedia, "Subscription Form Code" atau "Subscription Link Code" (Kedua-duanya juga boleh). Tampilan:

13.Pilih salah satu scriptnya...! Yang jelas kedua-duanya memiliki fungsi yang sama. Selanjutnya kopi kode yang anda pilih, copy paste ke kotak "JavaScript/HTML" (Kembali ke Blogger):

Edit Tata Letak >> Tambah Gadget >> JavaScript/ HTML.

14. Simpan,ok Selesai..,sekarang anda sudah mempunyai menu feed,untuk daftar email buat pengunjung Blogmu

Ahirkata,Selamat mencoba,semoga bermanfaat.

Cara Membuat Bubble Tooltip di Blog

Salom Sahabat Blogger,pada pertemuan kali ini saya mau membahas bagaimana cara membuat bubble tooltip diblog,adapun salah satu kegunaannya adalah kita dapat menghemat ruang blog kita dengan memasang bubble tool,di menu tampilan utama kita tidak perlu untuk menampilkan segala informasi yang ingin kita tampilkan,para pengunjung cukup mengarahkan cursor pada gambar atau text,kita sudah dapat mengarahkannya pada link atau laman yang ingin kita tunjukkan.untuk membuatnya ikuti langkah dibawah ini :

1. Login ke Blogger

2. Saat di dasbor pilih edit tamplate/tata letak

3. Lalu pilih Edit HTML

4. kemudian Cari Kode ini ]]></b:skin>

5. Setelah ketemu,Copy Code Dibawah ini dan Taro Diatasnya

/*---------- bubble tooltip -----------*/

a.tt{ position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px; color: #993300;

text-align: center;

 filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

 display: block;

padding: 30px 8px 0;

background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;

}

6. Jika Sudah Selesai,Klik Simpan Template

Selanjutnya Untuk membuat teks yang memiliki bubble tooltip silakan copy kode di bawah ini :

klik <a class='tt' href='Tujuan link yang di inginkan'>di sini<span class='tooltip'></span><span class='top'/><span class='middle'>untuk konfirmasi</span><span class='bottom'/></span></span></a>

Hasilnya Akanterlihat seperti ini :

Keterangan :

   1. Link biru : bisa anda gunakan untuk membuat link ke arah artikel lain, bisa juga di kosongkan jika tidak   diperlukan.

   2. Link hijau : adalah teks yang akan di buat bubbletip, yang mana bila disorot oleh mouse maka akan muncul keterangan tambahan yang telah anda buat

   3. Link warna pink adalah keterangan tambahan yang ingin anda tambahkan.

Ahir kata Selamat Mencoba,semoga bermafaat ,Sumber artikel Kumpulan Informasi Maya

Cara Pasang Video Youtube Ke Blog

Salom Sahabat Blogger,Pada pertemuan pagi ini saya mau menunjukan caranya memasang pemutar video youtube ke blog,saya lihat banyak para sahabat yang sudah mempostingin Tutorial ini,tapi masi postingan cara yang lama,karena ada beberapa pembaruan yang dilakukan oleh pihak youtube,Untuk itu saya merasa masih perlu mempostingkan Tutorial ini.Caranya cukup mudah ikuti langkah-langkah berikut ini :

1. Loging Ke www.youtube.com

2. Cari Video Yang Ingin Kamu Tampilkan.

3. Kemudian Klik Embed,yang ada dibagian bawah pemutar youtube.








4. Copy Paste Embednya,simpan di notepad dulu.














Keterangan :

* Semakin besar ukuran Videonya yang akan ditampilkan,maka akan semakin

   berat pula memutar Videonya.

* Kalau anda ingin memasangnya di postingan :

1. Buatlah postingan baru

2. Setelah masuk tempat postingan, pilih Edit HTML

3. Paste kode yang telah kamu copy tadi di dalam Edit HTML

4. Setelah selesai, Pindah ke Compose.

5. Lalu terbitkan. dan lihat hasilnya

* Bila anda ingin memasangnya sebagai widget :

1. Pilih Rancangan

2. Tambah Gedget baru

3. Pilih HTML/javascript

4. Paste hasil copy td disini

5. Simpan.

5.Selesai Sudah,ahir kata Selamat Mencoba Semoga Bermafaat

Cara Menambahkan Radio Online Ke Blog

Salom Sahabat Blogger,Pada Pertemuan Kali ini Saya Mau Menunjukan Cara Memasukan Pemutar Radio Online Pada Blog Kita,Pada Saat ini Banyak Cara Kita Untuk Memperindah Blog Kita Seperti Penenpatan Wedget Ke Blog,Yang Salah Satunya,Seperti Pemutar Video Youtube,Pemutar Mp3,TV Online Dan Banyak Lagi Kreasi Lain Yang Dapat Kita Lakukan Untuk Memperindah Blog Kita,Untuk Saat ini Saya Mencoba Menunjukan Salah Satu Diantaranya,Yaitu Memasukan Pemutar Radio,Ok Sekarang Sahabat Blogger Boleh Ikuti Langkah-Langkah Berikut ini :

1. Login Blogger

2. Klik Rancangan/Design

3. Tambah Gadget / Add a Gadget

4. Anda pilih HTML/javascript

5. Masukan kode dibawah ini:

<center><embed style="margin-top: 0px;" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" autostart="true" displaysize="0" showstatusbar="1" type="application/x-mplayer2" src="http://ceriaradio.com:8000/" name="RAOCXplayer" allowscriptaccess="never" height="70" width="278"></embed></center>
<div style="text-align: center;">
<span ></span></div>

Catatan :

* Untuk Ukuran Dapat Diubah Sesuai Dengan Template Blog.

* Yang Saya Tandai Dengan Tulisan Warna Merah,Adalah

   Panjang Dan Lebar Pemutar Radionya

6. Selesai Sudah Coba Dilihat,Sekarang Sahabat Blogger

    Sudah Mempunya Radio Online Di Blog Sobat.

Ahir Kata Selamat Mencoba Semoga Bermafaat.

Cara Membuat Button Shared Tweeter

Salom Sahabat Blogger,Pada Pertemuan Kali ini Saya Mau Menunjukan Cara Membuat Button Shared Tweeter Dibawah Postingan Blog Kita,Caranya Cukup Muda Anda Cukup Ikuti Langkag-Langkah Dibawah Ini :



1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Rancangan.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode <div class='post-header-line-1'/> atau <div class='post-footer'>

6. Taruh kode berikut (dari twitter) di bawahnya

<a class='twitter-share-button' data-count='horizontal' data-via='amien.ziec'
expr:data-text='data:post.title' expr:data-url='data:post.
url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

Catatan :

* Untuk Username Yang Saya Tandai Dengan Tulisan Warna Biru Ganti Dengan,

   Username Tweeter Dari Sahabat Blogger Sendiri.

Ahir kata,Selamat Mencoba Semoga Bermanfaat.

Cara Menambahkan Button Facebook Like

Salom Sahabat Blogger,Pada pertemuan kali ini saya mau menerangkan cara menambahkan Button Facebook Like Dibawah Postingan Kita,caranya cukup mudah,ayo ikuti langkah dibawah ini :




1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Rancangan.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode berikut ini <div class='post-footer'>

6. Setelah itu taruh kode berikut ini di bawahnya

<iframe allowTransparency='true' expr:src='&quot;
http://www.facebook.com/plugins/like.php?href=&quot;
 + data:post.url + &quot;&amp;action=like&amp;
layout=button_count&amp;show_faces=false&amp;
width=100&amp;font=arial&amp;colorscheme=dark&quot;
' frameborder='0' scrolling='no' style='border:none;
 overflow:hidden; width:100px; height:21px;'/>

7.Selesai sudah,Klik Simpan Template.

Ahir kata Selamat Mencoba Semoga Bermanfaat

Cara Hapus Navbar Di Blog

Salom Sahabat Blogger,Pada pertemuan kali ini saya mau menunjukan cara menghapus Navbar Blog,Caranya sangat mudah,ayo ikuti langkah dibawah ini :


1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Rancangan.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5.Cari Kode seperti dibawah ini

   <b:skin><![CDATA[/*

   ----------------------------- */
6.Setelah ketemu,taro kode CSS dibawah ini Dibawahnya.

   #navbar-iframe {

   height:0px;
   visibility:hidden;
   display:none
   }
7.Selesai sudah,klik Simpan Template Dan lihat hasilnya.

Ahir kata,Selamat mencoba,Semoga Bermanfaat.

Cara Menghapus Header Blog

Salom Sahabat Blogger,Pada pertemuan kali ini saya mau menunjukan cara bagaimana menghapus header blog,Mungkin ada dari sahabat blog yang ingin menghapus header atau judul blog dan menggantinya dengan script iklan,mungkin juga baner flash.Untuk menghapus header blog sangatlah mudah,ayo ikuti langkah dibawah ini.

1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Rancangan.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5.Cari Kode Berikut ini showaddelement=

6.Setelah Ketemu,akan terlihat kode seperti dibawah ini

   showaddelement=’no‘/>

   <b:widget id=’header’ locked=’true‘

7.Gantilah tulisan yang saya tandai dengan warna merah no dengan yes,true dengan false

   Seperti dibawah ini

   showaddelement=’yes‘/>

   <b:widget id=’header’ locked=’false‘

8.Setelah selesai klik Simpan Template dan keluar.

9.Masuk Kemenu Tata Letak,pilih Edit Header,setelah masuk,di Hapus

Selesai Sudah,tinggal sahabat blogger Menambahkan Gadget Sesuai kreasi dan keinginan dari Sahabat Blogger Sendiri.

Ahir kata,selamat mencoba,semoga bermanfaat.

Cara Membuat MP3 Player Di Blog

Salom Saabat Blogger,Pada Pertemuan Kali ini Saya Mau Membahas Tentang Cara Memasukan Pemutar MP3 Di Blog Kita.Saya Yakin Para Sahabat Blogger Sudah Tau Cara Membuatnya,Tapi Saya Rasa,Mungkin Ada Sebagian Kecil Dari Sahabat Blogger Yang Masi Belum Tau Caranya,Jadi Saya Rasa Tidak Ada Salahnya Saya Coba Mempostingin Lagi Cara Membuatnya,Caranya Cukup Mudah Kok,Yang Mau Mencoba Ikuti Cra Berikut ini :


1. Login ke blogger.com

2. Pilih Tata Letak --> Tambah Gadget

3. Selanjutnya pilih HTML/JavaScript

4. Masukan (copy paste) kode di bawah ini


<img style="visibility:hidden;width:0px;height:0px;" border=0
width=0 height=0 src="http://c.gigcount.com/wildfire/IMP
/CXNID=2000002.0NXC/bT*xJmx*PTEyOTIyODA3
OTU5NTMmcHQ9MTI5MjI4
MDgwMTQyMSZwPTU2MjAxMiZkPSZnPTEmbz*xO
DU3ZWZjMmIxY2Y*ZjkzOWNi/YjgwMjdlMTkwODkyYyZvZj
*w.gif" /><div align="left"><object width="275" height="310">
<param name="movie" value="http://kodelagu.net/Skinister
Amp.swf"></param><param name="wmode" value="transparent">
</param><embed src="http://kodelagu.net/Skinister Amp.
swf" type="application/x-shockwave-flash" wmode="transparent"
width="275" height="310"></embed></object></div>
<div align="left" style="background: white;border: solid 1px
#2554c7; width: 274px;text-align:center;font: bold 8pt arial;">
<a style="text-decoration:none; color: #2554c7;"</a></div>

5.Jika Suda Selesai,Klik Simpan Dan Lihat Hasilnya Di Blog.

Selamat Mencoba,Semoga Bermafaaat

Cara Membuat Menu Read More Otomatis

Salom Sahabat Blogger,Pagi ini Saya Mau Menunjukan Caranya Membuat Menu Read More Otomatis,Saya Menyebutnya Otomatis,Karena Read More ini Sudah Secara Otomatis Memenggal Kalimat Yang Kita Postingin Di Blog Kita,Mungkin Sahabat Blogger Pernah Membuat Postingan Yang Lumayan Panjang,Sehingga Satu Postingan Saja Sudah Memenuhi Satu Halaman Blog.Padahal Parahabat Blogger Mau Menampilkan banyak Postingan,Hal ini Mungkin Bisa Membuat Pengunjung Blog Tersita Waktu Untuk Membacanya,Sehingga Meninggalkan Blog Kita.Untuk Membuatnya ikuti Langkah Berikut ini ;

1.Buka Dasbord Blog anda

2.Pilih Menu Tata Letak Edit HTML

3.Jangan Lupa,Centang pada pilihan Expand Template Widget

4.Kemudian Cari Kode ini </head>

5.Setelah Ketemu Taro Kode Dibawah ini Diatasnya

  <script type='text/javascript'>
  var thumbnail_mode = &quot;float&quot; ;
  summary_noimg = 230;
  summary_img = 140;
  img_thumb_height = 100;
  img_thumb_width = 100;
  </script>
  <script src='http://blogergadgets.googlecode.com/files/excerpt.js'
  type='text/javascript'/>

6.Selanjutnya Cari Kode ini <data:post.body/> Setelah Ketemu,Hapus

   Dan Ganti Dengan Kode Dibawah ini

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
  <b:else/>
  <div expr:id='&quot;summary&quot; + data:post.id'>
  <data:post.body/>
  </div>
  <script type='text/javascript'>
  createSummaryAndThumb(&quot;summary<data:post.id/>
&quot;);
  </script>
  <div style='clear: both;'/>
  <span style='padding-top:5px;;float:right;text-align:right;'>
  <a expr:href='data:post.url' rel='bookmark'><b>Read more >>
  </b></a>
  </span>
  </b:if>
  </b:if>

7.Sebelum Disimpan,Lihat Pratinjau,Jika Berhasil Klik Simpan Template

Catatan :

* Ganti Angka Yang Saya Tandai Dengan Warna Merah Sesuai Kreasi Anda.

* Ganti Tulisan Read More Dengan Tulisan Yang Anda Sukai.

   Ahir Kata,Selamat Mencoba Semoga Bermanfaat.

Cara Ganti Background Blog

Salam Sahabat Blogger,Pagi ini Saya Mau Menunjukan Cara Ganti Background Pada Template Blog Kita,Pada Umumnya Template Yang Kita Download,Backgroundnya Sudah Cukup Bagus,Tapi Mungkin Ada Sebagian Blogger Yang Ingin Menggantinya Dengan Kreasi Sendiri Atau Menambahnya Dengan Gambar Animasi Bergerak,Juga Bisa Kita Lakukan,Mau Tau Caranya ?!.

Ikuti Lankah-langkah Berikut Ini :

   1. Sign in

   2. Klik menu Template

   3. Klik menu Edit HTML

   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

   5. Kemudian Cari Kode ini body {

        lihat Contoh Dibawah ini :

 body {
 background:#060000 url('http://apod.nasa.gov/apod/image/0810/ngc6357a_hst_big.jpg');
 margin:0;
Catatan :

*  Kode Yang ini #060000 Adalah  Kode Warna ( Boleh Diubah Sesuai Selera )

*  Kode Yang ini  http://apod.nasa.gov/apod/image/0810/ngc6357a_hst_big.jpg  

    Adalah,Alamat Url Gambar,Ganti Dgn,Url Gambar Dari Sahabat Blogger.

    6.Setelah Diganti,Lihat Dulu Pratinjau,Jika Berhasil Simpan Template.

Selamat Mencoba,Semoga Bermanfaat.
Cara Membuat Iklan Melayang Di Blog

Salom Sahabat Blogger,Hari Ini Saya Mau Menunjukan Cara Membuat Iklan Melayang Di Blog,Caranya Cukup Mudah kok.,Buat Sahabat Blogger Yang Mau Mencoba Silakan Ikuti Langkahnya Sebagai Berikut :

1. Login ke blogger

2. Pilih tata letak kemudian Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukan kode script berikut ini :

<style type="text/css">
#topbar{
position:absolute;
border: 1px solid #666666;
padding: 2px;
background-color: #333333;
width: 480px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0
 or 1. 1 means once the bar is manually closed,
it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or
"frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!=
"BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,
 end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility=
"hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").
offsetHeight
var ns = (navigator.appName.indexOf
("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie
("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.
top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight :
iecompattest().scrollTop + iecompattest().
clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight:
 iecompattest().scrollTop + iecompattest().
clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="" onclick="closebar(); return false">
<span style="float:right">[X]</span></a>
<script src="http://beautifullshop.co.cc
/scahor.php?b=6024" type="text/javascript"></script>
</div>

catatan:

  Ada beberapa yang harus diubah untuk disesuaiakan

  dengan tampilan (template) kita,yitu :

  border: 1px solid #666666;

  padding: 2px;

  background-color: #333333;

  width: 480px;

Keterangan :

  Ganti lebar, warna border, dan backgroud

  sesuai dengan tampilan yang dinginkan.

  Untuk Kode Warna Bisa Dilihat Disamping Kanan Blog ini.

  Dan kode yang ini :

  <script src="http://beautifullshop.co.cc

  /scahor.php?b=6024" type="text/javascript"></script>

   ganti dengan kode banner(gambar) atau dengan

   script iklan.

5. Simpan jika sudah selesai

Cara Membuat Blog Turun Hujan Salju

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. Taruh (copy paste) kode berikut ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://nirav07.110mb.com/jsnow.js' type='text/javascript'/>
  <script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

Catatan :
* Gambar Tidak Boleh Lebih Dari 5px,Biar Terlihat Lebih Cocok.

* URL Gamabar Yang Saya Tandai Dengan Tulisan Yang Berwarna

   Merah,Ganti Dengan URL Gambar,Dari Sahabat Blogger

             
Selamat Mencoba Semoga Bermanfaat

Cara Ganti Logo Blog

*Masuk Kemenu Layout, Edit HTML

*Tekan CTRL+F, masukkan kata </head>

*Taro Kode Berikut Ini Diatas Kode </head>

<link href=' MASUKAN URL GAMBAR DISINI ' rel='shortcut icon'/>

Buat Sahabat Blogger Yang Belum Mempunyai URL Gambar Bisa Dibuat Disini

*Catatan :

              - Untuk Ukuran Gambar Logo Maksimal 25px.

              - Tulisan Yang Saya Tandai Warna Merah Harus Diganti Dengan URL Gambar

                 Sahabat Blogger.

Selamat Mencoba,Semoga Bermanfaat

Cara Membuat Buku Tamu Di Blog

>> Login Blogger

>> Klik Rancangan/Design

>> Tambah Gadget / Add a Gadget

>> Anda pilih HTML/javascript

>> Masukan kode dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

Letakkan disini kode Shoutbox, Iklan, Menu Dll

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

>>Selesai Sudah Membuat Buku Tamu Di Blog.

>>Selamat Mencoba Semoga Bermanfaat.

Cara Membuat Menu View Di Blog

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"

2. Cari kode  ini ]]></b:skin>

3. Masukkan Kode HTML dibawah  ini,Diatas Kode ini ]]></b:skin>

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Menu Utama Atas */ text-align: center;

height: 24px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Warna border Menu Atas */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */

font-weight: 900;

color: #000; /* Warna Font Menu Utama Atas */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Warna border Kotak Utama */

overflow: hidden;

background-color: #FF9900; /* 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;

}

4. Perhatikan Text-Text Yang Berwarna Merah, Itu Adalah Keterangan Untuk Pengaturan Tab View. Ada Ukuran Warna dll. Untuk Mengetahui Kode2 Warna silahkan lihat Di Samping Kanan Blog ini

5. Selanjutnya Yaitu Pasang Kode Berikut ini Di Atas Kode ini </head>

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

6. Kemudian "SIMPAN"

7. Lalu pergi ke menu "Page Elements"

8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.

9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 350px; height: 250px;">



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

Keterangan

-Untuk Text yang Saya Tandai Dengan Warna Dapat Di Ubah Sesuai KeInginan.

-Selamt Mencoba Semoga Bermanfaat

Cara Mengubah Gambar Cursor Di blog

1. Login ke blogger

2. Pilih Tata Letak -> Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukan kode HTML berikut ini

<style type="text/css">body {cursor:url("http://img90.imageshack.us/img90/5195/cursorbc.png"),default}</style>

5. Selesai Dan Simpan

Catatan :

Kode yang Berwarna Merah adalah URL gambar yang ingin kita jadikan pengganti cursor, dan kamu dapat mengganti dengan URL gambar yang kamu inginkan.

Selamat Mencoba,Semoga Bermanfaat.

Cara membuat Tabel Di Blog

Salom...Sahabat Blogger,Kali Ini Saya Mau Menjukan Cara Sederhana Membuat Tabel Di Blog,Dimana Tabel Blog Ini Dapat Kita Fungsikan Sebagai Pemandu Sederhana Untuk Mempermudah Pembaca Di Blog Kita,Agar Dapat Mengerti ApaYang Kita Tulis Dan Apa Yang Akan Kita Sampaikan Kepada Pengunjung blog Kita,Nah Sekarang Langsung Saja Saya Tunjukan Cara Mudahnya Disini :

Masukan Kode html Seperti Di Bawah Ini

<table border="1">
<tbody>
<tr>
<td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td>
</tr>
</tbody></table>

Dan Hasilnya Akan Seperti Ini :

contoh 1contoh 2contoh 3contoh 4

Cara Penempatan Gambar Di Tabel Blog Seperti Contoh Berikut Ini :

<table border="1"><tbody>

<tr>  <td><div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaoFt9z2UqG0FLGJ0KfNp4Yl9ZB9f1dI1Rs503DjJ0hBOXEWPHOYbRNDope3g4KqtYPsoFoVhNU-Z5hK-lx3B3E4Z8llLs7hep6CjRm5CJyQw-bDX0s2CMW_PXjCtbyU5zvFiWciE_-dk/s1600/6760s.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaoFt9z2UqG0FLGJ0KfNp4Yl9ZB9f1dI1Rs503DjJ0hBOXEWPHOYbRNDope3g4KqtYPsoFoVhNU-Z5hK-lx3B3E4Z8llLs7hep6CjRm5CJyQw-bDX0s2CMW_PXjCtbyU5zvFiWciE_-dk/s1600/6760s.jpg" /></a></div>

Contoh Gambar 1

</td><td><div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoyd1Duat1SUFm0Nrfc4Xy0-n9sEp_HrUQD_Q6tdan1iDwhQRV-Dxvgfy91w2HSnWQB-Gm-NuzmrEHpL01PE0LCvvYL8njMT2GhBkegV2Qt6xczC4NrzIcA1ZeVFjuRIlMhyphenhyphen2NzS3zEc/s1600/c3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoyd1Duat1SUFm0Nrfc4Xy0-n9sEp_HrUQD_Q6tdan1iDwhQRV-Dxvgfy91w2HSnWQB-Gm-NuzmrEHpL01PE0LCvvYL8njMT2GhBkegV2Qt6xczC4NrzIcA1ZeVFjuRIlMhyphenhyphen2NzS3zEc/s1600/c3.jpg" /></a></div>

Contoh Gambar 2

</td><td><div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSMdmaRP2K9bPMMml3zeTusMxqIiHI1j2gQEeucKeQUMnopBfc-mgB4jtdTRLIUlZKU3F9RGJNoqsUhRLMs7IYbfJOJp_35ebM7zFpuFAbrQmFhL4h3kUwFdwosdNItTAMih4l6b41xQ/s1600/c6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSMdmaRP2K9bPMMml3zeTusMxqIiHI1j2gQEeucKeQUMnopBfc-mgB4jtdTRLIUlZKU3F9RGJNoqsUhRLMs7IYbfJOJp_35ebM7zFpuFAbrQmFhL4h3kUwFdwosdNItTAMih4l6b41xQ/s1600/c6.jpg" /></a></div>

Contoh Gambar 3

</td><td><div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxWfS2QeWaun-J0nIG2x15WeVuoNwvIpHlNIV0Z4HuoBO985TOh3znifz8hZQMYWMULgJcuGIRGGgFYkXbjKlKAXXNHz2moJKR0avsXkgUbV_kBQFqH5mX6H89CvPNWLELCstlhx0UL4/s1600/e72.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxWfS2QeWaun-J0nIG2x15WeVuoNwvIpHlNIV0Z4HuoBO985TOh3znifz8hZQMYWMULgJcuGIRGGgFYkXbjKlKAXXNHz2moJKR0avsXkgUbV_kBQFqH5mX6H89CvPNWLELCstlhx0UL4/s1600/e72.jpg" /></a></div>

Contoh Gambar 4

</td>  </tr>

</tbody>  </table>

Dan Hasilnya Akan Seperti Ini :

Contoh  Gambar  1



Contoh  Gambar  2



Contoh  Gambar  3



Contoh  Gambar  4

Keterangan :

* Yang Harus Di Ubah Adalah,Tulisan Yang Saya Tandai Dengan Warna Merah

   Dapat Diganti Dengan URL  Gambar Dari Sahabat Blogger Sendiri.

Cara Membuat Tulisan Berkedap-Kedip Di Blog

1. Login ke blogger

2. Pilih Tata Letak kemudian Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukan kode-kode berikut ini

<blink><b>SELAMAT DATANG</b></blink>

5. Sedang untuk yang kita sisipkan link kodenya seperti ini

<blink><a href="http://www.beautifullshop.co.cc/"><b>SELAMAT DATANG </b></a></blink>

6. Kita dapat menganti tulisan yang nampak (SELAMAT DATANG), dengan berbagai keinginan kita. Dan link http://www.beautifullshop.co.cc/ dengan URL yang kita tuju.

7. Simpan kalu sudah selesai.

Cara Membuat Buku Tamu Hiden Di Samping Kiri Blog

Salam,Kali Ini Saya Mau Menunjukan Cara Membuat Buku Tamu Yang Tersembunyi Di Samping Kanan Blog Kita,Buku Tamu Ini Berguna Buat Pengunjung Yang Mau Meninggalkan Pesan Untuk Kita.

Oke, Mari Kita Langsung Ke Cara Pembuatanya.

Ayo  ikuti langkah-langkah berikut ini.
  1.  Login Blogger
  2.  Klik Rancangan/Design
  3.  Tambah Gadget / Add a Gadget
  4.  Anda pilih HTML/javascript
  5.  Masukan kode dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

Letakkan kode Shoutbox  Anda, Contact, Menu Dll Disini

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Cara hapus gambar obeng dan tang di blog

1.Seperti biasa login dulu di blogger.

2.Klik Tata Letak (layout)

3.Klik Edit HTML.

4.Kemudian cari kode seperti di bawah ini :

]]>

5.Kemudian Copy paste kode di bawah ini,

  persis di atas kode yang tadi :


 .quickedit{
  display:none;
  }

6.klik tombol "SIMPAN TEMPLATE",ok Selesai


0 komentar
Langganan: Postingan (Atom)

About Me

Foto Saya
blog.it
Lihat profil lengkapku

Traffic Site

English

French

German

Spain

Italian

Dutch

Russian

Brazil

Japanese

Korean

Arabic

Chinese Simplified