Sunday, October 30, 2011

Memasang Google Adsense di Blog Bahasa Indonesia

Tidak bisa memasang iklan Link dari Google Adsense, itu menurut saya dikarena memang di Option/pilihan di GFC nya tidak menyediakan ukuran seperti 728x15, 468x15, dll, untuk saat ini belum tersedia, entah kedepannya. tapi kita masih bisa mengakali agar iklan Link Google Adsense kita bisa tampil di blog bahasa indonesia. apalagi sekarang Google sama blogger sudah menjadi saudara atau blogger sudah berada dalam naungan Google, sehingga kita sekarang lebih mudah untuk mengkoneksikan antara Blogger dan Google dalam hal ini  adalah Google Adsense yang bisanya bisa kita lihat di Blogspot dan wordpress, dan situs lainnya, dimana kita bisa login ke Google Adsense lewat Blogger, itu sepertinya hanya berlaku untuk Blog yang baru di buat setelah kerjasama antara Blogger dan Google semakin erat,  buat yang sudah lama umur blognya jadi semoga juga sudah bisa langsung koneksi ke google adsense, sebelum melakukan langkah ini rubah dulu bahasa blog sobat ke dalam bahasa Inggris (English), agar bisa menampilkan menu  Monetize.

ikuti langkah berikut untuk memulai
1. Login ke Blogger > Monetize > Set Up AdSense> Klik Sign Up For Adsense

Tombol Share FB, Twitter, Buzz, G+1 Melayang disamping Blog (position:fixed)

Bagaimana membuat tombol share Facebook, Twitter, Google Buzz dan G+1 dengan posisi (position:fixed) atau posisi tetap ditempat tidak bergerak) sama seperti halnya di postingan sebelumnya Cara Pasang G+1 (Google Plus One) di Pojok Blog, tapi kali ini admin akan share tentang cara pasang tombol share melayang di bagian samping blog yang sepertinya semakin populer karena posisinya pas mantap. contohnya seperti blog saya ini. ada disamping kiri postingan ini (seperti gambar dibawah ini)


Langkah-langkahnya sebagai berikut:

Membuat Navigasi per-Halaman di Blog

Postingan seperti ini mungkin sudah ada sebelumnya di buat oleh para master blogger, bukan hanya mungkin pasti sudah ada, hanya saya saya akan menyajikan ulang dengan gaya bahasa saya sendiri, dan semoga bisa di mengerti olah sobat yang mancari tutorial tantang cara Membuat Navigasi Halaman Bernomor Untuk Blogger.
Saya sarankan sebaiknya backup template sobat sebelum melakukan proses di bawah ini, karena kita akan bermain di dalam Edit HTML.


1.Login ke blogger &gtdashboard--> Design--> Edit HTML
2.Cari Kode ]]></b:skin> (Tekan ctrl + F di keyboard masukan  ]]></b:skin&gt untuk mempermudah pencarian)
3.Copy  dan paste kode script di bawah ini sebelum kode  ]]></b:skin> 


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

4. Save Template.
5. langkah selanjutnya pergi ke Page Elements dan klik  "Add a gadget".
6. pilih "html/java script" dan tambahkan kode script di bawah ini (Tanpa Judul) dan click save. sekarang pindahkan/drag Gadget yang di buat tadi  di bawah  bagian "Blog Posts".

Advanced CSS Menu Trick

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.


We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu tricks” will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.


The first step – CSS roll overs


The first step of the game is building some CSS roll overs. We want to keep things accessible so I have opted to use an IR technique. Essentially we create an image that has both the static, active and rolled over state all lined up next to each other. We then set the image as the background of th element, but the width is only wide enough for one state of the image (so if the button image is 600px wide with all three states, we make the navigation element as a 200px wide button). We then set the text indent really high and overflow to hidden so that it pushes the text out of the box. Then we only see the image even though there is still HTML text on the page for search engines and accessibility.

Image Examples

Menu Before


Copyright © 2016 grahaDesignstudio | All Rights Reserved.