Tutorial modifikasi template kali ini saya menggunakan template bawaan blogger bernama
Simple sebagai bahan contohnya
. Template yang sobat pakai mungkin berbeda jadi mungkin akan ada beberapa kode yang berbeda dengan yang ada pada tutorial ini, kata
mas-sugeng loh!
1. Modifikasi Title SEO Friendly
Seperti yang sudah bahas pada postingan sebelumnya, hal pertama yang paling penting pada sebuah template adalah Title tag. Untuk memodifikasi Title tag pada template blogger agar lebih SEO friendly adalah seperti ini:
Cari kode berikut ini di dalam template sobat:
<title><data:blog.pageTitle/></title>
Setelah itu hapus dan ganti dengan kode title tag SEO friendly ala Mas Sugeng di bawah ini:
<!-- SEO Title Tag --> <b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if> <b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title></b:if> <b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if> <b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if> <b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if> <b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if> <b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
LANJUT YA LANJOOOTTTTT !!!
Note : jika sobat menggunakan template yang bukan dari blogger, maka biasanya struktur title tag di template sobat sudah dimodifikasi, jadi lebih baik untuk dibiarkan saja.
2. Modifikasi Meta Tag SEO Friendly
Di sini saya tidak akan memberikan terlalu banyak penjelasan tentang kode-kode yang dimodifikasi, terutama masalah meta tag. Jadi langsung saja untuk memodifikasi meta tag agar lebih SEO friendly, silakan sobat copy/salin kode berikut ini:
<!-- SEO Meta Tag --> <b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if> <b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='keywords'/></b:if> <b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if> <b:if cond='data:blog.pageType == "archive"'><meta content='noindex,nofollow' name='robots'/></b:if> <b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if>
Setelah itu paste kode tersebut di bawah kode <head> di dalam template sobat.
3. Tag Heading Dinamis
Selanjutnya yang perlu sobat lakukan adalah memodifikasi Tah Heading agar dinamis. Dinamis gimana maksudnya masbro? dinamis itu bisa ikut kemana aja wkowkowkwokok.
Cari kode ini di dalam template sobat:
<b:widget id='Header1' locked='true' title='antoncabon4u (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- 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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <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:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> </b:widget>
Kode yang panjang banget tersebut adalah kode untuk bagian header sob, tempat menampilakan judul dan juga deskripsi. Sebelum sobat mencari kode tersebut silakn sobat perhatikan kode yang saya tandai merah di atas, kode tersebut akan berbeda-beda sesuai dengan judul blog sobat.
Jika sobat sudah menemukan kode tersebut, silakan hapus semuanya dan ganti dengan yg sudah saya modifikasi di bawah ini:
<b:widget id='Header1' locked='true' title='antoncabon4u (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- 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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1> </b:if> </b:if> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1> </b:if> </b:if> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType == "static_page"'> <p class='title'><b:include name='title'/></p> <b:else/> <h1 class='title'><b:include name='title'/></h1> </b:if> <b:else/> <p class='title'><b:include name='title'/></p> </b:if> <b:include name='description'/> </div> </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.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> </b:widget>
Masih belum selesai, langkah selanjutnya adalah mengedit pada bagian judul postingan. Caranya cari kode di bawah ini di dalam template sobat:
<b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>
Hapus semua kode tersebut dan ganti dengan yang ini:
<b:if cond='data:post.title'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType == "static_page"'> <h1 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h1> <b:else/> <h2 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h2> </b:if> <b:else/> <h1 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h1> </b:if> </b:if>
Lanjuttt !!!
Sebenernya sampai langkah ini sudah cukup untuk membuat struktur tag heading di blog sobat menjadi dinamis, tapi mungkin akan ada keanehan yang akan sobat lihat di blog sobat, yaitu judul blog menjadi terlihat kecil. Solusinya silakan sobat cari kode ini:
.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); }
Hapus dan ganti dengan ini:
.Header h1.title,.Header p.title { 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.title a,.Header p.title a { color: $(header.text.color); }
Saya yakin sobat nggak akan menemukan kode tersebut jika tidak menggunakan template Simple dari blogger, jadi saya hanya bisa mengucapkan selamat berpusing ria, itu kata mas-sugeng hehehehe.
