20 Agustus 2013

Cara merubah ukuran, jenis font dan warna pada judul post

http://redaksiexpo2012.blogspot.com/2013/08/cara-mengatur-tag-h1-h2-h3-h4-h5-h6.html

Artikel tersebut sebenarnya berkaitan erat dengan postingan sebelumnya yakni;  Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot. Karena dalam pengaturan tersebut berpengaruh terhadap ukuran, jenis font dan warna pada judul post. 

Cara merubah font, ukuran, dan warna pada Judul Postingan,  sebenarnya tidak terlalu rumit, namun perlu ketelitian dalam memelototi kode-kode HTML pada template blog.

Seperti biasa; 
  • Login di Blogger
  • Di menu drop down, klik template - Edit HTML
  • Backup template kalian dahulu (Takut terjadi sesuatu yang tidak dinginkan)
  • Cari kode yang seperti ini :
.post h3 {text-shadow: 1px 1px 3px #fff;
margin:.25em 0 15px;border-bottom:1px dashed $bordercolor;
padding:1px 0px 4px;
font:normal normal 24px Oswald;
font-weight:normal;
line-height:1.4em;
color:#333;
font:$titlefont;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font:normal normal 24px Oswald;color:#333;
}
.post h3 strong, .post h3 a:hover {
color:#c22400;
}

Jika sudah menemukan kode tersebut, hapus kode itu dan ganti dengan kode berikut :

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: $titlecolor; font: $posttitlefont; } .post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: $titlecolor; } .post h3 strong, .post h3 a:hover { color: $titlehovercolor; }

Lalu Cari lagi kode /* Variable definitions dan letakan kode berikut tepat dibawah kode /* Variable definitions

<Variable name="titlecolor" description="Post Title Color"type="color" default="#c60" value="#cc6600"><Variable name="titlehovercolor" description="Post Title Hover Color"type="color" default="#c60" value="#cc6600"><Variable name="posttitlefont" description="Post Title Font"type="font" default="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
 Setelah itu, maka dapat diatur sendiri ukuran dan warna font sesuai dengan keinginan. Lalu save template. 

Cara Mengubah Ukuran Teks Header pada Blogspot

Cari bagian  <Group description="Blog Title" selector=".header h1"> atau yang mirip dengan itu.  Ganti ukuran jenis font yang ada. Seperti yang telah diberi tanda warna merah dibawah ini.

<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> 

Cara Mengubah Ukuran Font Deskripsi pada Blog

Cari kode:
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>   
Lalu ubah nilai persentase yang telah diberi tanda warna merah seperti tersebut diatas.

Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot


http://redaksiexpo2012.blogspot.com/2013/08/cara-mengatur-tag-h1-h2-h3-h4-h5-h6.html
Tag H1, H2, H3, H4, H5, H6 adalah salah satu faktor penting untuk optimasi SEO pada blog. Karena sistem indek blog oleh search enggine, baik template maupun konten yang ada dalam blog dimulai dari tag H1 dan diteruskan sampai tag terakhir H6.

Untuk itu, penataan yang baik tag H1-H2-H3-H4-H5-H6 akan sangat membantu meningkatkan page rank dan jumlah visitor.

Sebelum melangkah dalam cara mengatur Tag H dalam template blog ada baiknya kita mengetahui fungsi dan posisi TAG tersebut.

Selector H1
  • Heading (Judul Blog)
  • Judul Postingan atau artikel pada posisi Single Post

Selector H2
  • Sub Heading atau Deskripsi Blog (Jika mengandung keyword)
  • Sub Sub Heading atau Judul Postingan

Selector H3
  • Pada Judul Artikel Postingan 
  • Heading pada posisi Single Post (posisi bertukar dengan judul postingan yang menjadi tag H1)

Selector H4
  • Pada menu Sidebar seperti Categoy, Blogroll, Recent Post, Related Post, Label, Following List dll.
  • Pada tulisan ''16 Respons to Bla...bla....bla....'' pada bagian Komentar 
Selector H5
  • Nama pengomentar yang berupa link (pada kolom komentar)
Selector H6
  • Pada Footer seperti ''Powered by : Science And Education''

Berkaitan dengan hal tersebut, langkah dalam pengaturan TAG H pada template blog yakni;

Cara merubah tag Judul Blog menjadi h1 pada homepage dan h3 pada halaman posting.

Cari kode:
<div class='titlewrapper'
dst..
dst..
dst..
</div>
 
Ganti semua kode di atas dengan kode ini :
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<h3 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h3>
</b:if>
</div>
 
Jika pada beberapa terdapat lebih dari 1 kode <div class='titlewrapper',  ganti semuanya dengan kode di atas!

Cara merubah tag Deskripsi Blog menjadi h2 :

Cari kode : 

<div class='descriptionwrapper'>
dst...
dst..
dst...
</div>
Ganti menjadi :
<div class='descriptionwrapper'>
<h2 class='description'><span><data:description/></span></h2>
</div>
Jika terdapat lebih dari 1 kode <div class='descriptionwrapper'> ganti semuanya dengan kode di atas!

Cara merubah tag posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posisi single post

a. Merubah tag heading posting menjadi h3 pada homepage :
Cari kode :
<div class='post hentry uncustomized-post-template' , pada 4 atau 5 baris di bawah kode ini akan anda temukan kode seperti ini:

<h? class='post-title entry-title' itemprop='name'>
dst...dst...dst...
dst...dst...
dst...
</h?>
Ganti tag headnya menjadi h3, kalau sudah h3 tidak perlu dirubah.
b. Merubah tag head posting menjadi h1 pada halaman posting (single post)
Cari kode merah tebal yang beberapa baris di atasnya ada kode berwarna hijau seperti di bawah ini:

<b:includable id='post' var='post'>
kode bla...bla...bla...
kode bla...bla...bla... 
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
kode bla...bla...bla...
kode bla...bla...bla...
</h3>
</b:if>
<div class='post-header'>
Lalu ganti semua kode yang berwarna merah dengan kode di bawah ini : 
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
Langkah terakhir save template. 

Biasanya  dengan melakukan perubahan Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot tersebut maka secara otomatis ukuran font, judul, deskripsi dan titel blog akan berubah sesuai dengan pengaturan kode CSS.

Adapun cara untuk merubah  kembali ukuran dan jenis font tersebut dapat dibaca pada: Cara merubah ukuran, jenis font dan warna pada judul post


Galauness Blogger Template

Description Template
Galauness is free premium blogger template with Elegant, Clean and Minimalist Design, WordPress Look' Neat Typography, Fixed Width, jQuery Post Slider, Unlimited Background, Top Navigation Menu, Template Designer Ready, 2 Main columns and 3 columns at Bottom, Custom 404 error page and Custom Lightbox, Beautiful related posts links and Social Links Button and more.

Galauness Blogger template supports Blogger template Customizer. Customize Background color, Text color, Link color, Blog Title color, Post title color, Blog description color, Fonts easily. Go to Template -- click Customize and then Advanced for these customization.



Galauness template is optimized for Search engines like Google. This template helps your website to rank higher in search engines. 

Name : Galauness
Author :  Iksandi Lojaya
URL Author http://iksandi.com
Template Tutorials How to use this templates