Perintah CSS (2)

Sebelumnya kami sudah menjelaskan sedikit tentang beberapa perintah CSS. Baiklah sekarang kita akan membahas beberapa perintah CSS yang lain.

Membuat format CSS sendiri
Anda bisa membuat sebuah format CSS yang nantinya tinggal di hubungkan dengan bentuk yang akan ditampilkan. Misalnya Format Sidebar kiri dan Isi / Main. .


Bentukya sebagai berikut :

#main {
margin:0 0 0 10px;
width:410px;
float:right;
padding:0 8px 10px 8px;
border:1px solid #999;
}
#sidebar-left {
background:#66CCFF;
margin:0;
width:150px;
float:left;
padding:0 5px 100px 5px;
font:#663333;
font-size:85%;
border:1px solid #000;
}

Beberapa penjelasan perintah diatas:
Margin = batas dari main / Sidebar
Width = lebar dari area sidebar atau main
Float = Letak dari pada Sidebar dan Main bisa di Left atau right
Background = format warna atau gambar dari background
Font = format warna tulisan
Font-size = Ukuran tulisan
Padding = Ketebalan sisi area dengan textnya
Border = garis yang ada di sekeliling text

Kemudian untuk menghubungkan perintah CSS ke bentuk yang di inginkan sebagai berikut :

<!-- Begin #sidebar -->
<div id="sidebar-left"><div id="sidebar2">

Isi Sidebar / sisi

</div></div>
<!-- End #sidebar -->


<!-- Begin #main -->
<div id="main"><div id="main2">

Isi dari pada Postingan / main

</div></div>
<!-- End #main -->


Ketrangan :
<div id="sidebar-left"> adalah untuk mengambil format yang dibentuk oleh side bar kiri
<div id="main"> adalah untuk mengambil format yang dibentuk oleh main / postingan

Bila anda ingin mempelajari perintah HTML untuk memformat peritah-perintah CSS, saya rekomendasikan anda ke situs ini http://www.htmldog.com

Aturan isi blog Adsense

Pemasang iklan hanya diperbolehkan untuk memasang iklan AdSense pada situs atau blog yang mengikuti aturan Google, selain itu iklan tidak boleh dipasang pada halaman dimana isi utamanya menggunakan bahasa yg tidak didukung oleh Google AdSense (termasuk Indonesia).

Ad unit AdSense tidak boleh dipasang pada situs yg mengandung:

1. Kekerasan, rasis, atau saran untuk melawan/membenci orang lain, grup, maupun organisasi.
2. Pornografi dan hal2 yg bersifat dewasa.
3. Hacking/cracking.
4. Obat2an terlarang.
5. Kata2 kotor yg berlebihan.
6. Judi dan kasino.
7. Ajakan atau tawaran komisi/kompensasi kepada pengunjung untuk mengklik iklan atau tawaran, melakukan search, membrowsing situs (autosurf, paid-to-surf, dll), maupun membaca email (paid-to-read email).
8. Penggunaan kata kunci yg berulang, berlebihan, maupun tidak relevan dengan situs, baik pada content maupun kode halaman (HTML).
9. Menipu atau memanipulasi isi halaman untuk meningkatkan ranking mesin pencari dari situs yg bersangkutan.
10. Menjual atau menawarkan senjata maupun amunisinya.
11. Menjual atau menawarkan bir atau minuman dengan kadar alkohol tinggi.
12. Menjual atau menawarkan rokok atau produk2 yg berhubungan dng rokok.
13. Menjual atau menawarkan obat2an terlarang.
14. Menjual atau menawarkan replikasi atau imitasi dari suatu produk.
15. Menjual atau menawarkan tugas kuliah, skripsi, dan sejenisnya.
16. Berisi atau mempromosikan hal2 yg bersifat ilegal / melanggar hukum.

Adsense yang muncul PSA

Pada saat mendaftar di google adsense kita harus menggunakan posting bahasa inggris, karena kalau tidak maka yang keluar adalah PSA (Public Servis Adsense) atau yang disebut iklan layanan Masyarakat. Ada beberapa hal yang menyebabkan iklan adsense berubah menjadi PSA, antara lain berikut :

1. Posting menggunakan bahasa yang belum mendukung iklan adsense, salah satunya bahasa indonesia.
2. Setelah pendaftaran di approve / disetujui, google belum dapat membaca tentang topik dari blog kita. Untuk hal ini tunggu saja beberapa saat setelah anda melakukan verifikasi dari email anda.
3. Mungkin dalam posting anda tersaring kata-kata yang tidak diperbolehkan oleh google seperti kata-kata yang berbau kekerasan, pornografi dan lain-lain lihat peraturan isi situs dari google.

Langkah-langkah yang dapat lakukan sebagai berikut :

1. Buat blog dan lakukan posting menggunakan bahasa inggris, dan lakukan pendaftaran sampai anda di approve / disetujui. Setelah disetujui masuk ke login adsense dan copy kode adsense dan paste-kan di blog kita.
   
2. Bila anda ingin membuat blog baru, silahkan buat menggunakan bahasa indonesia.
3. Copy dan paste-kan kode adsense ke blog bahasa indonesia tersebut.
4. Dan bisa dipastikan yang keluar adalah PSA, karena blog kita dalam bahasa indonesia. Nah, supaya adsense tetap muncul anda bisa menggunakan yang disebut Collapsing ad units, klik disini. Klik mouse kanan pada tulisan google_adsense_script.html dan save target as, kemudian simpan dulu di folder komputer anda.
5. File google_adsense_script.html anda upload ke server domain anda.
   
6. Kemudian ubah script yang ada di adsense menjadi seperti ini

:

Demikian penjelasan dari saya dan selamat mencoba....!

Tentang blog adsense

O ya sebelumnya saya sudah membahas mengenai apa itu adsense secara global. Bagi yang belum kenal sebaiknya baca ini dulu baru membahas berikut ini. Masalahnya ini sudah merupakan lanjutan dari sebelumnya.

Nah ada beberapa hal tentang adsense yaitu :

1. Sebelum membuat blog, sebaiknya mengambil suatu niche / topik tertentu misalnya anda buat blog tentang lowongan kerja, informasi travel, informasi software, info berita terhangat dan sebaginya. Tujuannya adalah supaya anda terfokus pada topik tertentu sehingga pengunjung yang datang akan balik lagi ke blog kita.
2. Untuk pertama kali sebaiknya menggunakan bahasa inggris, karena untuk mendaftar adsense, google belum menerima bahasa indonesia, tapi setelah diterima nanti anda boleh posting dalam bahasa Indonesia.
3. Setelah anda diapprove / disetujui maka rajin-rajinlah meng update blog anda, supaya pengunjung tertarik dengan blog anda dan akan kembali lagi serta akan menaikkan ranking di situs google sehingga akan terindex dengan mesin pencari tersebut.
4. Setelah jumlah adsense mencapai $ 100 maka akan dikirim melalui cek, jadi waktu mendaftar pastikan anda mengisi alamat dengan benar, kemudian cek dapat dicairkan melalui bank-bank di daerah anda dan akan dikenakan charge / biaya tambahan.
5. Jangan melakukan klik sendiri terhadap iklan di blog kita, karena ini melanggar Peraturan Adsense. Google mempunyai kemampuan yang canggih untuk mendeteksinya. Sudah banyak blog yang di banned / di hapus karena hal ini, dan dollar yang sudah terkumpul akan hangus semuanya.
6. Semua keberhasilan membutuhkan usaha yang keras dan maksimal, jadi jangan dikira dalam waktu singkat anda akan langsung menikmati hasilnya. Teruslah membuat suatu posting dan jangan berputus asa. Anggap aja ini merupakan tantangan dan berkreasi untuk berbagi ilmu terhadap sesama.

Demikian dulu penjelasan dari saya dan nantikan, tips dan trik tentang google adsense berikutnya. Bila ada pertanyaan isi comments dibawah.

Adsense bagi pemula

Bagi dunia internet marketing, adsense memang tidak asing lagi. Bahwa adsense merupakan bisnis internet yang lagi marak akhir-akhir ini. Baik situs atau blog pribadi sekalipun banyak yang memasang adsense. Memang bisnis periklanan ini sangat menjanjikan baik bagi para pemula maupun situs yang sudah top sekalipun. Apa sih adsense ini, dan bagaimana cara kerjanya ?

Ini adalah tutorial bagi pemula yang baru mengenal adsense, untuk yang sudah master adsense, silahkan lewati aja ya. Adsense adalah bisnis yang di keluarkan oleh google.com untuk memasangkan iklan di blog kita. Maksudnya begini, Google menerima iklan dari para pemasang iklan, yang mana pemasang iklan akan membayar kepada google.com. Kemudian untuk menyebarluaskan iklan tersebut, google melakukan expansi dengan menempelkan iklan tersebut di situs atau blog lain. Nah iklan yang dipasang di blog kita tersebut yang dinamakan adsense. Sebagai imbalannya google akan membayar kepada kita, dengan ketentuan yang telah di berikan. Jumlah pembayaran tergantung dari jenis iklan yang ada pada ketentuan dari pihak google tersebut.Nah, kalau ingin bergabung dengan bisnis adsense ini, caranya sangat mudah, yaitu :

Apakah bisnis ini murni? Ya jawabanya jelas murni. Kita tahu bahwa google merupakan perusahaan raksasa dalam bidang search engine / mesin pencari yang paling populer saat ini, bahkan yahoo.com yang dulunya merajai, sekarang harus mengakui keandalan dan keampuhan googling ini. Jadi kenapa kita mesti ragu terhadap perusahaan yang memang terkenal itu.

1. Harus punya account / email di google yang disebut gmail, yang belum punya silahkan daftar di gmail.com
2. Punya web site / blog yang support dengan bahasa javascript untuk menampilkan iklan yang di berikan oleh google. Dalam hal ini saya sarankan menggunakan blogger.com, karena sudah menggunakan bahasa Indonesia dan blog milik google ini support dengan Javascript. Lalu supaya diterima buat posting minimal 4 buah dalam bahasa inggris. Setelah diterima anda dapat posting dalam bahasa Indonesia.
   
3. Mendaftar di google adsense,klik gambar gambar disamping kiri
   
4. Tunggu approve / balasan dari google dan paling lama 2 hari, ada juga yang langsung diterima hari itu juga.
5. Setelah di approve, maka masuk ke google.com/adsense, ambil kode yang diberikan untuk memasang iklan dari google dan tampilkan di blog atau situs kita.

Untuk tips dan trik adsense, nantikan tutorial berikutnya, pokoknya sering-sering aja berkunjung di blog ini ya.

Mengenal perintah CSS (1)

CSS kepanjangannya adalah Cascading Style Sheet, yaitu perintah untuk memformat atau membentuk berbagai macam variasi baik text maupun variasi lain dengan melepaskan perintah HTML yang begitu banyak dan diulang-ulang. Jadi dengan CSS ini satu perintah sudah bisa mewakili perintah-perintah lainnya. Saat ini perintah CSS sudah mendominasi dalam pembuatan blog maupun layout blogger. Kalau anda lihat source kode blogger layout, rata-rata menggunakan perintah CSS.

Perintah CSS ada 2 yaitu perintah external dan internal. CSS eksternal ditulis menggunakan text editor biasa seperti halnya HTML dan disimpan dalam file tersendiri yang ber ekstensi CSS, misalnya SATU.CSS, sedangkan CSS internal perintahnya bergabung dengan source kode yang kita buat langsung dengan perintah HTML, jadi CSS internal ini kita cukup punya satu file.

CSS internal
Perintah ini diletakkan diantara perintah <head> dan </head> kemudian perintah tersebut diawali dengan <style type="text/css"> dan diakhiri dengan </style>

Kemudian masing-masing perintahnya mempunyai bentuk sebagai berikut :
nama perintah {

format perintah
}

Lihat contoh dibawah ini

<head> <style type="text/css"> a:link { color:#0033ff; text-decoration:bold } </style> </head>

Coba kita perhatikan perintah a:link { , ini adalah nama perintah untuk text yang mempunyai link ke halaman lain. Dan mempunyai 2 jenis format perintah yaitu warna color:#0033ff; dan format text tebal text-decoration:bold .

Masih banyak perintah CSS yang lain yang dapat anda gunakan, misalnya :
a:visited adalah untuk text link yang pernah dikunjungi
a:hover adalah text link bila mouse diarahkan kesana
body adalah untuk memformat halaman utama

Variabel data dari blogger

Dalam membuat Layout kita harus memahami bahwa yang kita desain adalah tampilan atau kulinya saja, makanya layout disebut juga skin. Artinya data yang diiput baik berupa posting, judul atau koementar-komentar harus tetap disediakan. Untuk menghubungkan antara data yang diinput tersebut supaya tampil diblog, maka diperlukan media penampung yang disebut database.

Kelompok-kelompok media penampung data itulah yang disebut variabel. Variabel ditandai dengan lambang <$nama variabel$> dan variabel tidak boleh ada spasi, misalnya <$BlogURL$>, <$BlogDescription$>, <$BlogDateHeaderDate$> dan sebagainya. Jadi varibel tersebut tidak boleh dihapus.

Berikut contoh Variabel dan pembagian kategorinya

1. Bagian Header
   <h1 id="blog-title">
   <itempage><a href="">"></itempage>
   <$BlogTitle$>
   <itempage></a></itempage>
   </h1>
   <p id="description"><$BlogDescription$></p>
   </div>
   
   
2. Bagian Side bar / sisi
   
   <!-- Begin #profile-container -->
   
   <$BlogMemberProfile$>
   
   <!-- End #profile -->
   
   <MainOrArchivePage>
   <h2 class="sidebar-title"><$I18NLinks$></h2>
   <ul>
   <li><a href="http://news.google.com/">Google News</a></li>
   <li><a href="http://help.blogger.com">Edit-Me</a></li>
   <li><a href="http://help.blogger.com>Edit-Me</a></li>
   </ul>
   </MainOrArchivePage>
   
   
3. Bagian Main / isi
   Untuk bagian ini tidak semua dapat kami tulis, karena Kode HTMLnya terlalu banyak, jadi saya ambil seagian saja, contohnya dibawah ini
   
   <div class="post"><a name="<$BlogItemNumber$>"></a>
   <BlogItemTitle>
   <h3 class="post-title">
   <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
   <$BlogItemTitle$>
   <BlogItemUrl></a></BlogItemUrl>
   </h3>
   </BlogItemTitle>
   
   <div class="post-body">
   <div>
   <$BlogItemBody>
   amp;gt;
   amp;gt;
   amp;gt;
   amp;gt;
   amp;gt;
   </div>

Dan masih banyak lagi variabel yang digunakan dalam blogger tersebut. Kalau anda lihat source kode sebuah blogger baik milik anda maupun milik rekan blogger, biasanya sudah anda penegelompokan apakah itu bagian header, bagian sidebar, bagian main, maupun bagian footer. Kemudian ada satu perintah <Div> dan </Div> . Ini adalah perintah untuk mengambil perintah CSS yang sudah disiapkan, kita akan pelajari lebih lanjut di postingan lainnya.

Kemudian ada satu perintah lagi yaitu <!-- Begin #profile-container --> , perintah ini adalah supaya antara <!-- dan --> tidak tampil di blog anda.

Membuat read more blogger

Kalau di wordpress, untuk membuat postngan terpotong sudah ada fasilitasnya, yaitu tinggal letakkan kursor pada text yang akan dipotong dan klik Split post with more tag , tapi di blogger fasilitas untuk memotong text tersebut tidak ada.

Jadi kita harus menambah sendiri di kode HTML nya. Berikut adalah cara membuat read more di blogger khusus untuk template klasik blogger.

• Pastikan anda sudah login ke blogger, anda
• Lalu pilih Layout dan pilih edit HTML
• Kemudian cari kode berikut } ]]> anda bisa mencarinya dengan menekan Ctrl F dan masukkan kode diatas.
• Setelah ketemu, lalu letakkan kode berikut setelah kode diatas.
  <style>
  <b:if cond="'data:blog.pageType">
  span.fullpost {display:inline;}
  <b:else/7gt;
  span.fullpost {display:none;}
  </b:if>
  </style>
• Setelah itu cari kode seperti ini <p><data:post.body></data:post.body></p>
  Lalu tambahkan kode dibawah ini
  <b:if cond="data:blog.pageType != "item"">
  < href="data:post.url"> Read More...</a>
  </b:if>
• Lalu pada saat posting berikan perintah <span class="fullpost"> dimana kamu ingin tulisan read more muncul. Kemudian text paling akhir kamu tambahkan dengan </span>. Ingat untuk menambahkan kode ini harus berada pada Edit HTML.
  Selamat mencoba
  

Mengenal layout blogger

Baiklah untuk kali ini, kita akan mengenal bagaimana memulai membuat layout atau template blogger. Secara umum layout untuk blogger dapat dibagi 3 bagian utama, yaitu :

1. Bagian atas (Header), berisi Title blog dan description blog
2. Bagian Isi (main) , berisi tanggal posting, judul posting, isi posting dan komentar
3. Bagina sisi (sidebar), berisi profil, Link, Pengelompokan postingan, tampilan shoutbox dan lain-lain
4. Bagian bawah (Footer), berisi text seperti Desain by, link, powered by dan lain sebagainya.

Dalam pembahasan ini, saya menggunakan perintah dasar HTML, memang sekarang sudah ada perintah yang lebih praktis yaitu XML. Tapi perintah dasar HTML ini juga sangat perlu diketahui sebelum melangkah ke perintah yang lebih tinggi tersebut. Jadi saya anggap anda sudah mengetahui perintah HTML. Jika belum anda bisa pelajari dulu disini.

Dalam membuat layout blogger, ada 2 jenis pilihan background, yaitu :

1. Background berupa kotak, contohnya dibawah ini.
   
   
   
2. Background berupa desain bebas, contohnya dibawah ini.
   

Perbedaan dari kedua bentuk diatas yaitu, untuk bentuk kotak, kita tidak memerlukan program desain lainnya, cukup gunakan perintah HTML dan dan digabung dengan perintah CSS (Cascading style sheets), yaitu perintah untuk memformat perintah dengan cepat. Untuk background desain bebas, kita perlu membuat terlebih dahulu di program desain lain, misalnya photoshop, setelah itu di transfer ke program editor dan tambahkan variabel dari blogger.

Ini artikel awal untuk membuat layout, nantikan artikel berikutnya.

Variasi text berjalan

Ada beberapa variasi text berjalan yang dapat anda gunakan untuk mempercantik blog anda, diantaranya adalah :

1. Text berjalan dari kanan ke kiri. Perintahnya <marquee>SELAMAT DATANG</marquee> maka hasilnyaSELAMAT DATANG
2. Text berjalan bolak balik kekiri dan kekanan. Perintahnya <marquee behavior="alternate">SELAMAT DATANG</marquee>maka hasilnyaSELAMAT DATANG




3. Text berjalan dari bawah ke atas. Perintahnya <marquee direction="up">SELAMAT DATANG</marquee>maka hasilnyaSELAMAT DATANG
4. Text berjalan vertikal bolak-balik. Perintahnya <marquee direction="down" behavior="alternate">SELAMAT DATANG</marquee>maka hasilnyaSELAMAT DATANG
5. Text bergerak dari bawah ke atas dan jika di klik akan lambat. Perintahnya <marquee onmouseover="this.scrollAmount=1"; onmouseout="this.scrollAmount=5;" direction="up"> maka hasilnya

   SELAMAT DATANG

   Untuk mengatur kecepatan waktu tambahkan perintah scrolldelay=10 sebelum > , misalnya <marquee direction="down" scrolldelay=10> Angka 10 dapat anda ganti dengan angka yang lain.
   

Gambar Animasi mouse

Ini yang mau animasi mouse kayak yang disitus ini, jadi kalau anda menggerakkan mouse, maka gambar kupu-kupu ikut bergerak. Langkahnya anda harus persiapkan gambar animasi yang memang bergerak. Biasanya gambar tersebut berekstensi Gif. Kalau gak ada anda bisa ambil di mynicespace.cm

Kemudian gambar animasi tersebut anda upload ke situs penyedia gambar gratis, misal photobucket, tentunya anda harus buat account disana. Lalu anda copykan kode berikut ini di kode blogger anda dan letakkan sebelum </HTML>.

<script type="text/javascript"> /* Image qui suit et regarde la souris http://www.editeurjavascript.com/scripts/scripts_images_1_66.php SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT http://www.editeurjavascript.com */ var x = 0; var y = 0; if (document.getElementById) { if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE); document.onmousemove = Pos_Souris; window.onload = Bouge_Image; } function Pos_Souris(e) { x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; } posX = 0; posY = 0; anim = true; oldpos = "http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif"; function Bouge_Image() { if (document.getElementById && anim) { posX = posX+(((x-posX)+20)/15); posY = posY+(((y-posY)+20)/15); if(posX<x) newpos='http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif'; else newpos='http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif'; if(newpos!=oldpos) { document.tete.src=newpos; oldpos=newpos; } document.getElementById("teteronde").style.top = posY+"px"; document.getElementById("teteronde").style.left = posX+"px"; tempo = setTimeout("Bouge_Image()", 15) } } if(document.getElementById) { document.write('<div id="teteronde" style="position: absolute">'); document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">'); document.write('<img src="http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />'); document.write('</a>'); document.write('</div>'); } </script> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-1479700-7"; urchinTracker(); </script>

Keterangan : Text yang berwarna merah, silahkan anda ganti dengan alamat gambar animasi yang sudah anda upload di photobucket. "Selamat mencoba".

Posting gambar tidak link

Biasanya kalau kita upload gambar di blogger, maka secara standar gambar akan menjadi sebuah link membentuk halaman baru jika kita klik gambar tersebut. Nah berikut adalah cara supaya gambar yang sudah kita upload tidak menjadi sebuah link. Caranya setelah anda upload gambar tersebut maka tampilkan dalam bentuk Edit Html, maka akan nampak kode-kode Html dari gambar tersebut.

Contohnya dibawah ini :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_gCOemDnAUvg/ RtzWyPsmI7I/AAAAAAAAANU/ XoEjUNdjQMw/s1600-h/back2.gif"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_gCOemDnAUvg/ RtzWyPsmI7I/AAAAAAAAANU/ XoEjUNdjQMw/s320/back2.gif" alt="" id="BLOGGER_PHOTO_ID_5106192236226683826" border="0" />

Caranya text yang berwarna biru cukup anda hapus dan simpan. Dan jika mouse diarahkan ke gambar maka akan berubah menjadi gambar tangan, untuk menghilangkannya silahkan hapus text yang berwarna hijau. Mudah bukan...!!! selamat mencoba.