Cara membuat template blog seo friendly dan full responsive !!!

cara membuat template blog - template blog merupakan satu hal terpenting untuk mengatur segi tampilan blog dikeseluruhannya. andaikan dengan sebuah rumah, blog adalah isi rumah dan template blog adalah bangunan rumahnya. jika rumah tersebut memiliki segi bangunan yang kurang menarik ataupun kurang bagus, maka sipemilik rumah masih merasa ada hal yang kurang ketika berada dirumahnya. begitu juga dengan blog anda. jika tampilan blog anda kurang menarik pasti membuat sipembaca menjadi kurang nyaman ketika berada didalam blog anda dan membaca seluruh isi artikelnya. ada baiknya jika memakai template blog yang seo friendly, full responsive dan memiliki tampilan yang indah. ataukah anda merasa bosan dengan template blog anda sekarang ini? saran dari saya anda bisa membuat template blog sendiri. apakah bisa min, bagaimana caranya? nah, itu dia pertanyaan yang saya tunggu dari tadi, hehehehe:)


oke dech. dipembahasan ini admin mukiller akan memberikan tutorial cara membuat template blog yang seo friendly, full responsive dengan memakai template bawaan blog (default) yaitu sederhana. mengapa harus menggunakan template bawaan blog? karena template tersebut sangat powerfull, responsive, sangat seo friendly dan tentunya mudah diedit. tidak bisa dipungkiri dan saya juga sangat suka dengan template blog sederhana dan sekarang ini saya memutuskan untuk memakai templatenya di blog mukiller ini.

berikut cara membuat template blog yang seo friendly dan full responsive dengan memakai template bawaan blog

1) loginkan akun blogger anda
2) pergi kemenu tema > pilih tema sederhana > klik terapkan ke blog.

3) pada bagian tema, klik edit html.
4) pasang auto readmore di blog, dengan menempelkan sebuah kode kedalam template blog (ikuti caranya ya)
  • tekan ctrl+f dan cari kode </head>
  • salin kode berikut dan tempelkan tepat diatas kode </head>
<script type='text/javascript'>
posts_no_thumb_sum = 300;
posts_thumb_sum = 250;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.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 createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
&#160;.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
  • cari kode <data:post.body/> replace kode yang kedua dengan kode berikut ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
&#160;<span class='readmore' style='float:right;'/></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>
  • klik simpan tema untuk menyimpan perubahan. maka auto readmore sudah terpasang dihalaman depan / di archive blog anda.
5) lalu pergi kemenu tema > sesuaikan (untuk mengedit template blognya).
disitu terdapat 5 menu yaitu:
  • tema: untuk menampilkan tampilan dan nama tema yang sedang dipakai diblog, juga untuk melihat daftar tema bawaan yang tersedia di blog.
  • latar belakang: berfungsi untuk menambahkan gambar dilatar belakang blog juga mengatur tema warna utama.
  • sesuaikan lebar: untuk menentukan lebar sidebar blog dan seluruhnya.
  • tata letak: untuk menentukan penggunaan tata letak isi blog dan tata letak footer.
  • lanjutan: untuk menngedit jenis font dan warna pada teks halaman, judul blog, teks tab, judul posting, judul gadget, warna latar, warna link dan masih banyak fungsi lainnya.
6) jika semuanya sudah diedit dengan baik lalu klik simpan perubahan.
7) pergi kemenu tata letak blogger > sesuaikan gadgetnya > klik simpan perubahan.

informasi tambahan (disarankan untuk dibaca)
cara ini ternyata sangat mudah lho untuk membuat template blog. tanpa menggunakan bantuan software ataupun aplikasi khusus, hanya dengan mendesignnya dalam waktu yang cepat anda berhasil untuk membuatnya. sampai disini aja ya pembahasannya, semoga bermanfaat dan sukses selalu :)

No comments:

Post a Comment

Berikan komentar terbaik anda mengenai kepuasan anda dalam membaca artikel ini :)