Tampilkan postingan dengan label tips blooging. Tampilkan semua postingan
Tampilkan postingan dengan label tips blooging. Tampilkan semua postingan

Selasa, 26 Juli 2011

Membuat Buku Tamu "Tersembunyi"

Kalau kamu ga tau lagi mau taruh buku tamu kamu di mana, buat aja buku tamu kamu "tersembunyi", dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.

Caranya:
  1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
  2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
  3. Copy-paste kode di bawah ini:
    <style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    
    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3a3sj06kpJmWs8NUVLmfeGOEH9VnP9z0uonDS9MPjqNq95qaRFZOSUruMIbE758ZhYkB9tZPSSuQAj1amaOvykFrldNNGjzarcqgxMJOya-ciomi_vWt96gmgkz6RhfN4g5C1u5w2jfPm/') no-repeat;
    }
    .gbcontent{float:left;
    border:2px solid #A5BD51;
    background:#F5F5F5;
    padding:10px;
    }
    </style>
    
    <script type="text/javascript">
    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>
    
    <div id="gb">
    
    <div class="gbtab" onclick="showHideGB()">   </div>
    
    <div class="gbcontent">
    
    <!-- Ganti ini dengan kode buku tamu kamu -->
    
    <br/>
    Mau punya buku tamu seperti ini?<br/>
    Klik di
    <a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
    sini (Info Blog)
    </a>
    
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [tutup]
    </a>
    </div>
    
    </div>
    
    </div>
    
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>
  4. Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
  5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
  6. Selamat mencoba!
Catatan: di kode di atas aku pasang backlink ke post ini, kalau kamu mau berbaik hati, tolong backlink-nya jangan dihapus, ya! :D
Read more »

Minggu, 24 Juli 2011

Cara Mengganti Cursor Di Blog


Saya yakin, Anda pasti bosan dengan cursor berbentuk panah itu. Dengan trik kali ini, Anda bisa mengganti cursor panah tersebut dengan gambar-gambar yang menarik setiap kali blog Anda dibuka. Caranya pun sangat mudah.

Langsung saja, begini caranya:

1. Pilih tab “Tata Letak”.
2. Klik “tambah gadget” baik itu berada di bawah, atas atau samping.
3. Pilih “HTML/JavaScript”
4. Copy kode di bawah ini pada tempat pengetikan:

5. Nah, ganti alamat cursor http://www.123cursors.com/freecursors/7676.gif tersebut dengan alamat cursor yang lain. Untuk mengetahui alamat cursor yang lain, kunjungilah www.123cursors.com dan pilih cursor yang Anda inginkan. Supaya lebih mudah, cari berdasarkan kategori. Bila Anda sudah menemukan, copy alamat cursornya dengan cara klik kanan pada gambar cursor tersebut, lalu pilih “copy image location”.
Mudah kan?
Read more »

Blog Kita Tidak Bisa di Block / Anti Jiplak CoPas



Cara seperti ini kalau memang semua isi blog anda tidak ingin karya anda di CoPas orang lain,.

mau??

mau??

mau??
Silahkan ikuti langkah-langkahnya yUa^_^ :


1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode <head>
6. Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah 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>


7. Klik Simpan Template
8. Selesai
Read more »

Jumat, 22 Juli 2011

Membuat Banner Blog

Postingan ini atas permintaan Teman Saya yang ingin membuat banner blognya. Karena saya tahu sedikit tentang pembuatan banner blog ini maka saya coba membantu semampu yang saya bisa. Mudah-mudahan bermanfaat untuk para blogger newbie yang ingin membuat banner blog.
Jika kita perhatikan hasil jadi desain banner saya yang sederhana meski kecil tapi cukup bisa menarik perhatian (benarkah?) ^_^ mungkin karena tulisan pada banner kecil tersebut berkedip-kedip. Susah membuatnya? Tidak juga, malahan mudah kok! Syaratnya Anda bisa mengoperasikan dasar-dasar penggunaan Adobe PhotoShop CS2 dan Image Ready. Silahkan ikuti tutorialnya di bawah ini.

Ukuran banner pada tutorial ini disesuaikan dengan postingan saya terdahulu tentang Penyeragaman ukuran Banner Blogger. Jika Anda ingin banner yang lebih besar silahkan saja setelah Anda mempelajari tutorial ini.
Oke, kita langsung saja,
Bagian Pertama (Membuat Bingkai dan Teks):
  1. Buka Adobe Photoshop CS2
  2. Buka file baru dengan mengklik menu File>New. Pada kotak dialog New
a. Name: Beri nama file dengan nama Anda.
b. Width: 81 pixels
c. Height: 16 pixels
d. Resolution: 72 pixels/inch
e. Color mode: RGB 8 bit
f. Background Content: Transparent.(*)
g. Color Profile: Working RGB: sRGB IEC61966-2.1
h. Pixel Aspect Ratio: Square
i. Klik OK
  1. Perbesar ukuran window kanvas dengan menarik ujung bagian bawah.
  2. Perbesar kanvas dalam dengan menggunakan Zoom Tool (Z) (+).
  3. Buatlah background untuk banner Anda dengan menggunakan Rectangle Tool (U). Sesuaikan dengan ukuran kanvas. Jika sudah ubahlah menjadi Shape dengan mengklik menu Layer >Raterized >Shape.Buatlah bidang seleksi berbentuk Marquee (kotak) dengan menggunakan Rectangular Marquee Tool (M) di atas background lalu klik menu Edit >Clear, sehingga background Anda berbentuk list kotak (bingkai) seperti pada banner saya (contoh).
  4. Buatlah teks nama Blog Anda (contoh, Hakimtea) di tengah-tengah bingkai menggunakan Horizontal Type Tool (T). Sesuaikan ukuran teks dengan bingkai menggunakan Move Tool.
  5. Tambahkan efek Bavel and Embos dengan mengklik menu Layer >LayerStyle >Bevel and Embos (tambahkankan pengaturan lain jika Anda mau seperti drop shadow, inner shadow, outer glow, dll) klik OK jika sudah.
  6. Save dahulu pekerjaan Anda bagian pertama ini.
Bagian Kedua (Membuat Animasi Teks Banner “berkedip-kedip”)
  1. Masih di Adobe Photoshop CS2 dengan banner Anda yang sudah setengah jadi pada bagian pertama di atas.
  2. Berpindahlah sekarang ke dalam menu editing Adobe ImageReady CS2 dengan mengklik menu File >Edit in ImageReady (Ctrl+Shift+M). Tunggu sebentar, maka lembar kerja Adobe ImageReady CS2 akan terbuka.
  3. Perhatikan, untuk membuat animasi “teks berkedip” Windows Animasi harus tersedia, jika belum ada, Anda bisa memunculkannya dengan mengklik menu Window>Animation.
  4. Untuk membuat animasi, pertama-tama kita akan bekerja dengan menu Layers. Klik ikon mata pada layer teks nama Anda. Sehingga ikon mata tidak terlihat dan otomatis teks nama Anda pun tidak terlihat. Sedangkan untuk bingkai biarkan saja terlihat.
  5. Pindahlah ke jendela Animation, lalu klik ikon Duplicate Current Frame. Anda sekarang mempunyai dua frame di jendela animation. Klik ikon mata pada layer teks nama Anda sehingga terlihat. Hasilnya frame pertama teks nama Anda tidak terlihat sedangkan pada frame yang kedua teks nama Anda terlihat.
  6. Sekarang aturlah waktu “teks berkedip” pada jendela Animation. Klik pada Selects Frame Delay Time di bawah frame pertama dan kedua di jendela animation. Contoh: Beri waktu 0.5 pada kedua frame.
  7. Untuk mencoba animasi teks Anda klik Plays/Stops Animation masih di jendela animation.
  8. Kalau waktu berkedipnya sudah terasa cukup (tidak terlalu cepat juga tidak terlalu lambat)
  9. Langkah berikutnya, simpan pekerjaan Anda dengan mengklik menu File >Save Optimized (Ctrl+Alt+S). Pada Save as Type Anda pilih extensi Image Only (*.gif) klik Save.
Bagian Ketiga (Ubah File GIF Anda Dalam Bentuk URL):
  1. Untuk mengubah file gif dalam bentuk URL, Anda memerlukan web yang menyediakan layanan tersebut. Dan ternyata banyak sekali web yang menyediakan layanan secara gratisan, free atau orang malay biang ‘percuma’ ^_^ diantaranya Photobucket, servimg, dan layanan gratis lainnya. Atau jika Anda sudah memiliki account gmail Anda bisa mengaktifkan googlepages dan mengupload file photo disana, atau bisa juga dengan menggunakan layanan Picasa dengan menggunakan account gmail juga.
  2. Namun untuk mempermudah saya anjurkan untuk menggunakan layanan dari servimg karena Anda cukup mendaftar dengan account email yang manapun dan tanpa adanya email aktivasi. Cukup mendaftar, login dan Anda bisa langsung mengupload photo.
Bagian Keempat (Memasang Banner Di Blog Sendiri dan Menyediakan Tag HTML untuk Tukar Link)
  1. Diantara keempat bagian ini, rasanya bagian terakhir yang paling menarik dan mendebarkan ^_^. Khususnya untuk saya. (karena salah sedikit saja memberikan tag HTML bisa hancur semuanya)
  2. Ok, setelah mempunyai URL banner, Anda memerlukan Tag HTML agar bisa disimpan pada elemen html yang ditempatkan di sidebar blog sekaligus untuk memudahkan bertukar link. Dan saat seseorang mengklik banner Anda di blog lain (yang telah bertukar link) langsung di arahkan menuju blog Anda, seperti halnya di bawah,
hakimtea.com
Tukeran Link Yuk…!
Silahkan copy kode di atas…!
Saya akan segera link balik…!
Tag HTMLnya sebagai berikut,
<center>
<a href="URL-BLOG-ANDA"><img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="URL-BLOG-ANDA"> <img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>
Anda tinggal mengganti:
  • URL-BLOG-ANDA: (contoh, URL blog saya yang “dulu” http://hakimtea.blogspot.com)*
  • NAMA-ANDA.BLOGSPOT.COM: (contoh nama blog saya, Hakimtea.Blogspot.Com)*
  • URL-GAMBAR-ANDA: (contoh URL gambar saya, http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif)*
* NOTE: perhatikan pergantiannya 2 kali; satu agar tampil langsung sebagai banner Anda dan yang satu lagi tampil di teks area untuk memudahkan blogger lain mengcopy-paste kode HTML banner Anda.
Sebagai contoh saya masukan URL Blog, Nama blog, dan URL gambar “saya” ke dalam tag HTML di atas, maka kodenya jadi seperti di bawah ini,
<center>
<a href="http://hakimtea.blogspot.com"><img border="0" alt="hakimtea.blogspotcom" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="http://hakimtea.blogspot.com"> <img border="0" alt="hakimtea.com" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>
Perhatikan penyimpanan URL BLOG ANDA, NAMA BLOG ANDA dan URL GAMBAR ANDA… silahkan dicoba! Saya rasa cukup mudah dan tidak akan ada masalah! Seandainya ada, tinggalkan komentar di bawah :)
______________
(*) Transparent: Agar banner Anda bisa menyesuaikan diri (warna) di blog mana saja dia berada.
Read more »

Cara Membuat Tulisan Berkedip

Cara Membuat Tulisan Berkedip di Posting itu cukup mudah kok...
Ikuti langkah-langkahnya:
1. Masuk ke Dashboard blog mu,
2. Buat Entri Baru,
3. Kalau sudah selesai Edit HTML nya,
4. Tambahkan kode berikut di tulisan yang kamu mau,

<blink>Text Kamu</blink>

5. Lalu tekan Compose,
6. Lihat deh hasilnya, jadinya kaya gini,

Text Kamu
Read more »

Memasang Efek Salju di Blog

Pingin turun salju pada blog anda agar terlihat lebih hidup dan cool (baca: keren)? Baik, maka anda perlu memasang efek salju di blog anda.

Untuk memasang efek salju, caranya sangat mudah:

1. Buka blogger. Masuk ke menu Design -> Page Elements

2. Klik Add a Gadgets -> HTML/Javascript

3. Masukkan script berikut kedalam kotak
<script src='http://hermanblog.googlecode.com/files/snow.js' type='text/javascript'> </script>
4. Tekan Save. Selesai


Tidak sulit bukan? Kalau tidak mau repot ya gunakan saja cara dibawah ini

1. klik tombol Tambahkan Efek Salju Pada Blog dibawah ini


2. Pilih blog yang ingin anda pasang efek salju lalu klik Add Widget
3. Selesai.

Selamat mencoba... senyum
Read more »

Cara Memasang pesan Terimakasih di bawah komentar

 
Jangan lupa Download terlebih dahulu template lengkap, untuk jaga-jaga.
 
  1. Log in blogger
  2. Masuk ke menu Rancangan, Edit Html,
  3. Centang Menu Expand Template Widget
  4. Simpan kode berikut Diatas kode ]]></b:skin> :

/*comment messages*/
.visitormessages {
text-align: right;
color: #F90;
padding-right: 3px;
font-style:italic;
}
.visitormessages a:link{
color: #F90;
font-style:italic;
}
.visitormessages a:hover{
color: #F90;
border-bottom: solid 1px
}
.visitormessages a:visited{
color: #F90;
}

5. Cari kode <data:comment.body/> dan simpan kode berikut tepat dibawahnya:
<div class='visitormessages'>
<b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
Terimakasih sudah berkomentar di &#187;
<span><a expr:href='data:post.href'><data:post.title/></a></span>
</div>

Catatan : Untuk kode CSS nya silahkan kawan-kawan sesuaikan dengan template kawan .
6. Simpan Template dan lihat hasilnya pada Artikel blog kawan yang ada komntarnya.. :)
Read more »

Audit Your Landing Pages

We have added what we feel is a cool new feature to the Alexa Site Audit, the Landing Page Auditor. The Landing Page Auditor is a simple, yet powerful, interactive tool designed to help you giving your landing pages the best SEO boost you can.

You start by choosing a page you want to audit. It can be any page on your site, but you want to concentrate on those few pages you really want to drive organic search traffic to. The idea is do everything you can to help search engines learn what these pages are about, and to emphasize that these are the pages to show when people search for your keywords.

When you click on the Landing Page Auditor, the first thing you see are tables containing an overview and a histogram of all the anchor text on your site for links to the page you are analyzing. If you look at the screen shot to the right, which was taken from a report run on my family blog, you can see that my site has 3064 links to my home page. You can also see how the numbers of links break down by anchor text phrase.

Looking at your anchor text is a great place to start. First, make sure that your text is descriptive and that you have avoided phrases like "click here" or "more". For my blog, over 1000 pages have "Home" as anchor text. These "Home" links, while fine for visitors to my blog, are of little value to a search engine. Also, while you are looking over your anchor text, make sure each phrase describes the page you are auditing. With the exception of "Home" and a few navigation links, the anchor text to my blog's home page seems to be reasonable so I'll move on.

Once you are comfortable with your anchor text, the next step is to enter the keyword or keyword phrase you want to audit. Landing pages should be fairly specific, so you should optimize each page for three to five keywords. There are a small number of crucial places you want your keyword to appear, and when you enter your keyword a new column will appear telling you which of these crucial your keyword appears in. In the example to the right, you can see that my keyword phrase is missing in all but the page text. I guess I have some work to do.

By default we show you the results of the page crawled as part of the site audit, but you can also check your live site by pressing the "Update From Live Site" button. Since the anchor text data is built by looking at your entire site, the only way to update that data is to run another report.

When a keyword has been entered, the anchor text column on the left also changes slightly. The data is the same, but it is split between links whose anchor text contain the keyword and links whose anchor text does not. In the example, less than 1/3 of the links on my site to my home page have anchor text containing my keyword phrase. I am fine with that since I want my anchor text to be optimized for other keywords as well, and I want to avoid keyword stuffing.

Once I am happy with my page and have decided on the changes I want to make to my anchor text, I can move on to my the next keyword or my next landing page. That's it. As I said, the Landing Page Auditor is a simple yet powerful tool to help you optimize your website for organic search.
Read more »

Selasa, 19 Juli 2011

Cara Pasang Gambar Favicon Di Blogger

Favicon adalah singkatan dari favorite icon. Sebuah gambar kecil yang terlihat pada address bar sebelah kiri URL/alamat blog. Bagi pengguna blogger, biasanya favicon yang terpajang berupa Logo B ciri khas dari blogspot. Tapi jika tidak suka, sobat bisa mengganti favicon bawaan blogger alias pasang gambar favicon kreasi sendiri.

favicon+blogger+1


Seperti pada blogerdin. Coba perhatikan, dulu gambar favicon tersebut hanya berupa logo dari blogger. tapi sekarang saya ganti menjadi gambar smilley. Sangat menarik bukan? Bagi sobat pengguna blogger, kalau mau, bisa juga menggantinya.

Jika sobat memang tertarik untuk mengganti favicon pada blogger. Berikut adalah langkahnya.

1. siapkan sebuah gambar apa saja yang nanti akan dijadikan gambar favicon. Lebih bagus calon gambar faviconnya berukuran kotak persegi.

2. Kunjungi alamat http://www.htmlkit.com/favicon

3. setelah masuk. Pada Image to use pilih file gambar yang sudah disiapkan tadi. Lalu klik tombol Generate favicon.ico.

4. Tunggu beberapa saat sampai gambar yang dipilih terlihat.

5.Setelah terlihat, langkah selanjutnya adalah klik link Download favicon package. Dan tunggu sampai proses download selesai.

6. setelah berhasil terdownload. File tersebut masih berformat Zip. Contoh Favicon_182708.zip dan ekstraklah dulu filenya ke .gif

7. selanjutnya simpan gambar tersebut ke hosting gambar seperti ke photobucket atau picasa. Kalau saya menyimpannya di album flickr.com dan mengganti ukurannya ke thumbnail 16x16 px.

8. Setelah tersimpan pada hosting. Catat URL gambar tersebut. Contoh alamat favicon blogerdin adalah http://farm6.static.flickr.com/5093/5539626043_ac7ceae5f6_t.jpg

Langkah selanjutnya adalah memasang gambar favicon tersebut ke dalam template blog milik sobat. Dan Langkahnya adalah sebagai berikut:

9. Login ke blogger. Klik rancangan. Lalu klik EDIT HTML.

10. Selanjutnya klik link bertuliskan Download template lengkap. Ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan template.

11. selesai mendownload. Selanjutnya beri centang pada kombo disamping Expand template widget.

12. sekarang cari kode seperti dibawah ini. Supaya mudah dalam mencarinya gunakan saja fungsi Ctrl+F.

<b:skin><![CDATA[/*

13. setelah ketemu. Tepat diatas kode tersebut (no.12) masukan kode dibawah ini.

<link href='http://farm6.static.flickr.com/5093/5539626043_ac7ceae5f6_t.jpg' rel='shortcut icon'/>

Perhatikan pada tulisan berwarna merah. Ganti kode tersebut dengan URL gambar favicon milik sobat.

14. sehingga setelah digabung. tampilan kodenya akan seperti ini:

<link href='http://farm6.static.flickr.com/5093/5539626043_ac7ceae5f6_t.jpg' rel='shortcut icon'/>
<b:skin><![CDATA[/*

15. Setelah selesai menyisipkan kodenya. Jangan lupa klik tombol Simpan template sampai ada keterangan perubahan anda telah disimpan 'lihat blog'

16. klik lihat blog guna melihat hasilnya. Dan jika berhasil, pada address bar atau disamping kiri URL blog, akan terpajang gambar favicon baru milik sobat.

17. terakhir, ya selesai. selamat mencoba dan semoga berhasil!

Itulah cara yang saya gunakan pada blogerdin untuk mengganti gambar favicon milik blogger alias pasang gambar favicon pilihan saya.

Read more »

Cara Membuat Salju Turun dari Kursor

Anda Pasti pernah melihat blog milik orang-orang bila anda masuk pasti sudah diedite dengan begitu bagu. Saya akan memberitahu sedikit bagaimana cara agar membuat salju turun dari Mouse/Kursor .

Caranya cukup mudah
1. Masuk ke Blog Anda
2. Pilih Rancangan
3. Tambah Gedget HTML
4. Copy Paste ini

<script type='text/javascript'>
// <![CDATA[
var colour="blue";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

<a href="http://www.infosantai.co.cc">infosantai.co.cc</a>


5. Simpan dan lihat blog anda ..

untuk warna anda bisa ganti dengan keinginan anda sendiri  (  var colour="blue";   )
red
blue
white
green
DLL....
Read more »

Minggu, 17 Juli 2011

cara Membuat Judul Posting Berjalan [Bounce]

Tutorial BloGGeR tentang Read More Berjalan, dapat juga diterapkan di judul Posting, sehingga judul poostingpun bisa menari. Fungsi ini tercipta berkat Efek bounce yang diciptakan melalui fungsi marquee effects. Penerapan efek ini pada judul posting akan membuat teks pada judul posting bergerak ke arah kanan dan ke arah kiri secara terus menerus. Tek akan berbalik arah ketika sudah mentok di ujung kanan atau kiri. Contoh efek bounce bisa kamu lihat di sini !

Tentu saja judul posting ini tidak boleh secara terus menerus bergerak karena ketika pembaca blog akan meng"KLIK" pada judul menjadi kesulitan. Dengan menambah sedikit script maka ketika mouse berada di atas judul posting maka teks akan berhenti bergerak dan akan kembali ber"bounceria" ketika mouse dilepaskan.

Langkah membuat Efek Bounce pada Judul Posting :
1. Login ke Blogger.
2. Lakukan pengamanan template.
3. Tetap di Edit HTML.
4. KLIK Expand Template Widget.
5. Cari KODE :


<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>


Ganti KODE di atas dengan KODE di bawah :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<marquee behavior='alternate' onmouseout='this.start()' onmouseover='this.stop()'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/>
<data:post.title/>
</b:if>
</b:if>
</marquee>
</h3>
</b:if>


Atau kamu juga bisa lakukan dengan cara :

Ganti KODE berikut :

<a expr:href='data:post.url'><data:post.title/></a>

Dengan :

<a expr:href='data:post.url'>
<marquee behavior='alternate' onmouseout='this.start()' onmouseover='this.stop()'>
<data:post.title/>
</marquee>
</a>

Catatan :
  1. Jangan lupa KLIK Simpan Template
  2. Efek bounce ini berfungsi dengan sempurna di Opera dan Internet Explorer (IE) dan Mozilla.
Read more »

Sabtu, 16 Juli 2011

Cara Melebarkan Kolom Pada Blog

Bagaimana caranya merubah lebar kolom pada pada blog ? Mungkin itu salah satu pertanyaan ketika kita sudah punya blogspot dengan memakai template yang disediakan google.
Sama ketika saya pertama kali punya blogspot, soalnya lebar kolom yang ada tidak sesuai dengan keinginan saya, baik itu lebar kolom sidebar (yang ada di samping), atau mainbar (tempat posting). Kalau itu yang menjadi persoalannya, di bawah ini ada tips sebagai jalan keluarnya.
Pertama buka blogspot, setelah itu klik “Tata letak”. Cari "Edit HTML" lalu klik.
Cari kode-kode di bawah ini:

#header-wrapper {
width:900px;margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width:900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}

Yang warna biru artinya ukuran lebar suatu kolom. Width (lebar) 900px adalah ukuran lebarnya yaitu sebesar 900 pixel. Secara lengkapnya dapat dijelaskan demikian: header-wrapper: biasanya sebagai kolom judul blog/kepala pada blog. outer wrapper: adalah lebar keseluruhan yang di sediakan untuk kolom-kolom yang ada, didalamnya ada kolom main-wrapper, dan sidebar-wrapper. Main-wrapper: adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. sidebar-wrapper: adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya width: ukuran lebar. xxxxpx : nilai lebar dalam pixel, contoh ( 900px berarti mempunyai lebar sebesar 900px). Border: adalah bingkai atau garis tepi (solid = garis penuh, dashed = garis putus-putus, dotted = garis berupa titik-titik). $bordercolor; : Warna untuk border , contoh ( ffffff = putih, 000000 = hitam )Selamat mencoba dan sukses.
Read more »

Jumat, 15 Juli 2011

Cara Membuat Judul Blog Berjalan

Membuat tulisan berjalan sudah pernah kita pelajari bersama, yaitu dengan menambahkan sedikit menambahkan kode html, mungkin untuk lebih jelanya kamu dapat baca di sini. Sekarang kita juga akan belajar untuk membuat blog kita lebih menarik lagi dengan hal yang sama, tetapi yang berjalan kali ini dalah judul blog kita.

Mungkin belum tahu yang mana judul blog itu? kalo judul blog saya ini adalah Belajar Ngeblog di BLOG, Oh ya,,,, ada sedikit tips yang berkenaan dengan judul blog kita, yaitu kita dapat mengganti judul blog kita dengan judul postingan kita agar blog kita lebih ramah dengan SEO.

Cara Membuat Judul Blog Berjalan

1. Pilih tata letak kemudian edit html
2. Jangan lupa beri tanda centang pada Expand Template Widget
3. Cari kode berikut <title><data:blog.pageTitle/></title>
4. Jika sudah ketemu, ganti kode tersebut dengan kode berikut ini

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
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>
Read more »

Cara Memasang Widget Share This

Bagi kawan-kawan yang ingin share artikelnya bisa mengunakan widget ini dengan lebih mudah untuk para pengunjung yang ingin shrare melalui Facebook, twitter, dan lainnya pada Fasilitas sharethis ini.  , dan langsung saja untuk cara membuatnya ikuti cara berikut ini sebelumnya download template lengkap terlebih dahulu untuk jaga-jaga :
 
[-] Login Blogger :
[-] Rancangan, Edit Html :
[-] Centang Menu ExpandWidget :
[-] Dan Cari Code Di Bawah ini :


<div class='post-footer'>

[-] Jika sudah ketemu, simpan kode berikut di atas kode yang dicari tadi:


<div style='padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>
[-] Terakhir Simpan template dan lihat hasilnya .

Semoga berguna .. xD
Read more »

Cara Membuat Link Warna Warni Di Blog

Apakah anda pernah melihat tulisan link yang berbentuk tulisan diblog teman anda yang akan memunculkan warna yang berganti-ganti jika cursor blog anda dihadapkan kesana ? jika belum pernah silahkan cobakan diblog saya ini, silahkan hadapkan kursor tetikus anda disalah satu tulisan yang ada tautannya diblog saya, nah anda melihat warnanya berganti-gantikan.

jika anda juga ingin membuat tulisan yang memmiliki tautan yang berwarna warni ini. silahkan ikutilah resep tutorial saya berikut ini :

1. seperti biasanya silahkan sign in duluh kedalam account blogger anda

2. jika sudah berada di dashboard masuk kedalam bagian edit html. caranya klik [Tata Letak] kemudian ambil pilihan [Edit HTML]

3. jika sudah berada dikotak edit HTML coba tekan kombinasi tombol [CTRL + F] dan pastekan koode berikut ini keadalam kotak Find yang terbuka untuk dicari <head> jika sudah ketemu lalu copy dan paste kode dibawah ini tepat dibawah kode
<head>

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>

4.kalau sudah selesai kira-kira kodenya akan jadi seperti ini

<head>
<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>



5. kalau sudah selesai silahkan klik tombol [save] lalu selesailah pengeditannya
Read more »

Cara Membuat Beauty Slide Navigation










    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya : 



/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVM0FaZGvY6Ml_S1jCeYKXW1-fHU8ucIIqq1WzIsTINIk2c0Qq413PjBjuGaEcIPKac4CKOzpXjGy2nR6R8_5Ypf9P_dtk128_2q18gcG8i1RSmxbd0Xdh2QG8tSb3Xmtxs1YYPrrWXk8/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8QN0WPYqZSeVSNnI6fQbPROWntDuH1bHVOMktzqCsRgiRI6JS1b19W_ka_Gb4b2-0VgBrHd0m116EvQAJg985ICI7KXuwRYhIqCA-71Pd364jym8Xv-EuHUN1fFvaXH7KiuwB5ArIsY/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8EzU0C-v3-oijioNRnT6avmsaVWQEq8NerDfyuICI_k3iRwDKzFg2GOfyAiWnYvGibftjC4P_GKWiZ2tryvUZOjO6Cdu_mGFJrkLY8La4PrQh0XUOJYz20lmbFfLhPamgzFWeY83BEmc/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2a_LrZdVVLcF2RJq9toaK0SXWQ087RoKVONY7WZTYY1i2A5qzFJ6jPM6ZJt_L8Wb3WF0dCeXTVwSX0AsEMYIK-YekaCGwyda77-qiBLocCpo0G01Nw0ZGR9oDt6_YUW75Tb0HRkpKSY/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Ddkj3z4h6a3UfyhWua-IEpgRDu8HwowMg1kcQaKxltMVy-hbqCRjfV-G-G3N1ULYPObncLMBLGXZTUYImAC0i9yXmhS0ZjVZHB6YeXekJTks53XQ8ZOpLRbfj5GyY5KkFvkhOhoysvI/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo5xNhhYvCvaywxS2p5Y3Gr1styRz1-yuTy9bAfCg5bp_ZO46gCFiYsjUb_Rn4x8zJnp5WSBAh1OVlc25NRgYTOLfJu7BrMVNK-5uDlixDhYES7y5_lfZ9N6reRXLeULvhf46TnvU9ypk/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVnFAxV6in3FcqYeFNGxIGc075R9ChrPv0dLxQR8dze_5ybZcmv7Ub1j97wFnhTKdJWlzU69J5SQQ2aoEG-iJErdhIVe-RYGPwr-8bf_BXdadvYHnu0mOgy-nwok2kIS8528vxzhCEII/s1600/mail.png);
}
dan simpan script ini di atas kode </head> :
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $(&#39;#navixed a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navixed &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>


[-] terakhir simpan cara pemanggilannya di atas kode <body>:


<ul id='navixed'>
            <li class='home'><a href='#'><span>Home</span></a></li>
            <li class='about'><a href='#'><span>About</span></a></li>
            <li class='search'><a href='#'><span>Search</span></a></li>
            <li class='photos'><a href='#'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

Code di atas adalah code pemanggilannya .. ganti font yg berwana Biru dengan Link" sobat" blogger .


Selesai Jangan Lupa Simpan Template ... Selamat Mencoba~Good Luck ..

Jangan Lupa berikan Commentnya juga .. comment sobat" sangatlah berharga buat saya .. :D
Read more »

Template by:

Free Blog Templates

Silahkan lihat lihat my blog :D