February 18, 2016

Cara Edit Dan Modifikasi Template Blogger

edit template blogger
Sebuah design template yang kita download di beberapa layanan baik itu premium maupun yang dibagikan secara gratis tentunya masih saja kurang pas dengan selera kita meskipun sudah didesign semaksimal mungkin oleh si pembuat template. Ini sesuatu yang wajar mengingat selera masing masing pemilik blog maupun situs tentunya berbeda beda, mungkin si pembuat template sudah merasa cocok dan puas dengan tampilan design yang mereka buat tapi tidak buat kita sebagai penggunanya. Nah untuk itu artikel ini hadir saya buat untuk memberikan panduan bagaimana merombak dan modifikasi template sesuai selera kita.

Apa Tujuan Edit Template ???

Secara manusiawi kita selalu menginginkan sesuatu yang lebih baik dan ini  juga yang menjadi dasar buat kita sebagai pemilik blog atau website untuk selalu tampil beda pada tampilan templte dengan gaya dan ciri khas tersendiri. Dengan style design yang unik akan memudahkan setiap pengunjung blog mengingat dan mengenali blog atau website kita.

Langkah Langkah Edit Tempate Blogger :


# Membuat Blog Gratis Di Blogger

Hal yang pertama sekali haruslah punya blog yang nantinya akan kita jadikan percobaan untuk edit template. Secara default blogger telah menyediakan beberapa pilihan template yang bisa kita pilih salah satu.

# Download Template

Setelah kita mempunyai sebuah blog langkah selanjutnya adalah mencari template yang sekiranya pas dan cocok dengan tema blog yang telah kita buat tadi. Saat ini kita akan mudah menemukan layanan download template blogger baik secara premium maupun gratis dengan pilihan warna dan design yang bervariasi sesuai dengan keinginan kita. Anda bisa mencobanya di Tempateisme, Goya Template, Sora Template, Templatefy, Premium Blogger Template dan sebagainya.

# Upload Template

Setelah kita mendapatkan template yang sudah kita download tadi kemudian kita upload template di Blogger. Untuk cara uploadnya masuk ke halaman Dashboard Blogger >> Template >> Backup/Restore. Selanjutnya kita akan diberikan pilihan untuk mendownload terlebih dulu template sebelum diganti sebagai cara untuk mengembalikan tampilan template dalam bentuk semula sebelum di ganti dengan template baru. Kemudian kita Upload Template dalam eksistensi file.xml namun jika sebelumnya file template yang di download dalam bentuk . rar haruslah kita ekstrak terlebih dulu agar bisa diupload ke blogger.

# Widget

Langkah berikutnya adalah mengatur dan meyeleksi posisi widget yang akan ditampilkan sesuai keinginan kita agar tampilan blog tidak berantakan. Sesuaikan penempatan widget dengan kolom sidebar yang disediakan dari template yang kita download tadi. Pilihlah widget yang paling umum di gunakan di blog agar tampilan menjadi lebih rapi dan mudah dipahami oleh pengunjung, misalnya Popular Post, Profile, dan Arsip blog.

# Mengubah Template Blog Menjadi Super Seofriendly

Untuk cara mengubah template blog menjadi seofriendly bisa juga anda baca di tips sederhana mengubah template blog menjadi seo friendly.

1. Memasang Metatag Seofriendly


<meta content='KODE VERIFIKASI WBT' name='google-site-verification'/>
<meta content='KODE VERIFIKASI BING' name='msvalidate.01'/>
<meta content='KODE VERIFIKASI ' name='blogcatalog'/>
<meta content='KODE VERIFIKASI ALEXA' name='alexaVerifyID'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>
<meta content='id-us-en' name='language'/>
<meta content='INDEX, FOLLOW, all' name='ROBOTS'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='Blogger' name='generator'/>
<meta content='-1' http-equiv='Expires'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='general' name='rating'/>
<link href='URL GOOGLE PLUS' rel='author'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content=' Uraian atau Deskripsi tentang blog anda ' name='description'/>
<meta content=' keyword1 | keyword2 | keyword3 | keyword4 | keyword5 | keyword6 ' name='keywords'/>
</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='URL BLOG ANDA/atom.xml' rel='alternate' title='TITLE BLOG - Atom' type='application/atom+xml'/>
<link href='URL BLOG ANDA/rss.xml' rel='alternate' title='TITLE BLOG - RSS' type='application/rss+xml'/>

2. Memperbaiki Struktur Tag Heading Blog

Sebelum lanjut ke pembahasan memperbaiki susunan tag heading pada template, ada baiknya anda mengetahui apa itu tag H1, H2 & H3 dan tempat seharusnya agar lebih memudahkan pemahaman anda.

<h1> title atau judul blog </h1>
<h2> judul postingan atau artikel </h2>
<h3> judul widget blogger </h3>

Setelah mengetahui fungsi dan penjelasan tersebut di atas, sekarang mari kita lanjut ke tahap selanjutnya yakni memperbaiki struktur tag H1 sampai H3.

Login ke blogger Template » Edit HTML » Expand Template Widget Untuk mencegah terjadinya kesalahan pada saat memperbaiki struktur tag, saya sarankan untuk membackup template anda terlebih dahulu

Cari :

#header h1 {
Kemudian ganti dengan ini : #header h1, #header p {

Cari kode CSS seperti ini : 
.post h3 {
Ganti dengan ini : 
.post h1, .post h2{

Cari lagi :
.post h3 a,.post h3 a:visited,.post h3 strong {
Ganti dengan kode ini :
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{

Cari lagi yang ini :
.post h3 strong,.post h3 a:hover {
Ganti dengan : .post h1 strong,.post h1 a:hover,.post h1 strong,.post h2 a:hover {

Temukan kode ini : h2.date-header {
Ganti menjadi : .date-header {
Lanjutkan dengan mencari :

<h2 class='date-header'><data:post.dateHeader/></h2>
dan menggantinya dengan :

<div class="date-header"><data:post.dateheader></data:post.dateheader></div>
Cari kode dibawah ini :

<h1 class='title'>
<b:include name='title'/>
</h1>
Ganti dengan ini :

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
Cari kode ini :

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Ganti menjadi seperti kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
Cari kode berikut :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Ganti dengan kode seperti di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if> 
Jika anda menggunakan template yang sudah didesign seo friendly anda bisa melewati langkah ini.

3. Memasang Menu Breadcrumbs Seo Friendly

Untuk memasang menu breadcrumb seofriendly ikuti langkah langkahnya seperti dibawah ini :
Cari kode :

<b:includable id='main' var='top'>

Kemudian Ganti dengan kode dibawah ini:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Kemudian tambahkan kode css dibawah ini sebelum kode ]]></b:skin>

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
margin-top:0px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}


# Membuat Template Blog Menjadi Valid HTML5

Masalah validasi html5 ini pernah juga saya bahas pada artikel sebelumnya tentang cara mengurangi error code HTML5, untuk membuat blog valid html5 silakan ikuti langkah langkah dibawah ini ;

* Ganti Kode Berikut ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Kemudian Ganti dengan

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

* Ganti kode <html> menjadi <HTML> * Ganti Kode

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

<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>
* Ganti <b:skin><![CDATA[ dengan kode dibawah :

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>
* Hapus semua kode dibawah ini satu per satu:

<b:include name='quickedit'/>

<a expr:name='data:post.id'/>

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

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

<div class='post-share-buttons goog-inline-block'>...sampai...</div>
# Mengubah Susunan Schema Org

Masuk ke Edit Template HTML kemudian Ganti kode kode dibawah ini :
* Ganti kode <nav> Menjadi :

<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
* Ganti kode <body> Menjadi :

<body class='index' itemscope='' itemtype='http://schema.org/WebPage'>
* Ganti kode <header> atau <header-wrapper> Menjadi :

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
* Ganti kode <content-wrapper> atau <main-wrapper> Menjadi :

<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
* Ganti kode <div class='post hentry uncustomized-post-template' > Menjadi :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
* Ganti kode <article class='post hentry' expr:id='data:post.id'> Menjadi :

<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
* Ganti kode <div class='author-profile' itemprop='author' >

<span class='fn author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
* Ganti kode <div id='sidebar-wrapper'> Menjadi :

<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
* Ganti kode <footer id='footer-wrapper'> Menjadi :

<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Demikianlah sedikit uraian tentang bagaimana cara mengubah atau modifikasi template blogger agar menjadi lebih baik dan seofriendly.
Read more