Tutorial Blog – Jati.id

Cara membuat breadcrumb-navigation pada blogspot

Breadcrumb-navigation bisa membuat template kita lebih seo friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Navigasi ini di kenal dengan nama breadcrumb-navigation.

Tidak hanya itu dengan adanya breadcrumb-navigation maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu kategori. breadcrumb-navigation bisa di pasang pada template blogger dengan sedikit modifikasi templatenya, dengan begitu breadcrumb-navigation akan lebih mudah jika langsung di praktekkan.

Langkah-langkah/ cara memasang Breadcrumb navigation :

1. Login ke blogger.com

2. Klik Tata Letak.

3. Pilih tab Edit HTML

4. Click Download Full Template dan

Backup dulu template blogger sobat.

5. Kemudian beri tanda centang

pada kotak kecil di samping

tulisan Expand Template Widget.

6. Silahkan cari kode ]]></b:skin>

7. Copy lalu paste kode di bawah

ini persis di atas kode ]]></

b:skin>

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double

#e6e4e3;

}

8. Silahkan cari kode berikut pada

template anda :

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class=’post hentry uncustomized-post-template’>

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

<b:else/>

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

Browse » <a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a>

<b:loop values=’data:posts’ var=’post’>

<b:if cond=’data:post.labels’>

<b:loop values=’data:post.labels’ var=’label’>

<b:if cond=’data:label.isLast == "true"’> »

</b:if>

» <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond=’data:blog.pageType == "archive"’>

Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> » Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond=’data:navMessage’>

<data:navMessage/>

</div>

</b:if>

10. Kemudian Save Template.

11. Tunggu beberapa saat sampai

template anda tersimpan. Setelah selesai lihat pada posting anda tepatnya di atas judulartikel untuk menentukan berhasil tidaknya anda memasang breadcrumb-

navigation. Jika berhasil maka breadcrumb-navigation nya akan tampil seperti di atas judul posting ini.

Selamat mencoba..

Sumber: http://www.bacagratis.com/

kode warna html pada blog

Mengenai Meta Tag

INFORMASI YANG ANDA MAKSUDKAN ADA DI
KEBUN JABON
KLIK DISINI

Posisi pertama di google dengan meta taq

Cara Memasang Meta Taq Otomatis Di Blogspot. Salat satu cara optimasi yang sering dilakukan oleh para blogger agar selalu menduduki posisi ke satu (bagi yang ingin menang kontese seo, bisa melakukan cara ini), Salah satu cara adalah dengan memasang meta tag otomatis pada setiap artikel. Sehingga meta tag dan keyword muncul secara otomatis pada setiap artikel yang berbeda. Bagaimana cara memasang dan setinng meta tagsecara otomatis di blogspot ?

Cara Memasang Meta Tag Otomatis Di Blogspot yaitu :

1. Login di Blogger.com
2. Pilih rancangan, kemudian pilih edit HTML
3. Centang Expand Template Widget
4. Cari kode script di bawah ini :

5. Setelah ketemu, ganti script di atas dengan script di bawah ini :

<b:if cond=’data:blog.url == "http://Intuisiblog.com/"’>
<title><data:blog.pageTitle/></title>
<meta name=’DESCRIPTION’ content=’Deskripsi Blog’/>
<meta name=’KEYWORDS’ content=’Keyword Blog’/> </b:if>
<b:if cond=’data:blog.pageType == "item"’>
<title><data:blog.pageName/> – <data:blog.title/></title>
<meta expr:content=’data:blog.pageName + “, ” + data:blog.title + “, ” + data:blog.pageName’ name=’Description’/>
<meta expr:content=’data:blog.pageName + “, ” + data:blog.title + “, ” + data:blog.pageName’ name=’Keywords’/>
</b:if>

6. Klik Save, selesai.

Demikian Cara Memasang Meta Tag Otomatis Di Blogspot, semoga bermanfaat.

Sumber: http://intuisiblog.com

Cara Menaikkan Traffic Secara Ajaib Dengan BlogClicker.

Bagi teman2 blogger pemula seperti saya yg ingin meningkatkan traffic ke blog-nya, dapat menggunakan sarana BlogClicker.

Apakah yg dimaksud dengan BlogClicker itu? BlogClicker adalah Penyedia jasa layanan tukar traffic bagi situs-situs blog dan difokuskan untuk mendatangkan kunjungan bagi blog Anda. Anda telah menghabiskan waktu untuk bikin blog, maka biarlah BlogClicker yg mendatangkan pembacanya!!

Bagaimana cara kerja BlogClicker? Sangat sederhana. Anda cukup mengklik blog member dari BlogClicker dan member yang Anda lihat akan mengklik balik blog Anda. BlogClicker juga menawarkan upgrade keanggotaan dan paket credit yang akan memberi Anda hingga credit dengan rasio perbandingan 1:1,5 (Anda beli 10 credit, Anda akan dapat 15 klik atau kunjungan blog).

Cukup ketik nama dan email Anda saja. Setelah registrasi / pendaftaran sukses, Anda akan mendapatkan email username dan password, gunakan itu dan masuk ke akun Anda di BlogClicker. Lalu klik Manage Blog.

Masukan URL atau alamat weblog atau URL postingan Anda yg ingin Anda perbanyak trafficnya.

Pada samping kanan klik gambar lampu untuk mengaktifkan bahwa LINK/URL Anda siap mendapatkan UPDATE.

Beralihlah ke bagian BLOG BAR untuk melakukan surfing. BLOG BAR akan muncul ketika Anda meng-klik “http://blogclicker.com/start.php” yg ada di bawah “Surf Member Blogs“. Setiap kali Anda surfing, maka Anda akan mendapatkan CREDIT yg nantinya dapat Anda tambahkan sebagai sebuah kunjungan ke blog Anda.

Perhatikan timer di sebelah angka 8, tunggu timer hingga muncul tulisan GO, lalu klik angka yg disediakan di sebelah kiri (berderet warna-warni dari 1 hingga 8)

Klik angka tersebut sesuai dengan angka pada grid (kotak-kotak) putih.

Makin banyak Anda melakukan surfing, makin banyak credit yg Anda peroleh. Tambahkan credit ke link URL Anda seperti ini :

Tunggu apalagi! Perbanyak traffic/kunjungan blog Anda sekarang juga, GRATIS !!! Lalu saksikan traffic/kunjungan blog Anda meningkat. Jika Anda referensikan kepada teman-teman Anda, maka setiap prosentasi dari setiap CREDIT yang teman2 Anda peroleh, Anda akan mendapatkannya 5 kali lipat.

Klik di sini untuk daftar/bikin akun !!!

Keterangan :

* Sebaiknya, kalo qta punya beberapa blog, bila setting :Automate Blog Credits is ON, maka semua credit akan dibagi rata ke semua blog. Bila OFF, maka qta dapat menyetel credit yg berbeda utk setiap blog yg qta daftarkan.
* Lakukanlah surfing di Windows yg terpisah dengan Blog Manager-nya, lalu setelah beberapa kali surfing, refresh-lah Blog Manager ini, spy qta tahu berapa total traffic terakhir yg masuk.
* Bila masih perlu penjelasan, bacalah juga FAQ-nya >> Klik di sini ...
* Okelah, kalaw begituw, semoga sukses… biar yg begadangan gak dpt traffic, sdh bisa tidur nyenyak sekarang… wehehe… Btw, bwt teman2 yg biasa melakukan Autosurfing di PTC, ini caranya mirip bangettsss… jadi gak ad masalah dweeechh… passsstiiiinyaaaaa….
* O iyaaaa… ampir luppaaa… klo teman2 dapet 1 downline, maka teman2 dpt tambahan 100 kredit dr BlogClicker… Btw, ini berlaku hanya dlm jangka waktu yang singkat looohhh … makanyaaaaa… segera dipromosikan ke teman2 yg lain, spy traffic-nya naik lebih cepat lageeee.

Sumber:

http://www.cukuhnau.co.cc/

Menaikkan Traffic Dengan Memasang Button Tweetmeme atau facebook

Banyak Cara Yang dilakukan para blogger untuk mendapatkan traffic yang tinggi , nah dari segala banyak cara itu, dan salah satu caranya yang cukup unik dan Tidak Repot, yaitu Hanya dengan Memasang Button Tweetme , pokoknya gak jauh dari Jejaring Sosial Twitter!!!

Biasanya Jika anda ingin berbagi artikel melalui twitter sendiri, Tentunya hasilnya tidak akan memuaskan, Tapi tidak masalah kalo list friend di Twitter kita sudah mencapai ribuan follower, tapi kalo cuman 50-100 seperti saya ini, sepertinya tidak terlalu efektif. Nah, dari pada capek tiap hari mem-follow orang2 yang gak jelas dan sulit untuk dipahami bentuk mukanya, hhhee, apalagi tujuan utama hanya kesedar memperbanyak teman, alangkah baiknya kita meminta bantuan pembaca setia kita sendiri untuk membagikan link artikel kita di twitter mereka masing2. Makanya dipasanglah sebuah button dari Tweetmeme.

Untuk memasang button Tweetmeme ini sangat mudah, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget. Kalo sudah, cari kode yang warna Biru dan letakan kode button warna Hijau tepat dibawahnya.

<div class=’post-header-line-1’/>

<div style=’float:right; margin-left:10px;’>
<script type=’text/javascript’>
tweetmeme_url = '<data:post.url/>'
</script>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’> </script>
</div>

Kalau yang di letakkan kode dibawah ini untuk facebook,letakkan dibawah kode

<b:if cond=’data:post.url’>
<a expr:href=’"http://www.facebook.com/share.php?u=" + data:post.url’><img alt=’isi sesuka anda’ border=’0′ src=’http://img32.imageshack.us/img32/5742/sharefacebook.jpg’/></a>
</b:if>

Note :, Tweetmeme memiliki nilai counter tersendiri untuk menilai seberapa banyak link kita yang telah dibagikan oleh pembaca. kita dapat melihat nilai tersebut langsung pada buttonnya.

Nah Cukup sekian Trik kali ini yang saya dapatkan dari mas o-om
semoga bermanfaat Buat anda!!

Sumber:

Cara Membuat Widget Artikel Terbaru Bergambar

Widget Recent post dipasang sebagai informasi mengenai artikel atau posting terbaru dari suatu blog. Untuk memasangwidget ini biasanya dengan menambahkan gadget baru lalu pilih gadget feed, setelah itu masukkan alamat feed blog. Tetapi dengan cara ini hanya bisa menampilkan 5 artikel terbaru tidak bisa lebih, dan hanya menampilkan judulnya saja.

Nah agar tampilan widget lebih menarik dan cantik, ada widget buatan bloggertricksyang menampilkan recent post dengan gambar thumbnails dan hebatnya lg widget ini bisa menampilkan banyak artikel terbaru(tidak hanya 5) sekaligus.

Selain dengan preview gambar dan judul ditambah lg dengan jumlah komentar dibelakang judul artikel.Yang mau pasang ikuti langkah berikut:

1. Buka blogger.com untuk login ke dasbor
2. Pilih Layout/tata letak
3. Tambah sebuah gadget baru, pilih widgetHTML/Javascript
4. Masukkan script berikut:

imgr = new Array();

imgr[0] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[1] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[2] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[3] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[4] = “http://i43.tinypic.com/orpg0m.jpg”;
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = “#ffffff”;

bgTD = “#000000”;

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = “#666”;

aBold = true;

icon = ” “;

text = “comments”;

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = “#666”;

icon2 = ” “;

numposts = 5;

home_page = “http://opelangi.blogspot.com/”;

</script>

Keterangan :

Boxwidth = Tentukan lebar widget

Cellspacing = Jarak antar judul artikel
BorderColor = Garis tepi widget
thumbwidth = Lebar gambar
thumbheight = Tinggi gambar
fntsize = ukuran font judul
homepage = Ganti dengan alamat blog anda
dll

5. Simpan widget, dan lihat hasilnya.

Sumber:http://opelangi.blogspot.com/

Membuat artikel terkait di sidebar

Menampilkan Artikel Terkait atau Related Post sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.

Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.

Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).

Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,

3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == ‘alternate’) {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;

}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length – 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length – 1] = relatedTitles[i];

}

relatedTitles = tmp2;

relatedUrls = tmp;

}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length – 1) * Math.random());

var i = 0;

document.write(‘<ul>’);

while (i < relatedTitles.length && i < 20) {

document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);

if (r < relatedTitles.length – 1) {

r++;

} else {

r = 0;

}

i++;

}

document.write(‘</ul>’);

}

//]]>

</script>

4. Lanjutkan dengan mencari kode berikut:

<b:if cond=’data:post.labels’>

<data:postLabelsLabel/>

<b:loop values=’data:post.labels’ var=’label’>

</b:loop>

</b:if>

5. Ganti kode tersebut dengan kode di bawah ini:

<b:if cond=’data:post.labels’><data:postLabelsLabel/>

<b:loop values=’data:post.labels’ var=’label’>

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

</b:if>

</b:loop>

</b:if>

Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.

6. Save Templates (belum selesai…)

7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

8.Lalu masukkan kode berikut ini di gadget Anda.

removeRelatedDuplicates();

printRelatedLabels();

</script>

8. Jika sudah klik Save dan lihat semua perubahannya.

Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba.

Sumber: http://www.uttafreak-987.co.cc/

Membuat artikel terkait bergambar tidak berjalan

Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita.

Cara Membuat Artikel Terkait dengan Disertai Thumbnails

1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Tata Letak.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode </head>

6. Taruh (copy paste) kode berikut ini di atasnya

<!–Related Posts with thumbnails Scripts and Styles Start–>
<b:if cond=’data:blog.pageType == "item"’>
<style type=”text/css”>
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,“ Times New Roman” ,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script src=’http://blogergadgets.googlecode.com/files/relatedthumbs21.js’ type=’text/javascript’/>
</b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>

7. Lalu cari kode di bawah ini

Atau jika tidak menemukannya cari kode berikut ini

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.

Keterangan.

Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=5; –> Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle=”Related Posts”; –> Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai.

Sumber:http://www.uttafreak-987.co.cc/

Membuat Artikel Terkait Bergambar Berjalan

Sebenaranya denganjudul yang kayak diatas itu binggung gak? 😀 Ingin membuat tulisan yang terkait atau artikel terkait yang ada gambar (thumbnail). Jika yang biasanya hanya judul yang terkait dengan yang kita buka (baca) tapi kali ini kita akan membuat tulisan terkait dengan diseratai thumbnail yang ada di postingan yang terkait dengan tulisan (artikel) yang kita baca.

Artikel terkait yang disertai thumbnail (gambar kecil) tidak hanya diam, tetapi berjalan kesamping, menampilkan thumbnail disertai dengan judul tulisan (artikel). Thumbnail Related Posts (artikel terkait bergambar) ini akan menghemat banyak temaptdi blog kita, ya memang karena artikel terkait bergambarnya dibuat berjalan sehingga kita juga bisa membuat lebih banyak artikel terkait bergambar yang ditampilkan.

Cara Membuat Artikel Terkait Bergambar Berjalan

1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Rancangan.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode </head>

6. Taruh (copy paste) kode berikut ini di atasnya

<!–Related Posts with thumbnails Scripts and Styles Start–>

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

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

</b:if>

<!–Related Posts with thumbnails Scripts and Styles End–>

7. Cari kode di bawah ini

Atau jika tidak menemukannya cari kode berikut ini

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

<!– Marquee Serbablog Related Posts with Thumbnails Code Start–>

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

<b:loop values=’data:post.labels’ var=’label’>

<b:if cond=’data:label.isLast != "true"’>

</b:if>

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

<h3><b>Related Posts</b></h3>

var currentposturl="<data:post.url/>";

var maxresults=10;

var relatedpoststitle="";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

</div><div style=’clear:both’/>

</b:if>

<b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>

<a href=’http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html’ style=’display:none;’>Thumbnail Related Post</a>

<a href=’http://www.bloggerplugins.org/’ style=’display:none;’>blogger tutorials</a>

</b:if>

<!– Marquee Serbablog Related Posts with Thumbnails Code End–>

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=10;

Berarti artikel terkait yang akan kita tampilkan adalah 10

var relatedpoststitle=”Thumbnail Related Post”;

Judulnya adalah Thumbnail Related Post

Sumber: http://ikhwan-eleanor-schatzi.blogspot.com/