Cara Membuat Widget Artikel Populer di Blogger

Malam hari ini kang setia memberikan sedikit tips bagaimana Cara Membuat Widget Artikel Populer di Blogger , istilah ini paling populer atau lebih dikenal dengan Top Post atau Artikel populer. Widget ini memiliki fungsi seberapa populerkah artikel-artikel kita di blog sendiri. Banyak parameter yang digunakan untuk menyusun artikel terpopuler ini, mulai dari jumlah berapa kali artikel tersebut dibaca atau berapa jumlah komentar pada artikel tersebut. Jika di blog berbasis WordPress sudah tersedia widget Tulisan Teratas, maka di blogspot anda sudah bisa menampilkan widget sejenis. Widget ini disusun berdasarkan lalu-lintas komentar terakhir yang masuk di blog kita, sehingga kita bisa menyimpulkan artikel manakah yang paling banyak mendapat tanggapan dari pembaca blog kita.


Untuk membuatnya di perlukan langkah-langkah seperti di bawah ini:

1. Login to Blogger
2. kemudian pilih "Layout" atau Tata Letak
3. Klik pada Tambah Widget atau bahasa inggrisnya "Add a Gadget / Widget"
5. Pilih HTML/Javascript
6. Copy Paste Script Berikut:

<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%2Fkang-setia.blogspot.com&num=10" type="text/javascript"></script>
<span style="gt;Widget edited by <a href="http://kang-setia.blogspot.com/2010/05/cara-membuat-widget-artikel-populer-di.html" target="_blank">Kang-Setia</a></span>

4. Ganti kang-setia.blogspot.com dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Top Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.

Selamat mencoba...!

»»  READMORE...

»»  Read More

Cara Membuat Recent Post dengan Gambar

Akhirnya pada kesempatan ini saya memiliki kesempatan untuk menulis Cara membuat Recent Post Dengan Gambar . Versi ini tentu berbeda coba lihatpada hasil di saya..hehe

Versi yang baru ini tentu lebih "gres" dan lebih "Nyentrik" .Sebenarnya Cara membuat Recent Post Dengan Gambar lebih mudah .Recent Post Dengan Gambar baru ini sangat mudah untuk diterapkan di blog kamu dan tentu lebih oke. Ingin pasang sekarang?silakan lihat tahap-tahapnya berikut ini.

Sebelum memulai, dipersilakan untuk melihat hasilnya terlebih dahulu di home sebelah kanan posting saya..

Bagus kan hehehe ?ini dia caranya...

1. Seperti biasa anda login ke account Pribadi di Blogger anda. Jangan punya orang laen...kwakwakwak..:-)

2. Setelah sudah login/signin, masuk ke tata letak. Dan kemudian klik "tambah gadget" di salah satu tempat yang ingin anda tempelkan.

3. Pilih "HTML/JAVASCRIPT", kemudian masukkan kode di bawah ini

<br /><br /><div style="text-align: center;"><textarea style="width: 300px; height: 40px; padding:3px"><br /><center><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /><br /><style media="screen" type="text/css"><br /><!--<br /><br />#spylist {<br />overflow:hidden;<br />margin-top:5px;<br />padding:0px 0px;<br />height:350px;<br />}<br />#spylist ul{<br />width:160px;<br />overflow:hidden;<br />list-style-type: none;<br />padding: 0px 0px;<br />margin:0px 0px;<br />}<br />#spylist li {<br />width:150px;<br />padding: 5px 5px;<br />margin:0px 0px 5px 0px;<br />list-style-type:none;<br />float:none;<br />height:70px;<br />overflow: hidden;<br />background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;<br />border:1px solid #ddd;<br />}<br /><br />#spylist li a {<br />text-decoration:none;<br />color:#4B545B;<br />font-size:11px;<br />height:18px;<br />overflow:hidden;<br />margin:0px 0px;<br />padding:0px 0px 2px 0px;<br />}<br />#spylist li img {<br />float:left;<br />margin-right:5px;<br />background:#EFEFEF;<br />border:0;<br />}<br />.spydate{<br />overflow:hidden;<br />font-size:10px;<br />color:#0284C2;<br />padding:2px 0px;<br />margin:1px 0px 0px 0px;<br />height:15px;<br />font-family:Tahoma,Arial,verdana, sans-serif;<br />}<br /><br />.spycomment{<br />overflow:hidden;<br />font-family:Tahoma,Arial,verdana, sans-serif;<br />font-size:10px;<br />color:#262B2F;<br />padding:0px 0px;<br />margin:0px 0px;<br />}<br /><br />--><br /></style><br /><br /><script language="JavaScript"><br /><br />imgr = new Array();<br /><br />imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";<br />showRandomImg = true;<br /><br />boxwidth = 255;<br /><br />cellspacing = 6;<br /><br />borderColor = "#232c35";<br /><br />bgTD = "#000000";<br /><br />thumbwidth = 70;<br /><br />thumbheight = 70;<br /><br />fntsize = 12;<br /><br />acolor = "#666";<br /><br />aBold = true;<br /><br />icon = " ";<br /><br />text = "comments";<br /><br />showPostDate = true;<br /><br />summaryPost = 40;<br /><br />summaryFontsize = 10;<br /><br />summaryColor = "#666";<br /><br />icon2 = " ";<br /><br />numposts = 10;<br /><br />home_page = "http://kang-setia.blogspot.com/";<br /><br />limitspy=4<br />intervalspy=4000<br /><br /></script><br /><br /><div id="spylist"><br /><script src="http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js" type="text/javascript"></script><br /></div></center><br /></textarea></div><br /><br />

4. Klik "simpan".

jangan lupa Home page nya di ganti url kamu.cey...

Mudah bukan?silakan mencoba...

»»  READMORE...

»»  Read More

Pasang Statistik dan Tracker (SITE MATER)

Pasang Statistik dan Tracker

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com.



Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situs http://www.sitemeter.com.


2. klik tulisan Sign Up untuk melakukan pendaftaran


3. klik tombol bertuliskan Next


4. Klik tombol Next lagi


5. Isi semua tabel yang ada lalu klik tombol Next lagi


6. Isi lagi tabel yang ada, lalu klik tombol Next lagi


7. klik tombol Next lagi


8. klik tombol Next lagi

9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan
buka email yg anda berikan


10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda
untuk login ke sitemeter.com


11. Silahkan login dengan id anda


12. Bila sudah login, Klik menu Manager


13. Klik Menu Meter Style untuk memilih gaya dari site meter anda


14. Pilih style yang anda sukai, kemudian klik tombol Select


15. Klik menu HTML Code


16. Klik tulisan Adding site Meter to a Blogger.com Site


17. copy semua kode HTML yang di berikan lalu paste pada Notepad


18. Klik menu Logout untuk keluar dari situs tersebut


19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita



Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

1. Sign in di blogger dengan id anda


2. Klik menu TEMPLATE


3. Klik Edit HTML


4. Klik Edit (yang ada pada bar menu browser anda)
5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian

6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger
(karena dekat dengan tombol blogger) klik Find


7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol
Preview untuk melihat perubahan yang terjadi


8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai



Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center>



Untuk blog dengan Template baru :

1. Login di blogger dengan ID anda


2. Klik menu layout


3. Klik Elemen Halaman


4. Klik Tambahkan sebuah Elemen Halaman


5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript


6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau
tidak, ya kosongkan saja)


7. Copy & paste kode Site meter pada kolom isian


8. Klik tombol Simpan Perubahan


9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di
drag & drop)


10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan


11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN


12. Selesai



Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya..hahahahaha..

tingalkan komen ya..

»»  READMORE...

»»  Read More

Memilih Template

Cara Memilih Template

Bagi sobat yang sudah melakukan beberapa setting-an seperti posting terdahulu, langkah selanjutnya yang perlu sobat lakukan adalah memilih template. Sekilas tentang template Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti banner diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang sobat lihat sekarang adalah salah satu bentuk dari desain template.
Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang. Hmmm.. kayanya cukup deh pembahasan tentang apa itu template, keburu bosan kalau lama-lama….Sekarang langsung aja ke topik utama, yaitu langkah-langkah pemilihan template di blogger.com

1. Silahkan sobat login terlebih dahulu seperti biasa dengan memakai user name milik anda ( jangan milik saya….emang nya sampeyan mau jadi hacker ya

2. Klik "Tata Letak" (bila sobat menggunakan blogger baru) atau klik "Template" (bila sobat menggunakan template classic).

3. Klik "Pick New Template", silahkan sobat pilih template yang sobat suka. Sebelum memutuskan dalam memilih "template" ini, sebaiknya anda lihat terlebih dahulu satu persatu contoh layout yang di sediakan dengan cara meng klik tulisan "preview template". Jika di rasa sudah menemukan yang paling sobat sukai, silahkan klik tulisan "Save template" yang ada di sebelah kanan atas, selesai. :

Mungkin sobat pernah mengunjungi beberapa blog di internet yang menggunakan blogger.com (blogspot), akan tetapi template yang di gunakan tidak ada dalam pilihan ketika memilih template. Ini ada kemungkinan bahwa template yang di gunakan adalah template buatan bukan dari blogger sendiri. Di internet banyak sekali situs-situs yang memberikan template secara gratis untuk di pakai di Blogger (blogspot), Jika ingin melihat-lihat berbagai template buatan bukan dari blogger.com silahkan klik di sini.

selamat mencoba..

»»  READMORE...

»»  Read More

Cara Membuat Menu Tab View

Banyak dari teman-teman Blogger yang tak tahu berada dimana dan ada juga yang mengirimi e-mail kepada saya yang menanyakan cara membuat Tab View seperti pada Blog ini,Menu Tab View memungkinkan menampung banyaknya postingan atau artikel pada blog kita,jadi Tab View ini sangat Efisien digunakan karna tidak memerlukan tempat yang besar.membuatnya sangat sederhana,


Jika tertarik Membuatnya ikuti tutorial berikut ini:



1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode ]]></b:skin>

5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>




div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


6.Lalu letakkan kode berikut sebelum kode </head>

<script src='http://arif45.fileave.com/tabview.js' type='text/javascript'/>


7.Save Template Sobat

8.Pergi ke halaman Element Halaman

9.Klik Add Widget Element

10.Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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>
12.Save Widget tersebut

13.Selesai



Silahkan Edit kode tersebut untuk menyesuaikannya dengan Blog anda.

Jika Sobat Ingin Tampilannya berbeda ,coba Kode yang dicopykan diatas Kode ]]></b:skin> dengan kode ini


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F2F2F2;
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #F2F2F2;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

»»  READMORE...

»»  Read More