Cara menempatkan kode Anti Adblocker di Blog atau Web

Dalam dunia monetizing website atau blog, tentunya kita tidak asing dengan aplikasi atau ekstensi AdBlocker. Ekstensi AdBlocker merupakan aplikasi yang berfungsi memblokir iklan dari website atau blog tertentu. Aplikasi ini bagi seorang net surfer tentunya sangat bermanfaat, karena mereka tidak jarang menemukan website atau blog yang isinya kebanyakan iklan, yang menurut beberapa kalangan dianggap sangat mengganggu. Namun jika kita melihat dari sisi si empunya website atau blog tersebut, kehadiran iklan tersebut dianggap sebagai salah satu pundi penghasilan dari blogger dan admin website. Berbagai pandangan ini seperti menempatkan kita dalam "Perang" antara pendukung AdBlocker dan Anti AdBlocker.

Bagi seorang blogger dan webmaster, aplikasi adblocker tentunya sangat merugikan mereka. Namun hal tersebut dapat diatasi dengan skrip kode yang memaksa pengunjung agar mereka mematikan/me-white-list web atau blog mereka di aplikasi adblocker pengunjung. Walaupun skrip anti adblocker ini juga bisa dibilang dapat menimbulkan kontroversi, karena memiliki kesan "pemaksaan" dari si empunya blog atau website, dengan kata lain, kalau pengunjung ingin masuk ke blog/website tsb, harus mematikan adblocker. Terlepas dari pro kontranya, aplikasi ini membantu para blogger mengatasi lost revenue mereka gara-gara aplikasi Adblocker.

Berikut merupakan tutorial singkat mengenai bagaimana cara menempatkan skrip kode anti Adblocker di blog atau website. Skrip kode yang akan dipakai, diambil dari situs antiblock.org, dengan versi v3.

Pertama, buka website antiblock.org dan download atau copy kode skrip anti adblocker versi terakhir. Kode tersebut berukuran sangat kecil, mungkin sekitar beberapa KB. Bahasa yang dipakai di website antiblock merupakan bahasa Jerman. Agar tidak kebingungan, kalian dapat memilih bahasa pilihan, baik Inggris atau Indonesia.

Dibagian Einstellungen atau Pengaturan, tulis pesan yang akan dilihat oleh pengunjung ketika mereka mengaktifkan AdBlocker mereka ketika mengunjungi web/blog kalian, misal ; "Silahkan matikan AdBlocker untuk mengakses situs ini!".

Kedua, jika semua sudah di-setting silahkan klik Code Aktualisieren/Terapkan Kode. Kalau kalian masih bingung, lihat saja bagian Demo dari settingan kode yang kalian inginkan. Jika semua sudah selesai, copy kode yang sudah diterapkan di bagian Das Script.

Ketiga, masukkan kode yang kita copy tersebut ke website atau blog kita. Dalam contoh kasus ini kita akan memasukannya ke Blogger. Buka Blogger kalian dan masuk ke bagian Layout, pilih bagian Add a Gadget. Setelah jendela gadget baru terbuka, pilih bagian HTML/Javascript.

Setelah itu, paste kode yang kita ambil dari antiblock.org ke dalam Blogger kemudian Simpan. Untuk melihat hasilnya, silahkan akses situs atau blog kalian menggunakan aplikasi AdBlocker. Jika skrip kode ini bekerja, maka ada beberapa peringatan yang memberitahu kita untuk menonaktifkan AdBlocker.

Untuk selengkapnya tentang tutorial ini, kalian dapat melihat video berikut :

Penjelasan Google Analytics UTM Parameters

Apa itu Google Analytics UTM (Urchin Tracking Module) Parameters?

Mungkin ini pertanyaan yang menggema di pikiran kalian saat melihat judul artikel ini. Google Analytics UTM Parameters merupakan parameters khusus yang digunakan untuk melacak sumber klik yang ada di website orang lain yang mengarah ke website kita. UTM Parameters berguna untuk melacak klik yang bersumber dari link di dalam bentuk/format email atau web. Ketika seorang pengguna mengklik link yang sudah kita tambahi Google Analytics UTM parameters didalamnya mengirimkan data tersebut ke Google Analytics, jadi seorang webmaster atau blogmaster mampu melihat darimana sumber klik tersebut.


Bentuk dan cara penggunaan UTM Parameters

Format atau bentuk UTM parameters biasanya berada di belakang link dengan berisi keterangan-keterangan tertentu yang akan kita masukkan ke dalam laporan Google Analytics kita. Berikut merupakan salah satu contoh penggunaan UTM parameters :

http://www.domain.com/page.html?utm_source=Partner-Domain &utm_medium=Mailer&utm_campaign=New-Product

Setelah alamat link kita, keterangan UTM parameters biasanya diawali dengan tanda ? dengan disertai keterangan value/nilai UTM tersebut di belakangnya dan diakhiri dengan tanda &. Kalian harus menyertakan nilai utm wajib yang dapat disertakan dan nilai utm optional yang dapat kalian tambahkan sendiri.

Berikut merupakan nilai/value UTM yang wajib disertakan :

• utm_source=XXX : Berisi tentang sumber link, contoh Search Engine, domain atau nama daftar email.
• utm_medium=XXX : Berisi cara atau metode utm dikirimkan, misalnya Email atau Iklan Banner.
• utm_campaign=XXX : Berisi nama atau keterangan yang membantu kalian melacak jenis kampanye berbeda, misal Kupon, Diskon atau Belanja Lebaran.

Berikut merupakan nilai/value UTM tambahan yang dapat disertakan :

• utm_term=XXX : Biasanya digunakan sebagai identitas keywords berbayar, misal laptop, sepatu, baju, dll.
• utm_content=XXX : Biasanya digunakan sebagai pembeda atau memisahkan 2 iklan yang tampil di laman yang sama.

Dimana hasil UTM Parameters tersebut dapat dilihat?

Setelah membuat UTM Parameters tersebut, kirimkan di dalam email, website orang lain, affiliasi atau iklan PPC (Paid Per Click). Anda dapat melihat laporan hasilnya di Google Analytics website anda di bagian Traffic Source -> All Traffic Sources.

Laporan tersebut dapat anda lihat setelah beberapa jam, karena Google Analytics membutuhkan waktu untuk melacak link yang anda bagikan dan tergantung dari trafik pengunjung yang anda terima.

Untuk Siapa UTM Parameters digunakan

UTM Parameters dapat digunakan oleh siapa saja yang ingin melacak darimana trafik pengunjungnya berasal. UTM Parameters sendiri biasanya digunakan oleh pengiklan, progam affliasi, melacak klik link yang kita kirimkan melalui email dan segudang tujuan lain termasuk untuk tujuan SEO website anda.

UTM Parameters merupakan tools yang sangat berguna dalam kampanye website. Seorang yang ingin membangun dan melacak link mereka dapat menggunakan tools ini. Selain gratis, karena disediakan oleh Google, tools ini benar-benar memberikan keterangan relevan darimana sumber trafik website kita.

Bagi kalian yang dipusingkan tentang bagaimana cara membuat UTM parameters ini atau tidak mau diribetkan dengan cara pembuatannya, gunakan saja tools UTM Link Builder ini. Setelah selesai, anda dapat menempatkannya dimana saja anda ingin melacak link tersebut. Jika ada kebingungan dan pertanyaan, tulis saja di kolom komentar.

Membuat Website dan Aplikasi di App Engine

1. Apa itu App Engine?

App Engine merupakan salah satu produk dari Google Cloud Platform yang memang ditujukan bagi para pengembang aplikasi. App Engine merupakan Platform as a Service (PaaS) yang menawarkan kepada pengembang website dan aplikasi mobile untuk membangun dan menjalankan aplikasi dengan infrastruktur yang dimiliki Google. Secara sederhana, kita memiliki hosting yang dikelola oleh Google, kita tinggal membuat dan menjalankan aplikasi yang ingin kita buat.

Sampai saat ini, App Engine mendukung 4 bahasa pemrogaman yang dapat dijalankan di App Engine itu sendiri, yakni PHP, Python, Java dan Go. Anda dapat mencicipi App Engine sesuai dengan bahasa pemrogaman yang anda kuasai. Namun jika anda hanya menguasai HTML dan CSS saja, anda tetap dapat memakai dan menggunakan App Engine, karena memang pada dasarnya layanan App Engine merupakan salah satu produk dari Google Cloud Platform yang notabene menyediakan layanan hosting bagi para developer, termasuk developer website.

Harga yang dikenakan oleh Google sendiri didasarkan pada kuota atau limit data, namun jika anda hanya menggunakan data storage dan traffic kurang dari 1 GB, anda tidak perlu membayar apapun, alias gratis. Namun jika melebihi dari kuota tersebut, anda akan dikenakan biaya dari Google. Untuk melihat biaya selengkapnya dari Google, silahkan lihat laman Quotas dari Google App Engine.

2. Untuk membuat website/aplikasi di App Engine, berikut yang harus anda lakukan :

• Download App Engine SDK

Harap diperhartikan bahwa masing-masing bahasa pemrogaman memiliki jenis nya sendiri. Jika anda ingin mengembangkan website atau aplikasi dengan bahasa PHP, anda harus memilih Google App Engine SDK for PHP. Begitu juga untuk bahasa pemrogaman lain seperti Python, Java dan Go.

• Daftar akun App Engine

Jika anda sudah memiliki akun Google, anda tinggal memasukkan password email anda dan akun tersebut akan terintegrasi dengan akun App Engine anda.

• Buat Website atau Aplikasi anda

Buat website atau aplikasi yang anda inginkan.

• Deploy aplikasi atau website tersebut

Jika website atau aplikasi tersebut sudah selesai, anda dapat menguploadnya ke Google App Engine. Nantinya, website atau aplikasi yang anda buat dapat diakses dengan nama nama-aplikasi.appspot.com.

3. Membuat Website sederhana di App Engine

1. Yang pertama anda lakukan adalah masuk ke bagian Developer Console. Dibagian sebelah kiri atas, klik bagian Create Project.

Setelah itu akan keluar jendela baru yang berisi informasi nama project yang akan kita buat. Ketik nama project yang akan kita buat, pastikan nama project itu masih kosong.

2. Setelah nama project diisi, kita akan masuk ke laman project tersebut. Klik Deploy a Hello World App untuk melihat apakah kita bisa meng-upload aplikasi atau website yang kita inginkan.

3. Setelah itu, kita harus memilih jenis bahasa pemrogaman yang dipakai dalam aplikasi yang ingin kita kembangkan. Dalam contoh ini, bahasa yang dipilih adalah PHP.

Di bagian Explore The Starter Code ditunjunkan bahwa ada 2 kode disana, yaitu app.yaml dan helloworld.php, disertai tampilan kode tersebut. Kode app.yaml merupakan kode dimana berisi keterangan informasi bahasa pemrogaman yang kita pakai disertai dengan file yang akan kita upload, seperti nampak pada gambar dibawah.

Sedangkan file helloworld.php merupakan file jenis php yang akan kita upload. Dalam file ini hanya berisi kode sederhana yang akan menunjukkan kata hello world di browser kita.

Jika anda ingin mengembangkan kode yang lebih rumit, anda dapat mencobanya sendiri.

3. Setelah semua kode kita anggap selesai, berikutnya adalah meng-upload kode tersebut ke server. Caranya buka software Google App Engine Launcher yang sudah kita download sebelumnya. Klik bagian File dan Create New Application atau singkatnya CTR+N. Setelah itu muncul jendela baru yang mensyaratkan agar kita mengisi semua form tersebut.

Berikut keterangannya :

Application name : Isi dengan nama aplikasi project yang pertama tadi kita buat.
Parent directory : Berisi direktori folder tempat kita menyimpan kode yang akan kita buat. Tinggal klik browse dan cari dimana anda menyimpan kode project anda.
Runtime : pilih PHP karena dicontoh ini menggunakan PHP sebagai bahasa pemrogamannya.

Setelah semua terisi, klik Create. Folder keterangan aplikasi yang akan kita upload akan secara otomatis dibuat oleh software ini.

Klik bagian yang akan kita upload, kemudian klik tombol Deploy dibagian atasnya. Secara otomatis, App Engine Launcher akan meng-upload data tersebut ke server Google. Tunggu prosesnya sampai ada keterangan :

You can close this window now.

Selesai, dan anda dapat mengakses aplikasi atau website yang sudah anda deploy tadi dengan format link biasanya nama-project-anda.appspot.com.

Icon Social dengan gambar Font Awesome

Ketika kita surfing di internet, kita biasanya melihat banyak sekali website yang menyediakan link ke arah sosial media mereka seperti facebook, twitter, google+ dan masih banyak lagi. Jika kita ingin membuat social button seperti itu, ada beberapa kelemahan yang kita rasakan sebagai seorang blog atau web developer, yaitu social button gambar tersebut biasanya berupa gambar yang mempunyai kekurangan seperti editing yang susah dalam format template yang responsive. Kelemahan social button gambar yang lainnya misalnya waktu loading web/blog semakin bertambah karena ukuran file gambar yang dipakai juga biasanya mempengaruhi kecepatan situs tersebut ditampilkan.

Untuk mengatasi beberapa masalah tersebut, kita bisa memanfaatkan social icon dengan format font. Selain ukurannya yang kecil yang akan berpengaruh pada kecepatan suatu situs, font juga mudah diformat terutama dari ukuran untuk keperluan template-template web/blog yang responsive.

Sebelum menulis kode HTML social icon ini, kita harus pastikan kode css untuk font yang akan digunakan sudah terpasang di web/blog kita. Copy dan paste kode css ini ke dalam tag head di template kalian.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

Baris kode css tersebut merupakan kode yang akan menampilkan social icon di template kalian.

Kode HTML Social Icon

Berikut merupakan kode yang HTML yang kalian pasang untuk menampilkan icons font. Pasang kode ini di tempat anda ingin menampilkan social icons.

<div id="socialicons">
<a class="icon" href="LINK" title="Follow with Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="LINK" title="Follow with Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="LINK" title="Follow with Instagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="icon" href="LINK" title="Follow with Google Plus" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="icon" href="LINK" title="Follow with Bloglovin" target="_blank"><i class="fa fa-heart"></i></a>
<a class="icon" href="LINK" title="Follow with Pinterest" target="_blank"><i class="fa fa-pinterest"></i></a>
<a class="icon" href="LINK" title="Follow with YouTube" target="_blank"><i class="fa fa-youtube"></i></a>
<a class="icon" href="LINK" title="Follow with Tumblr" target="_blank"><i class="fa fa-tumblr"></i></a>
<a class="icon" href="LINK" title="Follow with RSS" target="_blank"><i class="fa fa-rss"></i></a>
<a class="icon" href="mailto:LINK" title="Email Me" target="_blank"><i class="fa fa-envelope"></i></a>
</div>

Setiap baris kode diatas dipisahkan sesuai dengan jenis icon yang akan kita gunakan. Icon-icon diatas merupakan icon-icon yang sering kita lihat dan gunakan untuk blog atau website.

CSS Styles untuk Social Icon

Untuk kode CSS styles nya sendiri, disini ada beberapa pilihan dimana kalian dapat memilih pilihan bentuk yang cocok dengan selera kalian.

• CSS styles 1

Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk square seperti ditunjukkan gambar di bawah :

Berikut kode CSS yang kita pakai :

#socialicons {
text-align: center;
}
#socialicons .icon{
background: MAIN_COLOR;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
  margin: 0 1px 8px;
}
#socialicons .icon:hover{
background: HOVER_COLOR;
}

• CSS styles 2

Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk circle seperti ditunjukkan gambar di bawah :

Berikut kode CSS yang kita pakai :

#socialicons {
text-align: center;
}
#socialicons .icon{
background: MAIN_COLOR;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
  margin: 0 1px 8px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
}
#socialicons .icon:hover{
background: HOVER_COLOR;
}

• CSS styles 3

Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk square outline seperti ditunjukkan gambar di bawah :

Berikut kode CSS yang kita pakai :

#socialicons {
text-align: center;
}
#socialicons .icon{
color: MAIN_COLOR;
border: 1px solid #CFCFCF;
display: inline-block;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
  margin: 0 1px 8px;
}
#socialicons .icon:hover{
color: HOVER_COLOR;
border: 1px solid #CFCFCF;
}

• CSS styles 4

Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk circle outline seperti ditunjukkan gambar di bawah :

Berikut kode CSS yang kita pakai :

#socialicons {
text-align: center;
}
#socialicons .icon{
color: MAIN_COLOR;
border: 1px solid #CFCFCF;
display: inline-block;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
  margin: 0 1px 8px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
}
#socialicons .icon:hover{
color: HOVER_COLOR;
border: 1px solid #CFCFCF;
}

• CSS styles 5

Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk plain seperti ditunjukkan gambar di bawah :

Berikut kode CSS yang kita pakai :

#socialicons {
text-align: center;
}
#socialicons .icon{
color: MAIN_COLOR;
display: inline-block;
font-size: 20px;
text-align: center;
margin: 0 6px 5px;
}
#socialicons .icon:hover{
color: HOVER_COLOR;
}

Membesarkan/Mengecilkan Social Icons

Untuk membesarkan/mengecilkan ukuran icon tersebut, caranya cukup sederhana, yaitu dengan merubah format ukuran yang digunakan dalam kode CSS yang dipakai, misalnya :

        width: 34px;
height: 34px;
line-height: 34px; 

Kode diatas digunakan untuk merubah font dengan nilai tinggi dan panjang sebesar 34 piksel. Anda dapat merubah, baik mengecilkan atau membesarkan ukuran icons tersebut sesuai dengan format yang cocok bagi template anda.

Selain icon-icon diatas, kalian juga dapat menambah jumlah icon yang dapat ditampilkan dengan mengunjungi developer pengembang icon ini di http://fortawesome.github.io/Font-Awesome/icons/. Disana kalian dapat memilih sampai dengan 500+ berbagai jenis icon yang ditawarkan secara gratis.

Selamat berkreasi dengan berbagai icon-icon social media di website atau blog kamu.

Thanks for ThesePaperHearts for this tutorial.

Social Share Button Sederhana

Bagi seorang web ataupun blog developer, social sharing button merupakan hal yang wajib dan harus ada di website atau blog kita. Social share button berfungsi untuk membagikan postingan web kita ke berbagai media sosial. Selain fungsinya sebagai salah satu cara untuk mempromosikan website kita secara gratis, social sharing juga sekarang dijadikan pengukur bagus tidaknya SEO website atau blog kita.

Saat ini sudah banyak berkembang plug-in ataupun tutorial yang membahas tentang social share button. Namun ketika kita memakai plug-in dari pihak lain, biasanya mereka menitipkan link-link mereka ke plug-in tersebut. Disamping itu, bentuk plug-in social share button hanya sebatas itu-itu saja dan jarang bervariasi. Hal tersebut menjadikan tampilan website atau blog kita serupa dengan orang lain. Kalau kita mempunyai tampilan yang berbeda dari yang lain, tentunya itu akan menjadi nilai plus tersendiri.

Berikut merupakan tampilan social share button sederhana yang dapat dijadikan referensi buat kalian yang menyukainya.

Untuk membuatnya, berikut kode-kode yang diperlukan.

Kode HTML

<div class='share-box'>
<div align='center'>
  <h4>Share this post <i class='fa fa-smile-o'/></h4>
<div class='share-btn twitter'><a href="https://twitter.com/share"
data-count='vertical' class="twitter-share-button" data-related="blognusa" data-hashtags="blognusa">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class='share-btn google-plus'>
<g:plus action='share' annotation='vertical-bubble' lang='en-US'/>
</div>
<div class='share-btn facebook'>
<div class='fb-share-button' data-layout='box_count'/>
</div>
  </div>
</div>

Tempatkan kode html tersebut di posisi dimana anda ingin menampilkan share button. Kemudian, untuk kode CSS nya, berikut kode-kodenya :

<style type='text/css'>
.share-box {
  background-color:#fff;
  font-size:14px;
  padding:10px 0 11px;
  position:relative;
  margin-top:10px;
  color:#444;
  box-shadow:0 0 0px 2px #f5f5f5;
}
a.more {
  font-family:&#39;Oswald&#39;;
  text-transform:uppercase;
  background:#01c0f4;
  font-size:14px;
  color:#fff;
  text-align:center;
  padding:1px 6px;
  margin-top:-6px;
  border-radius:2px;
}
a.more:before {
  content:&quot;\f0fe&quot;;
  font-family:FontAwesome;
  font-style:normal;
  font-weight:normal;
  font-size:18px;
}
a.more:hover {
  background:#eac965;
  color:#fff;
}
.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.2em;
    width: 80px;
    height: 70px;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
}
.share-btn:hover {
  color: #eeeeee;
}
.share-btn:active {
  position: relative;
  top: 2px;
  box-shadow: none;
  color: #e2e2e2;
  outline: none;
}
.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.email       { background: #444444; }
</style> 

Share button ini disesuaikan dengan model vertikal dengan penghitung jumlah pengguna yang membagikan konten anda. Kalian dapat mengedit sendiri tampilannya, baik warna background maupun bentuk social share nya dengan mengedit kode html dan css di atas.

Social share button sederhana ini dapat dipasang di blog atau website kalian. Untuk melihat tampilan demo kode social share sederhana ini di CodePen, silahkan klik link dibawah.

• LIVE PREVIEW