• Uniqx Transparent Version 1.0

    Etiam tincidunt lobortis massa et tincidunt. Vivamus commodo feugiat turpis, in pulvinar felis elementum vel. Vivamus mollis tempus odio, ac imperdiet enim adipiscing non. Nunc iaculis sapien at felis posuere at posuere massa pellentesque. Suspendisse a viverra tellus. Nam ut arcu et leo rutrum porttitor. Integer ut nulla eu magna adipiscing ornare. Vestibulum quis diam velit, vitae euismod ipsum? Quisque ...

  • Uniqx Transparent 2.0

    Proin ac leo eget nibh interdum egestas? Aliquam vel dolor vitae dui tempor sollicitudin! Integer sollicitudin, justo non posuere condimentum, mauris libero imperdiet urna, a porttitor metus lorem ac arcu. Curabitur sem nulla, rutrum ut elementum at, malesuada quis nisl. Suspendisse potenti. In rhoncus ipsum convallis mauris adipiscing aliquam. Etiam quis dolor sed orci vestibulum venenatis auctor non ligula. Nulla ...

  • Opacity Uniqx Transparent

    Proin ac leo eget nibh interdum egestas? Aliquam vel dolor vitae dui tempor sollicitudin! Integer sollicitudin, justo non posuere condimentum, mauris libero imperdiet urna, a porttitor metus lorem ac arcu. Curabitur sem nulla, rutrum ut elementum at, malesuada quis nisl. Suspendisse potenti. In rhoncus ipsum convallis mauris adipiscing aliquam. Etiam quis dolor sed orci vestibulum venenatis auctor non ligula. Nulla ...

  • Opacity Uniqx Transparent 1.1

    Proin ac leo eget nibh interdum egestas? Aliquam vel dolor vitae dui tempor sollicitudin! Integer sollicitudin, justo non posuere condimentum, mauris libero imperdiet urna, a porttitor metus lorem ac arcu. Curabitur sem nulla, rutrum ut elementum at, malesuada quis nisl. Suspendisse potenti. In rhoncus ipsum convallis mauris adipiscing aliquam. Etiam quis dolor sed orci vestibulum venenatis auctor non ligula. Nulla ...

  • Sweet Uniqx Transparent

    Etiam ultrices felis sed ante tincidunt pharetra. Morbi sit amet orci at lorem tincidunt viverra. Donec varius posuere leo et iaculis. Pellentesque ultricies, ante at dignissim rutrum, nisi enim tempor leo, id iaculis sapien risus quis neque. Ut sed mauris sit amet eros tincidunt adipiscing eu vitae lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos ...

Tampilkan postingan dengan label Tips-Trik Lengkap. Tampilkan semua postingan

Seperti yang kita ketahui buku tamu adalah bukunya tamu, hahahah canda2 sob..!! Kalau boleh saya artikan sendiri "pengertian buku tamu dalam blog adalah sebuah tempat atau halaman yang dimana tamu atau pengunjung blog tersebut dapat meninggalkan pesan saat mengunjungi blog kita".


Mengingat pentingnya memasang buku tamu di blog sebagai sarana kominikasi antara pemilik blog dengan pengunjung, apa lagi ketika ada pengunjung yang sedang melakukan blogwalking, maka mereka akan meninggalkan jejak pada buku tamu.

Pertama sobat kunjunggi http://www.cbox.ws/, kemudian klik tulisan Get your own free Cbox now! kemudian isi formulirnya dengan data milik sobat. Jika sudah ingat isi centang disebelah tulisan " terms and conditions of service",  lalu klik Create My CBOX

Nah ini dia bagusnya CBOX setelah registrasi tidak perlu konfirmasi lewat email, disini sobat bisa langsung login ke id CBOX mlik sobat. Kalau sobat mau cara curang sobat bisa menggunakan email milik orang lain, cari saja di facebook kan banyak tuh email yang ditelantarkan oleh pemiliknya hehehehe..,, tapi lebih baik pakai email sendiri agar tidak repot nantinya.

Sudah loginnya sob..? Kalau sudah, langsung saja sobat klik Look & Feel > Layout Options.



Disini kita akan mengatur lebar, tinggi, dan semua yang berhubungan tata letak dari CBOX sobat.


Width and Height
Pengaturan Tinggi dan lebar CBOX yang akan sobat pasang di blog sobat.

Form Layout
pengaturan posisi form dan pesan, isi dari form adalah nama pengunjung, email / URl pengunjung, dan pesan,
jadi jika ada pengunjung yang meninggalkan pesan dan dia menuliskan URL blognya maka sobat akan langsung di antar ke blog pengunjung tersebut.

Messages
Pengaturan jumlah pesan yang tampil dalam CBOX sobat, untuk yang free sobat hanya bisa menampilkan 20 pesan.
Dalam kategori in Order, terdapat dua pilihan, yaitu :

  • Newest at top : pesan terbaru akan berada paling atas.
  • Oldest at top : pesan yang lama paling atas, dengan kata lain pesan baru akan berada paling bawah.

Silahkan atur sesuai kebutuhan, jika sobat ingin memasang di sidebar kalau sudah selesai klik SAVE.


Kemudian klik Look & Feel > Style Preset
Disini Sobat diberikan banyak style, tinggal di pilih. Caranya klik gambarnya kemudian klik Confirm.


Jika sobat sudah menentukan stylenya sekarang, klik Look & Feel > Clours & Fonts
Disini sobat akan melakukan pengeditan warna dan fonts, jika sobat tidak ingin mengedit lagi stylenya silahkan ke tahap berikutnya.
Bagi yang mau lanjut okelah kalo begitu saya terrangkan sedikit caranya, nanti sobat tinggal bereksperiment sendiri hahahahaha...!!

ket :

  1. Preview, disini sobat bisa juga langsung memilih warna dari item yg sobat pilih. Caranya klik dua kali / double click item kemudian pilih warnanya di kolom yang saya beri tanda no 3
  2. Klom kode warna background dan fonts,  disini sobat tinggal klik dua kali atau mengetikkan pada klom kode warna, kemudian pilih warna pada kolom no 3
  3. Tempat pemilihan warna.

Jika sobat ingin menampilkan smilies pada CBOX sobat , klik Options > Smilies.
Disini sobat akan diberikan smilies secara default, dengan tiga pilihan warna, biru, orange, dan kuning. Cara memilihnya pada :
Reset to default set:   setelah memilih, klik Apply.




Disini sobat juga bisa menambahkan smiliest milik sobat sendiri,caranya:

  • klik  , maka akan muncul row baru, masukkan kode smilies pada kolom Code,
  • kemudian masukkan URL smilies milik sobat pada kolom URL
  • Jika sobat ingin menghapus smiliesnya klik tanda silang yang berwarna merah yang ada di kolom Del.
  • Jika sudah klik 

Mungkin sekian yang menurut saya yang penting dalam pengaturan CBOX, untuk selebihnya sobat bisa coba sendiri.

Sekarang untuk memasangnya dalam blog milik sobat, sobat klik Publish, kemudian copy seluruh kodenya.


Selanjutnya memasang code tersebut dalam blog milik sobat,Selanjutnya memasang code tersebut dalam blog milik sobat,

1. Login akun blogger sobat.
2. Cari layout atau tata letak
3. Pilih tambah gadget.
4. Pilih HTML/JavaScript Tambah
5. Paste kodenya di dalam HTML/JavaScript
6. terakhir klik simpan.


Sobat juga bisa memvariasikan buku tamu milik sobat dengan membuatnta nempel di dinding atau bahasa kerennya Buku Tamu Bergaya Absolute Vertical Sliding Panel hehe, ya hitung hitung menghemat tempat.
Sekian dulu sob, dagh sore blm mandi nech, kalau ad yang kurang jelas silahkan tanya saja..!! klo ga mau nunggu, tinggal seerch aja di google "Memasang Buku Tamu Di Blog" pasti banyak banget. Ya sudahlah, terima kasih buat semuanya,
sukses terus, & Happy BLogging.

Pengen Banner Keren macam ini ???







Caranya Sebenarnya Sangat Mudah !! Berikut Tutorialnya


1. Klik Link Ini
2. Pilih Template Banner yang kamu mau
3. Isikan Kata-Kata Yang Kamu Kehendaki
4. Klik Generate Animation
5. Copy HTML di Easy Instalation.. Langsung Paste Di Blogmu !!

Mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan Teks Dan Gambar (Berjalan). diblog kamu,..
Untuk menambahkan tulisan melayang beserta float image berjalan ke blog kamu?
Berikut Caranya:
1. Letakkan code berikut ini di atas code ]]></b:skin>


#hehehe_uttajikuganteng {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#hehehe_asepjikuganteng {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

2. Kemudian letakkan juga code berikut ini di atas </body>


<center><div id="hehehe_asepjikuganteng" style="" width="100%"><marquee direction="left"><img src="http://i759.photobucket.com/albums/xx232/asepjiku/hihi/3.gif" /><a style="font-size: 20px; color: rgb(0, 255, 0);">Selamat datang di blog saya.</a></marquee></div></center>

KET :
Ganti URL (link gambar) yang berwarna hijau dengan URL/link tempat gambar kamu disimpan!
Ganti juga tulisan yang berwarna pink sesuka hatimu..! Bebas koq, ngga ada yang melarang. Hehehe...

jika sobat ingin gambar lainnya, tinggal pilih aja nie :

http://lh4.ggpht.com/_GaKwmMcf4N4/TLPogD-kA-I/AAAAAAAADH8/vS2C7_ghg8M/DADmampir.gif http://lh4.ggpht.com/_GaKwmMcf4N4/TLPogD-kA-I/AAAAAAAADH8/vS2C7_ghg8M/DADmampir.gif

http://lh3.ggpht.com/_GaKwmMcf4N4/TLPof3OgEHI/AAAAAAAADHw/FwPZJ1H5GP4/DADblogwalking.gif http://lh3.ggpht.com/_GaKwmMcf4N4/TLPof3OgEHI/AAAAAAAADHw/FwPZJ1H5GP4/DADblogwalking.gif

http://lh3.ggpht.com/_GaKwmMcf4N4/TLPpFWwKjeI/AAAAAAAADII/aA7K9TcR7rU/DADberkunjung.gif http://lh3.ggpht.com/_GaKwmMcf4N4/TLPpFWwKjeI/AAAAAAAADII/aA7K9TcR7rU/DADberkunjung.gif

http://i634.photobucket.com/albums/uu66/oktri_2009/kampret.gifhttp://i634.photobucket.com/albums/uu66/oktri_2009/kampret.gif

Selamat Mencoba!

Pengen nggak??? Di setiap bagian akhir artikel kita secara otomatis terbubuhi tanda tangan kita? Keren nggak tu sob?Baiklah jika sobat tertarik. silahkan ikuti langkah-langkah berikut:
Pertama-tama
1. Kunjungi situs www.mylivesignature.com, lalu akan terlihat layar seperti di bawah ini dan pilih "Click Here To Start" atau "Start Now"


2. Lalu pilih "Create Signature"

3. Lalu pilih "Using the signature creation wizard"


4. Masukkan kata yang akan menjadi tanda tangan kita, klik "next step"

5. Lalu pilih jenis huruf yang diinginkan, klik "next step"

6. Pilih ukuran huruf yang diinginkan, klik "next step"



7. Pilih warna yang diinginkan, klik "next step"


8. Pilih slope yang diinginkan, klik "next step"


9. Setelah tanda tangan online jadi, lalu pilih "Want to use this signature"


10. Pilih "Generate HTML code"

11. Pilih "Generate a code for my handwritten signature"


12. Copy kode html-nya untuk dipasang di blog kita


Setelah langkah - langkah diatas sudah selesai,


1. Pertama anda harus minta tanda Tangan saya dahulu,, hhhee,,, yang benar adalah menyiapkan gambar signaturenya terlebih dahulu. Kalau belum punya, anda bisa membuatnya dengan program pengolah gambar seperti Paint, Photoshop, Coreldraw, dll. Kalau mau yang lebih mudah. Gunakan layanan pembuat signature online di mylivesignature.com.

2. Jika sudah, upload gambarnya ke layanan image hosting sepertiWeb Penyimpanan Fhoto  lalu copy alamat URL gambarnya.

3. Buka blogger. Klik menu Layout -> Edit HTML

4. Beri tanda centang pada "Expand Widgets Templates"
5. Letakkan kode dibawah ini dibawah kode <p><data:post.body/></p>

    <p><div align="left"><img src="alamat url gambar"/></div></p>

KET:
- Ganti tulisan yang dicetak tebal dengan alamat url gambar anda. Misalnya :

http://www.mylivesignature.com/signatures/54489/93/C1689825A36FCD457E7E2AA347C50249.png.

- Left menunjukkan posisi signature. Anda bisa mengganti posisinya menjadi center atau right sesuai keinginan anda.

6. Jika anda memasang kode read more. Biasanya ada 2 kode.
Nah Tempatkan pada kode yang pertama.

7. Kalau sudah, Save Template. Selesai

Sekarang kita akam mempelajari efek blogger yang berguna untuk Menampilkan Gambar Transparan, Mouseover Effect. Apakah sahabat blogger mengetahui efek tersebut.


Cara kerja efek gambar transparan di bawah ini tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

1. Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar)


2. Contoh mouseover effect dari terang ke redup (diset langsung dalam gambar)


Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:

Berikut langkah - langkah project latihan kita kali ini.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Lalu Masukkan Salah satu Kode CSS dibawah ini, tepat diatas kode ]]></b:skin>


1. Contoh mouseover effect dari redup ke lebih terang


.post img{opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6}
.post img:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1}

2. Contoh mouseover effect dari terang ke redup


.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

6. Save, lihat hasilnya,..

NB: Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x).  Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.

Menghilangkan Border Foto Profil

1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada expand Widget template
5. Setelah itu cari kode :

.profil-img

6. Di bawahnya tampak kode :

border: 1px solid $border;

7. Yang artinya foto profil anda menggunakan garis pinggir dengan tebal 1 pixels. Nah jika ingin menghilangkannya gantilah angka 1  tersebut dengan angka 0.

8. Kemudian klik SIMPAN TEMPLATE dan tunggu hingga proses selesai.

Menghilangkan Border pada semua Gambar di Blog

1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada expand Widget template
5. Setelah itu cari kode :

a img {
border:1px solid #000000;

Anda tidak perlu menghiraukan semua kode yang ada di bawahnya. Yang penting diperhatikan hanya tulisan bodernya. Nah, angka di samping border itulah yang menimbulkan garis pinggir pada setiap gambar pada blog. Berapa pun angka yang anda temukan gantilah dengan angka 0. Sebagai contoh maka penulisannya akan menjadi seperti ini:

a img {
border:0px solid #000000;


Atau anda juga bisa langsung menghapusnya, sehingga beban file html blog anda bisa menjadi berkurang, sehingga kode yang tertinggal akan tampak seperti ini:

a img {

Nah, lakukanlah hal yang sama pada setiap img yang anda temukan. Anda cukup mengklik lagi dalam kotak find tadi kemudian kembali menekan Enter. Maka anda akan langsung diantar pada kode img yang lainnya. Lalu ganti lagi angka bordernya dengan angka 0. Begitulah seterusnya. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses selesai.

Menghilangkan Border Gambar Posting secara Otomatis

1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada expand Widget template
5. Kemudian carilah kode :

.post img

6. Sekarang perhatikanlah beberapa kode di bawahnya, sehingga akan terlihat seperti ini:

.post img {
padding:2px;
border:1px solid #000000;

7. Anda tidak perlu bingung jika beberapa kodenya tidak sama dengan blog anda, karena itu tergantung pada template yang anda gunakan. Yang penting diperhatikan adalah kode bodernya. Nah, angka 1 pada border itulah yang menimbulkan garis pinggir pada gambar di halaman posting. Sekarang gantilah angka 1 tersebut dengan angka 0. Sehingga penulisannya akan menjadi seperti ini:

.post img {
padding:2px;
border:0px solid #000000;

8. Atau anda juga bisa langsung menghapusnya, sehingga beban file html blog anda bisa menjadi berkurang, sehingga kode yang tertinggal akan tampak seperti ini:

.post img {
padding:2px;

9. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses selesai.


Selamat mencoba, semoga bermanfaat.

Pada Tutorial kali ini saya akan sedikit bahas tentang “Mengganti Tulisan Poskan Komentar”. Karena saya coba cari hanya sedikit yang saya temukan di mesin pencari Google,saya coba memposting tentang ini,syukur – syukur banyak yang baca dan tinggalin komentar.
OK, langsung saja kita mulai tutorialnya yah,daripada dengerin orang yang ngga jelas ini…hehehe

Dalam keadaan Biasa (Standard Blogger) akan terlihat seperti gambar dibawah ini (khusus Blogger). Nah untuk menggantinya sangatlah mudah.

Pertama anda harus Login dahulu ke Blogger
2.  Kemudian Klik Tata Letak » Edit HTML
3.  Jangan lupa Centang Expand Template Widget
4.  Lalu cari kode berikut <data:postCommentMSg/> Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Anda akan menemuka kode tersebut di 2 tempat.
Ganti kode yang sudah anda temukan tadi dengan tulisan yang anda sukai Misal : Tulis Komentar Anda

Jika sudah,cari lagi kode yang sama dengan cara klik Berikutnya/Next.

Maka Hasilnya seperti gambar berikut,.




Mudah bukan?Untuk Membuat logo komentar diatas bisa anda buat sendiri..
Semoga Bermanfaat,jangan lupa tinggalkan pesan yah…Terimakasih telah berkunjung.

Defaultnya, form komentar pada blogger memang di setting dengan ukuran lebar dan tinggi yang sama. Sebenarnya gx jadi masalah besar juga sih buat template kita…,tapi bagi beberapa makhluk seperti gw,tampilan yang tidak seimbang antara lebar post dan form komentar terlihat sangat mengganggu sistem kinerja mata.Buktinya,kemarin pas gw melototin tuh form komentar 3jam tanpa kedip,selesai”nya mata gw langsung jadi jereng.Gx percaya? buktiin aja ndiri…

Default:
Form komentar
Setelah Dirubah:
Form komentar After
Trus cara ngerubah lebar nya gimana tuh? Gampang koq !. Cukup ketik Reg (spasi) Leo kirim ke Kutub Utara… gx deh,canda ! hehe…
Lanjut,

1. Masuk ke Account blog/Dashboard sobat
2. Masuk ke tab Rancangan/Design kemudian ke tab Edit Html
3. Backup dulu template sobat ya,biar kalo nanti ada salah edit masih bisa di benerin lagi ^^
4. Beri tanda centang Expand Template Widget
5. Tekan CTRL+F dan cari kode : comment-editor
6. Udah ketemu? Kalo udah ketemu, Cari kode width=’100% antara kode comment-editor dan </iframe> kemudian ganti angka ‘100%’  tersebut dengan lebar form yang sobat inginkan. Contoh : width=”560px”.

7. Simpan / Save template sobat dan liat hasilnya…

Nb: Lebar kolom post setiap template itu unik dan berbeda… jadi,untuk ukuran lebar form tersebut,sobat lah yang bisa memperhitungkan kira” berapa lebar yang pas dengan kolom post sobat ^^)
Kalo ada yang bingung, silahkan tinggalkan komentar keren nya atau bisa juga meninggalkan sedikit duit recehan buat gw…<— yg punya blog kyknya pengamen nih!

Dari artikel ini mungkin anda sekalian ingin mengetahui siapa,berapa atau dimana saja blogger - blogger yang ada disuatu daerah,bisa juga orang depan,samping dan belakang rumah juga punya blog..anda cukup memasukkan URL - URL dibawah ini ke dalam address bar browser anda.
berikut tutorialnya dengan penjelasannya;



Blogger diseluruh Indonesia :

http://www.blogger.com/profile-find.g?t=l&loc0=ID

Blogger di Dalam Provinsi :

http://www.blogger.com/profile-find.g?t=l&loc0=ID&loc1=Sulawesi+Selatan

Blogger di Dalam Kota atau Kabupaten :

http://www.blogger.com/profile-find.g?t=l&loc0=ID&loc1=Sulawesi+Selatan&loc2=Makassar

Silahkan ganti kode berwarna biru (nama Negara,nama Provinsi,nama Kota / Kabupaten) sesuai yang anda kehendaki,diatas hanya contoh sebagai gambaran saja.
kode ID adalah kode Negara Indonesia,dan tanda + untuk spasi.
Untuk kode negara yang saya rasa kumplit bisa kalian kunjungi disini

Sekian dari saya semoga bermanfaat.seperti biasa jangan lupa tinggalkan komentar yah...

Membuat Artikel Terkait Bergambar Berjalan
Sebenaranya denganjudul yang kayak diatas itu binggung gak? Ingin membuat tulisan yang terkait atau artikel terkait yang ada gambar (thumbnail). Jika yang biasanya hanya judul yang terkait dengan yang kita baca tapi kali ini kita akan membuat tulisan terkait dengan diseratai thumbnail yang ada di postingan yang terkait dengan tulisan (artikel) yang kita baca.
Pada postingan sebelumnya saya juga pernah membahas tentang cara Membuat Artikel Terkait - Disertai Thumbnails. Nah kali ini saya akan coba membahas cara Membuat Artikel Terkait Disertai Thumbnails - Marquee (Berjalan).

Artikel terkait yang disertai thumbnail (gambar kecil) tidak hanya diam, tetapi berjalan kesamping, menampilkan thumbnail disertai dengan judul tulisan (artikel). Thumbnail Related Posts (artikel terkait bergambar) ini akan menghemat banyak temaptdi blog kita, ya memang karena artikel terkait bergambarnya dibuat berjalan sehingga kita juga bisa membuat lebih banyak artikel terkait bergambar yang ditampilkan.

Cara Membuat Artikel Terkait Bergambar Berjalan

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,&#8220; Times New Roman&#8221; ,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
 
7. Lalu cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->
 
Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=10; --> Berarti artikel terkait yang akan kita tampilkan adalah 5

<h3><b>Related Posts</b></h3>  --> Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai. 

Membuat  Artikel Terkait  dengan Disertai ThumbnailsDengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita.

Cara Membuat Artikel Terkait dengan Disertai Thumbnails

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,&#8220; Times New Roman&#8221; ,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
 
7. Lalu cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
 
Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=5; --> Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle="Related Posts";  --> Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai. 

Menampilkan Artikel Terkait atau Related Post  sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.

Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.

Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).



Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:


<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
 

4. Lanjutkan dengan mencari kode berikut:

<b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
 

5. Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:post.labels'><data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
 

Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.

6. Save Templates (belum selesai...)

7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

Lalu masukkan kode berikut ini di gadget Anda.

<script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
 

8. Jika sudah klik Save dan lihat semua perubahannya.

Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam

Baiklah pada kesempatan kali ini saya akan memberikan beberapa cara, untuk menambahkan background image pada template :
Silahkan ikuti langkah-langkah Berikut ini:
1.Login ke blogger
2.Pada Dasbor klik Tata letak/rancangan
3.klik Edit html->>expand template widget
4.Kemudian Cari code-code berikut :

Cara Membuat Gambar latar belakang untuk Sidebar

#sidebar-wrapper {

Tambahkan code maka selengkapnya seperti di bawah ini

#sidebar-wrapper {
background-image: url(URL GAMBAR ANDA);


Cara membuat gambar latar belakang untuk postingan

#main-wrapper {

Jika sudah tambahkan code maka selengkanya seperti ini

#main-wrapper {
background-image: url(URL GAMBAR ANDA);


Cara Membuat Background dengan Gambar Pada Template

body {

tambahkan code ,maka selengkapnya sperti ini

body {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVxdK79m2rPwvjHUlEwOWTHBMMu4HhuOSglDhjdt8cgaDtJn3G7EbS9qirdP96AIJ3VPQoSATFkySwIcmgTcVU1Lk8F1TRHY_CE9TPzWgyzlL6Sf-rUwfevCX4-XK02fqtrK0Zw8xemsb9/s1600/bg.jpg") no-repeat scroll 0 0 #010101;
background-position:top center;
background-attachment:fixed;



Cara Menambahkan Gambar Di Header Blog

#header-wrapper {

Jika sudah ketemu tambahkan code,maka selengkapnya seperti ini

#header-wrapper {
background-image: url(URL GAMBAR ANDA);

Ket: Code yang berwarna Hijau adalah code yang harus anda tambahkan......

6.klik simpan template dan lihat hasilnya...

Gadget profil adalah gadget dimana Anda bisa manampilkan foto, deskripsi tentang Anda dan link profil blogger Anda kedalam blog Anda.

Untuk menambahkan widget ini cukup mudah yaitu dari menu "Layout/tata letak" kemudian klik "Add a gagdet" lalu pilih "Profile". Dan untuk mengedit profil dan foto Anda bisa melalui Dashboard blogger Anda dengan mengklik "Edit Profile" yang ada di sebelah kanan dashboard Anda.
Nah kali ini Saya akan membahas tentang bagaimana caranya menambah Status Yahoo Messenger kedalam gadget Anda, yang berhubungan dengan postingan Saya yang dulu tentang menambah Status Yahoo Messenger ke dalam blog.

Coba lihat contoh dari modifikasi sederhana ini :


Terlihat diatas ada tambahan status Yahoo messenger ke dalam gadget profil Saya.

Nah dibawah ini adalah caranya :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"
2. Setelah itu centang "Expand Widget Templates"
3. Kemudian cari code dibawah ini :


<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
jika tidak ketemu, coba cari yang ini
<a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini tepat diatasnya.

<a href='ymsgr:sendIM?uttavirgo'><img src='http://opi.yahoo.com/online?u=uttavirgo&amp;m=g&amp;t=2&amp;2=us'/>
</a><br/>

Code yang berwarna merah diatas ganti dengan ID YM kamu, dan angka yang berwarna hijau adalah bentuk dari lambang status YM, keterangan lebih jelasnya bisa dibaca disini.

5. Kalau sudah kemudia SAVE

Nah diatas adalah cara menambah Status Yahoo Messenger kedalam gadget profil, Anda juga bisa Status YM dengan status Camfrog, G-Talk dan lainya.
 . Semoga bermanfaat dan silahkan menuliskan komentar dibawah ini untuk tanggapan dan pertanyaan.

Agar blog menjadi lebih informatif dan meriah maka dapat ditambahkan kode yang menampilkan status Yahoo Messenger. Sehingga pembaca dapat mengetahui apakah Yahoo Messenger Anda sedang online atau offline.

Kode untuk menampilkan status Yahoo Messenger adalah sebagai berikut:
 
<img src="http://opi.yahoo.com/online?u=YAHOOID&m=g&t=1" border="0"/>

Ganti YAHOID dengan USERNAME ID Yahoo Anda. Untuk menyetting tampilan gambar, yang perlu diubah adalah t=1 yang ada di baris paling belakang. t=1 dapat diubah menjadi angka lain antara 1 sampai 16. Misalnya jika menginginkan gambar online/offline berbentuk ikan maka ganti t=1 dengan t=10. Contoh gambarnya adalah sebagai berikut, angka di depan gambar adalah angka yang dapat digunakan:

Yahoo Messenger Status
YM
 
Contohnya seperti ini jika usernamenya adalah : uttavirgo dengan tampilan gambar berupa ikan, t=10.

<img src=”http://opi.yahoo.com/online?u=uttavirgo&amp;m=g&amp;t=10″ border=”0″>

Apabila tidak muncul dengan kopi paste kode diatas, coba dengan mengetik manual kode tersebut.
Semoga bermanfaat

Buat para Blogger baru nama favicon pasti begitu asing di telinga. Sebenarnya yang namanya favicon itu letaknya tidak jauh dari address bar atau judul halaman sebuah blog. Tepat di sebelah kiri tulisan halaman url letaknya. Seperti ini contohnya :
faviconSekarang sobat sudah bisa membayangkan akan membuat favicon seperti apa untuk Blog sobat. Sobat bisa merancang sendiri lewat Photoshop atau kalau tidak mau repot bisa mendownload gambar di Internet.

Bagaimana caranya membuat favicon nya?
Untuk membuatnya, sobat harus punya gambar yang akan dipakai untuk membuat faviconnya. Jika sudah punya, simak baik - baik caranya berikut ini.

I. Buka browser sobat dan arahkan ke alamat www.genfavicon.com
  1. klik Browse dan cari gambarnya di komputer sobat. Kemudian klik Upload Image

    image
2. Atur sendiri gambarnya, tarik kotak view sampai penuh (besar).

image
3. Klik ukuran yang sobat inginkan kemudian Klik Capture & Preview. Pilih ukuran yang paling kecil saja. 
image
4. Selanjutnya klik Download: jpg dan simpan gambarnya di komputer sobat. 

image
5. Langkah selanjutnya adalah sobat harus mengupload gambar tersebut ke tempat penyimpanan online, contoh adalah ke Photobucket atau Google Sites.
6. Sekarang anggap saja sobat sudah menyimpan gambar sobat di tempat penyimpanan online, seperti ini contoh gambar yang telah saya simpan di google sites : 

http://sites.google.com/site/dodyfarial/image/RSS-Blue.png

II. Buka Blogger, masuk menggunakan ID sobat.


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 kamu 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).

Okelah kalau begitu..langsung ke TKP aja..heheheee,..
Tutorialnya begini :
1. Pertama masuk ke blog dulu
2. Masuk ke Rancangan
3. Masuk ke "Layout --> Edit HTML dan cari code <b:skin>
kalau  sudah ketemu, copy paste code dibawah ini, tepat diatas code <b:skin>

<link href='http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-003.gif' rel='SHORTCUT ICON'/>

7. Simpan template. Dan berhasil.
Keterangan :
Teks yang berwarna hijau kamu ganti dengan alamat gambar yang kamu inginkan..
atau bisa juga kamu upload image yang kamu inginkan  DISINI atau DISINI dan DISINI
Atau kalau kamu tidak mau repot-repot, dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif


Good Luck,.....