 |
| SEO TEMPLATE |
1. Modifikasi Title SEO Friendly
Title tag. dan cara memodifikasi Title tag pada template blogger agar lebih seo friendly adalah seperti ini:
Cari kode berikut ini di dalam template anda:
<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>
Catatan : jika anda menggunakan template yang bukan dari blogger alias mendownloadnya dari situs penyedia template, maka biasanya struktur title tag di template anda sudah dimodifikasi. abaikan saja proses ini.
2. Modifikasi Meta Tag SEO Friendly
Langkah memodifikasinya adalah sebagai berikut:
Salin Kode dibawah 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> .
3. Tag Heading Dinamis
Selanjutnya adalah memodifikasi Tah Heading agar lebih dinamis.
Cari kode ini di dalam template anda,carilah sampai ketemu untuk lebih memudahkan dalam pencariannya gunakan
CtrlF
<b:widget id='Header1' locked='true' title='balongtutorial (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>
Silakan hapus semuanya dan ganti dengan yg sudah dimodifikasi di bawah ini:
<b:widget id='Header1' locked='true' title='balongtutorial (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>
Berikutnya:
<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 diatas 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>
Setelah semua proses di atas selesai maka akan ada keanehan yang akan sobat lihat di blog anda, yaitu judul blog menjadi terlihat kecil. Solusinya silakan anda 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 lalu ganti dengan yang 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); }
4. Memasang breadcrumb
Cari kode di bawah ini:
<b:includable id='main' var='top'>
Hapus kode tersebut dan ganti dengan yang di bawah ini:
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>
Setelah itu tambahkan CSS di bawah ini:
.breadcrumbs { font-size: 11px; color: #666; padding: 10px 0px; margin: 10px 0px 20px; border-bottom: 1px solid #ddd; }
Dan taruh di atas kode:
]]></b:skin>
Selesai, selamat mencoba dan semoga berhasil. sumber:
disini
![Cara Membuat Menu Melayang Saat Di Scroll [Sticky Menu]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYYYq44TlIdHKMFbgFnQi4tMxW4KJAJCu2ZJaAdkWZ9U5pMYYRdV5tkb_JOvHYC-lMmT3foGGLc62G7CfLwAgfSFX0ltW-z04XH64UdurhaQjKZIp0Juhzm2RXzwPd3mqqfZyAdLQBds/w160-h106-p-k-no-nu/sticky+menu.png)
![Cara Membuat Menu Melayang Saat Di Scroll [Sticky Menu]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYYYq44TlIdHKMFbgFnQi4tMxW4KJAJCu2ZJaAdkWZ9U5pMYYRdV5tkb_JOvHYC-lMmT3foGGLc62G7CfLwAgfSFX0ltW-z04XH64UdurhaQjKZIp0Juhzm2RXzwPd3mqqfZyAdLQBds/w90-h60-p-k-no-nu/sticky+menu.png "Cara Membuat Menu Melayang Saat Di Scroll [Sticky Menu]")
