Mendesain blogger

Monday, August 16, 2010

Cara Mengganti gambar Header Di Blog

Untuk mempelajari ini, kita akan menggunakan template TicTac Blue bawaan blogger obyeknya :

1. Login ke Blogger (login to Blogger)

2. Dasbor (Dasboard)

3. KLIK Tata Letak (Layout)

4. KLIK Edit HTML (Layout)

5. Amankan Template (Securing Templates) :Mengamankan template dimaksudkan untuk memudahkan mengembalikan template ke keadaan semula apabila perubahan yang dilakukan tidak sesuai dengan rencana atau harapan yang diinginkan. Car mengamankan template bisa sampeyan buka di sini.

6. Header : Cari KODE syntax #header
Gunakan Ctrl + F supaya lebih mudah saat mencari KODE. Kalau belum tahu bisa lihat caranya dengan KLIK di sini.
Bentuk KODE lengkap syntax #header adalah seperti di bawah ini:

#header-wrapper {

margin: 0;

padding: 0;

font: $pagetitlefont;

background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif) no-repeat $startSide top;

}

* URL gambar background header :

http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif

* Karena KODE css tersebut masih memanfaatkan fungsi Variable Definitions, ubahlah $startSide menjadi left, sehingga menjadi URL yang sebenarnya :

http://www.blogblog.com/tictac_blue/top_div_blue_left.gif

7. Properties : buka URL tersebut di address bar untuk melihat bentuk gambar background.
Lihat ukuran gambar background header dengan Letakkan cursor pada gambar yang telah dibuka, KLIK kanan mouse kemudian buka propertiesnya. Ukuran gambar akan kita ketahui : 847px (width) x 240px (height)
Gambar background header :

KLIK untuk memperbesar gambar!

8. Buat Gambar : Karena ukuran gambar sudah diketahui dengan jelas, maka untuk merubahnya sampeyan harus membuat gambar baru dengan ukuran seperti gambar background header di atas.
Cara buat gambar :
* Buat gambar sendiri menggunakan software.
* Buat gambar menggunakan layanan online gratis (Online Photo/Image Editor). Bila sampeyan ingin menggunakan cara ke-2 ini, silahkan kalian bisa berkunjung ke :

- http://www.pixlr.com/editor/,

- http://www.online-image-editor.com/ , atau

- http://www.imageeditor.net/.

9. Upload : Upload di file hosting apabila gambar sudah selesai dibuat. Copy paste URL-nya dan gunakan untuk mengganti URL yang ada di syntag #header.

10. Save : KLIK Simpan Template (Save Template).

11. Lihat Blog : Buka Blog dan lihat hasil perubahan yang sudah dilakukan.

Selengkapnya...

Cara Membuat Redmore pada Blog

Lagi-lagi soal membuat fasilitas Read more.. atau Selengkapnya.. pada template baru (XML), topik ini rupanya yang paling banyak di baca dan di minati oleh para blogger baru. Hal ini terlihat dari banyaknya komentar yang masuk pada artikel tersebut, ada yang girang karena sudah merasa berhasil dan ada juga yang sedikit kecewa karena masih menemui kegagalan.
Dengan masih adanya kegagalan-kegagalan tersebut, maka dapat di tarik kesimpulan bahwa metode yang saya sampaikan ternyata masih kurang untuk di pahami. Dari itu tentu harus di pikirkan cara yang tepat dalam penyampaian suatu panduan. Beberapa waktu yang lalu ada sebuah komentar yang masuk pada salah satu artikel saya (artikel yang mana saya lupa dan sedikit malas untuk membuka dokumen komentar) bahwa metoda penyampaian tersebut sangatlah mudah untuk di pahami, maka pada kesempatan kali ini saya akan mencoba metoda tersebut pada artikel membuat fungsi Read more.. atau Selengkapnya...

Saran saya, ketika anda melakukan Editting pada kode template, sebaiknya jangan memakai browser Internet Explorer terutama Internet Explorer 6, pakailah browser lain semisal FireFox ataupun Opera. Bagi yang belum mempunyai browser FireFox bisa mendownloadnya secara gratis di sini! dan untuk Opera bisa mendownloadnya di sini!, Kenapa jangan memakai Internet Explorer? ini merupakan pengalaman pribadi saya ketika melakukan editting sering menemukan pesan error ketika memakai IE, dan apabila memakai browser lain pesan Error tersebut tidak muncul (proses edtting sukses), dan saya pernah membaca di blogger forum banyak yang melaporkan isu ini dan pihak blogger sendiri menyarankan untuk sementara memakai browser lain selain IE (maaf lupa catat alamat link nya).
Bagi yang belum sukses membuat fungsi read more..., coba ikuti langkah berikut ini :
Langkah #1

Sign in di blogger dengan id anda.
Klik Pengaturan
Klik Format
Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi tesxt area kosong tersebut dengan kode di bawah ini :

Klik tombol Simpan Pengaturan

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.

Langkah #2

Klik menu Dasboard
Klik Tata Letak
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :

Tunggu beberapa saat ketika proses sedang berlangsung
Silahkan anda cari kode berikut pada kode template milik anda :

Hapus kode diatas, lalu ganti dengan kode di bawah ini (klik pada tombol untuk menandai):

Klik tombol Simpan Template
Selesai.

Cara Posting Artikel

Klik menu Posting
Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :

Tuliskan artikel yang ingin tampak pada blog sebelum kode :

Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :

Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING
Klik tulisan Lihat Blog(di jendela baru) untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas

Mudah-mudahan dengan adanya postingan ini tidak ada lagi yang mengalami kegagalan dalam membuat menu Read more...
Bagi anda yang mengikuti tutorial ini dan mengalami kegagalan, jangan panik ketika blog anda menjadi amburadul (katanya begitu dalam komentar), upload kembali backup templatenya dan nanti akan kembali ke keadaan semula sebelum di edit.

Selengkapnya...

Cara Memasukan Shoutbox Atau Shoutmix Ke Blogger

ShoutBox atau ShoutMix adalah salah satu fitur tambahan yang digunakan untuk menerima pesan dari pengunjung website/blog kamu. ShoutBox bisa dikatakan juga sebagai ‘buku tamu mini’. Banyak situs-situs yang memberikan pelayanan ini secara gratis. Sebenarnya tidak sepenuhnya gratis, karena situs-situs tersebut pasti ingin mendapatkan keuntungan juga, maka mereka pun meletakkan gambar/banner kecil di blog kamu nanti.
Contoh Kalender pada blog adalah, sebagai berikut :

Selengkapnya...

Lanjut Cerita^_^...

Cara Membuat Gadget Terapung (Floating Widget)

Sebelumnya Blogger Tune-Up pernah membahas cara membuat Menu Navigasi Terapung dan Float Nav Bar. Pada artikel kali ini merupakan pengembangan dari trik-trik blogger hack yang pernah dibahas, yaitu kita akan membuat gadget terapung yang tidak terpengaruh oleh scrollbar dan selalu dalam posisi tetap.
Mungkin teman-teman pernah jalan-jalan ke blog orang lain dan menemukan sebuah tombol di pinggir halaman yang jika di klik akan menampilkan sesuatu (misal; shoutbox, buku tamu, subscriber, dan lain sebagainya) dan posisinya selalu tetap walaupun halaman tersebut kita geser atas bawah kiri kanan. Sebenarnya hal tersebut pada dasarnya adalah sebuah gadget yang diatur seakan-akan mengapung atau menempel pada halaman. Sebagai contoh Blogger Tune-Up menggunakan gadget terapung ini untuk menempatkan ShoutMix yang sudah lama hilang pada sebelah kanan atas dengan tombol bertuliskan "PESAN".

Langkah integrasi gadget terapung (floating widget)

Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" Baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru kita buat:

<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-- Kode Isi Gadget Terapung -->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://modification-blog.blogspot.com/2009/10/gadget-terapung-floating-widget.html" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

Langkah 5
Ganti  dengan kode yang akan kita tampilkan pada gadget terapung.
Langkah 6
Simpan Gadget dan Preview blog

Keterangan:

Jika ingin membuat kotak pesan seperti pada blog ini, silahkan buat account di ShoutMix dan ambil kode yang diberikan, masukan kode tersebut menggantikan kode .

Selamat mencoba dan semoga berhasil, jangan lupa tinggalkan jejak dengan mengisi komentar dibawah. Happy Blogging... :)

Selengkapnya...

Cara Mengganti icon Pada Adress Bar di blog

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi kalian yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://images.fanpop.com/images/image_uploads/Emotion-Icon-fanpop-447704_200_200.jpg' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Selengkapnya...

Cara Membuat Kata Penutup di Blog

Label:

Impian Relugais12

Langsung ajah kita lagi2x turun gunung, ikuti langkah - langkah di bawah ini :

1. Login ke account blogger.

2. Klik Layout --> Edit HTML.

3. Cari kode </head> di dalam template anda.

4. Copy pastekan script di bawah ini tepat dibawah kode </head>

// goodbye alert

function goodbye(){

alert('Nanti saya tunggu yah kedatangan anda di blogger saya ?. . .');

}

parent.window.onunload=goodbye;

</script>

5. Klik Simpan Template

Selengkapnya...

Cara Memasukan Jam Ke blogger

Banyak sekali sahabat blogger baru yang menanyakan bagaimana

cara pasang jam di blogger, aksesoris ini ternyata banyak juga peminatnya terutama kaum hawa yang sangat mengetahui akan arti kecantikan yang akan dituangkan dalam sebuah blog. Jujur Impian Relugais12 sangat tidak menyarankan untuk memasang jam pada blog kalian,selain bikin lambat page load juga kurang terlalu berguna, coba baca artikel Impian Relugais12 sebelumnya..:::::>>>>

17 Tips agar halaman blog tampil Profesional. Walaupun sudah banyak para blogger yang mengetaui cara pasang jam ini tapi tidak begitu bagi blogger pemula yang baru memulai membuat blog tentu perlu tahapan dan bimbingan jadi gak ada salahnya untuk memasang aksesoris ini jika dirasa berguna :). Layanan gratis

aksesori jam sangat banyak, namun kali ini om hanya menjelaskan cara pasang jam menggunakan layanan gratis
dan paling banyak digunakan
http://www.clocklink.com/
Langkah-langkah pasang jam di blogger sebagai berikut:

1. Klik alamat http://www.clocklink.com/

2. Kemudian pilih tab Gallery atau klik aja disini

http://www.clocklink.com/gallery.php

3. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link
"animal" tersebut

4. Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.

5. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja
tombol "Accept"

6. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.

7. Copy atau Simpan kode yang telah dipilih untuk sementara waktu

8. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah
Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan
lupa disimpan

9. Selesai :) dan lihat hasilnya.

Contoh jam :

Selamat mencoba dan happy Blogging :)

Selengkapnya...

Cara Membuat Teks Berjalan Dengan efek Marquee

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right"

height="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center"

direction="left" height="200" scrollamount="3"

width="70%" behavior="alternate">

marquee menurut perilaku

</MARQUEE>

marquee menurut perilaku

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE   BGCOLOR="RED" width="70%"  scrollamount="3" behavior="alternate">

</MARQUEE></b></FONT></div>

hasilnya :

marquee dengan variasi hurup

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini

</marquee>

hasilnya :

silahkan tunjuk ke sini

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">











<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>









<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>











<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>











</marquee>

hasilnya :

Free Template

Kolom iklan

Kang Rohman

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat ber eksperimen

Selengkapnya...

Cara Membuat Google translate atau penerjemah bahasa

1.Google Translate Versi 1
Berikut ini adalah cara membuat windget penterjemah...♣☻♥☺♠♦Google translate, jadi kita bisa merubah rubah bahasa yang kita inginkan walaupun hasil terjemahannya " agak aneh " hee... tapi lumayan juga,Para pendesain blog beginilah caranya :

1. Pertama Login dulu ke blogger
2. Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman )
3. Add a Gadget ( Tambah Gadget )
4. Pilih HTML/JavaScript dan copy saja kode dibawah ini didalamnya:

Hasil nya kayak gini :

2.Google Translate Versi Berbentuk pin

Kita sering melakukan browsing dan menemukan Widget Google Translate pada sebuah blog termasuk blog saya sekarang, di mana Google Translate ini berfungsi untuk menerjemahkan isi konten blog bersangkutan oleh para pengunjung yang berbeda bahasa.

Nah, di kesempatan baik ini saya ingin berbagi informasi bagaimana Cara Membuat Google Translate Bentuk Pin Dengan Effect Shadow, menarik bukan teman-teman untuk dicoba?

Lihat Pict

╬ langkah-langkahnya sebagai berikut ╬:

1. Klik Design_>Layout_>Tata Letak >> Page Element >> Add a Gadget >> HTML/Javascript,
2. Copy paste-kan semua kode di bawah ini ke dalam kotak HTML/Javascript blog teman-teman,

3. Klik save dan View Blog. Selamat mencoba Membuat Google Translate Bentuk Pin Dengan Effect Shadow di Blogspot!

Selengkapnya...

Mendesain blogger

Monday, August 16, 2010

Cara Mengganti gambar Header Di Blog

Cara Membuat Redmore pada Blog

Cara Memasukan Shoutbox Atau Shoutmix Ke Blogger

Cara Membuat Gadget Terapung (Floating Widget)

Langkah integrasi gadget terapung (floating widget)

Cara Mengganti icon Pada Adress Bar di blog

Cara Membuat Kata Penutup di Blog

Cara Memasukan Jam Ke blogger

Cara Membuat Teks Berjalan Dengan efek Marquee

Cara Membuat Google translate atau penerjemah bahasa

Add 'Q y Sobat Sxli'n

SmSan Yukxs

Link Keren

Ayo Kita nonton TV live

Arissa Market

Contributors

cLOck relugais12

HoBiKu

Impian Relu_gais12

Penerjemah Bahasa

Page hit counter pEngunJung Ingin ke:

Pemberitahuan Jumlah siapa pengunjung saya

Pengikut impian Relugais12

Kunjungi Situs Lainnya Yang Anda Cari