Cara Membuat Template Bawaan Blogger Makara Responsive dan Lebih SEO Friendly
 
TEMPLATE atau tema bawaan Blogger (default Blogger template) bahwasanya sudah responsive (mobile-friendly) alasannya yaitu ada versi mobilenya ketika blog dibuka di HP.

Template blog bawaan Blogger juga sebenarnya sudah ramah mesin telusur (SEO friendly) dan fast loading (cepat, ringan).

Anda mungkin sering menemukan warta yang Anda cari di Google, ditemukan di blog dengan tampilan memakai tema bawaan Blogger. Itu bukti ke-SEO-an template bawaan Blogger.

Kebanyakan template premium juga bahwasanya merupakan modifikasi dari template bawaan Blogger. Para desainer template "hanya" mengubahnya menjadi lebih ringan, SEO, dan responsive.

Mengubah atau mengedit sendiri template blogger akan terbebas dari "beban" mencantumkan footer credit link desainer.

Baca Juga: Cara Membuat Template Blog Sendiri

Cara Membuat Template Blogger Makara Responsive dan Lebih SEO

Berikut ini aku share tentang Cara Membuat Template Bawaan Blogger Makara Responsive dan Lebih SEO Friendly.

1. Buat Blog Baru.
2. Pilih template SIMPLE (Sederhana) yang warna biru

Saatnya kita edit.

#1. RESPONSIVEKAN!

Template blog simple bawaan Blogger bahwasanya sudah responsive, dalam arti ada versi mobilenya. Namun, tampilannya sedikit berbeda dengan tampilan di desktop.

Agar tampilan blog tidak berubah atau relatif sama dengan jikalau dibuka di komputer, maka kita harus menjadikannya responsive (mobile friendly).

Silakan buka panduan cara meresponsivekan template bawaan blogger.

#2. FIX Structured Data 

Structured Data template bawan blogger banyak errornya jikalau kita cek di laman resmi Structrured Data Testing Tools milik Google.

Karenanya, harus kita atasi errornya biar template lebih gampang dna cepat terindeks Google dan mesin pencari lainnya. Silakan buka panduan cara mengatasi error structured data blog.

#3. Ringkas Posting Halaman Depan

Silakan buka: Cara Membuat Auto Readmore Blogger

#4. Gunakan Meta Tags SEO Friendly

Ambil kodenya di sini: Meta Tags SEO Friendly BlogTerbaru

#5. Edit Header

Header blog template bawaan blogger umumnya satu kolom saja. Kita dapat mengubahnya menjadi dua kolom dan responsive.

Silakan buka: Cara Membuat Header Blog Makara Dua Kolom

#6. Buat Navigasi Menu Responsive

Silakan buka cara menciptakan navigasi sajian responsive

#7. Tambahkan Breadcrumbs

Breadcrumbs yaitu internal link sekaligus navigasi sajian di halaman posting atau halaman statis yang menunjukkan posisi halaman yang sedang dibuka. Breadcrumbs memudahkan pengunjung membuka posting atau halaman lainnya.

Silakan buka Cara Membuat Breadcrumbs di Blogger

Itu ia 7 langkah Cara Membuat Template Bawaan Blogger Makara Responsive dan Lebih SEO Friendly.

Masih ada langkah lainnya, namun opsional, contohnya Membuat Related Posts.

Bagi blogger pemula, Cara Membuat Template Bawaan Blogger Makara Responsive dan Lebih SEO Friendly akan terasa rumit. Namun, tak ada salahnya mencoba, 'kan? Wasalam. (blogromeltea.blogspot.com).*

Cara Membuat Template Bawaan Blogger (Default Blogger Theme) Kaprikornus Responsive

Template yang disediakan blogger --dikenal dengan sebutan template bawaan blogger atau default blogger template-- sesungguhnya sudah cukup bagi blog Anda sebab sudah ramah mesin pencari (seo friendly).


Bahkan, memakai template bawaan blogger dapat dikatakan lebih baik daripada memakai template hasil desain pihak ketiga yang garatis download maupun premium.

Pasalnya, template bawaan blogger lebih kondusif (safe, secure) dan dijamin blog Anda lebih gampang diindeks Google sebab kode-kodenya sudah lolos verifikasi Blogger yang notabene milik Google.

Template bawaan blogger juga kondusif dari sisipan link yang banyak ditemukan di template gratis download. Bahkan, template premium pun masih saja suka ada injeksi link yang ditanam desainernya.

Satu kelebihan lain, memakai template bawaan blogger menciptakan blog kita bebas credit link footer. Kita dapat menghapus Powered by Blogger atau Diberdayakan oleh Blogger sehingga blog tampak lebih profesional.

Selain itu, template bawaan blogger juga gampang dimodifikasi. Hanya dangan klik Theme > Customize, kita dapat mengubah jenis dan ukuran huruf, model sidebar, lebar blog, dan banyak lagi.

Namun, template bawaan blogger memang terdiri dari dua jenis, untuk tampilan desktop dan mobile. Nah, kalau Anda ingin menciptakan template bawaan blogger jadi responsive, berikut ini instruksi dan cara menerapkannya, sebagaimana sudah banyak juga dishare blogger lain.

Cara Membuat Responsive Template Bawaan Blogger

Anda harus pilih dan pasang dulu template yang disediakan blogger, contohnya pilih template Simple:

Laukan langkah berikut ini untuk menjadikannya responsive:


1. Nonaktifkan Navbar

-  Klik "Layout"
- Cari lokasi Widget "Navbar" dan klik link "Edit" di bawahnya.

- Akan muncul halamana gres (pop-up window).
- Cari tombol "Off" dan klik!
  -Save!

Kita juga dapat menghapusnya dengan cara menghapus instruksi berikut ini di dalam template:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
</b:includable>
</b:widget>
</b:section>

2. Cari dan Ganti kode:

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

dengan kode:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

3. Cari dan Ganti kode:

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

dengan:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4. Simpan instruksi CSS Responsive berikut ini di atas kode </head> 

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

5. Save!

Beres. Kini blog Anda sudah responsive. Jangan lupa nonaktifkan template mobile bawaan blogger. Lakukan setting ibarat ini:

- Theme
- Klik icon Gear
- Klik "No. Show...."

Silakan Anda praktekan Cara Membuat Responsive Template Bawaan Blogger (Default Blogger Theme) di atas dengan menciptakan blog gres untuk percobaan. Nanti, akhirnya tinggal download dan pasang di blog utama Anda.

Menjadikan Template Bawaan Blogger Lebih SEO Friendly

Kita sudah mengakibatkan template bawaan blogger jadi responsive. Kini saatnya menjadikannya lebih ramah mesin telusur (seo friendly). Kita dapat terapkan tips dari Mas Sugeng berikut ini:

1. Title SEO Friendly
Cari instruksi berikut ini:

<title><data:blog.pageTitle/></title>

Hapus dan ganti dengan instruksi title tag SEO friendly 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>

2. Pasang Meta Tag SEO Friendly

Copas instruksi berikut ini di bawah instruksi Title Tags SEO di atas:

<!-- 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>

3. Pasang Tag Heading Dinamis
Cari instruksi ini di dalam template

        <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>

Hapus semua instruksi di atas dan ganti dengan instruksi header blog SEO Friendly berikut 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>

Pasang Judul Posting SEO Friendly
Cari instruksi di bawah ini di dalam template:

    <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 instruksi 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>

Cari instruksi 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);
}

Selesai!

Kini template blog Simple dari Blogger sudah responsive sekaligus lebih SEO Friendly. Wasalam. (blogromeltea.blogspot.com).*

Cara Membuat Template Blog Sendiri di Blogger.

Sebelumnya aku sudah share cara menciptakan template blog dengan Bootstrap. Kali ini cara menciptakan template blog biasa.

Membuat Template Blog sendiri akan menimbulkan template Anda bebas link credit di footer.

Selain itu, desainnya dapat diubahsuaikan dengan selera Anda sendiri, namun tetap mengacu pada Pengalaman Pengguna (User Experience/UX) yang suka blog ringan (fast loading), ramah seluler (mobile-friendly, responsive), dan bersih.

Kode template blogger terdiri dari tiga jenis kode:

1. CSS
2. HTML
3. Javascript

Struktur dasar template blog menyerupai gambar di bawah ini, terdiri dari:

1. Body
2. Header
3. Content/Main
4. Sidebar
5. Footer

Body ialah area template. Lebar standar 980 Pixel. Nama arahan CSS-nya di template  body juga, misalnya: body {background:#fff;font:normal 14px Arial, Sans-serif;color:#333}

Demikian pula nama arahan header, content, sidebar, dan footer diawali dengan nama arahan yang sama, namun biasanya ditambah wrapper, menjadi header-wrapper, content-wrapper atau main-wrapper, sidebar-wrapper, dan footer-wrapper.

Di arahan HTML, nanti nya arahan CSS itu dipanggil dengan arahan <body>, <div id='header-wrapper'>, dan seterusnya.

Banyak blogger yang sudah menyebarkan gratis arahan template dasar blog. Salah satunya Kode Template Dasar Valid HTML5 dari blogger Dua Rupa.

Kode Template Dasar Valid HTML5 yang dibagikan itu sebagai berikut.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> &lt;head&gt; <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/> <link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='description'/> <b:else/> <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/> </b:if> </b:if>  <!-- 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>  &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[ ]]></b:skin>  <style type='text/css'> /* RESET */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;} blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;} blockquote, q {quotes: none;} :focus {outline: 0;} .clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;} body {background-color: #fff;background-position: center center;}  a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;} a:hover {color: #4d4544;} a {color: #3094db;}  #wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;} #header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;} .header {text-align:center} #content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;} #sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;} #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}  .clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0;}  #blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center;margin: 20px 0px 0px 1px;}  .status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative} .status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative} .status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1} .status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4} .status-msg-hidden{visibility:hidden;padding:.3em 0} .status-msg-wrap a{padding-left:.4em;text-decoration:underline} </style>  &lt;!--<head/>--&gt; <body> <div id='wrapper'> <header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget> </b:section> </header> <div class='clearfix'/> <aside id='content-wrapper'> <b:section class='main' id='main'>   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget> </b:section> </aside> <aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside> <div class='clearfix'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'></b:section> </footer> </div> &lt;!--</body>--&gt; </HTML> 

Cara Membuat Template Blog Sendiri di Blogger

Kita dapat gunkana arahan template dasar di atas untuk menciptakan template blog sendiri. Ikuti langkah berikut ini:

1. Buat Blog Baru.
2. Pilih Template Simple atau mana saja.
3. Setelah blog jadi, klik Theme > Edit HTML

4. Hapus SEMUA arahan yang ada (Ctrl+A > tekan Delete)
5. Copas arahan template dasar blog di atas.
6. Save Template.

Ini hasil atau tampilan blog awal dengan arahan template di atas:

 Agar sidebarnya tidak kosong:
1. Klik Layout
2.  Tambahkan widget Popular Posts dan Label

- Klik Add a Gadget di kolom Sidebar > pilih Popular Posts
- Klik Add a Gadget di kolom Sidebar > pilih Labels

sehingga tampilannya menyerupai ini:

Sampai di sini dulu Cara Membuat Template Blog Sendiri di Blogger. Berikutnya kita akan edit kembali dengan:

• Mengubah jenis huruf
• Mengatur ukuran lebar template
• Menambahkan Auto Read More
• Memasang Related Posts
• Menambahkan Breadcrumbs
• Membuatnya makin simple, bersih, dan kian responsive.

Koleksi Template Toko Online (OL Shop) untuk Blogger. Gratis! Free Download.

TOKO ONLINE, online store, online shop, atau e-commerce sekarang menjadi andalan konsumen untuk belanja dengan mudah.

Kebanyakan --kalau tidak semua-- konsumen membuka internet untuk mengecek produk, model, harga, dan spesifikasi barang yang akan dibeli sebelum berangkat ke mall atau ke toko terdekat.

Bisnis online meningkat pesat seiring akomodasi yang ada dalam belanja online. Dipastikan pelaku bisnis modern, perjuangan kecil ataupun besar, mempunyai toko online atau etalase online. Jika tidak, mereka akan dikalahkan pesaing bisnis.

Jualan online tidak cukup dengan memakai media umum Facebook, Twitter, atau Instagram, alasannya yaitu sejatinya media umum itu untuk pertemanan dan share pengalaman atau pengetahuan. Media sosial berfungsi sebagai penunjang situs toko online.

Dengan blog toko online, maka koleksi produk Anda akan terdokumentasi dengan baik, menurut kategori --misalnya-- harga, ukuran, warna, dan lebih gampang ditemukan calon pembeli dibandingkan hanya dipajang atau dipromosikan di media sosial.

Produk yang dimuat di blog toko online juga dijangkau siapa saja yang online, tidak menyerupai di media umum yang dibatasi teman, liker, atau follower.

Semua orang dapat menciptakan toko online untuk mengembangkan usaha, termasuk memakai blogger yang gratis namun kondusif dan SEO Friendly alasannya yaitu milik Google.

20+ Koleksi Template Toko Online Gratis Download

Berikut ini beberapa template toko online gratis download yang dapat dipakai untuk membuat Toko Online dengan Blogspot. 

Bagi yang belum punya blognya, silakan buka Cara Membuat Blog dan Cara Ganti Template Blog.

Template Toko Online untuk Blogger

1. BukaBaju 

Demo ||  Download

2. JohnyBlackstore Template

Demo ||  Download

3. MasgusMarket Template

Demo ||  Download

4. Shopingo - Online Store Responsive Blogger Template

Download

5. BetaCommerce -  Template Blog Online Store Responsive

Demo ||  Download

6. Catalogspot K2 E-Commerce - Template Blog Toko Online

Demo ||  Download

7. Johny Palelu Peang - Template Blog Toko Online

Demo ||  Download

8. Johny Blackstore Template - Template Blog Toko Online

Demo ||  Download

9. Johny Magstore - Template Blog Toko Online

Demo ||  Download

10. Shopping Cart - Template Blog Toko Online

Demo ||  Download

11. Blogger Store - Template Blog Toko Online

Demo ||  Download

12. Baby Shop - Template Blog Toko Online

Demo ||  Download

13. Simplex eShop - Template Blog Toko Online

Demo ||  Download

14. BlogrShop - Online Store Responsive Blogger Template

Demo ||  Download

15. BlogrStore - Online Store Responsive Blogger Template

Demo ||  Download

Panduan Setting

16. Shopping Chart dengan Invoice Mail. 

DEMO |  DOWNLOAD

17. MenStyle Shop - Online Store Responsive Blogger Template

Demo ||  Download

18. Nicole Shop - Online Store Responsive Blogger Template

DEMO -  DOWNLOAD

19. PoliShop - Online Store Responsive Blogger Template

Demo ||  Download

20. Catalogspot Revo eCommerce - Online Store Responsive Blogger Template

Demo ||  Download

21. Shoppaholic - Responsive Blogger Template for Online Shop

Demo ||  Download

Panduan Install/Setting

Template Blog Toko Online dengan Cart Invoice Email

22. Johny Black Store

Demo | Download

 23. Johny Magstore - Template Blog Toko Online Gratis

Demo | Download

 

24. Johny Crott - Tema Toko Online Blogger

Demo | Download Johny Crott Invoice Email

25. Johny Ganteng

Demo | Download

Itulah  beberapa Template Blog Toko Online terbaru. Gratis Download. Mana favorit Anda?

Toko Online dengan Blog WordPress

Toko Online dengan blog CMS WordPress lebih gampang dan lebih mudah lagi. Banyak sekali tema toko online gratis di WordPress.

Template toko online WordPress mempunyai fitur menampilkan galeri produk yang Anda tawarkan, sistem kategori, sampai keranjang belanja. Anda tidak perlu melaksanakan konfigurasi terlalu rumit untuk memasangnya

Untuk menciptakan online store atau toko online dengan WordPress, saya rekomendasikan 7 Template Toko Online WordPress Gratis Supaya Produk Anda Tampil Menarik.

Selamat Berbisnis Online! Semoga Berkah. Wasalam. (http://blogromeltea.blogspot.com).*