Cara Memasang Iklan Kumpulblogger.com Pada Postingan

Bagi anda yang sudah mendaftarkan blognya ke kumpulblogger.com, tentunya blog anda mempunyai kesempatan untuk memasang iklan dari kumpulblogger.com tersebut. yang ingin saya bahas pada postingan kali ini, yaitu tentang bagaimana caranya agar iklan dari kumpulblogger.com tersebut bisa kita pasang dalam halaman postingan kita. tepatnya dibawah postingan kita.seperti pada gambar berikut ini.

Seperti bisa anda lihat pada contoh gambar di atas, iklan dari kumpulblogger tersebut berada tepat di akhir atau di bawah postingan. Bagi anda yang berminat untuk membuat iklan dari kumpulblogger.com tersebut berada pada halaman postingan anda, caranya adalah sebagai berikut.

1. Anda login terlebih dulu ke kumpulblogger.com untuk mendapatkan kode Html dari iklan yang akan ditampilkan pada blog anda.bila anda belum terdaftar di kumpulblogger.com silahkan anda daftar terlebih dulu dengan mengisi data-data yang diperlukan dengan benar.

2. Setelah anda login ke kumpulblogger.com tentunya disana akan ada pilihan menu Blogger seperti contoh pada gambar dibawah berikut ini.

3. Pada menu pilihan seperti yang ada pada gambar di atas, silhkan anda pilih atau anda klik link Script Text Advertising untuk Blog anda. setelah itu anda bisa memilih apakah iklan yang akan ditampilkan pada blog anda nantinya tersebut berbentuk vertikal ataupun horizontal. tapi saya sarankan agar anda memilih yang berbentuk horizontal atau yang berbaris dibawah bila anda akan memsang iklan tersebut dalam halaman postingan anda.

4. Setelah anda memilih bentuk tampilan dari iklan tersebut, silahkan anda copy kode html nya.

5. Setelah anda mengcopy kode html dari iklan tersebut. langkah selanjutnya yaitu anda harus memparse kode html iklan tersebut sebelum anda pasang pada blog anda. cara untuk memparse kode html iklan tersebut yaitu dengan cara. anda buka situs http://blogcrowds.com/ atau anda bisa klik disni untuk menuju situs tersebut.pada situs tersebut nanti akan ada tampilan seperti pada gambar di bawah berikut ini.

6. Pada contoh gambar di atas, silahkan anda paste kode html untuk iklan yang anda dapatkan dari kumpulblogger.com sebelumnya pada kotak yang telah disediakan seperti pada gambar di atas. setelah itu anda klik parse.

7. Setelah anda klik Parse maka kode html nya akan berubah seperti pada gambar dibawah ini.

8. Langkah selanjutnya yaitu anda copy semua kode html tersebut. kemudian anda login ke blogger terus anda masuk ke menu tata letak >> Edit HTML jangan lupa beri tanda centang pada "expand widget template"setelah itu anda cari kode seperti dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'> Readmore</a>
<b:else/>
</b:if>

9. Setelah anda temukan kode seperti diatas selanjutnya anda paste kode iklan yang telah anda parse sebelumnya tepat dibawah kode <b:else/> .maka hasilnya akan terlihat seperti dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'> Readmore.</a>
<b:else/>
&lt;script src=&quot;http://kumpulblogger.com/scahor.php?b=39649&amp;onlytitle=1&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</b:if>

10. klik simpan/save template.
11. Selesai. Silahkan anda buka blog anda untuk melihat hasilnya.

Catatan : Tips ini hanya akan bisa digunakan bila blog anda telah dipasangi fasilitas readmore. bila blog anda belum blog anda belum terpasang fasilitas readmore tersebut. silahkan anda klik disini untuk mengetahui cara memasang fasilitas Readmore untuk blog anda.

Untuk anda yang telah memasang fasilitas Readmore versi terbaru atau auto Readmore, anda hanya perlu mempaste kode html dari iklan kumpulblogger yang telah di parse tersebut tepat sebelum kode </b:if>pada baris kode auto Readmore tersebut.

Ok, saya rasa cukup sampai disini dulu postingan saya tentang cara memasang iklan kumpulblogger pada halaman postingan kali ini. semoga bermanfaat dan salam blogger mania.

Read More : Cara Memasang Iklan Kumpulblogger.com Pada Postingan

Cara Membuat Image/Teks Slide Show Dengan Berbagai Efek marquee

Pernahkah anda mengunjungi suatu blog atau website yang pada halaman Blog ataupun website mereka terdapat tampilan image slide show. salah satu contohnya bisa anda lihat image slide show yang ada pada bagian atas blog saya ini.

Sekarang pertanyaannya adalah bagaimana caranya kita membuat image slideshow tersebut?

Untuk membuat image slideshow tersebut caranya tidaklah begitu susah, pada postingan kali ini saya akan menjelaskan bagaimana cara kita untuk membuatnya. tapi sebelum ke inti pembuatannya, ada baiknya bila kita memahaminya terlebih dulu tentang efek marquee.

Marquee adalah kode HTML yang befungsi untuk membuat object seperti gambar ataupun teks menja bergerak atau berjalan. Ada beberapa efek marquee yang bisa kita buat seperti: gambar/teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai ke tahap pembuatan, mari kita pelajari dulu fungsi dari masing-masing atributes tersebut.

Beberapa attributes yang sering digunakan dalam marquee yaitu sebagai berikut :

1. Behavior : yaitu untuk mengatur gaya gerakan pada gambar taupun teks. biasanya ada 3 gaya gerakan yang bisa digunakan yaitu :

•  Alternate : yaitu untuk menggerakan gambar atau teks secara bolak-balik
•  Slide        : yaitu untuk menggerakan gambar atau teks berjalan ke satu arah sekali saja
•  Scroll       : yaitu untuk menggerakan gambar atau teks ke satu arah secara kontinu
  

2. Direction : yaitu untuk mengatur arah gerakan gambar ataupun teks.biasanya ada 4 arah gerakan yang bisa kita digunakan yaitu :

• Up      : Untuk menggerakan gambar atau teks bergerak keatas
• Down  : Untuk menggerakan gambar atau teks bergerak kebawah
• Left    : Untuk menggerakan gambar atau teks bergerak kekiri
• Right  : Untuk menggerakan gambar atau teks bergerak kekanan
  

4. Face : Untuk mengatur jenis font / teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda.

5. Width : Untuk mengatur ukuran panjang atau Lebar ruangan gambar/teks dalam satuan pixel.

6. Height : Untuk mengatur ukuran Tinggi  ruangan gambar/teks dalam satuan pixel

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background anda gunakan"transparent"

8. Scrolldelay : Untuk mengatur ukuran waktu tunda gerakan dalam satuan per mili detik


9. Scrollamount : Untuk mengatur ukuran kecepatan gerakan dalam satuan pixel.

10. Loop : untuk mengatur ukuran jumlah pengulangan.

Itulah beberapa attributes yang sering digunakan untuk membuat efek marquee atau untuk membuat gambar atau teks berjalan. Berikut ini saya akan memberikan beberapa contoh efek dari marquee:

Contoh 1: Gambar atau teks berjalan bolak-balik secara horizontal

Welcome To My Blog

Kodenya adalah :
Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">
<marquee behavior="alternate" bgcolor="yellow" direction="right" height="20px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="right" height="100px" scrollamount="5" scrolldelay="10" transparent="" width="300px">
<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Catatan : Semua teks yang dicetak tebal dengan warna merah di atas bisa anda ganti sesuai dengan yang anda inginkan, dan untuk menambah gambar pada image slide show anda cukup mengcopy kode
<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /> dan pastekan sebelum kode </marquee>.

Masukan Link anda disini : yaitu Link yang anda inginkan jadi ketika gambar itu di klik akan terbuka sebuah alamat yang dituju, misalnya link posting anda,blog atau yang lainnya. kalau dirasa tidak perlu, tidak dirubah atau di hapus juga tidak apa-apa.

Masukan Link gambar anda disini: yaitu Link gambar dari image hosting anda.

Contoh 2: Gambar atau teks berjalan kekanan secara continue

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="scroll" bgcolor="yellow" direction="right" height="20px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="scroll" bgcolor="" direction="right" height="100px" scrollamount="5" scrolldelay="10" transparent="" width="300px">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Contoh 3: Gambar atau teks berjalan bolak-balik secara vertikal:

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="alternate" bgcolor="yellow" direction="up" height="100px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="up" height="300px" scrollamount="5" scrolldelay="10" transparent="" width="100px">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Contoh 4: Gambar atau teks berjalan dengan efek bounce atau zig zag

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="alternate" bgcolor="yellow" direction="up" height="100px" scrollamount="5" scrolldelay="10" width="300px"><marquee behavior="alternate" direction="left" scrollamount="5" scrolldelay="10">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="up" height="300px" scrollamount="5" scrolldelay="10" transparent="" width="100px"><marquee behavior="alternate" direction="left" scrollamount="5" scrolldelay="10">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Contoh 4: Gambar atau teks berjalan dan berhenti dengan mouse

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="alternate" bgcolor="yellow" direction="right" height="20px" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="right" height="100px" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" scrolldelay="10" transparent="" width="300px">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Gambar ataupun teks pada slideshow diatas akan berhenti bila mouse anda digerakan tepat diatasnya dan akan berjalan kembali bila mouse anda digerakan menjauhi slideshow tersebut.

Ok, mungkin hanya beberapa contoh saja yang bisa saya berikan pada postingan kali ini. silahkan anda paraktekkan contoh yang saya berikan tersebut pada gadget HTML page element anda. mohon maaf bila ada kekurangan dalam postingan saya kali ini. semoga bermanfaat dan salam blogger mania.

Read More : Cara Membuat Image/Teks Slide Show Dengan Berbagai Efek marquee

Membuat kotak text area dengan fasilitas tombol Select All

Mungkin anda pernah berkunjung ke suatu blog ataupun website dimana pada halaman blog ataupun dalam postingan mereka terdapat sebuah text area dengan fasilitas select all. Contohnya seperti pada gambar dibawah ini.

Tulis text ataupun kode yang ingin anda tampilkan disini

Sekarang pertanyaannya adalah bagaimana kita bisa membuat kotak Teks area seperti itu, untuk membuat kotak Teks area dengan fasilitas select all tersebut caranya adalah seperti keterangan berikut ini.

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat sebuah kotak ataupun bidang dimana dalam kotak tersebut bisa kita masukan beberapa text yang kita inginkan, contohnya seperti dibawah ini:

Tulis text ataupun kode yang ingin anda tampilkan disini

Kotak ini biasa kita gunakan untuk mengisi beberapa kata, kode-kode pada postingan maupun untuk membuat kotak link exchange. bagi anda yang ingin membuat sebuah kotak seperti tersebut caranya sangatlah mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog ataupun postingan anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 40px; padding:3px">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></div>

Keterangan :

- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.

- center yaitu menunjukkan posisi text dalam kotak tersebut di posisi tengah. Bila anda ingin meletakkan text tersebut dikanan. Anda cukup menggantinya dengan right dan Left bila anda ingin meletakkannya diposisi sebelah kiri.

- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Membuat kotak teks/text area dengan fasilitas tombol Select All

Tadi yang kita bahas adlah tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all. Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area tersebut, sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area tersebut. Contohnya seperti dibawah ini, coba anda tekan tombol select all yang ada dibawah ini.maka semua teks yang ada dalam kotak tersebut akan terhighlight atau terblok semua dengan mudah.

Tulis text ataupun kode yang ingin anda tampilkan disini

Untuk membuat teks area dengan tombol select all seperti diatas caranyan adalah seperti berikut, copy semua kode dibawah ini ke blog ataupun postingan anda.

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: Center;"><textarea style="padding: 3px; Width: 300px; Height: 50px;" name="txt">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></p></form>

Keterangan:
- Teks yang dicetak tebal dan berwarna merah adalah teks yang muncul pada tombol. Silahkan anda bisa menggantinya dengan nama lain, misalnya pilih semua, copy semua ataupun yang lainnya.
- Teks berwarna biru adalah teks muncul didalam kotak. Silahkan anda ganti dengan teks ataupun kode yang ingin anda tampilkan dalm kotak tersebut.
-  Teks yang di cetak tebal dan berwarna hitam seperti Center, Width dan Height. silahkan anda ganti juga sesuai keinginan anda.

Ok mungkin cukup sampai disini dulu postingan saya mengenai cara membuat kotak teks area dengan fasilitas tombol select all ini. semoga bermanfaat dan salam blogger mania.

Read More : Membuat kotak text area dengan fasilitas tombol Select All

Cara Memasang Shoutbox di Blogger

Apa sih Shoutbox itu ? Shoutbox  adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya

Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Untuk anda yang berminat memasang widget shoutbox ini pada Blog ataupun website anda. Caranya adalah sebagai berikut :

1. Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawa ini.

2. Setelah itu anda akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar.

3. setelah anda mengisi data-data anda pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog anda nantinya. Seperti pada gambar dibawah ini.

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi  kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox  dengan style yang anda pilih tadi pada blog anda

5. Untuk memasang shoutbox pada blog anda yaitu dengan cara, klik Go to my control panel now” setelah itu pada bagian menu Quick Start anda klik  Get Codes untuk mendapatkan code widgetnya. seperti pada gambar seperti dibawah ini.

6. Setelah anda klik Get codes kemudian anda pilih Place Shoutbox on webpage. Terus Copy semua kode HTML yang ada dalam kotak Generated Codes.

7. Setelah anda copy semua kode tersebut anda bisa pastekan dulu kode tersebut untuk sementara  ke notepad, microsoft word dsb.

8. Login ke blogger terus klik Layout dan klik page element untuk menambah widget baru pada blog anda dengan cara klik add a Gadget terus anda pilih yang HTML/JavaScript. Seperti pada gambar dibawah ini :

9. Setelah itu anda paste kan semua kode shoutbox yang anda dapatkan sebelumnya seperti contoh pada gambar dibawah ini.

10. Klik save dan setelah itu maka proses pembuatan widget shoutbox anda telah selesai. Untuk melihat hasilnya anda tinggal klik view blog. Gampang kan hehehe….

Ok Cukup sekian dulu postingan saya tentang cara membuat ataupun memasang shoutbox di blogger kali ini. Semoga bermanfaat dan salam blogger mania.

Read More : Cara Memasang Shoutbox di Blogger

Cara Membuat atau Memasang Menu Tab View

Cara Membuat Menu Tab View

gambar : 1

Untuk anda yang ingin membuat Menu Tab View seperti gambar di atas untuk halaman blog anda, caranya adalah sebagai berikut :

01. Save template anda terlebih dulu yaitu dengan mendownload full template anda. kemudian Buka menu edit template atau Layout, terus buka edit HTML. jangan lupa kasih tanda centang pada Expand widget template. setelah itu cari kode ]]></b:skin> pada halaman HTML dengan menekan ctrl+F dan paste kan ]]></b:skin> tersebut pada kotak find dan tekan enter  contoh nya seperti pada gambar

berikut ini :

gambar : 2

2. Langkah berikutnya adalah copy semua kode dibawah ini terus paste kan tepat di atas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;

border-top: 1px solid #d9e3ff;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
font-family: "verdana", Serif;
font-weight: 900;
color: #ffffff;                   /* Warna text menu tab */
background-color: #ca0a0a;  /* Warna background menu tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1200ff;  /* Warna background menu tab yang active */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
overflow: hidden;
background-color: #ffffff;  /* Warna background menu  halaman */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Catatan : semua kode warna yang saya tandai pada kode diatas bisa anda rubah sesuai keinginan anda. contoh anda ganti dengan kode #ffffff untuk warna putih ataupun dengan kode warna lainnya.

3. Setelah anda mamasukan semua kode di atas kemudian anda cari kode </head> setelah itu copy kode berikut ini dan paste tepat di atas kode </head>.

<script src='http://www.geocities.com/damn_lunchix/tabview.js' type='text/javascript'/>

4. Klik simpan atau save template anda.

5. Setelah anda selesai mengcopy dan mempastekan semua kode-kode diatas pada halaman HTML template anda. langkah selanjutnya anda buka menu elemen halaman dan klik add a Gadget dan pilih seperti pada gambar berikut ini :

gambar : 3

gambar : 4

gambar :5

6. Kemudian Copy dan paste semua code berikut ini pada gadget HTML tersebut seperti contoh pada gambar 5 diatas.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">Recent Post</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">Most Popular</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">Wallpaper</a>

</div>

<div style="width: 298px; height: 150px;" class="Pages">

<div style="overflow: auto; height: 150px; display: block;" class="Page">

<div class="Pad">

</ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<ol>

</div>

</div>

</div>

</div></form>

<script type="text/javascript"><br/>
<br/>tabview_initialize('TabView');<br/><br/></script>

Catatan : Untuk kode yang saya warnai diatas bisa anda rubah sesuai keinginan anda contoh,

<div style="width: 298px; height: 150px;" class="Pages"> . 298px adalah ukuran lebar gadget tersebut

sedangkan 150px adalah ukuran tinggi gadget tersebut.contoh berikutnya adalah tentang

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li> ini juga anda rubah sesuai dengan yang anda iningkan. Masukan Link yang di tuju disini yaitu masukan link yang anda tuju misalnya link untuk alamat posting anda ataupun link alamat yang lain. judul posting disini myaitu untuk judul postingan anda ataupun yang lainnya. Bila anda ingin memperbanyak tampilan daftar judul posting ataupun yang lainnya. anda cukup mengcopy dan memperbanyak kode :

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

seperti contoh yang saya berikan pada kode diatas  yaitu untuk 3 judul content untuk tiap halaman.

7. Selesai dan anda lihat blog anda untuk melihat hasilnya.

Ok saya rasa cukup sampai disini postingan saya tentang bagaiman caranya membuat menu tab view.
Semoga bermanfaat dan salam blogger mania.

Read More : Cara Membuat atau Memasang Menu Tab View

Cara merubah domain blogspot menjadi CO.CC

Bila anda mempunyai account Blogspot dari Blogger.com yaitu penyedia blog milik Google tentunya anda secara default akan mempunyai nama sub domain dari blogspot misalnya http://namaanda.blogspot.com sebenarnya nama sub domanin tersebut  bisa dirubah, misalnya  menjadi  “http://www.namaanda.co.cc” . Selain bisa digunakan untuk pembuatan blog sendiri, Domain Gratis co.cc ini bisa anda manfaatkan juga untuk merubah atau mengganti nama url Blogspot anda menggunakan Domain co.cc

Bila anda menginginkan mengganti nama sub domain blog anda menjadi co.cc caranya adalan sebagai berikut ini :

1.Sebelum anda melanjutkan ke tahap pendaftaran account untuk mendapatkan domain co.cc, anda harus menentukan dulu nama url yang anda inginkan.caranya yaitu clik disini, nanti akan ada tampilan seperti pada gambar dibawah ini :

2.Pada gambar tersebut anda harus memasukan nama url yang anda inginkan, misalkan anda menginginkan nama url tersebut www.namaanda.co.cc maka anda ketik pada kotak isian dengan namaanda kemudian klik chek availability

3.Setelah anda mengklik chek availability, nanti anda akan melihat apakah nama yang anda masukan tersebut tersedia ataukah tidak. bila tidak tersedia anda harus memasukan nama yang lainnya.bila nama anda yang anda pilih ternyata tersedia maka anda tinggal mengklik continue registration.

4.Setelah anda selesai melakukan registrasi tahap selanjutnya adalah menyetting domain anda, caranya adalah masuk ke menu Domain Setting >> Manage Domain >> Setup.

5.Pada menu setup, anda abaikan dulu menu manage DNS, anda langsung klik menu ke 2. yaitu menu Zona Record. pada menu ini anda harus mengisi beberapa data dengan rincian sebagai berikut :

Host : Isi dengan nama url yang anda pilih sebelumnya, misalkan www.namaanda.co.cc
TTL : 1D ( tidak perlu dirubah )
Type : pilih CNAME
Value : isi dengan ghs.google.com

kurang lebih hasilnya seperti pada gambar dibawah ini :

Bila anda telah selesai anda tinggal klik setup.

6. Setelah anda selesai menentukan nama domain dan settingnya,kemudian anda lanjutkan ke setting blogspot pada account blogger.com anda.caranya yaitu sebagai berikut :

• Masuk / login ke “blogger.com” dengan account anda tentunya.

• Setelah login kemudian anda masuk ke menu setting / pengaturan.

• Lalu klik menu Publishing / publikasikan

• Pada menu publishing anda klik “Switch to: • Custom Domain”
  

• Klik already “Already own a domain? Switch to advanced settings”
  

• Isikan pada kolom “Your Domain” dengan “domain co.cc”" yang anda daftarkan sebelumnya misal “www.namaanda.co.cc”
  

• Pada pilihan Use a missing files host? pilih no
  

• Masukan Code Verivication dan klik save setting
  

Setelah selesai anda tinggal menunggu proses sincronisasinya dari co.cc ke Blogspot maksimal 24 jam setelah itu anda sudah bisa mengakses url “blogspot.com” anda dengan nama domain co.cc anda tersebut, yang tadinya http://namaanda.blogspot.com/ menjadi http://namaanda.co.cc/.

Silahkan mencoba dan semoga bermanfaat. salam blogger mania..

Read More : Cara merubah domain blogspot menjadi CO.CC

Tips Mempromosikan Blog ke Chitika

Chitika sebenarnya bukanlah sebuah program yang baru, dan merupakan sebuah program yang telah lama berdiri. Mungkin teman-teman disini juga sudah banyak yang mengenal dan menggunakan program chitika ini.

CHITIKA berbeda dengan adsense karena iklannya perpaduan dari iklan text dan icon gambar, jadi iklan adsense dan chitika bisa dipasang bersamaan dan tidak akan melanggar TOS dari adsense. Nilai payout yang harus dicapai oleh chitika sekitar $50 melalui paypal, sedikit lebih rendah dari adsense.

Kelebihan dari chitika dari adsense adalah nilai click through ratenya (CTR) yang bisa dibilang lebih besar dari rata-rata nilai CTR adsense. Besarnya nilai CTR chitika memang sangat sesuai karena mereka membidik pasar orang US dan Canada. Jadi ketika seseorang yang berasal dari US atau Canada berkunjung ke website atau blog kita lewat search engine iklan dari chitika akan muncul. Memang jauh lebih sulit dari adsense yang bisa muncul kapan saja dan siapapun yang berkunjung. Inilah yang sebenarnya membuat chitika menjadi salah satu jenis iklan yang disukai advertiser karena targeted traffic.

Untuk teman-teman disini yang ingin mencoba daftar ke chitika sebenarnya persyaratannya mudah-mudah saja, kalau berdasarkan pengalaman saya untuk bisa daftar ke chitika cukup memenuhi :

a. Blog atau site yang berbahasa inggris murni.

b. Postingan blog sekitar 10 posts.

c. Alexa cukup dibawah 2 jutaan juga sudah diterima.

d. Bisa dipasang dengan blog yang ber-adsense.

Bagaimana sebenarnya bentuk iklan chitika ini ? Dapat dilihat pada screenshot dibawah.

Ketika kita sudah memasang kode html chitika nantinya iklan chitika tidak akan muncul, kecuali kalau kita melakukan test seperti ini di blog atau site.

http://www.namadomainanda.com/#chitikatest=car

untuk mengetest iklan yang muncul bila kata pencarian di search engine adalah “car”

http://www.namadomainanda.com/#chitikatest=mortage

untuk mengetest iklan yang muncul bila kata pencarian di search engine adalah “mortage”


Ok, mungkin sudah cukup jelas dengan CHITIKA kali ini. Bila ingin bergabung klik disini.
semoga bermanfaat, salam blogger mania

Read More : Tips Mempromosikan Blog ke Chitika

Tips & Trik mempromosikan Blog

Siapa yang tidak kenal dengan search engine Google, Yahoo, AOL, MSN dan ODP Dmoz (Web directory), 5 search engine inilah yang harus anda focuskan dalam promosi blog anda, jika anda melihat statistik pada gambar disamping tentu ada bisa menyimpulkan sendiri yang mana search engine yang harus anda opitmalkan.

Dalam posting kali ini saya tidak menjelaskan secara rinci bagaimana cara mengoptimalkannya tapi anda akan memahami bagaimana cara melakukan promosi dengan mendaftarkan blog anda ke search engine Google, Yahoo dan MSN serta bagaimana cara sukses agar blog anda terdaftar di ODP Dmoz.

Cara Daftar ke Google:

Google bisa dikatakan sebagai Rajanya search Engine, saya sangat menyarankan kepada anda untuk mendaftarkan blog anda pertamakali di search engine ini.Caranya Klik http://www.google.com/addurl/ Kemudian pada formulir pendaftaran Masukan Alamat Blog pada kolom URL dan beri komentar pada kolom comment sesuai dengan tema blog anda.

Cara Daftar ke Yahoo:

Yahoo sebagai search engine kedua yang banyak digunakan, untuk mendaftarkan Blog anda ke Yahoo ikuti langkahnya sebagai berikut. Sebelum anda mendaftarkan blog anda ke Yahoo pastikan anda sudah memiliki account Yahoo, seperti namaanda@yahoo.com jika anda sudah memilikinya anda tinggal klik http://siteexplorer.search.yahoo.com/submit
kemudian pada kotak isian pertama silahkan memasukan alamat blog anda,


Contoh :

http://www.namabloggue.blogspot.com

Atau

http://www.namabloggue.wordpress.com

Untuk pilihan kedua anda diminta memasukan alamat feed anda seperti Contoh :

Http://www.namabloggue.blogspot.com/atom.xml

Atau

http://www.namabloggue.wordpress.com/rss.xml

kemudian tekan tombol submit.

Cara daftar ke MSN :

Dalam statistik Search Engine, MSN milik Microsoft ini juga termasuk banyak digunakan jadi kalau bisa blog anda juga harus terdaftar di Search Engine ini. Cara daftarnya yaitu masuk ke:
http://search.msn.co/docs/submit.aspx?FORM=WSDD2
lalu anda tinggal memasukan kode verifikasi dan memasukan alamat blog anda.

Cara Praktis Mendaftarkan blog ke Search Engine

Cara yang paling praktis adalah dengan menggunakan auto web submit. Ada banyak layanan gratis yang menyediakan layanan untuk pendaftaran, anda bisa mencarinya sendiri di search engine atau tanyakan langsung ke Google. untuk memudahkan dalam mendaftar ke Search engine, saya sarankan anda menggunakan layanan Mypagerank Layanan lain yang dikhususkan dalam pencarian blog diantaranya adalah Google Blog Search dan Blogdigger kedua layanan ini merupakan pencarian blog yang paling banyak digunakan saat ini.

hampir semua penyedia layanan blog mempunyai fasilitas pencarian dengan cara mengindex link pada database mereka sendiri, selain itu kita juga lebih diuntungkan apabila penyedia layanan blog tersebut mempunyai fasilitas ping karena hal ini akan memudahkan kita dalam mempromosikan blog yang telah dibuat. Salah satu web auto submit adalah mypagerank, layanan ini akan memudahkan kita mendaftarkan blog ke beberapa search engine besar seperti dibawah ini :

{www.google.com}{www.searchengine.com}{www.infotiger.com}

{www.scrubtheweb.com}{www.searchuk.com}{www.entireweb.com}

{www.maxpromo.com}{www.aesop.com}{www.whatuseek.com}

{www.splatsearch.com}{www.walhello.com}{www.acoon.de}

{www.szukacz.pl}{www.daypop.com}{www.fybersearch.com}

{www.biveroo.de}{www.infoseek.co.jp}{www.yandex.ru}

{www.amfibi.com}{www.bigfinder.com}{www.metawebsearch.com}

{www.jayde.com}{www.cipinet.com}{www.websquash.com}

{www.Search-o-rama.com}{www.unasked.com}{www.uk.abacho.com}

{www.mixcat.com}

Untuk mempromosikan blog anda keseluruh SE diatas silankan anda klik disini tapi saya tidak menjamin kalau dalam waktu cepat situs ataupun blog anda akan terdaftar, semua ini tergantung dari bagaimana semua search engine diatas tersebut meng-index halaman blog ataupun situs anda.

Untuk keterangan lebih lanjut mengenai bagaimana cara mempromosikan blog anda ke search engine silahkan anda download E-book gratisnya disini. Salam blogger mania....

Read More : Tips & Trik mempromosikan Blog

Tips cara membuat readmore karya O-om.com

Banyaknya permintaan mengenai cara buat readmore membuat saya tetap mengharuskan artikel ini ditulis. walaupun tutorial cara buat readmore sudah banyak ditulis oleh rekan blogger, sayangnya penjelasan yang diberikan kadang tidak mudah dimengerti dan malah membuat bingung, untuk itu tidak ada salahnya saya juga menulis artikel ini sebagai pelengkap agar mempermudah blogger baru bisa lebih mengerti cara membuat readmore serta cara penggunanan kode readmore pada posting.

Mungkin rekan blogger yang baru mulai membuat blog masih bingung apa itu readmore?

Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan halaman posting biasanya ditandai dengan "Read More", "Next", "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya" atau apalah namanya Readmore biasanya digunakan untuk menandai bahwa kalimat pada posting masih mempunyai kelanjutan, dan juga berguna mempersingkat halaman posting yang panjang. Pengen tau cara buatnya?

Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:
Klik menu tata letak lalu klik Edit HTML - Berikan tanda centang pada "Expand widget template"

Langkah Kedua:
Jangan Lupa backup dulu template blog anda dengan mengklik "download template lengkap"

Langkah Ketiga:
Cari kode dibawah ini:

 <div class='post-header-line-1'/> < div class='post-body'>

Tips : Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start - > Proggram - >  Accessories - > Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit - > Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual  lainnya)

Cara lainnya lebih mudah yaitu pada waktu Edit Html kita cukup menekan Ctrl+F.maka dibawah akan tampak menu find lalu kita paste kode ini <div class='post-header-line-1'/> tapi jangan lupa beri tanda centang dulu pada "Expand widget template". setelah kode tersebut kita temukan kita paste kode  yang  saya  beri warna merah dibawah ini tepat dibawah kode <div class='post-header-line-1'/> yg kita cari tersebut.

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

Kemudian dibawah kode yang saya warnai merah diatas kita akan menemukan kode:

<p><data:post.body/></p>

Lakukan Copy-Paste kode dibawah ini tepat dibawah code diatas tersebut.

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>

Tips: Kode Readmore diatas bisa kita ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya setelah kita lakukan copy paste dengan benar jika dilihat akan tampak sebagai berikut:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore »»</a>
</b:if>
<div style='clear: both;'/>

Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)

Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa disimpan.

Langkah Empat
Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan >> Format >> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini

<div class="fullpost">
</div>

Jangan lupa disimpan :)

Langkah Kelima :
Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:

<div class="fullpost">
</div>

ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan kita gunakan dalam pemenggalan posting nantinya.

Sebagai contoh lihat cuplikan kalimat dibawah ini :

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). (Dinsini rencana text yang akan dipenggal) Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.

Bagaimana cara pemenggalan kode diatas? caranya tinggal anda lihat 2 kode pemenggalan kalimat dibawah

ini. sebagian postingan yang akan kita tampilkan, kita masukan sebelum kode <div class="fullpost"> dan sisa  postingan kita, kita  masukan  setelah kode tersebut

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). <div class="fullpost"> Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.</div>

Jadi hasil posting pada halaman browser akan tampai sebagai berikut:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Readmore »»

Selamat mencoba, Salam Blogger mania

Read More : Tips cara membuat readmore karya O-om.com