Cara Mengganti Template

Cara Mengganti Template | Tutorial Blog

Tutorial kali ini kita bahas cara untuk Mengganti Template Blog dengan template dari penyedia template gratis, karena selain menggunakan template standart dari blogger, Sobat juga dapat mengganti template blog anda dengan template dari penyedia template, sebelumnya download terlebih dahulu template yang ingin Sobat gunakan, untuk daftar Situs Penyedia Template Blog Gratis, silakan baca di sini : Situs Penyedia Template Gratis.

Berikut tutorial untuk mengganti template dengan template dari Situs Penyedia Template Gratis :

• Download template yang ingin di gunakan.
• Ekstrak file yang di download tadi, karena file yang akan kita upload ke blogger hanya file yang berekstensi .xml.
• Login ke Blogger.
• Klik pada blog yang akan di ganti templatenya.
• Klik pada Template.
  
• Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
  
• Untuk jaga-jaga backup template Anda terlebih dulu, klik pada Unduh Template Lengkap.
  
• Klik tombol Browse, pilih file template yang tadi telah diekstrak.
  
• Kemudian klik tombol Unggah.
  
• Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.

Selamat mencoba dan semoga berhasil mengganti template Blog Anda.

Read More

Cara Mengganti Template Blog

Cara Mengganti Template Blog | Tutorial Blog

Template blog atau website adalah desain halaman blog / website beserta seluruh komponennya seperti gambar, stylesheet, dsb, baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.

Dulu saya pernah bikin postingan mengganti template blog, namun karena sekarang Blogger menggunakan Tampilan Baru, jadi saya bikin lagi tutorialnya yang baru.

Di blogger Sobat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan sobat. Anda dapat menggunakan template buatan Anda sendiri untuk blog anda, bisa juga anda mengganti template blog dengan template dari penyedia template gratis. Namun, jika sobat masih belum bisa dalam membuat template, pihak blogger sendiri sudah menyediakan beberapa template yang bisa anda pilih.

Berikut ini cara mengganti Template dengan template yang disediakan blogger :

1. Login ke blogger.
2. Pada Dashboard Blogger pilih Blog yang ingin anda ganti templatenya.
3. Klik Template.
   
4. Klik tombol Sesuaikan.
   
5. Klik pada pilihan template yang tersedia.
6. Anda dapat melakukan pengaturan tampilan pada menu di sebelah kiri.
7. Jika sudah cocok dengan salah satu template, klik Terapkan ke Blog.
   
8. Selesai.

Untuk mengganti template dengan template dari penyedia template gratis, berikut caranya :

• Download template yang ingin di gunakan.
• Ekstrak file yang di download tadi, karena file yang akan kita upload ke blogger hanya file yang berekstensi .xml.
• Login ke Blogger.
• Klik Template.
• Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
• Untuk jaga-jaga backup template Anda terlebih dulu, klik Unduh Template Lengkap.
• Klik tombol Browse, pilih file template yang tadi telah diekstrak.
• Kemudian klik tombol Unggah.
• Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.

Untuk lebih jelasnya silakan baca Cara Mengganti Template.

Sekian tutorial tentang Cara Mengganti Template Blog.

Read More

Membuat Template Blog Secara Online

Membuat Template Blog Secara Online | Tutorial Blog

Cara yang satu ini banyak digunakan para blogger untuk mengganti template, walaupun ada cara yang lebih mudah yaitu dengan mendownload template jadi dan langsung menguploadnya, atau dengan menggunakan fasilitas Blogger template designer, namun dengan template hasil karya sendiri tentunya Anda memiliki kebanggaan tersendiri.

Dibawah ini ada beberapa situs online gratis yang dapat sobat gunakan untuk membuat template sendiri. Situs yang menyediakan fasilitas membuat template biasanya sudah menyediakan template template tertentu yang nantinya bisa anda edit sendiri. berikut ini situs yang menyediakan editing template secara online.

• Profilebrand : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll )
• Pimp my Profile : Untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya.
• DoTemplate : Dotemplate ini menyediakan 12 template XHTML dan CSS compliant dasar gratis yang bisa anda pilih sendiri. Anda bisa memilih salah satu dan kemudian mengkustomisasinya dengan mengubah warna, font, teks, posisi teks dan lain sebagainya pada background, container, footer, menu dan boks. Selain itu anda juga bisa menambahkan efek seperti drop shadow, gradien dan round corner. Layanan ini sangat menarik karena tidak memerlukan pengetahuan html yang terlalu banyak untuk mempergunakannya, selain itu ada pilihan untuk mengupload gambar anda sendiri. Setelah anda selesai membuat template blognya, anda bisa langsung mendownloadnya disana.
• CSSEZ : ini adalah generator template online untuk blog wordpress dan movable type. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.
• Drupal Theme Generator : Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.
• Eris Template Generator : Generator ini menyediakan 11 skin untuk blog anda dengan tiga pilihan kolom untuk setiap skinnya. Saat ini layanan ini mendukung diaryland, diary-x, movabletype, blogger, wordpress, b2 dan free html site template lainnya. Anda bisa menambahkan tagline, meta tag dan termasuk link ke index, arsip, email, notes, profile, buddylist dan juga 5 entri untuk diaryland, 10 entri untuk movable type, kalender untuk b2, blogroll untuk wordpress, XHTML compliant dan content copyright, webring, chat screen name dan button.
• Firdamatic : Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.
• www.maketemplate.com : Online generator ini mampu membuat template situs PHP, bersamaan dengan file CSS dan HTML. Anda juga bisa mengkustomisasi style sheet, header, sidebar, dan footer dengan menambahkan sendiri font, warna, margin dan alignment pada form online template generator. ANda juga bisa membuat sendiri scriptnya yang bisa anda kopi dan simpan untuk keperluan anda nanti.
• PsycHo : Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.
• Templatr : Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.
• Weebly : Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.
• WordPress Theme Generator : Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.

Selamat mencoba dan semoga sukses Membuat Template Blog Secara Online.

Read More

Mengganti Tampilan Thread Comment

Mengganti Tampilan Thread Comment | Tutorial Blog

Postingan ini Lanjutan dari Menampilkan Thread Comment pada Custom Template, jika Sobat sudah berhasil Menampilkan Thread Comments biasanya tampilannya polos tanpa variasi. Pada postingan kali ini kita akan meng-edit css Thread Comment agar tampilannya seperti gambar berikut.

Caranya cukup mudah Sob, Sobat cukup menghapus kode css komentar di template Anda, lalu ganti dengan kode berikut :

Kode :

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #dddddd;
border-top-color: #eeeeee;
border-left-color: #eeeeee;
color: #333333 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #eeeeee;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );
background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #0099ff;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#bbddff;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#225577; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #eeeeee;
    border: thin solid #dddddd;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #dddddd;
border-top-color: #eeeeee;
border-left-color: #eeeeee;
color: #333333 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #eeeeee;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );
background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .continue a:hover {
text-decoration: none; background:#fff; border:1px solid #0099ff;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Jika sudah selesai Simpan template Anda dan lihat hasilnya.

Sekian artikel kali ini, Semoga Anda berhasil Mengganti Tampilan Thread Comment.

Read More

Cara Menampilkan Share Button

Cara Menampilkan Share Button | Tutorial Blog

Bagi sobat blogger yang sudah pernah atau sering gonta ganti template yang diambil dari penyedia template mungkin tidak bisa memakai fitur Share Button. karena kode Share botton pada design template tersebut mungkin fiturnya tidak ada, jadi Share botton-nya tidak muncul.

Berikut Cara Memunculkan Share Button di Blogger :

• Masuk ke blogger, klik Design > Page Element
  
• Kemudian klik Edit pada Blog Posts
  
• Beri centang pada Show Share Buttons
  
• Klik Save dan cek apakah muncul tombol sharenya
  
• Jika masih belum muncul silahkan ke tab menu Edit HTML
  
• Beri centang pada Expand Widget Templates.
  
• Cari kode <b:includable id='backlinks' var='post'>.
• Letakkan kode berikut diatas kode <b:includable id='backlinks' var='post'>.
  <b:includable id='shareButtons' var='post'>
    <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.emailThisMsg/></span>
    </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.blogThisMsg/></span>
    </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
    </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
    </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
    </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
    </a></b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
    </b:if>
  </b:includable>
• Selanjutnya cari kode <div class='post-footer'> atau di posisi line 2, line 3,misalnya line 3 : <div class='post-footer-line post-footer-line-3'>.
• Lalu letakkan kode berikut di bawah kode tersebut.
  <div class='post-share-buttons goog-inline-block'>
          <b:if cond='data:post.sharePostUrl'>
            <b:include data='post' name='shareButtons'/>
          </b:if>
        </div>
• Klik Save Template dan lihat hasilnya.
  

Selamat mencoba dan semoga bermanfaat...

Read More

Install a Custom Template in Blogger

How to Install a custom template in Blogger?

1. Download a template file (zip or rar) and extract the file.
2. Login to Blogger.com.
   
3. On the Dashboard, click Design > Edit HTML
   
4. Don't forget for backup your old template.
   
5. Click Browse,
   
   Then find a Blogger template that will be used, Click Open.
   
6. Then click the Upload button .
   
7. If a warning: Your new template does not include the following widgets, click KEEP WIDGETS.
   
8. Finish...

Read More

Edit Template Supaya Valid XHTML

Ketika saya menggunakan Validator XHTML Tool untuk mengetahui kode yang error pada blog, ternyata banyak terdapat error pada blog saya, akhirnya saya edit saja templatenya biar lebih valid, dan syukur lah errornya berkurang. Jika Sobat juga ingin Meng-edit template Blog sebaiknya backup dulu template Anda, buat jaga-jaga bila terjadi hal yang tidak di inginkan. Adapun kode HTML yang saya edit pada template antara lain :

• Kode dibawah ini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
saya ganti dengan kode berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Memperbaiki penulisan META Tags
  Contoh
  
  <META content='hG7mdGP3GZvNuz6CXDF58rL2NhgOH4GhtwttcDrGThA' name='compete'/>
  saya rubah menjadi
  
  <meta content='hG7mdGP3GZvNuz6CXDF58rL2NhgOH4GhtwttcDrGThA' name='compete'/>

• Menghapus semua kode ( ---------- )

• Pada kode </head> saya tambahkan kode berikut tepat dibawahnya
<!-- <body><div></div> -->

• Menghapus semua kode quickedit seperti dibawah ini :
<b:include name="quickedit">

• Menghapus Post icon
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post'
name='postQuickEdit'/>
      </span> <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>
saya hapus dan ganti dengan kode berikut
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
        </b:if>
      </span>
      </div>

• Menambahkan type="text/javascript" pada semua kode JavaScript yang ada.
<script type="text/javascript" src="http://tutorialblog.googlecode.com/files/dfisi.js"></script>

• Menyembunyikan page navigation di halaman utama, kode
<b:include name='nextprev'/>
saya hapus dan ganti jadi
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if> 

• Menambahkan atribut Alt pada semua gambar
    <img alt="gambar" href="http://2.bp.blogspot.com/-vk3j9GrD30P/GhYf2WEe4mI/bsvjsfnnBF6/a2516/dboss.jpg">

• Memperbaiki atribut title dan alt pada link bergambar
contoh
    <a href="http://www.google.com" title="Google" target="_blank"><img src="http://2.bp.blogspot.com/-vk3j9GrD30P/GhYf2WEe4mI/bsvjsfnnBF6/a2516/dboss.jpg" alt="www.google.com" border="0" /></a>

Sobat juga perlu menghapus beberapa widget bawaan blogger yang tidak valid, silakan cek di validator.w3.org, jika ada hapus widget tersebut.
Selain kode diatas sebenarnya masih ada lagi kode yang lain, cuma karena saya tidak begitu mengerti tentang kode HTML jadi cuma itu yang bisa saya betulkan pada template saya supaya lebih Valid XHTML.

Read More

Mengganti Template Melalui Menu Edit Html

Untuk Mengganti Template Blog, selain dengan template standart dari blogger, Sobat juga dapat mengganti dengan template dari penyedia template. Pada tutorial kali ini akan saya bahas cara untuk mengganti template melalui menu Edit HTML, sebelumnya download terlebih dahulu template yang ingin Sobat gunakan. untuk daftar Situs Penyedia Template Blog Gratis baca di sini : Situs Penyedia Template Gratis.

Berikut cara untuk mengganti template melalui menu Edit HTML.

• Menganti Template melalui menu Upload :

1. Login ke blogger Anda. Klik Rancangan / Design > Edit HTML.
   
2. Sebaiknya buat backup terlebih dahulu, klik pada tulisan Download Full Template (Download Template Lengkap).
   
3. Klik tombol Browse, dan pilih file template yang ingin Sobat gunakan.
   
4. Kemudian klik tombol Upload / Unggah.
   
   Apabila ada muncul peringatan tentang widget, klik pada tombol Keep Widgets / Pertahankan Widget.
   
   Selesai.

• Selain cara diatas Sobat juga dapat menganti Template dengan cara Copy Paste, berikut caranya :

1. Login ke blogger Anda. Klik Rancangan / Design > Edit HTML. 
2. Backup template anda terlebih dahulu.
3. Buka program notepad atau program sejenis, lalu buka template baru pada notepad tersebut, untuk mudahnya drag file template ke notepad
4. Kemudian Copy semua sript yang ada pada tampilan notepad.
5. Kembali pada tampilan Edit Html di blogger
6. Centang pada kolum Expand Template Widget, tunggu sampai scriptnya tampil semua, lalu hapus.
7. Paste semua sript pada notepad tadi.
8. Klik Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Save Template / Simpan Template.
   Selesai

Selamat Mencoba...

Artikel Yang Lain :

• Membuat Daftar Isi Blog
• Memasang Google Translate di Blog
• Cara Mengganti Favicon Blogspot

Read More

Situs Penyedia Template Gratis

Situs Penyedia Template Blog Gratis sebenarnya sangat banyak, namun pada artikel ini saya tulis hanya sebagian saja, beberapa situs ini menyediakan template Blog yang beragam mulai dari yang simple sampai yang mendetail, tersedia gratis dan bisa anda download, jadi buat sobat yang ingin mengganti template blognya dengan template yang lain dari template standart blogger, Sobat bisa mendownloadnya di situs berikut:

• Free templates blog terbaru
• free blogger templates
• Zoom Template
• Blogtemplate4u
• BTemplates
• Free WPthemes
• Joomla2u

Silakan dipilih, mumpung gratis, he...

Read More

Mengganti Template Blog

Cara Mengganti Template Blog bagi yang sudah lama di dunia blogging mungkin memang mudah, tetapi buat yang masih newbie seperti saya mungkin agak bingung, jadi pada tutorial kali ini saya akan berbagi tentang cara mengganti template blog. Untuk mengganti template blog, Sobat dapat menggunakan template standart yang disediakan blogger atau Mengganti Template Melalui Menu Edit Html dengan meng-upload file template dari penyedia template.
Berikut ini cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Login ke blogger Sobat. lalu klik Rancangan/Design.
   
2. Klik menu Perancang Template/Template Designer.
   
3. Selanjutnya akan muncul jendela perancang template blogger. Klik pada template yang ingin Sobat gunakan. sebagai contoh saya menggunakan Awesome Inc.
   
4. Pada menu Background, Sobat dapat menentukan warna background/latar belakang dari template yang akan Sobat pakai.
   
5. Menu Adjust widths, untuk mengatur lebar area postingan dan sidebar.
   
6. Menu Layout, untuk menentukan tata letak template Anda.
   
7. Terakhir menu Advanced, pada menu ini Sobat dapat menentukan Font, ukuran, warna, dan background text yang akan di gunakan untuk Page, Links, Blog Title, Blog Description, dll.
   
8. Jika sudah sesuai dengan keinginan Anda, klik APPLY TO BLOG.
   
   Selesai...

Sepertinya cukup segini dulu, untuk selanjutnya akan saya tulis cara mengganti template melalui edit HTML(upload file).

Artikel Yang Lain :

• Membuat Daftar Isi Blog
• Cara Membuat Page di Blogspot
• Cara Mengganti Favicon Blogspot

Read More

Title Tag SEO Friendly

Title Tag Standard untuk Blogger menampilkan judul blog terlebih dahulu baru kemudian judul halaman posting. Menurut beberapa Blogger title tag tersebut kurang bagus buat optimasi SEO untuk hasil pencarian di search engine. Pada Artikel ini saya membahas cara membuat title tag yang SEO friendly. Untuk caranya silakan ikuti Tutorial berikut :

1. Login ke blogger Sobat, klik Rancangan > Edit HTML.
2. Backup template terlebih dahulu buat jaga-jaga.
   Lalu beri centang pada Expand Template Widget
   
3. Cari kode <title>&lt;data:blog.pageTitle/&gt;</title>, Tekan Ctrl + F pada keyboard, masukkan kode <title>&lt;data:blog.pageTitle/&gt;</title>
   
4. Jika sudah ketemu silakan ganti dengan kode di bawah ini:
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <title><data:blog.pageName/> | <data:blog.title/></title>
   <b:else/>
   <title><data:blog.pageTitle/></title>
   </b:if>
   Sobat juga bisa menambahkan keyword ke judul homepage,
   
   <b:if cond="data:blog.pageType == &quot;item&quot;">
   <title>&lt;data:blog.pageName/&gt; | &lt;data:blog.title/&gt;</title>
   <b:else>
   <title>&lt;data:blog.pageTitle/&gt; | keywords 1 | keywords 2</title>
   </b:else></b:if>
   Ganti keywords 1 dan keywords 2 dengan keywords Blog Sobat.
   Contoh :
   
5. Kemudian Klik Simpan Template
   Sekarang coba cek Title Tag Blog Sobat.
   Hasilnya akan seperti ini:
   

Selamat Mencoba...
Artikel Yang Lain :

• Cara Mendaftar dan Memasang Google Analytics
• Cara Mendaftarkan / Mensubmit Blog ke Yahoo
• Cara Mendaftarkan Blog ke Alexa
• Cara Mensubmit Blog ke 300 search engine

Read More