Cara Mudah Agar Blog Baru Terindeks di Google Dalam Waktu 2 (dua) Jam

Anda ingin agar blog anda ceptterindeks google hanya dalam waktu 2 (dua) jam? Seperti pengalaman saya Terindeks di Google SearchEngine Dalam Waktu 2 (dua) Jam. Saya akan berbagi mengenai Cara MudahAgar Blog Baru Terindeks di Google Dalam Waktu 2 (dua) Jam. Berikut ini tipsdan trik mengenai Cara Mudah Agar Blog Baru Terindeks di Google Dalam Waktu 2(dua) Jam :

1. Buat posting blog anda lebih dari satu artikel. 
Buatlah minimal duaartikel yang saling bertautan. Dengan membuat artikel yang saling bertautan,akan membuat blog anda semakin mudah terindeks google search engine atau mesinpencari.

2. Lakukan Ping. 
Setelah artikel sudah anda posting, segera lakukan pingke beberapa situs ping service gratis. Silahkan anda melakukan ping blog andadi situs : http://www.totalping.com dan http://ping.sg. Lakukanping hanya sekali saja, jangan melakukan terlalu sering. hal tersebut akanmenyebabkan blog anda dianggap SPAM oleh google.

3. Submit artikel ke situs sosial bookmarking. 
Lakukan submit artikelanda setelah diposting ke beberapa situs sosial bookmarking seperti :lintasberita.com, digg.com, infogue.com, atau ke berbagaisitus pasang iklan gratis seperti sinergibisnis.com.

4. Daftarkan blog anda ke google.
Caranya silahkan masukkan URL bloganda ke google add url.

5. Berkunjung ke blog lain dan berilah komentar.
Cara ini merupakan carapaling cepat dalam membuat blog baru terindeks google. Carilah blog yangmempunyai page rank minimal 3 dan berilah komentar minimal satu komentar.Kemudian masukkan nama (anchor text blog anda) dan URL blog anda. Denganmemilih blog yang memiliki page rank tinggi, akan semakin mempercepat prosespengindeksan blog baru. Karena Blog yang mempunyai page rank tinggi sangatberpengaruh di mata google maupun yahoo.

Cara Mudah Agar Blog Baru Terindeks diGoogle Dalam Waktu 2 (dua) Jam tersebut telah saya buktikan Sobat Bisamencobanya

Membuat Judul Sidebar Widget Rata Tengah (Center Positions) Di Blog

Nah, karena penampilan blog selalu menjadi perhatian saya (blog terlihat klop secara keseluruhan) agar bisa juga dinikmati dengan nyaman khususnya oleh teman-teman dan umumnya untuk para pengunjung, maka saya pun mengambil inisiatif mencari cara bagaimana agar Judul Sidebar Widget tersebut berada di rata tengah.

Bagi teman-teman semua yang ingin membuat Judul Sidebarnya berada di Rata Tengah, silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,

2. Klik design/rancangan >> Edit HTML >> klik Expand Templates Widget,

3. Lalu cari kode berikut: .sidebar h2 { atau .sidebar .widget h2 {

copy paste kode ini setelah kode .sidebar h2 { atau .sidebar .widget h2 { text-align:center; 

Ket:

• Apabila diurutan kode tersebut sudah terdapat kode: text-align:left; maka yang hanya diubah adalah tulisan 'left' nya diganti menjadi 'center',
• Apabila kode: text-align:left; nya tidak ada maka tambahkan kode: text-align:center; berada setelah kode: .sidebar h2 {

4. Jika sudah, sekarang bisa klik Save Templates.

Note:

Cara ini juga bisa digunakan untuk Judul Widget pada Footer, langkah-langkahnya juga sama seperti di atas, teman-teman hanya perlu mencari kode: #footer { atau id.footer atau #bottom h2 { (disesuaikan saja, tiap templates berbeda). Lalu bisa juga untuk Judul Postingan, silahkan cari kode .post h3 {

Seperti itulah cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), semoga bisa bermanfaat dan selamat mencoba

Fungsi Kode Untuk Mengatur Tampilan Content Blog

Fungsi Kode Untuk Mengatur Tampilan Content Blog - Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.

Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas main post akan menghilang.

2. Kategori Post dan Single Post

<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).

Contoh penggunaan kode ini bisa Anda lihat pada demo blog tadi dimana ketika sobat mengklik kategori post atau membaca postingan secara keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman utama blog.

3. Halama Utama Blog dan Kategori Post

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

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.

Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu navigasi), maka widget tersebut akan menghilang.

4. Single Post

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

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.

Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri dengan judul Blog Template dimana saat sobat membaca suatu postingan secara keseluruhan, maka widget tersebut baru muncul.

5. Halama Utama Blog dan Kategori Post

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

Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond='data:blog.url == &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday. Anda akan melihat widget blog dengan judul Templates By DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Contoh penerapan kode :

<b:widget id='Feed1' locked='false' title='Comments' type='Feed'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<h2><data:title/></h2>

<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>

<span style='filter: alpha(25); opacity: 0.25;'>

<a expr:href='data:feedUrl'><data:loadingMsg/></a>

</span>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. 

Semoga bermanfaat.

Cara Membuat Artikel Terkait ( Related Post )

Untuk membuat artikel terkait atau related post, kita akan sedikit mengotak-atik kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label. Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.

Berikut tutorial singkatnya :

1. Login ke Blogger.
2. Klik Tata Letak. 
3. Klik tab Edit HTML. 
4. Kemudian klik Expand Template Widgets . 
5. Cari kode yang seperti ini :  <p><data:post.body/></p>

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>

Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode

<data:post.body/>

     6. Kemudian letakkan script berikut ini setelah kode <data:post.body/>yang pertama,
     7. kalau gak berubah, letakkan di bawah <data:post.body/> kedua.

KODE

<b:if cond='data:blog.pageType == "item"'>

<div class='similiar'>

<div class='widget-content'>

<h3>Artikel Terkait</h3>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;

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;data2007&#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>

</div>

</b:if>

    8. Kemudian save. selesai

Selamat Mencoba Sobat....

Cara Pasang Read More Otomatis

Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut :

1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula;
2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Login ke Account Blogger Anda;
2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:

KODE

<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[

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>

   3. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah ini:

<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'>READMORE - <data:post.title/></a></span>

</b:if>

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

Simpan Template, Selesai.

Backlink Gratis dari 100 situs ber PR Tinggi

Diantara sobat sekalian, banyak yang mencari-cari backlink dari berbagai situs-situs atau web. Tujuannya adalah untuk meningkatkan Page Rank dari web/blog sobat sekalian.

Page rank yang tinggi sangat mempengaruhi identitas sebuah blog/website. Semakin banyak backlink one-way atau backlink satu arah yang menuju ke blog kita, maka akan semakin terbuka kesempatan sebuah blog untuk mendapat page rank, apalagi jika backlink tersebut berasal dari blog ber PR tinggi.

Jika sobat ingin mendapatkan backlink gratis dari 100 situs ber Page Rank tinggi, sobat bisa mencobanya dengan membuka situs ini http://www.greatdirectories.org/free.html

Sobat hanya perlu submit Url Web/blog sobat dan memberikan sedikit diskripsi tentang blog sobat ke daftar 100 situs ini, dan tunggulah beberapa hari atau bahkan ada yang sampai berminggu-minggu untuk memberikan jawaban apakah blog sobat diterima di situs tersebut atau tidak.

Selamat mencobat

Membuat Navigasi Halaman Menggunakan Javascript

Login di blogger, silahkan sobat klik Rancangan.
Kemudian klik tab Edit HTML.
Expand Template Widget tidak usah di klik.
Letakkan kode css berikut ini sebelum kode ]]></b:skin>

KODE

.showpageNum a {
color:#FFF;padding:4px 10px;
margin:0 2px;
text-decoration:none;
-webkit-border-radius:2px;-
moz-border-radius:2px;
background:#848484
}
.showpageOf {
color:#222;
margin:0 6px 0 0
}
.showpageNum a:hover {
background:#222;
color:#FFF
}
.showpagePoint {
color:#FFF;
text-shadow:0 1px 2px #333;
padding:4px 10px;
margin:0 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
background:#222;
text-decoration:none
}

5. Dan letakkan kode berikut sebelum </body>

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=7;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>

6. Kemudian Simpan Template.

Keterangan :
var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman

Meningkatkan traffic blog dengan melakukan Ping Manual ke Google

Untuk meningkatkan traffic blog kita di search engine, google misalnya, kita dapat melakukan banyak hal, misalnya dengan melakukan promosi di berbagai situs iklan gratis maupun berbayar, Bisa juga dengan melakukan blog walking, tukar link dan lain lain. Pada kesempatan ini, guna meningkatkan traffic blog kita, kita akan melakukan ping secara manual ke google. Kenapa harus melakukan ping? Ini kita lakukan agar blog kita tetap akrab dengan search engine di luar sana.

Ping service itu biasanya gratisan, oleh sebab itu tidak ada jaminan jika ping yang kita lakukan benar-benar masuk ke Google, dan lagi sering sending atau pengiriman ping berstatus failed. karena google adalah seach engine idola pengguna internet hampir di seluruh dunia, maka untuk melakukan ping ke Google sebaiknya dengan melakukan ping sendiri secara manual.

Bagaimana melakukan ping secara manual ke Google? Mungkin banyak yang tidak tahu kalau Google punya direktori blog sendiri. Maka dari itu kita bisa mencari blog kita melalui blog directory google yaitu “ http://blogsearch.google.com “.Dari sinilah kita bisa melakukan ping ke Google secara manual. Adapun cara melakukan ping itu silahkan masuk ke alamat ini :

http://blogsearch.google.com/ping

Setelah itu anda tinggal memasukkan alamat halaman URL yang akan diping. Lalu tunggu beberapa saat google bot akan menggerayangi URL yang baru anda ping tadi. Pada saat itulah halaman baru anda sudah tercantum di indeks google dan sudah masuk ke database google. Ini salah satu cara meningkatkan traffic blog kita. Selamat mencoba melakukan ping manual ke google. Semoga sukses.

Membuat Artikel Terkait di blog blogspot

Image via WikipediaArtikel terkait, apa maksudnya? Mungkin anda sering melihat halaman blog atau web yang di bagian bawah dari tiap artikel yang tampil terdapat beberapa link yang terhubung ke halaman lain dari blog itu. Dan di atas link tersebut tertulis artikel terkait atau Related post. Ada juga yang menggunakan istilah lain, misalnya; Posting terkait, Artikel lainnya atau Artikel Berhubungan dan lain-lain.

Adapun untuk blog yang sedang dihadapan anda ini, istilah “artikel terkait” kami ganti dengan kalimat “Baca Artikel Terkait berikut ini:” yang dapat anda lihat di bagian bawah dari halaman ini. Inilah yang akan kita bicarakan, terutama tentang bagaimana membuat link yang menghubungkan artikel di halaman posting dengan artikel terkait lainnya yang terdapat di dalam blog tersebut.

Sebenarnya ada beberapa versi artikel terkait. Akan tetapi pada kesempatan ini kita akan membicarakan salah satu versi dari artikel terkait itu. Kita bahas artikel terkait yang sederhana saja dulu, toh hasilnya tidak akan jauh beda dengan artikel terkait versi yang lain. Dan dengan artikel terkait versi ini pun sudah dapat membantu pengunjung untuk berjalan-jalan di blog anda dengan mudah.

Namun demikian untuk artikel terkait versi yang lain, akan kita bahas nanti. Oh ya, hampir lupa, sebelum melakukan langkah-langkah membuat artikel terkait, anda harus tahu bahwa untuk membuat artikel terkait tidak lepas dari mengotak-atik template blog anda. Maka dari itu simpan dulu template blog anda sebelum melakukan operasi template dari blog anda. Jika peringatan saya sudah anda laksanakan, kita langsung ke pokok bahasan yaitu membuat artikel terkait.

Langkah-langkah yang anda lalui untuk membuat artikel terkait di blog anda:

1. Log in di blogger atau blogspot anda.
2. Pilih dan klik Tata letak
3. Klik tab Edit HTML
4. Jangan lupa klik Expand Template Widgets
5. Cari kode:

<p><data:post.body/></p>

Agar mudah menemukan kode tersebut, tekan tombol Ctrl + F dan tulis kode <data:post.body/>. Perhatian! jika anda sudah membuat fungsi read more di blog, anda akan menemukan 2 kode <data:post.body/>. Pilihlah yang pertama.

6. Copy script kode di bawah ini dan letakkan di bawah kode <data:post.body/> yang pertama.

KODE

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

<div class='similiar'>

<span class='box'>

<div class='widget-content'>

<h3>Baca Artikel Terkait berikut ini:</h3>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 6;

maxNumberOfLabels = 100;

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;data2007&#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>

</span></div>

</b:if>

7. Simpan template dan selesai. Lihat hasilnya.

Terjawab sudah penasaran kita tentang beberapa link penghubung artikel dengan artikel lainnya yang terdapat di bagian bawah halaman posting. Itulah namanya artikel terkait. Sekarang anda juga sudah bisa bagaimana membuat.

Menambah Kolom Diatas dan Dibawah Postingan Blog

Ketemu lagi, di postingan saya Membagi Widget 2 Kolom Berdampingan dibawah Postingan sudah saya jelaskan bagaimana temen-temen blogger semua Membagi Widget 2 Kolom Berdampingan dibawah Postingan di blog. Kali ini saya akan memberikan tutorial tentang membuat dua kolom baru diatas dan dibawah postingan.

Coba perhatikan gambar atas ini muncul dua kolom baru dibawah post blog. Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya.

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda? coba ikuti langkah dibawah ini.. Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

 Taruh Code CSS dibawah ini diatas Code ]]></b:skin>

/*Under Post-----------------------------*/

#underpost h2{

font-size:13px;

font-weight:bold;

color:#B8002E;

border-bottom:2px solid #000000;

padding-left:5px;}

#underpost{

width:530px;

}#underleft{

width:257px; /*lebar kolom kiri*/

float:left;

margin:4px;

}#underright{

width:250px; /*lebar kolom kanan*/

float:right;

margin:4px;}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini :

#main-wrapper {

width: 530px;

Nah ukuranya adalah yang tercetak tebal diatas. Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 530px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan. Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

<div id='main-wrapper'>

 <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

 </div>

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas. Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau

<div id='underpost'>

<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>

</div>

Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

<div id='main-wrapper'>

 <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

<div id='underpost'>

 <b:section class='underleft' id='underleft'/>

 <b:section class='underright' id='underright'/>

 </div>

</div>

Dua kolom diatas post body

<div id='main-wrapper'>

<div id='underpost'>

 <b:section class='underleft' id='underleft'/>

 <b:section class='underright' id='underright'/>

 </div>

 <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

 </div>

Nah jika semuanya sudah beres tinggal SAVE. 

Coba lihat di area page element muncul dua kolom dibawah/diatas post body. Kode-kodenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda. Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.

Sekian dulu jika ada pertanyaan silahkan isi dikomentar saja. Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog InI dan  semoga bermanfaat bagi Anda semua.

Kompres kode CSS untuk mempercepat loading blog

Siapa yang tidak mau blognya mempunyai loading yang cepat, hargi gini geto lho banyak persaingan antara 1 blogger dengan blogger lainnya yang rebutan traffic. Ya salah satunya meningkatkan kecepatan loading blog ,karena para pengunjung paling males jika menemui blog yang loadingnya minta ampun beratnya dan jangan berharap para pengunjung akan kembali lagi ke blog kamu. Walaupun posisi blog kamu pada hasil pencarian sering masuk 10 besar namun dengan melihat alamat blog kamu pengunjung tidak akan meng-klik di hasil pencarian untuk mengunjungi blog kamu.

Untuk mengatasi hal tersebut  kita mempunyai trik untuk masalah kecepatan loading blog yakni dengan meng-kompres kode CSS pada template blogspot. Mungkin sudah banyak tutorial tentang cara mengkompres kode CSS namun pada kesempatan ini kita akan berbagi trik yang berbeda tentang kompres-kompresan kode CSS, walaupun tidak jauh-jauh amat dari kebanyakan tutorial yg bertebaran.

Ada dua cara tentang meng-kompres kode css:

• Kompres kode CSS pada umumnya.
• Kompres kode CSS melalui trik blogtegal

Mari kita bahas satu-persatu.

1. KOMPRES KODE CSS PADA UMUMNYA

• Untuk trik yang pertama ini adalah trik yang pada umumnya para blogger lakukan.
• Pertama cek dulu kecepatan loading blog kamu untuk membandingkan.
• Login ke dashbord blog kamu.
• Pilih Rancangan  Edit HTML
• Download template lengkap dulu barangkali terjadi kesalahan.
• Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin> 
• Kalau kurang jelas begini, potong kode mulai dari

.......<b:skin><![CDATA[ disini mulainya |........................................

.............................KODE-KODE CSS. . . . . . . ............................

.......................................................sampai disini | ]]></b:skin>.......

• Buka situs CSS compressor disini
• kemudian setting pengaturannya seperti berikut:
- Compression mode = pilih 'Normal'
- Comment handling = pilih 'Don't strip any comments'
• pastekan kode CSS yang telah di potong tadi pada kotak kosong.
• kemudian klik Compress-It
• kemudian copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode
  <b:skin><![CDATA[ Pastekan disini kode CSS yang telah di kompres tadi ]]></b:skin>
• terakhir klik SIMPAN

Sekarang bandingkan dengan loading blog kamu sebelum di kompres, awak yakin pasti lebih cepat, kalau lebih lambat loadingnya berarti emang koneksi internet kamu yang Kurang jelas...

2. KOMPRES KODE CSS MELALUI TRIK BLOGTEGAL

Untuk trik yang kedua ini tidak jauh berbeda dengan trik yang pertama hanya saja pada saat meng-kompres kode css pengaturannya di bedakan. Dan trik blogtegal ini agak ribet dan rumit, ini hanya di khususkan untuk kalangan blogger dengan tingkat level menengah keatas, namun jika para newbie yang mau pake trik juga boleh. Syarat utama untuk memakai trik yang kedua ini adalah pastikan kamu tidak akan merubah tampilan layout blog kamu baik dari CSS sendiri maupun dari kode HTML. Atau syarat lainnya adalah menyimpan template kamu yang terakhir jika sewaktu-waktu kamu ingin menambahkan menu atau merubah layout blog, setelah ditambah atau di perbaiki, ulangi pengompresan seperti trik yang kedua ini.  Bingung kan dengan trik yang kedua ini. Habis bingung menyusun kata-katanya dan emang sengaja di bikin bingung  Jika siap bingung lets do it.

Seperti cara diatas yakni memotong kode CSS diantara kode <b:skin><![CDATA[ dan kode ]]></b:skin> Dan pastikan kamu telah menandai kotak kecil pada  Expand Widget Template.

• Masuk ke situs CSS compressor disini
• Setting pengaturannya seperti berikut:

          - compression mode = pilih 'Super Compact'
          - comment handling = pilih 'Strip all any comments'

• KEmudian tempatkan hasil kompresannya diantara kode <b:skin><![CDATA[ Pastekan disini kode CSS yang telah di kompres tadi ]]></b:skin>
• Kemudian potong kembali pada kode diantara kode  <body> Bla. . . .bla. .  . .bla. .  . . Bla . </body>
• Buka halaman berikut dan kompres kode tersebut Disini namanya HTML OPTIMIZER
• Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>
• Terakhir klik SIMPAN

Sekarang bandingkan dengan loading blog sebelum di kompres dengan trik yang pertama dan dengan trik yang kedua, lebih cepat mana? Silahkan dan tentukan pilihan mana yang kamu suka. Selamat berexperimen.. Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog InI

Membagi Widget 2 Kolom Berdampingan dibawah Postingan

Mempercantik tampilan memang sangat dibutuhkan untuk menunjang kenyamanan Para pengunjung diantara Membagi Widget 2 Kolom Berdampingan dibawah Postingan supaya widget tidak bertumpukan dan membuat kenyamanan para pengunjung, Oke langsung saja Cara Membuat Widget 2 Kolom Berdampingan dibawah Postingan.

Langkah-langkahnya Sebagai Berikut :

1. Login Ke Blog Anda

2. Klik Rancangan

3. Klik Edit HTML, Jangan lupa Mencentang Expand Template Widget

4. Carilah Kode ]]></b:skin> Lalu letakkan kode dibawah ini tepat diatas Kode ]]></b:skin>

.bawahpost {

margin:15px 0px 10px 0px;

padding:5px 0;

clear:both;

}

.bawahkiri {

float:left;

width:265px;

margin-right:15px;

}

.bawahkanan {

float:right;

width:265px;

}

5.  Lalu Cari Kode <data:post.body/> Lalu letakkan Kode dibawah ini tepat diatas <data:post.body/>

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

<div class='bawahpost'>

           <div class='bawahkiri'>

            Kode Iklan anda yang ingin ada di sebelah kiri disini

           </div>

          <div class='bawahkanan'>

          Kode Iklan anda yang ingin ada di sebelah kanan disini

           </div>

</div>

</b:if>

6. Lalu Save Template dan Lihat hasilnya

Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog InI

Cara Membuat atau Menambah 2 Kolom pada Sidebar Blog

Tips blog kali adalah bagaimana cara membuat 2 kolom pada sidebar blog. Langsung saja, cara membuat 2 kolom pada sidebar blog atau menambahkan 2 kolom baru pada sidebar blog (contoh disini saya mengambil template blog bumicaang ), yaitu:

• Sign in ke Blogger - Rancangan - Edit HTML
• Download Template Lengkap, untuk jaga-jaga bila terjadi kegagalan
• Cari (gunakan tombol Ctrl+F pada keyboard) kode #sidebar
• Berapa lebar kolom sidebar tersebut? disana saya dapati width: 350px; lalu sebagai acuan, 2 kolom baru pada sidebar harus lebih kecil atau samadengan lebar kolom sidebar ÷ 2, kemudian berikan perintah CSS dibawah #sidebar, seperti ini :

.sidebar1 {float: left; width: 170px; margin: 0; padding: 0;}

.sidebar2 {float: right; width: 170px; margin: 0; padding: 0;}

#sidebar-wrapper {float: left; width: 350px; margin: 0; padding: 0;}

• Cari kode

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

----hingga----

</b:section>

</div>

• Tambahkan kode berikut diatas </div>

<!-- tambah 2 buah sidebar -->

<b:section class='sidebar1' id='sidebar1' preferred='yes'/>

<b:section class='sidebar2' id='sidebar2' preferred='yes'/>

<!-- /tambah 2 buah sidebar -->

• Simpan Template, lalu lihat di tab Elemen Laman

Sidebar sebelum ditambah kolom baru

Sidebar setelah ditambah 2 kolom baru

Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog InI

Cara membuat menu multi kolom pada blog

Kali ini kita akan membahas tentang membuat menu multi kolom, yang mana walaupun trik ini sudah lama dan sudah banyak bertebaran di maya internet, namun tak ada salahnya kalau kali ini akan menulisnya kembali. Mungkin saja para newbie belum ada yang tahu  dan kebetulan nemu di blog  ini. Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.

Biasanya menu ini di ěsi dengan daftar link blog, recent comment, dll sesuai kehendak si pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar. Contoh tampilan dari Menu Multi Kolom atau Menu Multi Tab seperti gambar di bawah ini:

Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya.  Ikuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan 

1. Login ke dashboard blog kamu.
2. Pilih Rancangan »» Edit HTML
3. Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
4. tandai pada  Expand widget template.
5. kemudian tempatkan script berikut sebelum kode ]]></b:skin>

div.TabView div.Tabs { height:24px; overflow:hidden;}

div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}

div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}

div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}

div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

    6.  Sesuaikan kode warnanya dg blog kamu, untuk melihat kode warna bisa di lihat  kode warna Di  diatas

    7.  Masukan script pemanggil berikut sebelum kode </head>

<script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>

   8.  Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan masukan kode berikut kedalamnya:

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Terakhir klik SIMPAN.

Selamat berexperimen untuk membuat menu multi kolom atau menu multi tab, Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog InI