Loading...

Menu tersembunyi pada widget

"Ssssttt.... jangan bilang siapa-siapa..." Begitulah analogi dari menu ini. Untuk melihat contohnya, lihat pada bagian bawah situs blog saya, dan klik "Sssstt.. Ada dollar gratis disini..." Anda akan melihat sebuah tabel dalam menu tersebut. Untuk membuat menu ini, ikuti langkah-langkah berikut :

Anda harus mendownload file berikut dan hostingkan pada server anda atau tempat anda menghostingkan file-file. (Note : Untuk mengetahui cara menghostingkan file-file Java Script dan CSS Klik Disini!!)
  1. dddropdownpanel.js
  2. dddropdownpanel.css
File gambar :
  1. toggleleft.gif
  2. toggleright.gif
  3. arrow-down.gif
  4. arrow-up.gif
Setelah anda mendownload file-file tersebut, Login ke blog anda, klik layout pada blog anda klik edit html.

Copykan kode berikut pada section Head :

<link rel="stylesheet" type="text/css" href="dddropdownpanel.css">

Kemudian copykan kode dibawah ini sesudah <BODY>
(Note : Menu ini dapat berada posisi atas halaman atau widget anda)

Setelah itu, klik Save Template dan lihat hasilnya...
Selamat mencoba..
 Baca selengkapnya...

Share |
0 komentar
Date: 21 July 2009
Categories :

Menampilkan Gambar Berada di Atas

Agar gambar selalu berada diatas Blog anda, walaupun halaman blog berganti, atau berpindah-pindah, ikuti langkah-langkah berikut:
  1. login ke blog anda
  2. Klik layout, kemudian klik tab Edit HTML
  3. Pada kotak CSS anda, cari script ]]></b:skin> kemudian letakkan script berikut ini diatas script ]]></b:skin>


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

  4. Silahkan diganti posisi gambar tersebut dengan mengganti huruf yang bercetak tebal dengan Left - Right - Bottom - TOP
  5. Selanjutnya cari script berikut ini </body> dan letakkan script dibawah ini sebelumnya script </body>


    <div id="trik_pojok">
    <a href="http://modiftampilanblogger.blogspot.com">
    <img src="http://photobucket/love.gif" border="0" /></a>
    </div>


  6. Silahkan diganti alamat yang berwarna biru dengan alamat blog anda kemudian ganti alamat yang berwarna merah dengan alamat gambar anda.
Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Membuat ComboBox

Contoh combo Box :

Untuk membuat Combo Box seperti diatas, lakukan langkah-langkah berikut :
  1. Login ke blog anda
  2. Pilih Layout dan klik Add yang berada diatas Page Element anda
  3. Kemudian pilih element HTML/JavaScript dan masukkan kode dibawah ini :

    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="0" selected>Arsip Blog</option>
    <option value="Links 1">Text 1</option>
    <option value="Links 2">Text 2</option>
    </select>



  4. Lihat dengan seksama kode tersebut dan ganti teks yang sama pada Combo box yang ada pada kode tersebut dengan teks anda inginkan.
  5. Selamat Mencoba...

 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Mengganti Background Blog dengan Gambar

Siapkan gambar yang ingin dijadikan background pada blog anda, dengan ukuran terserah anda, akan tetapi jangan terlalu besar, karena akan memperlama pengunjung membuka blog anda. Jika gambar sudah ditentukan, ikuti langkah-langkah berikut :

Lakukan Login terlebih dahulu pada blog anda
Klik Menu Layout

Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download atau dengan cara meng-Copy seluruh kode Template, paste pada notepad lalu save)

Kemudian tambahkan kode (alamat gambar) berikut pada style sheet css anda


url('http://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTD7_k6iTJFHocWS3A5kW5hJymXZCQtshIFQXPlPAJyrBSSvpEWAgMDhcanSdEPqWyswY7auHbpptE5zsiNzFiw9NgOxJe-SREj_SZ3oVgHXx0RN7QrRp9W42vtSbhyphenhyphen2GtV8D1SZolOCu/s320/MSN.gif');



dan letakkan pada teks yang berwarna merah:

untuk minima klasik :


body {
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTD7_k6iTJFHocWS3A5kW5hJymXZCQtshIFQXPlPAJyrBSSvpEWAgMDhcanSdEPqWyswY7auHbpptE5zsiNzFiw9NgOxJe-SREj_SZ3oVgHXx0RN7QrRp9W42vtSbhyphenhyphen2GtV8D1SZolOCu/s320/MSN.gif');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}



untuk minima baru :


body {
background:$bgcolor url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTD7_k6iTJFHocWS3A5kW5hJymXZCQtshIFQXPlPAJyrBSSvpEWAgMDhcanSdEPqWyswY7auHbpptE5zsiNzFiw9NgOxJe-SREj_SZ3oVgHXx0RN7QrRp9W42vtSbhyphenhyphen2GtV8D1SZolOCu/s320/MSN.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}



Silahkan diganti alamat link gambar yang berwarna diatas dengan alamat gambar anda.

Klik tombol Preview untuk melihat perubahan

Jika sudah sesuai dengan keinginan, klik tombol Save Template
 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Menampilkan Iklan di Bawah Read More / Baca Selengkapnya

Pastikan sistem Read More pada blog anda aktif dan ikuti langkah-langkah berikut :

  1. Login terlebih dahulu pada blog anda
  2. Klik Menu Layout
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download atau dengan cara meng-Copy seluruh kode Template, paste pada notepad lalu save)
  4. Berikan Checklist pada option Expand Template Widget dan tunggu beberapa detik hingga proses selesai.
  5. Temukan kode dibawah ini pada style sheet css anda :


    <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>


  6. Tambahkan kode iklan anda (Adsense, Kumpulblogger, dll) sehingga kode yang diatas akan 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/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>

    <br /> <br />
    KODE IKLAN ANDA PASTE DISINI!!! </p>

    </b:if>


  7. Klik tombol Preview untuk melihat perubahan
  8. Jika sudah sesuai dengan keinginan, klik tombol Save Template

Baca selengkapnya...

Share |
1 komentar
Date:
Categories :

Menampilkan Pesan Selamat Datang

Lihat contoh dibawah ini :



Pada saat pengunjung membuka halaman blog anda akan di sodorkan pesan seperti diatas, untuk membuatnya cukup dengan langkah-langkah sebagai berikut :
  1. Lakukan Login terlebih dahulu pada blog anda
  2. Klik Menu Layout
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)
  4. Temukan code </head> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).
  5. Silahkan Copy dan Paste code dibawah ini dan letakkan diatas code </head>. (Note : Ganti kalimat yang berwarna hijau dengan kalimat yang anda inginkan)


    <SCRIPT language='JavaScript'> alert ("Selamat datang di Share Center") ;</SCRIPT>


  6. Klik tombol Save Template
  7. Lihat hasilnya…

 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Membuat Tabel di Blog

Untuk membuat sebuah tabel tunggal, copy kode dibawah ini :


<table width="250" border="1">
<tr>
<td>

Contoh

</td>
</tr>
<table>


Hasilnya akan seperti ini :





Share Center


Untuk membuat tabel tunggal dengan format Center alignment, copy kode berikut ini :


<table width="200" border="1">
<tr>
<td align="center">

Contoh

</td>
</tr>
</table>



Hasilnya akan seperti ini






Contoh



Untuk membuat tabel dengan 2 baris dan 2 kolom, copy kode berikut ini :


<table width="300" border="1">
<tr>
<td align="center">

Contoh 1

</td>
<td align="center">

http://sharecenter.blogspot.com

</td>
</tr>
<tr>
<td align="center">

Contoh 2

</td>
<td align="center">

http://modiftampilanblogger.blogspot.com/

</td>
</tr>
</table>



Hasilnya akan seperti ini :










Contoh 1


http://sharecenter.blogspot.com


Contoh 2


http://modiftampilanblogger.blogspot.com



Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Membuat Link Kelap-kelip

Silahkan Copy kode dibawah ini dan Paste pada tulisan anda :


<blink><a href="http://share-center.blogspot.com/" target="blank">Share Center</a></blink>


Maka hasilnya akan seperti ini :
Share Center Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Membuat Judul Blog bergerak

Mohon lihat Judul/Title blog ini... Udah tau khan maksudnya… dan untuk membuat itu, silahkan ikuti langkah-langkah berikut :
  1. Lakukan Login terlebih dahulu pada blog anda
  2. Klik Menu Layout
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)
  4. Temukan code <head> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).
  5. Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian bawah code <head>. (Note : Ganti kalimat "Welcome in Share Center....more...." dengan kalimat anda)


    <script language='JavaScript'> var txt="Welcome in ShareCenter.blogspot.com : Free Software, Tips 'n Tricks Computers, Free Tutorials, Free Articles and more..";var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);segarkan=setTimeout("bergerak()",kecepatan);}bergerak();</script>


  6. Klik tombol Save Template
  7. Lihat perubahannya…

Baca selengkapnya...

Share |
1 komentar
Date:
Categories :

Membuat Highlight Link Berwarna - Warni

Contoh : Coba arahkan Cursor mouse anda ke judul Tulisan ini, anda akan melihat warna-warni dari link itu sendiri, dan untuk membuat, ikuti langkah-langkah berikut :
  1. Lakukan Login terlebih dahulu pada blog anda
  2. Klik Menu Layout
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)
  4. Temukan code <head> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).
  5. Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian bawah code <head>


  6. Klik tombol Save Template
  7. Lihat hasilnya…

Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Membuat Kalimat Kelap-Kelip

Untuk membuat huruf atau kalimat kelap-kelip, anda hanya menambahakan kode :
<blink> diawal kata
</blink>diakhir kata

Contoh : Masukkan kode dibawah ini pada tulisan anda

<blink> ShareCenter.blogspot.com</blink>



hasilnya :
ShareCenter.blogspot.com

simpel khan...
 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Memasang Page Element di Bawah Header Blog

Apa c maksudnya?? Element yang mana??? Untuk lebih jelasnya lihat pada gambar dibawah ini :


Jika anda sudah melakukan langkah-langkah dibawah, maka akan muncul Elemen baru di bagian bawah header pada halaman tata letak (bhs. Indo).

Untuk menambahkan Page Element yang baru dibawah header blog anda, ikuti langkah-langkah berikut :
  1. Login terlebih dahulu pada blog anda
  2. Klik Menu Layout
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)
  4. Temukan code ]]></b:skin> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).
  5. Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian atas code ]]></b:skin>

    #under_header{
    margin:10px 0;
    padding:1%;
    width:98%;
    }

  6. Temukan code-code yang sama dengan kode dibawah ini :


    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>


  7. Masukkan kode dibawah ini setelah kode diatas :


    <div id="under_header">
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>


  8. Klik Save Template dan klik Tab Layout, lihat perubahannya...
Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Memberi Efek Marque pada Kalimat

Efek marque dapat digunakan pada tulisan anda di blog dan pada element/bagian dari blog anda. Untuk mendapatkan efek Marquee, ikuti langkah-langkah berikut :

Ketikkan code berikut ini :
"Marquee ; Kanan ke Kiri"

<marquee align="center" direction="left" height="100" scrollamount="2" width="100%">
Contoh Marquee; kalimat bergerak dari kanan ke kiri
</marquee>



Hasilnya seperti ini :

Contoh Marquee; kalimat bergerak dari kanan ke kiri

Ketikkan code berikut ini :
"Marquee ; Kiri-Kanan"

<marquee align="center" direction="left" height="100" scrollamount="4" width="100%" behavior="alternate">
Contoh Marquee; kalimat bergerak kiri-kanan
</marquee>



Hasilnya seperti ini :

Contoh Marquee; kalimat bergerak kiri-kanan

Ketikkan code berikut ini :
"Marquee ; Kiri-Kanan dengan warna background"

<div align="left"><font face="georgia" color="Yellow"><B><marquee bgcolor="Blue" width="100%" scrollamount="3" behavior="alternate">
Contoh Marquee; kalimat bergerak kiri-kanan dengan warna background
</marquee></b></font></div>



Hasilnya seperti ini :

Contoh Marquee; kalimat bergerak kiri-kanan dengan warna background


Ketikkan code berikut ini :
"Marquee ; Bawah Keatas dan berhenti pada saat mouse diarahkan"

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
Contoh Marquee; Bawah Keatas dan berhenti pada saat mouse diarahkan
</marquee>



Hasilnya seperti ini :

Contoh Marquee; Bawah Keatas dan berhenti pada saat mouse diarahkan


Ketikkan code berikut ini :
"Marquee ; Bawah Keatas dan berhenti pada saat mouse diarahkan untuk Link"

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="75%" align="center">
<a href="http://modiftampilanblogger.blogspot.com" target="new">Modif Tampilan Blogger</a><br />
<a href="http://share-center.blogspot.com" target="new">Share Center</a><br />
<a href="http://planetgratis.blogspot.com" target="new">Planet Gratis</a><br />
<a href="http://zonabebasakses.blogspot.com" target="new">Zona Bebas Akses</a><br />
</marquee>



Hasilnya seperti ini :

Modif Tampilan Blogger

Share Center

Planet Gratis

Zona Bebas Akses



 Baca selengkapnya...

Share |
0 komentar
Date: 20 July 2009
Categories :

Memasang Profil Facebook Anda pada Blog

Langkah-langkah dalam membuat serta memasang Profil Facebook anda di blog adalah sebagai berikut :
  1. Login pada account Facebook anda,
  2. Klik Tab Profil pada account facebook anda
  3. Klik Buat Lencana Profil yang ada di paling bawah sebelah kiri pada halaman profil facebook anda.
  4. Copy kode yang telah disediakan oleh Facebook, dan paste pada Notepad
  5. Setelah itu, login ke Blog anda yang ada di halaman blogger Home
  6. Klik Layout, kemudian klik Add yang berada di atas page element anda
  7. Pilih Element HTML/Java Script dan paste-kan kode yang ada di note tadi kemudian klik OK dan lihat hasilnya.

 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Memasukkan Kode HTML pada Posting

Kode dibawah ini sangat berguna dalam penulisan blog dan sering digunakan jika ingin membuat kalimat-kalimat atau paragraf yang terpisah dengan kalimat-kalimat lain dengan border yang berbeda... dan biasanya digunakan untuk penulisan atau untuk menampilkan sebuah script atau kode karena kode yang ada di posting tidak bisa digabungkan dengan tulisan anda, nahhhh... dengan contoh ini semoga anda dapat menampilkan code/script anda pada pengunjung secara lebih leluasa,
Contoh kalimat :


Untuk kalimat yang diatas gunakan kode dibawah ini :
<p align="left"><textarea name="code" rows="1" cols="40">contoh untuk anda</textarea></p>
Contoh Script/Kode :


Untuk Script/Kode diatas gunakan kode dibawah ini :
<p align="left"><textarea name="code" rows="3" cols="40"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width="18" height="18" border="0"/></textarea></p>





 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Membuat Navbar Terlihat Transparan

Ikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik Edit HTML
3. Silahkan cari kode berikut ini di dalam template anda

#navbar-iframe{ campur kode yang lain };



4. Setelah ketemu, ganti semua kode tersebut dengan salah satu kode di bawah ini
kode untuk kelihatan transparan :

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


kode untuk tidak kelihatan sama sekali (menghilang) :

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


5. Klik Preview untuk melihat hasil kerja anda
6. Klik Save Template jika sudah sesuai dengan keinginan anda


 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :

Pasang Smiley Yahoo Messenger pada Posting

Pada saat anda membuat tulisan dan mempostingnya, gunakan smiley yahoo agar tulisan kalian seakan-akan hidup dan menarik dengan adanya smiley, untuk membuat smiley ikuti langkah-langkah berikut :

  1. Lakukan Login terlebih dahulu pada blog anda
  2. Buat sebuah tulisan anda dengan meng-klik New Post pada Blog anda
  3. Klik Edit Html dan Copy code berikut, sisipkan pada tulisan anda : (silahkan pilih smiley yang anda inginkan)










































































































  4. Klik Publish Post dan lihat hasilnya...







 Baca selengkapnya...

Share |
0 komentar
Date:
Categories :
Subscribe to: Posts (Atom)
 
Powered By Blogger | Designer By DJo | Resolution: 1024x768px | Best View: Firefox | Top

Copyright © 2008-2009