Cara Membuat Widget Popular Post Warna Warni Di Blog

Widget popular post merupakan widget yang sangat penting bagi blog kita,widget yang satu ini berfungsi untuk mendongkrak pageviews atau memperbanyak klik per halaman oleh para pengunjung karena mereka akan penasaran "apa sih yang populer di blog ini?" jadi mereka akan melihat popular poast yang ada di dalam blog anda.Dan pada kesempatan kali ini saya akan membahas tentang Cara Membuat Widget Popular Post Warna Warni Di Blog.

Sebenarnya banyak model yang dapat kita gunakan untuk diterapkan di widget popular post,namun saya lebih suka dengan widget yang satu ini karena selain SEO Friendly widget yang warna warni ini juga dapat mempercantik tampilan Popular Post blog anda degan keanekaragaman warna yang digunakan,anda dapat merubah warna widget tersebut sesenang hati anda.

Pada tutorial yang akan saya berikan kali ini terdapat 2 versi widget popular post warna warni,Jika Versi 1 akan terlihat pada bagian sudut terlihat lebih melengkung dan rata antara 1 post dengan post lain,sedangkan untuk yang Versi 2 terlihat sangat berbeda dengan versi 1,perbedaan yang ditunjukan adalah jika Versi 2 tidak terlihat lengkungan di bagian sudut dan adanya efek hover,jadi gambar post akan berputar jika disentuh.

Dan berikut adalah perbedaaan antara versi 1 dan versi 2 melalui gambar berikut

Bagi anda yang berminat memasang widget popular post dengan model warna warni,silahkan ikuti cara berikut :

1.Login ke blogger
2.Klik tata letak
3.Tambahkan widget baru
4.Carilah entri populer dan tambahkan

5.Kemudian silahkan anda isi datanya sesuai selera anda

6.Jika sudah klik Simpan
7.Kemudian klik tab Template dan klik Edit HTML
8.Carilah kode ]]></b:skin>
9.Letakan kode berikut tepat di atas kode ]]></b:skin>

Jika anda ingin memasang yang versi 1 gunakan script atau kode yang ini

/*Rainbow Popular Post by http://belajarweb.blogspot.com/*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/* Rainbow Popular Post by http://belajarweb.blogspot.com//

Dan jika anda ingin memasang yang versi ke 2 silahkan gunakan kode berikut

 /* Rainbow Popular repost by  http://belajarweb.blogspot.com/*/#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular repost by http://belajarweb.blogspot.com/*/

10.Jika sudah, klik Simpan
11.Selesai,silahkan anda cek di blog anda


Sekian ulasan yang dapat saya sampaikan,semoga tutorial ini sangat berguna bagi anda dan terima kasih sudah memaca ulasan saya pada kesempatan kali ini.

Source

»»  read more

Memasang Google Maps di Website atau Blog

Untuk meningkatkan kredibilitas website, kita dapat meletakkan peta kantor kita. Kita dapat membuat sendiri peta, atau memakai Google Maps. Keuntungan memakai Google Maps adalah sifatnya yang interaktif. Pengunjung dapat memperbesar maupun memperbesar peta untuk melihat lokasi tempat secara tepat. Berikut akan disajikan langkah-langkap memasang Google Maps untuk membuat peta lokasi di website

1. Masuk ke http://maps.google.com
   Browse hingga lokasi kantor anda bisa dilihat dengan jelas
   
   Untuk memperkecil(zoom out), tarik slider ke arah -, untuk memperbesar tarik slider ke arah +
   
2. Setelah itu klik tombol Link
   Masukkan source yang ditunjukkan ke dalam website kita
   
   Anda bisa minta bantuan web developer anda untuk memasukkan source code ini.

Sebagai contoh bisa dilihat di www.prowebpro.com/contact/.
Untuk memasukkan perusahaan anda di Google Maps, anda bisa daftar, kemudian menandai di peta. Untuk menandai di peta, ada suatu kode verifikasi yang akan dikirim melalui SMS ke hp yang telah didaftarkan. Jadi persiapkan juga sebuah HP GSM untuk menerima kode verifikasi ini.



sumber :  www.prowebpro.com

»»  read more

Kode HTML IFRAME Untuk Menampilkan Isi Halaman Website Lain

Apasih Iframe itu? iframe  adalah merupakan salah satu kode HTML yang berfungsi untuk dapat menampilkan isi halaman dari web ataupun blog lain pada blog atau web yang kita pasang Kode Iframe | <iframe> tersebut. cara pemasangannya sangat begitu sederhana. anda hanya perlu kode dibawah ini :

<iframe src="http://Url-halaman-yang-ingin-ditampilkan.com/halaman.html" border="0" framspacing="0" marginheight="0" marginwidth="0" vspace="0" hspace="0" frameborder="0" height="100%" scrolling="yes" width="100%"></iframe>

Keterangan :
Height = tinggi : Berfungsi Untuk Mengatur tinggi IFRAME dalam pixel atau persen
Frameborder =  garis pembatas : Berfungsi untuk memberi garis pembatas
Scrolling = auto/yes/no : Berfungsi untuk memberi atau tidak memberi scrolling pada iframe
Iframe SRC = url yg ingin di tampilkan  : Berfungsi untuk mencari halaman sumber yang ingin di tampilkan pada iframe.

Width = lebar : Berfungsi Untuk Mengatur lebar IFRAME dalam pixel atau persen

Contoh bisa dilihat disini : http://wwdq.blogspot.com/2011/04/kode-html-iframe-untuk-menampilkan-isi.html

»»  read more

Cara Menambahkan Komentar Facebook Kedalam Blogger

Silahkan buat aplikasi id di facebook anda di https://developers.facebook.com/

1. create new app
2. isi data dan submit
3. sukses, anda akan mendapatkan app id

Pertama-tama Blogger > Template > Edit HTML
Kemudian cari kode  <html dan beri spaci satu kali paste kode dibawah ini tepat di sampingnya

xmlns:og='http://ogp.me/ns#'

sekarang cari kode <body> tepat dibawahnya paste kode berikut

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

ganti YOUR_APP_ID dengan Id aplikasi facebook anda
sekarang cari </head> tepat diatasnya paste kode berikut

<meta property="fb:app_id" content="YOUR_APP_ID" />

ganti YOUR_APP_ID dengan Id aplikasi facebook anda
Sekarang cari kode  <b:includable id='comment-form' var='post'> tepat setelah kode ini paste kode berikut

<b:if
cond='data:blog.pageType == "item"'>
<div
style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
<script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'
/>
<div>
<fb:comments
colorscheme='light'
expr:href='data:post.url'
expr:title='data:post.title'
expr:xid='data:post.id'
width='550'
/>
</div>
</div>
</b:if>

sekarang klik Save Template dan anda bisa mengeceknya    ----> Sudah di test di template ini dan template custom hasilnya SUKSES

»»  read more

Mengambil Artikel Blogger Dengan Cepat Tanpa Copy Paste

Bagi yang penasaran cara Mengambil Artikel Blogger Dengan Cepat Tanpa Copy Paste ini dia caranya :

1. Cari blog sasaran yang akan anda ambil artikelnya, misal sembarang.blogspot.com

2. Kemudian kamu tambah dengan url --> atom.xml?redirect=false&start-index=1&max-results=300

dan akhirnya jadi seperti ini --> sembarang.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=300

untuk url atom coba diperhatikan : atom.xml?redirect=false&start-index=1&max-results=300

artinya artikel yang akan di ambil mulai dari 1 (satu) sampai 300 konten artikel. angka satu menunjukan konten artikel terbaru yang diposting diblogger.

Kalau sudah mengerti akan saya lanjutkan pembahasannya.

selanjutnya, kita download atom.xml menggunakan download manager

add link download --> kemudian kita masukan link ini : sembarang.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=300

http://mediablogseo.blogspot.com/2012/04/blogger-hack-mengambil-artikel-dari.html

»»  read more

Kode-kode mouse over html

anbu-files.blogspot.com - Kode-kode mouse over html - berikut ini adalah contoh kode-kode html untuk efek mouse over :

<p style="text-align: center;"><a href="platinum-forum.html"><img src="images/stories/demo/platinum_forum.png" border="0" onmouseover="this.src='images/stories/demo/platinum_forum_white.jpg';" onmouseout="this.src='images/stories/demo/platinum_forum.png';" style="border: 0pt none;" /></a></p>


<p style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=49&amp;Itemid=56"><img src="images/stories/menu1.jpg" onmouseover="this.src='images/stories/hover-facial.jpg';" onmouseout="this.src='images/stories/menu1.jpg';" style="border: 0pt none;" border="0" /></a>
</p>
<p style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=50&amp;Itemid=57"><img src="images/stories/menu2.jpg" onmouseover="this.src='images/stories/hover-facial.jpg';" onmouseout="this.src='images/stories/menu2.jpg';" style="border: 0pt none;" border="0" /></a>
</p>
<p style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=51&amp;Itemid=58"><img src="images/stories/menu3.jpg" onmouseover="this.src='images/stories/hover-facial.jpg';" onmouseout="this.src='images/stories/menu3.jpg';" style="border: 0pt none;" border="0" /></a>
</p>


<p style="text-align: center;"><a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=34&amp;Itemid=56"><img src="/images/stories/catering.jpg" border="0" width="420" height="111" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" /></a> <a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=35&amp;Itemid=56"><img src="/images/stories/wedding.jpg" border="0" width="421" height="111" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" /></a></p>

»»  read more

Memasang iklan di Post bagian kiri atau kanan

anbu-files.blogspot.com-Memasang iklan di Post bagian kiri atau kanan-Salah satu cara untuk meningkatkan jumlah klik iklan adalah menyamarkan tampilan iklan agar seolah-olah menyatu dengan konten atau artikel postingan.

Seperti contoh letak iklan pada gambar, adalah salah satu cara menyamarkan iklan baik iklan google adsense atau iklan sejenis agar terlihat menyatu dengan konten postingan blog.

Untuk menampilkan iklan seperti itu pada blogger/blogspot adalah :
1. Pada akun blogger anda pilih menu design/rancangan, kemudian pilih Edit HTML dan centang pada Expand Widget Templates. Sebaiknya anda memback-up template anda untuk berjaga-jaga jika terjadi masalah.

2. Cari kode <data:post.body/> , jika anda menggunakan fungsi auto readmore,maka pilihlah kode tersebut yang kedua ( untuk tampilan fullpost)

3. Tambahkan kode dibawah ini sebelum kode <data:post.body/>

<div style='padding-left:4px; margin-top:1px;float:left;'>
TARUH SCRIPT IKLAN / ADSENSE ANDA DISINI
</div>

Anda tinggal mengganti left dengan right jika anda ingin iklan tampil pada kanan postingan. Anda juga bisa mengganti script iklan dengan meletakkan kode gambar / banner sesuai keinginan anda.

Semoga bermanfaat.

Sumber: http://sumbertips.blogspot.com/2011/04/memasang-iklan-di-dalam-posting-sebelah.html

»»  read more

Membuat Random ads menggunakan JQUERY

anbu-files.blogspot.com-Membuat Random ads menggunakan JQUERY- Katakanlah bahwa Anda memiliki banyak iklan di situs web Anda dan Anda ingin memastikan bahwa beberapa iklan tidak muncul lebih sering dari yang lain. Nah, inilah kode jQuery bagus yang akan membiarkan Anda menampilkan mereka secara acak.

shuffleAds: function(arr)
{
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}

Meskipun saya belum mencoba belum sendiri, kode ini juga dapat digunakan untuk menunjukkan artikel acak untuk pembaca. Kenapa blog Anda yang akan Anda ingin menampilkan posting secara acak? hal itu dikarenakan, supaya pembaca Anda tahu bahwa situs Anda tidak terbatas hanya pada satu tema atau niche tertentu.

Atau mungkin Anda ingin menggunakan jQuery plugin ini  Shuffle (dari jsfromhell.com):

.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.shuffle(items)) : this;
});
}
$.shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
})(jQuery);


berikut contoh kode untuk random ads :

//Function to display ads on the jQuery Blog and shuffle
(function($)
{
var displayAds = {
ads: {
1: {
title: “jQuery UI Widgets for PC, Mobile and Touch devices”,
href: “http://www.jqwidgets.com”,
img: “jqwidgets.png”
},
2: {
title: “jQuery Chop Slider 2.0 – The most eye catching image slider on the internet!”,
href: “http://www.idangero.us/cs/”,
img: “idangerous.jpg”
},
3: {
title: “Sauce Labs – Online Cross Browser Testing”,
href: “http://www.saucelabs.com/scouthome?utm_source=banner&utm_medium=flat&utm_campaign=all+all+banner+jquery4u”,
img: “sauce-labs.jpg”
},
4: {
title: “Diamond Slider – Ken Burns Effect & Unlimited Transitions”,
href: “http://www.diamond.billykids-lab.net/”,
img: “diamond-slider.jpg”
},
5: {
title: “AJAX Zoom – jQuery Dynamic 2d/360 Degrees Zoom with ipad support.”,
href: “http://www.ajax-zoom.com”,
img: “ajax-zoom.jpg”
}
},
signupAd: {
title: “Advertise here”,
href: “http://www.jquery4u.com/advertise/”
},
shuffleAds: function(arr)
{
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
},
load: function()
{
$(‘#shuffle-ads’).hide();
var adContainer = $(‘#jq4u-sidebar-ads’).empty(), adsArray = Array();
/* construct ads */
$.each(this.ads, function(i,v)
{
adsArray.push(‘

‘);
});
/* shuffle ads in random order */
adsArray = this.shuffleAds(adsArray);
/* output ads */
$.each(adsArray, function(i,v)
{
adContainer.append(v);
});
/* add the signup ad */
adContainer.append(‘

‘ + this.signupAd.title + ‘

‘);
/* show shuffle button */
adContainer.append(‘Shuffle‘);
$(‘#shuffle-ads’).live(‘click’, function(e)
{
e.preventDefault();
displayAds.load();
});
$(‘#shuffle-ads’).show();
}
}
$(document).ready(function() {
displayAds.load();
});
})(jQuery);

 Semoga tutorial ini bisa sedikit membantu anda

»»  read more

Tutorial membuat gambar untuk background website

anbu-files.blogspot.com-Tutorial membuat gambar untuk background website- dalam beberapa kerjaan saya dalam web design saya menemukan beberapa hal yang membuat saya harus sedikit bertanya-tanya ke beberapa kawan saya , salah satunya adalah membuat gambar untuk background website.
walaupun sederhana tetapi ini bisa membantu saya dalam mengatasi masalah saya dulu pada saat saya masih belum bisa mendesign sebuah website. semoga sedikit kutipan tutorial ini bisa membantu anda yang sedang belajar dalam mendesign sebuah situs.

Berikut adalah tutorial singkat bagiamana membuat gambar untuk background website anda :

masukkan pada tag script body pada skrip html seperti berikut
<body style=”background:url(images/imagescontoh.jpg); background-attachment:fixed“></body>
atau pada style cssnya caranya sperti berikut:
<style type=”text/css”>
body {
background:url(images/imagescontoh.jpg); background-attachment:fixed
}
</style>

semoga dapat membantu

»»  read more

Membuat Related Post dengan Tumbnail Dibawah Post Artikel

Membuat Related Post dengan Tumbnail Dibawah Post Artikel - Anbu-Files.Blogspot.Com -  mungkin anda sudah tidak asing lagi dengan artikel yang mebahas tentang Membuat Related Post dengan Tumbnail Dibawah Post Artikel . disini saya akan membahasnya lagi di salah satu postingan ini.


seperti gambar dibawah ini adalah bentuk dari Related Post dengan Tumbnail Dibawah Post Artikel
sebenarnya untuk Membuat Related Post dengan Tumbnail Dibawah Post Artikel tidaklah sulit, hanya saja anda butuh script yang benar dan dipasang dengan benar pula, karena ada beberapa script tentang Membuat Related Post dengan Tumbnail tidak berjalan dengan semestinya, sesuai dengan pengalaman saya kemarin-kemarin yang gagal dalam membuat Membuat Related Post dengan Tumbnail , gara-gara script yang saya pasang tidak bekerja.
anda bisa lihat contoh hasil Membuat Related Post dengan Tumbnail di beberapa blog yang sudah berhasil terpasang dengan benar berikut ini :

• Media Pembelajaran Sekolah


• Download SMADAV 8.6 Anti Virus lokal Indonesia Terbaru 2011

Silahkan ikuti petunjuk dibawah ini :
1. Pertama, masuk dulu ke halaman Edit HTML, jangan lupa memberi tanda centang pada  "Expand Widget Templates"

2. Cari kode ini </head>

3. Kemudian ganti dengan kode dibawah ini

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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-->
</head>

4. Sekarang cari lagi kode dibawah

<div class='post-footer-line post-footer-line-1'>

Jika tidak menemukan kode diatas, coba cari kode seperti ini

<p class='post-footer-line post-footer-line-1'>

Kalo sudah ketemu, tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang rekan temukan.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. jangan lupa disimpan dah lihat hasilnya

Untuk menampilkan berapa banyak jumlah related posts bisa dengan mengedit kode dibawah ini:

var maxresults=5;

Untuk mengganti title, kita bisa mengedit kode ini:

var relatedpoststitle="Related Posts";

mudah bukan :) , semoga tutorial Membuat Related Post dengan Tumbnail Dibawah Post Artikel bisa bermanfaat untuk anda, baca juga Cara Membuat Random Post di Blogger

»»  read more

Membuat Random Post di Blogger dengan Pipe Yahoo

Cara membuat random posts di Blogger dengan Pipe Yahoo - Anbu-Files.Blogspot.Com - Berikut ini adalah tutorial tentang membuat sebuah widget dengan fungsi sebagai random post, ini merupakan favorit bagi para Adsense Mania dalam Tips di blogspot untuk mendapatkan pageviews yang banyak dengan menampilkan random post lama sampai random post baru, karena Random Posts bisa menampilkan postingan-postingan lama yang bahkan sulit untuk kita temukan. misalnya anda sudah memiliki artikel sebanyak 200 buah atau lebih maka kita perlu yang namanya Random Posts untuk menampilkan post lama kita supaya bisa dibaca lagi oleh pengunjung yang membutuhkan, maka dari itu random post sangatlah penting bagi pemilik blog dan pengunjung blog terutama bagi pengguna blogspot.
Cara membuatnya sangat mudah sekali, karena hanya tinggal di tempel di widget / gadget blogspot anda, anda hanya perlu meng-copy code di bawah dan dipasang di widget.

Langkah-langkahnya sebagai berikut :

1.Login ke akun blogger / blogspot anda

2.Begitu masuk dasbor, klik rancangan, lalu elemen laman, & Pilih tambah gadget (terserah dimana anda ingin menaruh posisi Random Posts tersebut. Saran: sebaiknya di sidebar / kotak di samping ruang posting) , selanjutnya pilih HTML/JavaScript


3.Setelah ruang HTML/JavaScrip terbuka, paste kode 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=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamabloganda.blogspot.com&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Share by <a href="http://anbu-files.blogspot.com">Anbu</a></span>

*Ganti tulisan bercetak tebal dengan url blog anda dan jumlah artikel yang akan ditampilkan

4.Lalu klik tombol simpan

5.dan lihat hasilnya

Nah setelah Random Post berhasil dibuat, ada baiknya anda membaca Cara Mendapatkan 1000 Pageviews per Hari  untuk mendapatkan tambahan pengunjung pada blogspot anda.
Mudah bukan, tutorial tentang Cara membuat Random Posts di blogspot , semoga bermanfaat buat blog anda.

»»  read more

Mengganti Favicon Blogger (UPDATE)

Mengganti Favicon Blogger  - sekarang ini blogger semakin oke ajah :) , beberapa minggu lalu saya menemukan hal baru, yaitu merubah favicon blogger dengan cara yang sangat mudah. berikut beberapa caranya :

1. Buka blog anda. sign in ke blogger anda.

2. Buka Rancangan, Elemen Laman.

 

 3. Klik Edit, maka tampilannya akan tampak seperti di bawah ini

4. Selanjutnya tinggal klik Browse. pilih image yang ingin kamu buat jadi favicon.

5. klik save dan Selesai

 

image source: http://blog-kedua.blogspot.com

»»  read more

Tips Mengganti Background Blog

Tips Mengganti Background Blog - Pada tutorial web design ada banyak artikel yang harus anda pelajari, salah satu tutorial blog yang ada didalam tutorial web design adalah Tips Mengganti Background Blog . disini kita akan sedikit membahas tentang cara mengganti background blog sebatas merubah warna bacground blog saja.

Ada satu hal yang harus anda tahu apabila anda berniat mengganti background (latar belakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya. berikut tutorial mengganti background blog. Karena kode template sangat bervariasi, yang akan kita jadikan contoh adalah template asli blogger yaitu template minima.  sebenarnya tutorialnya juga hampir sama dengan beberapa template yang sudah bervariasi, tetapi silahkan coba tutorial ini.

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Rubahlah kode warna asli template dengan kode warna yang anda sukai (yang warna merah adalah kode yang harus di rubah) :

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :

body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

1. Klik tombol Pratinjau untuk melihat perubahan
2. Jika sudah OK, klik tombol Simpan Perubahan Template
3. Selesai.

Jika anda kebingungan tentang kode warna, anda bisa menggunakan bantuan program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana cara mengetahui kode warna.


Untuk template minima baru :

1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang anda sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.

semoga tutorial tentang cara mengganti background blog bisa membantu bagi anda yang sedang mencarinya :)

Thanks to : http://kolom-tutorial.blogspot.com

»»  read more

Cara Mengganti Template di blogspot

Cara Mengganti Template di blogspot  - Tutorial kali ini kita buat tentang Cara Mengganti Template di blogspot , ini kita buat untuk para newbee karena jujur dulu saya saat masih newbee (baru jadi blogger) saya agak kesulitan dalam Mengganti Template saya di blogspot . sedikit pengetahuan tentang tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, css, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.
Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan. Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat di http://galerytemplate.blogspot.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis.
Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan template yang disediakan blogspot, atau mengganti template dengan template yang didapat dari penyedia template. kita. Berikut ulasannya :

Mengganti Template dengan Template yang disediakan blogger

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Silahkan login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.
4. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6 template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template,  klik APPLY TO BLOG.
   
5. Selesai.

Mengganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di blogger templates.
2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di Wobzip.
3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
4. Silahkan login ke blogger dengan ID anda.
5. Klik Rancangan.
6. Klik menu Edit HTML.
7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.
   
9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET.
10. Selesai.

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya
tutorial diatas adalah sedikit ilmu dari tutorial web design tentang Cara Mengganti Template di blogspot. semoga bermanfaat.
thanks to : Kolom Tutorial

»»  read more

Menghilangkan Navbar Blogger

 

Menghilangkan Navbar Blogger - pada tutorial kali ini kita akan membahas tentang Menghilangkan Navbar Blogger. nah pengertian navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. itu adalah sebagian dari fungsi Navbar Blogger.
berikut adalah salah satu tutorial yang mungkin termasuk dalam tutorial web design, hampir sama seperti web design joomla, web design wordpress, atau web design html. berikut tutorialnya
1. Pertama Anda harus Login dulu di Blogger
2. Pilih Layout  :::.  Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Mudah bukan :) Menghilangkan Navbar Blogger . o iya anda tenang aja ini tidak melanggar TOS blogger, karena sampai saat ini belum ada peraturan yang jelas mengenai Menghilangkan Navbar Blogger. sebagai contohnya sudah ada banyak sekali template blogger gratis yang sudah Menghilangkan Navbar Bloggernya

»»  read more

Membuat Template Blog SEO Friendly

Membuat Template Blog SEO Friendly - pada tutorial kali ini kita akan lebih memperdalam ilmu SEO pada Template Blog supaya SEO Friendly. Perlu anda ketahui, kebanyakan Designer template Blogspot maupun WordPress kurang memperhatikan masalah SEO dalam pembuatan Template, dan cenderung lebih mementingkan masalah desain. Nah, kali ini saya ingin berbagi tentang cara menjadikan template blogspot SEO Friendly. Bila template blog blogspot kawan belum memiliki trick SEO ini, segera pasang di blog masing masing dengan mengikuti tutorial dibawah ini.

Page Title

Judul halaman standar untuk Single Post pada Blogger adalah BLOG TITLE: POST TITLE. Kamu bisa meningkatkan SEO dengan mengganti title tag jadi POST TITLE | BLOG TITLE. Temukan kode ini pada Template XML Kamu,

<title><data:blog.pageTitle/></title>

 Kemudian ganti dengan kode ini,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

 Kamu juga bisa menambahkan keyword ke judul homepage,  Contohnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | TV Episode Guide | TV Show Info</title>
</b:if>

Meta Keywords dan Description

Beberapa Pakar Blogger telah menulis panduan mengenai bagaimana cara menambahkan meta keyword dan description. Itu sangat mudah, kamu perlu menambahkan kode ini diatas/sebelum kode <b:skin><![CDATA[/*
Contohnya,

<meta name="description" content="SeasonEpisode TV News - TV Episode Guide" />
<meta name="keywords" content="tv news, season episode, episode guide, tv listing" />

 Tetapi kode ini menambahkan meta keyword dan description yang sama pada semua post. Itu tidak baik karena kamu akan mendapatkan peringatan error dari Google Webmaster Tools karena duplikasi meta keywords dan description telah ditemukan. Jadi, sebaiknya kamu hanya menambahkan meta keywords & description pada homepage. Contohnya, kamu bisa menambahkan code ini,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="SeasonEpisode TV News - TV Episode Guide " />
<meta name="keywords" content="tv news, season episode, episode guide, tv listing" />
</b:if>

Heading

Tag Heading (H1,H2,H3,H4,H5) juga sangat penting untuk SEO. Seluruh judul widget Blogger (gadget) menggunakan Tag H2. Namun, Template Minima menggunakan tag H3 untuk judul posting dan kebanyakan Template blogger menggunakan Tag H2 untuk judul Posting. Untuk meningkatkan SEO, kamu perlu menggunakan Tag H1 untuk Judul Posting. Contohnya, Temukan kode,

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

 Contoh diatas menunjukkan bahwa Template kamu menggunakan Tag H3 sebagai judul Posting (Bila kamu tidak menemukannya, Kemungkinan Template kamu menggunakan Tag H2 untuk judul Posting), Ganti H3 (atau H2) pada kode diatas dengan H1, contohnya,

<b:if cond='data:post.title'>
<h1 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>
</h1>
</b:if>

Kamu juga perlu mengganti ukuran dari font Posting dengan menambahkan kode ini sebelum  ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Pada contoh, saya menggunakan ukuran font 1.5em. Kamu bisa menggantinya jika ingin

Social Bookmarking

Saat ini, Komunitas adalah raja! Menambahkan Link Social Bookmarking (Lintas Berita, Infogue,Facebook) dapat membantu dalam membentuk komunitas blog kamu dan meningkatkan SEO.

Breadcrumb

Kamu bisa menggunakan breadcrumb untuk “memudahkan” Navigasi pengunjung blog kamu. Tutorial membuat breadcrumb bisa kamu temukan Disini

Related Posts

Beberapa blogger pakar telah menulis tutorial mengenai bagaimana cara menambahkan hack related post (posting terkait). Semuanya menggunakan kode JSON javascript. baca tutorialnya disini.

Auto-Readmore Link

Link Auto-Readmore tidak mempunyai kaitan langsung dengan SEO. Namun, kamu bisa menggunakannya untuk meningkatkan User Interfaces untuk pengunjung Blog kamu. Buat pengunjung menikmati blog mu, dapatkan trafik lebih banyak, dan SEO akan mengikuti ^^. Tutorialnya bisa ditemukan disini.


seperti yang anda baca di atas , itu merupakan beberapa tips dan trick blogger untuk Membuat Template Blog SEO Friendly.

Special Thanks to  : Membuat Template Blog SEO Friendly - mydisha Blog http://mydisha.blogspot.com/2011/01/membuat-template-blog-seo-friendly.html#ixzz1OKHYmTFN

»»  read more

Memasang Meta Tags ke Blog Lengkap

Memasang Meta Tags ke Blog Lengkap - pada artikel sebelumnya sudah pernah kita bahas tentang Memasang Meta Tags ke Blog , nah perbedaannya pada tutorial web kali ini kita akan memberikan Meta Tags Blogger yang lebih Lengkap.
Topik bahasan  kali ini adalah tentang META TAG DAN META TITLE yang baik dan lengkap untuk Blogger kamu.

Untuk cara memasangnya, ikuti langkah-langkah berikut ini:


1. Login blogger.
2. Klik tab Rancangan.
3. Pilih Edit HTML.
4. Cari kode dibawah ini.

<title><data:blog.pageTitle/></title>

5. Lalu ganti kode diatas dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title>Blogger Indonesia  | <data:blog.pageTitle/></title>
</b:if>
<meta content='wahyu winoto' name='Author'/>
<meta content='global' name='distribution'/>
<meta content='general' name='rating'/>
<meta content='EN,ID' http-equiv='content-language'/>
<meta content='id' name='geo.country'/>
<meta content='2011' name='copyright'/>
<meta content='Isi dengan deskripsi blog kamu' name='description'/>
<meta content='Isi dengan kata kunci yang kamu bidik' name='keywords'/>
<meta content='Isi dengan subyek atau bahasan utama blog kamu' name='subject'/>
<meta content='Isi dengan abstrak atau ringkasan konten blog kamu' name='abstract'/>
<meta content='translate' name='google'/>
<meta content='index follow' name='robots'/>
<meta content='index follow' name='googlebot'/>
<meta content='index follow' name='msnbot'/>

6. Ganti isinya sesuai dengan isi blog kamu.
7. Simpan template kamu.

gampang bukan untuk membuat blog kamu SEO , nah salah satunya dengan Memasang Meta Tags ke Blog Lengkap ini.

»»  read more

Mengganti Icon Blogger

Mengganti Icon Blogger - Pada tutorial tentang memasang auto move image slider di blogger telah sedikit kita singgung penggunaan edit HTML untuk mengedit suatu web design di blogger. Artikel kali ini akan kita bahas mengenai cara mengganti icon blogger dengan gambar ataupun foto anda sendiri di addressbar . sebelumnya anda harus mempunyai image atau mengedit gambar yang sudah ada menjadi berukuran 24 x 24 pixel up to 32 x 32 pixel. kemudian silakan upload gambar tersebut di host manapun.  kenapa harus upload ? karena untuk mendapatkan kode URL image kita.
Mengganti Icon Blogger
berikut langkah-langkah dalam mempersiapkan icon dan cara mengganti icon blogger di blog anda,


1. Pilih gambar yang akan anda masukkan dengan ukuran yang saya sebutkan diatas
2. Silakan upload gambarnya diphotobucket.com, jika belum terdaftar di photobucket.com silakan register disini
3.Setelah login silakan upload gambarnya di menu Upload File & Video dengan pilih tombol choose file
4.Setelah selesai upload akan muncul gambar anda dan ambil kode URL gambar anda seperti contoh kode URL image saya

http://i383.photobucket.com/albums/oo276/0512_photo/enny-1.jpg

5.Untuk memasukkan ke blog anda silakan kembali ke Dasboard blogger anda,silakan ke menu Layout->Edit HTML->jangan lupa klik Expand Widget kemudian temukan kode berikut

</head>

6. Setelah itu letakkan kode dibawah ini sebelum kode diatas

<link href='http://i383.photobucket.com/albums/oo276/0512_photo/enny-1.jpg' rel='SHORTCUT ICON'/>

silakan ganti kode yang berwarna merah dengan URL gambar yang anda dapatkan di photobucket.com tadi

7.Kemudian Save Setting,,Selesai,,

Silakan lihat blog anda apakah iconnya sudah berubah dengan ganbar anda

Begitulah  salah satu tutorial web design dalam Mengganti Icon Blogger. semoga sedikit informasi ini bisa bermanfaat.

»»  read more

Efektif Keyword untuk Meningkatkan Penghasilan Adsense

Efektif Keyword untuk Meningkatkan Penghasilan Adsense - Berikut ini adalah beberapa buah tips dan trick bloger untuk meng-Efektif Keyword untuk Meningkatkan Penghasilan Adsense. sebelum ini kita sudah pernah bahas tentang pentingnya SEO. semoga tips ini bisa bermanfaat bagi agan-agan yang sedang mencoba belajar untuk meningkatkan penghasilan adsense agan :)
SEO Riset keyword adalah sesuatu aspek yang vital dari perencanaan Search Engine Optimizaton, jika situs anda memasang keyword yang salah, search engine dan customer anda tidak akan menemukan website anda. berikut ini adalah cara Efektif Keyword untuk Meningkatkan Penghasilan Adsense
Proses riset keyword dapat di jabarkan dalam beberapa poin berikut ini:

1  Ciptakan Daftar Keyword dan Cek Daftar Tersebut 2x
2  Gunakan Tool Riset Keyword
3  Pastikan Daftar Keyword Anda Sekali Lagi
4  Rencanakan Langkah Anda
5  Submit ke Search Engine

untuk penjelasan dari beberapa cara Efektif Keyword untuk Meningkatkan Penghasilan Adsense sbb :
1  Ciptakan Daftar Keyword dan Cek Daftar Tersebut 2x
Langkah pertama dalam proses adalah  membuat daftar potensial keyword. Pikirkan semua kata-kata yang akan di ketikkan visitor dalam kotak search google atau search engine lainnya untuk menemukan website anda
contoh “tutorial photoshop” atau “laptop murah”
2  Gunakan Tool Riset Keyword
Dalam hal ini kita ambil contoh kita hendak memasang keyword “tutorial photoshop”, sebelumnya kita tidak tahu berapa nilai persainganm, dari keyword “tutorial photoshop” tersebut, semakin tinggi nilai persaingan maka semakin banyak visitor mencari keyword tersebut.
Contoh:
Perbandingan dan Nilai persaingan
tutorial photoshop 50
belajar photoshop  20
maka orang lebih suka mencari keyword “tutorial photoshop” daripada “belajar photoshop”
Nah dalam mencari perbandingan nilai keyword kita dapat menggunakan beberapa tool yang tersedia di internet, ada yang gratis dan ada yang bayar, diantaranya:
Overture Keyword Selector Tool (Gratis):
http://inventory.overture.com/d/searchinventory/suggestion/
Overture selain menunjukkan persaingan keyword, dia juga menampilkan kombinasi frase-frase keyword terkait
hal ini cocok untuk mencari “Niche Market”
Wordtracker: – tool bagus, tapi untuk versi gratisnya dia hanya menampilkan Search Result MSN,
http://www.wordtracker.com/
Google AdWords Keyword Tool:
https://adwords.google.com/select/KeywordToolExternal
Bagi yang ingin memasang Adwords anda bisa mengetahui harga keyword di sini
3  Pastikan Daftar Keyword Anda Sekali Lagi
Dibagian ini anda tahu sendiri apa yang harus nya di lakukan, apakah memilih keyword yang mempunyai persaingan tinggi atau persaingan rendah (Niche market)
Contoh:
Perbandingan dan Nilai persaingan
tutorial photoshop 50
belajar photoshop  20
Disini terserah, anda pilih menggunakan keyword yang mana
::. Jika anda menggunakan keyword yang mempunyai persaingan tinggi, maka untuk mengimbanginya website anda harus ber-pagerank tinggi pula
::. Jika anda menggunakan keyword yang mempunyai persaingan rendah (Niche Market), maka website anda dapat dengan mudah meraih Ranking #1 di Google
4  Rencanakan Langkah Anda
Siapkan langkah anda dan pasang keyword-keyword tersebut pada:

• Title Tag <title>

• Meta Description Tags <meta decscription=>

• Meta Keywords Tag <meta keyword=>

• Headings <h1> <h2>

• Alt text <alt>

• Anchor Text/ Navigational Links <a href=> keyword </a>

5  Submit ke Search Engine
Anda bisa mensubmit website anda ke Google di : www.google.com/addurl dan Yahoo

terima kasih kepada : http://webzkitchen.wordpress.com karena telah berbagi ilmunya :)

»»  read more