Cara Membuat Category Post List Berdasarkan Label Blogspot

Seotipsku kali ini akan berbagi bagaimana cara membuat category post list blogspot berdasarkan label, atau membuat list postingan per kategori/label secara otomatis berdasarkan postingan terbaru, tentunya akan memudahkan pembaca untuk melihat sitemap daftar isi dari blogspot.

Cara Membuat Category Post List Blogspot :

Langkahnya :
  1. Go to Layout Design > Page Elements/Dashboard
  2. Pilih tata Letak
  3. Click Add A Widget.
  4. In Add A Widget window, select HTML/Javascript.
  5. Masukan Nama Kategori yang ingin dibuat.
  6. Copy the code below and paste it inside the content box.
  7. Click Save.
<!-- Recent Posts by Label Start -->
<!-- code by BloggerSentral.com -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="YOUR_BLOGSPOT_URL/feeds/posts/default/-/YOUR_LABEL?max-results=YOUR_MAX_RESULT&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End --> 


Langkah berikutnya :

  1. Ganti YOUR_BLOGSPOT_URL dengan nama blogspot kamu misalnya http://seotipsku.blogspot.com
  2. Ganti YOUR_LABEL dengan link label kamu misalnya Tips20%SEO.
  3. Ganti YOUR_MAX_RESULT dengan jumlah post yang ingin ditampilkan misalnya 5
Silahkan save dan publish..

Demikian semoga bermanfaat.... Salam Blogger.

Cara mengoptimalkan robots.txt agar cepat terindex Google

robots-txt

Cara Memasang Robots.txt Yang Cepat Terindex Google.

 

Fungsi Robots.txt itu berperan sangat besar dalam mengindex suatu blog terhadap search Engine seperti Google. Oleh karena itu , sebaiknya kalian memasang Robots.txt diblog kalian. Akan tetapi, memasang Robots.txt harus hati-hati karena kesalahan dalam memasang robots.txt pada blog dapat mempengaruhi blog tersebut. 

Berikut cara pemasangan atau setting Robots.txt yang benar, dengan tutorial berikut :

  1. Login ke dashboar melalui akun blogger anda 
  2. Pilih Menu Setelan.
  3. Pilih Preferensi Penelusuran. Akan ada warning "Peringatan! Gunakan dengan hati-hati. Penggunaan yang tidak tepat dari fitur tersebut dapat mengakibatkan blog Anda diabaikan oleh mesin telusur."
  4. Pasang Robots.txt
    User-agent: Mediapartners-Google
    Disallow:
    User-agent: *
    Disallow: /search
    Allow: /
    Sitemap: http://namaakun.blogspot.com/feeds/posts/default?orderby=UPDATED

    *Ganti tulisan - (namaakun) diubah sesuai nama akun blogspot anda.




  5. Setelah itu , silahkan klik Simpan Perubahan.
  6. Robots.txt yang semula nonaktif , menjadi aktif.

Apabila tulisan ini bermanfaat silahkan diberi komentar ya sob... :).

Cara Membuat CSS Gradient Text Cross Browser Without Background Images

Ternyata membuat gradient text itu tanpa image itu tidak susah, kalau tau caranya :d.
Berikut ini bagaimana cara membuat gradient text warna cross browser hanya menggunakan CSS without background images. Dalam hal ini pseudo class :before digunakan untuk menerapkan overlay dengan gradient opacity. Satu-satunya kelemahannya adalas h warna overlay harus sama dengan warna background yang di gunakan.
Satu-satunya kelemahannya adalah warna overlay harus sama dengan warna background yang di gunakan.
HTML

TYPOGRAPHY

TYPOGRAPHY

TYPOGRAPHY

KODE CSS
h4.gradient {
  text-align:center;
  font-family:'Arbutus', cursive; 
  font-weight: 700; /* Disesuaikan besaran hurufnya */
  font-size:100px;   
  padding:0 10px; 
  margin:0; 
  position:relative; 
  float:left;  
  width:100%;
  text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
h4.gradient:before {
  content:""; 
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index: 2;
}
h4.satu:before{
  background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
}
h4.dua:before{
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
}
h4.tiga:before{
  background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
}
h4.satu{
  background:white;
  color:black;
}
h4.dua{
  background:black;
  color:red;
}
h4.tiga{
  background:white;
  color:#132A60;
}
Sumber : zifana.com

Cara Membuat Tab Menu View Pada Blogspot

buat menu tab view
Posting kali ini adalah membuat tab menu view yang mana sesuai dipasang pada blog yang mempunyai side bar yang luas.Pemasangan menu seperti ini adalah menjimatkan ruangan kerana menu disatukan secara tab pada satu tempat.Satu lagi kelebihan menu ini adalah tidak perlu mengedit template,Cuma di masukkan pada add gadget.Jadi lebih mudah untuk membuatnya tanpa perlu khuatir tidak berfungsi setelah membuatnya.Cuma kita perlu mengubah sedikit saiz dan juga warna pada kod agar bersesuaian dengan template kita.  
jika sekiranya berminat untuk membuatnya ikuti langkah ini:

Masuk  keblogger
Pilih design-Layout
Add a Gadget
Pilih  HTML/Javascript
Dan masukkan kode ini


<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:3px ridge#A9A9F5; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Sans Serif; font-size: 12px; text-shadow: 0 0 3px #000, 0 -1px 0px #ff3, 1px -1px 0px #fff, -1px -3px 1px #f80, 1px -3px 1px #f20; /* Font Menu Utama Atas */
font-weight:italic; color:#FFFFFF; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#003333; /* Warna background Menu Utama Atas */ }
div.TabView div.TabMenu {clear:both; border:3px groove#A9A9F5; /* Warna border Kotak Utama */ overflow:hidden; background:#EAEAEA; -moz-border-radius-bottomleft:12px; -moz-border-radius-bottomright:7px;-moz-border-radius-topright:7px  /* Warna background Kotak Utama */ }
div.TabView div.TabMenu div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.TabMenu div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- TabMenu -----
var TabMenu = TabView.firstChild;
while (TabMenu.className != 'TabMenu') TabMenu = TabMenu.nextSibling;
var Page = TabMenu.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (TabMenu.offsetHeight) Page.style.height = (TabMenu.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 330px;" class="Tabs">
<a>BLOG</a>
<a>WORDPRESS</a>
<a>KOMPUTER</a>
</div>
<div style="width:310px; height:190px; " class="TabMenu">
<div class="Page">
<div class="Pad">

<ul>
<li><a href="#">List Judul 1 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 2 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 3 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 4 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 5 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 6 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 7 Tutorial Blogspot</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<ul>
<li><a href="#">List Judul 1 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 2 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 3 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 4 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 5 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 6 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 7 Tutorial Wordpress</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<ul>
<li><a href="#">List Judul 1 Tutorial Komputer</a></li>
<li><a href="#">List Judul 2 Tutorial Komputer</a></li>
<li><a href="#">List Judul 3 Tutorial Komputer</a></li>
<li><a href="#">List Judul 4 Tutorial Komputer</a></li>
<li><a href="#">List Judul 5 Tutorial Komputer</a></li>
<li><a href="#">List Judul 6 Tutorial Komputer</a></li>
<li><a href="#">List Judul 7 Tutorial Komputer</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kemudian klik save

Cara Mudah Membuat Postingan Syntax Highlighter di Blogspot

Syntax Highlighter adalah suatu fitur biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Bagi Anda yang sering posting source code pada Web/Blog tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya lebih menarik bagi pengunjung. Nah, sekarang masalahnya bagaimana cara kita menggunakan Syntax Highlighter ini pada blog khususnya di Blogger.com?

Jika di blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namun Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008). Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:

Membuat Postingan Syntax Highlighter


1.  Login dengan akun blogger anda kemudian pilih Rancangan/Template
2.  Klik EDIT HTML (centang expand template widget)
3.  Simpan kode berikut Setelah kode <head> atau sebelum kode </head>

<script src="https://sites.google.com/site/m4w4nz/highlight.pack.js" type='text/javascript'></script> 
  <script type='text/javascript'>
      hljs.initHighlightingOnLoad();
  </script>

4.  Selanjutnya scroll mouse kalian kebawah dan cari kode ]]></b:skin>
5.  Simpan CSS berikut diatas kode ]]></b:skin> :

pre code {
  display: block; padding: 0.5em;
  color: #DCCF8F;
  background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}

pre .css .attribute {
  color: #b89859;
}

pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}

pre .css .class {
  color: #d3a60c;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #073642;
}


6.  Simpan template anda.

Pemasangan kode HTML untuk membuat Syntax Highlighter pada template sudah selesai tinggal kita terapkan pada postingan yang memakai kode CSS atau javascript.

Untuk pemasangan script Kode JS gunakan kode berikut
<pre><code>

SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</code></pre>
Demikian tutorial cara menggunakan syntaxlighter pada blogspot, semoga bermanfaat.

Menghilangkan Navbar Pada Blog

menyembunyikan navbar
Cara Menyembunyikan Navbar pada Blog , Navbar merupakan sebuah  Widget bawaan blogger  Yang fungsinya tidak terlalu Diperlukan Untuk Blog karena biasanya sebuah blog sudah memiliki halaman navigasi sendiri seperti menu dan lain-lain .

Maka Dari Itu banyak  orang-orang yang baru memulai menjadi seorang blogger kesulitan dan ingin Menyembunyikan Navbar Dari Blog tersebut ,caranya cukup mudah simak Tutorial di bawah ini :
 

Cara menghilangkan Navbar di blog :

  1. Pertama – tama anda masuk ke Dashboard blogger kemudian pilih Template  >> Edit HTML
  2. Kemudian gunakan Ctrl + F untuk mencari kode ini  ]]></b:skin>
  3. Jika sudah ketemu letakan kode beriku di atasnya
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none;
    }
  4. Save template dan lihat hasilnya

Cara terbaru menghilangkan Navbar di blog :

Jika cara di atas gagal coba cara yang terbaru berikut, blogger sudah membuat pilihan jika anda ingin menyembunyikan widget navbar tersebut caranya :
  1. Masuk ke Dashboard blog anda kemudian pilih Layout / Tataletak
  2. Kemudian anda pilih Navbar  >> Klik tulisan kecil EDIT
  3. Kemudian anda pilih gambar navbar yang ada tulisannya OFF , kira kira gambarnya seperti ini navbar

  4. Save

Saya rasa itu saja cara menghilangkan widget navbar semoga cukup membantu

Cara Memasang Meta Description, Title Tag, dan Heading Tag pada Blogspot

Cara Pasang Meta Description, Title Tag, dan Heading Tag
Cara Pasang Meta Description, Title Tag, dan Heading Tag memang sangat mudah. Aturan yang harus dipenuhi dalam memasang bagian ini agar blog menjadi lebih SEO adalah harus berbeda di setiap postingan.

Seperti yang kita ketahui bahwa yang membuat situs kita berada di posisi teratas google adalah Relevansi. Jadi 3 hal tersebut yaitu Meta Description, Title Tag, dan Heading Tag adalah salah satu hal yang dapat meningkatkan relevansi situs di mata Search Engine.

Jadi, mari kita bahas saja cara pasang Meta Description, Title Tag, dan Heading Tag ini

Cara Pasang Meta Description, Title Tag, dan Heading Tag

Meta Description 

Poin pertama yang dapat meningkatkan relevansi halaman anda adalah Meta Description. Meta Description itu ada 2, untuk homepage dan untuk halaman artikel. Dalam pengisian deskrpsi, panjang deskripsi maksimal adalah 160 karakter.

Cara pasang Meta Desciption pada homepage
  1. Login ke akun blogger anda
  2. Masuk ke menu Setelan
  3. Klik submenu Prefensi Penelusuran
  4. Pada bagian Tag Meta, aktfkan Deskripsi. Kemudian silahkan isi dengan deskripsi untuk homepage anda.
  5. Klik simpan perubahan
Cara Pasang Meta Description untuk halaman artikel
  1. Setelah anda mengaktifkan deskripsi penelusuran (tutorial diatas), Masuk ke edit entri atau entri baru.
  2. Lihat di bagian sidebar kiri, akan muncul option Deskripsi Penelusuran, isi dengan dengan deskripsi artikel anda 
Isi dengan dengan deskripsi artikel anda

Title Tag

Poin kedua yang akan kita bahas adalah Title Tag. Letak title tag itu berada di judul artikel di title bar browser. Untuk meningkatkan relevansi dengan Title Tag, anda bisa meletakkan kata kunci blog yang anda incar di Title Tag.

Misalnya halaman anda berjudul "Cara Mengganti Background Blog", maka title tag itu harus menuliskan "Cara Mengganti Background Blog" di title bar browser. Lihat gambar berikut! Yang diberi kotak merah itu adalah letak title tag...
Letak Title Tag
Untuk cara pemasangan Title Tag, saya rasa cukup mudah. Ikuti langkah-langkah berikut..
  • Login ke akun blogger anda
  • Masuk ke menu Template, kemudian klik Edit HTML
  • Silahkan lihat kode berikut..
<title>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<data:blog.title/>
<b:else/>
<data:blog.pageName/>
</b:if>
</title>

  • Cari kode <title>. Kemudian lihat kode dibawah kode tersebut, apakah sama dengan kode diatas. Jika sama, silahkan lanjut ke poin kedua. Jika berbeda, silahkan hapus kode diantara <title> dan </title>
  • Kemudian cari kode <head>
  • Masukkan kode diatas dibawah kode <head>
Heading Tag dapat meningkatkan relevansi halaman

Heading Tag

Dan poin yang ketiga adalah Heading Tag. Menambah Heading Tag sama saja berkata kepada Search Engine,"Bagian ini paling penting, lebih penting, ini penting, ini yang tidak penting". Jadi menambahkan heading tag memang sangat mudah.

Untuk penjelasan lebih lengkap mengenai Heading Tag, silahkan baca di artikel Cara Mengatur Heading Tag h1 h2 h3

Jadi dengan mengoptimalkan 3 poin diatas, blog anda akan menjadi lebih SEO friendly dan disukai google. Dengan meningkatkan relevansi blog anda, bisa saja blog anda menduduki ranking tinggi di google. Tapi tetap saja, ini hanyalah beberapa sinyal dari ratusan sinyal untuk berada di halaman satu google.