Free tutorial for you

Membuat Halaman Statis Full Width Blogger

Full width satatic page blogger

Apa itu halaman statis? Halaman statis atau static page di blogger merupakan halaman independent/ tersendiri yang dibuat oleh author blog untuk tujuan tertentu. Sebagai contoh static page digunakan oleh para blogger untuk menampilkan profil blognya atau biasa kita kenal About us yang bisa kita tenukan di menu navigasi. Ada juga yang membuatnya untuk menampilkan forum di blog ataupun contact author itu sendiri.

Dalam keadaan default di blogger jika kita membuat static page maka tampilannya akan  seperti halaman postingan biasa. Lalu bagaimana cara merubahnya agar tidak biasa? Saya ambil contoh untuk halaman about us, jika kita menampilkan halaman tersebut tanpa sidebar dan comment tentu lebih baik bukan. Lalu bagaimana cara membuatnya?

Pertama siapkan gula, kopi dan air panas terlebih dahulu. Kemudian buat kopi dan hidangkan bersama pisang goreng... #biar lebih enjoy ngeblognya...hehe. Oke kita mulai saja cara membuat static page blogger tanpa sidebar dan comment.

  • Back up terlebih dahulu template anda untuk berjaga-jaga jika terjadi kesalahan fatal
  • Masuk ke menu edit template
  • Kemudian cari kode  ]]></b:skin> (lebih mudah dengan ctrl+F)
  • Kemudian letakan kode berikut dibawahnya:

<b:if cond='data:blog.pageType'>
<style>
.sidebar,.comments {display:none;}
#main-wrapper{width: 100%}
</style>
</b:if>

  • Kemudian save 


Keterangan: ganti kode #main-wrapper,.sidebar,.comment sesuai nama kode css yang digunakan pada template.

Untuk melihat hasilnya diharuskan sudah memiliki static page di blog. Selamat mencoba....

Scroll Down Effect Pada Template Blogger

Scrool Down Effect Blogger

Pernah berkunjung ke blog hongkiat.com? Kalo belum silahkan mampir sebentar dan lihat ada apa aja disana, ada yang bagi-bagi sembako lho... hehe. Menarik, itu yang saya rasakan ketika berkunjung ke blog tersebut. Blog populer yang membahas seputar design ini memiliki  template yang bagus menurut saya. Salah satunya adalah ketika melakukan scroll down, kemudian melihat menu navigasi blog yang tadinya berwarna biru berganti menjadi menu iframe berwarna hitam.

Saya sebut ini scroll down effect, ketika melakukan scroll down akan berefek terhadap bagian template. Saya membahas ini bukan tanpa alasan, kebetulan saya sedang belajar membuat template blogger untuk customize template di blog ini ataupun template yang akan saya bagikan untuk rekan-rekan blogger lainnya. Mungkin anda ingin mencoba widget yang biasa digunakan pada wordpress dan dan bisa digunakan pada blogger yaitu text widget versi blogger.

Kembali pada bahasan utama, scroll down effect ini sebenarnya hanya menampilkan atau menyembunyikan bagian template. Bagian ini biasa kita panggil dengan fungsi div pada template, fungsi div akan menampilkan style pada CSS yang sudah dibuat. Jadi untuk menampilkan ataupun menyembunyikan bagian template adalah memainkan peran fungsi CSS ini. Untuk melakukannya kita bisa menggunakan kode Javascript berikut:
<script type='text/javascript'>
//<![CDATA[
   $(window).scroll(function() {
    if ($(this).scrollTop()>100px)
     {
        $('fungsi CSS').fadeIn();
     }
    else
     {
      $('fungsi CSS').fadeOut();
     }
 });
//]]>
</script>
Ganti kode berwarna hijau sesuai jarak yang diinginkan dengan acuan awal bagian atas template dalam satuan pixel, kemudian ganti kode berwarna merah  dengan fungsi pemanggilan div (tulis dengan perintah fungsi pada kode CSS). Sebagai contoh: misalkan kita ingin menampilkan menu navigasi dengan kode CSS (.navbar-atas {................isi kode css.......}, maka pada fungsi div kita tulis <div id='navbar-atas'>.........</div>. muntuk penulisan pada Javascripnya adalah kode berwarna merah diganti dengan .navbar-atas.

Maaf jika tutorialnya cukup membingungkan karena saya juga bingung mau menjelaskan detailnya bagaimana jadinya seperti ini. Ya sudahlah silahkan dicoba jika memang ada kesulitan bisa ditanyakan dengan menuliskannya di kolom komentar. Selamat mencoba...









Cara Mudah Di Approve Google Adsense

Google Adsense Approve

Banyak cara untuk menghasilkan uang lewat internet, salah satunya adalah mengikuti program Google Adsense. Google Adsense merupakan program Pay Per Click (PPC) dari raksasa internet Google yang memberikan kesempatan bagi para publishernya mendapatkan uang lewat website/blog.   Dengan memasang script GA di blog maka akan muncul iklan di blog dan jika pengunjung blog melakukan klik pada iklan tersebut maka si publisher  akan mendapatkan uang, semakin banyak klik semakin banyak pula penghasilan yang bisa didapat.

Sudah banyak blogger Indonesia yang mengikutu program ini, ada yang sukses meraup ribuaan dolar adapula yang hanya menghasilakan tak lebih dari 10 dollar perbulannya. Namun bukan hal mudah untuk bisa menjadi publisher Google Adsense, banyak aturan yang harus dipatuhi agar bisa diterima. Saya ingin berbagi bagaimana cara mudah diterima sebagai publisher Google Adsense. Kuncinya adalah di YouTube..., coba anda perhatikan video-video di YouTube sekarang sering muncul iklan Goggle Adsense di video tersebut bukan. 

Awalnya saya penasaran kok bisa iklan GA tampil di Youtube. Ternyata saat ini bukan hanya malalui tulisan-tulisan di blog kita bisa menghasilkan uang tapi juga lewat video yang di unggah di youtube pun bisa. YouTube memberikan kesempatan bagi para pengunggah video untuk bisa menghasilkan uang dari video yang di uploadnya dengan cara monetize video. Cara mendaftar Google Adsense di youtube tergolong mudah, pengalaman saya mendaftar Gogole Adsense di Youtube langsung di Approve hanya dalam waktu 1 hari saja. Caranya pun tak begitu sulit, hanya dengan memiliki akun di YouTube kita bisa mendaftar. 
  • Buka YouTube dan masuk ke akun anda
  • Untuk mendaftar diharuskan mempunyai minimal 1 video yang sudah di upload.
  • Jika belum memiliki video di YouTube silahkan upload video pertama anda, video tersebut harus original. Misalkan video hasil rekaman kucing dirumah yang berdurasi 5 menit.
  • Setelah video berhasil di unggah saatnya mendaftarkan diri, silahkan lihat kebagian bawah kiri tepatnya di footer halaman  YouTube kemudian klik tulisan "Creators & Partners"
  • Akan diarahkan ke halaman baru, kemudian klik di bagian kanan atas "Becobe a Partner"
  • Untuk selanjutnya silahkan mengikuti petunjuk yang diberikan saat proses pendaftaran.
  • Setelah proses pendaftaran selesai kita tinggal menunggu hasilnya diterima atau tidak. Jika video yang kita punya benar-benar original saya pikir sudah pasti di approve.
  • Jika diterima kita tinggal memonetize video yang kita punya di YouTube.
Selamat mencoba, good luck......!


Belajar Membuat Blogger Template

Membuat Blogger Template

Terhitung sejak hari Minggu kemarin saya mulai melakukan proses pembuatan template blogger agar menyerupai template yang digunakan pada wordpress. Target template wordpress yang ingin saya tiru adalah template yang digunakan salah satu blog populer di Indonesia yaitu blog kang Herman Yudiono blogodolar.com. dan saya menyebutnya ini dengan nama Project Template blogodolar.com. Meski belum mendapatkan ijin dari pemilik blog kang Herman, saya tetap memaksakan diri memulai project ini. Di postingan saya sebelumnya saya sudah menjelaskan  alasan  melakukan proses project ini yaitu sebagai media belajar dalam pembuatan template blogger. 

Seperti proses belajar lainnya yaitu amati > duplikasi > modifikasi > inovasi. Saat ini saya sedang berada di tahapan duplikasi dan sedikit melakukan proses modifikasi. Dari proses duplikasi template tersebut saya banyak belajar bagaimana penggunaan kode HTML, Javascript, maupun CSS yang digunakan pada blog. Meski hanya dengan bermodalkan pengetahuan yang didapat dari  google dan bertanya di blog-blog yang membahas seputar tutorial blogger,  template blogodolar.com versi blogger sudah 75% selesai. Mohon maaf saat ini saya belum bisa memberitahukan link blog tersebut karena saya masih menunggu tanggapan kang Herman tentang project ini dan boleh atau tidaknya link blog tersebut dipublikasikan untuk demonya. Saya hanya bisa memberikan screenshoot dari hasil duplikasi template blogodolar.com
bukan blogodolar.com
bukan blogodolar.com

Dari proses duplikasi template blogodolar.com yang dilakukan, saya jadi tahu bagaimana mengubah warna  pada blog, mengganti ukuran maupun jenis huruf yang digunakan, membuat footer 3 kolom untuk blog, penggunaan tag conditional,  dan banyak lagi ilmu yang bisa saya dapatkan untuk pembuatan template blogger. Setelah saya menyelesaikan  project template blogodolar.com saya akan coba ke tahapan belajar selanjutnya yaitu modifikasi dan inovasi. 








Project Blogger Template blogodolar.com

Template blogodolar.com

Blogodolar.com merupakan salah satu blog populer di Indonesia. Adalah kang Herman Yudiono si pemiilik blogodolar, dimana dia selalu menyajikan tulisan-tulisan seputar tips blogging dan cara menghasilkan uang lewat blog yang pastinya bermanfaat bagi pembaca. Jika anda ingin menggeluti bagaimana meraup dolar dari proses ngeblog, saya pikir blogodar.com lah blog yang cocok untuk  tempat anda belajar. Bukan hanya tulisan-tulisan kang Herman yang berkulitas tapi juga tampilan blog yang simpel membuat pengunjung blog betah. 

Dari tampilan blog yang simpel tersebut saya memiliki ide untuk membuat template blogodolar.com versi blogger. Perlu diketahui bahwa blogodolar.com menggunakan platform wordpress self hosting, dan apa mungkin template wordpress yang digunakan bisa dibuat versi blogger/ blogspot?. Hmm... tak ada salahnya mencoba bukan. Sebenarnya sudah ada 1 bagian dari template blogodolar yang berhasil saya buat versi bloggernya yaitu text widget yang digunakan kang Herman untuk menampilkan progress duel blog niche dan postingan terpopuler yang ada di sidebar. 

Saya sebut ini sebagai project  template blogodolar.com. Di project ini saya akan mencoba membuat tampilan blogodolar.com versi blogger semirip mungkin dengan yang aslinya. Saya membuat project ini bukan tanpa alasan, ini sebagai bahan motivasi saya  untuk belajar bagaimana mengedit template blogger dan mempelajari kode-kode html maupun css yang digunakan pada blog. Nampaknya saya harus meminta ijin terlebih dahulu pada kang Herman untuk melakukan hal ini dan mudah-mudahan kang Herman mengijinkan template wordpressnya saya buat versi blogger.


Text Widget Wordpress Versi Blogger

Text widget untuk blogger

Membuat text widget wordpress versi blogger atau blogspot, itulah yang saya lakukan kemarin untuk memodifikasi template super seo punya kang Ismet yang saya gunakan di blog ini. Berhubung di sidebar masih ada ruang kosong untuk widget, saya coba mencari kira-kira tambahan widget apa yang cocok untuk template ini. Terinspirasi dari text widget yang ada blog kang Herman Yudiono yaitu blogodolar.com saya pun ingin memasang widget serupa di blog ini. Tapi apa bisa, blog kang Herman kan menggunakan wordpress sedangkan saya pake blogspot?.

Pepatah mengatakan "Dimana ada kemauan disitu ada jalan". Coba browsing di google siapa tau sudah ada yang share membuat text widget serupa untuk blogger, ternyata oh ternyata hasil pencarian hanya mengarahkan pada text widget wordpress yang mengharuskan menggunakan plugin di self hosting wordpress.  Berhubung saya hanya menggunakan blog gratisan blogger ya apa boleh buat satu-satunya cara adalah membuat sendiri text widget untuk blogger.

Dengan sedikit jurus html dan css sayapun memaksakan diri membuat text widget serupa. Agar tampilan text widget sama seperti di blogodolar.com maka saya harus lakukan adaah membongkar code html dan css yang ada di blog tersebut. Google Chrome memudahkan saya dalam proses bongkar kode di blognya kang Herman.

Setelah sekitar 10 menit berlalu mengbongkar dan membaca kode yang ada di blogodolar.com, akhirnya saya menemukan celah kode untuk text widget agar bisa dipasang di blogger alias blogspot. Daripada saya sendirian yang pake text widget ini di blogger, lebih baik saya share untuk rekan-rekan blogger lainnya 'itu juga kalo ada yang mau pake' ha ha. Mari kita mulai :
  • Log-in ke Blogger
  • Pilih layout > Edit HTML
  • Untuk berjaga-jaga silahkan backup terlebih dahulu blog anda.
  • Letakan kode css dibawah ini diatas code ]]></b:skin>
/* Text Widget  */
#textwidget {display: block;}
#sidebarwrap .textwidget ul{list-style-type: none;margin: 0;padding: 0;}
#sidebarwrap .textwidget ul li{background: url(http://1.bp.blogspot.com/-kvexQwNB6uQ/UcMRJr4QCyI/AAAAAAAAAJM/MOX8Ojq0ThI/s1600/sidebar+list.png) no-repeat top left;border-bottom: 1px dotted #ddd;margin: 0 0 5px;padding: 0 0 5px 16px;word-wrap: break-word;}
#sidebarwrap .textwidget ul li a:hover{color: #0072A4;text-decoration: underline;}
  • Simpan template anda dan tutup editor html.
  • Sekarang masuk ke Layout > Page Element > Pilih add a gadget pada sidebar.
  • Kemudian pilih HTML/Javascript
  • Copy dan paste kode dibawah ini di html/javascript form
<div class="textwidget"><div style="padding-top: 5px; background-color: #f5f5f5;">
<ul>
<li><a href="http://ecotutorials.blogspot.com/2013/06/cara-menampilkan-iklan-adsense-diatas.html">Google Adsense diatas Header</a></li>
<li><a href="http://ecotutorials.blogspot.com/2013/06/edit-seo-friendly-blogger-template.html">Edit Super SEO Template</a></li>
<li><a href="http://ecotutorials.blogspot.com/">Blogger Tutorials</a></li>
 </ul>
</div></div>
Catatn: Ganti text berwarna hijau dengan url postingan dan text berwarna biru untuk text yang akan tampil saat blog halaman tampil.

  • Save widget.
Dan sekarang coba lihat blog anda, di sidebar sudah tampil text widget seperti di blogodolar.com. Semoga kang Herman Yudiono tidak marah karena text widgetnya saya bajak. Demikian tutorial  cara membuat text widget wordpress versi blogger ala blogodolar yang bisa saya berikan hari ini. Jika ada yang ingin ditanyakan  untul cara memasangnya  bisa meninggalkan komen dibawah. Salam blogger....

Cara Menampilkan Iklan Adsense diatas Header

Google Adsense diatas Header
Saat ini banyak cara yang bisa dilakukan untuk mendapatkan uang dari internet, salah satunya adalah dengan mengikuti program Google Adsense. Sudah banyak blogger indonesia yang bergabung dalam program ini. Banyak faktor yang menentukan penghasilan GA, berbagai cara dilakukan para publisher untuk memaksimalkan penghasilan dari program  ini. Jumlah traffic blog dan penempatan iklan merupakan faktor penting yang menentukan penghasilan Google Adsense. Semakin banyak klik pada iklan maka earning yang didapat akan semakin besar.

Menempatkan iklan diatas header merupakan salah satu posisi yang ideal untuk meningkatkan jumlah click iklan Google Adsense. Coba anda lihat website engadget.com, website ini menempatkan iklan diatas header. Meski tidak menjamin penghasilan GA yang tinggi, tak ada salahnya mencoba menempatkan iklan seperti website tersebut. 

Yang pertama harus dilakukan supaya iklan GA bisa tampil diatas header blog adalah menambahkan page element untuk menempatkan code Google Adsense. Berikut caranya:
  • Log-in ke Blogger
  • Pilih Layout > Edit HTML
  • Untuk berjaga-jaga terjadinya kesalahan silahkan backup template blogger anda
  • Kemudian cari code (lebih mudah menggunakan CTRL+F)
<div id='outer-wrapper'>
  •  Paste code berikut dibawah code diatas
<div id='topads-wrapper'> 
<b:section class='topads' id='topads' preferred='yes'/>
</div>
  • Tambahkan code CSS berikut sebelum ]]></b:skin>
/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
#topads {margin: 0; padding: 0;}
#topads .widget {margin: 0; padding: 5px 0;}
  • Simpan template anda.
  • Kemudian masuk ke Layout > Page Element
  • Sekarang anda bisa lihat section baru diatas header.
  • Klik dibagian add gadget dan pilih Gadget Google Adsense . Pilih salah satu jenis ikan adsense yang ingin tampil diatas header blog.
  • Klik save, dan lihat tampilan baru blog anda dengan iklan diatas header blog.
Demiikian tutorial untuk penempatan iklan diatas header blog ini, semoga bisa membantu anda yang sedang mencoba  posisi Google Adsense yang tepat untuk meningkatkan earning.