Kumpulan Template Blog SEO

Tips SEO : Salah satu keberhasilan Blog cepat dikenali oleh mesin pencari seperti halnya google dan bing adalah faktor Template. Template blog yang tertatah baik dan rapi akan sangat mudah dikenali mesin pencari, maka hal ini kita sebut dengan nama Template Blog SEO.

Bicara soal Template Blog SEO cerdaskom punya banyak pengalaman berkunjung ke berbagai blog tanah air yang cukup berhasil menerapkan template blog yang user Friendly, jadi jika blog anda belum tertata dengan baik dan rapi, coba simak penelurusan dari cerdaskom berikut ini, hitung-hitung kalau berminat bisa langsung di download kan!

Template Blog Krtutorplus
Awal keberhasilan cerdaskom di dunia blog belajar dari krtutorplus ini, dulu namanya kang rohman, tipikal blog kang rohman bersifat dinamis lihat gambarnya:

sumber: krtutorplus

Penempatan iklan, chatting, informasi terupdate sangat relevan sehingga sangat mungkin diklik dari sudut mana saja, website ini pun mendapatkan apresiari peringkat yang tinggi dari cerdaskom, jika rekan-rekan ingin mendapatkan template model dari krtutorlus silakan download templatenya disini : Template Blog SEO Friendly 2012

Catatan : Untuk mendapatkan hasil maksimal anda perlu melakukan sedikit modifikasi pada template ini, namun tidak usah kuatir bawaan aslinya sudah bagus.

Template Blog Zoom Template

sumber: zoomtemplate

Zoom template merupakan kumpulan template blog yang dibuat oleh o-om.com, model template ini sangat user friendly seperti halnya moretemplate.com milik dari cerdaskom. Model template ini sangat baik diterapkan untuk blog yang menonjolkan gambar atau template, jika rekan-rekan punya atau ingin membuat blog kumpulan template atau gambar coba pakai template ini dan lakukan sedikit perubahan

Download templatenya disini

Template Video SEO

Blog ini bisa dikatakan masih sangat baru, namun template videonya sangat terasa bagus sekali, setidaknya bagi anda yang ingin membuat blog kumpulan video-video baik dari youtube sangat cocok memakai template blog ini, karena rekan-rekan tidak perlu menyediakan gambar, layaknya seperti youtube template blog ini bekerja dengan baik meski hanya transfer video langsung, lihat demonya disini

sumber: cerdaskomvideo.blogspot.com

Untuk download templatenya silakan download Template Blog Untuk Video

Semoga informasi ini bisa membuat template rekan-rekan bisa lebih user friendly

Readmore..

Free Template Blog Store V2

Salah satu yang menjadi daya tarik dari blog adalah dapat dijadikan website apa saja karena ketersediaan template yang sangat banyak. Banyak orang merasa sangat terbantu dengan keberadaan template-template blog, seperti halnya template blog kali ini. Cerdaskom akan berbagi template blog untuk penjualan online (belanja online versi 2) atau yang disebut Blog Store V2, sebelunya saya sudah pernah berbagi versi 1 yang cerdaskom share di moretemplate.com. (lihat gambar)

Readmore..

Template blog untuk toko online

Cerdaskom Template Blog: salah satu yang menarik dari blog adalah dapat dibuat layaknya web sungguhan sampai-sampai sepintas pengunjung tidak dapat menbedahkan apakah itu blog atau web seperti hal nya joomla, drupal atau malah web design karya sendiri. Nah pada kesempatan ini cerdaskom akan berbagi suatu  Template blog untuk toko online, layaknya toko online sungguhan sehingga membuat pengunjung sepintas merasa bukan sedang mengunjungi blog.

Jika rekan blogger membeli domain seharga 75.000/tahun pengunjung tidak akan menduga anda memakai blog, nama Template blog untuk toko online nya adalah Babyshop (lht gambar)

Mungkin anda berpikir itukan toko online mainan anak-anak dan bayi, bagaimana jika saya ingin menjual komputer!, ooops tunggu dulu, awalnya iya tampilannya seperti itu tetapi setelah dimodifikasi anda akan lihat perubahan yang sangat besaar nantinya, sebagai contoh disini ada hasil modifikansinya lihat di : toko anita www.tokoanita.com (lihatgambar)

Bagaimana hasil perubahan Template blog untuk toko online nya, jauh sekali bukan, nah disini anda bisa megubah template bawaannya jadi lebih bagus menurut kebutuhan anda.

Tertarik ingin menerapkannya:

Download disini templatenya

atau

Download dari sumbernya di zoomtemplate

Terima kasih o-om buat templatenya yang super keren! sebagai tanda ucaptan terima kasih cerdaskom, saya share blognya o-om buat rekan rekan:

http://www.o-om.com/

Readmore..

Download template cerdaskom

Cerdaskom tips blogging: Kemarin cerdaskom mendapat request dari zokufo yang menanyakan tentang sidebar miliknya cerdaskom kok bisa berubah ketika masuk ke halaman posting bagian kiri dan bawah (footer) tidak kelihatan. Sebenarnya teknik ini tidak sepenuhnya karya dari cerdaskom, sebab cerdaskom banyak belajar dari kang rohman dalam krtutorplus, intinya templatenya dari kang rohman lalu saya modifikasi, nah bagaimana ceritanya, silakan download template blog cerdaskom disini (dapat digunakan untuk blogspot) Berikut ini penjelasan teorinya

Berikut ini adalah tampilan halaman depan

 Kemudian setelah posting dibuka akan seperti ini:

Bagaimana caranya menghilangkan bagian kiri dan bawah (footer), secara teori tempatkan kode dibawah ini tepat di ]]></b:skin> (warning jangan dipraktekkan dulu, saya akan berikan template lengkapnya untuk anda rombak di link paling bawah)

#header { 
  float:left;
  width:500px; 
  margin: 0px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;}
#header2 {
  float:right;
  width:468px;
  margin: 0 auto;
  text-align: left;
  color:#555;}
.header .widget, .header2 .widget {margin:0 auto;padding:40px 0px 5px 0px;}
#header h1 {
  margin:0 auto;
  padding:10px 5px .15em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $pagetitlefont;}
#header a {
  color:$pagetitlecolor;
  text-decoration:none;}
#header a:hover {
  color:$pagetitlecolor;
  }
#header .description {
  margin:0 auto;
  padding:0 5px 5px;
  max-width:100%;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height: 1.2em;
  font: $descriptionfont;
  color: $descriptioncolor;}
#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;}
#outer-wrapper {
  background:#ffffff;
  border-left:1px solid $bordercolor;
  border-right:1px solid $bordercolor;
  border-bottom:1px solid $bordercolor;
  width: 970px;
  margin:0 auto;
  padding:10px 10px 0px 0px;
  text-align:$startSide;
  font: $bodyfont;}
#crosscol-wrapper {padding:0 auto;margin:0 auto;}
.crosscol .widget {margin:0 auto;padding:0px 0px 6px 0px;}
#main-wrapper {padding-left:25px;
  width: 600px;
  float: $startSide;
  word-wrap: break-word;  overflow: hidden; }
#sidebar-wrapper {
  width: 320px;
  float: $endSide;
  word-wrap: break-word; overflow: hidden; }
#sidebarleft-wrapper {border-bottom:1px solid $bordercolor;
  width: 180px;
  float: $startSide;
  word-wrap: break-word; overflow: hidden; }
#footer {border-bottom:1px solid $bordercolor;
  width: 970px;
  float: $startSide;
  word-wrap: break-word; overflow: hidden; }

Yang artinya kurang lebih seperti ini :
Kita defenisikan terlebih dahulu masing-masing kolom seperti gambar diatas dengan maksud untuk menghilangkan(hidden) atau memunculkan kolom tersebut, selain itu ada juga perintah auto untuk membuat kolom otomatis melebar

Setelah bagian kolom didefenisikan maka kita masukkan perintah jika-maka (if-else-if) kurang lebih seperti ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Download template oom (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='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:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>


  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Kode tersebut ditempatkan persis dibawah kode sebelumnya, ribet juga yah, nah dari pada ribet mending modifikasi template blog aslinya.

Readmore..