Cara Mengubah Warna Blog

Cara Mengubah Warna Blog - Pada kesempatan kali ini saya akan berbagi tutorial merubah warna blog langsung saja berikut caranya.

1. Menggunakan Software browser

Cara pertama ini agak sedikit sulit jadi saya sarankan sobat harus mengerti dulu CSS

• Pertama buka blog sobat yang mau di edit
• Tekan F12 pada browser google chrome
• Akan ada icon seperti kaca pembesar klik icon yang seperti kaca pembesar itu

• Kemudian klik warna yang mau di ganti liat gambar nomor 2
• Klik kode warnanya yang diinginkan liat gambar nomor 2

• Jika sudah di klik akan jadi seperti gambar nomor 3

• Klik warna yang diinginkan
• Tapi belum selesai, sekarang buka darbor blogger kalian
• Template > Edit HTML, cari kode CSSnya liat gambar

• Seperti di gambar kode CSSnya adalah body { gunakan CRTL + F cari kode CSS body { tadi
• Setelah ketemu maka akan sama seperti gambar di bawah

• Ganti kode yang di dalam template blog dengan kode yang kita edit tadi

2. Menggunakan Photoshop

• Buka blog yang mau di edit
• Tekan Sreenshot blognya
• Buka Paint
• Akan tekan CTRL + V akan keluar harus Sreenshot kalian
• Lalu save hasil hasil Screenshot tadi
• Buka Photoshop, Open file buka file Screenshot tadi
• Liat gambar di bawah beserta keterangannya

• Selesai

Cara diatas sudah saya buat seringkas, mudah dipahami, mudah diterapkan jika belum paham tidak usah sok blogging deh, bercanda jika belum paham silahkan tinggalkan pertanyaan sobat di komentar di bawah

Template Gray SEO Responsive Full SEO

Halo sobat blogger kali ini saya akan berbagi template Template Gray SEO adalah redesign milik saya, template ini juga Responsive dan Full Optimasi SEO Onpage, Selain itu template ini juga memiliki banyak keunggulan dari template yang lain. Sebelumnya saya akan menyebutkan apa saja fitur dari template ini.

Fitur :

• Fast Loading
  
• Full SEO 100% di chkme
  
• Tampilan 2 kolom di homepage
• Releted Post thumbnail / artikel terkait dengan gambar
• Breadcrumb
• Responsive
• Slot iklan 468x60
• Widget search
• Read more
• Dan lain lain

Bagaimana fiturnya bagus kan, sekarang silahkan lihat demo templatenya dan download template gratisnya

DEMO DOWNLOAD 

• Untuk memasang banner 468x60

1. Masuk ke dasbor => Tata letak => Tambah Gadget => Html / javascript
2. Tambakan kode ini
   <div class="right-head section" id="right-head">KODE</div>
3. Simpan

Untuk tulisan berwarna merah ganti dengan kode atau script banner sobat dan untuk langkah pertama posisinya terserah mau di sidebar akan tetap muncul di samping header.

• Untuk menu bar silahkan ganti

1. Masuk dasbor blogger => Template => Edit HTML cari kode di bawah (Gunakan CRTL + F untuk mempermudah pencarian)

<ul>
<li><a href="#">About</a></li><li><a href="#">Archive</a></li><li><a href="#">What News ?</a></li><li><a class="subnav" href="#">With Sub Menu</a><ul class="subx"><li><a href="#">Sub Menu 1</a></li><li><a href="#">Sub Menu 2</a></li><li><a href="#">Sub Menu 3</a></li></ul></li></ul>

Untuk kode warna merah ganti dengan Url kalian dan kode yang warna biru ganti dengan tulisan sobat / ancor.

• Untuk fitur Responsive

1. Masuk dasbor blogger => Template => klik tombol pengaturan seluler seperti gambar di bawah
   
2. Pilih Tidak. Tampilkan template seluler di perangkat seluler
3. Simpan

Setelah mengikuti langkah diatas template sudah siap digunakan selamat mencoba.

Cara Membuat Artikel Terkait dengan Gambar

Artikel terkait dapat memudahkan pengunjung untuk membaca artikel kita yang lain, Alangkah baiknya related post di letakkan di posisi yang tepat seperti di bawah konten atau artikel agar terlihat pengunjung. Memasang artikel terkait juga sangat efektif untuk mengurangi Bounce rate juga loh. Langsung saja Berikut adalah cara memasangnya.

• Login dan masuk ke dasbor blogger
• Klik template => edit HTML.
• Cari kode ]]></b:skin> untuk memudahkan pencarian tekan CRTL + F lalu cari kode tadi
• Jika sudah ketemu kode tadi masukan kode di bawah tepat di atas kode tadi

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwVo0YwUhjKeeTxf7G_gXec7mVPmkuk6XOSHGPB1C72ZP5sPiI0oq3HBEzW5o4IHgvf5S0VUuii7HmIDeaiGOkAsNYJyWy41MJRZpZmQ4JhW4sletvaZM2uLi1m81SxEU4TN9jLxD-wc/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

• Lalu simpan template sobat

Sekarang kode CSS sudah selesai di pasang selanjutnya kita masuk ke tahap Cara memasang artikel terkaitnya.

• Masih di dalam edit template cari kode ini <data:post.body/> " Biasanya ada lebih dari 1 cobalah pilih yang sesuai dengan template sobat atau coba satu persatu "
• Selanjutnya masukan kode di bawah ini tepat di bawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

• Setelah menurut sobat pas tinggal simpan template sobat

Selamat Artikel terkait atau related post berhasil terpasang jika gagal silahkan tinggalkan pertanyaan di kolom komentar.