|
Info

SELAMAT DATANG

Selamat datang di Coretan \\nn// Black MetaL \\nn// - Saya Sangat Senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang Artikel Blog's Saya Memang Tidak Sesuai Dengan Judulnya, Tapi Bagi Para Bloggers Pasti Judul Blog Sedikit Tidak Penting Bukan ?.Yang Penting Bagi Para Bloggers Hanyalah Isi Artikelnya Yang Menarik .

Sekilas Tentang Saya

Nama saya FraNz , Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Cara Membuat Breadcrumb Menu Pada Blog

Kali ini Tutorial Blog ingin berbagi buat teman-teman Blogger tentang Cara Membuat Breadcrumb Menu Pada Blog yang berada di atas artikel posting. Breadcrumb, merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Dengan breadcrumb, pada artikel blog akan muncul menu tambahan di bagian atas. Menu tersebut akan ditampilkan dengan format Home > [Nama Label] > Judul Posting, seperti contoh pada blog ini.

Selain memudahkan navigasi, breadcrumb juga dipercaya memudahkan search engine untuk mengindeks posting.

Langkah-langkah Membuat Breadcrumb Pada Blogger

1.     Login ke Blogger dengan akun kamu

2.     Selanjutnnya, pilih  Design dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.

3.     Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard kamu untuk membantu pencarian):

    <b:includable id='main' var='top'>

4.     Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

Code Script

<b:includable id='breadcrumbs' var='post'>
      <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
        <b:if cond='data:blog.pageType == "item"'>
            <p class='breadcrumbs'>
            <span class='post-labels'>
              <b:if cond='data:post.labels'>
                Browse:
                <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
                <b:loop values='data:post.labels' var='label'>
                  <b:if cond='data:label.isLast == "true"'>
                    <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
                  </b:if>
                </b:loop>
                <b:if cond='data:post.title'>
      &gt;  <b><data:post.title/></b>
                </b:if>
              </b:if>
            </span>
            </p>
        </b:if>
      <!-- End of Breadcrums Hack -->
      </b:includable>

5.     Kemudian,cari lagi kode berikut:

          <b:if cond='data:post.dateHeader'>

6.     Jika sudah ketemu, letakkan kode dibawah ini tepat diatasnya.

<b:include data='post' name='breadcrumbs'/>

7.     Sekarang cari kode

]]></b:skin>

Jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya..

Code Script


.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

8.     Kemudian Simpan Templates dan Selesai.

Menu breadcrumbs ini hanya akan terlihat diatas artikel kamu atau dibawah judul blog  saat kamu membuka halaman suatu posting bukan halaman utama blogspot

Selamat mencoba

Membuat Artikel Terkait dengan menu Scroll

Untuk kali ini kita akan mencoba membuat artikel terkait dengan menu scroll, sebenarnya artikel terkait ini sama saja dengan yang lain Cuma ditambahkan dengan scroll agar lebih enak di pandang... Untuk mulai membuat artikel ini silakan mengikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Tata Letak
3. Pilih Edit HTML pastikan backup template dahulu
4. Cari kode <data:post.body/> atau klo sobat sudah memakai read moremaka akan ada dua kode <data:post.body/>
5. Tambahkan kode berikut ini tepat dibawah <data:post.body/> yang pertama



6. Kemudian, cari kode ]]></b:skin>
7. Letakkan kode berikut diatas kode ]]></b:skin>



8. Simpan Template…
…….. Selamat mencoba ………

Kode Warna HTML

Bagi sobat yang suka sekali edit template pasti tidak lepas dari yang namanya warna, untuk itu saya ingin mempermudah sobat dalam mencari kode-kode warna.. sialakan copy/paste kode warna di bawah ini :








































































































































































































Kode warna yang terpilih :

Memasang Reply di kotak komentar

Untuk mempercepat dan mempersingkat sobat membalas komentar salah satunya dengan memasang reply di kotak komentar,cara kerjanya sama saja dengan yang tidak menggunakan reply ini... silakan ikuti langkah-langkah berikut ini dan sebelumnya backup dulu template sobat.
Photobucket

1. Login ke blogger
2. Pilih Tata Letak
3. Pilih tab Edit HTML
4. Klik Expand Template Widget
5. Cari kode <data:commentPostedByMsg/> kemudian letakkan kode berikut tepat dibawahnya



6. Ganti ID BLOG dengan id blog sobat
dan reply bisa sobat ganti dengan balas atau yang lainnya
7. Kemudian simpan

Cara Membuat Meta Tag Di Setiap Posting

Meta Tag

Cara Membuat Meta Tag Di Setiap Posting, Membuat Meta Tag, Keyword Meta Tag, Description Meta Tag, Tutorial Membuat Meta Tag, Meta Tag Posting, Bagaimana Memasang Meta Tag, Meta Tag Unik, Meta Tag Untuk Keyword
1. Design > Edit HTML > centang Expand Widget Templates
2. Ganti kode <title><data:blog.pageTitle/></title> dengan kode berikut:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<meta expr:content='&quot;Ganti text ini dengan deskripsi yang kamu inginkan karena ini akan tampil sebagai deskripsi halaman depan.&quot;' name='description'/>
<b:else/>
<title><data:blog.pageName/> – <data:blog.title/></title>
<meta expr:content='&quot;Judul postingan tentang &quot; + data:blog.pageName + &quot; di blog saya. Silahkan baca artikel selain &quot; + data:blog.pageName + &quot; di blog saya.&quot;' name='description'/>
</b:if>

3. Save, dan lihat hasilnya lewat page source.
Mudah-mudahaan index blog kamu bertambah. Selamat mencoba deh sob! :)
Please Note
- Tips ini berguna juga untuk terhindar dari duplicate description. :)
- Kamu bisa ganti kata-kata yang ada dalam kode tersebut sesuai dengan yang kamu inginkan.
Cara Membuat Meta Tag Di Setiap Posting 
from JEVUSKA

Cara Memasang Artikel Terkait Dibawah Posting

Artikel Terkait


Cara Memasang Artikel Terkait Dibawah Posting, Pengertian Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan, tetapi artikel tersebut tidak selalu sama topiknya, bisa juga membahas tentang hal lain, tetapi masih mempunyai relevansi dengan tujuan artikel tersebut, misalnya yang sedang anda baca sekarang adalah artikel dengan judul Cara Membuat Artikel Terkait (Related Post) Di Blogspot, kemudian terkait dengan artikel lain yang berjudul Cara Memasang Artikel Terkait Dibawah Posting, disini kesamaannya adalah artikel tersebut sama-sama membahas tentang blog.

Oleh karena itu jika hendak memasukan kategori atau label pada postingan sebaiknya betul-betul diperhatikan apakah postingan tersebut mempunyai relevansi dengan postingan lainnya atau tidak, apabila tidak sebaiknya dibuatkan kategori atau label baru saja, tujuannya supaya pembaca blog kita tidak kecewa.

OK, sekarang kita mulai mengulas tentang Cara Memasang Artikel Terkait Dibawah Posting
silahkan ikuti langkah-langkah di bawah ini :

1. Masuk ke Blogger dengan ID anda
2. Pilih Rancangan/Tata Letak kemudian Edit HTML
3. Jangan lupa untuk memberi tanda centang pada Expand Widget Templates
4. Kemudian cari kode <data:post.body/> agar lebih mudah tekan Ctrl+F
5. Kalau sudah ketemu, copy kode di bawah ini kemudian paste di bawah kode tadi:


<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<H2>Artikel Terkait:</H2>
<DIV class='rbbox'> 
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t); 
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li); 
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) { 
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? 
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

Ingat: Bagi anda yang menggunakan Read More, akan menemukan 2 kode <data:post.body/>, pilihlah yang pertama.

6. Setelah itu, cari lagi kode ini ]]></b:skin>
7. Kalau sudah ketemu kode ]]></b:skin> ini, copy kode di bawah ini kemudian paste di atas kode]]></b:skin> tadi

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

8. Selesai deh, klik Simpan Template dan lihat hasilnya.


-SELAMAT MENCOBA-

Cara Membuat Judul Posting Berjalan

Judul Posting Berjalan

Cara Membuat Judul Posting Berjalan, membuat teks berjalan di dalam posting sudahlah menjadi hal yang biasa, tetapi kali ini saya akan membagikan trik Cara Membuat Judul Posting Berjalan, langsung
Pertama : seperti biasa Login Blogger
setelah itu masuk Layout - Edit HTML ( Rancangan - Edit HTML ) jangan lupa di centang kolom Expand Template Widget.
Cari Kode di bawah ini:


<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<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>

Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><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> </marquee>
</b:if>

Teks yang berwarna merah adalah kode yang harus anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika anda sudah cukup puas silahkan di simpan pekerjaan anda.
Contoh hasil seperti ini :

JUDUL POSTING BLOG ANDA

Bagaimana, mudah bukan? Selamat mencoba.. 

Cara Membuat Tab View Menu


Tab Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.Hot


  1. Silahkan login ke blogger dengan ID sobat tentunya.
  2. Tuju Tata Letak.
  3. Klik Edit HTML.
  4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
  5. Kemudian letakkan kode javascript berikut sebelum kode </head>
    <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);
      // ----- Pages -----
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
      var Page = Pages.firstChild;
      var i    = 0;
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.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>

  6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
    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: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #000; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #E6E6E6; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

  7. Kemudian Simpan Template.
  8. Langkah selanjutnya, silahkan sobat klik Tata Letak.
  9. Klik Elemen Halaman dan tambahkan Gadget.
  10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>

    </div>
    <div class="Pages" style="width: 300px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />

    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

  11. Kemudian Simpan.

Keterangan :
  • Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
  • Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
  • Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.
Oke sobat, selamat mencoba.

thanks to miscah.blogspot.com

Cara Mudah Percepat Loading Blog

Cara Mudah Percepat Loading Blog
Mengingat kecepatan akses blog sangatlah penting dan berpengaruh besar untuk sebuah website/blog, saya rasa trik ini sangatlah penting untuk dicoba. tidak jauh-jauh, sebagai contohnya blog saya ini, yang saya rasakan makin lama makin berat saja, hehehe :D dan kebanyakan blogger, bila koneksi lagi down pasti rada maleez tuh untuk mem-visite blog yang lumayan berat. hihihi :p
Karena itulah saya berusaha memaksimalkan, semaksimal mungkin mengompres dan mengurangi berat blog saya ini. kali ini saya akan membahas Cara Agar Loading Blog Lebih Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya.

Cara Mudah Percepat Loading Blog

Kecepatan loading blog, selain dipengaruhi oleh kecepatan koneksi, juga dipengaruhi oleh berat/ringannya blog itu sendiri. ada banyak cara untuk mengurangi berat blog yaitu dengan mengurangi jumlah widget/pernak-pernik blog yang tidak begitu penting, dengan cara mengkompres kode baik CSS maupun HTML, ataupun juga bisa dengan membuat CSS External, yang diupload/disimpan di webhosting. Dan yang akan saya bahas kali ini adalah membuat CSS External.


1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget" ataupun tidak, tidak masalah.

Perhatikan kode CSS dibawah ini, kode tersebut terletak diantara kode
<b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe{
display:none !important}
body{
background:#f5fffa;
width:980px;
color:#333;
font-size:12px;
font-family:Arial,Tahoma,Verdana;
margin:0 auto 0;
padding:0}
Potong atau Cut semua kode CSS-nya mulai dari sini sampai dengan 
diatas atau sebelum kode:
]]></b:skin>


6.
Simpan di Notepad dengan ekstensi.css caranya: klik File, pilih Save As, beri nama file tersebut misal: Blogku.css lalu Save.
7. nah sampai disini kita sudah mempunyai file.css. Selanjutnya kita tinggal mengUpload/menyimpannya di WebHosting, misal yang saya pakai yaitu Google Site.
8. Jika sudah meng-Uploadnya, misal:

http://sites.google.com/site/kodeblogger/JavaScript/blogku.css


Penulisan untuk scriptnya menjadi seperti dibawah ini:

<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' 
rel='StyleSheet' type='text/css'/>

Letakan kode script diatas di antara kode: ]]></b:skin> dan </head> , lihat contohnya seperti ini :

]]></b:skin>
<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' 
rel='StyleSheet' type='text/css'/>
</head>

9. Sebelum menyimpannya, harap di Preview terlebih dahulu, bila tampilan blog tetap pada aslinya, berarti sobat berhasil mempraktekannya. dan terakhir Save Template Sobat. Sippppp Selesaiiiii.


Catatan:
Setelah mengetahui cara diatas, pasti kita akan direpotkan saat kita akan menambah kode CSS pada template blog kita, yah... mau tidak mau kita harus mengedit dan meng-Upload kembali ke webhosting sobat.
Saya rasa cukup sekian dari saya, bila sobat blogger ada yang mengalammi kesulitan, silahkan berkomentarlah disini, dan semoga saja, saya bisa membantu.

Optimasi Blog Menggunakan SEO Tools

seo tools for blog imageBelajar SEO blog tanpa mengenal karakter search engine dan tools-nya akan sia-sia. Disini saya akan memberikan daftar SEO tools penting yang harus anda coba. Dengan menggunakan SEO tools ini, aktivitas anda dalam hal search engine optimization akan semakin mudah. Kita bisa memantau perkembangan blog/situs kita dengan mudah dan detail. Atau untuk mencari backlink, meningkatkan populatitas, keyword research dan lain-lain. Semua SEO tools ini pasti akan sangat berguna.

Dengan menggunakan SEO tools ini kita berharap blog kita akan lebih friendly dengan search engine. Eits..,tunggu dulu. Ada beberapa yang khusus digunakan untuk plugin firefox browser anda, jadi anda perlu download lebih dulu. Langsung saja, ini dia perangkat pembantu yang wajib kita coba.

1. SEO Tools
http://www.seochat.com/seo-tools/
Disini bisa anda temukan daftar tool-tool web yang bisa membantu anda dalam usaha anda mengoptimisasi blog atau website anda untuk mesin pencari. Beberapa tool diantaranya adalah Keyword Optimizer, Meta Analyzer, Robots.txt Generator dan banyak lagi.

2. WebCEO
http://www.webceo.com/index.htm?source=adwords&kwd=seo+tools
Software gratis untuk SEO ini memberikan anda bantuan untuk mengoptimisasi situs anda secara total, mempromosikan situs anda, menganalisis situs anda dan mengurus situs anda.

3. SEO Quake
http://ff.seoquake.com/?sln=en
Toolbar untuk firefox ini dapat membantu anda untuk menampilkan jumlah ekstensif hasil pencarian dari parameter search engine.

4. SEO Company
http://www.seocompany.ca/tool/seo-tools
Disini anda bisa temukan 136 direktori alat-alat web untuk SEO dari banyak provider. Anda hampir bisa menemukan segalanya tentang SEO disini.

5. SEOmoz
http://www.seomoz.org/tools
Disini anda bisa menemukan alat-alat bantuan gratis untuk mengoptimisasi website anda. Anda dapat menemukan bantuan untuk mengecek backlink, kata kunci populer dan banyak lagi.

6. WebConfs
http://www.webconfs.com
Disini anda bisa menemukan tool-tool gratis seperti Domain Suggestion Tool, Reciprical Link Checker, Similar Page checker dan banyak lagi.

7. iWebTools
http://www.iwebtool.com/tools
Disini anda bisa menemukan daftar tool-tool gratis dan sumber-sumber untuk anda gunakan untuk mengoptimisasi website anda. Beberapa tool diantaranya adalah spider simulator, website speed test, keyword density checker dan banyak lagi.

8. RankQuest
http://www.rankquest.com/download-toolbar.html
Toolbar SEO gratis ini memberikan lebih dari 30 tool dalam satu tempat, toolbar ini tersedia untuk internet explorer dan firefox. Anda bisa mengakses validasi, meta, popularitas website dan banyak lagi.

9. Webmaster Toolkit
http://www.webmaster-toolkit.com
Database tool-tool ini sangat besar dan juga menyediakan sumber-sumber bantuan untuk desainer web. Anda dapat menemukan tool-tool untuk SEO, domain, html dan direktori link-link ke situs lain yang akan membantu anda untuk membangun situs/blog anda.

10. SEOpen
http://seopen.com/index.php
Disini anda dapat menemukan tool-tool dan sumber-sumber yang telah diseleksi dengan baik untuk mengoptimisasi situs anda. Situs ini juga mempunyai ekstensi untuk firefox dan tool-tool lain tersedia untuk download gratis, termasuk juga SEO news.

Silahkan anda coba sendiri, pasti akan sangat berguna nantinya. Tidak perlu semuanya anda gunakan, anda bisa memilih dan menggunakan SEO tools tersebut sesuai keinginan anda. Saya sendiri selalu menggunakan salah satu dari mereka untuk memantau perkembangan blog saya.

Cara Mengatasi Galat Blogger bX-



Galat Blogger
Cara Mengatasi Galat Blogger bX-
Apa penyebab Galat tersebut ?
  1. Ternyata galat ini disebabkan karena ada fitur terbaru dari Blogger, yaitu Blogger in Draft ( Bukan versi Beta lagi )
  2. Kemungkinan Blogger akan dihapus, dan digantikan dengan Blogger in Draft pada masa yang akan datang.

Bagaimana Cara Mengatasi Galat Blogger bX- ?

1. Langsung menuju halaman ini >> Blogger in Draft
2. Login melalui akun Blogger sobat.
3. Ganti bahasa Indonesia ke Bahasa Inggris ( English )



4. Selesai. Silahkan buka >> Blogger.com.


Efek Samping yang Ditimbulkan :

Blogger.com akan berubah menjadi Bahasa Inggris. Jadi, sobat harus rajin-rajin belajar Bahasa Inggris nih ^,^ haha.. Jika ingin Private, silahkan datang saja ke Fb saya hehehe

Selain itu, ada juga Galat Standard Blogger yang biasa terjadi di BLOG kita:

  • bx-bliced
  • bX-ev85ll
  • bX-39cc9q
  • bX-y6cz0v
  • bX-982020

Galat seperti diatas, dapat diatasi dengan cara menekan tombol F5 pada Keyboard sobat.

Cara Membuat Label Breadcrumbs [Banyak Label]

Breadcrumbs Navigasi

Cara Membuat Breadcrumbs Banyak Label, Breadcrumbs adalah sebuah navigasi Link untuk memudahkan pembaca blog kita dalam mengakses sebuah Halaman yang memiliki banyak Kategori. Seperti Gambar Di Atas
Berikut ini Adalah cara pemasangannya:
  • Login ke bloger.com dengan akun anda.
  • Klik Design kemudian Edit HTML.
  • Jangan lupa klik Download Full Template.
  • Centang Expand Widget Templates.
  • Cari Kode berikut  ]]></b:skin>
  • Copy kode dibawah ini di atas ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
  • Cari Kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> atau
    <b:includable id='main' var='top'>
  • Copy paste script kode berikut ini dan letakan di bawah nya
 <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
  • Simpan tamplate.
  • mudah kan Cara Membuat Breadcrumbs Banyak Label :)

Cara Membuat Buku tamu tersembunyi di blog

Cara Membuat Buku tamu tersembunyi di blog - hallo sobat semuanya kita jumpa lagi,sebelumnya saya mau mengucapkan semoga sahabat semua dalam keadaan baik-baik saja,baiklah tidak usah basa-basi lagi, kita langsung saja pada pokok masalah.Cara Membuat Buku tamu tersembunyi di blog . sebenarnya saya bingung dengan judul kali ini yaitu “Membuat Buku Tamu Tersembunyi”,apa maksudnya ya,Untuk lebih memudahkan pemahaman anda coba lihat di blog ini dan terlihat di pojok kanan ada widget Buku tamu jika anda klik tab warna hijau tersebut,maka Buku Tamunya akan tertarik keluar,lebih baik anda artikan sendiri apa maksudnya deh ya sob.Untuk Membuat hal seperti itu sebenarnya caranya sangat mudah kok,untuk lebih ngerti lebih baik ikuti aja trik berikut ini sampai akhir,dan tolong berikan komentar anda.OK
Berikut langkah-langkahnya

1. Login di blogger dengan ID anda

2. Klik menu Layout

3. Klik Page Elements

4. Klik Add a Page Element

5. Klik ADD TO BLOG pada menu HTML

6.Lalu Copy kode berikut dan Pastekan Pada kotak HTML



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4qHwO_D4NKUMqBxwm9XCz6ChJqld1dlccBIM0qWdwFNfe_6cL2QrQpKiKqC3l67Q8PSem1hZKa_DqUCiPxiMIEU28ia6G10tXE5oRtDDM7rVZSS4mhMyYLl-7NJH9VA9iFP3A4gkzH7E/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>


<div id="gb">


<div class="gbtab" onclick="showHideGB()"> </div>


<div class="gbcontent">


< Letakkan disini kode Shoutbox Anda>
<div style="text-align:right">
<a href="http://b-metal666.blogspot.com/">
[ali blogger's]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>


</div>






<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div> 

simpan dan selesai deh

Sumber : ALI Bloggers

Cara Menghilangkan Tulisan Tampilkan Entri Lawas

Cara Menghilangkan Tulisan Tampilkan Entri Lawas. Bila sebuah blog sudah terpasang widget label atau kategori, maka begitu diklik salah satu labelnya maka akan muncul tampilan seperti ini :


Menghilangkan Tulisan Tampilkan Entri Lawas

Itu adalah pengaturan standar dari blogspot. Tetapi sebagian blogger merasa terganggu dengan tampilan lawas ini. Alasannya membuat halaman posting kurang rapi, terlalu ribet dan mempengaruhi loading blog. Nah, terlepas dari apa yang menjadi alasan, jika anda juga ingin menghilangkan kotak tampilan entri lawas ini, anda bisa lakukan langkah-langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

4.Kemudian centang Expand Template Widget.

5. Kemudian carilah kode : 
<b:includable id='status-message'>

6. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

7. Kemudian scroll sedikit ke bawah, maka akan tampak beberapa baris kode pengiringnya, sehingga lengkapnya biasanya akan terlihat seperti dibawah ini.
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
8. Nah, sekarang gantilah semua kode tersebut dengan kode di bawah ini.
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

9. Jika sudah jangan lupa klik  SIMPAN TEMPLATE  dan tunggu hingga proses penyimpanan selesai.

10. Sekarang lihatlah hasilnya dengan mengklik Lihat Blog. Kemudian cobalah klik salah satu label blog anda. Apakah tulisan tampilkan entri lawasnya masih muncul atau sudah hilang. Selamat