Belajar Desain Blog

Banyak jalan menuju kaya (eh..salah.. banyak jalan menuju kesuksesan, hehehe)...
Google adsense secara default tidak akan menampilkan program adsensenya pada blog atau web yang berbahasa Indonesia, namun entah siapa yang mulai akhirnya diperoleh juga cara agar adsense tetap dapat muncul di blog berbahasa Indonesia.

Nah, jika ada yang minat memasang adsense untuk blog atau web berbahasa Indonesia maka dapat melakukan langkah-langkah dibawah ini :

1. Pertama buatlah sebuah file (misal dengan extension .php) yang berisikan script google adsense kemudian taruh di web hosting anda.

2. Triknya adalah pada saat melakukan setup iklan baru pada bagian “more option” secara default yang terpilih adalah “show public servis ads”, ubah dengan memilih “Show non-Google ads from another URL”, kemudian masukkan url yang mengarah ke file yang telah dibuat pada langkah pertama.

Dengan cara tersebut maka iklan google adsense akan tampil walaupun di blog bahasa indonesia. Sebagai catatan karena ini masuk daerah abu-abu, lakukan dengan resiko ditanggung sendiri :D . Selamat mencoba ;)

Berikut caranya :

Pertama : Masuk ke LAYOUT -> EDIT HTML -> CENTANG "Expand Widget Templates"

Kedua : Cari kode ]]></b:skin> kemudian masukkan kode css berikut tepat diatasnya

.adsense {
margin-right:10px;
height:280px;
width:338px;
float:left;
overflow:hidden;}

Note : height dan width diatur sesuai dengan tampilan adsense yang digunakan.

Ketiga : Selanjutnya Cari kode <data:post.body/> dan letakkan kode adsense diatas kode tersebut untuk menampilkan iklan adsense diawal postingan/dibawah kode tersebut untuk menampilkan iklan adsense dibawah postingan.

Keempat: Save

Kelima : Agar iklan adsense tidak muncul, gunakan kode berikut diawal postingan

Keenam : Sebelum memasukkan kode adsense, maka kode yang masih berbentuk java script tersebut dikonversikan dulu ke HTML.

Adsense For Search merupakan salah satu type adsense yang dapat dipergunakan untuk menghasilkan uang, namun adsense for search terkadang memunculkan hasil pencarian tidak sesuai dengan halaman blog yang kita buat.

Nah, dibawah ini adalah trik untuk menampilkan adsense agar terlihat cantik di blog anda.

Pertama : Dapatkan dulu 2 kode ini dari adsense Anda, seperti ini:

Kode Pertama:

<div id='cse-search-results'/>
<script type='text/javascript'>
var googleSearchIframeName = &quot;cse-search-results&quot;;
var googleSearchFormName = &quot;cse-search-box&quot;;
var googleSearchFrameWidth = 590;
var googleSearchDomain = &quot;www.google.com&quot;;
var googleSearchPath = &quot;/cse&quot;;
</script>
<script src='http://www.google.com/afsonline/show_afs_search.js' type='text/javascript'/>

Kode Kedua:

<form action='http://roni-pascal.blogspot.com/2006/03/hasil-pencarian.html' id='cse-search-box'>
<div>
<input name='cx' type='hidden' value='partner-pub-xxxxxxxxxx:taa9vlbyl50'/>
<input name='cof' type='hidden' value='FORID:11'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='q' size='21' type='text'/>
<input class='button' font-size='4' name='sa' type='submit' value='Cari'/>
</div>
</form>

Note; pub-xxxxxxxxx (ganti xxxxxxxxx dengan nomor adsense anda)

Nah, sebelumnya Anda harus membuat dahulu posting kosong (ga ada isinya), dan dikasih judul apa saja tergantung style anda, misal: judulnya "Relevant Article". Dan ingat postingnya di set ke tahun lamaaaaaaaaaa sekali, pokoknya yang tahun dulu bangetsss... Setelah itu klik tombol Terbitkan Entri.

Untuk mendapatkan 2 kode diatas, caranya sangat mudah sekali kok,

1. Masuk ke akun adsense Anda

2. Terus klik tab Adsense Setup ==> klik AdSense for Search

3. Di Search Type: pilih Only sites I select, lalu dikolom Selected sites: isi url alamat blog Anda.

4. Scrool ke bawah lalu dibagian Site language, pilih Indonesian

5. Selanjutnya klik tombol Continue, lalu klik tombol Continue lagi.

6. Pada opsi Opening of search results page, pilih Open results within my own site, lalu di Enter URL where search results will be displayed isikan url alamat postingan kosong tadi baru dibuat dan di Enter width of results area: isi ukuran pixel lebar post blog Anda.

7. Kemudian di opsi Ad Location:, kalo ukuran lebar post blog anda 795 ato lebih bisa pilih Top and Right dan Right, dan apabila kurang dari 795 cuma bisa pilih Top and Bottom, jadi sesuaikan saja dengan ukurang post blog Anda. Seperti lebar post blog ini cuma 590, jadi saya pilih Top and Bottom.

8. Kemudian dibagian warna Anda tentukan sendiri warna yang tepat seperti warna blog Anda terutama di fontasi-nya, link-nya, background-nya dll. Lalu klik tombol Continue

9. Terakhir Anda isi namanya terserah Anda, apapun namanya. Lalu klik tombol Submit and Get Code.

10. Tunggu sebentar, maka Anda mendapatkan 2 kode itu.

Sekarang trik diblognya.
Anda login ke blogger, lalu klik Tata Letak pilih klik Edit HTML dan jangan lupa Expand Template Widget dicentang.

Cari kode ini <data:post.body/>
atau kode ini <p><data:post.body/></p>,

Dua-duanya sama aja kok. Dan simpan kode dibawah ini (kode ini harus yang Anda dapatkan waktu menerapkan cara nomor 3 diatas).

Di bawah adalah contoh kode yang dicari tsb :

<div id='cse-search-results'/>
<script type='text/javascript'>
var googleSearchIframeName = &quot;cse-search-results&quot;;
var googleSearchFormName = &quot;cse-search-box&quot;;
var googleSearchFrameWidth = 590;
var googleSearchDomain = &quot;www.google.com&quot;;
var googleSearchPath = &quot;/cse&quot;;
</script>
<script src='http://www.google.com/afsonline/show_afs_search.js' type='text/javascript'/>


Selanjutnya klik tombol Simpan Template


Karena ini adalah widget search engine-nya, jadi Anda bisa simpan di sidebar atau ditempat lain yang menurut anda potensial :

<form action='http://NAMABLOGANDA.blogspot.com/1997/12/NAMA-POSTINGAN-DI-BLOG-ANDA.html' id='cse-search-box'>
<div>
<input name='cx' type='hidden' value='partner-pub-xxxxxxxxx:taa9vlbyl50'/>
<input name='cof' type='hidden' value='FORID:11'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='q' size='21' type='text'/>
<input class='button' font-size='4' name='sa' type='submit' value='Cari'/>
</div>
</form>

Simpan, dan lihat hasilnya. Selamat membuat design Adsense untuk blog anda.

Sepintas kita lihat indah nya apabila blog layout teks nya bisa berjalan, namun secara fungsi kurang maksimal. Oleh karena itu apabila blogger ingin memaksimalkan fungsi marquee untuk teks dapat dilakukan melalui beberapa langkah berikut ini :

1. Untuk membuat teks berjalan dari kiri ke kanan.

KIRI ke KANAN

<marquee>KIRI ke KANAN"</marquee>

2. Untuk membuat teks berjalan dari kiri ke kanan dan berhenti pada saat mouse ditujukan pada teks.

KIRI ke KANAN dan BERHENTI

<marquee onmouseover="this.stop()" onmouseout="this.start()">KIRI ke KANAN dan BERHENTI</marquee>

3. Untuk membuat teks bergerak bolak-balik : kiri -> kanan -> kiri.

Bolak Balik

<marquee behavior="alternate">Bolak Balik</marquee>

4. Untuk membuat teks bergerak dari bawah ke atas.

BAWAH ke ATAS

<marquee direction="up">BAWAH ke ATAS</marquee>

5. Teks bergerak dari atas ke bawah.

ATAS ke BAWAH

<marquee direction="down" width="100%" height="100">ATAS ke BAWAH</marquee>

Itulah beberapa contoh teks berjalan atau marquee yang bisa anda masukkan ke dalam blog, tinggal pilih mana yang ingin di masukkan. Apakah ingin teks berjalan dari kiri ke kanan, bolak balik, atas ke bawah maupun bawah keatas.

Jika telah mengikuti langkah-langkah diatas dengan benar, coba lihat hasilnya.

Selamat Mencoba.

Banner di blog biasanya dipergunakan untuk meletakkan iklan atau merupakan tempat promosi. Banyak blog yang memasang banner yang bagus dan cantik untuk blog mereka.

Sebenarnya bagaimanakah cara membuat banner untuk blog itu? Dibawah ini akan dijelaskan cara sederhana membuat banner di blog anda.

Langkah-langkah cara membuat banner untuk blog adalah sebagai berikut :

1. Pertama masuk ke acount blogspot anda



2. Pilih Layout (Tata Letak) --> Edit Html



3. Cari kode berikut ini, dengan menekan tombol keyboard ctrl+F :



]]></b:skin>



4. Copy kode berikut kemudian tempatkan persis diatas kode tersebut.



#Banner-ads {

margin:0px;

padding: 5px;

text-align: center;

width : 960px;

}

#Banner-ads img {

margin: 7px 4px 4px 0px;

padding: 3px;

width : 125px;

height : 125px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Banner-ads img:hover {

margin: 7px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}



5. Copy semua kode dibawah ini :



<div id='Banner-ads'>
<a hight='100' href=' http://YourURL' target='_blank' width='100'><img alt='ads' border='0' src='http://YourURL-IMAGEs/images/125x125.gif'/></a>
</div>


6. Kemudian letakkan persis di atas kode berikut :



<div id='main-wrapper'>



7. Terakhir Save atau Simpan Perubahan Template anda.



Jika telah mengikuti tutorial diatas dengan benar, maka kotak iklan link banner akan muncul pada blog anda.

PERTAMA, cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.



<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>



KEDUA, cari kode html berikut ini :



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



ganti kode tersebut dengan kode di bawah ini :



<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



Keterangan :

tulisan yang berwarna merah adalah yang bisa anda ganti.


Summary noimg 430 = tinggi artikel terpenggal tanpa image

Summar img 430 = tinggi artikel terpenggal dengan image

Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...



KETIGA, klik save template

Cara membuat related post ini sudah banyak dibahas di berbagai blog dan web, disini saya memposting kembali agar saya sendiri tidak lupa dan mudah-mudahan juga berguna bagi pembaca yang baru memulai blogging dan mendesain blog.

1. Setelah login ke blog anda, masuk ke menu 'Layout-->Edit HTML'

2. Beri centang kotak 'Expand Widgets Template'

3. Selanjutnya cari kode ini <data:post.body> , cara mudah mencarinya yaitu tekan tombol ctrl dan F bersamaan kemudiannya masukkan apa yang mau dicari.

4. Setelah ketemu, letakkan script berikut ini di bawah kode <data:post.body>.

Copy dan paste kode berikut :


<b:if cond='data:blog.pageType == "item"'>

<div class='similiar'>

<div class='widget-content'>

<h3>Related Posts by Categories</h3>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var h = document.createElement(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;data2007&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = &quot;<data:label.name/>&quot;;



var test = 0;

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>


5. Selesai dan save template anda.

Banyak yang lagi ribut pada masalah auto blog, saya sndiri lom pernah nyobain autoblog? Apa sih autoblog itu? Auto blog adalah sebuah cara yang membuat blog kita terisi articel secara otomatis.
Sehingga apabila ada seseorang yang pengen ngeblog tapi males mikir dan nulis article untuk blognya plus ga mau repot mengurusnya tiap hari namun pengen blognya bisa terisi sendiri, solusinya buat aja autoblog.
Namun berhati-hati dengan penggunaan autoblog ini, karena bisa saja blog atau web anda di blok oleh search engine seperti google. Maka dari itu ada baiknya hal ini digunakan cuma untuk belajar. Berikut ini cara termudah bagi blogger untuk membuat autoblog di Blogspot.

1. Pertama-tama login ke account blog anda (sebaiknya blog yang masih baru atau buat blog baru).
2. Klik pada tab settings atau pengaturan pada blog yang anda.
3. Kemudian pilih tab email & mobile.
4. Pada kolom email posting address, buatlah sebuah nama email yang baru.
Formatnya akan seperti ini : namaakunbloggeranda.isikannamayangandainginkandisini@blogger.com.
5. Dibawahnya pilih Publish emails immediately.
6. Klik save settings.

Selanjutnya adalah subcribe ke newsletter yang sesuai dengan topik blog anda, sehingga tips akan secara rutin dikirimkan kepada anda (yang biasanya selalu disisipi link affiliasi).

Article atau materi yang terkirim ke email akan langsung terpublish ke blog anda, sehingga anda tidak perlu mikir bagaimana menghasilkan content yang unique dan berkualitas.

Selamat berauto blog :-D (resiko di tanggung penumpang, heheheh)