Cara Mudah Membuat Gambar Gradasi

Bagaimana membuat gambar gradasi ? Banyak tool yang menyediakan layanan untuk membuat gambar gradasi salah satunya adalah Gradient Image Maker. Biasanya gambar gradasi dibuat untuk background template blog, untuk memperindah tampilan blog tentunya.

Dalam pemasangan di dalam template blog, kamu bisa meletakkan gambar yang sudah kamu buat. contoh letaknya :

body {
background:#ffffff url(http://i32.tinypic.com/2im8j1y.jpg) repeat-x left top;
......
......
}

Nah, jika kamu ingin membuat gambar dengan gradasi berikut blog info kasih sedikit cara membuat gambar gradasi menggunakan Gradient Image Maker



Pertama kunjungi di sini

Di situ nanti akan muncul beberapa pengaturan untuk membuat gambar gradasi

Seperti :

Select Gradient Type : Type pertama ( paling kiri )

Gradient Width : 1 ( agar tidak harus memotong lagi )

Gradient Height : 650

Top Color : 000000

Bottom color : FFFFFF

Image Output format : Silahkan di pilih JPEG atau PNG

Jika sudah selesai Klik tombol "Get full size image"

Setelah muncul jendela baru, sorotkan mouse komputer anda pada gambar yang ada, klik kanan lalu pilih opsi "Save Image As…"

Silahkan simpan gambar tersebut di komputer anda untuk nanti di upload ke hosting gambar seperti www.photobucket.com atau tinypic.com.


Baca Juga

Cara Membuat Mesin Pencari Google Custom Search

Cara Membuat Artikel Terkait Dengan Gambar

Artikel terkait dengan gambar, jika sebelumnya blog info sudah membahas cara membuat artikel terkait di sidebar, kini akan membahas cara membuat artikel terkait menggunakan gambar.

Contohnya seperti gambar di bawah ini :



Langsung saja ya ? Jika kamu ingin membuat artikel terkait menggunakan gambar. Berikut Blog info sajikan cara membuat artikel terkait dengan gambar

Langkahnya sangat mudah, Silahkan menuju ke LinkWithin

Disitu nanti ada form untuk di isi

Email : Masukkan email

Blog Link : Masukkan Url Blog

Platform : Silahkan Pilih salah satu - Misalkan anda memakai blogger maka pilih Blogger

Width : Pilih jumlah gambar ( sesuaikan dengan lebar template blog kamu.

Centang tombol button jika blog anda menggunakan background gelap, jika tidak, jangan di centang

Jika sudah klik Get widget

Langkah selanjutnya ambil kode atau kamu bisa langsung Add Widget dan taruh di bawah posting.

Setelah itu simpan template.

Jika ingin artikel terkait dengan gambar hanya tampil di postingan, silahkan kamu membaca Cara Membuat Widget Hanya Tampil di HomePage Atau Postingan


Baca Juga

Cara Lengkap Mendaftar Blog Di Technorati

Technorati adalah situs direktori yang cukup populer, banyak yang ingin mendaftarkan blog/websitenya di technorati. Jika kita mendaftar ke technorati maka web/blog kita akan semakin di kenal luas dan sekaligus untuk mendatangkan trafik di blog kita.



Berikut Blog Info sajikan Cara Mudah dan Lengkap Mendaftarkan Blog ke Technorati

Silakan kunjungi technorati

kemudian klik join

Nanti akan muncul form pendaftaran, silahkan isi data yang diperlukan.

Jika sudah selesai mengisi form pendaftaran klik join ( jangan lupa beri centang I agree to Tecnorati's Privacy Policy and Terms of Service )

Setelah itu kamu akan disuruh untuk Aktifkan Account, silahkan cek email kamu dan klik link konfirmasi dari technorati.

Nah, blog kamu sudah terdaftar

Langkah selanjutnya adalah mengklaim blog kita.

Masuk ke technorati dengan klik sign up

Masukkan User name dan Password

Kemudian menuju menu profil kamu ( Di situ kamu bisa menambah foto menambah link Url blog )

Silahkan Scroll kebawah dan temukan My claimed blogs



Di dalam kotak Start a blog claim masukkan URL blog kamu dan klik Claim

Nanti kamu akan di bawa menuju ke form isian dan isi dengan lengkap

Details

Isi Nama blog, URL, Feed URL ,Linking blogs

Site description

Isi dengan deskripsi blog kamu

Site categories

Klik kotak/centang untuk memilih kategori blog kamu

Site tags

Isi dengan tag blog kamu

Jika sudak klik proceed to the next step

Akan muncul seperti gambar di bawah ini



Setelah itu klik return to profile

Kamu akan dibawa menuju profil kamu dan di profil kamu akan ada menu seperti gambar di bawah ini



Silahkan klik Chek Claim

Nanti kamu akan di beri kode token. ( contoh : lihat warna biru pada gambar di bawah ini )



Kode token seperti ini 6B9ZSNMA75DP ( kode berbeda-beda )

Setelah itu buatlah postingan dan sisipkan kode token tersebut di postingan kamu.

Terakhir, kembali ke technorati dan klik Verify Claim Token

Selesai deh mendaftar blog di Technorati


Baca Juga

Cara Membuat Mesin Pencari Google Custom Search

Cara Membuat Blog Versi Mobile Di Blogspot

Kemajuan Teknologi yang begitu pesat, sekarang pengguna Ponsel saja bisa mengakses internet dengan mudah. Seperti saya ini juga sering menggunakan Ponsel dari pada browsing dengan komputer, soalnya lebih praktis.

Karena begitu banyak orang yang menggunakan Ponsel untuk mengakses internet maka kita juga harus sedikit menyesuaikan, tidak ada salahnyakan kita membuat Blog/Web kita menjadi versi Mobile, agar pengunjung blog kita yang menggunakan ponsel nyaman mengunjungi blog kita karena berat blog menjadi ringan dan tampilan rapi.

Akan tetapi untuk Blogspot sendiri belum bisa kayaknya , harus menggunakan aplikasi pihak ke tiga seperti bloggertouch atau Mippin ! Tidak seperti wordpress yang sudah ada Pluginnya sendiri ( Cara membuat Blog versi Mobile di Wordpress )

Apakah kamu ingin mencoba Membuat blog kamu menjadi versi Mobile ?

Saya beri contoh untuk membuat blog versi mobile di Bloggertouch.

Berikut Cara Membuat Blog Versi Mobile di Blogspot

Silahkan kunjungi http://bloggertouch.sopili.net/

Kemudian Sign in dengan akun Google kamu

Klik Mobile Edition Maker: create mobile edition/view



Isikan Nama blog kamu, Kemudian klik Go

Akan muncul seperti gambar di bawah ini



Isikan nama di kolom yang sudah di sediakan, lanjut klik Next

Setelah itu akan masuk ke tahap penambahan gadget di blog



Klik aja AddCode nanti akan di bimbing untuk menambahkan Gadget di blog

Pilih blog yang akan di jadikan versi mobile

Jika sudah selesai memasang gadgetnya, kembali lagi Step 2: Insert Code into the sidebar

Kemudian klik Next

Satu langkah lagi ke Step 3: Verification



Klik Next dan tunggu sebentar. jika sudah akan muncul seperti gambar di bawah ini



Selesai deh.

Secara otomatis jika blog kamu di akses menggunakan ponsel akan berubah ke versi mobile.
Contohnya seperti di bawah ini



Coba lihat Blog kamu dalam versi mobile. Bagus tidak ya .. ?


Baca juga : Tips Mengatasi Spam Email

Ngeblog di Wordpress Makin Asyik di Ponsel

Kemajuan teknologi yang begitu pesat membuat kita semakin di mudahkan dalam melakukan sesuatu hal. Ngeblog pun sekarang dapat dilakukanhanya dengan menggunakan perangkat mobile seperti ponsel.

Seperti yang di lakukan Platform Wordpress , yang telah merilis secara resmi aplikasi Wordpress untuk ponsel Nokia. Aplikasi tersebut dapat di akses melalui OVI Store ( toko aplikasi mobile virtual milik Nokia )

Versi ini masih belum bisa bekerja di atas ponsel-ponsel versi Symbian^3, seperti Nokia C7, C6, dan N8. Aplikasi Ini bisa berjalan di perangkat handset Nokia N97 Mini, dan Nokia X6.

Ngomong-ngomong soal Blog Mobile, neh ada sedikit tips Membuat Blog/Web Versi Mobile di wordpress

Untuk Wordpress sendiri memang sudah menyediakan Plugin untuk versi Mobile, Silahkan download dulu di

http://downloads.wordpress.org/plugin/mobilepress.1.1.4.zip

Kemudian Upload file tersebut ke Wp-content/plugins

pastikan plugin sudah terupload dengan benar.

Langkah selanjutnya Masuk ke http://URL blog wordpress kamu/wp-admin/plugins.php?plugin_status=inactive

Silahkan cari Plugin Mobilepress yang baru di Upload dan aktifkan

Jika sudah di aktifkan, coba masuk http://Url blog wordpress kamu/wp-admin/admin.php?page=mobilepress

Silahkan isi Judul Blog pada kotak Blog title, juga Blog deskription dengan Tagline blog pada kotak yang sudah di sediakan.

Biarkan kotak Mobile Themes Directory terisikan oleh kata mobile-themes.

Setting Force Mobile Site pada posisi No

Kemudian Coba buka lewat ponsel kamu http://Url blog wordpress kamu/?mobile

Sudah berhasilkah ?


Baca juga : Cara Membuat Mesin Pencari Google Custom Search

Cara Membuat Mesin Pencari Google Custom Search

Untuk memudahkan pengunjung dalam mencari artikel di blog kita, sudah selanyaknya kita pasang mesin pencari di blog kita. Banyak widget mesin pencari yang dapat ditambahkan, seperti fitur tambah gadget di blogger sudah menyediakan. Tapi kali ini mencoba cara lain dengan membuat mesin pencari sendiri di Google Custom Search. Selain mudah membuatnya, fitur ini juga mempunyai banyak keunggulan.



Berikut cara membuat mesin pencari google custom search

Pertama masuk ke Google Custom Search di sini

Kemudian klik tulisan Buat Mesin Telusur Ubah Suaian



Isi formulir yang telah di sediakan



Nama : Isi dengan nama yang di inginkan

Deskripsi : Tulis sedikit gambaran mesin telusur kamu

Bahasa : Pilih bahasa yang kamu inginkan

Situs yang akan ditelusuri : Isi dengan situs yang ingin kamu telusuri
Contoh : seperti punya saya di isi dengan http://www.poetra-anoegrah.co.cc ( kamu bisa menambahkan lebih dari satu URL )

Edisi : Pilih Edisi Standart ( biasanya sudah tercentang )

Centang kotak kecil persyaratan.

Klik tombol Lanjut/Next

Pilih tampilan yang kamu inginkan



Kamu bisa mengedit tampilan sesuai selera kamu ( klik ubahsuaikan/customise )

Jika sudah Klik Lanjut

Dapatkan Kode : Ambil kode yang diberikan dan pasang di Web kamu.




Nb : Kamu Masih bisa mengoptimalkan lagi mesin pencari kamu.

Seperti menambahkan kata kunci, menambah URL yang ingin di indek, membuat peta situs dan lain-lain..

seperti gambar di bawah ini.



Silahkan di edit sendiri ya ..


Baca juga : Tips dan Strategi Membangun Backlink

Title " Target " Pada Link Judul Postingan

Masih seputar Menambah Title pada link judul postingan , kali ini mencoba membuat variasi lain dengan target Keyword.

Contohnya seperti pada gambar berikut :



Di situ terlihat target keyword yang saya bidik adalah Blog Info.

Kamu mau mencoba ? Berikut cara memasang Title " Target " Pada Link Judul Postingan

Masuk ke blog kamu

Klik Rancangan kemudian Edit Html terus centang kotak kecil Expand Template widget

Cari kode dibawah ini

<a expr:href='data:post.link'><data:post.title/></a>

Hapus dan ganti dengan kode ini

<a expr:href='data:post.link' expr:title='&quot;Blog Info : &quot; + data:post.title'><data:post.title/></a>

Kemudian cari kode berikut

<a expr:href='data:post.url'><data:post.title/></a>

Hapus dan ganti dengan kode ini

<a expr:href='data:post.url' expr:title='&quot;Blog Info : &quot; + data:post.title'><data:post.title/></a>

Simpan template.

Silahkan ganti keyword Blog info yang berwarna merah dengan keyword yang kamu inginkan.



Baca juga : Menjadi blogger yang bahagia

Link keluar Tulisan - Title pada Link Judul Postingan

Menambahkan Title pada link judul postingan, menurut para Master merupakan teknik kecil penunjang SEO. Sebagai contoh agar tidak bingung maksud saya, coba lihat gambar di bawah.



Terlihat ketika mouse menyorot link judul postingan akan keluar tulisan.

Teknik diatas sebenarnya bukan teknik yang handal untuk SEO, tapi apa salahnya kalau kita nyoba juga, syukur-syukur bisa tambah bersaing di mesin pencari.

Berikut Blog Info berikan cara tambah title pada link judul postingan

Silahkan masuk ke blog kamu

Klik Rancangan kemudian Edit Html dan klik kotak kecil Expand Template Widget

Cari kode dibawah ini

<a expr:href='data:post.link'><data:post.title/></a>

Silahkan hapus dan ganti dengan kode ini

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Lanjut dengan mencari kode dibawah ini

<a expr:href='data:post.url'><data:post.title/></a>

Hapus dan ganti dengan kode ini

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

Simpan Template


Baca juga : Tips Cepat Mengatasi Google Dance

Cara Membagi Postingan Menjadi 2 kolom

Membagi postingan membagi menjadi 2 kolom ini maksudnya membagi post secara terpisah di kanan dan kiri. Biar tidak bingung coba deh lihat gambar di bawah ini.



Sudah tahukan maksudnya ? jika tertarik ingin mencoba, berikut tutorialnya ..

Silahkan Login ke blog kamu, kemudian menuju area Edit Html

Back up template, buat jaga-jaga jika nanti terjadi kesalahan saat mengedit.

Nah, tinggal cari kode ]]></b:skin> ( gunakan ctrl + f agar mudah mencarinya ) dan copy code berikut ini di bawahnya.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
width:285px;
height:400px;
margin-right:5px;
overflow:hidden;
float:right;
border:3px double #808080;
}
</style>
</b:if>

Lanjut dengan mencari css .post{ contoh css nya seperti ini ( mungkin ada perbedaan dari template kamu )

.post{
background:#fff;
border:3px double #a5a5a5;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.5em 0.5em;
padding:0.5em;
font-family:"Verdana";
text-align:justify}

Jika sudah ketemu, coba perhatikan margin:0.5em 0.5em; kamu tinggal menyisipkan auto pada margin tersebut hingga menjadi seperti di bawah ini.

.post{
background:#fff;
border:3px double #a5a5a5;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.5em auto 0.5em;
padding:0.5em;
font-family:"Verdana";
text-align:justify}

Jika sudah selesai simpan template kamu !

Kalau masih kesulitan kamu bisa ganti Css kamu dengan Css .post{ di atas !

Tutorial di atas saya ambil dari template ini, jadi silahkan edit width, height, border, margin dan lainnya sesuai dengan template kamu.

Semoga bermanfaat dan berhasil kamu coba.

Baca juga : Cara Membuat Widget Hanya Tampil di HomePage Atau Postingan

Cara Membuat Random Post

Berikut cara membuat random post. Lihat demonya di sini

Silahkan kamu loggin ke akun blogger.

Klik Rancangan kemudian Edit Html

Silahkan cari ]]></b:skin>

Copy CSS dibawah ini di atas ]]></b:skin>

.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}

.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

.gfg-subtitle a {color : #a43434;display:none !important;}

.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}

.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}

.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}

.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}

.clearFloat {clear : both;}

#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}

Simpan template kamu.

Masuk kebagian berikutnya dengan memasang script random post.

Silahkan tuju Eleman Halaman

Klik Tambah Gadget ( letakkan di tempat yang kamu inginkan )

Pilih Html Java Script

Silahkan copy paste script berikut ini

<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://namablog.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>

<div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

Simpan

Ganti http://namablog.blogspot.com dengan URL blog kamu.

Untuk mengatur kecepatan slide ganti angka 1000

Baca juga : Cara membuat menu tab view

Pasang Artikel Populer Tanpa Eror

Pasang artikel populer tanpa eror, banyak yang telah mencoba script artikel populer tetapi hasilnya tidak menampilkan artikel popular, jika tampilpun lengkap dengan URl Postingan.

Nah ... Jika kamu mengalami masalah di atas coba deh pasang script artikel populer ini di blog kamu.

<div style="overflow:auto;width:290px;height:150px;padding:10px;border:1px solid #cccccc">
<script language='javascript'>

aBold = false;

numposts=200;

maxshowresult=10;

home_page = "http://poetra-anoegrah.co.cc/";

</script>

<script type='text/javascript'>

//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script>
</div>

Silahkan ganti warna merah dengan Url Blog kamu

Warna biru adalah jumlah artikel yang tampil.

Baca juga : Cara membuat postingan terbaru

Cara membuat Menu Tab View Di Blog

Dengan membuat menu tab view ini, blog kita akan tampil simple karena tidak banyak menyita tempat. tertarik memasang menu ini.

Berikut cara membuat menu tab view di blog

Silahkan masuk ke blogger

Kemudian masuk ke Edit Html

Letakkan kode berikut di atas </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>


Kemudian letakkan kode dibawah ini di atas ]]></b:skin>


div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;

text-align: center;
height: 30px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD;
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif;
font-weight: bold;
color: #000;
-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;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD;
overflow: hidden;
background-color: #E6E6E6;
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Kamu bisa mengatur tinggi, lebar, warna . silahkan di edit.

Simpan template

Masuk ke eleman halaman

tambah gadget pilih Html/java script

copy paste script berikut



<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">

<a>judul 1</a>
<a>judul 2</a>
<a>judul 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>

silahkan kamu atur lebar, tinggi sesuai template blog kamu

Nb :

Warna pink adalah Judul dari menu tab tersebut, silahkan isi judul di situ.

Warna hijau adalah isi dari menu tersebut, kamu bisa isi dengan gambar atau link.

Baca juga : Membuat Menu Navigasi

Cara Memasang Widget Top Komentator Di Blog

Untuk bisa Melihat siapa yang sering berkomentar di blog kamu, kamu bisa memasang widget top komentator di blog kamu.

Berikut Script widget Top Komentator

Silahkan pasang di blog kamu.

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=33e2eb4dc25c7c21b9c586e11d2bc904&url=http%3A%2F%2F
NamaBlogKamu.blogspot.com&num=
10" type="text/javascript"></script>

Silahkan ganti NamaBlogKamu.blogspot.com dengan Url Blog kamu.

Angka 10 menunjukkan banyak komentator yang tampil.

Baca juga Cara membuat komentar terbaru

Cara Membuat Komentar Terbaru/Recent Comments

Agar kamu dapat mengetahui komentar terbaru di blog kamu, maka kamu perlu mamasang Recent comments/Komentar Terbaru di blog kamu. Langkah-langkahnya sama seperti membuat Postingan Terbaru/Recent Post.

Berikut Cara Membuat Komentar Terbaru/Recent Comments :

Silahkan login ke akun blogger kamu

Kemudian Klik Layout >> Eleman Halaman

Klik Tambah Gadget ( pilih tempat sesuai keinginan kamu )

Klik Feed , nanti akan muncul seperti gambar dibawah ini

Masukkan Alamat Feed : http://NamaBlogKamu.blogspot.com/feeds/comments/default

Ganti NamaBlogKamu.blogspot.com dengan URL blog kamu

Klik Lanjutkan

Rubah Judul sesuai keinginan kamu

Jika sudah klik Simpan

Selesai deh..

Cara Membuat Postingan Terbaru Atau Recent Post

Agar pengunjung mengetahui postingan terbaru kamu, makanya wajib untuk memasang widget ini di blog kamu.

Berikut Cara Membuat Postingan Terbaru/Recent Post :

Silahkan login ke akun blogger kamu

Kemudian Klik Layout lanjut ke Eleman Halaman

Klik Tambah Gadget ( pilih tempat sesuai keinginan kamu )



Klik Feed , nanti akan muncul seperti gambar dibawah ini



Masukkan Alamat Feed : http://NamaBlogKamu.blogspot.com/feeds/posts/default

Ganti NamaBlogKamu.blogspot.com dengan URL blog kamu

Klik Lanjutkan



Rubah Judul sesuai keinginan kamu

Jika sudah klik Simpan

Selesai deh..

Baca juga : Cara Memasang Widget Top Komentator

Cara Membuat Artikel Populer Di Blogspot

Artikel populer atau Top post ini menganalisis seberapa populer artikel kamu.
Artikel yang masuk ke list Artikel populer ini di hitung dari banyaknya jumlah komentar yang masuk di setiap artikel kamu.

Berikut Cara Membuat Artikel Populer Di Blogspot

Masuk ke blogger

Silahkan tuju Elemen Halaman

Kemudian Tambah Gadget

Pilih HTML/JavaScript

Silahkan Copy Paste Script dibawah ini

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2FNamaBlogKamu.blogspot.com&num=10" type="text/javascript"></script>
<small>Edited <a href="http://www.poetra-anoegrah.co.cc" target="_blank">Blog Info</a></small>

Silahkan ganti NamaBlogKamu.blogspot.com dengan Url Blog kamu

Angka 10 menunjukkan jumlah artikel yang tampil

Jika sudah Klik Simpan

Selesai ..

Baca juga Cara Membuat Komentar Terbaru/Recent Comments

Cara Membuat Tiga Kolom Di Bawah Header

Masih sama seperti postingan saya sebelumnya yaitu cara membuat dua kolom di bawah header
Kali ini akan membahas cara membuat tiga kolom di bawah header

Masuk ke Akun blogger kamu

Masuk ke Edit Html

kemudian centang expand template widget

Cari kode ]]></b:skin>

Kemudian copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Lanjut dengan mencari kode <div id='main-wrapper'> dan copy kode di bawah ini di atasnya

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Simpan template . .

Cara Membuat Dua Kolom Di Bawah Header

Banyak cara dapat dilakukan untuk mempercantik blog, bisa dengan menambah ini menambah itu dan masih banyak yang lainnya.
Untuk itu kali ini saya coba memberi tutorial untuk menambah dua kolom di bawah header, nanti kamu bisa menambah script html di kolom tersebut .

Mudah kok . . Membut dua kolom di bawah header

Begini :

Masuk ke blogger kamu.

Masuk ke bagian Layout -> Edit Html

Beri tanda centang expand template widget

Kemudian cari kode ]]></b:skin>


Silahkan taruh kode di bawah ini di atas ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}


Kemudian copy kode di bawah ini dan pastekan di atas <div id='main-wrapper'>


<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Simpan . .

Silahkan masuk ke Eleman Halaman untuk melihat hasilnya.

Cara Pasang Meta Tag Alexa

Apakah kamu sudah memasang meta tag alexa ? jika belum, coba deh lihat cara memasang meta tag alexa dan segera pasang ya .. agar blog kita dapat peringkat di alexa. Ini saya posting sebagai pelengkap postingan sebelumnya yaitu Cara Memasang widget Alexa . kelihatannya kurang lengkap jika sudah memasang widget alexa tapi belum verifikasi meta tag alexa.

Berikut caranya :

Silahkan Login ke alexa.
Jika kamu belum mendaftar ada baiknya mendaftar dulu, silahkan menuju Form Pendaftaran Alexa

Silahkan Isi form yang sudah di sediakan, jika sudah di isi klik register

Cek email kamu, untuk mendapatkan password dan informasi login.

Jika sudah login ke alexa silahkan klik For Site Owners

Kemudian klik Claim your site

Nanti akan muncul seperti gambar di atas

Masukkan Url Blog kamu dan klik claim your site

Nanti akan ada dua pilihan, silahkan pilih yang Add this meta tag ...

Copy kode meta tag tadi.

Kemudian masuk ke blogger kamu >> Edit Html

Masukkan kode meta tag di antara kode <head> dan </head>, atau di bawah <b:include data='blog' name='all-head-content'/>

Simpan template

Silahkan kembali ke alexa dan klik Verify My Meta Tag

Selesai deh ...

Membuat Menu Navigasi Di Blog

Untuk membuat menu navigasi di blog berikut caranya :



Silahkan Login ke blogger kamu

Kemudian masuk ke bagian Edit Html

Copy kode dibawah ini dan pastekan diatas </style>

.nav{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.nav:hover{
background:#97A4B9;
text-decoration:none;
}


Simpan template.

Langkah selanjutnya,

Silahkan copy kode dibawah ini, kemudian tuju Edit eleman --> tambahkan eleman halaman pastekan kode tersebut.

Letakkan sesuai yang kamu inginkan.


<a class="nav" href=" http://www.poetra-anoegrah.co.cc/"> Blog Info</a><span class="hide"> | </span>

<a class="nav" href=" http://lensatips.blogspot.com"> Lensa Tips</a><span class="hide"> | </span>

<a class="nav" href=" http://www.poetra-anoegrah.co.cc/2010/03/loading.html"> Daftar posting</a><span class="hide"> | </span>

<a class="nav" href=" http://www.poetra-anoegrah.co.cc/search/label/Tutorial%20Blog"> Tutorial Blog</a><span class="hide"> | </span>

Silahkan ganti yang berwarna merah dengan Url blog yang kamu inginkam dan ganti yang berwarna ungu untuk mengganti judul.

Sekian terima kasih . semoga bermanfaat ..