Featured Posts

thumbnail

Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO

Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly
Template Bawaan Blogger Bisa Dijadikan Responsive (Mobile-Friendly) dan Lebih SEO Friendly.

TEMPLATE default blogger, kita pilih saja template Simple, bisa dijadikan responsive mobile-friendly dan lebih seo friendly.

Kita tinggal memodifikasinya dengan menambahkan kode-kode tertentu dan menambah elemen (widget) yang membuat template blog lebih ramah mesin pencari.

Saat membuat blog, pilih tema / template Simple seperti gambar ilustrasi di atas, lalu lakukan langkah di bawah ini.

Dengan menjadikannya responsive, maka blog Anda akan lebih ramah mesin telusur, juga bebas credit link karena Anda sendiri yang memodifikasinya.

Cara Membuat Template Blogger Jadi Responsive

Berikut ini Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly. 

1. Klik Tema  / Template > Edit HTML

Template Tema Edit HTML

2. Hapus Kode Navbar

Cari kode berikut ini dan hapus:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
</b:includable>
</b:widget>
</b:section>

3. Cari dan Ganti kode:

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

dengan kode:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

4. Cari dan Ganti kode:

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
dengan:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

5. Simpan kode berikut ini di atas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width:800px){
.sidebar .widget,.sidebar .widget img {width:100%}
#menu {width: 95%;}
.main-inner .columns {padding-left: 0px;padding-right: 240px;}
.main-inner .fauxcolumn-right-outer {width: 230px;}
.main-inner .column-center-inner {padding: 0;}
.main-inner .column-right-outer {width: 250px;margin-right: -250px;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
.content {position: relative;word-wrap: break-word;width: 97%;margin: 0 5px;}
body {background:#fff}
}
@media screen and (max-width:400px){
.main-inner .column-center-inner {padding: 0 15px 0 0;}
.sidebar {margin:10px 0 5px}
}
</style>

6. Save. Simpan Template!

Kini template blogger Anda sudah responsive. Lakukan langkah berikutnya dengan klik  menu Tema (Themes) dan setting template mobile sebagaimana gambar berikut:

setting template mobile

Jika pilih "Yes", maka yang tampil di HP nanti masih template bawaan blogger. Makanya, pilih "No". Setting ini pula yang harus Anda lakukan jika menggunakan template blog yang sudah responsive lainnya.

Sekarang, tes blog Anda di Mobile-Friendly Test

test responsive blog

Selesai!
Cara Membuat Template Blogger Jadi Responsive sudah selesai. Anda bisa berhenti di sini jika sudah merasa cukup.

Namun, jika ingin lebih menjadikannya SEO Friendly, maka lakukan perubahan di Title Tags.

Cara Membuat Template Blogger Lebih SEO Friendly

1. Memasukkan Meta Tags SEO Friendly

- Tema > Edit HTML
- Cari dan Hapus Kode:

<title><data:blog.pageTitle/></title>

Ganti dengan kode Title Tags SEO berikut ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
<meta content='global' name='distribution'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='id' name='language'/>
<meta content='Indonesia' name='country'/>
</b:if>

Save! Simpan Template.
Kini blog Anda sudah responsive sekaligus SEO Friendly.

Namun, tampilannya masih standar bawaan blogger. Lakukan langkah berikutnya di bawah ini.

1. Membuat Auto Readmore

Dengan memasang kode-kode di bawah ini, tampilan blog yang menggunakan template bawaan blogger akan menjadi berupa judul, gambar thumbnail, dan ringkasan yang diambil dari alinea pertama postingan blog.

- Simpan kode berikut ini di atas kode ]]></b:skin>

.thumbnail-post {width:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;}

- Hapus dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- Auto Read More start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' src='https://lh3.googleusercontent.com/-qJ5VVlQsLfY/VOBUcH3BV_I/AAAAAAAAGsA/MkUD8LKAhTE/s220-Ic42/noimage.png'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<!-- Auto Read More end -->

Simpan Template!

2. Menampilkan Related Posts

- Copy & Paste kode berikut ini di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

- Copas kode berikut ini di atasnya kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

- Copas kode berikut ini di atas kode <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

Save Template! Simpan.

3. Menambahkan Breadcrumbs

Breadcrumb adalah link internal dan navigasi blog yang menunjukkan halaman depan (home), label, dan judul postingan.

- Copas kode berikut ini di atas kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; line-height:1.4em; border-bottom:1px solid #f1f1f1}

-  Copas kode berikut ini di bawah kode <div class='post hentry'> atau <div class='post hentry .... '>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

- Save Template!

Selesai!

Tambahan:
Untuk menyembunyikan tanggal posting di atas judul, sekaligus menyembunyikan kode obeng dan tang (quickedit), copas kode berikut ini di atas kode ]]></b:skin>

.quickedit,.date-header {display:none}

Anda sudah Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly. Selamat! (www.komunikasipraktis.com).*

Komunikasi Praktis Updated at: Thursday, November 16, 2017
thumbnail

Teori-Teori Komunikasi Massa - Pengaruh Media terhadap Publik

Teori-Teori Komunikasi Massa
Teori-Teori Komunikasi Massa

Teori Komunikasi Massa (Mass Communication Theory) berintikan pengaruh atau dampak pemberitaan media massa (media effect) kepada publik.

Teori komunikasi massa menunjukkan atau mengambarkan besarnya pengaruh sajian media terhadap masyarakat.

Media paling berpengaruh adalah televisi karena TV merupaka "media pandang dan dengar" sehingga mata, telinga, pikiran, serta perasaan audiens fokus kepada tayangan TV.

Komunikasi Massa adalah proses penyampaian pesan melalui media massa. Komunikasi Massa (Mass Communication) singkatan dari Komunikasi Media Massa (Mass Media Communication), yakni komunikasi melalui media.

Media Massa (Mass Media) jura merupakan singkatan dari Media Komunikasi Massa (Mass Communication Media), yakni sarana atau saluran komunikasi kepad publik (massa).


Teori-Teori Komunikasi Massa

Berikut ini Teori-Teori Komunikasi Massa sebagaimana dikemukakan para ahli atau akademisi bidang komunikasi.

1. Teori Peluru Magis (Magic Bullet Theory, Hypodermic Needle Theory)
  • Media massa mengubah atau mengendalikan perilaku publik.
  • Publik tidak berdaya menerima berondongan “peluru” media (pemberitaan).
  • Media massa memiliki kekuataan perkasa, komunikan dianggap pasif.
  • Dikemukakan Wilbur Schramm tahun 1950-an, namun dicabut kembali tahun 1970-an karena ternyata publik tidak pasif.

2. Teori Proses Seleksi (Selective Processes Theory)
  • Public cenderung melakukan “terpaan seleksi” (selective exposure) dan menolak pesan yang berbeda dengan keyakinan mereka.
  • Penerimaan selektif mengurangi dampak media. 

3. Teori Pembelajaran Sosial (Social Learning Theory)
  • Pemirsa meniru apa yang mereka lihat di televisi melalui proses “pembelajaran hasil pengamatan” (observational learning), misalnya menggandrungi kehidupan glamour seperti di televisi. 
4. Teori Difusi Inovasi (Innovation Diffusion Theory)
  • Dikemukakan Everett M. Rogers.
  • Media berperan menyebarkan pesan-pesan sebagai ide, karya, atau objek yang dianggap baru.
  • Media mempengaruhi publik untuk mengadopsi atau menolak sesuatu yang baru atau berbeda. 

5. Teori Kultivasi (Cultivation Theory)
  • Media, khususnya TV, merupakan sarana belajar tentang masyarakat dan kultur kita; juga belajar tentang dunia, orang-orangnya, dan adat kebiasaannya.
  • Televisi mempengaruhi ide penonton tentang gambaran dunia. 

6. Teori Langkah (Step Flow Theory)
  • Pengaruh media massa berlangsung melalui tahapan-tahapan atau langkah.
  • Terdiri dari (1) Teori Satu Tahap –One Step Flow, media langsung menjangkau/mempengaruhi komunikan, (2) Teori Dua Tahap – Two Step Flow, pengaruh media melalui pihak ketiga, yakni “pemimpin opini” (opinion leader) yang lebih dipercaya publik, dalam situasi yang lebih pribadi, (3) Teori Banyak Tahap –Multistep Flow, pengaruh media mengalir bolak-balik dari media ke khalayak, kembali ke media, dan kembali ke khalayak, dst. 

7. Teori Penggunaan dan Pemenuhan (Uses and Gratification Theory)
  • Publik menggunakan media untuk memenuhi kebutuhannya.
  • Menggambaran bagaimana publik menggunakan media untuk memuaskan berbagai kebutuhan hidupnya.
  • Audiens proaktif dan mencari media yang dapat memenuhi kebutuhannya.
  • Publik memilih apa yang mereka ingin lihat atau baca.
  • Media bersaing untuk memenuhi kebutuhan individu publik

8. Teori Kritis (Critical Theory)
  • Concerned with distribution of power in society and the way in which certain elements are dominated by others
  • Media can create symbols and images that dominate or opress certain groups
  • Frankfort School (Adorno), Entertainment industry manufactures demand, places emphasis on material goods and consumption for the benefit of the few rich magnates.

9. SPIRAL OF SILENCE THEORY
  • Elisabeth Noelle-Neumann
  • The media publicises opinion that is mainstream or fringe
  • Individuals who perceive their own opinion is accepted will express it, whilst those that don’t supress their views
  • People adjust their opinions according to their perceptions to avoid being isolated
  • Innovators, change agents and the avant-garde don’t mind being isolated so are unafraid to voice differring opinions.
Demikian Teori-Teori Komunikasi Massa - Pengaruh Media terhadap Publik sebagaimana dikemukakan para ahli. Wasalam. (www.komunikasipraktis.com).*

Referensi:
Dennis McQuail, Teori Komunikasi Massa: Suatu Pengantar, Erlangga, Jakarta, 1987.
William R. Rivers at.al., Media Massa dan Masyarakat Modern: Edisi Kedua, Prenada Media, Jakarta, 2003.
Winarni, Komunikasi Massa: Suatu Pengantar, UMM Press, 2003.
“Mass Communication Theories”, Brian Brown, www.aber.ac.uk.

Komunikasi Praktis Updated at: Wednesday, November 08, 2017
thumbnail

Cara Mendapatkan Iklan Adsense Matched Content (Konten yang Sesuai) dari Google

Cara Mendapatkan Iklan Adsense Matched Content (Konten yang Sesuai) dari Google
Cara Mendapatkan Iklan Adsense Matched Content (Konten yang Sesuai) dari Google

SEBELUMNYA kita sudah bahasa Unit Iklan Google AdSense terbaik yang paling banyak menghasilkan uang.

Kali ini kita ulas ringkas tentang  Iklan Adsense Matched Content (Konten yang Sesuai) yang pengaruh ke penghasilannya secara tidak langsung.

Pada dasarnya, Iklan Adsense Matched Content (Konten yang Sesuai) ini bukan Adsense, meskipun biasanya ada satu-dua iklan Google yang ditampilkan.

Fungsi Iklan Adsense Matched Content (Konten yang Sesuai) sama dengan widget Related Post atau Posting Terkait, yaitu meningkatkan jumlah Page Views atau internal link, karena mayoritas mengiklankan postingan kita sendiri. 

"Konten yang Sesuai adalah bantuan Google untuk mempromosikan konten blog kita kepada pengunjung," tulis Google di laman Tentang Fitur Konten yang Sesuai.


"Dengan menawarkan lebih banyak konten yang relevan kepada pembaca, Anda dapat meningkatkan tampilan laman situs, waktu yang dihabiskan di situs, loyalitas pembaca, tayangan iklan, dan pada akhirnya pendapatan iklan."

Unit Matched Content diluncurkan Google pada 22 April 2015. Tujuannya memudahkan pengguna menemukan konten yang dicarinya serta membantu publisher untuk mempromosikan kontennya secara gratis di blog itu sendiri.

Sekali lagi, layaknya Artikel Tekait (Related Posts), fungsinya adalah meningkatkan pageviews dan dari pageviews itulah baru bisa meningkatkan earning adsense. Jadi, unit iklan konten yang sesuai ini secara tidak langsung bisa meningkatkan penghasilan.

Contoh Tampilan Iklan Adsense Matched Content (Konten yang Sesuai) ada di bagian bawah posting ini atau seperti screenshot berikut ini:

 Iklan Adsense Matched Content (Konten yang Sesuai)

Cara Mendapatkan Iklan Adsense Matched Content (Konten yang Sesuai)

Cara mendapatkan iklan konten yang sesuai adalah berusaha meningkatkan jumlah pengunjung blog sebanyak mungkin.

Tidak ada angka pasti, namun diperkirakan mimal 1000 pengunjung unik per hari --lebih banyak dari jumlah pengunjung blog yang bisa diterima Google AdSense, yakni minimal 250 pengunjung  unik per hari.

Dijelaskan Google: "Fitur Konten yang sesuai tersedia untuk penayang tertentu. Agar memenuhi syarat, Anda harus memiliki situs yang memenuhi persyaratan minimum untuk volume lalu lintas dan jumlah laman yang unik."

"Kami memberlakukan persyaratan ini untuk memastikan bahwa Konten yang sesuai memberikan pengalaman yang baik bagi pengunjung."

Periksa halaman Iklan saya di akun AdSense untuk melihat apakah Anda dapat membuat unit Konten yang sesuai.

Dari berbagai forum disebutkan, akun AdSense yang mendapatkan iklan konten yang sesuai ini adalah yang menggunakan akun AdSense Non-Hosted, yakni akun adsense melalui blog selfhosted dengan nama domain sendiri, bukan akun hosted yang menggunakan blog gratisan (blogger).*

Komunikasi Praktis Updated at: Friday, October 27, 2017
thumbnail

Ukuran Unit Iklan Google AdSense Terbaik Paling Menghasilkan

 Unit Iklan Google AdSense Terbaik
Ukuran Unit Iklan Google AdSense Terbaik Paling Menghasilkan.

PUBLISHER Google AdSense tentu mencari ukuran unit iklan terbaik yang paling menghasilkan.

Kita mulai dari versi Google sendiri. Disebutkan di laman Bantuan AdSense, sebagai acuan sederhana, ukuran iklan yang lebar cenderung berkinerja lebih baik daripada iklan yang memanjang karena lebih mudah dibaca.

Pembaca menyerap informasi dalam "unit pikiran", hanya beberapa kata dalam satu waktu. Ukuran yang lebih lebar memudahkan pengguna membaca lebih banyak teks dalam sekilas tanpa harus berpindah baris dan kembali ke margin kiri setiap beberapa kata seperti yang terpaksa dilakukan pada iklan yang lebih sempit.

"Jika ditempatkan dengan benar, ukuran iklan lebar ini dapat meningkatkan penghasilan Anda secara signifikan," tulis Bantuan AdSense.

Kesimpulannya, Ukuran Unit Iklan Google AdSense Terbaik Paling Menghasilkan atau ukuran yang dianggap paling efektif adalah sebagai berikut:
  1. Kotak Besar 336x280
  2. Kotak Sedang 300x250
  3. Spanduk Utama 728x90
  4. Separuh Laman 300x600
  5. Di Seluler: Spanduk Seluler Besar 320x100. 

Ukuran Unit Iklan Google AdSense Terbaik Paling Menghasilkan


Ingatlah selalu bahwa meskipun beberapa ukuran iklan tersebut biasanya berkinerja baik, sebaiknya gunakan ukuran yang selaras dengan laman.

"Akan lebih baik bila Anda menambahkan satu unit iklan yang disarankan daripada menambahkan dua unit iklan yang lebih kecil saling berdampingan," demikian saran Google.

Dari berbagai forum, ada juga yang menyebutkan ukuran iklan 160x600.

Ukuran 160×600 sebaiknya dipasang dalam artikel, tepatnya di bawah judul, dengan menggunakan float left atau right.

Ukuran Iklan 336×280  sebaiknya ditempatkan di Bawah Artikel.

Demikian Ukuran Unit Iklan Google AdSense Terbaik Paling Menghasilkan. Baca Juga: Cara Menghasilkan Uang dari Blog. (www.komunikasipraktis.com).*

Komunikasi Praktis Updated at: Wednesday, October 18, 2017
Subscribe via Email
Copyright © Komunikasi Praktis. All rights reserved. New Johny Wuss Template by Contoh Blog & Creating Website
Web Partners: Romeltea Media - Blog Romeltea - Risalah Islam - Info Bandung. Member of BATIC Media Network