Saturday 11 May 2013

merubah tampilan blog menjadi keren

Browse » Home » » merubah tampilan blog menjadi keren
pada kesempatan kali ini saya akan membahas tentang bagaimana merubah blog yang anda buat menjadi lebih keren dan tentunya berbeda dari yang lainya pasti mau kan seperti itu,cara nya mungkin agak mudah meskipun pemula sekalipun,kenapa saya sampaikan begitu karena kita hanya memerlukan beberapa pemahaman konsep terhadap tampilan yang akan kita gunakan nanti. nah ini cara nya :

unduh terlebih dahulu TEMPLATE nya di sini
setelah selsai di unduh langkah yang pertama buka blogger anda kemudian buka Template yang berada di blog anda klik Edit Html kemudian masukan kode Html yang telah anda unduh tadi dengan cara mengedit nya kemudian paste pada kotak Html yang telah tersedia .
cara edit nya :
Mengubah gambar background
  • Gambar background bisa diubah sesuka hati pada template seo friendly ini. 
  • Untuk mengubah gambar latar silahkan masuk ke menu TEMPLATE
  • Klik tombol jingga SESUAIKAN
  • Pada sidebar editor ada menu LATAR BELAKANG,....silahkan diklik
  • Disamping thumbnail latar ada sebuah tombol berbentuk panah kecil, silahkan diklik
  • Akan ditampilkan beberapa kategori gambar latar. Silahkan dipilih sesuai selera
  • Klik SELESAI
  • Klik tombol jingga TERAPKAN KE BLOG
Cara alternatif:
  • Masuk ke menu TEMPLATE
  • Klik EDIT HTML
  • Gunakan CTRL+F untuk mencari kode background: $(body.background);
  • Ganti $(body.background) dengan url(URL GAMBAR)
  • Jika gambar adalah kecil dan butuh perulangan (tile mode) tambahkan kode repeat
  • Contoh: background: url(http://tinypic.com/red-pattern.jpg) repeat;
  • Klik tombol jingga SIMPAN TEMPLATE
Sekarang gambar latar dari template blogspot SEO Friendly ini sudah berganti sudah berganti dengan gambar pilihan anda.
Memasang gambar header
  • Buat dulu gambar yang akan dijadikan background dalam ukuran panjang 1000px dan lebar 230px
  • Masuk ke menu TATA LETAK
  • Cari Widget HEADER yang menampilkan judul blog dan klik EDIT
  • Pada pilih GAMBAR, anda bisa mengambil dari komputer atau dengan memasukkan URL Gambar
  • Pastikan opsi Di balik judul dan keterangan terpilih
  • Klik SIMPAN
Sekarang gambar header sudah terpasang dengan tepat pada template blog ini jika ukurannya benar 1000px x 230px
Memasang gambar Slider 
  • Buat 4 gambar dengan ukuran 1000 x 300 pixels
  • Pastikan ukuran setiap gambar hanya berkisar 30 kb
  • Setelah itu masuk ke menu TATA LETAK
  • Cari widget MASUKKAN KODE SLIDESHOW DI.... dan klik EDIT
  • Masukkan kode di bawah ini....
<center><div style="border-bottom:10px solid #000000; width:1000px; background: #bbbbbb;">
<ul class="slideshow">
<li><a href="URL ARTIKEL 1" target="_blank"><img src="URL GAMBAR 1" title="JUDUL GAMBAR 1" alt="DESKRIPSI GAMBAR 1"/></a></li>
<li><a href="URL ARTIKEL 2" target="_blank"><img src="URL GAMBAR 2" title="JUDUL GAMBAR 2" alt="DESKRIPSI GAMBAR 2"/></a></li>
<li><a href="URL ARTIKEL 3" target="_blank"><img src="URL GAMBAR 3" title="JUDUL GAMBAR 3" alt="DESKRIPSI GAMBAR 3"/></a></li>
<li><a href="URL ARTIKEL 4" target="_blank"><img src="URL GAMBAR 4" title="JUDUL GAMBAR 4" alt="DESKRIPSI GAMBAR 4"/></a></li>
</ul></div></center>
  • Silahkan ganti URL ARTIKEL dengan link ke artikel yang anda inginkan terhubung dengan gambar slideshow
  • Ganti juga URL GAMBAR agar slider menampilkan gambar yang diinginkan.
  • Ganti JUDUL GAMBAR dan DESKRIPSI GAMBAR karena ini adalah teks yang akan ditampilkan di caption yang berwarna hitam semi transparan
  • Setelah selesai mengedit silahkan klik SIMPAN.
Dengan ini slider sudah terpasang dan template blog SEO friendly anda terlihat lebih atraktif.
Memasang menu header
  • Sebenarnya kode menu apa saja bisa dipasang pada template ini. Tapi kalau mau memasang menu bawaan dari template ini, ikuti saja prosedur berikut:
  • Masuk ke menu TATA LETAK
  • Cari widget MASUKKAN KODE MENU DI SINI dan klik EDIT
  • Setelah itu masukkan kode HTML berikut ke dalamnya
<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Beranda</a></li>
<li><a href="#">Hobby</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Layanan Jasa</a></li>
<li><a href="#">Tentang Saya</a></li>
<li><a href="#">Hubungi</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>
  • Ganti tanda pagar dengan URL link, dan edit nama link sesuai kebutuhan anda.
  • Jika sudah selesai mengedit silahkan klik SIMPAN
Sekarang menu sudah terpasang pada template blog anda. Perhatikan bahwa kode menu di atas bukanlah dropdown menu. Jika anda butuh dropdown menu coba baca di sini.
Menghapus Auto Meta Description
Jika anda mau memakai fitur meta description dari blogger sebagaimana pernah saya bahas di artikel meta description, maka anda harus menghapus fitur auto meta description. Caranya....
  • Masuk ke menu TEMPLATE
  • Klik EDIT HTML
  • Cari kode berikut dan hapus
<meta expr:content='data:blog.pageName + &quot; dari blog &quot; + data:blog.title + &quot; dengan judul &quot; + data:blog.pageName' name='description'/>
  • Jika sudah klik SIMPAN TEMPLATE
Jika anda sudah menghapus fitur auto meta description dari template ini, maka anda wajib memasukkan secara manual meta description saat membuat artikel baru.
Menghapus Read More & Aktifkan Threaded Comment
  • Kalau anda tidak suka dengan read more dan lebih suka memakai jump break, maka silahkan dihapus saja read more pada template ini. Masuk ke menu TEMPLATE, klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
  • Cari kode berikut dan hapus
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
  • Setelah kode di atas dihapus silahkan cari kode berikut....
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Hapus kode di atas dan ganti dengan kode <data:post.body/>
  • Kode di atas ada dua di dalam template jadi ulangi proses penggantian kodenya sekali lagi. 
  • Klik SIMPAN TEMPLATE
  • Jika read more sudah dihapus, fitur threaded comment akan berfungsi

Mengubah heading widget jadi h4
Supaya template lebih SEO friendly, kita juga bisa mengubah heading dari judul widget dengan kode h4. Caranya adalah....
  • Masuk ke menu TEMPLATE
  • Klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
  • Cari semua kode <h2><data:title/></h2> dan ubah menjadi <h4><data:title/></h4>
  • Cari juga semua kode <h2 class='title'><data:title/></h2> dan ubah menjadi <h4 class='title'><data:title/></h4>
  • Klik SIMPAN TEMPLATE
Mengubah warna, jenis, dan ukuran teks
  • Silahkan masuk ke menu TEMPLATE
  • Klik SESUAIKAN 
  • Klik menu TINGKAT LANJUT pada sidebar kiri
  • Silahkan ubah parameter apa saja yang anda inginkan
  • Jika sudah selesai klik tombol jingga TERAPKAN KE BLOG

    nah sekarang anda coba :)

Terima Kasih Atas Kunjungan Anda
Judul: merubah tampilan blog menjadi keren
Ditulis Oleh Unknown
Jika mengutip harap berikan link yang menuju ke artikel merubah tampilan blog menjadi keren ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya
Title: merubah tampilan blog menjadi keren; Written by Unknown; Rating: 5 dari 5
Diposkan oleh di

No comments:

Post a Comment

komentar yang anda berikan harus bersifat membangun !

Subscribe to: Post Comments (Atom)
Hak Cipta Oleh dan ini punya KNOWLEDGE
Copyright © 2013-2015.