Widget HTML #1

Beranda / Blog

Tutorial blogger untuk pemula sekedar tips sederhana

Posting Komentar

Cara menyembunyikan widget blog dismartphone

Tips pertama adalah mengatur widget yang tampil diperangkat smartphone dengan memberinya tag conditional. Tidak semua widget yang terpasang diblog dan tampil responsive diperangkat dekstop pasti juga bisa tampil responsive diperangkat mobile/seluler

Biar bagaimanapun hasil pencarian untuk versi dekstop dan seluler itu berbeda, blog anda mungkin mendapat peringkat teratas dipencarian dekstop tetapi belum tentu dipencarian seluler. Ada banyak faktor yang mempengaruhi peringkat blog pada pencarian seluler salah satunya faktor kecepatan

Tidak heran kalau beberapa blog mulai mengadopsi AMP (Accelerate Mobile Pages) dengan mengambil konten halaman dari cache google, namun bagi anda yang belum mengadopsi AMP dengan berbagai alasan bisa mencoba untuk merapikan widget ditampilan mobile

Anda bisa menyembunyikan beberapa widget di tampilan mobile agar kecepatan blog meningkat, ini berkaitan dengan salah satu pernyataan resmi yang telah dirilis google terkait "Google First Speed index ranking" dan alat pengujian "Mobile Test Friendly", tanpa basa-basi langsung saja ikuti tutorial berikut

Cara menyembunyikan widget tertentu pada perangkat mobile

Silahkan buka dashboard blogger > menu tema > edit HTML > lompat kebagian widget > silahkan pilih widget mana yang ingin disembunyikan pada tampilan mobile (feature post , archive, popular post dsb) > setelah itu simpan script widget tersebut diantara tag <b:if cond='data:blog.isMobileRequest == "false".... sampai </b:if>

Berikut format penulisannya

<b:if cond='data:blog.isMobileRequest == "true"'>

<b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'>

-----

</b:widget>

</b:if>

Untuk menyembunyikan widget diperangkat mobile tinggal merubah nilai True menjadi False, maka widget tersebut tidak akan tampil ketika blog diakses melalui smartphone

Cukup mudahkan? silahkan dicoba...

Cara memperbaiki tombol reply komentar diblogger tidak berfungsi

Beberapa waktu belakangan ini, para blogger mengeluhkan fungsi tombol reply di komentar yang mendadak error atau tidak berfungsi sama sekali, bagi anda pengguna template premium yang sudah di optimalkan kecepatannya, beberapa kode mungkin sudah diparse namun blogger sendiri menginginkan para penggunanya untuk tetap menggunakan syntax bawaan seperti <head> dan <body>, ini merupakan langkah blogger untuk memaksa penggunanya mengembalikan syntax bawaan agar desain blog lebih optimal

Cara memperbaiki tombol reply atau balas komentar yang error diblogger itu mudah, ikuti panduannya:

Buka dashboard blogger > masuk menu tema > pilih edit HTML > kemudian cari dan ganti kode berikut

Cari > &lt;head&gt;

Ganti dengan > <head>

Cari > &lt;/head&gt;&lt;!--<head/>--&gt; 

Ganti dengan > </head>

Cari > &lt;body&gt;

Ganti dengan > <body>

Cari > &lt;/body&gt;&lt;!--<body/>--&gt; 

Ganti dengan > </body>

Selanjutnya cari kode markup komentarnya dan kita kembalikan ke kode bawaan blogger

Itu akan terlihat seperti ini

<b:includable id='comment_picker' var='post'>...</b:includable>

Langsung saja di replace dengan kode ini

<b:includable id='comment_picker' var='post'>

  <b:if cond='data:post.commentSource == 1'>

    <b:include data='post' name='iframe_comments'/>

  <b:elseif cond='data:post.showThreadedComments'/>

    <b:include data='post' name='threaded_comments'/>

  <b:else/>

    <b:include data='post' name='comments'/>

  </b:if>

Terakhir tinggal disimpan, lalu coba membalas komentar pengunjung

NB: Mengganti kode parse HTML ke bawaan blogger memang bisa menurunkan kecepatan blog versi GTmetrix, tentu saja bagi pemuja skor kecepatan hal ini menjadi masalah besar. Alternatifnya anda bisa beralih menggunakan media komentar Disqus atau Facebook

Cara membuat kotak iklan mandiri diblog

membuat kotak iklan mandiri diblog

Blog yang sudah mapan atau paling tidak memiliki 1.000 - 2.000 pengunjung setiap hari pasti menarik perhatian orang-orang untuk memasang banner iklan diblog kita dengan tujuan backlink, jualan, promosi dan sebagainya

Memasang 4 unit iklan kotak diblog dapat menambah penghasilan, lumayan sekedar untuk beli kuota inernet bulanan

Pertama, sebelum membuat kotak kita tambahkan CSS agar desain kotak iklannya terlihat rapi

Buka dashboard blogger > menu tema > opsi edit HTML > pastekan script berikut diatas kode ]]></b:skin> atau </style>

/* Kotak Iklan */

.banner,.banner2{margin:0 auto;text-align:center;overflow:hidden}

.banner{margin:20px auto}

.banner .widget,.banner2 .widget{width:100%;max-width:100%;margin:0 auto;background:transparent;text-align:center;overflow:hidden}

.banner img,.banner iframe,.banner2 img,.banner2 iframe{width:100%;display:block;margin:0 auto;text-align:center}

.kotak_iklan{text-align:center}

.kotak_iklan img{border-radius:3px;margin:2.7px}

Selanjutnya kita pasang slot iklan melalui widget menu tataletak, terserah mau diletakkan dibagian mana

Menu tata letak > add widget > pilih HTML/Javascript > pastekan script iklan berikut

<div class="kotak_iklan">

<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>

<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>

<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a> 

<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a> 

</div>

Sesuaikan judul, url gambar dan ukuran iklan sesuka hati. Simpan dan lihat pratinjaunya..

Cara redirect otomatis halaman mati 404 ke homepage

Broken link atau halaman error juga mempengaruhi presentasi SEO dimata pengunjung, ketika pengunjung mengakses halaman 404 mereka pasti merasa kecewa oleh sebab itu kita akan mencoba membuat redirect otomatis halaman 404 ke homepage pada blogger, kalau di wordpress ada sendiri pluginnya sementara kalau di blogger harus kita tambahkan script secara manual

Sejatinya, broken memang harus segera diperbaiki secara manual dengan mengedit tautanlink secara langsung, atau bisa juga melalui layanan pemindai online https://www.brokenlinkcheck.com/

Tetapi kita tidak pernah tau kapan sebuah eksternal link dan internal link yang kita buat mendadak error 404. Bisa jadi situs yang kita rujuk hilang, berganti domain, menghapus halaman dan sebagainya

Cara mengalihkan halaman error 404 ke homepage sebenarnya mudah, ikuti panduan berikut;

Buka dashboard blogger > akses menu tema > edit HTML > temukan kode </body> atau &lt;/body&gt; lalu paste script berikut tepat diatasnya

<b:if cond='data:view.isError'>

<script>

window.location.href = &quot;<data:blog.homepageUrl/>&quot;;

</script>

</b:if>

Selain mengalihkan ke halaman utama, anda juga bisa mengalihkan pengunjung kehalaman sitemap/daftar isi atau halaman lain, cukup dengan menggati url yang ada

<b:if cond='data:view.isError'>

<script>

window.location.href = &quot;https://blog-sobat.blogspot.com/p/sitemap.html/&quot;;

</script>

</b:if>

Silahkan di edit sesuai kebutuhan

Cara menentukan jumlah karakter pada deskripsi artikel dihomepage

menentukan jumlah karakter

Selanjutnya adalah tutorial mengatur jumlah snippet (deskripsi artikel) yang muncul dihalaman homepage. Secara default dibatasi 140 karakter, namun beberapa template terkadang tidak terlihat rapi

Anda bisa mengatur jumlah karakter yang muncul pada snippet sesuai keinginan agar terlihat lebih rapi, bagaimana cara melakukannya?

Pertama buka menu tema > edit html > lalu pastekan script berikut tepat diatas kode </body> atau &lt;/body&gt;

<script type='text/javascript'>

snippet_count = 140;

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var snippet = strx.split("<");

for(var i=0;i<snippet.length;i++){

if(snippet[i].indexOf(">")!=-1){

snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);

}

}

strx = snippet.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSnippet(pID){

var div = document.getElementById(pID);

var summ = snippet_count;

var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Secara default jumlah karakternya adala 140, anda bisa merubahnya menjadi 160 atau 180 menyesuaikan dengan ukuran template

Selanjutnya cari lagi kode <data:post.snippet/> atau <div class='post-snippet'><data:post.snippet/></div>  lalu ganti dengan script ini

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

Terakhir tinggal disimpan dan lihat pratinjaunya..

Cukup mudahkan? mengatur jumlah kata atau snippet pada halaman utama blog bisa dilakukan oleh pemula sekalipun

Baca juga: 10 rahasia menjadi blogger sukses

Pegawai Kantoran dan Pekerja Serabutan Online
Pegawai Kantoran dan Pekerja Serabutan Online "Apabila anak adam (manusia) telah meninggal dunia, maka terputuslah amalnya darinya, kecuali tiga perkara, yaitu sedekah jariyah (sedekah yang pahalanya terus mengalir), ilmu yang bermanfaat, atau anak saleh yang selalu mendoakannya." (HR Muslim No. 1631)

Posting Komentar untuk "Tutorial blogger untuk pemula sekedar tips sederhana"

Posting Komentar

Artikel di blog ini bersumber dari pengalaman pribadi penulis, tulisan orang lain sebagai posting tamu maupun bayaran oleh sebab itu segala hak cipta baik kutipan dan gambar milik setiap orang yang merasa memilikinya