Belajar Berbagi: Trik Blogger

Tampilkan postingan dengan label Trik Blogger. Tampilkan semua postingan

Mempercantik kode HTML/Javascript di posting

aep nat CSS, HTML, Trik Blogger 6 komentar

Sebenarnya sekitar seminggu yang lalu saya ingin mempostingan mempercantik kode HTML/Javascript ini, tapi ada suatu kesibukan yang nggak bisa saya tinggalkan, mumpung kesibukan saya ini sudah agak longgar, saya menyempatkan untuk belajar berbagi trik blog ini. saya mendapatkan trik blog ini dari Mohamed Rias dengan bahasa Jawa(english) yang saya transalate ke bhs Indonesia....
yuk, kita membuat kode HTML/Javascript ini menjadi lebih menarik....

Login Ke blogger
Pilih Tata Letak >>> Edit HTML

Perhatian!!! Jangan Lupa Untuk Membackup template anda dahulu dengan mengklik full download template

Setelah itu masukkan kode di bawah ini di atas kode ]]</b:skin>

Jika Anda sukar mencari kode di atas, tekan F3 lalu cari kode diatas dengan mengisi form di bawah browse (mozilla firefox)

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i830.photobucket.com/albums/zz230/aepnat/5.jpg) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

text berwarna:alamat/url image untuk pojok kanan bawah
Ubahlah!!! alamat/url dengan image anda yang sudah di upload ke photobucket dll.

Jangan Lupa Simpan Template Anda!!

Untuk menampilkan code HTML/Javascript di postingan harus memakai code di bawah ini :

<div class="codeview">
Taruh kode HTML/Javascript/CSS Anda disini
</div>

NB: kode di atas bisa ditulis di dalam mode compose ataupun Edit HTML

Example:

HASILNYA AKAN SEPERTI INI.. ANDA BISA MEMPERCANTIK CODE HTML/JAVASCRIPT/CSS DENGAN TRIK BLOG INI..
SELAMAT MENCOBA.....

Read More »

Cara Menampilkan Status Off/Online Yahoo Messenger

aep nat Trik Blogger, Yahoo 0 komentar

Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :

rus jika kamu online maka iconya akan berubah seperti ini:

Cara buatnya sangat gampan :

masuk Page Element atau Elemen Laman
Add Gadget atau Tambah Gadget
Tambah HTML/Javascript
Copy Script di bawah ke HTML/Javascript :



<a href="ymsgr:sendIM?id-yahoo-kamu"> <img src="http://opi.yahoo.com/online?u=id-yahoo-kamu&amp;m=g&amp;t=2&amp;l=us"/>

</a>

Ganti text yang warna merah dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.

Selamat Mencoba........

Read More »

Cara memasang Translate bendera

aep nat Trik Blogger 2 komentar

Pada kesempatan kali ini saya akan belajar berbagi tentang membuat transalate bendera, Tips ini baru saya dapatkan dari o-om. Bukan bermaksud "latah" atau bagaimana. Tapi saya ingin belajar berbagi kepada sesama makhluk allah ( khotbah ) apa telah saya dapatkan.
Mengingat saya hanyalah seorang pelajar yang ingin belajar berbagi, maka sebagian besar tulisan saya comot dari o-om. Hal ini tidak lebih disebabkan oleh kemampuan saya yang masih sangat “cetek” tentang Trik blog.
Okelah kalo begitu, kita langsung ke tempat perkara....

Silahkan login ke blogger terlebih dahulu
Klik Tata Letak
Klik tab Elemen Halaman
Klik Tambah Gadget
Pilih Tambah HTML/JavaScript
Copy pastekan code translate di bawah kedalam kolom yang tersedia.

Tampilan Ke-1

Copy Code ini :

Tampilan Ke-2

Copy Code ini :

Jangan Lupa Di Simpan

Selamat Mencoba......

Read More »

Trik Membuat Cloud Label (Label Awan)

aep nat Trik Blogger 0 komentar

mumpung guru lagi keluar gx jelas.. gw manfaatin aja dah buat posting (mumpung gratis), berhubung baru pertama kali posting di lab sekolah ini, mungkin agak was-was. takut ketauan nanti tiba-tiba gurunya masuk. kalo ketauan, ampoen dah jadi apa gw nanti
langsung aja, gw mau belajar berbagi yang mungkin cukup menarik untuk diadopsikan ke blog kamu yaitu membuat Label awan (Cloud Label). Apaan tu...? Label awan merupakan salah satu bentuk kumpulan daftar label yang ditampilkan seakan-akan berada di atas awan. contohnya seperti di blog saya, di sisi kanan di bawah "choose your language".
Kalau biasanya kamu hanya menggunakan label default bawaan widget atau gadget blogger.com, sekarang kamu memiliki salah satu variasinya. By the way... dari pada ngomong melulu lebih baik kita mulai saja triknya. Caranya seperti biasa :

Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>

atau kode-kode yang sejenis dalam template blog kamu.

Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Tambahkan kode berikut di bawahnya.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.kang-ipoel.co.cc'>Kang-ipoel</a></div>

var so = new SWFObject("https://sites.google.com/site/kangipoelsite/source-kang-ipoel/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Ganti kode yang berwarna merah secara berturut-turut dengan lebar area label ("240"), tinggi area label ("300"), dan warna area label (#ffffff) sesuai dengan ukuran elemen halaman (lokasi peletakkan label awan) di blog kamu.
Jangan sampai kelupaan jika kamu merubah warna area label. maka kamu mungkin perlu juga merubah warna teksnya yang ditunjukkan dengan warna hijau (333333). Khusus untuk perubahan warna teks, cara memasukkan kode tanpa embel-embel #.
Atur putaran kecepatan dengan mengganti kode berwarna biru (100), makin besar makin cepat.
Gantilah kode warna sesuai selera anda atau yang sesuai dengan warna template anda. Untuk mengubah background menjadi trasparan, anda tinggal menghapus tanda "//" di depan kode:
//so.addParam("wmode", "transparent") ;

Bila mode transparan ini aktif, maka kode warna background yang sudah kita pasang di atasnya secara otomatis akan tidak berlaku lagi.

Jangan lupa disimpan

Read More »

Menu next page atau tombol navigasi halaman

aep nat Trik Blogger 2 komentar

Di malam yang sunyi ini aku ingin belajar berbagi yang sekiranya dapat bermanfaat untuk para pembaca (tua beud)
Okelah kalo begitu... pada postingan kali ini saya akan menerangkan tentang Menu next page atau tombol navigasi halaman. tombol navigasi ini tidak seperti tombol next atau previous page,tombol next page atau navigasi halaman ini mempunyai kelebihan navigasi halaman yang bisa membuat pengunjung lebih mudah untuk mengingat artikel yang di sukai,karena halaman di tandai dengan angka.
dari pada ngocah-ngoceh lama yuk langsung kita ke "lapangan" :

download dolo scriptnya disini

login ke blogger.
tataletak --->element halaman
tambahkan gadget atau add new gadget
pilih html/javascript
masukkan kode yang telah di download

untuk mengatur jumlah dalam satu halaman lihat
var pageCount=5;
bisa diganti sesuai keinginan .kalau ingin dalam satu halaman menampilkan 10 postingan ganti dengan
var pageCount=10;

Read More »

Cara Mendaftar Blogger di Search Engine Yahoo & MSN

aep nat Search Engine, Trik Blogger, Yahoo 0 komentar

Mengapa kita perlu mendaftarkan blog ke search engine lain? Jawabannya adalah setiap user di seluruh dunia belum tentu menggunakan satu search engine saja. Selain google sebagai mesin pencari terbesar saat ini, terdapat beberapa mesin pencari yang patut kamu pertimbangkan seperti Yahoo dan MSN. Hal ini tidak lain dan tidak bukan untuk meningkatkan trafik blog, sehingga optimasi blog kamu di search engine akan semakin meningkat.

Yahoo Search Engine

Kunjungi alamat Site Explorer Yahoo

Login ke account Yahoo, jika kamu belum memilikinya, silakan baca "Bikin email Gratis via Yahoo Mail" oleh Suka-Suka.com
Setelah login, klik Submit a Website or Webpage
Masukkan alamat lengkap blog kamu (ex : "http://optimasi-blog.blogspot.com/")
Klik button "Submit URL"
Tambahkan pula alamat RSS Feed blog kamu pada "Submit Site Feed"
Masukkan alamat RSS Feed blog kamu (ex : "http://optimasi-blog.blogspot.com/feeds/posts/full)
Klik "Submit Feed"

Selanjutnya buka alamat blog kamu pada "My Site"
Klik Authentication --> By adding a META tag to my homepage (ex : )
Copy META tag dan paste di antara ... dalam template blog kamu [ingat tutup META tag dengan karakter "/" (ex : )]
Terakhir, klik "Ready to Authenticate"

MSN Search Engine

Kunjungi alamat Live Search URL Submission
Ketik karakter yang ditampilkan
Masukkan alamat lengkap blog kamu
Terakhir, klik Submit URL"

Selamat mendaftar di Search Engine...

Read More »

Membuat Read more dengan Judul Posting

aep nat Trik Blogger 0 komentar

Untuk membuat read more dengan judul posting kali ini temen - temen hanya perlu memodifikasi artikel yang kemarin tentang read more. Jika kemarin kita mengunakan script seperti dibawah ini:



<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/>

<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a> </p>

Maka anda perlu mengubahnya menjadi seperti ini :



<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<strong><a expr:href='data:post.url'>Lanjut membaca   &#8220;<data:post.title/>&#8221; &#160;&#187;&#187; </a></strong>

</b:if>

Setelah sudah diganti lalu save template. Mudah bukan? selamat mencoba, semoga berhasil Membuat Read more dengan judul Posting. Jika temen - temen kurang paham cara pemasanganya baca lagi tenteng langkah - langkah membuat read more sebelumnya.

Read More »

Cara Membuat Read More

aep nat Trik Blogger 0 komentar

Trik Blogger kali ini saya akan berbagi membuat read more yang berfungsi sebagai peringkas halaman blog kita dan ini bisa juga sebagai trik blogger membuat pengunjung penasaran dengan isi artikel yang kita tulis. Langsung aja berikut Cara membuat read more.

Langkah pertama

Klik Pengaturan lalu klik Format
Pada text area paling bawah kosong , isi dengan kode di bawah ini :

</span>

Simpan Pengaturan

Setelah itu,

Klik menu Dasbor
Klik Tata Letak
Klik tab Edit HTML

Beri tanda centang pada Expand Template Widget , agar widget bisa muncul
Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!

Setelah itu cari kode berikut pada kode template milik anda <data:post.body/>
Hapus kode diatas, lalu ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/>

<a expr:href='data:post.url'><strong>Read More...</strong></a></p>

</b:if>>

Klik tombol Simpan Template selesai dah. :D

Pada tulisan yang berwarna merah (Read More) bisa di ganti sesuai dengan keinginan anda!!
Saat kita akan posting coba Klik menu Edit HTML , maka secara otomatis tampak kode seperti berikut :

Artikel yang ditampilkan

<span class="fullpost">
Artikel yang di sembunyikan

</span>

publikasikan posting

Selamat mencoba !

Read More »

Cara Membuat Search Engine

aep nat Search Engine, Trik Blogger, Yahoo 1 komentar

Tentu kita semua sudah tahu apa itu Search Engine (hari gini gak tahu apa itu search engine? cape' deeh...). Search Engine adalah ... bla.. bla..bla.. dst.
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger Caranya sangat mudah, yaitu:

1. Login ke blogger
2. Pilih Layout atau Tata Letak
3. Page Elemen atau Laman Elemen
4. Klik Add a page element atau Tambah Gadget dimana kamu menyimpan search enginenya
5. pilih HTML/Javascript
6. Kemudian Copas (Copy/Paste) script di bawah ini :

<form action="http://www.kang-ipoel.co.cc/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti http://www.kang-ipoel.co.cc/ dengan nama blog kamu. Angka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya

Read More »

Cara Pasang Image di Sudut Blog

aep nat Trik Blogger 0 komentar

Salah satu trik blogger agar blog kelihatan tambah menarik adalah memasang image di sudut blog. Pemasangan image bisa di atas kiri, atas kanan, bawah kiri, dan bawah kanan. Selain itu trik ini juga dapat dimanfaatkan untuk fungsi yang lain, sesuai dengan apa yang kamu inginkan. Sebab kalau disebutin kebanyakan...

Tanpa ba..bi..bu.. lagi, langsung kita mulai trik memasang image di sudut blog :

Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML.

Tambahkan kode berikut di atas kode ]]></b:skin>

#anima_sudut {

position:fixed;_position:relative;top:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Ganti kode yang berwarna merah dengan posisi image yang kamu inginkan (ex : top=atas, bottom=bawah, right=kanan, left=kiri). Dan atur kode yang berwarna hijau sesuai dengan tampilan di blog kamu.

Kemudian tambahkan kode ini di atas kode </body>

<div id='anima_sudut'>

<a href='http://optimasi-blog.blogspot.com/'>

<img alt='' border='0' src='http://i647.photobucket.com/albums/uu191/ariamsi/disiniann.gif'/></a>

</div>

Ganti kode yang berwarna merah dengan alamat blog dan alamat penyimpanan image kamu.

Jangan lupa disimpan

Selamat mencoba pasang image di sudut blog...

Read More »

Mempercepat Page Load Blogger

aep nat Converter, Trik Blogger 0 komentar

Kali ini saya ingin berbagi trik untuk mempercepat waktu page load blog Anda (yang memakai layanan blogger lho..). Pernah kan kita menjumpai blog atau website yang waktu load pagenya lama. Ditunggu lama halamannya nggak muncul-muncul, kayak keong yang jalannya lambat. Sampai bikin stress dan membuat kita enggan balik ke blog atau website itu. Coba bayangin, gimana kalau blog Anda yang bermasalah seperti itu. Konsep trik ini adalah kompresi CSS. Jadi program CSS yang ada di dalam template akan dikompres seperti jika kita mengkompress file dengan software kompresi seperti WinZip atau WinRar. Cuma untuk mengkompres (kaya demam aja dikompres) CSS kita tidak membutuhkan software tambahan.
Kita akan menggunakan layanan dari pihak ketiga yang disebut CSS Compressor. Layanan ini ada di website CSSDrive. Caranya mudah. Ikuti langkah berikut:

1. Masuk ke akun blogger Anda
2. Pilih "Tata Letak", "Edit HTML"
3. Untuk jaga-jaga kalau nanti pas Anda edit templatenya kok malah error, ada baiknya Anda backup dulu template Anda. Klik "Download Template Lengkap"
4. Sekarang Anda cari kode ini <b:skin> dan </b:skin>
5. Blok semua kode yang berada ditengah-tengah dan . Copy barisan kode tersebut.
6. Buka CSS Compressor. Paste kode tadi di kotak bertajuk "Insert CSS code". Silahkan atur

kustomisasinya seperti gambar dibawah ini:
7. Klik "Compress_it!"
8. Sekarang copy kode CSS yang telah terkompres.
9. Kembali ke kotak Template blogger Anda. Ganti kode CSS yang tadi kita blok diantara kode dan dengan kode hasil kompresi tadi.
10. Klik "Simpan Template", Selesai...
Bagaimana hasil punya Anda? Apakah kode CSS pada Template Anda telah banyak terkompres? Lebih cepatkah waktu load page Anda?

Read More »

Cara Mendaftarkan Blogger di Google Search Engine Dipostkan

aep nat Google, Search Engine, Trik Blogger 0 komentar

Setelah blog selesai, coba masukkan judul blog kamu pada search engine google. Apa yang terjadi? Kemungkinan besar google belum bisa membacanya. Hal ini dikarenakan blog tersebut masih berpredikat sebagai "new custumer", sehingga masih belum cukup syarat untuk terindeks di mesin pencari google. Terkecuali kamu telah melakukan beberapa optimasi dalam blog, namun upaya itu pun tidak jarang memerlukan waktu yang panjang dan proses yang berliku. Optimasi blog yang diulas kali ini pun tidak menjamin bahwa blog kamu akan cepat terindeks, tapi usaha ini perlu dilakukan dalam upaya memperkenalkan blog kamu kepada search engine google.

Tanpa panjang lebar, mari bersama-sama kita buka simpul ikatannya satu demi satu "bagaimana cara mendaftar blogger di google" :

Klik di sini untuk memulai pendaftaran. Halaman browsing kamu akan ditampilkan seperti di bawah ini

Pada "URL", masukkan alamat lengkap blog kamu (ex : http://namablogkamu.blogspot.com).
Tambahkan komentar atau kata kunci yang mendeskripsikan mengenai blog kamu dalam kotak isi-an "Komentar". Kalimat atau kata kunci yang kamu masukkan dalam "Komentar" tidak akan mempengaruhi cara pengindeksan oleh google.
Selanjutnya masukkan huruf yang tampil dalam kotak di atas tombol "Tambahkan URL"
Terakhir klik "Tambahkan URL".

Tunggu loading ke halaman verifikasi yang menyatakan blog kamu telah dimasukkan dalam database google dan bersabar untuk penayangannya di search engine google.

Selamat mencoba...

Read More »

Membuat Kotak Pesan ShoutBox

aep nat Trik Blogger 2 komentar

Kotak pesan atau istilah lainnya ShoutBox, TagBoard, dan ChatBox adalah kotak yang berfungsi untuk meninggalkan pesan singkat dan bisa juga digunakan untuk tempat chatting.

Jangan heran jika saat ini shoutbox lebih banyak digunakan untuk tempat promosi blog. Beberapa kali saya menemukan teknik penyampaian pesan singkat pada shoutbox yang begitu menggoda. Pesan tersebut berupa promosi halus untuk bergabung sebagai refferal bisnis tertentu. Tapi saya senang-senang saja, yang penting isinya no spam and no porn. Aksesoris shout box dapat Anda pasang pada blog dan dapat juga tidak dipasang. Namun untuk blog baru seperti saya, sebaiknya dipasang saja. Tujuannya adalah untuk tempat berteduh atau tempat beristirahat bagi blog lain yang numpang lewat atau numpang keren. Malah lebih asik kalau ada shoutbox-nya, bikin blog lebih hidup. Namun tergantung Anda saja, mau dipasang ya bagus, tidak dipasang juga bagus. Kotak pesan biasanya ditempatkan pada sidebar blog dan ada juga yang ditempatkan pada footer blog. Tinggal pilih mau ditempatkan di mana dan disesuaikan dengan template blog. Untuk membuat kotak pesan memang sangat sulit karena berupa kode-kode script. Jika sudah mahir, Anda dapat menciptakannya. Yang saya tawarkan adalah membuat kotak pesan shoutbox gratis. Banyak situs yang menyediakan fitur ini, seperti misalnya ShoutMix, CBox, Oggix, dan yang lainnya. Anda tinggal pilih mau pasang yang mana. Saya sendiri menggunakan CBox karena tampil lebih sederhana dibanding free shoutbox yang lain. Oke, bagaimana cara pasangnya? Saya kasih yang Shoutmix aja ya, biar lebih umum karena sangat banyak yang memakai shoutmix untuk kotak pesan singkat blog.

Cara Pasang Shoutmix Pada Blog

Silahkan buka situs Shoutmix dan langsung mendaftar dengan klik Create Shoutbox. Isi form sesuai permintaan mereka.

Kemudian akan ada pemberitahuan Thank you for using ShoutMix

Untuk menciptakan shoutmix silahkan klik tulisan control panel.

Halaman berikutnya akan tampil fitur shoutmix seperti Quick Start, General, Display dan Security. Pada menu display, Anda dapat mengatur terlebih dahulu Style & Color, Date & Time, dan menu lainnya.

Jika sudah puas dengan tampilan preview shoutmix, silahkan klik save setting.

Perhatikan, di sana ada tulisan Starter Guide dan yang Anda klik adalah kalimat di bawahnya yaitu Place the shoutbox on your site.

Berikutnya akan diberikan kode html untuk kotak pesan pada Generated codes. Sesuaikan ukuran width dan height dengan template blog. Copy kode html tersebut pada notepad atau teks editor lainnya.

Masuk ke blog Anda dan klik Tata Letak yang membawa Anda ke Elemen Halaman dan klik Tambah Gadget. Pada menu selanjutnya, pilih tambah HTML/Javascript. Nah, Anda paste kode html tadi di situ. Dan klik simpan. Ok, sekarang lihat hasilnya pada blog.

Bagimana, cukup mudah bukan. Kalau ingin merubah tampilan shoutbox pada blog, Anda tinggal edit dengan loggin ke Shoutmix lagi. Semoga berhasil.

Read More »

Menghilangkan Navbar atau Autohide?

aep nat Trik Blogger 0 komentar

Sebuah judul yang plin-plan, menghilangkan navbar atau autohide? ada yang belum tau Navigator Bar (navbar)? Itu tuh menu pada bagian paling atas blog kamu (yang menggunakan blogger tentunya). Bagi sebagian orang menu ini dianggap kurang enak dipandang dan banyak sekali yang menghilangkannya. Namun taukah kamu menghilangkan menu navbar ini melanggar aturan TOS! Karena dianggap menghilangkan identitas blogger. Jika blog kamu masih gratisan mungkin akan berfikir 2x kalau akan menghapus menu ini, hanya demi sebuah penampilan blog kamu bersiko untuk di banned. Lain halnya jika kamu telah punya custom domain sendiri saya rasa tidak akan bermasalah jika men-disable feature ini.

Sebenarnya ada cara untuk mengakali supaya tidak melanggar TOS tersebut, menu navbar kamu di auto hide. Jadi ketika pointer mouse tidak diarahkan ke bagian paling atas blog kamu, menu navbar tidak akan muncul, dan sebaliknya jika diarahkan akan muncul tentunya.

Bagi saya navbar ini mempunyai peranan penting bagi aktivitas blogging saya, berhubung blog saya ini masih gratisan juga, saya bisa dengan mudah untuk bolak-balik masuk ke halaman dashboard atau setting pada blogger ini. Jadi saya terbiasa menggunakan menu ini.

Eniwei itu semua terserah kepada kamu apakah ingin tetap menggunakan navigator bar ini seperti saya (he..he..!!), atau menghilangkan menu ini. Atau tertarik buat meg-Autohide menu ini? Ok, saya akan membagi ilmunya...

Cara menghilangkan navigator bar pada blogger:
1. Login ke account blogger kamu
2. Masuk ke menu Layout dan Edit HTML

Perhatian!!! Simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap

3. Cari kode:

/* CSS to hid navigation bar */
#navbar {
height:10px;
visibility:hidden;
display:none;
}

Biasanya template yang kamu download dari suatu situs (bukan template standar blogger) sudah menyertakan kode ini, jadi menu navbarnya sudah di hilangkan. Karena saya lebih suka menggunakan menu navbar, maka saya selalu menghapus kode ini agar menu navbarya tetap muncul.

Jangan lupa Save dan lihat hasilnya...

Auto Hide pada Navbar Blogger:
1. Login ke account blogger kamu
2. Masuk ke menu Layout dan Edit HTML

Perhatian!!! Simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap

3. Cari kode
body {

Jika agak sulit ditemukan tekan F3 lalu copy paste kodenya di kotak find search bagian bawah lalu klik next

4. Jika sudah ketemu letakkan kode berikut di atas kode
body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}

Jangan lupa Save dan lihat hasilnya.

Jadi gimana navbarnya tetap digunakan, dihapus atau di autohide? terserah kamu. Selamat mencoba...!!!

Read More »

Menulis kode html pada posting blog

aep nat Converter, HTML, Trik Blogger 0 komentar

kesulitan yang terjadi ketika kita mencoba membuat posting yang berisi kode javascript ato html adalah kadang kode itu di tampilkan sesuai tampilan pada browser atau tidak berbentuk tulisan teks.Kadang juga error karena ada beberapa bagian yang tidak lengkap ternyata solusi yang diberikan adalah kode HTML Java Script yang akan kita tulis itu harus diubah atau dikonversi dulu.kita bisa menggunakan tool gratis yang ada diinternet, yaitu:

Cari situs untuk conversi kode HTML atau Java script salah satunya disini
Pada kotak isian, copy paste kode HTML yang akan kamu convert dan tuliskan pada postingan blog kamu. Klik menu convert now.
Kode HTML yang kamu masukkan di sana tadi akan mengalami sedikit perubahan. masuk keblog kamu Klik menu HTML pada postingan blog kamu dan salinlah kode HTML yang telah kamu convert tadi.kedalam postingan blog kamu Klik Publish.

lihat!!! nanti kode html/javascript akan ditampilkan selayaknya teks!

Read More »

Membuat Emoticon Kucing Di Kotak Komentar

aep nat Emoticon, Trik Blogger 6 komentar

Siapa yang suka kucing? kalo saya seh gak suka kucing, hi,, . Tapi juga gak sedikit yang suka kucing, mungkin kamu juga suka kucing?? Oke, yang suka kucing akan saya manjakan kalian dengan belajar berbagi yang satu ini, yaitu Menampilkan Emoticon Kucing di Kotak Komentar. Setalah dulu pernah kita bahas cara menampilkan emoticon atau smile bergaya yahoo.....
Cara menampilkan emoticon kucing ini diperkenalkan pertama kali oleh Kendhin dan kemudian saya bahas lagi untuk belajar berbagi kepada anda-anda yang suka emotion kucing ini. menurut saya kekurangan emotion kucing ini dapat menyebabkan page loader lambat, dan karena alasan itulah saya tidak memakainya di blog saya.. so, jika anda suka dengan emotion kucing ini untuk di adopsikan ke blog anda, langsung aja yuk...!!!

Cara Menampilkan Emoticon Kucing di Kotak Komentar
1. Login ke www.blogger.com lalu pilih tata letak (layout)
2. Pilih EDIT HTML
3. Expand widget template anda

Perhatian!! Jangan Lupa Back Up dahulu template kamu dengan mengklik full download template

4. Lalu taruh script berikut ini di sebelum </body>
<script src='http://idub.007sites.com/smile2.js' type='text/javascript'/>

5. Cari kode berikut ini

6. Kalau sudah ketemu taruh script berikut ini di bawah
<p class='comment-footer'>

Simpan Template kalau sudah selesai

Selamat Mencoba.....

Read More »

Menampilan Emoticon Ala Yahoo di Kotak komentar

aep nat Emoticon, Trik Blogger, Yahoo 0 komentar

Kalian yang sering YMan pasti tidak akan asing dengan emoticon ini. karena sesuai dengan judul ini, Emoticon Ala Yahoo. naah... di sore yang mendung ini saya akan belajar berbagi tentang emoticon ala yahoo di kotak komentar. Mungkin dengan menampilkan emoticon ini akan menarik pembaca untuk berkomentar. Selain itu dengan emoticon ini yang berisi berbagai ungkapan ekspresi wajah, ada marah :x , senyum :) , sedih :( dan sebagainya
Ingin blog lebih ekspresiv dengan emoticon-emoticon ala yahoo? yuk ikutin langkah-langkah berikut ini

Caranya sebagai berikut
1. Login ke blogger lalu pilih tata letak
2. Pilih EDIT HTML
3. centang Expand widget templat

Perhatian!! Jangan Lupa Back Up dahulu template kamu dengan mengklik full download template

4. Lalu taruh script berikut ini di sebelum </body>

<script src='http://idub.007sites.com/smile1.js' type='text/javascript'/>

5. Cari kode berikut ini

6. Kalau sudah ketemu taruh script berikut ini di bawah

<p class='comment-footer'>

Simpan Template

Selamat Mencoba.....

Read More »

Mengganti Favicon ( Favourite Icon )

aep nat Trik Blogger 0 komentar

Kalian Tau apa favicon kan ? Favicon itu singkatan dari Favourite Icon......
itu... gambar favorit kita yang muncul di adress bar kita o.k ?
Saya menulis postingan ini karena ada teman sekolah saya yang bertanya... gmn sich cara ganti gambar yang di address bar (favicon) ??? naah, aku beri jawaban kepada dia, dan dari pada belajar berbagi kepada teman sekolah, mending saya buat posting aja dech...!!!
Secara Default, pihak blogger hanya akan memberikan icon orange bertuliskan huruf B ditengah2nya....... hehehe.... dan akan terasa membosankan bagi beberapa orang.. ya ga ?

sebelumnya kita membuat faviconnya dulu....
Cara membuatnya relatif sangat mudah. Ikuti langkah2 yang saya tulis ini :
1. Buatlah sebuah icon yang akan dijadikan favicon pada address bar.
2. Ubahlah icon image yang anda miliki menjadi favicon dengan menggunakan favicon generator melalui situs www.favicongenerator.com.
3. Klik pada tombol Browse...
4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
5. Klik pada tombol Generate Favicon.
6. Setelah proses selesai, klik pada Click Here to Download your favicon.
7. Save ke komputer anda.
8. Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gambar,
contoh adalah ke Yahoo! Geocities / hosting yang lain kesukaan anda memyimpan image.

Image tanpa membuat icon favicon dengan favicon generator :

Kalau anda malas membuat icon, saya sarankan pake aja icon dari yahoo ( seperti pada blog saya ini ). Contohnya seperti ini :

Untuk icon dari yahoo, alamat link dibawah ini, jadi anda tidak usah pusing2 membuat icon sendiri tetapi langsung memasukkan alamatnya :

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif

langsung ja yuk... belajar berbagi mengganti favicon...

1.Login Ke Blogger
2.Tata Letak --> Edit HTML
3.Centang Expand Template Widget

Perhatian!!!Back up template anda dahulu dengan mengklik Full Dowload Template

4.Cari kode </head>

Tekan F3, lalu cari kode diatas dengan mengisi bar yang kosong di bawah mozilla firefox

Copas Kode Di Bawah ini tepat di atas </head>

<link href='alamat url image' rel='shortcut icon' type='image/x-icon'/>

Ganti kata alamat url image dengan alamat gambar yang telah anda buat atau dengan icon yahoo....

Simpan Template

Selamat Mencoba....

Read More »

Postingan Lama

Belajar Berbagi

Recent Posts

Recent Comments

Links

Feed

Misc

Mempercantik kode HTML/Javascript di posting

Cara Menampilkan Status Off/Online Yahoo Messenger

Cara memasang Translate bendera

Trik Membuat Cloud Label (Label Awan)

Menu next page atau tombol navigasi halaman

Cara Mendaftar Blogger di Search Engine Yahoo & MSN

Read More Otomatis

Membuat Read more dengan Judul Posting

Cara Membuat Read More

Cara Membuat Search Engine

Cara Pasang Image di Sudut Blog

Mempercepat Page Load Blogger

Cara Mendaftarkan Blogger di Google Search Engine Dipostkan

Membuat Kotak Pesan ShoutBox

Menghilangkan Navbar atau Autohide?

Menulis kode html pada posting blog

Membuat Emoticon Kucing Di Kotak Komentar

Menampilan Emoticon Ala Yahoo di Kotak komentar

Mengganti Favicon ( Favourite Icon )

Choose Your Language

Contact

Archives

Categories

Labels

Links