Belajar Membuat Template Bagian Dua

Belajar membuat template akan kita lanjutkan setelah saya istirahat beberapa lamanya hehe… , maklum…masih ada yang diurus agar “Dapur” ngebullll . :D .
Baiklah sekarang mari kita lanjutkan dengan terlebih dulu baca doa agar diberi kemudahan dalam memahami ilmu . Untuk sekedar mengingat , di pelajaran membuat template bagian pertama , terakhir kita sudah sampai pada pembuatan template ke empat yang kita kasih nama : template-pertamaSTEP4.html

Di situ kita sudah mulai menambahkan pengaturan posisi dengan tag kode float:left

Sebagai pembanding , anda bisa membuka kode-kode template hasil praktek anda , dengan yang saya buat disini sebagai berikut :



template-pertamaSTEP1
template-pertamaSTEP2
template-pertamaSTEP3
template-pertamaSTEP4
template-pertamaSTEP5

Catatan : Saya sengaja membuat template-pertamaSTEP5 , setelah ada perubahan pada panambahan kode float:left yang ada di template-pertamaSTEP4 . Ini sengaja saya buat satu file baru untuk memudahkan saya dalam memahami pembuatan template.

Catatan 2 : Sebaiknya buka masing-masing file di tab jendela baru , agar kita bisa melihat perbedaan dari setiap tahapan pembuatan template.

Catatan 3 : Anda bisa menyimpan kode yang ada dihalaman yang anda buka , dengan cara : klik File pada tab mozila, lalu klik save page as,simpan di komputer anda. Nanti hasil download file tersebut buka dengan cara klik kanan pada file hasil download, lalu klik open with mozilla .

Oke ya kita Lanjuuuttttt…..

Di file template-pertamaSTEP5 , jika anda buka di browser , posisi sidebar sudah bergeser kekanan , sesuai dengan yang kita inginkan. (dari rencana layout blog )

Tapi Sidebar-kanan dan sidebar kiri masih numpuk atas bawah. Nah …, mari buka lagi notepad baru , dan copas semua kode yang ada di template-pertamaSTEP5 , dan coba tambahkan lagi kode float:left di bagian CSS pengaturan sidebar , tepatnya di #ruang-Sidebar-kanan dan #ruang-Sidebar-kiri
Sehingga setelah ditambahkan akan menjadi seperti ini :

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;
background:#bbc;
padding:3px;
float:left
}

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;
background:#ccd;
padding:3px;
float:left
}

Save as lagi dengan nama template-pertamaSTEP6.html

Kemudian buka template-pertamaSTEP6 di browser , bagaimana hasilnya ???
Sudah pindah mas..tapi kok ya Sidebar-kanan adanya di kiri dan Sidebar kiri adanya di kanan? :D

Nahhh…. Mari kita bahas masalah ini …
Sebenarnya kita bisa saja merubah #ruang-Sidebar-kanan dengan memberikan kode float nya : float:right
Tapi karena saya ingin supaya kita lebih memahami struktur template , maka sengaja saya kasih kode dengan float:left

Ketika kita mengatur semua posisi dengan float left , maka secara otomatis layout yang ada di bagian teratas akan lebih dulu menempati posisi di sebelah kiri . Mari kita melihat lagi struktur pada bagian ISI ( kalau saya bilang isi, berarti itu adalah yang ada di bagian setelah tag <body”> dengan </body”> ) khususnya sidebar sebagai berikut : :

<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>

Disitu kita lihat bahwa saya menempatkan sidebar kanan berada diatas sidebar kiri . Jadi jelas si CSS akan mengutamakan sidebar kanan agar menempati posisi kiri . Begitu juga sebaliknya Jikalau kita mengatur kedua nya dengan float:right , maka sidebar kanan pun akan langsung menempati posisi ke kanan. Untuk saya, saya lebih suka merubah posisi ISI sidebar kiri diatas sidebar kanan .
Anda bisa melihat contoh nya disini : template-pertamaSTEP6.html

Sampai disini mudah-mudah anda kita bisa memahami soal floating ini ya …? . Jika sudah paham ,nantinya anda bisa saja misalnya menempatkan Kotak posting disebelah kanan, dan Kotak sidebar disebelah kiri halaman….. di coba2 aja dahhhhh

Catatan : di template-pertamaSTEP6 ini saya sudah menambahkan pengaturan margin:2px; , agar masing-masing bagian sedikit agak terpisah.

Di templatetahap6 ini, kalau kita perhatikan , bagian footernya ,seperti menghilang dilindas oleh sidebar, untuk itu saya menambahkan kode : Overflow:hidden; pada css :
#tembok-utama ,
#kotak-posting dan dibagian
#ruang-Sidebar

Contoh realnya bisa anda lihat disini : template-pertamaSTEP7.html . Silahkan dibandingkan perbedaanya dengan template6.

Sedangkan di template-pertamaSTEP8.html , saya mengatur lebar Kotak posting dan kotak sidebar agar terlihat rapih, yaitu :

memperkecil lebar #kotakblog menjadi: 930px
memperbesar #ruang-Sidebar menjadi 395px
Memperlebar #ruang-Sidebar-top-besar menjadi 385px
Memperlebar #ruang-Sidebar-kanan menjadi 185px
Memperlebar #ruang-Sidebar-kiri menjadi 186px
Memperlebar #isi-Posting menjadi 485px

Di template tahap8 ini saya juga membuat posisi body template menjadi center dengan merubah pengaturan margin dibagian CSS #kotakblog menjadi margin:0 auto;

Contoh realnya bisa anda lihat disini : template-pertamaSTEP8.html

Nahhhh…kini template kita sudah mulai terbentuk dengan teratur dan sudah enak dilihat.

Catatan : Perubahan(Penambahan ) kode di bagian CSS letaknya ada didalam kurung besar { } , contoh :
#ruang-Sidebar { disini tempat penambahan kode }

Setiap kode yang ada di dalam kurung CSS mempunyai ciri sbb :

Keterangan benda – titik dua – nilai - titik koma , contoh :
width:485px;
width –> keterangan yang menerangkan benda/objek yang akan diatur besaran atau nilainya
titik dua –> pengganti samadengan (=)
485px –> nilai dari si benda(objek)
titik koma –> akhir dari nilai objek

Baiklah teman saya kira saya cukupkan dulu uraian pengalaman saya dalam membuat template ,karena sudah terlalu panjang halaman nya , silahkan dibandingkan setiap perubahan yang telah kita lakukan mulai dari template-pertamaSTEP1 sampai dengan template-pertamaSTEP8

Pada sesi membuat template tahap tiga kita akan coba memasukkan konten atau isi dari setiap bagian, agar template kita terlihat mendekati nyata. Dan pada sesi membuat template tahap empat , Inysa Allah kita baru akan memasukkan kode-kode blogspot yang merupakan kode-kode database tempat penyimpanan konten blog kita .

Semoga bermanfaat

PS : Karena ada yang nanya saya : ” mas Bahrul belajar bikin template dimana ? ”
Silahkan yang mau belajar membuat template yg lebih detail ,dengan tutorial bahasa Indonesia , disini aja ya : Kursus HTML dan PHP utk belajar bikin template

Dari : http://www.bahrul-ulum.com/
Read More..

Cara merubah atau mengedit template Blog

Tips ini saya tuliskan dengan tujuan agar sahabat yang mengalami kesulitan dalam menata blog / web nya bisa ter atasi. Cara ini bisa pula dijadikan dasar untuk mulai membuat atau mendesain template sendiri.

Saya katakan aman , karena proses utak-atiknya tidak akan mengganggu web kita yg sedang online.

Dan saya katakan mudah karena kita cukup hanya “Mencontek” dari template yang sudah ada.

Cara pertama bisa dengan menggunakan tool “XAMPP” yg cara peng aktifan nya bisa lihat di Cara instal Xampp



Cara kedua : Kita hanya menggunakan tool seadanya ( Yg ada di komputer kita )
Yaitu :
1. Browser Mozilla Firefox
2. Microsoft Paint
3. Microsoft Office Picture Manager
4. Template Blog dengan CMS Blogspot/themes wordpress.org
5. Notepad/microsoft Frontpage

Nah..yg kita bahas adalah cara yg kedua ini ya

Langkah pertama :
1. Buka web/blog kita yang mau di edit tampilan Layout (Themes/template ) nya
2. Cari web lain yang menurut kita bagus, atau yg ingin kita tiru tampilannya . Atau bisa juga dengan mendownload nya

Langkah Kedua :
1. Di halaman website kita , klik Tab ” File” di browser mozilla ,

2. Klik “Save as” dan simpan dengan nama terserah anda misalnya kita simpan dengan nama “Webku-edit” . Lalu web orang lain juga disimpan (Save as) dengan nama misalnya “Webcontoh-edit” (tanpa tanda petik”)

3. Simpan di folder di hardisk kita,

Lakukan hal yg sama dengan halaman web yg akan ditiru

4. Setelah di save as , maka akan tersimpan satu file ber ekstensi HTML (file HTML) dan satu folder yang isinya adalah semua yang dibutuhkan oleh “layout bayangan” (Folder isi )web kita agar bisa dibuka di browser

5. Kemudian klik dua kali file ber ekstensi HTML agar bisa terbuka di browser . maka “layout bayangan” web kita akan tampil sama persis dengan web asli nya.

Jika kita sedang online , maka semua nya akan tampil sempurna. Tapi jika tidak online ,maka ada beberapa image yang tidak akan muncul.
Solusinya , coba kita copy image yang ada di themes kita ke dalam folder
(Folder isi ) .

6. Kemudian untuk memulai mengedit nya . Kita klik kanan “File HTML ” tadi lalu klik “edit” , atau bisa juga dengan Klik kanan + Open with : pilih dengan notepad atau dengan MS front page.

PS : jadi file HTML ini kita buka dua kali , yaitu dibuka dengan browser mozilla agar bisa terlihat tampilan aslinya , dan juga dibuka dengan Notepad /frontpage , agar bisa di edit.

Untuk merubah dan menggeser misalnya lebar sidebar ,lebar postingan , footer , header dll , maka kita buka file style.css yang ada di (Folder isi) , yg tadi ter download.

Bandingkan dengan tampilan yg ada di web yg ingin kita tiru , baik itu file HTML nya , dan juga file style.css nya.

Catatan : Jika dihalaman web kita ada iklan adsense nya , maka ubahlah dulu angka pub id nya dengan huruf xxxxxx
contoh : PUB -ID : xxxxxxxxxx

Nah… sekarang saat nya kita coba2 untuk merubah atau mengedit , plus sekalian belajar men desain web dengan cara yang sederhana.

Sacara umum , template/themes itu biasanya terbagi menjadi :
Bagian keseluruhan halaman
Bagian Header
Bagian Sidebar
Bagian Body artikel
Bagian Footer

Untuk keseluruhan halaman , pengaturannya akan ditandai dengan awalan :
body
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #body atau .body

Untuk Header , pengaturannya akan ditandai dengan awalan :
header
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #header atau .header

Untuk Sidebar pengaturannya akan ditandai dengan awalan :
sidebar
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #sidebar atau .sidebar

Untuk Body artikel pengaturannya akan ditandai dengan awalan :
post atau kadang content
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #post atau .post

Untuk Footer pengaturannya akan ditandai dengan awalan :
footer
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #footer atau .footer

Untuk Tab Navigasi… ini optional , tapi kadang kita perlukan.
nah Untuk Navigasi , pengaturannya akan ditandai dengan awalan :
navigaton atau kadang menu
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #navigaton atau .navigaton

Oke..itu dasar2 yg ada di themes/template kita…

Sekarang kita bahas struktur kode2 nya
Untuk Themes yg ada di wordpress.org (domain berbayar) sebenarnya lebih mudah , karena biasanya sruktur antara body, header,sidebar,post,dan footer , dan style.css semua nya dipisah

Yang agak sulit di blogspot , karena semua struktur file dijadikan satu halaman. yakni sbb :

<?xml version=”1.0″ encoding=”UTF-8″ ?>
………………………….dst..dst…
(disini tempat keterangan asal CMS)

<head>
……..disini berisi title blog dengan meta tag sllnya
<b:skin><![CDATA[/*

—————————-
Keterangan sipembuat template

______————————–

lalu dibawah nya ini terdapat STYLE.CSS
yang mengatur bagaiana tampilan halaman blog
s/d kode
</head>

nah..lalu isi dari halaman akan diberikan dengan diawali setelah tanda :
<body>

header
navigasi/menu
post
sidebar
footer
dll

dan diakhiri dengan tag
<body>
lalu ditutup halamannya dengan :
</html>

Itu gambaran sekilas struktur blogspot

Sedangkan di themes wordpress.org.
Semua nya dipisah di tiga bagian utama yaitu :
Header ,Sidebar , footer ,
dan semua nya akan di kumpulkan di page.php dan di indeks.php

sedangkan pengaturan layoutnya akan dikerjakan di style.css

Demikian cara sederhana yang dapat kita lakukan , dengan harapan jika ada yang ingin merubah tampilan dengan cepat dan mandiri bisa terlaksana dengan mudah.

PS : Saya bukan ahli di bidang ini , yg saya tuliskan diatas adalah cuma pengalaman saya saja dalam rangka mengedit tampilan web saya.

JIka ada yg ingin menambahakan atau ditanyakan silahkan di tempat ini ,

semoga bermanfaat

Update Cara Merubah Layout halaman web : 12 Agustus 2010
Atas pertanyaan dari mas wiradynamic di kolom komentar disini , maka saya perlu memberikan rincian agar bisa dijadikan studi kasus bagi saya pribadi dan juga mungkin buat pengunjung yang mengalami hal serupa.
Hal pertama yang saya lakukan pada webnya mas wiradynamic, adalah men save Page as, dan menyimpan nya di hardisk komputer saya.
Lalu saya melihat hasil simpanan file web tsb, dan membuka file html,satu saya buka dengan notepad dan satu lagi dengan mozilla firefox. Di notepad saya melihat kalau style.css nya dipanggil dengan cara @import. Artinya saya harus mendownload lagi file style.css web nya wiradynamic, dan menyimpannya di folder download.Lalu merubah url importnya yg tadinya begini :

@import “http://wm-site.com/wp-content/themes/arclite/style.css”; @import “http://wm-site.com/wp-content/themes/arclite/options/side-green.css”;

menjadi begini :

<style type=”text/css”> @import “file:///G:/DesainwebAgustus2010/wm-site_files/style.css”; @import “file:///G:/DesainwebAgustus2010/wm-site_files/side-green.css”;

Setelah perubahan dilakukan, maka tahap pengeditan siap dilakukan. Karena mas wiradynamic ingin mengedit sidebar, maka saya mencari lewat source code html ( Klik kanan halaman web dan klik View Page Source). Pada salah satu sidebarnya ada judul widget “Feature post”, nah saya telusuri widget tsb dan mendapati bahwa Feature post ada didalam pengaturan <ul id=”sidebar”> dan juga didalam pengaturan pada <div class=”box”> Maka saya perlu merubah besaran pada pengaturan kedua hal tsb.

Dan inilah yang saya rubah : (buka style.css pada dashboard wp)

di bagian css sidebar yg awalnya begini :
#sidebar, #sidebar-secondary
{ padding: 2em 1em; margin: 0; }

menjadi seperti ini :
#sidebar, #sidebar-secondary

{ padding: 2em .1em; margin: 0; }

dan dibagian css box yg awalnya begini :
.box{
background: transparent url(images/box-shadow.png) no-repeat bottom right;
padding: 8px 12px;
margin: 2em 0 1em;
}

menjadi seperti ini :
.box{
background: transparent url(images/box-shadow.png) no-repeat bottom right;
padding: 2px 2px;
margin: .5em 0 .5em;
}

dan juga mnerubah pada bagian ini :

.box .the-content{
padding: .4em 1em .6em 1em;
min-height:92px;
height:auto !important;
height:64px; /* ie 6 fix */
min-width: 64px;
}
menjadi seperti ini :
.box .the-content{
padding: .4em 1em .6em .4em;
min-height:92px;
height:auto !important;
height:64px; /* ie 6 fix */
min-width: 64px;
}

Catatan : Perubahan yang saya lakukan saya tandai dengan huruf merah pada kode2 diatas.

Nah silahkan untuk mas wiradynamic untuk mencoba nya sendiri yah..
Kemudian, yang perlu juga mungkin dilakukan, pada saat memasukkan kode2 html di widget, sebaiknya gunakan tag center diawal dan diakhir code, agar widget image bisa tampil ditengah2 kolom sidebar. Contoh penulisannya seperti ini :

<center> kode2 html banner atau javascript disini </center>

Semoga membantu yah
Salam
Bahrul Ulum

Dari : http://www.bahrul-ulum.com/
Read More..

Menambahkan READ MORE pada BLOGSPOT

Bagi para blogger berbasis blogspot, sampai hari ini mungkin agak kesusahan untuk membuat tampilan berita / news yang panjang secara efisien. Masalahnya secara default, blogger akan menampilkan seluruh teks berita yang diposting. Coba bayangkan kalo kita posting 5 berita saja yang cukup panjang, trus kita mau melihat berita yang ke-5 ato yang paling bawah, waduh... musti bersusah payah men-scroll layar nya ber x xx nih. .....
Trus pengunjung tentu lama-lama jadi sebel, bahkan kita dicap sebagai blogger yang kurang prof... ya ..ga?

Gimana cara menampilkan sebagian kecil berita (beberapa baris teratas) kemudian disusul dengan teks "Read More" atao "lanjut" atao apalah yang penting terlihat ringkas dan enak buat surfing berita. Baru setelah pengunjung tertarik pengin baca berita lebih lanjut, dia tinggal klik aja tuh teks "Read More" or "Lanjut" tadi. Bagi para surfer di internet pasti cara yang diuraikan tadi bukan sesuatu yang asing ya..khan..


A. MEMASANG KODE PADA TEMPLATE
Ga usah kebanyakan basa-basi yah... kita langsung saja ke permasalahan "Cara menambahkan Read More" dalam artikel berbasis Blogspot.

1. Buka template klik link: Layout-> Edit HTML -> Kasih tanda cek pada CheckBox "expand widget tempate"
2. Letakkan kode berikut PERSIS di ATAS nya kode </head>
(Pengin cepat, gunakan fasilitas Find pada browser kamu).

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3. Klo sudah, cari kode berikut:

<p><data:post.body/></p>
(kalo ga ada, cari aja kode: <data:post.body/>-tanpa embel-embel:<p> maupun </p>)
Letakan kode berikut persis di bawahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>


4. Klik Simpan. Selesai.
5. Pergilah ke halaman SETTING, dengan klik link SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Tengoklah apakah sudah ada isi kode berikut. Jika belum isi saja kodenya secara manual. Kode dimaksud adalah ini nih....:

<span class="fullpost">

</span>

Trus, jangan lupa simpan hasil SETTING atao PENGATURAN-mu.

wa... melelahkan ya..? eit jangan khawatir, langkah-langkah tadi cukup kamu lakukan SEKALI SEUMUR HIDUP..... :-) :-), kecuali kalo kamu mao ganti template, langkah tadi ya kamu ulangi lagi.... Makanya jangan keseringan gonta-ganti template ya...

Nah... sekarang gimana cara menggunakannya??
Klo yang ini musti kamu lakukan setiap kali kamu posting berita. Tapi kodenya cuma dikit kok, dan kamu bisa lakukan dengan teknik copy-paste.

B. PENERAPAN / PENGGUNAAN
Langsung aja ke contoh ya...
Misal berita posting kamu ASLI nya begini: (tanpa tanda kutip)

"Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jika format yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan menyebabkan waktu loading blog/website kita lebih lama. Padahal, pengunjung suka terhadap blog atau web yang loadingnya cepat dan tidak boros bandwidth. Untuk itu, kita harus mengusahakan agar gambar-gambar dalam blog atau website kita memiliki ukuran sekecil mungkin. Caranya bagaimana?"

Trus kalo kamu tambahi SEDIKIT KODE -lihat yang diberi warna kuning- dalam Modus Edit Html BUKAN Compose menjadi begini: (tanpa tanda kutip)

"Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jika format yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan <span class="fullpost"> menyebabkan waktu loading blog/website kita lebih lama. Padahal, pengunjung suka terhadap blog atau web yang loadingnya cepat dan tidak boros bandwidth. Untuk itu, kita harus mengusahakan agar gambar-gambar dalam blog atau website kita memiliki ukuran sekecil mungkin. Caranya bagaimana?</span>"


Maka hasil di posting kamu kira-kira akan jadi gini nih....: (tentunya tanpa tanda kutip)

"Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jika format yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan ........ Read more"


Lalu teks:
"menyebabkan waktu loading blog ...."

akan disembunyikan......
Nah... keren dan ringkas kan...

Catatan:
- kode <span class="fullpost"> diletakkan di posisi di mana berita posting kamu akan dipotong (=tempat meletakkan teks "Read More")
- kode: </span> HARUS diletakkan di-AKHIR berita / posting.

SELAMAT MENCOBA....

Dari : http://infoneka.blogspot.com/


Read More..

Cara posting script dihalaman blog

Sudah lihat dua posting saya sebelumnya? Jika anda perhatikan disana ada script yang saya tampilkan dan bisa anda copy. Apakah anda pernah mencoba hal yang sama dan reaksi anda, "loh, kok jadinya begini?". Nah kalau begitu saya coba kasih solusinya. Jika anda ingin buat posting script di halaman blog anda, pasti tidak boleh langsung anda copy>paste begitu saja. Ada beberapa hal yang anda lakukan. Pertama coba anda click dulu DISINI. jika sudah disitu anda bisa melihat sebuah box dengan dua tombol dibawah nya endode & decode.

Langkah selajutnya, anda copy script yang akan anda post di halaman blog anda, ke box tersebut. Setelah itu anda click tombol encode maka script anda akan berubah bentuk. Yang terakhir, anda copy script yang sudah di encode lalu paste ke posting anda. Nah, sekarang sudah nggak bingung lagi kan. Makanya lain kali kalo sempet mampir lagi ke blog ini, dan silahkan baca lagi tips lain nya. yo wiiiss...

Dari : http://tipspack.blogspot.com/

Read More..

Cara menambah status YM di Blogger

Pada postingan kali ini kita berjumpa kembali dengan saya yang berada di Pulau Kalimantan belahan Selatan, saya akan berbagi ilmu kepada sampian sabarataan setelah melanglangbuana ke jagat raya melalui kabel telkom yang saya miliki , kali ini kita akan membahas masalah status kita di blog apakah online atau offline supaya pengunjung mengetahui keberadaan kita di blog apakah online atau offline berikut cara memasang code scriptnya
caranya..

1. Log in blogger.com
2. Dasbor > tata letak > elemen laman
3. Tambah gadget > HTML/javascript
4. Copas kode di bawah ini


<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti"> <img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=54"></a>




&lt;a target=&quot;_blank&quot; href=&quot;http://ymgen.com/chat.php?idne=ganti"&quot;&gt; &lt;img border=&quot;0&quot; src=&quot;http://ymgen.com/ym.php?id2=ganti&amp;s2=54&quot;&gt;&lt;/a&gt;


<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti">
<img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=1"></a>


ket :
ganti ID YM saya/tulisan berwarna merah dengan ID YM yg anda miliki.

5. Simpan

Dari : http://infoneka.blogspot.com/

Read More..

Rahasia Mengetahui Keyword Yang Paling Banyak Dicari Orang

Belajar SEO Blogspot – Apakah sobat selama ini sempat bingung mencari keyword yang pas buat sobat? Pas berarti tidak banyak pesaing dan juga paling banyak dicari orang. Sepertinya susah jika mencari keyword hanya dengan mengandalkan instink pikiran tanpa didasari dengan hasil survey, bukan?

Semua orang pasti tau! Jika sobat ingin membuat blog yang banyak dikunjungi orang serta jumlah trafik pageview meningkat, maka isilah blog sobat tersebut dengan topik yang menarik atau topik yang sedang hangat diperbincangkan di publik yang banyak dicari-cari orang. Memang kedengarannya agak sulit bagi kita untuk menentukan sebuah keyword yang mantap, jika kita tidak memanfaatkan tools yang ada.

Selama ini, Google sebenarnya sudah banyak menyediakan tools yang sangat membantu terutama untuk masalah blogspot ini. seperti misalnya tool Google Keyword Tool External dan Google Trends yang dapat membantu kita dalam mencari sebuah keyword untuk blog kita. Dengan adanya layanan tools dari Google ini sebenarnya kita sudah banyak dibantu untuk mengetahui dan mencari keyword apa saja yang paling banyak dicari orang saat ini.

Lantas, bagaimana cara memanfaatkan layanan gratis tools dari Google tersebut?

Berikut penjelasannya!

Google Keyword Tool External

Fasilitas ini sebenarnya digunakan untuk mencari keyword yang paling efektif dalam Google Adwords, yaitu program dimana kita bisa memasang iklan di halaman hasil pencarian Google atau di Google Adsense. Namun tool ini juga dapat dimanfaatkan untuk mencari keywords yang populer dan keyword-keyword lain yang berhubungan. Lihat gambar di bawah ini!

Dari gambar di atas terlihat bahwa keyword laptop battery sangat populer (lihat bar hijau pada bagian Search Volume), dan google menyarankan keyword yang berhubungan dengan laptop battery adalah sony laptop battery, notebook batterries, dan sebagainya. Informasi ini berguna jika Sobat memilki sebuah toko yang menjual laptop atau notebook dan memiliki sebuah web/toko online:

• Keyword laptop battery sangat populer, masukkan keyword ini dalam web/blog sobat
• Selain menggunakan keyword/kata kunci laptop battery, sebaiknya juga menggunakan kata kunci notebook battery dan kata kunci lain yang populer
• Merek tertentu (misalnya Sony) lebih populer daripada merek lain (misalnya Fujitsu)

Dalam keyword tool ini, kita juga bisa mengatur setting dari bahasa dan negara mana. Jadi, dengan Google Keyword Tool External ini, sobat bisa mencari dan mengetahui keyword-keyword yang sedang populer dicari orang-orang. Sobat juga bisa mengecek bagaiman keyword SEO blogspot saat ini, apakah masih banyak pesaingnya. Jika masih, maka beralihlah ke yang lain. :)

Google Trends

Nah, tool yang kedua ini untuk mengetahui top keywords atau kata kunci yang paling banyak dicari orang adalah Google Trends. Silakan buka google trend, maka akan muncul jendela pencarian dan daftar 10 kata kunci yang pupuler hari ini (berlaku di USA).

Sobat juga bisa lihat More Hot Trend untuk melihat 100 buah kata kunci (keywords) yang paling populer hari ini. Sobat juga bisa mengganti tanggal dengan tanggal kemarin atau waktu-waktu yang lain.

Di bagian atas halaman ada box yang digunakan untuk memasukkan keyword. Misalnya kita masukkan kata berikut: AMD, intel maka akan muncul grafik seperti ini.

Keterangan gambar:

1. Kata kunci yang dimasukkan bisa 1 atau lebih dari satu
2. Grafik jumlah orang yang mencari kata kunci tersebut di google (dalam contoh ini, intel – garis merah, dan amd = garis biru)
3. Jumlah berita sehubungan kata kunci
4. Titik di mana berita dipublikasi (misalnya pada titik A, harga stock Intel turun)
5. Daftar berita

Dengan melihat gambar di atas dapat disimpulkan:

· Intel lebih populer daripada AMD

· Di akhir tahun 2005, pencarian kata kunci Intel meningkat, namun di awal tahun 2008 ini mengalami penurunan

Sobat juga bisa mengeset agar Google Trends menampilkan data pengunjung google dari negara mana dan tahun berapa.

Bagaimana? Apakah sobat pembaca ingin mencoba tool gratis yang disediakan google ini?

Cukup sekian lah postingan belajar SEO blogspot kali ini, semoga sobat bisa memanfaatkan tools dari google ini untuk mencari serta mengetahui sebuah keyword yang sedang banyak dicari orang (keyword populer).

Selamat mencoba!

Dari :
http://yasiranak252.blogspot.com/2010/12/rahasia-mengetahui-keyword-yang-paling.html

Read More..

Membuat Judul Blog Berganti Ganti

Membuat Judul Blog Berganti Ganti

Seperti pada Judul diatas, kali ini kita akan membahas cara membuat judul blog seperti yang ada di blog saya ini.
Perhatikan Judul Blog saya !! Berubah rubah dengan tulisan tulisan berbeda yakan ?? Langsung saja yuu..


1. Buka dan Loggin Blogger
2. Masuk Ke Rancangan
3. Elemen Halaman
4. Tambah Gadget --> HTML/Java Script
5. Copaz Code saya ini.

Keterangan Code :
Tulisan Berwarna MERAH : Adalah Pesan yang ingin Kita Tulis di Judul
Tulisan Berwarna BIRU : Adalah Kecepatan Pergantian Teks
Tulisan Berwarna HIJAU : Adalah Satuan Delay dari tiap tiap Pergantian Teks

6. Save Lalu Lihat Blog Anda.

From :
http://yasiranak252.blogspot.com/2010/12/membuat-judul-blog-beganti-ganti.html Read More..