Thema kali ini yang saya coba edit dan modifikasi adalah thema Contempo, tidak terlalu banyak perbedaan struktur code antara template Terkemuka, Emporio, Soho, Contempo keluaran terbaru blogger ini. perbedaan hanya terlihat pada cssnya saja yang lainnya mirip-mirip. Jadi kalo sudah bisa modifikasi thema contempo nanti untuk template yang lain juga bisa asalkan pintar modifikasi css.
Berikut ini cara memodifikasi blog jadi seo Friendly:
1. Menambahkan meta tag seo bisa baca disini : Meta Tag SEO Valid HTML5 True Canonical BlogSpot
2. Membuat headings dinamis pada template blogger terbaru
Membuat heanlings dinamis dimaksudkan untuk membuat h1 dan h2 menjadi dinamis dimana ada pertukaran antara h1 dan h2 antara home page dengan halaman postingan, supaya title atau judul postingan kita lebih maksimal dalam serp google. Untuk susunannya kita akan membuat seperti ini:
- home Page h1: judul blog ,h2: postingan, h3: widget.
- Halaman Postingan h1: judul postingan h2:heading(optional pada entri postingan), h3:widget
Baik langsung saja kita kerjakan , cari code berikut di dalam template pada widget header:
<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>
Code ini adalah code title header yang akan kita buat menjadi dinamis, untuk yang menggunkan gambar pada title header saya belum sempat untuk memodifikasi karena saya kurang suka menggunakan gambar pada title header, dan juga kekuranggannya adalah karena gambar tidak bisa di baca robot google. Jadi saya prioritaskan untuk menggunkan title yang biasa saja dulu - seo v6.
Kalau sudah menemukan code diatas ganti semuanya dengan code berikut ini:
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:include name='super.title'/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
Selanjutnya merubah heading halaman postingan, cari kode di bawah ini pada widget blog:
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != ""'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != ""'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
Hapus semua ganti dengan code di bawah ini:
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<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>
</b:includable>
<a expr:name='data:post.id'/>
<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>
</b:includable>
Sampai disini Headings blog sudah dinamis namun kalau kita lihat ada keanehan pada tampilan header di halaman blog postingan. Jangan khawatir untuk memperbaikinya kita cukup tambahkan css ini di diatas ]]></b:skin> :
.header-widget a, .widget.Header h1 {
color: #ffffff;
font: bold 45px Roboto, sans-serif;
line-height: normal;
margin: 0 0 13px;
text-align: center;
width: 100%;
}
.item-view .Header a, .sticky .Header h1, .sticky .Header a {
font-size: 24px;
line-height: 24px;
margin: 0;
text-align: left;
}
.item-view .header-widget {
text-align: left;
margin: 0;
}
.header-widget {
text-align: center;
margin: 0;
}
.centered-top-container.sticky .widget.Header h1 a, .centered-top-container.sticky .header-widget a:visited, .centered-top-container.sticky .header-widget a:hover {
color: #757575;
}
.sticky .Header h1 {
color: #757575;
}
@media screen and (max-width: 800px){
body.collapsed-header .centered-top-container .widget.Header h1, .header-widget, .item-view .header-widget {
text-align: center;}
body.item-view .widget.Header, body.item-view #header {
margin: auto;
}}
Baca: CARA MEMBUAT DYNAMIC HEADING PADA TEMPLATE TERKEMUKA
3. Memasang breadcrumb
Cari code dibawah ini pada widget id blog1, Jangan sampai salah pilih karena banyak di temukan code tersebut:
<b:includable id='main'>
hapus dan ganti dengan code 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'/>
<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'/>
Supaya breadcrumb terlihat rapi gunakan code css berikut ini , copy dan paste di atas ]]></b:skin> :
.breadcrumbs {
padding-top: 40px;
padding-bottom: 0px;
margin-left: 0px;
padding-left: 40px;
padding-right: 40px;
color: #757575;
background: white;
}
.breadcrumbs a {
color: #757575;
}
@media screen and (max-width:800px) {
.breadcrumbs {
margin-left: 0px;
padding-left: 20px;
padding-bottom: 15px;
padding-right: 20px;
color: inherit;
}
}
.breadcrumbs a:hover {
color: #21b0f7;
}
padding-top: 40px;
padding-bottom: 0px;
margin-left: 0px;
padding-left: 40px;
padding-right: 40px;
color: #757575;
background: white;
}
.breadcrumbs a {
color: #757575;
}
@media screen and (max-width:800px) {
.breadcrumbs {
margin-left: 0px;
padding-left: 20px;
padding-bottom: 15px;
padding-right: 20px;
color: inherit;
}
}
.breadcrumbs a:hover {
color: #21b0f7;
}
Baca: CARA MEMASANG BREADCRUMB DI TEMPLATE TERKEMUKA
Copy code di bawah ini dan paste di bawah <data:post.body/> bisa di cari di b includable postbody,:
<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Lalu terakhir copy code di bawah ini lalu paste di atas code </head> :
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
Untuk mengatur banyaknya link yang tampil bisa diubah code "max result" (warna kuning)dan disesuaikan dengan kebutuhan sobat.
5. Membuat template menjadi fast loading dengan skor tinggi pada pagespeed insights
Template bawaan blogger terbaru kali ini sudah di desain dengan baik sehingga kita tidak perlu susah untuk membuat template menjadi fast loading, kalau kita lihat pada pagespeed insights pada render blocking hanya terdapat fonts googleapis penyebab render yang tidak maksimal - seo v6.
Cara mengatasinya css yang memblokir perenderan paruh atas mudah saja , cari code <head> dan ganti dengan code ini <head> dan selanjutnya cari code ini </head> dan ganti dengan code ini </head><!--<head/>-->
Lalu membuat style untuk font googleapis, cari <head/> dan letakkan code ini <style></style> di atas nya . Selanjutnya nya buka url font googleapis pada tab baru nanti terlihat code css nya . Copy semua code css nya lalu letakkan cssnya diantara <style> "Letakkan CSS disini" </style> ,dan simpan template.
Hmm, " Akhirnya selesai juga" dengan menerapkan teknik di atas kita sudah bisa membuat template default blogger atau template bawaan terbaru blogger menjadi SEO friendly. Kalau ada yang kurang jelas atau terdapat error bisa langsung di tanyakan , Semoga berhasil - Seo v6.
Update terbaru:
7 januari 2018 - Peruahan CSS dan heading dinamis HTML
Thank you!
ReplyDeleteVerygood
saya gk nemu kode < head / > mas hehe apa yg dimaksud kode < / head > ?
ReplyDeleteiya salah, sudah saya perbaiki. trimakasih koreksinya mas :)
Deletesama pemasangan breadcrumbnya gimana ya mas? < b : includable id = ' main ' > kode tersebut sy nemu banyak, bingung mau pilih yg mana hehe, btw template blog SEO V6 ini keren ya mas, ini template bawaan terkemuka-Light ya?
Deletepada postingan sudah ditambahin gambar petunjuknya mas, silahkan dilihat :) ,
Deleteiya ini yang di pakai template terkemuka, kalo mau tampilan seperti ini bisa di copy css template seo v6, tapi sebelumnya harus menggunakan template terkemuka v2 , lalu tinggal diganti css nya.
Kalau mau ganti Sidebar dari kiri Kekanan gmana mas ?
Deletekalo dalam css code float nya diganti yang right, namun untuk htmlnya setiap template berbeda2, ini mau ngedit template yang mana?
DeleteCotempo mas
DeleteSangat membantu sekali artikelnya,,,, makasih om.
ReplyDelete:)
Gagal merender gadge `Blog1`. the tag `includable` is not a known blogger tag. Ini maksudnya apa mas ?.
ReplyDeleteMemang saya udh ikuti langkah diatas dan berhasil. kemudian di tampilan { Desainer Tema Blogger } ada kata kayak gitu mas. Dimana letak kesalahannya mas ?
kemungkinan salah mengganti code untuk breadcrumb, tapi saya kurang jelas juga kesalahannya kalau belum melihat codenya dan pesan kesalahannya langsung,
Deletecoba gan kirimkan gambarnya lewat gplus saya
Widget Related post nya berhasil. Terima kasih :)
ReplyDeletemau coba nih tapi masih bingung maaf pemula
ReplyDeletebagi pemula saya sarankan untuk mencoba memperhatikan dulu struktur html dan css pada template selama sebulan, dari seringnya memperhatikan bentuk code , lama-lama jadi paham sendiri nanti
DeleteSaya kurang paham yang googlefont apis mas...setelah memasukkan style../style diatas /head kita buka url googleapis yah?pilih cssnya gmn yah?
ReplyDeletejika template menggunkan fontgoogle apis css atau url css lainnya maka harus dimasukkan ketemplate berupa css bukan berupa url, biar loading nya langsung dari template, untuk mengambil css nya tinggal dibuka aja url css dibrowsur , , lalu buat style atau bisa langsung dimasukkan css nya di b:skin.
DeleteKalu url JS ini harus di async untuk mendapatkan speed maksimal.
untuk melihat apa saja url yang menhambat loading bisa cek di https://developers.google.com/speed/pagespeed/insights/
tapi kalau tidak menggunkan url CSS dan JS, cukup head dan /head nya saja di ganti,,
Begitu toh...nah ini baru jelas,terang benderang laksana malam disinari bulan��....makasih gan...sukses buat seo-v6.
Deleteurl font googleapis pada tab baru nanti terlihat code css, terus di copy dan paste diantara "<...style>.<...../style>". pertnyaannya, apakah
ReplyDelete"<.....link async='async' href='http://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Lora:300,400,400italic,700|Shadows+Into+Light' media='all' rel='stylesheet' type='text/css'/>"
(itu contoh di blog saya, dibawah <....head>)
DIHAPUS, atau di BIARKAN saja? kalo dibiarkan saja, saya test masih sama tidak ada perubahan, tpi kalo dihapus, font nya berubah diblog...terimkasih gan..
kalau dihapus ada perubahan , berarti ada yang salah dengan prosedur penempatan css font googleapis,, karena tujuan kita memang mau menghapus url css google apisnya.
Deletecara yang paling mudah adalah isi dari url font google apis nya dimasukkan di b:skin,
contoh sedikit dari isi url font google apsi
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
src: local('Lora Italic'), local('Lora-Italic') ........
.......................
Cara kedua bisa membuat style baru di antara Head lalu masukkan isi url diatara style
Yang ketiga bisa dengan script
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("href='http://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Lora:300,400,400italic,700|Shadows+Into+Light");
//]]>
</script>
Sesuaikan url font google apisnya pada url discript tersebut dan Masukkan script itu diatas /haed ..
Ada 3 cara yang bisa dipilih
Koq kode header saya nemu ada dua ya? apakah harus diganti semua
ReplyDeleteyang saya maksud disitu adalah code widget header,, ini cuma ada satu, biasanya yang paling bawah,,
Deletesaya pakai template contempo, saya coba praktekan n berhasil lebih seo friendly. Mksh
ReplyDeleteBagaimana caranya menggeser kolom postingan ke dekat kesidebar yang kiri, jadi enak aja dilihat, udah saya utak atik di setingan widths nggak mau,lewat edit html juga nggak ngerti.
ReplyDeletecari code CSS di bawah ini
Delete.page_body .centered {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
max-width: 877px;
min-height: 100vh;
padding: 24px 0;
}
Selanjutnya bisa di hapus code max-width: 877px;
nanti akan menghasilkan lebar yang maksimal dan mendekati sidebar kiri
Makasih mas, atas ilmunya, dicoba dulu semoga bisa.
Deletekalo sidebar yang kiri dipindahkan ke kanan gmana caranya mas ?
Deletecari code ini
Delete.sidebar-container {
bottom: 0;
position: fixed;
top: 0;
left: 0;
right: auto;
}
lalu ganti dengan seperti ini
.sidebar-container {
bottom: 0;
position: fixed;
top: 0;
left: auto;
right: 0;
}
------------------
selanjutnya cari code ini
.page_body {
margin-left: $(sidebar.width);
}
ganti menjadi
.page_body {
margin-right: $(sidebar.width);
}
ReplyDeleteItu letaknya dimana yah?
letak codenya ada di dasbor blogger > tema > edit html ,
DeleteAssalaamu'alaikum mas Randi.
ReplyDeleteAku baru belajar buat blog dengan menggunakan Tema Contempo. Tapi aku punya masalah nih.
Aku membuat Daftar isi ( sitemap ), About dan Contac Form dihalaman statis. Setelah sitemap selesai dibuat, kok Popular Post nya ngikut tampil je..?
Bagaimana cara menghilangkan Popular Post di halaman statis..?
Terima Kasih,
Wassalaam
walaikumsallam, untuk memunculkan populer post hanya pada postingan saja, cari code yang mirip seperti ini
Delete<b:widget cond='data:view.isSingleItem and data:posts any undefinedp => p.id != data:view.postId)' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='true'>
lalu di edit seperti kode dibawah ini
<b:widget cond='data:blog.pageType == "item"' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='true'>
Alhamdulillah mas Randi, bisa........
DeleteTapi ada satu lagi nih pertanyaannya..
Bagaimana ngebuat sitemap automatis di tema contempo, soale aku deh nyoba segala macam script sitemap auto pemberian gratis dari berbagai blog, eh nggak taunya malah kaga bisa tampil..
Please..
Wassalaamu'alaikum,
Terima Kasih
untuk pembuatan sitemap di halaman statis blog sudah saya buatkan tutorialnya mas, silahkan di cari di blog ini, 100% work
Deleteterimakasih gan ilmunya.
ReplyDeletetapi kenapa saya tidak bisa mengganti kode b:section class='footer'
diganti buat apa gan?
Deletesepertinya untuk bahasan diatas saya tidak menyinggung masalah footer
Assalamualakum mas. Klok mau nambahkan sidebar gimana ya? Trus membedakan markup html untuk home page dan area postingan kayak apa?
ReplyDeletewaalikumsalam, menambahkan sidebar? pada template contempo itu sudah ada sidebarnya pada sebelah kiri, hanya saja akan tampil jika monitor mempunyai lebar yang lebih besar.. untuk membedakan area home page dan blogpostingan ini dalam kasus untuk apa? saya kurang jelas
Deletecara menampilkan sidebar ny gmna mas klw kita punya layar kecil
Deletememunculkan sidebar pada layar hp? jadi sidebarnya tetap terbuka
Deletemas, bagaimana supaya heading dinamis kalau yang menggunakan gambar pada title header?
ReplyDeleteSudah dibuatkan tutorialnya, langsung saja kesini: Cara Membuat Heading Dinamis pada Judul Blog yang Menggunakan Gambar atau Logo
Deleteok, berarti balik lagi kesini karena mau buat templat contempo seo frndly dulu. untuk pencarian kode b:includable id='title' saya temukan ada dua. apakah diterapkan ke kode yang sudah pernah saya buat markup ?
Deleteyang diganti code yang paling bawah
Deleteunt b:includable yg paing bawah, sebelum tag b:class cond ada tag yg sudah di markup => div itemprop='headline'... <-- ini tdk perlu dihapus ya mas?
Deleteiya markup nya tidak perlu dihapus
DeleteMas, saya pengguna cotempo juga. Mau nanya pada blog saya, dibagian sidebar tulisannya kepotong, cara perbaikinya gimana ??
ReplyDeletesaya kurang tau pasti penyebabnya apakah karena JS atau karena ada penambahan pada tag i,
Deletepenyebab dia bergeser kekiri karena pada tag i terdapat style text-indent: -18pt
hapus saja code text-indent: -18pt
mas, mohon bantuannya..
ReplyDeleteUntuk template emporio dan soho, kode CSS breadcrumbs nya gimana ya biar bisa tepat di atas judul posting
makasih
code css nya menyesuaikan bentuk HTMLnya mas, mungkin nanti saya akan coba juga bikin artikel memsang breadcrumbs untuk template emporio dan soho,
DeleteTerima kasih atas tutorialnya. Saya ingin bertanya, setelah semua perubahan di atas saya terapkan, mengapa tampilan artikel saya di homepage nya berubah ya? Maksud saya, judulnya tampak sangat besar, dan snippet artikelnya tergeser kekanan dan hampir tak kelihatan. Mohon Bantuannya
ReplyDeleteboleh saya lihat blognya mas? nanti saya liihat kesalahan
DeleteHallo om randi,,, saya perhatikan di blog ini gak memasang related post,,, kalau saya boleh saya tahu, apa alasannya om? Apakah karena sudah ada matched content?
ReplyDeletehalo om izal ,, nanti saya pasang om , tapi di tengah artikel, masih sibuk banget saya, belum sempat otak atik template,hehe,, sebenarnya mach konten juga bisa mewakili related post, tapi ini juga gak sepenuhnya bagus kalau kita gak pakai related post, karena akibatnya tidak akan memaksimal kan "bounce rate"
DeleteSudah saya terapkan di blog saya, tapi klo bleh saya req untuk nampilin sidebar di layar kecil saat mode dekstop mas. Terimkasih
ReplyDeleteok mas, sarannya saya tampung dulu
DeleteTerimakasih. Sudah saya terapkan pada blog saya tapi saya punya pertanyaan, bagaimana cara mengetahui apakah kalau cara ini sudah bekerja menjadi lebih baik dari setingan default ? Dan kalau boleh tolong buatin artikel cara membuat widget berada di samping pada template notable.
ReplyDeleteuntuk poin
Deleteno 1. itu dengan cara melihat rel canonicalnya
no 2. tag heading bisa di cek di web yang menyediakan cek heading tag h1 h2 dan seterusnya bisa cari di google dengan keyword cek tag heading h1 h2
no 3 breadcrumb ini bisa dilihat diartikel di atas judul postingan ada jalur atau peta situs yang menjelaskan alur dan letak artikel tersebut, misalnya home>seo>judul postingan
no 4 bisa dicek di pagespeed insight
untuk masukkannya trimakasih, akan saya tampung dulu untuk bahan artikel selanjutnya
poin no 4 untuk related post bisa di lihat di bagian bawah setelah artikel ada link yaang menampilkan judul postingan dengan label yang sama
Deletemakasih mas tutorialnya. sangat bermanfaat. bisa belajar ngedit html bgini jadinya. makasih makasih.
ReplyDeleteMas saya mau tanya supaya sticky tidak ikut turun saat kita scroll halaman ke bawah itu gimana mas? kayanya itu bakal ganggu di versi mobile jadi keliatan ngga full screen karena tertutup stiki tersebut. Mohon bantuannya saya newbie hehe
ReplyDeleteCaranya hapus kode ini mas
Delete<div class='centered-top-placeholder'/>
masih belum bisa mas:( di saya kodenya seperti ini div class='vertical-ad-placeholder'>
Deletemenggunkan template apa?
DeleteContempo mas
Deleteitu code saya ambil langsung dari template bawaan contempo, apa memang sudah ketemu terus dihapus tapi masih tidak bisa, atau memang gak ketemu kodenya? harus sama persis dengan code yang saya tunjukkan
DeleteAlkhamdulillah udah ketemu, makasih banyak mas, saya tunggu konten menarik lainnya dari mas nya, semoga sukses terus.
Deletemantap gan
ReplyDeleteMas kan aku pakai tema Cotempo, tetapi tulisan miring , bagaimana itu Cara merubahnya pakai CSS?
ReplyDeletetulisan mana yang miring? untuk mengedit tulisan bisa lewat Desainer Tema Blogger, bisa di cari pada bagian edit tema lalu sesuaikan
DeleteKalo mau bikin tombol navigasi biar muncul di halaman posting gimana ya mas? Saya pake tema contempo.
ReplyDeletekalo ada waktu nanti saya buatkan tutorialya, dituggu saja mas
DeleteKalo buat pasang adsense pake tema contempo gimana mas?
ReplyDeleteKeren mas template mu, terasa ringan loading nya
ReplyDeletegara gara cari cara edit heading H1 untuk blog,malah nyasar kemari,gak nyangka,ini blog memang mantap!
ReplyDeletethnk you brother
apakah kode ini work jika di pake pada template emprio?
ReplyDeleteuntuk code HTMLnya mungkin work, Tapi untuk code CSSnya berbeda, jadi harus ada tindak lanjut lainnya untuk memperbaiki tampilan pada code CSSnya
Deletesayangnya jadi ada dua tag h1nya yaitu di header/judul blog
ReplyDeletedan judul posting. gimana ya cara hapusnya, sya udah otak atik tetep saja gak ngaruh..maksudnya agar h1 pada header/judul blog dihapus saja..
pada poin no 2 sudah di berikan code untuk membuat H1 menjadi dinamis, jadi ketika membuka artikel maka nama blog berubah menjadi anchor text dan judul artikel menjadi H1
Delete