Cara Menampilkan Blog di Google

Google adalah mensin pencari terbesar di dunia untuk sekarang ini. Untuk sekarang ini jika orang ingin mencari berita mereka tinggal memasukkan kata di google, dan semua yang ingin mereka temukan langsung muncul di halaman pertama. Tentunya hal ini sangat membantu orang - orang yang ingin mencari berita , dan kemudahan ini hampir bisa dilakukan siapa saja sekalipun orang yang tidak terbiasa dengan internet(pemula). Ternyata selain membantu orang untuk mencari berita google juga berguna untuk sebagaian besar orang yang mencari penghasilan lewat internet. Jika anda termasuk orang yang membangun blog dengan tujuan mendapat penghasilan darinya maka anda wajib mendaftar di google, walaupun tidak semua orang yang memasukkan web / blog ( blog pribadi , blog pemerintah , blog layanan masyarakat , dll) ke dalam google bertujuan untuk menghasilkan uang.

Baiklah tanpa berlama - lama lagi saya akan menjelaskan bagaimana cara blog tampil di blog.

Langkah Pertama / First Step

Seperti biasa , silahkan login terlebih dahulu jika anda belum login di www.blogger.com, dan
setelah login silahkan masuk ke halaman tata letak / layout. Anda akan berada pada element halaman / element page.

Langkah Kedua / Second Step

Silahkan kunjungi web google di http://www.google.co.id/intl/id/add_url.html .

Keterangan 

URL. Masukkan alamat web / blog anda. Cth : http://www.gotblogger.co.cc/
Tanggapan. Deskripsikan blog anda. Anda bisa memasukkannya dengan judul,  keyword atau deskripsi yang ada di blog anda . Cth : blog saya mengajarkan cara blog masuk di google.

setelah anda mengisi keterangan di atas silahkan klik tambah url.

Langkah Ketiga / Third Step

Pada langkah ketiga saya hanya akan menjelaskan sedikit tentang cara blog tampil di google / cara blog masuk google. Biasanya blog / web anda akan terindeks setelah 3 - 8 minggu tergantung dari cara anda mengelolah blog yang telah anda buat. Setelah anda mendaftarkan diri anda saya sarankan anda segera mendaftarkan diri anda di google webmaster , dan google feedburner .

Sangat mudah bukan?. Jika anda masih binggung tentang cara blog tampil di google silahkan bertanya , maka saya akan senang hati menjawab semua pertanyaan anda.

sumber

Read more »

Mengganti Header Blog

Supaya blog Anda terlihat unik atau beda dari yang lain. Maka Anda harus mengganti tampilan blog Anda.

Ada banyak cara untuk melakukannya. Misalnya dengan mengganti template yang dibuat oleh pihak ketiga tapi rata-rata template tersebut sudah ada yang menggunakannya.

Terkecuali Anda membuat template sendiri namun cara ini memerlukan waktu yang lama dan tidak mudah untuk membuat sebuah template yang bagus. Jadi salah satu cara yang paling mudah dan efektif adalah mengganti header pada template.

Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Jadi mengganti header merupakan cara yang paling tepat.

Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting enak dilihat. Jika anda ingin menggunakan gambar sebagai header tetapi tidak bisa membuatnya. Jangan khawatir, karena saat ini ada banyak situs yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti: 100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.

Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery

2. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.

3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info.

Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini

4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.

5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.

7. klik Return to the front page of free Web Page Headers.

8. Lalu klik Login untuk mendowload gambar header.

9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:

1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketik "header-wrapper" lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya #header-wrapper { background: url } no-repeat; width:980px; height:100px;

Width adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Design->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.


7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian "Placement". Pilih Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.

9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

Catatan:
Tidak semua template bisa dipasang gambar. Ada yang menggunakan teks saja. Jadi pilihlah template sesuai kebutuhan.

Selamat mencoba.

Read more »

Cara Membuat Widget Melayang

Cara Membuat widget melayang itu sebenarnya mudah, tapi saya sendiri membuatnya dengan mengulang beberapa kali. Tapi mungkin anda bisa membuatnya hanya denga satu kali. Itu mungkin jika anda melihat semua step di bawah ini (harus semua):

1. Masuk ke Blogger
2. Masuk ke tata letak
3. Tambah Gadget
4. HTML/JAVASCRIPT
5. Masukan Kodenya di bawah ini :
   

 
#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i895.photobucket.com/albums/ac151/simbahbrukno/th_Gb.jpg') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:transparent;

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(30-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

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

var dx = Math.abs(x0-xf) > 1 ? 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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=557612&amp;boxtag=63175r&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=557612&amp;boxtag=63175r&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->

<script type="text/javascript">

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

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

NB: warna merah kamu ganti dengan url gambar chat box kamu
       warna hijau kamu ganti dengan kode warna kesukaanmu (untuk border)
      warna biru kamu ganti dengan warna kesukaan kamu (untuk background chat box)
      warna ungu kamu ganti dengan kode chatbox kamu
6. Jangan kamu klik rich text , karena jika di klik akan gagal
7. Langsung klik simpan dan lihat hasilnya

 sumber

Read more »

Pasang Tombol "Like" Facebook pada setiap Artikel Blog

Facebook, situs layanan jejaring sosial paling ngetop, baru-baru ini merilis fitur baru yaitu Faebook Like. Kalau sebelumnya tobol “Like” hanya terlihat pada situs Facebook saja (misalnya di bawah status update seorang pengguna Facebook), dengan fitur ini seorang pengguna Facebook bisa menunjukkan rasa suka/like langsung di situs di luar Facebook. Tapi tentunya hanya pada situs/blog yang memasang tombol ini.

Nah, bila anda ingin juga memasang tombol “Like” di artikel blog, berikut ini cara pemasangannya.

Sebenarnya, di situs Facebook sudah tersedia tool untuk mendapatkan kode yang bisa dipasang di website/blog (silahkan lihat di sini). Tapi sayangnya, pada pilihan URL to Like di tool itu, kita hanya bisa menentukan URL statis, tidak bisa membaca secara otomatis URL setiap artikel/halaman blog (URL dinamis). Untuk itu perlu sedikit modifikasi dari kode yang bisa di dapat di Facebook itu.

Silahkan pilih kode yang sesuai dengan platform blog yang dipakai.

*

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini:

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

*

2. Pasang di template WordPress.ORG (self hosted)

Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;action=like&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;font=arial&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:25px;"></iframe>

*

3. Pasang di Sidebar/Widget/Webpage (javascript)

<script type="text/javascript">
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=' + escape(location.href) + '&amp;action=like&amp;layout=standard&amp;show_faces=true&amp;width=100%&amp;font=arial&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>');
</script>

*

Catatan:

• Kita bisa memilih setting tampilan tulisan pada tombol, yaitu “Like” (Suka) atau “Recommend” (Rekomendasikan). Silahkan ganti kode like pada bagian action=like menjadi action=recommend pada pilihan kode di atas (kode berwarna biru).
• Kalau mau silahkan ganti-ganti setting pada kode yang berwarna hijau, utuk pilihannya silahkan lihat di situs Facebook.

Kalo suka artikel ini, boleh juga direkomendasikan atau di-”like”

 sumber

Read more »

Menampilkan Widget pada Halaman Tertentu

Saya sudah pernah posting tentang Menampilkan Widget Hanya di Halaman Selanjutnya atau tentang Menampilkan Widget Hanya di Halaman Depan . Tapi kali ini saya akan posting lagi dengan beberapa tambahan tentang menampilkan widget hanya di halaman tertentu/di halaman yang anda inginkan saja. Oke langsung saja Step.By.Step :

1. Login ke blog anda tentunya

2. Masuk Design > Edit HTML > beri centang pada Expand Template Widget

3. Cari judul widget yang kalian ingin sembunyikan dan tambahkan kode berwarna merah berikut

<b:widget id='HTML3' locked='false' title='The New Posting' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

4. Kode merah yang bercetak tebal bisa di ganti dengan kode di bawah ini :
Menampilkan Widget Hanya di Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>

Menampilkan Widget selain di Homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Menampilkan Widget hanya di Archivepages
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

Menampilkan Widget selain di Archivepages
<b:if cond='data:blog.pageType != &quot;archive&quot;'>

Menampilkan Widget hanya di Itempages / Postingan
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Menampilkan widget selain di Itempages
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Menampilkan widget hanya di Staticpages
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Menampilkan widget selain di staticpages
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

Menampilkan widget pada Postingan Tertentu
<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>

Catatan : ganti alamat postingan dengan url postingan kamu

5. Save templates.
Semoga bisa bermanfaat dan jika ada yang kurang jelas silahkan tinggalakn comment terima kasih

Read more »

Cara Membuat Cbox pada Blog

Kali ini saya akan membahas tentang cara membuat Cbox. Apa itu Cbox ? selalu deh kalo w posting nanya mulu. Ya udah Cbox itu ibarat seperti buku tamu, sebagai contoh lihat di sebelah kiri blog saya yang berjudul Chat BOX. Nah itu dia (tolong sekalian di isi ya...hehe). Ok lanjut, untuk membuat yang sepeti itu, cukup mudah ko. Ikuti Langkah-langkah di bawah ini :

1. Pertama anda masuk dulu ke http://cbox.ws/
2. lalu daftar dengan cara klik sign up, ikuti langkah pendaftrannya.
3. Sudah daftarnya ? Jika sudah silahkan Login ke Cbox anda, lalu klik Publish! Copy semua kode yang ada di step 1.
4. sekarang Login ke blog anda, klik Layout/Tata Letak -> Page Elements/Elemen Laman -> Add a Gadget/Tambah Gadget -> HTML/JavaScript.
5. Beri judul sesuai keinginan anda dan paste kode yang tadi anda copy di kotak konten. Simpan
6. Selesai, Sekarang lihat blog anda, bagaimana ? masih kosong ? tunggu ada ngisi dong sabar aja

Ok... saya rasa cukup untuk saat ini.
Jika ada yang kurang di mengerti silahkan Commentnya. 

sumber

Read more »

Cara Menu Navigasi Melayang

Setelah banyak mencari Menu Navigasi yang unik ,akhirnya saya menemukan Menu yang cantik dan simple .Biasanya Navigasi itu berupa header saja ,tapi kali ini kita menggunakan animasi dan tidak perlu bermain HTML karena hanya perlu tambah gadget saja. Untuk lebih mudah perhatikan contoh di bawah ini ....



Ini adalah gabungan dari 2 gadget yang saya pelajari dan modifikasi sendiri. Untuk membuatnya ikuti langkah-langkah di bawah ini :

1. Silahkan kunjungi http://www.flashvortex.com/menus.php
2. Silahkan pilih menu yang anda inginkan dengan cara klik "CLICK HERE TO EDIT THIS" pada menu yang anda inginkan.
3. Ikuti langkah-langkah pembuatan menu, bagi yang tidak mengerti akan saya jelaskan.

• Step 1 tidak begitu penting, lewati saja
• Step 2 kolom pertama, isi dengan judul menu anda (setiap judul pisahkan menggunakan ENTER)
• Masih pada Step 2, di kolom yang kedua isi dengan alamat link judul menu (setiap link pisahkan menggunakan ENTER, urutan di sesuaikan dengan judulnya)
• Lewati Step 3 & 4
• Klik Generate Animation
• Copy code yang ada di kolom "Copy / paste this code into your site"

4. Login ke blog anda > Layout (tata letak) > Page Elements (Laman Elemen) > Add a Gadget (Tambah Gadget) > HTML/JavaScript
5. letakan code berikut di kotak konten (ganti yang berwarna merah dengan code menu anda)

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-1-16.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<script src="http://h1.flashvortex.com/display.php?id=3_1259075124_65300_151_0_131_137_6_34" type="text/javascript"></script>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

6. Save dan lihat hasilnya

Terima kasih ,dan jangan lupa tinggalkan komentar .

Read more »

Cara Membuat Menu Floating Image

Oke sekarang mari kita bahas apakah itu menu floating image? menu floating adalah menu yang memiliki posisi tetap/fixed, berada di kanan/kiri dan atas/bawah. Sedangkan image adalah gambar. Berarti dapat di artikan bahwa menu floating image adalah menu floating yang menggunakan gambar. Jika anda seorang kaskuser, maka anda sering menjumpai tampilan seperti ini. 

Floating

Itu yang di tunjuk panah merah yang saya maksud floating. Nah sekarang kita langsung ke cara pembuatannya aja ya. Step,By.Step!!!

1. Log in ke blog anda dengan akun anda.

2. Masuk ke design > Edit HTML

3. Cari kode ]]></b:skin> 

4. Copy dan paste kode berikut di atas kode ]]></b:skin> 

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

Keterangan : kode yang berwarna merah dapat anda ganti sesuai keinginan. top=atas bisa di ganti dengan bottom= bawah. left=kiri dapat di ganti dengan right=kanan
5. cari kode </body>
6. Copy dan past kode ini di atas kode </body>

<div id="floating">
<a href="http://abi-galoga.blogspot.com">
<img src="http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2.jpg" border="0" /></a>
</div>

Yang berwarna merah ganti dengan Link anda dan yang berwarna biru ganti dengan alamat gambar anda.

Selesai sudah posting kali ini. Jika berhasil ucapakan Alhadulillah jika gagal jangan menyerah!coba lagi !

sumber

Read more »

Membuat Search Box

Kotak search (search box) yang saya maksud bukanlah search engine, tapi kotak search yang ini di gunakan untuk mencari artikel yang berada di Blog kita. Ok penjelasannya sudah selesai, langsung saja :

1. Login ke blog anda > Layout (tata letak) >> Page Elements (laman elemen) >>> Add a Gadget (tambah gadget) >>>> HTML/Java Script
2. Copy paste kode ini di kotak konten

<form id="searchform" action="/search" style=" text-align:center;" method="get">
<input onfocus="if (this.value == &quot;Cari Artikel&quot;) {this.value = &quot;&quot;;}" value="Cari Artikel" type="text" id="s" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari Artikel&quot;;}" size="20" class="inpsearch" name="q"/>
<input id="searchsubmit" value="GO" type="submit"/>
</form>

Lalu lihat hasilnya ....

Read more »

Cara Membuat Float Gambar Melayang

Trik ini sebenernya udah jadul siih, dan udah nggak gue pake lagi. Dan trik ini bisa dipake dengan mengkombinasikannya dengan blog, maksudnya ya menyesuaikan dengan tampilan blog. Gambar ini bentuknya bisa gambar diem atau berekstensi .jpeg/.jpg atau bahkan gambar bergerak/animasi berekstensi... .gif . Udah maksud belum niih? Gambar melayang ini selalu ada di pojok dan tidak akan ikut kemana-mana kalo scroll window digerakkan. Kalo penasaran ya praktekin aja lah, niih caranya:

• Pastinya ya Login di Blogger terus pilih Layout/Tata Letak
• Kemudian pilih menu Edit HTML kemudian beri tanda centang pada Expand template widget
• Sekarang coba cari kode ]]></b:skin> ... Kalo udah ketemu taruh kode di bawah ini di atasnya:
  

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

• 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".
• Langkah selanjutnya yaitu mencari kode </body> kalo udah tinggal paste kode berikut di atas kode tadi:
  

  <div id="UnoZoneu">
  <a href="http://unozoneu.co.cc">
  <img src="http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif" border="0" /></a>
  </div>

• Ganti alamat link http://unozoneu.co.cc dengan alamat link kamu. Kemudian ganti juga link http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif dengan link gambar kamu. Berikut udah gue cariin beberapa gambar yang mungkin bisa kamu pake:
  
  
  
  

Read more »

Cara membuat Link Membesar ketika Sorot

Sebagai contoh coba anda arah kursor anda di sini. Bagaimana ? membesar kah ? nah... jika anda tertarik anda bisa ikuti langkah-langkah di bawah ini :

1. Selalu Login ke blog anda > Layout (tata letak) > Edit HTML
2. cari kode berikut ini yang mirip-mirip dengan ini (pusatkan pencarian pada bagian paling atas).

a:link {
color:$linkcolor;
text-decoration:underline;
font-size:12px;
}

a:visited {
color:$linkcolor;
text-decoration:underline;
font-size:12px;
}

a:hover {
color:#ff0000;
font-size:18px;
text-decoration:underline;
}

Perhatikan bagian font-size: (jika tidak ada anda bisa tambahkan sendiri). kode ini artinya adalah ukuran huruf link anda.

4. Sesuaikan ukurannya yang setiap bagian berarti :

a:link { adalah ukuran asli link
a:visited { adalah ukuran link jika sudah pernah di buka (saya sarankan yang ini samakan dengan yang di atas
a:hover { adalah ukuran link ketika di sorot oleh kursor (anda bisa ubah ukuran jadi lebih kecil / besa)

5. Save Templates.... Mudah kan, SANGAT MUDAH
Jika anda orang yang pinter, kreatif, genius, dll (seperti ehm...) anda bisa utak-atik kode lainnya loh

Selamat mencoba dan jangan lupa tinggalkan comment

sumber

Read more »

Membuat Tampilan Blog berbeda setiap Halaman

Sangat menarik sekali ya jika blog kita berubah penampilan pada setiap halamannya ,awalnya saya hanya sekedar main-main ,lalu saya menemukan cara ini disini.Baiklah saya akan menerangkan secara Step By Step sepertii pada blog ini :

1. Login ke blog anda > Design > Edit HTML
2. Cari kode ]]></b:skin>
3. Letakan kode berikut setelah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.url == &quot;URL posting yang tampilannya ingin di bedakan&quot;'>
body {
background:url(http://themes.googleusercontent.com/image?id=1PlcOIpvGMP-0UUOAln6SU3f8a6hBUno7T80yhJ_0O-vGlNgYhk-lCPbst9AtRs5z3OAX) center fixed;
}
#outer-wrapper {
width:870px;background-color:rgba(60, 42, 31, 0.6);
}
#main-wrapper {
width:100%;
}
#footer-wrapper, #sidebar-wrapper {
display:none;
}
#header-wrapper {
background:url(http://lh3.ggpht.com/_O1QXT0it8EE/TNal8VEL4fI/AAAAAAAAAOY/LHjkQaDHTyg/icon.gif) center right;
}
.post {
color:white;
}</b:if>
</style>

• Ganti yang berwarna merah dengan URL/Link posting yang tampilannay ingin di bedakan
• Lalu ganti yang berwarna biru dengan style templates anda. Anda harus mengerti penulisan style templates jika ingin mengutak-atiknya

4. Save Templates.

Read more »

Cara memasang Label Animasi/Tag Cloud

Ketika melakukan blogwalking, saya menemukan sebuah widget yang cukup menarik yaitu label animasi atau disebut dengan tag cloud. Label animasi ini mempunyai tampilan yang sangat menarik karena ketika kursor mouse disorot ke area tag cloud tersebut maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan label standar dimana setiap kali kita memberi label pada postingan maka label tersebut secara otomatis akan muncul pada area tag cloud.

Nah bagi anda yang tertarik dengan label animasi ini. Berikut cara pemasangannya:

1. Seperti biasa. Login ke Blogger

2. Klik Download Full Template untuk membackup template anda

3. Setelah itu klik Design -> Edit HTML

4. Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kalau sudah ketemu letakkan kode berikut tepat dibawah kode yang diatas

<b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>UnoZoneu by<a href='http://www.unozoneu.co.cc/'>UnoZoneu</a> and <a href='http://www.unozoneu.co.cc'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;180&quot;, &quot;180&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Angka 180 menunjukkan panjang tag cloud dan angka 180 menunjukkan tinggi tag cloud. Silahkan diganti nilainya sesuai dengan ukuran sidebar template anda.

Sedangkan kode ffffff menunjukkan warna background dari tag clound. Angka menunjukkan warna teks dan angka 33333312 menunjukkan ukuran teks. Silahkan diganti sesuai keinginan.

6. Jika sudah, Klik Save Template. Selesai

sumber

Read more »

Cara membuat Energy Saving Mode

Waktu saya lagi berkunjung ke blog sobat-sobat, saya menemukan hal yang belum saya ketahui, yaitu "Energy Saving Mode" atau juga bisa disebut "Screen Saver". Sebelum sobat mencobanya, coba tinggalkan blog saya ini (tapi jangan di close, cukup pindah ke tab lain) kira-kira 1 menit, dan lihat kembali blog saya..

dan yg akan anda lihat seperti ini ...

Kita langsung saja ke cara-caranya..

1. Login terlebih dahulu ke Blogger ID Anda.
2. Masuk ke Tata Letak/Rancangan.
3. Pilih tab Edit HTML
4. Klik Download Full Template, untuk membackup template sobat, jika terjadi kesalahan.
5. Beri tanda centang pada Expand Template Widget.
6. Cari kode <head>
7. Copy paste kode di bawah ini persis di atas kode <head>

<!-- save your energy -->
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>
<!-- save your energy end -->

Lalu klik tombol Save Template, dan tunggu beberapa saat sampai Template tersimpan. Dan silakan melihat hasilnya. Semoga bermanfaat, terima kasih...

sumber

Read more »

Membuat Label Blog menjadi Berwarna

Blogspot memang tak asing lagi dimata kita. Sudah berapa lama anda ngeblog? Yap.. pertanyaan itu pasti sering kita terima. Lamanya kita ngeblog membuat kita makin handal dalam berkreasi pada blog yang dipunya.

Postingan kali ini saya akan membahas tentang Membuat Label Blogspot Menjadi Berwarna. Seperti ini :

Yap.. biasanya kan label blogspot normalnya berwarna hitam, sekarang kita akan membuat label blogspot menjadi berwarna. Sepertinya ini aman digunakan karena tidak mengganggu widget ataupun elemen yang lain.

ini dia cara Membuat Label Blogspot Menjadi Berwarna :

1). Buka http://blogger.com/home

2). Klik tata letak

3). Klik Edit HTML

4). Salin (copy) kode ini :

.label-size-1 a {

font-size: 12px;

text-decoration: none;

}

.label-size-2 a {

font-size: 14px;

text-decoration: none;

color:#cd9f01;

}

.label-size-3 a {

font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;

}

.label-size-4 a {

font-size: 18px;

font-weight:bold;

text-decoration: none;

color:#ea5a04;

}

.label-size-5 a {

font-size: 24px;

text-decoration: none;

}

.label-size-1 a:hover,

.label-size-2 a:hover,

.label-size-3 a:hover,

.label-size-4 a:hover,

.label-size-5 a:hover { text-decoration:underline }

Read more »

Membuat Label Animasi pada blogger

Tutorial ini mungkin telah ditulis beberapa master saya yang ada di luar sana. Yang luar sana? dimana? maksud saya yang ada blog mereka masing-masing.

Bagaimana cara membuat Label Animasi itu? 

Perhatikan dan Cermati langkahnya. 

1. Login ke Account Blogger anda
2. Klik Rancangan
3. Klik Edit HTML
4. Klik “download template lengkap” supaya template anda aman.
6. Silakan copy kode di bawah dan paste pada Notepate terlebih dahulu

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

<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values=’data:labels’ var=’label’>
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’ style=’12′><data:label.name/></a>

</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href=’http://www.roytanck.com/’&gt;Roy Tanck&lt;/a&gt; and &lt;a href=’http://www.bloggerbuster.com’&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;

&lt;/object&gt;
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>

7. Kemudian cari kode yang mirip seperti di bawah ini. untuk mempermudah mencari klik pada keyboard (CTRL+F) dan ketikkan..

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

8. Setelah ketemu, copy dan pastekan kode yang ada pada Notepate anda tadi dibawah kode diatas.
9. Simpan Template anda.
10. Selesai

NB. Untuk perubahan warna dapat anda rubah sesuai dengan keinginan anda. anda rubah yang berwarna merah.

Jika ingin mengubah lebar pada widget, cari kode “widht” dan ubah sesuai dengan keinginan anda.

Untuk mengubah panjang, silakan anda cari pada kode widget tersebut “height” dan ubah sesuai dengan anda.

sumber

Read more »

Membuat Form Kontak pada Blog

Ingin membuat form kontak email di blogspot yang lebih mudah dan profesional?

——————————————————————–

Ketika kita berkunjung ke sebuah situs profesional penjual product atau jasa, maka disana kita akan menemukan menu contact. Menu “contact” (kontak) tersebut bisa berupa pemberitahuan alamat lengkap situs tersebut baik secara offline ataupun online dengan menyertakan alamat email, tujuannya tentu saja agar pengunjung situs tersebut bisa mencontact atau menghubungi pihak pemilik situs baik dalam rangka pembelian product atau mengirim pesan lainnya.

Dan yang paling memudahkan, kita pun menemukan menu contact yang di dalamnya berisi sebuah form khusus yang tidak hanya menampilkan alamat email yang bisa kita hubungi melainkan form contact yang tinggal kita isi tanpa harus membuka email terlebih dahulu (untuk mengirim pesan). Sangat memudahkan bukan? Bagaimana cara membuatnya di blogger? Nah tips dan tutorial kali ini kita akan membuat form kontak seperti web profesional itu di blogger/blogspot…

Sekedar pemberitahuan, Hakimtea.Com Hakimtea.Blogspot.Com sebenarnya telah menggunakan form contact ini sejak posting perdana disini yang launching pada tanggal 16 Januari 2008 lalu, karena berbagai hal saya tidak hadirkan pada list menu di atas. Namun karena sekarang saya menulis tips ini, maka saya hadirkan kembali form kontak saya di list menu di atas sana. Klik saja menu KONTAK saya di atas untuk melihat contoh contact form…:)

Untuk membuat Contact Form ini kita perlu mendaftar di Bravenet.Com karena bravenet merupakan salah satu yang menyediakan jasa contact form ini, tenang saja its free! Gratisan-Dot-Com ko! . Oke kita langsung saja,

LANGKAH PERTAMA – FIRST STEP (REGISTER/DAFTAR)

• Masuk ke Bravenet, klik disini.
• Klik banner “Get Your Email Forms” (Its Free)
• Kalau belum punya account bravenet Join Bravenet (daftar gratis)
• Isi form pendaftaran yang tersedia.

• Username: *nama yang akan digunakan ketika login nanti*
• First Name: *Nama depan*
• Last Name: *Nama belakang*
• Email: *email yang aktif*
• Confirm email: *tuliskan lagi alamat email yg aktif*
• Password: *ketikan kata sandi, hanya Anda yang tahu*
• Confirm Password: *Ketikan lagi kata sandi, harus sama dengan kata sandi pertama*
• Masukan karakter (kode verifikasi) yang ada.
• Ceklist “I agree to the Bravenet Terms of Service”
• Klik join bravenet.
• Tunggu sebentar, proses pendaftaran tengah dimasukan database bravenet.
• Setelah tampil “Complete Your Bravenet Registration” ada tawaran dari sponshor bravenet, lewati saja, scroll down window ke bawah.
• Klik tombol “Proceed to Member’s Area”
• Registrasi hampir selesai. Anda akan dikirim email validitas (validation).
• Login ke email Anda.
• Cari email dari bravenet dengan title “membernotify – “‎Bravenet Account Confirmation”
• Email bravenet tersebut mengingatkan username dan password yang Anda gunakan untuk login.
• Klik link yang ditunjukkan dibawah kalimat, “Please follow the URL…”
• Tampil windows baru dan ucapan selamat (Congratulations!) Anda telah tergabung menjadi member bravenet.
• Scrol down window dan klik tombol “Continue to Members Area”
• “welcome to your account”

LANGKAH KEDUA – SECOND STEP (MEMBUAT FORM KONTAK)

• Masih di member area bravenet
• Pada list menu pilih dan klik “web tools”
• Pada “Unregistered Services” cari “Email Forms” dan klik. (kalo Anda sama sekali belum menggunakan tools dari bravenet, biasanya email forms berada di list kedua baris kedua dibawah Chat Rooms. Ketemu? Oke klik “Email Forms”
• Klik banner “Get Your Email Forms” (Its Free)
• Cari “I would like a FREE Email Forms Service” Klik tombol “Continue”
• Pada “Start with a template” Pilih “Contact Form” (urutan pertama)
• Keluar kotak dialog, beri nama Form Anda (Kalo tidak diberi nama, bravenet secara otomatis memberi nama “Contact Form” klik Ok jika sudah.
• Selamat Anda telah mendapatkan “Contact Form” Anda pertama dan cukup sederhana. Biasanya contact form tersebut hanya berisi (1) First and Last Name (2) E-mail Address (3) Message.
• Klik “I will edit this form”
• Kita akan menambah pertanyaan (Add a new question), agar ketika pengunjung blog kita telah selesai mengisi contact form dan mengklik submit, mereka di arahkan kembali masuk ke homepage blog kita dan tidak masuk ke homepage bravenet.
• Oke, klik “Add a new Question”
• Pada “Add Question” pilih “Question Type – Thank You URL”
• Masukan URL blog Anda pada form yang disediakan. kalo sudah klik tombol “Add Field”.
• (Question Type – Thank You URL, tidak terlihat pada form Anda karena telah di setting hidden (tersembunyi) oleh bravenet)

Anda bisa mengedit dan menambahi form yang diperlukan, misalnya menambah dengan “Your Blog” dan sebagainya.

Dalam tips ini kita cukupkan dulu sampai disini karena ini hanya sekedar contoh pembuatan Contact Form sederhana, selanjutnya Anda bisa membuat yang lebih dan sesuai keinginan Anda nanti jika tahap latihan pembuatan dan pemasangan form kontak ini telah selesai.

LANGKAH KETIGA – THIRD STEP (MEMASANG FORM KONTAK PADA POSTINGAN)

• Setelah Contact Form di atas selesai dan berisi tiga form isian dengan satu form hidden (nama, email, pesan dan Thank You URL yang tersembunyi dan mengarahkan kembali ke blog kita)
• Klik “It’s perfect, let’s see the code”
• Copy seluruh code html yang ditunjukkan.
• Buat postingan dengan judul “Hubungi saya” atau “Kontak”
• Beri muqodimah, kata-kata sambutan pada postingan Anda, misalkan, “Form kontak ini digunakan bagi Anda yang ingin memesan produk kami bla bla bla…”
• Paste kode html dari bravenet di bawah muqodimah postingan Anda tersebut.
• Simpan/Save postingan Anda.
• Lihat postingan “Kontak” Anda dan silahkan dicoba, diisi dan klik submit!

Selamat Anda sudah mempunyai Contact Form 

Semoga bermanfaat!

Gambar dari http://www.ontologyworks.com/

sumber

Read more »