Google Adsense

Seiring dengan banyaknya pertanyaan seputar google adsense, mulai dari cara daftar, cara pemasangan kode dan lain sebagainya, maka mulai saat ini akan ikut memberikan informasi seputar google adsense.



Apa itu Google Adsense ?



Google adsense adalah salah satu program yang di miliki oleh Google dalam hal periklanan (advertising). Siapakah yang terlibat dalam Google adsense ini? ada tiga unsur yang terlibat, yaitu :

Google, merupakan pihak yang menerima iklan.

Advertiser, adalah pihak pemasang iklan.

Publisher, adalah pihak yang menampilkan iklan.

Yang akan saya bicarakan kali ini adalah kita sebagai pemilik blog menjadi seorang publisher atau dengan kata lain pihak yang menampilkan iklan dari google. Apa yang kita dapat dengan menjadi publisher dariGoogle adsense? yang akan kita dapatkan adalah komisi yang berupa uang dollar dari google.



Bagaimana sistem kerjanya?



Sistem kerjanya tidaklah sulit, kita hanya memasang kode-kode iklan yang di berikan oleh google pada blog milik kita.



Jenis produk dari Google adsense :

Adsense For Content

, produk ini berupa iklan dalam bentuk teks ataupun gambar. Kita sebagai publisher akan mendapatkan komisi apabila ada pengunjung dari blog kita yang meng Klik iklan tersebut, semakin banyak pengunjung yang meng Klik maka semakin besar pula komisi yang kita dapatkan. Untuk melihat contoh nyata dari iklan adsense for content, sobat bisa melihatnya pada blog milik saya yang lain, coba klik di sini ! atau di sini !
di sana sobat bisa melihat iklan berupa gambar (banner) ataupun berupa Link yang terdapat nama situsnya pada bagian bawah link tersebut.

Adsense For Search

, produk ini berupa Search Engine dari google, sobat bisa melihat contohnya pada bagian sebelah kanan atas blog ini. Untuk yang ini, kita akan mendapatkan komisi apabila ada pengunjung yang akan mencari sesuatu di web dan menggunakan Search Engine tersebut dan meng klik link situs yang ada.

Adsense For Referral

, untuk produk yang ini kita tidak akan di bayar apabila ada pengunjung yang mengklik iklan tersebut, akan tetapi kita akan mendapatkan komisi apabila ada orang yang menggunakan atau bergabung pada produk tersebut, contoh untuk download browser Fire Fox (bannernya nya ada di sebelah kanan atas blog ini), kita akan mendapatkan komisi apabila ada pengunjung yang mendownload serta memakainya di komputer mereka. Untuk Referral yang gabung Google adsense, kita akan di bayar sebesar $100 apabila orang yang bergabung tersebut mendapatkan $100 yang pertama dari google.



Berapakah uang yang akan kita dapat dari Google ?



Untuk besarnya uang yang akan kita dapat jumlahnya tidak di batasi, akan tetapi tentunya kembali lagi kepada faktor pengunjung blog kita, semakin banyak pengunjung maka semakin banyak pula kemungkinan orang akan mengklik iklan kita. jadi langkah pertama yang harus di tempuh adalah promosi dan promosikan blog milik sobat agar di kenal dan di kunjungi banyak orang. Sudah banyak publisher dari indonesia yang mendapatkan ratusan atau ribuan dollar setiap bulannya.



Kapan kita di bayar oleh Google ?



Kita akan di bayar oleh Google apabila pendapatan kita sudah mencapai minimal $100 setiap bulan nya, dan pembayarannya akan di lakukan setelah 30 hari setelah kita melewati pendapatan minimal $100 tersebut, jadi apabila bulan september ini sobat mendapatkan minimal $100 maka komisi ini akan di bayarkan pada akhir bulan oktober nanti.



Dalam bentuk apa kita di bayar ?



Seperti yang saya sebutkan di atas, kita akan di bayar oleh uang $ (dollar). Akan tetapi bukan berupa uang cash tapi dalam bentuk cek. Apabila sobat sudah mendapatkan $100, maka cek tersebut akan di antarkan ke kita. untuk cara pengirimannya ada dua yaitu melalui jasa pos dan menggunakan DHL (jasa pengiriman cepat). Apabila sobat memilih yang jasa pos, sobat tidak akan di kenakan biaya apapun oleh google akan tetapi cek akan sampai ke kita memerlukan waktu yang cukup lama yaitu sekitar tiga minggu sampai satu bulan. Apabila cek tersebut ingin cepat sampai di tangan kita, sobat bisa memilih yang melalui DHL, dengan menggunakan DHL cek akan sampai dalam waktu 2-3 hari, akan tetapi untuk yang DHL ini di kenakan biaya sebesar $24 dan akan di potong dari pendapatan kita.



Siapakah yang boleh mengikuti Google Adsense ?



Siapa saja boleh ikut dan yang menarik adalah daftarnya Gratis, akan tetapi ada syarat-syarat yang harus di penuhi di antaranya yaitu website atau blog yang ikut program ini harus berbahasa utama yang di support oleh Google yaitu bahasa inggris serta bahasa-bahasa eropa lainnya, untuk yang bahasa indonesia belum termasuk bahasa yang di support. Trus bagaimana kalo blog bahasa indonesia ingin bergabung? sebenarnya bisa saja di coba dan sudah banyak yang berhasil di terima oleh google, akan tetapi iklan yang bisa di tampilkan hanyalah produk adsense for search serta adsense for referral.Untuk adsense for content tidak akan muncul iklannya walau kode iklannya sudah kita pasang.



Apa yang di larang dalam google adsense ?



Apabila kita mengikuti program google adsense ada beberapa aturan yang tidak boleh di langgar diantaranya adalah kita tidak boleh meng Klik iklan sendiri ataupun menyuruh teman serta orang lain untuk mengkliknya (harus alami dhenk).
darimana google mengetahui apabila kita yang mengklik iklan tersebut? tentunya google tidaklah bodoh, dia bisa melacak IP address serta faktor-faktor yang tidak kita pikirkan, jadi jangan coba-coba untuk berbuat curang karena akibatnya kita akan di keluarkan oleh google (mengerikan). Untuk membaca aturan-aturan penting lainnya sobat bisa membacanya langsung di sini !



Artikel pertama tentang google adsense, saya cukupkan sekian dulu. Untuk cara daftar dan lain sebagainya tunggu saja pada artikel berikutnya.



PS : yang mau daftar google adsense, silahkan klik pada banner di sebelah kanan atas blog ini.

uniQue template R 1.1

Setelah sekian lama saya tidak membuat template, akhirnya kemarin saya iseng-iseng membuat template lagi dan lumayan sudah ada satu yang jadi. Template ini saya berinama uniQue template R 1.1, namanya sekarang rada keren dikit di banding dengan template-template terdahulu. Sebelumnya saya ucapkan terima kasih kepada terune sasaq yang telah mengganti nama Template unik menjadi uniQue template. Setelah saya lihat-lihat ternyata boleh juga tuh idenya, thanks ya terune. Untuk melihat demo dari template ini, silahkan sobat klik pada gambar di bawah ini :

Menurut pengamatan saya pribadi, template ini lebih bagus dari template-template yang pernah saya buat. Disamping itu ada keunikan lainnya yaitu sidebar yang saya buat mempunyai lebih dari satu style, ada sidebar ukuran lebar serta sidebar ukuran sempit, yang ukuran lebarpun saya bagi dua kembali yaitu di tempatkan di bagian atas dan yang satunya saya tempatkan di bagian bawah. Template ini saya rasa sangat cocok bagi sobat yang ikutan program adsense karena tentu bisa memilih iklan yang lebar atau iklan yang sempit, kedua-duanya saya sediakan tempatnya. Selain itu, dalam pewarnaan tampaknya lebih cool alias kalem, sangat cocok bagi sobat yang tidak suka akan warna nge-jreng ( udah ah, ko jadi narsis ya ).




Satu permintaan dari saya yaitu sobat jangan menghilangkan link yang ke template unik, karena saya banyak menjumpai para pemakai template buatanku menghapus semua link yang ada, jadi saya kira orang tersebut tidak mempunyai rasa terima kasih
ataupun wujud apresisi terhadap jerih payah orang lain. untuk menu navigasi yang ada di header, yang itu silahkan sobat ubah, karena menu tersebut sengaja saya buatkan untuk sobat, jadi tidak ada masalah kalau yang ada di header ( weleh ko jadi marah-marah begini ).




Agar marah-marahnya tidak berlanjut, bagi yang berminat silahkan download dulu tapi ingat ya sebelum di upload ke blogger, templatenya ekstrak dulu memakai Winzip. Silahkan klik di sini !




Selamat mencoba template baruku !

Tips menambah kolom pada template baru

Karena banyaknya pertanyaan seputar bagaimana cara menambah kolom pada blog, akhirnya saya meluangkan waktu untuk menulis artikel ini. Sebenarnya untuk menambah sebuah kolom baru bukanlah sebuah hal yang terlalu sulit, akan tetapi tetap saja perlu sedikit pengetahuan untuk melakukannya.

Pada kesempatan kali ini saya tidak akan menerangkan bagaimana cara membuat kolom dengan bantuan gambar, akan tetapi seperti biasa saya akan menggunakan template Minima yang merupakan template resmi yang di sediakan blogger yang notabene tidak menggunakan gambar.

Jika mengacu kepada standarisasi dari template blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :

Elemen Header

Elemen Outer

Elemen Footer


Untuk elemen Outer di bagi kembali menjadi :

Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.


Akibat ketidak puasan dari sidebar yang hanya satu buah, maka jika kita menginginkan adanya sidebar tambahan maka kita tentu saja harus menambahnya sendiri, agar sedikit jelas maka akan saya perlihatkan kode template asli dari template minima (template baru/XML)

  

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  &lt;html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;

<head>

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

<title><data:blog.pageTitle/></title>

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

-----------------------------------------------

Blogger Template Style

Name: Minima

Designer: Douglas Bowman

URL: www.stopdesign.com

Date: 26 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */
/* Variable definitions

  ====================

<Variable name="bgcolor" description="Page Background Color"

  type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"

  type="color" default="#333" value="#333333">

<Variable name="linkcolor" description="Link Color"

  type="color" default="#58a" value="#5588aa">

<Variable name="pagetitlecolor" description="Blog Title Color"

  type="color" default="#666" value="#666666">

<Variable name="descriptioncolor" description="Blog Description Color"

  type="color" default="#999" value="#999999">

<Variable name="titlecolor" description="Post Title Color"

  type="color" default="#c60" value="#cc6600">

<Variable name="bordercolor" description="Border Color"

  type="color" default="#ccc" value="#cccccc">

<Variable name="sidebarcolor" description="Sidebar Title Color"

  type="color" default="#999" value="#999999">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

  type="color" default="#666" value="#666666">

<Variable name="visitedlinkcolor" description="Visited Link Color"

  type="color" default="#999" value="#999999">

<Variable name="bodyfont" description="Text Font"

  type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

<Variable name="headerfont" description="Sidebar Title Font"

  type="font"

  default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font"

  type="font"

  default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

<Variable name="descriptionfont" description="Blog Description Font"

  type="font"

  default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

<Variable name="postfooterfont" description="Post Footer Font"

  type="font"

  default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

  */
/* Use this with templates/template-twocol.html */
body {

  background:$bgcolor;

  margin:0;

  color:$textcolor;

  font:x-small Georgia Serif;

  font-size/* */:/**/small;

  font-size: /**/small;

  text-align: center;

  }

  a:link {

  color:$linkcolor;

  text-decoration:none;

  }

  a:visited {

  color:$visitedlinkcolor;

  text-decoration:none;

  }

  a:hover {

  color:$titlecolor;

  text-decoration:underline;

  }

  a img {

  border-width:0;

  }
/* Header

  --------------------------------------- */
#header-wrapper {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  }
#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

  }
#header { 

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center;

  color:$pagetitlecolor;

  }
#header h1 {

  margin:5px 5px 0;

  padding:15px 20px .25em;

  line-height:1.2em;

  text-transform:uppercase;

  letter-spacing:.2em;

  font: $pagetitlefont;

  }
#header a {

  color:$pagetitlecolor;

  text-decoration:none;

  }
#header a:hover {

  color:$pagetitlecolor;

  }
#header .description {

  margin:0 5px 5px;

  padding:0 20px 15px;

  max-width:700px;

  text-transform:uppercase;

  letter-spacing:.2em;

  line-height: 1.4em;

  font: $descriptionfont;

  color: $descriptioncolor;

  }
#header img {

  margin-left: auto;

  margin-right: auto;

  }


/* Outer-Wrapper

  ------------------------------------------ */

  #outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:left;

  font: $bodyfont;

  }
#main-wrapper {

  width: 410px;

  float: left;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

  }
#sidebar-wrapper {

  width: 220px;

  float: right;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

  }


/* Headings

  ------------------------------------------- */
h2 {

  margin:1.5em 0 .75em;

  font:$headerfont;

  line-height: 1.4em;

  text-transform:uppercase;

  letter-spacing:.2em;

  color:$sidebarcolor;

  }


/* Posts

  ------------------------------------------ */

  h2.date-header {

  margin:1.5em 0 .5em;

  }
.post {

  margin:.5em 0 1.5em;

  border-bottom:1px dotted $bordercolor;

  padding-bottom:1.5em;

  }

  .post h3 {

  margin:.25em 0 0;

  padding:0 0 4px;

  font-size:140%;

  font-weight:normal;

  line-height:1.4em;

  color:$titlecolor;

  }
.post h3 a, .post h3 a:visited, .post h3 strong {

  display:block;

  text-decoration:none;

  color:$titlecolor;

  font-weight:normal;

  }
.post h3 strong, .post h3 a:hover {

  color:$textcolor;

  }
.post p {

  margin:0 0 .75em;

  line-height:1.6em;

  }
.post-footer {

  margin: .75em 0;

  color:$sidebarcolor;

  text-transform:uppercase;

  letter-spacing:.1em;

  font: $postfooterfont;

  line-height: 1.4em;

  }
.comment-link {

  margin-left:.6em;

  }

  .post img {

  padding:4px;

  border:1px solid $bordercolor;

  }

  .post blockquote {

  margin:1em 20px;

  }

  .post blockquote p {

  margin:.75em 0;

  }
/* Comments

  -------------------------------------------- */

  #comments h4 {

  margin:1em 0;

  font-weight: bold;

  line-height: 1.4em;

  text-transform:uppercase;

  letter-spacing:.2em;

  color: $sidebarcolor;

  }
#comments-block {

  margin:1em 0 1.5em;

  line-height:1.6em;

  }

  #comments-block .comment-author {

  margin:.5em 0;

  }

  #comments-block .comment-body {

  margin:.25em 0 0;

  }

  #comments-block .comment-footer {

  margin:-.25em 0 2em;

  line-height: 1.4em;

  text-transform:uppercase;

  letter-spacing:.1em;

  }

  #comments-block .comment-body p {

  margin:0 0 .75em;

  }

  .deleted-comment {

  font-style:italic;

  color:gray;

  }
#blog-pager-newer-link {

  float: left;

  }

  

  #blog-pager-older-link {

  float: right;

  }
#blog-pager { 

  text-align: center;

  }
.feed-links {

  clear: both;

  line-height: 2.5em;

  }
/* Sidebar Content

  ------------------------------------------ */

  .sidebar { 

  color: $sidebartextcolor;

  line-height: 1.5em;

  }
.sidebar ul {

  list-style:none;

  margin:0 0 0;

  padding:0 0 0;

  }

  .sidebar li {

  margin:0;

  padding:0 0 .25em 15px;

  text-indent:-15px;

  line-height:1.5em;

  }
.sidebar .widget, .main .widget { 

  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;

  padding:0 0 1.5em;

  }
.main .Blog { 

  border-bottom-width: 0;

  }


/* Profile 

  ------------------------------------------- */

  .profile-img { 

  float: left;

  margin: 0 5px 5px 0;

  padding: 4px;

  border: 1px solid $bordercolor;

  }
.profile-data {

  margin:0;

  text-transform:uppercase;

  letter-spacing:.1em;

  font: $postfooterfont;

  color: $sidebarcolor;

  font-weight: bold;

  line-height: 1.6em;

  }
.profile-datablock { 

  margin:.5em 0 .5em;

  }
.profile-textblock { 

  margin: 0.5em 0;

  line-height: 1.6em;

  }
.profile-link { 

  font: $postfooterfont;

  text-transform: uppercase;

  letter-spacing: .1em;

  }
/* Footer

  -------------------------------------------- */

  #footer {

  width:660px;

  clear:both;

  margin:0 auto;

  padding-top:15px;

  line-height: 1.6em;

  text-transform:uppercase;

  letter-spacing:.1em;

  text-align: center;

  }
/** Page structure tweaks for layout editor wireframe */

  body#layout #header { 

  margin-left: 0px;

  margin-right: 0px;

  }

  ]]></b:skin>

  

</head>
<body>

<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->

<span id='skiplinks' style='display:none;'>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>
<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='3 kolom (Header)' type='Header'/>

</b:section>

</div>

  

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>
<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

</div>
<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

</div>
<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>
</div>

</div> <!-- end outer-wrapper -->
</body>

</html>

  

Dari kode diatas, yang perlu di perhatikan adalah kode di sekitar Outer-Wrapper :


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Seperti saya singgung diatas bahwa Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri.

Sekarang bagaimanakah cara menambahkan kolom baru? Yang pertama harus di pikirkan adalah berapakah lebar kolom baru yang mau kita buat. Ok, biar sejalan saya ambil contoh lebar yang akan di buat adalah sebesar 180 pixel, jadi secara otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga secara kasar lebar outer-wrapper menjadi : 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikt sela, maka kita tambah 10 pixel sehingga nilainya menjadi 840 pixel. Untuk menambah kode sidebar baru, saya beri contoh seperti ini :

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Maka apabila di tambahkan kodenya jadi seperti ini :


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Itu merupakan langkah pertama yang kita lakukan. langkah yang kedua adalah kita harus membuat kode yang di pasang pada bagian body. Sebagai contoh pada template diatas, kode id untuk sidebar adalah seperti ini :

<br /><div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /><b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/><br /><b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/><br /></b:section><br /> </div><br /><br />

Maka kewajiban selanjutnya adalah memasang kode untuk id sidebarbaru yang akan kita buat, kodenya seperti ini :

<br /><div id='sidebarbaru-wrapper'><br /><b:section class='sidebar' id='sidebarbaru' preferred='yes'/><br /></div><br /><br />

Apabila di padukan, simpanlah kode sidebaru di bawah kode sidebar yang asli, kodenya kira-kira seperti ini :

<br /><br /><div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /><b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/><br /><b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/><br /></b:section><br /> </div><br /><br /><br /><div id='sidebarbaru-wrapper'><br /><b:section class='sidebar' id='sidebarbaru' preferred='yes'/><br /></div><br /><br />

Kolom baru yang kita buat sudah tercipta. Agar tampak lebih menarik, maka sebaiknya kita pun mengubah lebar dari header serta footer dengan nilai yang sama untuk Outer-wrapper yaitu sebesar 840 px.


Masih bingung? 

Agar tidak terlalu bingung, saya ajak sobat untuk mempraktekannya langsung. Silahkan sobat buat satu blog baru sebagai percobaan (jangan pada blog yang utama), pilihlah template minima yang biasa. Sudah siapkah sobat? Ok, kita langsung meluncur ke TKP dan saya asumsikan sobat sudah mempunyai satu blog baru sebagai bahan percobaan :

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.

Cari kode seperti di bawah ini :

<br />#header-wrapper {<br /> width:660px;<br /> margin:0 auto 10px;<br /> border:1px solid $bordercolor;<br /> }<br />

ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :

<br />#header-wrapper {<br /> width:840px;<br /> margin:0 auto 10px;<br /> border:1px solid $bordercolor;<br /> }<br />

Cari kode seperti di bawah ini :

<br />#outer-wrapper {<br /> width: 660px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:left;<br /> font: $bodyfont;<br /> }<br /> <br />

ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :

#outer-wrapper {<br /> width: 840px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:left;<br /> font: $bodyfont;<br /> }<br /><br /><br />

cari kode seperti di bawah ini :

#sidebar-wrapper {<br /> width: 220px;<br /> float: right;<br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />}<br />

Copy paste kode berikut persis di bawah kode yang seperti di atas :

#sidebarbaru-wrapper {<br /> width: 180px;<br /> float: right;<br /> psdding-left:10px;<br /> word-wrap: break-word; <br /> overflow: hidden; <br />}<br />

Cari kode seperti di bawah ini :

#footer {<br /> width:660px;<br /> clear:both;<br /> margin:0 auto;<br /> padding-top:15px;<br /> line-height: 1.6em;<br /> text-transform:uppercase;<br /> letter-spacing:.1em;<br /> text-align: center;<br />}<br />

Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :

#footer {<br /> width:840px;<br /> clear:both;<br /> margin:0 auto;<br /> padding-top:15px;<br /> line-height: 1.6em;<br /> text-transform:uppercase;<br /> letter-spacing:.1em;<br /> text-align: center;<br />}<br />

Cari kode seperti di bawah ini :

<br /><div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /><b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/><br /><b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/><br /></b:section><br /> </div><br /><br />

Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :

<br /><div id='sidebarbaru-wrapper'><br /><b:section class='sidebar' id='sidebarbaru' preferred='yes'/><br /></div><br /><br />

Klik tombol Simpan Template

Selesai.

Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.

Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi lain, sobat memerlukan pengetahuan serta kretifitas. Agar sobat yakin dengan apa yang saya terangkan, sobat bisa melihat contoh yang sudah jadi, silahkan klik di sini !

Eh kunjungi juga ya blog baruku, coba klik di sini !

Selamat berexperimen !

Hilangkan Tulisan subcribe to

Menyikapi pertanyaan dari beberapa sobat baik itu melalui email ataupun shoutbox mengenai bagaimana cara menghilangkan tulisan Subcribe to : Post (atom) atau Berlangganan : post (atom) yang berada di bagian bawah setiap postingan artikel yang di rasa sedikit menggangu dan mengurangi kerapihan dari sebuah artikel. Apakah itu bisa di lakukan? jawabnya bisa saja atau mau dipindah ke sidebar pun bisa kalau kita mau.



Untuk menghapus tulisan Subcribe to : post (atom) silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Full Template, trus save dulu untuk backup data


5. Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template, jangan lupa yang ini.


6. Cari kode seperti di bawah ini, kemudian hapus/delete kode tersebut
   
   

   <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> 
   

   
   


7. Klik tombol SIMPAN TEMPLATE


8. Selesai, silahkan lihat hasilnya

Selamat mencoba !

Buat daftar isi blog

Apakah sobat suka membaca buku? jawaban sobat tentunya akan beragam, ada yang akan menjawab suka dan ada juga yang akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi, dengan adanya daftar isi buku maka akan mempermudah pembaca buku tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca. Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk mempermudah para pembacanya, didalam sebuah blog pun kita bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul artikel yang pernah saya posting di bagian footer halaman ini ataupun ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir artikel akan muncul sederet judul-judul artikel lainnya yang menggoda sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan sangat mempermudah para pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan tetapi cara tersebut saya lakukan secara manual yakni saya mencatat seluruh alamat artikel yang telah saya posting kemudian membuatkan link ke artikel tersebut.

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis,
teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :



Langkah pertama :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik link Download full template, silahkan save untuk backup data





5. Copy paste kode CSS berikut di atas kode ]]></b:skin>











<br />#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}<br /><br />.toc-header-col1, .toc-header-col2,<br /><br />.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}<br /><br />.toc-header-col2 { width:75px;}<br /><br />.toc-header-col3 { width:125px;}<br /><br />.toc-header-col1 a:link, .toc-header-col1 a:visited,<br /><br />.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, <br /><br />.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}<br /><br />.toc-header-col1 a:hover, <br /><br />.toc-header-col2 a:hover,<br /><br />.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}<br /><br />.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}<br />







6. Klik tombol SIMPAN TEMPLATE

Langkah kedua :

1. Klik menu Elemen Halaman





2. Klik tulisan Tambah sebuah Elemen Halaman





3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML





4. Copy paste kode berikut ke dalam elemen yang muncul






<br /> <div id="toc"></div><br />






5. Klik tombol Simpan





6. Pindahkan elemen yang baru di buat tepat di atas elemen Post





7. Klik tombol Simpan yang berada di sebelah atas





8. Klik tulisan Tambah sebuah Elemen Halaman kembali





9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML





10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen











<br /><br /><div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a><br/><br/></div><br /><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><br /><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><br />








11. Ganti tulisan YOURBLOG dengan nama blog sobat





12. Klik tombol Simpan





13. Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)





14. Klik tombol SIMPAN yang berada di sebelah atas





15. Selesai

Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :

<br /><br /><div id="toclink"><a href="javascript:showToc();"><img src="http://amen24.googlepages.com/folder.gif"/><br />&nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div><br /><script style="text/javascript" src="http://amen24.googlepages.com/daftarisi.js"><br /></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><br /><br />

Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog sobat.



Selamat mencoba !



Eh... yang mau dapet menu navigasi buat di header yang cantik, kunjungi aja http://css-lybrary.blogspot.com

Kotak Komentar By haloscan

Mohon maaf, postingan ini saya hapus karena banyaknya permasalahan yang timbul dari haloscan