Cara Membuat Widget Pengubah Background Otomatis

 Nah sekarang saya akan memposting suatu widget yang masih berhubungan dengan keotomatisan. Yaitu Cara Membuat Widget Pengubah Background Blog Otomatis.

Widget ini berguna bagi Anda yang bosan terhadap tampilan background blog Anda dan ingin melihat warna lain tanpa mengganti template. Pengunaannya pun sangat mudah. Hanya tinggal klak-klik daaan....berubah! Oke deh bagi yang ingin mengetahui contoh widgetnya liat di blog ini. Klik warna kesukaan Anda pada widget yang berada di sidebar, di bawah kolom pencarian Google. Bagus kan? Ayo sekarang lanjutkan membaca ke paragraf selanjutnya untuk mengetahui bagaimana cara membuatnya!

Beginilah cara membuatnya:

1. Login ke akun blogger Anda,

2. Pada dasbor klik rancangan lalu klik tambah gadget dan pilih yang HTML/JavaScript,

3. Kopi script di bawah ini lalu pastekan di menu HTML/JavaScript tadi,

<script type="text/javascript">

function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

<table width="100%">

<tr>

<td onclick="bgChange('black')" bgcolor="black">&nbsp;</td>

<td onclick="bgChange('#FFFF00')" bgcolor="#FFFF00">&nbsp;</td>

<td onclick="bgChange('red')" bgcolor="red">&nbsp;</td>

<td onclick="bgChange('blue')" bgcolor="blue">&nbsp;</td>

<td onclick="bgChange('white')" bgcolor="white">&nbsp;</td>

<td onclick="bgChange('green')" bgcolor="green">&nbsp;</td>

<td onclick="bgChange('DeepSkyBlue')" bgcolor="DeepSkyBlue">&nbsp;</td>

<td onclick="bgChange('Fuchsia')" bgcolor="Fuchsia">&nbsp;</td>

<td onclick="bgChange('DarkMagenta')" bgcolor="DarkMagenta">&nbsp;</td>

</tr>

</table>

4. Klik simpan dan lihat blog.

Happy Blogging

Baca Selengkapnya »

Cara Seting Blog

 Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :

1. Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat
2. Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
3. Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :
* Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial
* Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog
* Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.

* Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya
* Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya
* Tampilkan Link Posting Email? ⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa
* Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)
* Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya
* Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya)

* Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasi untuk mengatur menu Publikasi :

* Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : Tip N' Trick. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.

* Klik tombol Simpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :

* Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting
yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.
* Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu
muncul diatas postingan kita.

* Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai.
* Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai.
* Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.
* Bahasa ⇒ Pilih bahasa yang di inginkan.
* Tampilkan Field judul ⇒ Pilih ya
atau tidakpun tidak apa-apa
* Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.
* Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa
* Klik tombol Simpan Pengaturan. Selesai
6. Klik Komentar Untuk mengatur menu komentar :
* Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung
* Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
* Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar.
* Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.

* Default Link Balik untuk Posting ⇒ pilih Posting baru Memiliki Link Balik.

* Format Timestamp Komentar ⇒ pilih format jam yg singkat. Contoh: 8.00 PM.

* Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar.

* Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya).

* Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.

* Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.

* Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.

* Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :

* Frekuensi Arsip ⇒ pilih Bulanan.
* Aktifkan Halaman Posting? ⇒ pilih ya.
* Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :

* Izinkan Feed Blog ⇒ pilih Penuh.

* Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.

* Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

* Klik tombol Simpan Perubahan. Selesai.

Happy Blogging

Baca Selengkapnya »

Menambah Multi Kolom DI atas Footer

Pagi yang cerah merupakan awal hari yang menyenangkan buat semoga Anda sekalian juga merasakan hal sama seperti saya. Dengan hari yang cerah ini saya akan memberikan sedikit tutorial untuk Anda dan ini masih mengenai blog karena saya yakin Anda sekalian ada yang belum bisa dengan tutorial yang satu ini. Dalam kesempatan kali ini saya akan memberikan bagaimana cara memberikan multi kolom diatas footer. Sebagai gambaran Anda dapat melihat gambar dibawah ini.

Sekarang Anda sudah tahu gambaran dari tujuan tutorial yang satu ini. Jika Anda menginginkannya Anda mengikuti langkah dibawah ini:

1. Login ke www.blogger.com
2. Pilih Dasbor
3. Pilih Tata Letak
4. Pilih Edit HTML

5. Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin> . Sekali lagi untuk mengingatkan Anda gunakan Ctrl+F untuk mencari kode tersebut ]]></b:skin> .

/* kolom
---------------------------- */

#kolom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:transparent;
padding: 15px 0 15px 0;
}

#kolom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#kolom ul {
padding: 0;
margin: 0;
}

#kolom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#kolom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}

#kolom ul li a:hover {
background: #B1ACB1;
}

#left-kolom {
width: 205px;
float: left;
padding-left:10px;
}

#center-kolom {
width: 205px;
float: left;
padding-left:10px;
}

#right-kolom {
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

6. Setelah Anda tambahkan kode diatas, sekarang Anda cari kode dibawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7. Setelah itu Anda tambahkan kode dibawah ini tepat diatas kode yang diatas :

<div id='kolom'>

<b:section class='kolom' id='left-kolom'/>
<b:section class='kolom' id='center-kolomm'/>
<b:section class='kolom' id='right-kolom'/>

</div>

8. Jika sudah selesai tekan tombol Simpan Template lihat di Elemen Halaman.
Semoga tutorial diatas sukses, jangan lupa komentarnya hihihi......

Happy Blogging

Baca Selengkapnya »

Cara Pasang Flas Di Blog

Untuk memasang flash ke dalam blog cukuplah mudah. Yang kamu perlukan yaitu file flash yang biasanya ber-extensi .swf lalu upload file tersebut ke hosting. misal di geocities.com ato 000webhost ato tempat hosting lainnya. File animasi flash tersebut bisa dijadikan hiasan pada blog ato bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :

1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

* Ganti "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ganti width="500" height="100 dengan ukuran dari file flashmu.

Baca Selengkapnya »

Menu bar tanpa hack template 7 Views

Ini adalah cara yang ringkas untuk meletak menu bar melintang pada blog.Kebanyakkan menu bar diletakkan dengan kita perlu mengubahsuai pada template dengan meletakkan kod padanya.Tapi untuk menu bar ini cukup meletakkannya pada add gadget.

Daripada paparan blog anda klik pada customize - Page Elements - Add a gadget - HTML/JAVASCRIPT

| <a href= "http://namabloganda.blogspot.com/pagename">label </a> | 

kod ini adalah sebagai mana cara anda masuk masukkan link pada blog.Tanda garis menegak yang ada
pada link tu terletak sekali dengan butang pada butang backslash(\) pada keyboard.
Tujuan nya adalah untuk meletak pembahagi antara ruang seperti: HOME | CONTACT |

setelah meletak kod tadi,jangan lupa save terlebih dahulu.selepas itu seret dan letakkan dibawah header

Cara diatas cuma teks sahaja dan tidak nampak macam butang navigasi.untuk lebih menarik sedikit kita boleh gunakan dalam bentuk table.Cara membuat table ini ada saya terangkan dalam entri sebelum ini.
contohnya seperti dibawah ini.

masukkan kod ini:

<table border="1" style="width: 300px;"><tbody>
<tr bgcolor="#e0f8e0">
<td align="center" ><a href="URL 1">tab 1</a></td>
<td align="center"><a href="URL 2">tab 2</a></td>
<td align="center"><a href="URL 3">tab 3</a></td>
 (boleh ditambah dibawah ini jika ada lagi link hendak dimasukkan)
</tr></tbody></table>

bg color #e0f8e0 adalah kod warna boleh tukar mengikut kehendak anda dan kod boleh disemak disini.
width:300px adalah lebar column--tukarkan mengikut kesesuaian anda.
URL 1 hingga  URL 3--masukkan url anda
tab1 hingga tab 3 teks yang akan dipaparkan pada jadual

Happy Blogging

Baca Selengkapnya »

Link bergoyang

Setelah melihat contoh di atas apakah anda tertarik untuk membuat nya,Oke... langsung saja ke proses Pembuatan :

Langkah Pertama :
1.Copy paste script kode dibawah ini :
2.Masuk Ke Blog Anda Buka Tata Letak/Rancangan
3.Masuk ke Edit HTML
4.Cari Kode </head>
5.Copy paste scrpt kode dibawah ini tepat dibawah kode </head>

<!--Link Bergoyang-->

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

$('a.nudge').hover(function() { //mouse in

$(this).animate({ paddingLeft: '20px' },400);

}, function() { //mouse out

$(this).animate({ paddingLeft: 0 }, 400);

});

});

</script>

<!--By Www.daltrikblog.co.cc-->

Langkah Kedua
Setiap anda Ingin Memggunakan Link Bergoyang jangan lupa di tambah kode ini (class="nudge") 
Untuk Link Berbentuk Tulisan gunakan kode dibawah Ini :

<a href="http://www.daltrikblog.co.cc" class="nudge">Link Bergoyang</a>

Untuk Link Gambar gunakan kode dibawah Ini :

<a href="http://www.daltrikblog.co.cc" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhchEUx0182AZxIikrrrM26FBkS7L7iBr9I67aX1AFGlHpjpTbrHqtWB_JM7EzEUlInMidHb6iXefsaE0_1m0TzAJ-jWpAriBQqVP1suTt5nCdnviI3cIpbs1Xo9borbAhYLoJGiccQgDyY/s128/yahoo.png" ></a>

Disini....
Download script


Happy Blogging

Baca Selengkapnya »