Cara memasang Adsene di Blogspot

Cara memasang Adsene di Blogspot

Cara memasang Adsene di Blogspot dan menambahkan auto READ MORE pada postingan blogspot. Setelah posting sedikit artikel tentang Cara meningkatkan pendapatan Adsense, baru terasa ternyata tidak mudah berkenalan dengan xml blogspot. Terus terang saya tidak familiar dengan template blogger atau blogspot. Mungkin lebih mudah template wordpress, karena bisa diaplikasikan langsung di localhost. Butuh waktu beberapa hari buat mempelajari template .xml dari blogger. Bahkan sampai tulisan ini saya posting di website pun, rasanya saya masih belum faham betul template blogger. hehehe

Tapi ada beberapa sisi baiknya, ketidaktahuan saya memberikan dorongan buat belajar template khususnya xml dari blogger ini. Waktu yang singkat dan padat sehingga menyebabkan tidak sempat membaca secara detail, akhirnya saya berkesimpulan lebih baik mempelajari template yang ada. Ok, dari pada berpanjang kata, kita langsung saja.

Pada satu kasus saya ingin memasukan kode Adsense di blogspot, setelah saya googling, akhirnya saya menemukan tutorial untuk memasukan kode Google Adsense ke dalam postingan di template blogspot.
Dari kode blogspot tersebut, cari baris:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[php]<div class='post-body'>
<p><data:post.body/></p>

....

...

<p class='post-footer-line post-footer-line-3'/>
</div>

Setelah itu ganti kode tersebut dengan:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class='post-body'>
<p>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorelink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float: right;'>

KODE ADSENSE

1
2
3
4
5
6
7
8
9
10
11
12
13
&lt;/div&gt;
&lt;data:post.body/&gt;&lt;/b:if&gt;
&lt;/p&gt;
&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;
&lt;/div&gt;
&lt;p class='post-footer-line post-footer-line-3'/&gt;
&lt;/div&gt;

Setelah kode tersebut sudah diganti, sekarang kita tambahkan css READ MORE (font dan ukuran silahkan dirubah sesuai selera):

1
2
3
.readmorelink a{font-size:10px; color:#0080FF}
.readmorelink a:hover{ text-decoration: underline; color:#BB0000}

Dan untuk bisa kode READ MORE tersebut berjalan, maka kita tambahkan kode javascripts yang akan kita letakan di atas kode </head>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</head>

Keterangan gambar dan kalimat yang akan muncul pada postingan pada halaman pertama:

1
2
3
4
5
6
7
8
9
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

Silahkan agan rubah ukuran gambar dan jumlah kalimat tersebut agar terlihat presisi dengan ukuran template blogspot.
Begitu tutorial menambahkan auto READ MORE pada postingan blogspot dan Cara memasang Adsene di Blogspot. semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *


*