View AllFeatured

Cara Setting Don't Track Your Own Pageviews Blog Secara Permanen

Cara Setting Don't Track Your Own Pageviews Blog Secara Permanen

Cara Setting Don't Track Your Own Pageviews Blog Secara Permanen

Pageviews adalah jumlah halaman blog atau postingan yang dilihat, dibuka, dikunjungi, atau dibaca oleh pengunjung.

Kita bisa (dan biasa) mengeceknya di menu Stats > Overview di dashboard blogger. Seperti dalam gambar di bawah ini.

Cara Mengatasi Don't track your own page views Blog


Halaman yang dibuka oleh kita sebagai admin/pemilik blog juga dihitung oleh Blogger.

Nah, agar pageviews blog kita asli hasil kunjungan orang lain di luar sana, kita harus mengatur atau melakukan setting. Caranya, klik link bertuliskan "Manage tracking your own pageviews" di bawah statistik jumlah kunjungan.

Manage tracking your own pageviews

Akan muncul halaman baru, lalu centang Don't track my views for this blog yang memberi perintah kepada Blogger untuk tidak menghitung jumlah halaman yang kita buka sendiri.

Manage tracking your own pageviews
Pageviews adalah seberapa banyak halaman yang dilihat atau dibaca oleh pengunjung situs atau blog kita.

Masalahnya, langkah di atas harus kita lakukan lagi setelah kita mematikan komputer dan login ke blog. Ribet 'kan? Ikuti panduan di bawah ini.

Cara Setting Don't Track Your Own Pageviews Blog Secara Permanen

Agar settingan pageviews permanen, gak mesti berulang-ulang dilakukan tiap hari, lakukan langkah berikut ini yang CB kutip dari Forum Quora.

1. Klik menu "Manage tracking your own pageviews" atau buka https://[namabloAnda].blogspot.in/b/statsCookieManage.

Untuk blog Custom Domain yang belum mengaktifkan https, akan muncul halaman error seperti gambar di bawah ini. Cara mengatasinya, hapus huruf s di adress bar, yang tadinya https://menjadi http://

this site cant be reached


2. Jika sudah terbuka, centang Don't track my views for this blog seperti pada gambar ketiga di atas.

3. Klik atau tekan F12 di kyboard komputer Anda. Akan muncul jendela baru
4. Klik menu Console

Cara Setting Don't Track Your Own Pageviews Blog Secara Permanen

5. Copas kode berikut ini ke dalam kolom yang tersedia.

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
createCookie("_ns", "2", 999);

Cara Setting Don't Track Your Own Pageviews Blog Secara Permanen


6. Klik Enter!

Selesai. Anda tidak perlu lagi berulang-ulang melakukan setting don't trak own pageviews. Silakan buktikan dengan restrart komputer Anda atau besoknya. It works for me.

Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Header Blog Dua Kolom Responsive

Cara Membuat Header Blog Dua Kolom Responsive

POSTING ini merupakan update atau kelanjutan dari posting sebelumnya: cara membuat header blog dua kolom dan cara membuat header blog responsive, sekaligus melengkapi cara membuat header blog ala CB Blogger.

Cara Membuat Header Blog Dua Kolom Responsive


Cara Membuat Header Blog Dua Kolom Responsive ini untuk mengganti header blog bawaan blogger. Template bukan default blogger biasanya sudah dua kolom dan/atau sudah responsive.

Cara Membuat Header Blog Dua Kolom Responsive

Ini cara mengganti header blog di template bawaan blogger versi Simple.
1. Tema > Edit HTML
2. Cari kode berikut ini:

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}

3. Hapus dan ganti dengan kode berikut ini:

#header-wrapper {margin:20px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%; max-width:468px;}
#header-wrapper {margin:30px auto;padding:0;overflow:hidden;max-width:920px;overflow:hidden;} #header {float:left;width:100%;max-width:430px;color:#333;margin:0;}
#header h1, #header h2, #header p {font-family:Roboto;font-size:240%;font-weight:700;color:#333;text-transform:uppercase;}
#header a {color:#333;text-decoration:none;transition:all 0.3s ease-out;}
#header a:hover {color:#398dcc;}
#header .description {font-family:Roboto;font-size:100%;font-weight:400;color:#666;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%; max-width:468px;} .header-right img {display:block;} .Header h1,.Header h2 {margin-bottom:0;}
@media screen and (max-width:960px) {
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header {margin:20px auto;padding:0 30px;background:transparent;max-width:80%;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0;margin:20px auto;}
}
@media only screen and (max-width:640px){
#header-wrapper{padding:0;margin:20px auto;}
#header {min-width:initial;background:none;margin:20px auto;padding:0 5px;}
#header .description {font-size:100%;line-height:1.5;}
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
}

4. Cari dan hapus kode berikut ini yang diawali dengan kode <header>  hingga </header> seperti ini:

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='New SEO Blogger Themes (Header)' type='Header'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>273</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

5. Ganti dengan kode yang di bawah ini.

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
 <b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
 <b:widget id='Header1' locked='true' title='CB Blogger (Header)' type='Header' version='1'> <b:widget-settings> <b:widget-setting name='displayUrl'/> <b:widget-setting name='displayHeight'>0</b:widget-setting> <b:widget-setting name='sectionWidth'>-1</b:widget-setting> <b:widget-setting name='useImage'>false</b:widget-setting> <b:widget-setting name='shrinkToFit'>false</b:widget-setting> <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting> <b:widget-setting name='displayWidth'>0</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <b:include name='title'/> </div> <b:include name='description'/> </div> <b:else/> <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <b:include name='title'/> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <b:include name='title'/> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <h1 class='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h1> <b:else/> <h2 class='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h2> </b:if> <b:else/> <h2 class='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h2> </b:if> </b:includable> </b:widget> </b:section> <b:section class='header-right section' id='header-right' maxwidgets='1' showaddelement='yes'/> </div> <div class='clear'/>

6. Untuk merapikan layout (tata letak) header di dashboard, copas kode berikut ini di bawah kode <b:template-skin>

body#layout #header-wrapper {min-height:0px;width:100%;}
body#layout #header {width:30%;}
body#layout #header-right {width:70%;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}

7. Save! Simpan Template

Header plus Menu

Untuk membuat header blog plus menu responsive, ini salah satu pilihannya:


Demikian Cara Membuat Header Blog Dua Kolom Responsive. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Related Post Simple Fast Loading - Judul Tulisan Saja

Cara Membuat Related Post Simple Fast Loading - Judul Tulisan Saja

Cara Membuat Related Post (Posting Terkait/Artikel Terkait) yang Simple Fast Loading di  Bawah Postingan Blog blogspot. Daftar Judul Saja.

Cara Membuat Related Post Simple Fast Loading - Judul Tulisan Saja
Related Posts adalah daftar tulisan/artikel yang satu label atau satu topik. Dimunculkan  di bawah setiap postingan blog. Fungsinya sebagai internal link sekaligus navigasi halaman untuk meningkatkan pageviews.

Template bawaan blogger tidak menyertakan related post, sehingga harus dipasang sendiri.

Template premium atau template yang didesain pembuat template biasanya sudah menyertakan related post.

Jika ingin mengubahnya menjadi related post simple, agar loading blog lebih ringan, harus menghapusnya lebih dulu.

Ini penampakan related post simple di bawah postingan blogger.

Cara Membuat Related Post Simple Fast Loading - Judul Tulisan Saja

Cara Membuat Related Post Simple Fast Loading

1. Klik Tema > Edit HTML

Tema > Edit HTML

2. Copas 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}
3. Copas kode berikut ini di atas kode </head>

<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>
4. Copas kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<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>
5 Simpan template!

CARA LAIN

Cara Cara Membuat Related Post Simple lainnya adalah dengan menambahkan kode di tata letak/layout. Semoga masih berfungsi.

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget kosongkan. Copas kode berikut ini di kolom konten.

<!--SIMPLE RELATED POSTS-->
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
<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>
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>
<!--SIMPLE RELATED POSTS-->

3. Simpan! Selesai.

Jika ingin menggunakan related post dengan gambar, silakan cek: Cara Memasang Related Post Gambar Thumbnail Responsive.

Demikian Cara Membuat Related Post Simple Fast Loading - Judul Tulisan Saja. Good Luck and Happy Blogging! (www.contohblog.com).*

Cara Mengatasi Gambar Buram (Blur) di Blogger

Cara Mengatasi Gambar Buram (Blur) di Blogger

Gambar Thumbnail Buram
Cara Mengatasi Gambar Thumbnail Buram di Halaman Depan Blog.

GAMBAR buran (blur) alias tidak jelas menjadi masalah serius bagi sebagian blogger.

Gambar atau postingan blog jadi tidak enak dipandang kerena gambarnya blur di halaman depan ataupun halaman dalam.

Gambar buram terjadi karena ukuran thumbnail asli 72 pixel. Jika ukuran tampilan lebih besar, misalnya jadi 100 atau 300 pixel, maka gambar akan blur.

Default image thumbnail auto read more 72 pixel di homepage, biasanya gambar jadi buram alias blur aka blurry image.

Untuk mengatasinya, tinggal memasukkan kode di bawah ini dalam template. Kode ini di-share dte.web.id.

Cara Mengatasi Gambar Buram di Homepage Blogger

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

3. Save! Simpan template.

CARA LAINNYA

Jika kode di atas tidak berfungsi atau gagal mengatasi gambar buram halaman depan blog Anda, maka lakukan langkah ini:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]>
</script>

Catatan:
- Kode .post-thumbnails adalah kode image/gambar yang buram di halaman depan. Sesuaikan dengan kode gambar thumbnail halaman depan blog Anda.
- Jika yang buram adalah gambar related post, maka ganti kode tersebut dengan kode gambar related post, misalnya .related-posts 

3. Pastikan ada link ke kode jQuery di template blog Anda, seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>

Jika kode jQuery tersebut belum ada, maka tambahkan di atas kode no. 2 atau di atas kode </head>

4. Save template!

Demikian Cara Mengatasi Gambar Buram (Blur) di Halaman Depan Blogger.

CARA LAIN LAGI Mengatasi Gambar Buram

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body> atau </head>

<script>//<![CDATA[function resizeThumb(parentID, size) { var parent = document.getElementById(parentID), image = parent.getElementsByTagName('img'); for (var i = 0; i < image.length; i++) { image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +
size + "-c"); image[i].width = size; image[i].height = size; }} resizeThumb('Blog1', 300);//]]> </script>
3. Save Template!

Kode di atas juga berfungsi mengubah gambar blur di Related Post atau Popular Posts. Tinggal ubah kode Blog1 di kode terakhir dengan kode elemen gambar yang buram.

Cara Lain Mengatasi Gambar Buram

Cara mengatasi gambar blog yang buram lainnya, khususnya di homepage yang menggunakan auto readmore adalah sebagai berikut.

Ganti kode:

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

dengan kode:

<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'>
  <img expr:alt='data:post.title' expr:src='data:image_bro'/>
</b:with>

Dengan menggunakan kode di atas, secara otomatis akan mengubah kode s72-c menjadi w300-h225-p-k-no-nu dan membuat resolusi gambar thumbnail berubah dari 72px × 72px menjadi 300px × 225px. Dengan demikian gambar thumbnail akan terlihat jelas, tidak buram, meskipun ukurannya diperbesar.

Demikian beberapa cara mengatasi gambar thumbnail buram di halaman depan blog. Happy Blogging! (www.contohblog.com).*

Daftar Istilah Blogging dan Pengertiannya - Kamus Blogger

Daftar Istilah Blogging dan Pengertiannya - Kamus Blogger

Daftar Istilah Blogging dan Pengertiannya - Kamus Blogger
Daftar Istilah Blogging dan Pengertiannya - Kamus Blogger.

MEMAHAMI istilah-istilah di dunia blogging akan sangat membantu dalam mengelola blog, termasuk dalam menulis postingan.

Daftar Istilah Blogging dan Pengertiannya ini tidak dimaksudkan sebagai daftar lengkap sehingga menjadi semacam Kamus Blogger, tapi hanya beberapa istilah terpenting yang sebaiknya dipahami oleh blogger pemula (newbie blogger).

Istilah blogging yang dishare di sini fokus ke platform blog Blogger milik Google. Kita mulai dari istilah paling populer dulu, yakni Blog, Blogger, Blogging, Tema/Template, Posting, dan SEO.

Daftar Istilah Blog Terpenting

BLOG -- Blog adalah singkatan dari Web Log atau Website Log, yaitu situs web yang biasanya milik pribadi berisi catatan pengalaman sehari-hari (online diary) atau untuk menuliskan pengalaman, pengetahuan, dan pemikiran.

Pengertian sederhana dan praktisnya, blog adalah website pribadi (personal website) atau halaman web pribadi (personal web page) untuk membedakannya dengan situs web instansi/perusahaan dan situs berita (news site).

Blog biasanya dibuat di situs penyedia blog gratis, seperti Blogger (Blogspot) milik Google dan WordPress.

BLOGGER --  Blogger artinya adalah (1) orang yang melakukan aktivitas blogging atau orang yang ngeblog (a person who blogs); (2) salah satu platform blogging, yakni Blogger milik Google dengan nama domain utama blogspot.com.

BLOGGING -- Bisa disebut juga dengan ngeblog. Blogging adalah membuat, mendesain, menulis posting,  dan/atau mengelola blog. Blogging = the act of posting on blogs.

PRO BLOGGER -- Pro Blogger adalah singkatan dari Professional Blogger, yaitu orang yang menjadikan blogger sebagai profesi untuk mendapatkan penghasilan melalui blog.

Pro Blogger disebut juga full time blogger, meskipun tidak semua pro blogger menjadi full timer dalam dunia blogging.

PLATFORM BLOG -- Platform blog (Blog Platform) adalah tempat atau situs yang menyediakan halaman blog, seperti WordPress dan Blogger. Selain WP dan Blogger, ada juga TypePad, Weebly, Tumblr, Live Journal, dan lainnya. 

DOMAIN -- Domain adalah nama yang digunakan untuk alamat blog atau website, seperti detik.com, republika.co.id, contohblog.com, atau contohblognih.blogspot.com.

Nama domain (domain name) blog biasanya menggunakan nama panggilan atau bahkan nama asli. Namun, banyak juga yang menggunkan nama favoritnya atau nama yang menggambarkan isi blognya.

TEMA/TEMPLATE -- Tema atau Template adalah desain tampilan blog. Dulu Blogger menggunakan istilah template lalu mengubahnya menjadi tema (theme). Anda bisa memilih tema blog yang bagus di Galeri Template CB.


POSTING -- Posting atau Postingan adalah isi (konten) blog berupa teks (tulisan/artikel), foto, gambar, video, grafis, dan tautan (link).

Dalam bahasa Inggris, posting di blog disebut "blog post". Post sendiri dalam konteks blogging artinya memuat atau mengirimkan.

NICHE BLOG -- Niche blog adalah topik, tema, atau ruang lingkup isi (konten) blog, misalnya blog berita, blog sepakbola, blog traveling, blog tentang fashion, blog tips kesehatan, dll.

Nama domain dan judul blog (blog title) sebaiknya selaras dengan niche blog yang dipilih.

DUMMY BLOG -- Dummy Blog  atau blog dummy adalah blog selain blog utama yang dibuat untuk membuat backlink bagi blog utama. Saat ini Google tidak menghitung backlink dari blog dummy sebagai backlink berkualitas (quality backlink).

Dummy Blog dapat digunakan untuk mencoba sebuah template atau mencoba sebuah widget atau elemen blog lainnya.

CUSTOM DOMAIN -- Custom Domain adalah mengubah alamat blog menjadi nama domain sendiri, misalnya yang tadinya nama domainnya www.contohblognih.blogspot.com menjadi www.contohblog.com.

Dengan custom domain, kita bisa menggantikan alamat alamat blog kita dengan nama blog yang lebih ringkas dan mudah diingat dengan ekstensi .com, .net, .info, .org, .web.id, .id, dan sebagainya sehingga lebih profesional dan kredibel.

Baca: Cara Custom Domain Blogger

Daftar Istilah Blogging Lainnya

LABEL -- Label adalah kategori atau tag di Blogger untuk mengelompokkan artikel (postingan) yang dalam tema atau topik tertentu.

Saat menulis posting di Blogger, kita harus mengisi kolom "Post settings" di bagian kanan halaman dengan klik Labels dan mengisinya dengan --misalnya-- Blogging, Sepakbola, Tips, atau sesuai dengan topik postingan yang dibuat.

Dengan membuat label, maka akan secara otomatis blog kita memiliki "Halaman Label" (Label Pages) yang berisi daftar postingan dalam label tertentu.

LINK -- Link adalah tautan yang menghubungkan sebuah kata atau kalimat ke halaman postingan atau website. Tautan ke postingan dalam blog disebut link internal.

Tautan ke blog atau website orang lain disebut link eksternal. Tautan ke alamat blog kita yang ada di blog orang lain disebut backlink atau inbound link. Link biasanya berwarna biru.

ANCHOR TEXT -- Anchor Teks adalah teks atau kata yang digunakan di dalam link. Misalnya, link ini, CB Blogger, adalah link ke halaman depan blog http://www.contohblog.com. CB blogger adalah anchor teks.

PAGEVIEWS -- Pageview artinya adalah halaman yang dibuka/dikunjungi oleh pembaca atau pengunjung blog (visitor). Blogger merekam jumlah kunjungan ke setiap halaman blog kita dan disajikan di data Statistik (Stats) Dashbloard Blogger.

Jadi, pageviews --disebut juga impresi (impression) adalah jumlah atau banyaknya halaman yang dilihat atau dibaca oleh pengunjung. Semakin lama pengunjung membuka atau klik link postingan, maka akan semakin banyak halaman blog yang dibuka dan itu berarti akan kian tinggi data pageviews blog.

TRAFFIC -- Hampir sama dengan pageviews, traffic secara harfiyah artinya adalah lalu-lintas, yakni banyaknya orang yang mengunjungi blog. 

SEO -- SEO adalah singkatan dari Search Engine Optimization. Bahasa Indonesianya SEO adalah Pengoptimalan Mesin Telusur.

Secara praktis., SEO adalah cara atau trik dalam blogging agar blog mudah dan cepat terindeks mesin pencari (search engine) --terutama Google-- sehingga meningkatkan jumlah pengunjung sekaligus peringkat di mesin pencari (search engine rankings).

Tujuan utama SEO adalah jumlah pengunjung atau traffic. Tips dan trik SEO bisa Anda baca di Tips SEO.

BACKLINK -- Backlink adalah tautan ke halaman blog kita dari blog atau website orang lain. Misalnya, di Wikipedia ada link ke halaman blog Anda, maka itulah backlink.

Backlink penting karena Google dan mesin pencari yang lain mempergunakan jumlah dan kualitas backlink sebagai ukuran tingkat kepercayaan sebuah blog atau situs.

META TAGS -- Meta tags adalah kode-kode HTML yang ada di dalam template blog yang menjadi "tanda pengenal" blog kepada mesin pencari. Meta tags terdiri dari judul (title), deskripsi, dan kata kunci (kywords).

Meta taga berfungsi memberikan informasi kepada robot mesin pencari tentang konten blog. Menurut Google, meta taga (tag meta) adalah cara terbaik bagi webmaster dalam memberikan informasi mengenai situs mereka kepada mesin telusur.

Tag meta dapat digunakan untuk memberikan informasi ke semua jenis klien, dan setiap sistem hanya memproses tag meta yang dipahaminya dan mengabaikan yang lain.

Di Blogger, kolom isian meta tags deskripsi ada di dashboard blogger di menu Preferensi pencarian (Search preference) yang harus diisi agar blog dikenali dan diindeks mesin telusur.

KEYWORDS -- Keyword (kata kunci) adalah kata atau frasa yang menunjukkan tema atau topik postingan blog atau gambaran isi blog secara keseluruhan. Keywords juga adalah kata-kata yang dimasukkan atau dicari pengunjung di mesin pencari atau sebuah laman website/blog.

URL -- URL adalah singkatan dari Uniform Resource Locator, yakni rangkaian huruf atau karakter yang menunjukkan alamat link halaman sebuah blog atau website.

Url bisa berupa nama domain, misalnya contohblog.com, bisa juga alamat lengkap sebuah halaman blog, misalnya http://www.contohblog.com.

ADSENSE -- AdSense atau Google AdSense adalah jaringan periklanan online milik Google. Google memberikan kesempatan kepada para blogger untuk melakukan monetisasi blognya (menghasilkan uang dari blog) dengan menampilkan iklan di blog mereka. 

Setiap kali seseorang mengklik teks iklan Google Adsense, maka si pemilik blog akan mendapatkan komisi. Iklan yang dimunculkan Google berasal dari para pemasang. Blogger hanya memasang kode unit iklan di akun AdSense.

Baca Selengkapnya: Panduan Lengkap Google AdSense.

ADWORDS -- AdWords adalah kebalikan dari AdSense. Google Adwords adalah program periklanan Google yang menerima pemasangan iklan pihak perusahaan atau individu untuk promosi produk, jasa, atau situs web.

Google AdWords akan berubah nama menjadi lebih ringkas menjadi Google Ads mulai 24 Juli 2018.

"AdWords will soon be Google Ads. The product experience will be updated to reflect our new name starting on 24 July 2018," demikian diumumkan laman resmi AdWords.

SERP -- SERP adalah kependekan dari Search Engine Results Page atau halaman hasil pencarian mesin telusur. 

Jika kita mencari tips, berita, atau informas apa saja di Google, dengan mengetikkan kata --misalnnya Cara Membuat Blog, maka Google akan menampilkan halaman berisi daftar posting yang berisi kata kunci Cara Membuat Blog. Itulah yang disebut SERP.

Demikian sebagian Daftar Istilah Blogging dan Pengertiannya. Daftar lengkap bisa disimak di link sumber di bawah. 

Good Luck & Happy Blogging! (www.contohblog.com).

Sumber:
https://www.quickonlinetips.com/archives/2006/06/the-giant-blogging-terms-glossary/
https://www.bloggingbasics101.com/blogging-glossary-defining-basic-blogging-terms/
https://www.mostlyblogging.com/better-blogger-blogging-terms/

Pengunjung Blog Menurun Akhir Pekan dan Musim Liburan

Pengunjung Blog Menurun Akhir Pekan dan Musim Liburan

Pengunjung Blog Menurun Akhir Pekan dan Musim Liburan
Kondisi pasca Ramadhan dan Libur Lebaran belum normal. Pengunjung blog pun menurun, masih belum normal.

Selama Ramadhan, pengunjung CB menurun. Kemungkinan pengunjung blog Anda juga, kecuali niche blog keislaman atau seputar puasa yang pageviews-nya bisa melonjak, naik drastis.

Baru setelah sekitar seminggu pasca libur lebaran, page views mulai merangkak naik, ke normal lagi, bahkan bisa terus meningkat. Amin!

Kondisi libur ini sama dengan kondisi akhir pekan. Pengunjung blog akhir pekan memang cenderung menurun. Bisa sampai 50%. Datanya bisa terlihat dari data trafik pengunjung.

Di laman quora ada yang tanya, kenapa pengunjung websitenya menurun tiap akhir pekan. Jawabanya, ya, itu trend global

Secara keseluruhan, tiap akhir pekan, tepatnya tiap Sabtu dan Minggu, pengunjung web itu menurun.

Ditanyakan: I have a blog and it seems to go down on weekends. I’m wondering if this is consistent with broader trends or unique to my blog?

Banyak yang jawab. Intinya, benar, pengunjung website umumnya memang menurun tiap akhir pekan, kecuali website yang memberi pelayanan khusus akhir pekan.

Bagaimana dengan pengunjung blog Anda? (www.contohblog.com).*

Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger

Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger

Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger


HALAMAN
Blogger (blog pager/pagination) yaitu halaman yang menampilkan daftar posting di halaman depan dan halaman posting lama.

Tampilannya berupa teks link Older Post / Newer Post atau Previous / Next. Kita bisa mengubahnya menjaid link halaman berupa angka/nomor sehingga bisa langsung ke halaman yang kita inginkan, misalnya halaman paling depan atau paling akhir (daftar posting terbaru di blog).

Berikut ini Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger. Ada tiga pilihan tampilan seperti dalam gamba berikut ini:

Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger

Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger

Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger seperti gambar di atas dilakukan dalam dua langkah pemasangan kode atau skrip.

1. Di Dashboard Bloggr Anda, klik Template/Tema > Edit HTML
2. Cari (Ctrl+F) atau temukan kode </body> yang ada di bagian bawah kode template blog Anda.
3. Copas kode berikut ini di atasnya.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'> /*<![CDATA[*/ var postperpage=5; var numshowpage=2; var upPageWord ='« Previous Page'; var downPageWord ='Next Page »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script type='text/javascript'> /*<![CDATA[*/ var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat} /*]]>*/ </script>
</b:if>
</b:if>

4. Cari kode ]]></b:skin> dan copas salah satu kode berikut ini.

Style 1

#blog-pager {overflow: visible} .showpageOf {display:none} span.showpagePoint { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; margin: 0 .2em; border: 1px solid #e6e6e6; border-radius: 0.25em; background-color: #64a281; border-color: #64a281; color: #ffffff; pointer-events: none; } span.showpageNum, span.showpage { margin: 0 .2em; } .showpageNum a, .showpage a { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; border: 1px solid #e6e6e6; border-radius: 0.25em; color: #2E4057; text-decoration: none; }

Style 2

#blog-pager {overflow: visible} .showpageOf {display:none} span.showpagePoint { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; margin: 0 .2em; border: 1px solid #e6e6e6; border-radius: 0.25em; background-color: #7064A2; border-color: #7064A2; color: #ffffff; pointer-events: none; } span.showpageNum, span.showpage { margin: 0 .2em; } .showpageNum a, .showpage a { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; border: 1px solid #e6e6e6; border-radius: 0.25em; color: #2E4057; text-decoration: none; }

Style 3

#blog-pager {overflow: visible} .showpageOf {display:none} span.showpagePoint { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; margin: 0 .2em; border: 1px solid #e6e6e6; border-radius: 0.25em; background-color: #A26464; border-color: #A26464; color: #ffffff; pointer-events: none; } span.showpageNum, span.showpage { margin: 0 .2em; } .showpageNum a, .showpage a { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; border: 1px solid #e6e6e6; border-radius: 0.25em; color: #2E4057; text-decoration: none; }

5. Save! Simpan Template.

Demikian Cara Membuat Next & Previous Halaman Angka/Nomor di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber: Medium

Cara Membuat Blog dengan Nama Domain dan Hosting Sendiri - Lebih SEO Friendly

Cara Membuat Blog dengan Nama Domain dan Hosting Sendiri - Lebih SEO Friendly

Cara Membuat Blog dengan Nama Domain dan Hosting Sendiri - Lebih SEO Friendly
Cara Membuat Blog / Website dengan Nama Domain dan Hosting Sendiri agar Lebih SEO Friendly.

Halaman hasil pencarian Google (SERP) kategori blog biasanya didominasi oleh posting blog berbasis Blogger dan WordPress (WP).

Karenanya, pastikan blog Anda dibuat di platform Blogger dan WordPress. (Lihat: Cara Membuat Blog di Blogger)

Jika ingin lebih kredibel dan profesional, sehingga lebih SEO Friendly, maka buatlah blog dengan nama domain dan hosting sendiri menggunakan CMS WordPress.

Membuat blog dengan nama domain dan hosting sendiri menggunakan CMS WordPress berbeda dengan Custom Domain.

Blog dengan nama domain dan hosting sendiri disebut Self Hosted atau menyimpan di "rumah sendiri" data-data kode yang membangun desain tampilan blog maupun konten.

Custom Domain itu kita hanya mengganti alamat blog dengan nama domain sendiri, misalnya semula beralamat di contohblognih.blogspot.com menjadi contohblog.com. Hostingnya tetap di Blogger. Gratis.

Berikut ini CB share tentang cara membuat blog dengan nama domain dan hosting sendiri, dengan menggunakan CMS WordPress, agar lebih ramah mesin pencari dan lebih kredibel di mata Google maupun pengunjung.

Yang namanya gratisan tentu berbeda dengan yang berbayar.

Mengapa CMS WordPress? Sudah banyak yang mengulas tentang keunggulan WP, terutama dari sisi SEO. Blog Selfhosted WP punya andalan Plugin Yoast SEO yang tidak diragukan kehebatannya dalam meningkatkan SEO Blog WP.

Ada lagi yang namanya Genesis Framework dan Thesis Framework yang mengintegrasikan tema/template atau desain tampilan blog dengan SEO-nya.

Pokonya, gak usah mikir panjang. Kalau mau membuat blog dengan nama domain dan hosting sendiri, gunakan CMS WordPress.

Untuk pemula, ikuti langkah mudah cara membuat blog dengan nama domain (domain name) dan hosting sendiri (self hosting) berikut ini.

Cara Membuat Blog dengan Nama Domain dan Hosting Sendiri

1. Daftarkan Nama Domain
2. Pesan Hosting
3. Install CMS WP
4. Pilih Tema WP SEO Friendly
5. Isi Blog Anda dengan Konten Berkualitas.

Domain adalah nama sekaligus alamat blog Anda.

Berbeda dengan alamat blog gartisan yang ada tambahan .blogspot.com atau .wordpress.com, nama domain sendiri lebih ringkas dan mudah diingat dengan mengguakan ekstensi .com, .net, .info, .org, .id, dan sebagainya, seperti contohblog.com, bolagpsport.com, detik.com, kompas.com, dan sebagainya.

Begitu Anda pesan domain + hosting, misalnya di Qwords, maka Anda akan dengan mudah membuat Blog dengan Nama Domain dan Hosting Sendiri sehingga Lebih SEO Friendly.

Begitu doman dan hosting yang Anda pesan sudah aktif, Anda tinggal gunakan support ticket untuk minta link cara membuat website dengan WordPress di Provider Hosting Anda, atau login ke akun Anda, lalu cari dan pilih menu WordPress dan klik untuk memasangnya.

Good Luck & Happy Blogging! (www.contohblog.com).*

Mengatasi Deskripsi Posting yang Tidak Muncul Saat Share Twitter

Mengatasi Deskripsi Posting yang Tidak Muncul Saat Share Twitter

Mengatasi Deskripsi Posting yang Tidak Muncul Saat Share Twitter
Mengatasi Deskripsi Posting yang Tidak Muncul Saat Share Twitter

SAAT postingan blog dishare di Twitter, deskripsi atau ringkasan tidak muncul.

Yang ada hanya judul dan link saja. Bagaimana cara mengatasinya?

Mudah. Mengatasi Deskripsi Posting yang Tidak Muncul Saat Share Twitter adalah dengan menambahkan kode.

Klik Tema > Edit HTML, dan copas kode berikut ini di bawah kode <head> atau di atas kode <b:skin>

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>

Dengan menambahkan kode tersebut, maka deskripsi posting akan muncul, seperti dalam gambar berikut ini:

Mengatasi Deskripsi Posting yang Tidak Muncul Saat Share Twitter

Jangan lupa, saat membuat tulisan, isi kolom deskripsi (search description) penelusurannya.

Deskripsi Posting

Jika masih belum muncul juga, silakan pasang Meta Twitter Card untuk Blogger agar saat tulisna di-share di Twitter tampilannya normal.

Good Luck & Happy Blogging! (www.contohblog.com).*

Arti Kode All Head Content di Meta Tags Template Bawaan Blogger

Arti Kode All Head Content di Meta Tags Template Bawaan Blogger

Arti Kode All Head Content di Meta Tags Template Bawaan Blogger


Kode All Head Content di Meta Tags Template Bawaan Blogger
Tag meta (meta tag) adalah cara terbaik bagi webmaster dalam memberikan informasi mengenai situs mereka kepada mesin telusur.  Demikian dikatakan Google Webmaster.

"Tag meta dapat digunakan untuk memberikan informasi ke semua jenis klien, dan setiap sistem hanya memproses tag meta yang dipahaminya dan mengabaikan yang lain. Tag meta ditambahkan ke bagian <head> laman HTML Anda."

Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang berfungsi sebagai pemberi informasi metadata dari sebuah halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut (Wikipedia)

Arti Kode All Head Content di Meta Tags Template Bawaan Blogger

Meta Tag di template bawaan blogger selalu berisi kode All Head Content seperti ini:

<b:include data='blog' name='all-head-content'/>

Jika "dibedah" atau diekstrak, kode tersebut akan menjadi seperti ini:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/579771828-ieretrofit.js"></script>
<![endif]-->
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->

Jika dalam kode awal template Anda berupa <HTML> (huruf kapital semua) dan diakhiri dengan kode </HTML> di bagian paling bawah kode template, maka gunakan kode meta tags di atas agar valid HTML.

Jika kode awal templatenya <html> (huruf kecil semua) dan diakhiri dengan </html>, maka gunakan kode all head content bawaan blogger di atas (<b:include data='blog' name='all-head-content'/>)

Tambahan Meta Keywords

Jika ingin menambahkan meta keywords (kata kunci) yang sekarang sudah diabaikan Google, maka tambahkan kode berikut ini:

<!--Meta Keywords-->
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>

Demikian ulasan tentang Kode All Head Content di Meta Tags Template Bawaan Blogger. 


Good Luck & Happy Blogging! (www.contohblog.com).*

Contact Form

Name

Email *

Message *