TIPS AND TRIK BLOG

Senin, 11 Juli 2011

Script Daun Berjatuhan di Blog

posted by rhoel macazzart:)

1. seperti biasa login terlebih dahulu di blog anda.
2. jika sudah masuk dasbor, maka menuju TATA LETAK > EDIT HTML.
3. Kemudian cari kode ini <head>
4. sudah ketemu, anda letakkan kode berikut tepat di bawahnya, bisa juga diletakkan di atas kode ini </body>
<script src='http://arti.master.irhamna.googlepages.com/daun.js' type='text/javascript'>
</script>
5. setelah selesai, simpan dan lihat hasilnya!!
Mudah bukan.
Selamat mencoba dan hijaulah Blogmu sekarang!!!

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Cara Membuat Efek Bintang Jatuh dan Tulisan Berkedip/Berubah Warna Pada Blog

posted by rhoel macazzart:)
· Login terlebih dahulu ke Blog Anda

· Kemudian masuk ke

· Pengaturan > Template > Edit HTML

· Jangan lupa backup terlebih dahulu template anda, yang belum tahu klik di sini

· Setelah itu di halaman HTML, cari kode <head> di bagian atas

· nah setelah itu copy kode berikut tepat di bawah tags <head>

Untuk Bintang Jatuh

<script src='

http://arti.master.irhamna.googlepages.com/bintang.js' type='text/javascript'>

</script>

Untuk Efek Tulisan Berkedip/Berubah Warna

Anda bisa memasukkan keduanya atau pilih sesuka hati, boleh satu saja misalnya salju atau tulisan berkedip.

Sudah, lalu jangan lupa di save dan lihat hasilnya

Bagus bukan, sekarang di blog anda sudah ada saljunya, serasa gimana gitu, sejuk kan!!!

Juga tulisan anda, seperti link atau judul postingan saat cursor ke arah tersebut, berkedip-kedipkan.

Selamat mencoba!!!!

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Sabtu, 09 Juli 2011

Bikin Berjalan Teks Nama Blog di Address Bar

posted by rhoel macazzart:)
Ini posting saya persembahkan buat para blogger yang pengen nama di address bar blog-nya bisa jalan-jalan. Tujuannya biar sedikit memikat pengunjung agar blog kita mendapat nilai lebih dari pengunjung, biar menarik maksudnye …

Caranya nggak gampang eh…nggak susah kamsudnya, Cuma tinggal copy paste sesuai instruksi dan rebez !

Caranya begini, silahkan anda copy kode di bawah ini dan letakan tepat di atas kode

(Biar gampang cari kode pake tombol keyboard ctrl+f pada posisi edit HTML di blogspot).

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

msg = "RHOEL";
msg = " RHOEL " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Untuk tulisan berwarna biru bisa Anda ganti dengan nama blog atau situs atau nama lain (suka-sukalah mau dikasih nama apa aja …), trus yang warna merah bisa Anda ganti dengan nama Anda sendiri atau nama samaran (ini juga suka-sukalah..mau nama apa aja).

Semoga Bermanfaat …

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Cara Buat Gambar Logo Animasi Di Pojok Blog

posted by rhoel macazzart:)
Sebenarnya sudah lama saya di minta untuk posting ini trik, “Bagaimana biar logo JB (JAKABANDA) bisa muter-muter di pojokan?”. Memang, ini trik lama dan sayangnya sampe kini masih buanyak yang belum tahu caranya (bagi yang udah tahu ya udah diem aja). Dari pada banyak cingcong mending langsung cabut ke TKP, ini dia:

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
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); }

3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode

"http://rhoel-chemen.blogspot.com" adalah link. ganti dengan link kamu.
"https://lh6.googleusercontent.com/-yU6TiWW8EjY/ThibmOcV7TI/AAAAAAAAAOg/oXVuf5ARXD4/s144/217778_200999036606859_100000902914959_540240_6884208_n.jpg" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam, kalender, hit counter atau widget-widget yang lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.

Selamat mencoba...

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

CARA MEMBUAT WIDGET KOMENTAR BLOG DENGAN KODE HTML

Kalau kamu ingin menempatkan widget ini di dalam posting kamu cukup memasukkan kode berikut ke dalam kotak posting kamu, saya rasa bagian ini tidak perlu di jelaskan sangan rinci. Sedangakan jika kamu ingin meletakkanya di sidebar lebih mudah jika kamu masuk ke Blogger >> Design >> Page Elements >> Add a Gadget >> HTML/JavaScript.

Berikut kodenya

<script style=text/javascript src=http://rhoel.googlecode.com/files/recent%20comment%20code.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://NAMABLOKKAMU.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script> <span id=rcw-cr><a href="http://rhoel-chemen.blogspot.com/2011/01/membuat-widget-recent-comment-dengan.html">izoel's notice comments</a></span></span> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Letakkan kode di atas di dalam form HTML/JavaScript atau di dalam form posting blog kamu.

Catatan :

Sebelum di simpan ganti tulisan tulisan yang berwarna merah dengan url blog kakmu.
Untuk mengatur jumlah posting yang di tampilkan
a_rc=5;var m_rc=false;var n_rc=true;var

Untuk mengatur panjang huruf yang di tampilkan :

n_rc=true;var o_rc=100;

Untuk menampilkan atau tidak tannggal komentar

a_rc=5;var m_rc=false;var n_rc=true;var

Ganti tulisan yang berwarna merah, untuk tanggal ganti nilainya dengan "true" jika ingin menampilkanya.

Selamat mencoba, semoga berhasil

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

CARA MEMPERCANTIK TEXT AREA BLOG

Kali ini saya mau posting cara mempercantik blogger, pengetahuan ini saya dapat dari blog lain dan saya posting ke blog saya (bukan copas lho). Lagsung saja :
Text Area adalah kotak aktif yang dapat digunakan untuk menempatkan teks atau kode atau script, untuk memudahkan dalam melakukan copy-paste (pengertian ala kadarnya, jika ada yang kurang tepat mohon pencerahannya).
Contoh text area standar:

Dan di bawah ini ada beberapa contoh text area cantik yang telah kang fatur modifikasi:

O iya, script cara membuatnya ada di dalam text area-nya ya tinggal di Copy Paste aja

Hehe gimana sooob dengan Teks Area Cantik di atas???? suka?, tertarik? silahkan dicoba, mudah mudahan bermanfaat bagi sobaat.
Silahkan sedot ... !!!

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Membuat Daftar Isi Blog anda

Kali ini saya posting gimana caranya biking daftar isi blog. fungsinya sudah tentu untuk memudahkan pengunjung blog mencari dan mengetahui apasaja yang ada di dalam blog kita (konten blog kita). Daftar isi ini bisa kamu letakkan dimana saja, selain di sidebar. Dan kamu tidak di pusingkan dengan memidofikasi konstruksi kode html yang rumitm kamu tinggal kopi dan paste kode di bawah ini.

Langsung saja ikuti langkah langkah berikut :

1. Seperti biasa LogIn ke blog para sobat
2. Klik Tab Layout
3. Klik Tab Page Element
4. Klik Add Gadget
5. Klik pilihan menu HTML/JavaScript
6. Pada kolom Content, pastekan script di bawah ini

<div style="border: 4px inset #cccccc; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://rhoeldaftarisiautomatic.googlecode.com/files/daftarisiauto.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://macazzartplanet.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>

Dan kamu bisa memindahkan tempat dimana kamu mau menempatkan daftar isi kamu pada menu Design pada blogger kamu

Teks yang berwarna hijau ganti dengan url para sobat. Setelah selesai klik tombol Simpan, dan lihat hasilnya!! gampang kan???
Silahkan SedOttt.....

Selamat mencoba, dan mudah-mudahan tips ini dapat membantu, janga lupa komenatarnya O.K

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Membuat efek pelangi pada link

Pernah liat link blog yang pas kursor di arahin ke LINK JADI WARNA PELANGI ?, caranya seperti ini ...

Pertama sign in ke blog kamu
Pada dashboad pilih Design pada blog yang mau kamu pasangin
Pilih Edit HTML, terus kamu beri tanda centang di kotak bertuliskan Expand Widget Templates
Nah sudah ?, kalau sudah cari tulisan <head> ,kalau ga mau susah tekan tombol Ctrl+F dan akan muncul kotak pencarian, ketikan <head> pada kotak pencarian dan enter,
Kalau sudah ketemu, kopy paste kan kode di bawah ini tepat di bawah kode <head>

Klik Simpan Template dan lihat hasilnya

Selamat mencoba, semoga berhasil......

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Cara membuat tombol Buka Tutup di blog (Spoiler)

Lanjutan dari posting sebelumnya seputar kali ini saya posting Spoiler.
Apa itu spoiler, definisi sederhananya yaitu "tombol buka tutup", kalau di posting sebelumnya di buku tamu, kali ini saya bikin tombol buka tutup di posting, agar lebih jelas contohnya seperti ini

nah udah ada bayangan ???, fungsinya untuk menghemat halaman posting yang misalnya penuh dengan gambar, dsb.

Cara membuatnya :
Copy Pastekan kode di bawah :

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Buka" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Isi kotak spoiler kamu disini

</span></div></div></div></div></div>

Yang warna merah itu kamu ganti sama isi posting kamu yang akan di sembunyikan, yang warna biru itu bisa kamu ganti sesuka kamu.......

Gampang kan ???,
Selamat mencoba, semoga berhasil....... :)

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Membuat teks berjalan

Sebenarnya trik ini sudah lama, sudah basi, tapi baru sempat saya posting. Tutorialnya saya kutip dari blog, cara membuat teks (marquee), ikuti langkah berikut untuk membuatnya...
Agar lebih mudah adabaiknya ingat baik baik langkah pertama, biasanya kode umum pada teks marque seperti ini :

Width; Lebar marquee, Satuan bisa pixel atau %.
Height; Tinggi marquee, Sauan bisa pixel atau %.
Bgcolor; Warna latar belakang marquee, Contoh : putih #fff.
Behavior; Perilaku text, Pilihan : scroll, slide, alternate
Scrollamount; kecepatan text bergerak, Satuan; 1, 2, 3, makin besar angkanya maka akan makin cepat jalannya
Scrolldelay; Kecepatan text bergerak, Satuan 1, 2, 3, semakin besar angkanya maka akan makin lambat
Direction; Teks bergerak dari arah mana, Pilihan left, right, top, dan bottom, up, down.

Langkah kedua, berikut contoh teks dengan efek marquee
Contoh 1

Taruh Text Yang Anda Inginkan Disini

Kode teks marque (Contoh 1) di atas seperti ini

keterangan:

Tanpa direction berarti arahnya memakai default maka akan dari kiri ke kanan
Tanpa background berarti warnanya akan menyatu dengan warna background default blog anda.
Width 100 % berarti lebar 100 dari lebar default. Dapat menyesuaikan diri sesuai dengan lebar default blog.

Contoh teks marquee (2):

tulis teks kamu disini

Kode contoh (2) seperti ini

Keterangan contoh (2) :

Bgcolor adalah warna background , bisa kalian ganti dengan warna lain.
Width adalah lebar, disini saya menggunakan pixel sehingga tidak seperti contoh 1 yang menyesuaikan diri dengan lebar post.
Height adalah tinggi, sebaiknya anda menggunakan pixel pada height.
Span color adalah warna tulisan anda bisa menggantinya dengan warna lainnya.
Direction left berarti arahnya terus dari kiri ke kanan tanpa terputus, anda bisa menggunakan right jika ingin arah sebaliknya.

Contoh teks marquee (3):

Text Turun
Text Turun
Text Turun
Text Turun
Text Turun

Kode contoh marquee (3):

Keterangan contoh (3):

Direction down berarti arah datang dari bawah ke atas , bisa diganti dengan up jika kamu mau text turun ke bawah.
Onmousover berarti text berhenti pada saat cursor diarahkan ke text tersebut.
Onmouseout berarti text kembali bergerak pada saat cursor tidak diarahkan ke text.

Untuk mengatur tingkat kecepatan bergerak, kamu tinggal menambahkan perintah scrollamount setelah perintah marquee, dengan nilai scrollamount ≠ 0 (jika nol tidak akan bergerak), seperti contoh berikut:

<marquee scrollamount="2">TULISAN BERJALAN</marquee>
<marquee scrollamount="3">TULISAN BERJALAN</marquee>
<marquee scrollamount="4">TULISAN BERJALAN</marquee>

scrollamount="3">TULISAN BERJALAN
scrollamount="5">TULISAN BERJALAN
scrollamount="7">TULISAN BERJALAN
Semakin besar nilai scrollamount-nya, akan semakin cepat bergeraknya, dan sebaliknya.

Untuk menambahkan backgound pada tulisan, kamu cukup menambahkan perintah bgcolor="warna" (warna: red, blue, orange, green, dll) atau perintah bgcolor="#kode warna" (mengenai kode warna silahkan baca artikel ini) pada perintah-perintah tadi, seperti contoh berikut:

<div style="color: black;">
<marquee behavior="alternate" bgcolor="orange" direction="left"><b>TULISAN BOLAK-BALIK</b></marquee></div>
<div style="color: black;">
<marquee behavior="alternate" bgcolor="#fdeae8" direction="right"><b>TULISAN BOLAK-BALIK</b></marquee></div>

TULISAN BOLAK-BALIK

Silahkan di utak atik sendiri, ubah tampilan sesuai keinginan kamu, selamat mencoba...

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Jumat, 08 Juli 2011

Cara Membuat Blog Tidak Dapat Di Copy

Cara bikin blog tidak bisa di copas dengan script anti Copas, untuk kawan yang tidak suka isi blognya di copy berikut saya punya triknya, sebenarnya trik ini sudah lama, dan saya pribadi lebih suka kalau blog saya bisa di copy dan berguna untuk banyak orang, banyak tutorial blog trik menggunakan cara memodifikasi HTML dan bagi pemula tentunya lebih mudah mengcopy daripada menulisnya, bagi pemula tentunya susah juga kalau tutorialnya sebagian besar bermumet mumet dengan kode HTML tapi tidak bisa di copy (berbagi ilmu tapi setengah setenganh) :).
Scrip ini membuat semua teks di blog tidak dapat di copy, caranya sbb:

Masuk ke Blogger >> Tata Letak >> Edit HTML, beri tanda centang pada tulisan Expand Widget Template, cari kode <head>

Kopikan kode berikut di bawah kode <head>

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined")
{document.onselectstart=new Function ("return false");}
else{ document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true"); }
</SCRIPT>

Kalau sudah Simpan Template dan lihat hasilnya, semua teks di blog kamu tidak bisa di coopy.......
posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Cara Membuat Accordion Tab Menu

menu accordion
itu menu yang berbentuk kotak dan terdapat panel untuk menampilkan menu di bawahnya yang sebelumnya tersembunyi setelah panel kedua, ke tiga dan seterusnya, lihat di sebelah kanan dan kamu akan melihat menu yang jika di klik judulnya akan menggulung keatas dan menampilkan menu di bawahnya yang sebelumnya tidak terlihat. Begitu juga jika kamu klik di tab berikutnya.

Pertama untuk membuat isi, judul dangambar image, pengaturanya menggunakan kode HTML seperti berikut

Kode HTML Untuk membuatnya :

/* HTML Structure */

<div id="accordion">
<h2 class="current">JUDUL PANEL 01</h2>
<div class="pane" style="display:block">
<img src="http://static.flowplayer.org/img/title/javascript24.png" alt="JavaScript tools" style="float:left; margin:0 15px 15px 0" />
<h3>JUDUL TAB MENU</h3>
<p>
<strong>SUB JUDUL MENU</strong>
</p>
<p style="clear:both">ISI MENU ACCORDION</p>
</div>

<h2>JUDUL PANEL 02</h2>
<div class="pane">
<h3>JUDUL TAB MENU</h3>
<p>ISI MENU ACCORDION</p>
</div>

<h2>JUDUL PANEL 03</h2>
<div class="pane">
<h3>JUDUL TAB MENU</h3>
<p>ISI MENU ACCORDION</p>
</div>
</div>

Perhatikan  kode yang saya beri warna, silakan kamu modifikasi sesuai keinginan  kamu

Selanjutnya adalah script js yang wajib kamu tambahkan setelah atau sebelum kode <head> pada template blogger kamu

<script src='http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js'/>

Kemudian javascript coding yang bisa kamu tambahkan sebelum atau di atas kode </body> pada template blogger kamu

<script>
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>

Selanjutnya kamu perlu mengatur tampilan acordion kamu dari warna background dan warna huruf pada menu kamu nantinya dengan CSS berikut

/* CSS Structure */

#accordion {
background:#333 url(url.latar belakang kotak-accordion.png) 0 0;
width: 300px;
border:1px solid #333;
-background:#666;}
/* accordion header */
#accordion h2 {
background:#ccc url(/url.panel-accordion.png);
margin:0;
padding:5px 15px;
font-size:14px;
font-weight:normal;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer; }
/* pengaturan header accordion saat aktif */
#accordion h2.current {
cursor:default;
background-color:#fff;}
/* accordion pane */
#accordion .pane {
border:1px solid #fff;
border-width:0 2px;
display:none;
height:180px;
padding:15px;
color:#fff;
font-size:12px;}
/* a title inside pane */
#accordion .pane h3 {
font-weight:normal;
margin:0 0 -5px 0;
font-size:16px;
color:#999;}

Keterangan :

Pengaturan untuk latar belakang isi accordion disini di setting pada kode dan latar belakang menu, kamu bisa kamu ganti dengan gambar dengan memasukkan alamat url gambar pada css berikut

#accordion {
    background:#333 url(url.latar belakang kotak-accordion.png) 0 0;
    width: 300px;
    border:1px solid #333;
    -background:#666;}

Selanjutnya adalah pengaturan panel accordion atau kotak horizontal tempat kamu meletakkan judul panel kamu, kamu juga bisa menggantinya dengan url gambar kamu sendiri, struktur cssnya sebagai berikut.

/* accordion header */
#accordion h2 {
    background:#ccc url(/url.panel-accordion.png);
    margin:0;
    padding:5px 15px;
    font-size:14px;
    font-weight:normal;
    border:1px solid #fff;
    border-bottom:1px solid #ddd;
    cursor:pointer;    }

Berikutnya pengaturan warna panel accordion saat aktif atau saat kamu klik tabnya,

/* pengaturan header accordion saat aktif */
#accordion h2.current {
cursor:default;
background-color:#fff;}

Pada contoh yang saya buat terdapat garis tepi di pinggir tab accordion, garis tepi di setting dengan kode css

border:1px solid #fff;
border-width:0 2px;

Dan pengaturan lain lain  seperti warna teks menu yang bisa kamu modifikasi dari struktur CSS di  atas 

Selamat Mencoba, semoga berhasil

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

LANGKAH-LANGKAH PERTAMA MEMBUAT BLOG

posted by rhoel macazzart:)

Posting kali ini ini saya buat untuk pemula yang ingin mencoba dunia blogger. Saya akan membahas dari awal cara pembuatan blog yang paling mudah di blogger.com .

Agar lebih mudah dalam memulainya saya anjurkan anda sebaiknya mempunyai account email dari google di gmail.com . Saya anjurkan mempunyai account email di google karena kalau kita sudah mempunyai account email di google berarti kita juga sudah mempunyai akses ke semua fitur google seperti googledoc, google webmaster, google analytic, google books, web album picasa,
dan tidak terkecuali blogger.

Jadi kita hanya tinggal masuk menggunakan alamat email kita dan mulai membuat blogger kita yang akan saya bahas di sini. Saya asumsikan anda sudah mempunyai account gmail.

Buka www.blogger.com , perhatikan kotak bertuliskan Sign in with your

Account.

* Isikan di kotak dengan alamat gmail kamu dan juga password gmail kamu.

Kalau sudah berhasil loggin kamu akan sampai di halaman konfigurasi blog (1) seperti gambar di bawah ini

* pada kotak pengisian "display name" itu adalah nama kamu, yang nantinya akan di selipkan di setiap posting kamu misalnya seperti ini "di postingkan pada(tanggal dan bulan terbit posting), oleh (nama kamu [Display Name]) ,
* kamu bisa melewatkan opsi Email notifications form ini tidak wajib di isi.
* Dan beri tanda centang di kotak Acceptance of Terms ini wajib di beri tanda centang. Kalau sudah klik Continue.

Selanjutnya kamu akan masuk ke Dasboard (Halaman muka blogger kamu).
Disini kamu belum bisa melihat blog kamu karena belum di ciptakan.

* Sekarang pilih (klik) kotak yang bertuliskan CIPTAKAN BLOG ANDA .
* Dan kamu akan di arahkan ke halaman dengan tampilan sebagai berikut

.
* Di kotak pengisian Judul Blog kamu isikan terserah kamu, judul ini akan tampil di atas header blogspot kamu nanti.
* Di kotak pengisian Alamat Blog (URL) isikan dengan alamat web blog yang kamu inginkan nantinya, contohnya kalau di blog ini alamatnya Alexander-zulkarnain.
* kalau sudah klik Lanjutkan. Selanjutnya kamu akan masuk ke setting pemilihan tampilan backround blog kamu

Pilih yang kamu suka dan klik Lanjutkan. Ini adalah sekaligus langkah akhir membuat blog, tapi kamu belum bisa menampilkan blog kamu karena kamu baru dan belum membuat satupun posting di blog kamu.

Selanjutnya kamu bisa klik menu Mulai Blogging dan kamu akan masuk ke lembar posting blog

Silakan posting artikel yang kamu sukai dan lalu klik publikasikan dan lihat blog kamu untuk yang pertama kalinya

Selesai.

Kalau masih belum jelsas bisa di tanyakan di kotak komentar
Selamat Mencoba, semoga berhasil

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

CARA MENGGANTI TAMPILAN TEKS DI ENTRI BLOG

Satu lagi nih trik mempercakep tampilan blog kamu dengan mengganti jenis huruf di blog kamu secara keseluruhan termasuk huruf judul blog, dll. Caranya gampang, ga mumet mumet pake masuk edit html segala, ikuti langkah berikut

Kamu masuk ke

Blogger

Design

Page Elements .

Pilih Add a Gadget terserah mau dimana terus kamu pilih opsi HTML/Java Script

Selanjutnya ada kotak pengisian, kotak judulnya di kosongkan saja.

Di kotak pengisian HTML kamu isikan berikut kodenya dari salah satu yang kamu
sukai.

XXXX

Comic Sans...........................................................................................<<<<<<

.

Papyrus................................................................................................<<<<<<

.

Lucida Hand Writing..............................................................................<<<<<<

.

Harrington.............................................................................................<<<<<<

.

Nah di atas ada beberapa kode pengaturan huruf.
Langkah terakhir Simpan dan lihat blog kamu.

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

CARA MENGGANTI KURSOR MOUSE PADA BLOG

Habis berpetualang di dunia blog dapet ilmu baru, sebenernya bukan baru si, cuma saya mau nyatet di blog saya biar ga lupa caranya mengganti kursor di blog, yang kaya di blog saya ini....
langsung saja caranya ikuti langkah berikut

Masuk ke Blogger
Design
Edit HTML
Beri tanda centang di kotak expand widget template

Selanjutnya cari kode body{.
Biasanya tersusun seperti berikut

body {
background: $bgcolor;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: lcenter;

Selanjutnya kopy paste kode berikut setelah body

cursor: url("http://lh5.ggpht.com/_ILzML2joCeU/TMObfIQBSrI/AAAAAAAAAF4/SCKahWMDZcM/1.gif"),text;

Sehingga jadi seperti ini

body {
cursor: url("http://lh5.ggpht.com/_ILzML2joCeU/TMObfIQBSrI/AAAAAAAAAF4/SCKahWMDZcM/1.gif"),text;
background: $bgcolor;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: lcenter;

Catatan : kamu bisa mengganti gambar kursor dengan mengganti url gambar kursor

Contoh url kursor :

http://lh3.ggpht.com/_ILzML2joCeU/TMObmT3iYFI/AAAAAAAAAGU/frODyWCd0as/11.gif

http://lh6.ggpht.com/_ILzML2joCeU/TL1YE015vCI/AAAAAAAAABg/ZOzwUi61bdk/q.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMObfYod0pI/AAAAAAAAAGI/MBaDEVektQM/8.gif

http://lh5.ggpht.com/_ILzML2joCeU/TMObfIQBSrI/AAAAAAAAAF4/SCKahWMDZcM/1.gif

http://lh6.ggpht.com/_ILzML2joCeU/TL1YEznB6WI/AAAAAAAAABk/-LkBFPhZD2g/th_4.gif

http://www.funutilities.com/files/cursors/6/6438/arrow.gif

Nah silakan mencoba

posted by rhoel macazzart:)

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

CARA MEMBUAT (chat box) ATAU BUKU TAMU YANG BISA DI BUKA TUTUP

kali ini saya akan menulis caranya membuat kotak chat (chat box) yang bisa di buka tutup (spoiler) yang kaya di blog ini. Widget ini nantinya akan tampil hanya tombolnya saja di sisi sebelah kanan layar.

Kotak buku tamu kamu nantinya akan tetap seperti tampilan aslinya hanyasaja tersembunyi di balik layar, dan akan di tampilkan kalau tombol atau gambar buku tamunya di klik.

Caran membuatya :

Loggin ke Blogger
Pilih Rancangan, tambah Gadget
Pilih HTML/JavaScript
Masukan kode script berikut ini:

#gb{

position:fixed;

top:100px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:2px;

}

</style>

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

TARUH KODE WIDGET SHOUTOXMU DI SINI

</div>

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Gambar image buku tamu (background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png) bisa di ganti sesuka kamu, masukan saja url gambarnya

lihat contoh image nya

http://1.bp.blogspot.com/_EkuBpiT9zmg/TTZlL6xXwJI/AAAAAAAAAb4/s-Hrqwod-JY/s1600/Buku+Tamu.png

http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZlMhakuoI/AAAAAAAAAb8/AI3q3TU6wAc/s1600/Buku+tamu2.png

http://4.bp.blogspot.com/_EkuBpiT9zmg/TTZlNVCMWhI/AAAAAAAAAcA/Nvdmi_JsIZQ/s1600/buku+tamu3.png

http://1.bp.blogspot.com/_EkuBpiT9zmg/TTZlOJgf29I/AAAAAAAAAcE/iv0i4z9mzac/s1600/buku+tamu4.png

http://2.bp.blogspot.com/_EkuBpiT9zmg/TTZlOz-q0hI/AAAAAAAAAcI/vrX2D6zcbts/s1600/buku+tamu5.png

http://2.bp.blogspot.com/_EkuBpiT9zmg/TTZlPh_CLdI/AAAAAAAAAcM/fCrzK7jotRU/s1600/buku+tamu6.png

http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZlQ1xY4uI/AAAAAAAAAcQ/pCzGg-HUWj4/s1600/buku+tamu7.png

http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZpfl-erkI/AAAAAAAAAcY/iuWMYZFQ1y8/s1600/buku+tamu1.png

http://1.bp.blogspot.com/_EkuBpiT9zmg/TTeXCYKT-NI/AAAAAAAAAco/AAVSnQeLKDU/s1600/Buku+Tamu+8.png

http://3.bp.blogspot.com/_EkuBpiT9zmg/TTpORiTp-DI/AAAAAAAAAeA/U8NpFS882dk/s1600/gustbook02.png

http://4.bp.blogspot.com/_EkuBpiT9zmg/TUj_uWmtl6I/AAAAAAAAAhc/OZEqO6_Q9y8/s1600/buku+tamu9.png

Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya (TARUH KODE WIDGET SHOUTOXMU DI SINI). Dan Simpan jika sudah selesai.

Selamat mencoba, semoga berhasil.

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Trik Membuat Buku Tamu Muncul Dengan PopUp Overlay

posted by rhoel macazzart:)

Kali ini kita akan membuat suatu modifikasi yaitu menggabungkan kedua widget di atas, yaitu kita akan membuat buku tamu tapi kali ini buku tamu yang akan kita buat nantinya akan muncul di tengah layar di dalam jendela overlay, jadi kita tinggal melakukan klik di gambar atau tombol yang kita sediakan untuk membuka buku tamu overlay seperti gambar yang di atas tersebut.

Silakan Corat Coret di Sini ::..

tutup kembali

Untuk membuatnya kita ingat source kode untuk membuat pop-up overlay sebagai berikut

/* Kode Pop Up Overlay */

<a href="javascript:popup('pop up overlay')">GAMBAR TOMBOL BUKU TAMU</a>
<div id="dialog-overlay">
</div>
<div id="dialog-box">
<div class="dialog-content">
<div style="text-align: center;">

***************************************************
KDOE CBOX ATAU SHOUTMIX KAMU DISINI
***************************************************
<div id="dialog-message"></div><a class="button" href="#">tutup kembali</a></div></div>
<style type="text/css">
#dialog-overlay {width:100%; height:100%;filter:alpha(opacity=50);
-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;background:#000;position:absolute;top:0; left:0;z-index:3000;display:none;}#dialog-box {-webkit-box-shadow: 2px 4px 60px red;-moz-box-shadow: 2px 4px 60px red;-moz-border-radius: 10px;-webkit-border-radius:10px;background:black;width:auto;position:absolute;z-index:5000;display:none;}#dialog-box .dialog-content {text-align:left;padding:5px;margin:13px;color:#000; text-shadow: 1px 1px 2px #000;font-family:arial;font-size:15px;}a.button {margin:10px auto 0 auto;text-align:center;display: circle;width:20px;padding: 5px 10px 6px;color: #fff;text-decoration: none;font-weight: bold;line-height: 1;background-color:blue;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;}
a.button:hover {background-color: #c33100;}#dialog-box .dialog-content p {font-weight:700; margin:0;}#dialog-box .dialog-content ul {margin:10px 0 10px 10px;padding:0;height:50px;}
</style>
<script src="http://izoellatoverlay.googlecode.com/files/latoverlay.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {$('#dialog-overlay, #dialog-box').hide();return false;});
$(window).resize(function () {if (!$('#dialog-box').is(':hidden')) popup();}); });
function popup(message) {var maskHeight = $(document).height();var maskWidth = $(window).width();var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();$('#dialog-message').html(message);}</script></div>

.
Pengaturan :
Untuk mennganti link overlay kita dengan gambar atau tombol overlay, kita ganti teks yang berwarna hijau dengan kode gambar, misalnya seperti di bawah ini

<img border="0" src="http://i1191.photobucket.com/albums/z464/rhoel1/buku-tamu.png" />

Letkkan kode di atas sehingga susunan kode overlay menjadi seperti ini

<a href="javascript:popup('ini contoh nya overlay dengan css3')"><img border="0" src="http://i1191.photobucket.com/albums/z464/rhoel1/buku-tamu.png" /></a>

<div id="dialog-overlay">
</div>
<div id="dialog-box">
<div class="dialog-content">
<div style="text-align: center;">...........................................................................................

Tampilan gambar di atas seperti ini izoel's notice

.yang nantinya misalkan kamu pasang widget ini di sidebar yang akan tampil adalah tombol atau gambar ini dan jika kamu klik gambar ini maka akan muncul chatbox atau buku tamu kamu.

Sekarang pengaturan untuk shoutmix

atau cbox kamu,
Pada struktur kode pop-up overlay gantikan kode yang saya beri warna biru muda dengan kode shoutmix atau cbox kamu.

Selesai, sekarang buka blog kamu dan lihat buku tamunya.
Selamat mencoba dan semoga berhasil.

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

MEMBERI GAMBAR DI SAMPING JUDUL HEADER BLOG

posted by rhoel macazzart:)

Kali ini saya akan menerangkan trik yang saya terapkan sendiri pada blog ini, yaitu memberi gambar di samping judul header. Sebenarnya mudah untuk membuatnya tapi bagaimanapun juga kalau memang belum tau caranya ya sulit bukan ?
Cara membuatnya dengan memasukkan kode untuk menampilkan gambar di samping judul blog pada form edit HTML, jadi silakan kamu masuk ke form edit html blog kamu dulu ( Blogger >>Dashboard >> Design >> Edit HTML ), beri tanda centang pada opsi Expand Widget Template.

Jika sudah sekarang kamu cari kode HTML untuk pengaturan header blog kamu, kalau di template blog saya susunannya seperti berikut :

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1><data:title/></h1>
<b:else/>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:includable>

Jika sudah ketemu kamu tinggal menambahkan kode untuk memberi gambar, kodenya sebagai berikut

<span style='float:left;'><img src='URL LOGO BLOG KAMU'/></span>

Jika di gabungkan strukturnya jadi seperti berikut:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1><data:title/><span style='float:left;'><img src='URL LOGO BLOG KAMU'/></span></h1>
<b:else/>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:includable>

Selesai, kamu bisa simpan pengaturan blog kamu.

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

CARA MENAMBAHKAN ICON DI SAMPING LINK LABEL PADA BLOG

posted by rhoel macazzart:)

Pertama silahkan anda menuju halaman EDIT HTML kemudian anda cari code seperti ini:

.sidebar li {
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}

Mungkin di setiap template berbeda-beda codenya anda fokus saja pada code .sidebar li { atau yang hampir miriplah sama code yang di atas,jika sudah ketemu silahkan anda tambahkan code alamat icon yang ingin anda pakai di bawahnya atau keseluruhannya seperti code di bawah ini:

.sidebar li {
background:url("http:// alamat ikon yang anda suka.gif") no-repeat 0px .20em;
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}

Ket: Ganti Tulisan yang berwarna PINK dengan alamat gambar yang ingin anda pakai..gak di ganti juga gak apa2...

Kemudian Save template dan lihat hasilnya

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Kamis, 07 Juli 2011

Cara mengganti icon pada blog

posted by rhoel macazzart:)

Sebelumnya Anda harus membuat dulu gambar atau mengedit gambar yang sudah ada menjadi berukuran 24 x 24 pixel up to 32 x 32 pixel,kemudian upload gambar tersebut web hosting. Berikut langkah-langkahnya:

1. Pilih gambar Anda dengan ukuran yang saya sebutkan diatas.
2. Silakan upload gambar tersebut ke web hosting, jika belum mempunyai web hosting silahkan registrasi disini 100% gratis.
3.Setelah login upload gambarnya.
4.Setelah selesai upload copy kode URL gambar Anda, seperti contoh kode URL image saya

http://h1.ripway.com/rhoel/

5.Untuk memasukkan ke blog Anda silakan Login, menu Layout > Edit HTML> jangan lupa klik Expand Widget kemudian cari kode berikut.

</head>

6. Setelah itu paste kode dibawah ini sebelum kode diatas

Untuk teks yang berwarna biru silahkan Anda ganti dengan link gambar Anda yang telah di upload ke web hosting tadi.

7.Kemudian Save.

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe

Membuat judul blog muncul satu persatu

posted by rhoel macazzart:)

1. login ke blogger
2. Klik rancangan kemudian klik elemen laman
3. Tambahkan gadget lalu copy-paste kode dibawah ini.

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

var message = new Array() // leave this as is

message[0] = "SELAMAT DATANG";
message[1] = "www.kepengenero.blogspot.com";
message[2] = "Jangan Lupa Follow";
message[3] = "::BERBAGI ILMU::";
message[4] = "Semoga Bermanfaat Ilmunya";

var reps = 2

var speed = 100

var p=message.length;
var T="";
var C=0;
var mC=0;
var s=0;
var sT=null;
if(reps<1)reps=1;
function doTheThing(){
T=message[mC];
A();}
function A(){
s++
if(s>9){s=1}

if(s==1){document.title='[B======] '+T+' [======B]'}
if(s==2){document.title='[=R=====] '+T+' [=====R=]'}
if(s==3){document.title='[==I====] '+T+' [====I==]'}
if(s==4){document.title='[===M===] '+T+' [===M===]'}
if(s==5){document.title='[====O==] '+T+' [==O====]'}
if(s==6){document.title='[=====B=] '+T+' [=B=====]'}
if(s==7){document.title='[======B] '+T+' [B======]'}
if(s==8){document.title='[=====B=] '+T+' [=B=====]'}
if(s==9){document.title='[====O==] '+T+' [==O====]'}
if(s==10){document.title='[===M===] '+T+' [===M===]'}
if(s==11){document.title='[==I====] '+T+' [====I==]'}
if(s==12){document.title='[=R=====] '+T+' [=====R=]'}
if(s==13){document.title='[B======] '+T+' [======B]'}
if(C<(8*reps)){
sT=setTimeout("A()",speed);
C++
}else{
C=0;
s=0;
mC++
if(mC>p-1)mC=0;
sT=null;
doTheThing();}}
doTheThing();
//]]>
</script>

Untuk tulisan yang berwarna hijau dan biru bisa du ganti sesuai keinginan Anda, dan yang tulisannya var speed itu untuk kecepatan.
tinggal di save.

Read More... Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe