Cara menambahkan unit adsense pada website
- Administrator
- , Publisher adsense, , Template adsense, Komponen adsense, Widget adsense
- 2333 Kali Dilihat
- 0 Komentar
Cara menambahkan unit adsense pada website
Oleh karena beberapa pertanyaan dari beberapa pengguna, berikut saya buat tutorial bagaimana Cara menambahkan unit adsense pada website. Sebelum lebih lanjut saya jelaskan mengenai hal tersebut diatas, saya beritahukan bahwa saya telah beberapa kali berusaha membuat widget untuk menambahkan unit iklan secara instan melalui adanya sebuah komponen. Akan tetapi saya masih belum berhasil untuk hal itu, dan kegagalan tersebut dikarenakan beberapa hal terkait ketentuan-ketentuan mendasar source PopojiCms yang kita gunakan. Oleh karena itu sebelum saya benar-benar berhasil membuat widget tersebut, untuk sementara saya membuat panduan peasangan unit iklan ini secara manual.
Berikut Cara menambahkan unit adsense pada website yang dibangun menggunakan PopojiCms
Cara menempatkan Page level ads
Untuk menempel atau menambahkan Page level ads silahkan buka file index.php theme yang anda gunakan pada root: po-content/theme/theme-active/index.php lalu tempel script Page Level Ads tepat dibawah <*head> pembuka, berikut sebagai contoh:
<html>
<head>
<!-- Page-level ads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-35612886475577342",
enable_page_level_ads: true
});
</script>
<!-- Page-level ads -->
<title> Web Title </title>
</head>
<body>
</body>
</html>Menempatkan unit iklan pada hader(sebagai contoh pada theme chingsy dan zagi news)
Silahkan buka file header.php dan perhatikan bahwa pada file tersebut, diantara baris 58 dan 60 terdapat file ad-long.jpg, silahkan hapus baris tersebut dan gantikan dengan script unit iklan yang anda miliki. Namun saya secara pribadi tidak menyarankan anda untuk menempatkan iklan pada bagian header ini, karena dapat menambahi beban website anda. Dengan kata lain dapat membuat website anda menjadi berat saat diakses.
Berikut sebagai contoh:
<header id="header" class="sticky-style-2">
<div class="container clearfix">
<div id="logo">
<a href="<?=BASE_URL;?>" class="standard-logo" data-dark-logo="<?=BASE_URL.'/'.DIR_INC;?>/images/logo.png"><img src="<?=BASE_URL.'/'.DIR_INC;?>/images/logo.png" alt="Logo" /></a>
<a href="<?=BASE_URL;?>" class="retina-logo" data-dark-logo="<?=BASE_URL.'/'.DIR_INC;?>/images/logo.png"><img src="<?=BASE_URL.'/'.DIR_INC;?>/images/logo.png" alt="Logo" /></a>
</div>
<div class="top-advert">
<img src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/ad-long.jpg" alt=""> <!-- ini ad-long.jpg yang saya maksudkan, silahkan hapus -->
<!-- Ini script Unit iklan, silahkan Hapus Iklan Ini -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Contoh script unit iklan -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234288642355676"
data-ad-slot="0075593442"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Ini script Unit iklan, silahkan Hapus Iklan Ini -->
</div>
</div>
<div id="header-wrap">
<nav id="primary-menu" class="style-2">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<?php
echo $this->menu()->getFrontMenu(WEB_LANG, '', '', '');
?>
<div id="top-search">
<a href="javascript:void(0)" id="top-search-trigger"><i class="icon-search3"></i><i class="icon-line-cross"></i></a>
<form action="<?=BASE_URL;?>/search" method="post">
<input type="text" name="search" class="form-control" value="" placeholder="<?=$this->e($front_search);?>...">
</form>
</div>
</div>
</nav>
</div>
</header>Menempatkan unit iklan pada halaman beranda
Masih mengacu pada theme chingsy sebagai contoh, silahkan buka po-content/theme/theme-active/home.php
Perhatikan antara baris 123 - 125, sama seperti pada header.php, pada baris tersebut juga terdapat ad-long.jpg. Silahkan ganti ad-long.jpg dengan script unit iklan anda, berikut sebagai contoh:
<div class="bottommargin-lg">
<img src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/ad-long.jpg" alt="" class="aligncenter notopmargin nobottommargin"> <!-- Hapus baris Ini -->
<!-- Hapus Iklan Ini -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Contoh Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-435688642358765"
data-ad-slot="9876596543"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Hapus Iklan Ini -->
</div>
Menempatkan unit iklan adsense pada sidebar atau bilah samping
Silahkan buka po-content/theme/theme-active/sidebar.php terdapat dua baris yang memiliki snippet ad-square.png. Hapus dan ganti snippet tersebut dengan script unit iklan anda.
Berikut contohnya:
<div class="line hidden-lg hidden-md"></div>
<div class="sidebar-widgets-wrap clearfix">
<div class="widget clearfix">
<div class="col_one_third nobottommargin">
<a href="#" class="social-icon si-dark si-colored si-facebook nobottommargin" style="margin-right: 10px;">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<small style="display: block; margin-top: 3px;"><strong><div class="counter counter-inherit"><span data-from="500" data-to="<?=$this->oauth()->getFacebookCount("https://www.popojicms.org");?>" data-refresh-interval="50" data-speed="2500" data-comma="true"></span></div></strong>Share</small>
</div>
<div class="col_one_third nobottommargin">
<a href="#" class="social-icon si-dark si-colored si-twitter nobottommargin" style="margin-right: 10px;">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>
<small style="display: block; margin-top: 3px;"><strong><div class="counter counter-inherit"><span data-from="500" data-to="<?=$this->oauth()->getTwitterCount("DwiraSurvivor");?>" data-refresh-interval="50" data-speed="2500" data-comma="true"></span></div></strong>Followers</small>
</div>
<div class="col_one_third nobottommargin col_last">
<a href="#" class="social-icon si-dark si-colored si-rss nobottommargin" style="margin-right: 10px;">
<i class="icon-rss"></i>
<i class="icon-rss"></i>
</a>
<small style="display: block; margin-top: 3px;"><strong><div class="counter counter-inherit"><span data-from="500" data-to="<?=$this->oauth()->getSubscribeCount();?>" data-refresh-interval="50" data-speed="2500" data-comma="true"></span></div></strong>Subscribe</small>
</div>
</div>
<div class="widget clearfix">
<img class="aligncenter" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/ad-square.png" alt=""> <!-- Hapus baris Ini -->
<!-- Hapus Iklan Ini -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Contoh Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-435688642358765"
data-ad-slot="9876596543"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Hapus Iklan Ini -->
</div>
<div class="widget widget_links clearfix">
<h4><?=$this->e($front_categories);?></h4>
<div class="col_half nobottommargin col_last">
<ul>
<?php
$categorys_side = $this->category()->getAllCategory(WEB_LANG_ID);
foreach($categorys_side as $category_side){
?>
<li><a href="<?=BASE_URL;?>/category/<?=$category_side['seotitle'];?>"><?=$category_side['title'];?></a></li>
<?php } ?>
</ul>
</div>
</div>
<div class="widget clearfix">
<div class="tabs nobottommargin clearfix" id="sidebar-tabs">
<ul class="tab-nav clearfix">
<li><a href="#tabs-1"><?=$this->e($front_popular);?></a></li>
<li><a href="#tabs-2"><?=$this->e($front_recent);?></a></li>
<li><a href="#tabs-3"><i class="icon-comments-alt norightmargin"></i></a></li>
</ul>
<div class="tab-container">
<div class="tab-content clearfix" id="tabs-1">
<div id="popular-post-list-sidebar">
<?php
$populars_side = $this->post()->getPopular('5', 'DESC', WEB_LANG_ID);
foreach($populars_side as $popular_side){
?>
<div class="spost clearfix">
<div class="entry-image">
<a href="<?=$this->pocore()->call->postring->permalink(rtrim(BASE_URL, '/'), $popular_side);?>" class="nobg"><img class="img-circle" src="<?=BASE_URL;?>/<?=DIR_CON;?>/thumbs/<?=$popular_side['picture'];?>" alt=""></a>
</div>
<div class="entry-c">
<div class="entry-title">
<h4><a href="<?=$this->pocore()->call->postring->permalink(rtrim(BASE_URL, '/'), $popular_side);?>"><?=$popular_side['title'];?></a></h4>
</div>
<ul class="entry-meta">
<li><i class="icon-comments-alt"></i> <?=$this->post()->getCountComment($popular_side['id_post']);?> <?=$this->e($front_comment);?></li>
</ul>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="tab-content clearfix" id="tabs-2">
<div id="recent-post-list-sidebar">
<?php
$recents_side = $this->post()->getRecent('5', 'DESC', WEB_LANG_ID);
foreach($recents_side as $recent_side){
?>
<div class="spost clearfix">
<div class="entry-image">
<a href="<?=$this->pocore()->call->postring->permalink(rtrim(BASE_URL, '/'), $recent_side);?>" class="nobg"><img class="img-circle" src="<?=BASE_URL;?>/<?=DIR_CON;?>/thumbs/<?=$recent_side['picture'];?>" alt=""></a>
</div>
<div class="entry-c">
<div class="entry-title">
<h4><a href="<?=$this->pocore()->call->postring->permalink(rtrim(BASE_URL, '/'), $recent_side);?>"><?=$recent_side['title'];?></a></h4>
</div>
<ul class="entry-meta">
<li><?=$this->pocore()->call->podatetime->tgl_indo($recent_side['date']);?></li>
</ul>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="tab-content clearfix" id="tabs-3">
<div id="recent-post-list-sidebar">
<?php
$comments_side = $this->post()->getComment('5', 'DESC');
foreach($comments_side as $comment_side){
$comment_post = $this->post()->getPostById($comment_side['id_post'], WEB_LANG_ID);
?>
<div class="spost clearfix">
<div class="entry-image">
<a href="<?=$this->pocore()->call->postring->permalink(rtrim(BASE_URL, '/'), $comment_post);?>#comment" class="nobg"><img class="img-circle" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/medium/medium_avatar.jpg" alt=""></a>
</div>
<div class="entry-c">
<strong><?=$comment_side['name'];?>:</strong> <?=$this->pocore()->call->postring->cuthighlight('post', $comment_side['comment'], '80');?>...
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
<div class="widget clearfix">
<img class="aligncenter" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/ad-square.png" alt=""> <!-- Hapus baris Ini -->
<!-- Hapus Iklan Ini -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Contoh Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-435688642358765"
data-ad-slot="9876596543"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Hapus Iklan Ini -->
</div>
<div id="tags" class="widget clearfix">
<h4 class="highlight-me"><?=$this->e($front_tag);?></h4>
<div class="tagcloud">
<?=$this->post()->getAllTag('RAND()', '30', '');?>
</div>
</div>
<div class="widget clearfix">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpopojicms&width=350&height=240&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=499481203443583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:240px; max-width: 100% !important;" allowTransparency="true"></iframe>
</div>
</div>
Untuk penambahan jumlah unit iklan yang tampil di setiap bagian, anda tinggal coppy dan paste. Penempatan unit iklan pada bagian lain yang tidak termasuk dalam petunjuk-petunjuk diatas dapat anda sesuaikan.
Perhatian:
- Pilih atau buat jenis unit iklan responsive agar tidak mengganggu atau mengurangi fungsional website anda.
- Pilih jenis iklan responsive agar dapat menyesuaikan semua ukuran layar.
- Jika setelah penempatan script unit iklan tampilan website anda menjadi berantakan, berarti ada file tertentu yang kemungkinan ikut terhapus atau kurang sempurna.
- Untuk kemudahan anda, lakukan penempatan unit iklan adsense pada file website yang masih di localhost. Setelah itu baru anda replace pada file yang terdpat di hosting.
- Untuk kemudahan anda, gunakan editor notepad++ atau editor lain sejenis.
