Top

Mas Sugeng

Berbagi pengalaman ngeblog

Beranda / SEO Blogger / Modifikasi Template Blogger Jadi SEO Friendly

Modifikasi Template Blogger Jadi SEO Friendly

Masih melanjutkan postingan saya sebelumnya seputar template SEO friendly, kali ini saya ingin sedikit berbagi tutorial tentang bagaimana cara memodifikasi template blogger menjadi lebih SEO friendly.

Tutorial seperti ini sebenarnya sudah cukup basi. Ketika saya masih baru mengenal dunia blogger tutorial seperti ini sudah banyak yang membahasnya. Tapi tentu saja apa yang akan saya bagikan disini adalah sesuai dengan pengalaman dan hasil experimen sendiri, jadi mungkin akan ada perbedaan dengan tutorial-tutorial yang pernah ada sebelumnya.

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.

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 == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

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, karena semuanya sudah saya terangkan pada postingan saya sebelumnya, 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 == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><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 kamsudnya masbro? please baca postingan saya sebelumnya untuk mendapatkan penjelasannya.

Cari kode ini di dalam template sobat:

        <b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'>
          <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      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='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <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='Simple SEO (Header)' type='Header'>
        <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      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='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' 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 != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <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 != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <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 != &quot;item&quot;'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <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>

Apakah sudah selesai ???? belum!!!

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 tidak akan menemukan kode tersebut jika tidak menggunakan template Simple dari blogger, jadi saya hanya bisa mengucapkan selamat berpusing ria.

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 == &quot;static_page&quot;'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
     </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <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> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
        </div>
        <b:else/>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
     </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <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> &#187; <span><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' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
        <b:else/>
        <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <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 tinggal sobat tambahin sedikit CSS agar tampilannya tidak terlalu polos. Copy/salin kode 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>

Huft..!

Saya rasa semua yang di atas sudah cukup untuk membuat template blog sobat menjadi lebih ganteng dari sebelumnya. Saya tahu bagi sobat yang tidak terbiasa berurusuan dengan kode pasti tutorial di atas hanya akan membuat puyeng. Jadi solusinya cukup download saja template yang sudah jadi.

Simple SEO, template modifikasi ala Mas Sugeng. Download Klik Disini. Demo Klik Disini.

Silakan bisa sobat download template Simple yang sudah saya modifikasi melalui link di atas. Template ini sudah saya tambahkan auto readmore agar terlihat lebih rapih.

Sobat bisa menggunakan template ini untuk blog dummy, atau untuk belajar modifikasi template. Jangan lupa juga untuk melihat koleksi template saya di www.evotemplates.net.

Terima kasih…!

Artikel Terkait:

269 Komentar

  3. Kalau saya pake template mas sugeng. Jadi apakah harus di ganti lagi mas?
    Terima kasih informasinya

    Balas

  6. keren tapi kapan2 dicoba kalau blog ane anjok mas 🙂

    Balas

  15. wah..mantap nich. boleh dicoba nanti mas..memang lebih mempunyai value jika yang dishare berdasar pengalaman sendiri. Lanjutkan mas..

    Balas

  43. Akhirnya ketemu juga bagaimana cara Modifikasi Template Blogger Jadi SEO Friendly

    Balas

  47. template nya bawaan blogspot kurang seo ya gan, judul blog lebih duluan dari pada keyword.

    Balas

  49. kalau ingin membuat template sendiri pake software atau edit html sendiri mas, bisa kasih step2nya enggak?

    Balas

  63. Blognya mas sugeng yg ini terkena algoritma google ya? sayang banget. Padahal diluar masih banyak lo web yg pasang backlink di footer template buatannya. Ya, semoga sajalah segera mendapat titik terang untuk masalahnya mas!

    Balas

  65. ilmu nya bermanfaat banget ini.. apalagi title dan meta tag yang di bagiin berdasarkan penelitian dan pengalaman pribadi pasti jos bangettt

    Balas

  71. www.arfasera.com
    mas sugeng emang top..
    sekalian numpang tenar sama mas sugeng, soalnya blog baru.

    Balas

  73. Thanks mas infonya, saya izin menggunakan salah satu template buatan mas.
    saya pasang di http://serelofilm.blogspot.com yang berisi informasi tentang film 🙂

    Balas

  74. mau nanya mas, mungkin keluar dari jalur, tapi temanya sama, hehe… Mas, cara ganti tulisan “komentar” menjadi “tanggapan” sprti blog mas ini gimana mas? Misalnya :10 Tanggapan untuk……
    Mohon pencerahanmya mas! Nuhun sebelumnya.

    Balas

  82. maaf mas,..kalo ngebedain template itu seo friendly atau ngga itu dari mana ya…thanks

    Balas

  83. terima kasih gan artikelnya sangat bagus kebetulan saya juga suka otak atik kode html agar template jadi seo friendly, saya tunggu postingan yang bermanfaat lainya gan

    Balas

  88. wah bermanfaat banget nih , sempat kebingungan ngutak atik html , agar blog template menjadi seo

    Balas

  89. Hallo Mas Sugeng, saya catur. seneng banget bisa pake template mas yang udah ada mobile version.
    saya ingin menghilangkan breadcumpnya, bagaimana caranya ya mas. saya hapus balik cara memasang breadcump di atas tapi ga bisa di save, saya hapus aja bagian yang ada breadcumbnya tp di homepage list postingnya ga keluar, terimakasih

    Balas

  90. oh ya mas, caranya bikin related post yang vertikal gimana yak 🙂
    saya pake template mas tapi rekated postnya masih horiizontal
    terimakasih banyak

    Balas

  91. bagus mas .. menarik terimkasih mas untuk tutorialnya ilmu baru untuka saya yang sedang belajar blog.. terimakasih

    Balas

  95. Selain tempate, optimasi seo onpage dan seo off page juga penting, mengingat banyaknya faktor yang perlu diperhatikan agar blog menjadi posisi pertama di google, tentunya dengan menerapkan keyword yang sesuai seperti tips dan trik, info terupdate dan sebagainya.

    Balas

  97. Mau tanya mas, untuk meta descriptionnya apa dihapus juga? jadi ga perlu isi description dan keyword lagi? trims 🙂

    contoh di bawah

    meta content = ‘isi deskripsi’ name=’description’/
    meta content = ‘isi keyword’ name=’keywords’/

    dan untuk meta content seperti ini apa dihapus juga mas?

    meta content=’IE=EmulateIE7′ http-equiv=’X-UA-Compatible’/
    meta content=’index,follow’ name=’robots’/
    meta content=’index,follow,snipet’ name=’googlebot’/
    meta content=’follow, all’ name=’Googlebot-Image’/
    meta content=’all’ name=’Webcrawlers’/
    meta content=’follow, all’ name=’msnbot’/
    meta content=’follow, all’ name=’Slurp’/
    meta content=’follow, all’ name=’Scooter’/
    meta content=’follow, all’ name=’ZyBorg’/
    meta content=’all, index, follow’ name=’yahoobot’/
    meta content=’all, index, follow’ name=’bingbot’/>
    meta content=’all’ name=’Spiders’/
    meta content=’all’ name=’audience’/
    meta content=’all,index,follow’ name=’alexabot’/
    meta content=’index,follow,noodp,noydir’ name=’robots’/
    meta content=’1 days’ name=’revisit’/
    meta content=’1 Days’ name=’Revisit-after’/
    meta content=’text/html; charset=UTF-8′ http-equiv=’Content-Type’/
    meta content=’En’ name=’Language’/
    meta content=’all-language’ http-equiv=’Content-Language’/
    meta content=’document’ name=’resource-type’/
    meta content=’never’ name=’expires’/
    meta content=’Global’ name=’Distribution’/
    meta content=’true’ name=’MSSmartTagsPreventParsing’/
    meta content=’no-cache’ http-equiv=’cache-control’/
    meta content=’no-cache’ http-equiv=’pragma’/
    meta content=’general’ name=’rating’/
    meta content=’global’ name=’target’/
    meta content=’United States’ name=’geo.placename’/
    meta content=’usa’ name=’geo.region’/

    Balas

  98. nanti apa ngga ngaruh ke smua element sprti yg tadinya ada background warna hitam jd warna putih?<br />maaf klo prtanyaannya salah, maklum msh newbie mas sugeng 🙂

    Balas

  103. mas mau nanya mas ketika saya mau nerapin breadcrumb di blok saya, tpi gagal terus mas,, apa yang sla t mas..
    ini katanya mas
    The widget with id “Blog1” contains at least two b:includable elements with the same id: “breadcrumb”. All b:includable elements should have a unique id for a given widget
    mohon penjelasannya mas

    Balas

  112. Lengkap Banget Mas tutorialnya. terima kasih mas sugeng moga makin sukses blognya 😀

    Balas

  114. buat yang ngerti soal HTML sih mungkin gampang mas, tapi baut pemula seperti saya dan gak ngerti soal kode HTML agak rumit juga, hehehe… tp saya coba dulu deh.. makasi infonya

    Balas

  118. mas sugeng salam kenal, sebelumnya terimakasih sharing ilmunya. Saya sudah menerapkan ilmu diatas. tapi ada satu kode yang belum berhasil neh. .Header h1.title,.Header p.title { kode ini jadinya antara judul blog dan deskripsi jadi jauh jaraknya. terus keterangannya invalid left. gimana supaya judul dan deskripsi jadi seperti semula (berdekatan posisinya)? makasih

    Balas

  120. .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);
    }

    misi,,, salam buat mas sugeng nya,, maaf mau nanya nech.. kok setelah di pasang kode di atas template gak bisa di save dan tampil pemberitahuan “Invalid variable declaration in page skin: Variable is used but not defined. Input: header.shadow.offset.left”, memperbaikinya gimana ya mas? mohon pencerahan nya maklum orang baru…

    Balas

  124. Thanks banget mas, terutama yang panjang banget itu.. Saya ingin tanya, artikel sebelumnya yang mana ya? Masih gak ngerti maksudnya dinamis gimana..
    Tapi kode HTML yang disini gak banyak JavaScriptnya kan? Soalnya kalau di blog saya, template untuk mobile sama desktop saya bikin sama, cuma ukurannya doang yang otomatis menyesuaikan.
    Makasih sekali lagi atas sharing ilmunya..

    Balas

  128. Malam mas. Sebelumnya saya mau ucapkan terima kasih. Gak nyangka ada blog semacam ini. Bahasanya mudah dicerna, dan terkesan ramah.

    Saya mau beli template mas sugeng, cuma saya kurang paham harus pilih yang mana. Jadi blog saya itu sekedar berisi artikel sharing infromasi, akamatnya di sini mas -> http://pendaftaransekolahkedinasan.blogspot.com/

    Kira2 yg cocok pake template yg mana mas? Kalau mas gak keberatan bisa email saya ke [email protected]

    Thks..

    Balas

  129. wah update lagi mas ini…. bermanfaat banget,,,Tutor diatas apa bisa di terapkan di semua Template Mas???

    Balas

  133. maaf mas sugeng mau tanya
    kuk kalo saya masukkan keywoard ke google ntar munculnya kuk ke link homepage buka link artikel yang di tuju, yang salah bagian mana ya??

    Balas

  137. Waduh kodenya banyak sekali, tapi gak papa deh action aja gan demi kebaikan blog ane, soalnya templatenya gak SEO Freindly gitu. Salam mas dari admin
    Babaci29 Infomasi Teknologi

    Balas

  142. Terimakasih banyak Bro… saya akui trik dari Mas Sugeng ini sangat pakar dan mumpuni, terbukti setiap template blogger yang saya modifikasi dengan trik diatas, oleh h-t-t-p-:-/-/-chkme-.-com selalau diberi skor 100 % paling rendah 92%, baik di home maupun di page, salut buat mas dan Terimakasih banyak…. salam dari saya newbie

    Balas

  149. massugeng coba tinjau template blog saya, ada masalah pada breadcumbsnya, breadcumbsnya muncul dua kali satu diatas judul dan satunya dibawah deket kolom komentar yang bawah. mohon pencerahannya mas

    Balas

  151. makasih infonya mas sugeng, sudah saya pasang di blog http://onestopre.blogspot.com/ dan it works… mantaappp…(y)

    Balas

  159. over all bagus, lebih bagus lagi dikasih title tag, sama dicek ckhme, meta keywordnya kagak muncul, skornya jadi turun drastis, mohon koreksi bila salah….

    Balas

  161. Infonya sangat bermanfaat gan. saya rasa artikel ini membuat saya lebih tahu dan lebih paham.<br />oh iya gan perkenalkan saya seorang blogger pemula yang masih belajar tentang blog.<br />makanya saya semangat cari info-info lain yang mungkin saja bermanfaat buat saya peribadi.<br />Oh iya gan posting artikel tentang artikel ini donk.<br /><a href="http://belajarsearchengine.com/2013/10/CaraMembuatBlogdenganBlogger.html" rel="nofollow">Cara Membuat Blog dengan Blogger</a><br /><a href="http://belajarsearchengine.com/2014/01/CaraMemasangAnimasiBurungTwitterMelayangdiBlog.html" rel="nofollow">Cara Memasang Animasi Burung Twitter Melayang di Blog</a><br /><a href="http://belajarsearchengine.com/2013/12/CaraMemasangWidgetAlexaRankdiBlog.html" rel="nofollow">Cara Memasang Widget Alexa Rank di Blog</a><br /><a href="http://belajarsearchengine.com/2014/06/CaraMembuatAboutMeDiBlog.html" rel="nofollow">Cara Membuat About Me Di Blog</a><br /><a href="http://belajarsearchengine.com/2014/03/CaraMembuatBukuTamuTersembunyiPadaBlogger.html" rel="nofollow">Cara Membuat Buku Tamu Tersembunyi Pada Blogger</a><br />Sepertinya artikel-artikel seperti itu banyak orang yang mencarinya.blog baru saya baru <br />saya posting Cara Membuat Buku Tamu Tersembunyi di Blog<br /><br />Ok gan. terimakasih lagi atas infonya, semoga agan rajin updatenya dan sukses selalu.<br /><a href="http://belajarsearchengine.com/2014/06/Sitemap.html" rel="nofollow">salam kenal</a> dari saya.

    Balas

  184. terima kasih sebelumnya mas sudah share template yang free untuk pemula seperti saya…
    saya pake template BroSense mas, apakah saya perlu untuk mengganti bagian-bagian yang seperti diatas pada template saya mas..
    untuk memaksimalkan friendly blog saya mas…

    Balas

  191. maaf mas sugeng, artikelnya bagus, tapi saya tidak berani menerapkan nya ke blog saya, karena saya sudah cinta banget nih sama template yang baru saya pasang,..sebagai blogger pemula sangat butuh informasi segar seperti artikel dari mas sugeng ini..salam kenal injih..

    Balas

  192. Mas Sugeng Bantuannya, Payah kali cari Kode d blog saya yg sama, sperti cntoh d atas, Sperti mencari kode ini <b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'>
    <b:includable id='main'>.

    di Blog saya gk ad, g mna ya solusinya???,
    #maklum Pemula, (masih belajar)

    Balas

  194. Mas Sugeng mau tanya, meskipun sepertinya tidak mungkin dijawab karena yang komen segitu banyak juga tidak ada yang direspon.

    Di template default simple ini cara membuat dynamic heading-nya bagaimana ya..?

    Terima kasih (mudah-mudahan dijawab "ngarep.com")

    Balas

      • Kalau untuk materi yang semua dijelaskan diatas, sudah saya praktekan sendiri mas Sugeng. Saya juga download dari link yang disediakan diatas, tapi yang saya maksud yaitu nama blog yang bisa berganti otomatis dengan judul artikel..

        Maaf kalau salah persepsi soal dynamic heading-nya..

        Balas

  195. Mas Sugeng, Kalo saya pakai thema blog yang di evotemplate.net dan pada featurnya tercantum SEO Ready. Berarti thema tersebut sudah dimodifikasi sesuai dengan postingan ini apa harus saya modifikasi lagi? Terimakasih atas jawabannya.

    Balas

  197. sudah di terapin ke blog hasilnya manyus mas sugeng. domainya udah ganti lagi nih. emang keren tutorialnya

    Balas

  198. dah ane terapkan mas sugeng,,moga j jadi lebih mangstap web ane..biar kaya web mas sugeng ini…sip..meskipun ane belum pernah payout dari adsense nih,,
    sekalian nanya mas, biasanya berapa bulan sih kita bisa nyampe payout ke 100 dollar tuh?,,ane dapet kadang 0,01

    Balas

  199. mas mau tanya donk tentang meta tag
    perbedaan noindex, nofollow, dll..
    dengan index, follow, dll itu apa ya beda nya?

    Balas

    • Noindex = Menyuruh mesih pencari agar tidak menampilkan halaman tersebut pada halaman mesin pencari.
      Nofollow = Menyuruh mesin pencari untuk tidak mengikuti link yang ada di halaman tersebut.

      Index dan Follow itu kebalikannya

      Balas

  203. Makasih banyak mas. sangat bermanfaat. jujur saja saya ucapkan banyak terimakasih
    saya cek di chkme dan meningkat mas skornya. sekali lagi makasih banyak

    Balas

  208. Di coba dan bermanfaat mas
    Oh iya mas, kalau optimasi seo url sendiri bagaimana mas ? apa jika tidak ada bulan & tahun itu juga termasuk optimasi seo ? Contoh kaya postingan blog mas sugeng ini ?
    Kalau benar, bisa bikin tutorialnya tidak mas buat blogger ?
    makasih yah mas

    Balas

    • Pakai bulan & tahun atau tidak menurut saya nggak ngaruh mas, cuma kalau nggak pakai bulan dan tahun jadi lebih simpel. Khusus di blogger nggak bisa dihapus tanggal sama bulannya.

      Balas

  209. mas mau nanya donk !!!
    gimana cara membuat blog terindex di google search dengan kata-kata yang kita inginkan mas
    misalnya : http://tipsinfohidupsehat.blogspot.com/2015/08/cara-mengatasi-jerawat-dengan-cepat

    saya maunya kalau di cari di google pencaraian tinggal di bikin Cara menghilangkan jerawat dengan cepat ,,, langsung keluar dihalaman pertama nya mas….

    Mohon mas pengetahuannya…
    Kalau berhasil saya sangaat berterima kasih mas

    Balas

    • Kalau kata kunci “Cara menghilangkan jerawat dengan cepat” bisa dibilang persaingannya sangat banyak. Butuh ilmu SEO tingkat dewa supaya bisa halaman pertama.

      Balas

      • Jadi gimana mas,,,apa yang harus saya lakukan agar blog saya terdaftar di halaman pencarian google mas,,,mohon
        jawabannya mas,,,

        Balas

  211. saya kira SEO cuma onpage dan offpage tanpa merubah rubah html.. ternyata masih banyak yang harus saya pelajari..
    terimakasih infonya akan saya coba dan belajar lagi

    Balas

  212. Makasih mas q mau download ah kayaknya one nih mas walaupun sederhana tapi Templatnya Seo Frendly.

    Balas

  213. Wuih, Mas Sugeng, sangat membantu sekali, Gile,, beberapa bulan yang lalu saya ngecek di chkme, score seo nya cuma nyampe 51%. sampai sekarang belum saya modifikasi dan terus ngeblog aja, setelah iseng nyoba 1 script di atas, score seo blog saya langsung berubah drastis, langsung jadi 85%.. keren ,,,. Mungkin kalo semua script di atas saya pakai, mungkin saja bisa lebih tinggi lagi heheheheh. makasih banyak ya Mas

    Balas

  214. Wah mas bener bener pusing ternyata Cara modifikasi templat bawaan blogger yang keliatanya mudah ,ternyata cukup bikin pusing kepala.

    Setelah saya coba berpusing ria selama satu minggu akhirnya berhasil juga mas, seneng banget aku.

    Trimakasih udah ngasih tau Caranya modifikasi templat bawaan blogger salam sukses selalu mas.

    Balas

  215. untuk pasang breadcumnya saya kok g berhasil g bisa disave

    udah di ganti kode
    dengan kode baru…
    Ini Pesannya? The widget with id “Blog1” contains at least two b:includable elements with the same id: “breadcrumb”. All b:includable elements should have a unique id for a given widget.
    kenapa ya?

    Balas

  216. Gan Su Geng,,, Nuwun ya,,, atas ilmune, tak terapka di blogku, alhasil pengunjung dari SE meningkat yang biasanya cuma ratusan, sekarang jadi ribuan,, bahkan hampir semua postingan saya masuk di pageone, maksimal halaman 2, padahal posting baru beberapa jam,,’
    semoga ilmu ini bermanfaat untuk blogger yang lain,dan khusus buat kang sugeng, tambah berkah ilmunya…

    salam kang….

    Balas

  217. Mohon pencerahannya mas Sugeng..

    meta content saya yang keyword kan seperti ini :

    dalam meta content saya berisi sesuai dengan judul blog
    Sedangkan meta content blog sebelah saya lihat seperti ini :

    yang blog sebelah ini berisi keyword yang dibidik.
    Yang jadi pertanyaan saya : apakah saya bisa mengganti isi dalam meta content saya tersebut dengan keyword yang akan saya bidik seperti meta content blog sebelah tsb.

    Terima kasih mas

    Balas

    • Bisa, cuma menurut saya lebih bauk nggak perlu diganti. Soalnya meta keyword sudah nggak digunakan oleh mesin pencari jadi nggak bakalan memberikan efek apa-apa.

      Balas

  222. mas saya punya masalah tentang header.php di wp. masalahnya yaitu meta name webmaster saya serign hilang sendiri bahkan juga alexa veryvication juga hilang. dan webmasternya pun harus verivikasi lagi . itu terjadi di 2 blog saya templatenya pun berbeda dan premium semua. gimana mas solusinya . mohon pencerahannya ya mas Sugeng.

    Balas

    • Itu biasanya karena kodenya terhapus ketika theme-nya update versi terbaru. Solusinya harus pakai child theme. Mohon maaf untuk detailnya ngggak bisa saya jelasin di sini.

      Balas

  223. Assalamualaikum w.r w.b, trimaksih atas kode yang di atas mas, satu hal yang ingin saya tanyakan terkait tema di atas, gi mana cara membagi dua header pada tema yang sudah diedit di atas, niatnya supaya ada space utuk iklan mas… kalau berkenan mohon pencerahannya mas… salam..

    Balas

  224. Kapan-kapan mohon share post sejenis ini tapi untuk semua jenis blog ya , bukan hanya khusus blogger.com saja 🙂

    Balas

  225. Mau tanya ni mas, klo saya search di google “Sugeng.id” muncul web mas ini, dan di bawahnya ada seperti sub2 menunya, sedangkan punya saya waktu di search hasilnya muncul hanya saja gak ada seperti sub2 menu di bwahnya, itu ada tutorialnya gak mas?klo gak ada mohon bantuannya dibuatkan artikel atau by email gpp. makasi mas

    Balas

  226. mas mau tanya ni mas agak out topik mas, ini saya tadi coba search di google “sugeng.id”, munculnya ada web mas ini lalu di bawahnya kayak ada sub2 bagian dari blog mas ini, sedangkan saya search punya saya gak ada mas, itu gmna cara buatnya ya mas?

    Balas

  227. Jadi, langkah untuk memodifikasi template agar menjadi seo friendly yang mas sugeng jelaskan di atas hanya berlaku untuk blog yang menggunakan template bawaan kah ?

    Balas

  228. mas, saya sudah menggunakan template evo magz dari blog mas sugeng ini. karena sudah dijelaskan soal seo template sudah di optimalkan, jadi saya tidak perlu repot lagi kan mas untuk menerapkan tutorial diatas tersebut ?! 😀

    Balas

  229. Mas Sugeng, terima kasih untuk tips nya..mantapppsss banget..postingan blog saya langsung masuk hal 1 di pencarian google.
    tapi ada yang saya mau tanyakan, knapa setelah di’klik’ di pencarian google tsb, postingan saya gak keluar yah di blog saya? namun waktu saya coba masuk lewat blog saya, postingan saya bisa keluar.
    mohon nasehatnya Mas Sugeng..matur nuwun… 🙂

    Balas

  230. Mas pada bagian 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);
    }

    Klo gk di ganti sama script yang mas sarankan pengaruh gak mas pada seo-nya?
    maksudnya apa script tsb cmn untuk menyesuaikan saja tittle nya agar lebih terlihat bagus dengan templatenya. Apa gmn mas, tlg masukanya

    Balas

  232. trims mas bro..
    sdh kasih solusi template ter-simple nya..
    daripada nambah puyeng nyoba tambal sana-sini,lebih bagus di dondod aja..
    Salam kenal.

    Balas

  234. Iya, saya sudah download templatenya untuk blog blogspot saya. Terus saya modif sedikit. Cuman huruf untuk tanggal kok kogedean saya ganti pake icon aja.

    Ma kasih ya… gak jual template unyu nih buat cewek?

    Balas

  235. untuk pemasangan kode breadcrumbs saya gagal terus mas di templat toko online blogspot kenapa ya pas di simpan selalu ada pesan kesalahan apa breadcrumbs hanya untuk templat biasa saja maksudnya bukan untuk templat tokoonline

    Balas

  239. Sangat menarik mas, namun saya juga bingung entah ada kode kode yg mas sugeng suruh hapus itu. Karena blog saya sudah ganti dengan template yg bukan mas maksud. Tapi saya coba dulu lah, semoga aja lebih keren dan tambah seo.

    Balas

  240. Mas, aku lihat ada kode widget di bawah kode . Gimana cara mindahinnya mas?

    Sama satu lagi mas, gimana cara ngebuat templatenya jadi mobile friendly alias responsive.

    Balas

Tinggalkan Komentar

Semua komentar saya baca tapi tidak semuanya bisa saya balas. Harap untuk memaklumi.

Tes kecerdasan: * Time limit is exhausted. Please reload CAPTCHA.