Kumpulan Tutorial Blogspot

Home → Semua Post Berkategori Widget - Gadget Blog

Tampilkan postingan dengan label Widget - Gadget Blog. Tampilkan semua postingan

Widget Recent Posts Dan Recent Comments Dari Blogger

Recent posts dan recent comments atau widget komentar dan posting terakhir adalah widget yang sering digunakan para blogger, karena kedua widget ini sangat berguna untuk mengetahui komentar terakhir dan posting terakhir di blog kita.

Dulu saya pernah mencoba menulis tentang cara membuat recent comments dan recent posts dengan javascript, namun sekarang kita tidak perlu susah-susah lagi untuk membuat widget tersebut dengan menggunakan javascript karena blogger sudah menyediakan widget ini di widget featured blogger.

Bagi Anda yang belum tau tentang cara menggunakan widget ini silahkan ikuti panduan dibawah ini.

Cara menggunakan widget ini cukup mudah yaitu :

Masuk pada "Design? Page Elements"
Lalu Klik tombol "Add a Gadget"
Dan klik tombol "Featured"
Cari gadget Recent Comments, untuk menggunakan widgetnya klik tombol (+)

Setelah muncul kotak dialog seperti diatas kemudian isi konfigurasi widgetnya dan tekan tombol "SAVE"
Dan untuk widget Recent Post pada langkah nomer 3 cari gadget "Recent Posts" dan klik tombol (+) maka akan muncul kotak konfigurasi seperti dibawah ini

Nah setelah muncul kotak konfigurasi seperti diatas, lalu isi konfigurasinya sesuai keinginan Anda lalu "SAVE"
Selesai dan lihat hasilnya.

Okkey inilah bukti kemajuan blogger yang bisa Anda rasakan, semoga blogger lebih canggih lagi dan kita pun lebih mudah menggunakan blogger. Salam blogger

Widget Daftar Isi / Sitemap

Sitemap atau yang sering disebut oleh orang awam sebagai daftar isi ini sangat berguna untuk blog kita, ketika pengunjung ingin menjelajahi blog kita maka inilah peran yang harus hadir untuk mempermudah penjelajah blog kita. Kali ini saudara blogger kita Om Abu-farhan punya solusinya yaitu "The Best Table of Contents (TOC) or Sitemap for Blogger".

Seperti terlihat di blog ini yang menggunakan TOC dari Om Abu-Farhan yang Saya masukkan kedalam fitur baru blogger yaitu "Pages Blogger". Nah pada kesempatan kali ini Saya kan mengulas bagimana caranya memasang TOC kedalam halaman pages kita.

1. Langkah pertama masuk blogger.com

2. Masuk postingan Om Abu-Farhan untuk mengcopy source code seperti dibawah ini

Copy code diatas dan ingat ganti www.abufarhan.co.cc dengan alamat blog Anda

3. Pada Dashboard draft.blogger.com masuk pada bagian "Posting" lalu "Edit Pages"

4. Lalu klik tombol "New Pages" lalu paste code tadi kedalam post editornya

5. Setelah di SAVE akhirnya jadi juga dan sisipkan link pagesnya tadi kedalam daftar menu di blog Anda untuk navigasinya

Nah ulasan singkat mengenai Sitemap blogger yang canggih oleh Om Abu-Farhan semoga bermanfaat bagi Anda

Ucapan terima kasih sebesar-besarnya kepada Om Abu-Farhan

Cbox.ws Pengganti Shoutbox Shoutmix

Baru-baru ini muncul permasalahan dari pelayanan shoutbox shoutmix.com yang tidak memunculkan link untuk member basic shoutmix. Ternyata pihak shoutmix ingin meningkatkan kepopuleran website shoutmix, untuk memunculkan link di pesan, Anda harus log in ke website shoutmix terlebih dahulu.
Para blogger yang menggunakan fasilitas shoutmix pun merasa kurang nyaman karena susahnya jika ingin meningkatkan traffic blog melalui meninggalkan jejak di shoutbox (blogwalking).

Nah apakah ada pengganti Shoutmix untuk pelayanan free shoutbox yang masih bisa untuk nge-link?

Yaitu Cbox.ws, iya benar cbox.ws adalah layanan free shoutbox untuk blogger yang masih bisa untuk menampilkan link. Tak kalah dengan shoutmix, cbox.ws ini memiliki fitur yang sama seperti shoutmix.

Apakah Anda ingin mencoba cbox.ws?

caranya cukup mudah Anda tinggal masuk ke website www.cbox.ws lalu ikuti panduan untuk membuat shoutbox cbox.ws gratis.

Nah sedikit ulasan tentang shoutbox yang lebih nyaman dipakai jika Anda ingin bisa memunculkan link kedalam shoutbox Anda.

Sekian semoga bermanfaat

Wibiya : ToolBar Blogger Canggih

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibia ini sangat canggih.
Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? penasaran ingin lihat Demonya?? langsung aja kunjungi wibia dan lihat di browser kamu bagian bawah.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

1. Buka website wibiya.com dan klik tombol "Get It Now"

2. Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next"

3. Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

4. Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"

5. Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

6. Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

7. Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Sekian semoga bermanfaat.

Menambah Status Yahoo Messenger Di Gagdet Profil

Gadget profil adalah gadget dimana Anda bisa manampilkan foto, deskripsi tentang Anda dan link profil blogger Anda kedalam blog Anda. Untuk menambahkan widget ini cukup mudah yaitu dari menu "Layout/tata letak" kemudian klik "Add a gagdet" lalu pilih "Profile". Dan untuk mengedit profil dan foto Anda bisa melalui Dashboard blogger Anda dengan mengklik "Edit Profile" yang ada di sebelah kanan dashboard Anda.

Nah kali ini Saya akan membahas tentang bagaimana caranya menambah Status Yahoo Messenger kedalam gadget Anda, yang berhubungan dengan postingan Saya yang dulu tentang menambah Status Yahoo Messenger ke dalam blog.

Coba lihat contoh dari modifikasi sederhana ini :

Terlihat diatas ada tambahan status Yahoo messenger ke dalam gadget profil Saya.

Nah dibawah ini adalah caranya :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

Code yang berwarna merah diatas ganti dengan ID YM kamu, dan angka yang berwarna hijau adalah bentuk dari lambang status YM, keterangan lebih jelasnya bisa dibaca disini.

5. Kalau sudah kemudia SAVE

Nah diatas adalah cara menambah Status Yahoo Messenger kedalam gadget profil, Anda juga bisa Status YM dengan status Camfrog, G-Talk dan lainya.

Cukup disini dulu postingan Saya. . . Semoga bermanfaat dan silahkan menuliskan komentar dibawah ini untuk tanggapan dan pertanyaan.

Widget Sederhana Twitter

Tentunya Anda sudah tau apa itu twitter dan Anda jugalah pengguna twitter untuk saat ini. Ya, Twitter adalah salah satu Social Networking yang terkenal selain Facebook yang banyak digunakan orang di seluruh penjuru dunia.

Namun kali ini Saya akan membahas tentang bagaimana caranya membuat widget Twitter yang sederhana ke dalam blog kita, dalam artian widget ini lebih simple dari pada widget yang diberikan oleh pihak twitter.

Isi dari widget ini adalah hanya tweets dan link twitter Anda, pas buat Anda yang suka hal ringkas namun bertujuan jelas. Coba lihat contoh widgetnya dibawah ini

Gambar diatas screen capture dari widget twitter sederhana di blog Saya ini. Yuk mari Saya pandu cara buat widget ini

Pertama yang Anda lakukan adalah Log In ke blogger Anda, setelah masuk Dashboard Lalu klik Link Layout / Tata Letak

Setelah masuk pada menu Layout lalu pilih tempat yang mau Anda pasangi Widget ini kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript"

Kemudian Paste code dibawah ini

<div id="twitter_div" style="background: url(http://i725.photobucket.com/albums/ww258/anasceria/new-tuts/single-bird-icon-1.png) top left no-repeat; color:#000000; font-size:14px; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/anasceria">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/anasceria.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

Perhatikan !! :

Ganti code yang berwarna merah diatas dengan ID Twitter Anda
Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut, sesuaikan dengan selera Anda, klik disini untuk panduan CSSnya
Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Nak demikianlah tutorial Saya hari ini untuk membuat widget sederhana twitter. Semoga bermanfaat bagi Anda dan jangan lupa Follow Twitter Saya disini untuk mengetahui update dari Saya, Terima Kasih.

Widget Penerjemah Dari Google

Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini.

dibawah ini adalah bentuk widget tool dari google translate :

Udah dicoba belum? kalau sudah jika mau pasang widget ini silahkan baca dibawah ini.

Copy paste code dibawah ini kedalam blog Anda dengan cara :

1. Masuk menu Layout kemudian masuk menu Page Elements
2. Pilih box layout yang diinginkan kemudian klik Add a gadgets
3. Pilih Gadget HTML/JavaScript dan taruh code dibawah ini :

Code yang berwarna merah diatas adalah ukuran dari widget yang bisa kamu ubah-ubah. Kalau sudah kemudian SAVE.

Nah sedikit info dari saya dan jika Anda mau menggunakan layanan dari google translate yang lain kunjungi : http://translate.google.com

Cara Menampilkan Satus G-Talk (Google Talk)

Satu lagi setelah kemaren membuat tutorial cara menampilkan status YM dan menampilkan Status Camfrog.. Kali ini akan membahas cara menampilkan status G-Talk atau Google Talk ini, Seperti Senior saya kang jaloee dia lebih suka berchatting atau ngobrol lewat G-Talk dari pada pkai YM (Yahoo Messenger).
Berhubung ada kaitanya dengan pemasangan di blog Saya coba Memberi informasi sedikit tentang cara menampilkan status G-Talk di Blog kita...

Mari ikuti langkah-langkah dibawah ini..

Buka situsnya Google yang ini (disini)
Kemudian Log In dengan Account Google kamu
Setelah Log In ada Generate Code yang harus kamu pasang di blog kamu..
Cara pasang di blog seperti biaya yaitu masuk menu Layout--> Page Elements lalu klik Add a Gadet Lalu pilih HTML/JavaScript dan taruh deh generate Codenya kedalamnya

Selain cara pemasangan saya akan menerangkan sedikit cara mengubah tampilanya...

untuk mengedit bentuk dari widgetnya klik Edit

Setelah klik Edit ada tampilan seperti dibawah ini

Title (optional) : untuk meberi judul Widget keseluruhan (dikosongi jika ingin menampilkan nickname)

Your nickname : Nickname yang kamu tampilkan di Widget

Style : Bentuk dari widget bisa kamu udah dg selera kamu sendiri

setelah semua udah di set klik tombol Update Badge

Lalu code dibawahnya kamu masukkan ke blog kamu
dan jika ingin mengubah panjang dan lebar tinggal cari code w=200 (untuk lebar) dan h=60 (untuk tinggi) silahkan ubah sesuai keinginan kamu

sekian semoga bermanfaat bagi anda sekalian...

Membuat Widget Melayang

Weh Emangnya Layang-layang pa melayang segala, Wah si Anas ngawur neh..! :D Wah apa sih yang dimaksud widget melayang di area blog? Baca dibawah ini untuk penjelasanya

Oke saya jelasin dikit yah mengenai trik kali ini yaitu widget melayang.. Jika anda menyimpan widget dan jika Anda menggeser scroll bar browser Anda widget ini akan berada ditempatnya tidak mengikuti scroll bar.
Sebagai Contoh kamu lihat Status YM aku yang aku buat melayang

Nah dari keterangan diatas apakah Anda minat untuk membuatnya..?
Silahkan ikuti trik dibawah ini untuk membuatnya :)

Langkah pertama yang harus kamu lakukan adalah Log In ke Blogger lalu masuk menu Layout kemudian masuk Edit HTML

Lalu taruh Code dibawah ini diatas Code ]]></b:skin>

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Tulisan yang berwarna merah dan tebal diatas itu adalah posisi widgetnya
bottom adalah bawah jika ingin mnaruh diatas bisa kamu ganti dengan top, Left adalah kiri jika ingin mengganti di kanan bisa kamu ganting dengan right

Langkah selanjutnya taruh code dibawah ini yang merupakan widget sebelum Code </body>

Nah Code yang berwarna merah diatas itu adalah staus YM yang merupakan widgetnya bisa kamu ganti.. Silahkan Baca Artikel saya di category Widget atau kamu punya widget sendiri yang ingin kamu pasang..

Kemudian SAVE

Sekian semoga bermanfaat bagi pembaca blog ini

Widget Dari Feedjit

Bagi Anda para Blogger dan Webmaster tiada salahnya jika menggunakan Widget yang satu ini.. yaitu widget dari feedjit yang mempunyai banyak fitur menarik... Nah disini anda bisa memlilih widget yang anda sukai.. ada 4 widget yang bisa anda pilih yaitu :

LIVE TRAFFIC FEED

Nah dengan menggunakan Widget ini Anda bisa mengetahui pengunjung terakhir Blog Anda dan dari Negara Mana mereka Berasal juga Anda dapat melihat dari mana mereka semulanya sehingga bisa menuju ke blog anda misalnya dari google atau dari blog orang lain yang memasang Link anda..lihat contoh dibawah...

Jika Anda Ingin Pasang taruh Code Dibawah

LIVE TRAFFIC MAP

Widget ini membuat Anda bisa melihat Peta dari Vistitor blog Anda...

Jika Anda Ingin Pasang Taruh Code Dibawahh

LIVE RECOMMENDED READING

Dengan Widget ini Anda bisa mengetahui Artikel mana yang sering dibaca oleh pengunjung

Jika Anda ingin pasang taruh code dibawah ke dalam blog Anda..

LIVE PAGE POPULARITY

Widget Ini memberi Informasi Artikel mana Yang paling populer di blog Anda

Pasang Code Dibawah

Nah dari keempat wodget diatas pilih yang Anda sukai dang sesuai kebutuhan Anda.. Jika anda ingin baca lebih selengkapnya kunjungi saja www. feedjit.com

Jika Anda belum tau cara memasang Widget Ini kedalam Blog Anda: Masuk menu Layout Kemudian Page Elements kemudian pilih tempat yang Anda sukai lalu klik Add A Gadget lalu pilih HTML/JavaScript dan taruh codenya....

Sekian Semoga Bermanfaat... MERDEKA... MERDEKA....

Menampilkan Status Camfrog

Sebelum saya berbicara dengan cara pembuatanya saya kasih tau dulu apa itu camfrog..? Camforg adalah layanan Chatting yang hampir mirip dengan Yahoo messenger, kamu bisa dapatkan softwarenya di camfrog.com atau saya juga sahre softwarenya yang lebih lengkap dan gratis disini.. nah jika anda para camfroger tidak ada salahnya mencoba trik ini karena pengunjung blog/website kamu bisa mengetahui kamu lagi Online gak di camfrog... Seperti halnya dulu Anas juga udah pernah posting tentang cara menampilkan status yahoo messenger dan kali ini pun Anas juga akan kasih tau cara menampilkan satus Camfrog.. karena saya juga camfroger maka tidak ada salahnya jika saya share pengetahuan saya tentang camfrog salah satunya yaitu trik ini hehee..

Nahh dibawah ini adalah contoh dari tampilan satus camfrog
ONLINE

OFFLINE

Nah jika kamu pengen menbuat ikuti cara dibawah ini

Log In Ke blogger lalu Masuk Menu Layout--->Page Elements
Lalu pilih tempatnya Dan Add a Gadget
Dan pilih HTML/JavaScript Kemudian Masuukan Code dibawah Kedalamnya

<a href='camfrog:im:Mbah_Metal_'> <img src='http://camfrog.com/getstatus.php?nick=Mbah_Metal_'/>
</a>

Tulisan yang berwarna merah ganti dengan Id/Nickname Camfrog kamu Dan tulisan yang berwarna biru bisa kamu ganti dengan tulisan "Add" jika anda ingin link gambar itu me-add Id camfrog anda
Kode diatas juga bisa kamu sisipkan di Edit HTML juga..
Simpan dan lihat hasilnya...

Atau cara yang yang lain kamu bisa generate di http://www.camfrog.com/add.phtml

Selesai dehhhh gampang kann...

Membuat Label/Tag Clouds

Nahhh pada kali ini saya yang bernama Anas akan menulis artikel yang biasanya digunakan di wordpress dan technorati yaitu Tag Clouds.. jika anda belum mengerti tentang Tag Clouds saya akan menerangkan sedikit pengertianya..
Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakn Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi rengkumanya adalah Label yang seperti awan atau tidak rata.. Nah jika Tags yang hurufnya berbentuk rata biasanya itu adalah tags yang populer di blog anda jika kecil itu kurang populer... jadi pengertianya adalah semakin besar hurufnya maka menandakan kepopuleran dari Tags tersebut... makanya anda membuat tags dengan kata-kata yang sering digunakan dan tepat dengan isi tagsnya tul gakk

Nah jika Anda belum tau Tags Clouds Saya akan memberikan contohnya niii dibawahhh

komputer, Blogging, Bisnis Online
laptop, Widget Blog, Yahoo, Google,
blogeer, wordpress, SEO
trik-tips Blog
Pernak-pernik Blog,
other

Nah contoh diatas adalah tampilan Label yang telah dimodifikasi menjadi Tags Clouds... Semakin besar hurufnya maka semakin populer categorinya

Gimanna anda pengen buat gakk kalau pengen nihh dibawah aku ajari caranya..

Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML
Kemudian Taruh Code dibawah diatas Code ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Lalu juga taruh Code Dibawah tepat dibawah Code <head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Lalu Scroll Kebawah coba cari Code seperti ini <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Lalu Ganti code diatas dengan Code dibawah Ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
Selesai Deh kemudian Save

Jika kamu Faham tentang CSS kamu bisa mengotak-atik tampilanya sendiri...

Nahh gimana gampang thoo dengan Tags Clouds kan kita bisa mengetahui Tags mana yang paling populer iya kannn..... kalau begitu sekian dulu yahhh Anas udah gak tahan lagi nih mau belajar hal-hal yang belum aku mengertii.... Jangan lupa isi komentar yahhh.... biar aku bisa membenahi artikel ini jika ada kesalahan .... thanks

Search Engine Dengan Background Dan Tombol Gambar

Berjumpa lagi dalam tutorial menarik di blog ini, iya anas dulu udah pernah posting tentang cara membuat search engine sederhana tapi sekarang anas membuat search engine di blog lebih menarik dengan background gambar dan tombol sumbit juga ada gambarnya, menurut kamu menarik gak sih search engine yang kaya begini... kalau kamu belum faham juga ni dibawah aku kasih contoh search engine yang menarik

Gimana? Dari gambar diatas kamu tertarik gak pengen buat search engine yang kaya gituan wkakaak pastinya penegen dunk orang menarik iya kan?

Iya itu adalah background karya aku sendiri dan nanti kamu juga bisa buat Backgroundnya sendiri dan juga tombol submit buatan kamu sendiri okey

langsung aja deh ke cara pembuatanya

Log in ke blogger dahulu kalau sudah masuk menu Layout kemudian masuk Edit HTML
Lalu taruh Code Dibawah diatas Code ]]></b:skin>

#searchform {
position:letf;
top: 20px;
right: 0px;
background: url(http://sites.google.com/site/anasku2000/search-back.png) no-repeat right bottom;
height: 59px;
width: 210px;
}
#searchform #s{
background: #ffffff url(http://sites.google.com/site/anasku2000/form-field-bg.gif) no-repeat ;
height: 17px;
width: 148px;
margin: 30px 5px 0px 10px;
padding: 3px 7px 2px 5px;
color: #999999;
border: none;
}
#searchform #searchsubmit {
background: url(http://sites.google.com/site/anasku2000/searchbtnnk7.png) no-repeat left top;
height: 24px;
width: 24px;
border: none;
text-indent: -999%;
line-height: 1px;
margin-top: 6px;
}
Kemudian Simpan Template
Lalu langkah selanjutnta adalah masuk menu Layout ---> Page Elements
Pilih tempat yang mau dipasangi Search engine kemudian Add A Gadget
Lalu pilih HTML/JavaScript kemudian Taruh Code Dibawah Kedalamnya

<form id="searchform" action="/search" method="get">
<div>
<input type="text" id="s" value="" name="q" />
<input id="searchsubmit" value="Go" type="submit" />
</div>
</form>
Lalu Simpan dehh

Nah jika kamu ingin membuat karyamu sendiri silahkan ganti link backroundnya yahh dan atur penempatanya okey

http://sites.google.com/site/anasku2000/search-back.gif ---> Ini adalah Link Backgroundya

http://sites.google.com/site/anasku2000/form-field-bg.gif -----> Ini Background Form

http://sites.google.com/site/anasku2000/searchbtnnk7.png ---> Ini Tombol Submitnya

Gimana trik gw jadul tapi manjur kan wkakakakak okelah silahkan menjoba jangan lupa isi komentar yahh di bawah juga kalau gak keberatan klik iklanya juga wkakakakakak

BACKGROUND YANG BISA KAMU GUNAKAN

http://sites.google.com/site/anasku2000/search-back.png

http://sites.google.com/site/anasku2000/search-qwu.png

Membuat Berlangganan Lewat E-mail

Jika kalian sering melihat blog dengan tambahan widget E-mail Subscribe atau berlangganan lewat email itu adalah media untuk pengunjung blog untuk dapat membaca feeds blog anda melalui email dan jika anda mempunyai Atikel terbaru akan di kirimkan ke email pengunung blog anda yang telah mendaftar email subscribe anda.... Widget itu sering digunakan para blogger untuk mempercanggih blognya karena terkesan terlihat menarik dan terkesan pemilik blog mempunyai kemampuan database tinggi nahh itu pemikiran bagi yang belum tau cara buatnya..
Sebenarnya gampang kok buatnya melalui jasa feedburner nahh anas akan kasih tau cara buat email subscribe gini nih....

Masuk Situs feedburner.com jika anda belum punya account daftar dulu
Setelah daftar langkah kedua yang harus anda lakukan adalah Sign in
Setelah masuk kamu harus mengisi alamat feed blog kamu terlebih dahulu misalnya
http://judulblog.blogspot.com/feeds/posts/default
Ganti tulisan judulblog dengan alamat blog kamu
Check Box Im a Podcaster! kamu centang bila blog kamu isinya video
Kemudian tekan tombol Next
Setelah itu ada konfirmasi lainya dan isi Feeds Title juga Feed Address setelah itu tekan Activate Feeds
Setelah Konfirmasi Semua Selesai kita akan diarahkan ke Dashboard Feeds kita
Kemudian tekan menu Publicize lalu pilih Menu Email Subscribetions
Kemudian Pilih Menu Radio Button FeedBurner (Yep. We now do reliable email delivery.)
Dan kemudian tekan Activate
Kemudian di Subsciptions Form Code pilih bahas dan Taruh Code yang ada di bawahnya di blog kamu dengan cara ke menu Layout--->Page Elements lalu Add a Gadget dan pilih HTML/JavaScript kemudian paste code-nya

Selesai dehh dan lihat hasilnya..... Gimana gampang kan... kamu juga bisa mengotak atik codenya lo....

Statistik Blog Dengan Shiniystat

Jika anda sayang ama blog anda tentunya pengen tau dunk perkembanganya... dan anda membandingkan seberapa besar pengunjung di hari ini, kemaren dan besok-besok, dan jika anda bandingkan dengan statistik blog yang lainya shiniystat ini lebih unggul dan lebih simple.. iya itu katanya orang-orang yang suka dengan shinystat tentunya wkakakak... tapi emang bener juga aku juga ngerasa seperti itu kok...
Aku akan jelaskan sedikit banyak fitur-fitur yang dimiliki shinystat

kamu bisa mengetahui pengunjung kamu yang online sekarang di blog kamu
Kamu bisa melihat berapa banyak pengunjung yang datang hari ini dan total keseluruhan pengunjung sejak pertama kali pasang shinystat
Mengetahui pengunjung blog kamu itu dari negara mana
Mengetahui pengunjung blog kamu dari mana datangnya misalnya, Dari search engine atau dari blog orang atau dari manalah.. pokoknya datang

Nah diatas kurang lebih fitur-fitur yang dianggap penting tapi masih banyak lagi kok fitur-fitur yang lain yg belum aku sebutin.. juga pasti fiturnya juga di update dunk dari pihak sninystat
Gimana berminat daftar aja ni http://shinystat.com

Nah sekarang ans juga kasih tau cara pasang Widgetnya di Blog gini nih...

daftar dulu di http://shinystat.com
Setelah daftar kamu masuk di menu Settings -----> Icons/Counters kemudian pilih icons yang kamu sukai dan setting dulu yang mau kamu tampilin di widgetnya
Setelah itu Kamu masuk HTML Code kemudian taruh codenya di Sidebar Blog kamu dengan cara masuk menu Layout di blog kamu kemudian Page Elements lalu Add a Gadget kemudian pilih HTML/JavaScript

Membuat Blogroll Atau Tempat Link Teman

Blogroll adalah media untuk menggabungkan link-link teman blogger kita, apabila anda punya teman blogger banyak sekali dan teman anda minta menyisipkan link blognya di blog anda apa yang terjadi...? blog kita akan sesak akan link-link teman blog anda jika kita tidak membuat blogroll dengan ringkas.. tul gak... ini aku punya contoh dibawah kotak bloggroll yang tidak banyak memakan tempat di blog anda

1. Model Text area
2. Model Marque (efek texs bergerak)
3. Penggabungan Text Area dan Marque

dari ketiga diatas anda bisa meilih yang mana yang anda suka...
Sekarang kita beranjak pergi ke cara pembuatnya... siap gak... hoi.. siap gak... siap yaa

Buka menu Layout
Page Elements
Kemudian Add A Gadget dan pilih HTML/JavaScript
kemudian taruh deh salah satu cara dibawah ini

1. Model Text Area

Model ini jika linknya banyak tidak akan buat blog jadi sesak karena jika link melebihi batas text area akan ada roll bar disampingnya jadi ada batas tempatnya gitu dehh pokoknya kurang lebih kaya itu penjelasanya. Nah sekarang kita beranjak ke cara pembuatanya
Copy Code dibawah ke HTML/JavaSCript

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#alamat link <br />
#alamat link2 <br />
#alamat link3 <br />
#link... seterusnya

</div>

keteranganya:....
width: 200px; : Adalah ukuran panjang text area tersebut
height: 200px; : Adalah Ukuruan lebar text area tersebut
#alamat link <br /> : itu adalah link teman blog kamu yang kamu mau pasang di blogroll kamu, jika link tidak ingin berada di garis baru buang saja code <br />

Linknya kamu harus isi dengan HTML seperi dibawah
<a href="http://kutu-blogspot.blogspot.com">tutorial blog</a>
atau jika ingin membuka di tabel baru tambahkan target="_blank" Jadinya Seperti ini <a href="http://kutu-blogspot.blogspot.com"target="_blank">tutorial blog</a>
Ingat kamu harus ganti link dan judul linknya teman blog kamu okey

2. Model Marque

Model marque ini link-linknya akan bergerak dari atas ke bawah/dari bawah ke atas dan juga bisa dari kiri ke kanan juga bisa sebaliknya

Cara pemasanganya taruh Code dibawah Di HTML/JavaScript

Keteranganya:
Up adalah pergerakan link bisa kamu ganti dengan down, left, right
100 adalah tinggi batas blogrollnya

Linknya kamu harus isi dengan HTML seperi dibawah
<a href="http://kutu-blogspot.blogspot.com">tutorial blog</a>
atau jika ingin membuka di tabel baru tambahkan target="_blank" Jadinya Seperti ini <a href="http://kutu-blogspot.blogspot.com"target="_blank">tutorial blog</a>

3. Penggabungan Text Area Dan Marque

Ini adalah penggabungan dari text area dan marque bloggroll

cara pemasanganya:
taruh Code dibawah di HTML/JavaScript

Keteranganya:
width: 200px; height: 200px; adalah panjang dan lebar batas text area
height="200" dan kalau yang tercetak biru ini adalah tinggi batas marque areanya

Linknya kamu harus isi dengan HTML seperi dibawah
<a href="http://kutu-blogspot.blogspot.com">tutorial blog</a>
atau jika ingin membuka di tabel baru tambahkan target="_blank" Jadinya Seperti ini <a href="http://kutu-blogspot.blogspot.com"target="_blank">tutorial blog</a>

Gimana Gampang THo..... jika masih bingung lontarkan saja pertanyaanmu di kotak komentar di bawah ini atau di Shoutbox

Ahhh udah dulu ahhhh cape nihhh nulis terus dari tadiii... bte-byee muachhh

Recents Post Dan Recents Comments Dengan Feed

Yang lalu anas udah pernah posting cara menampilkan Recents Post Dan Recents Coments dengan JavaScript dan kali ini anas posting hal serupa tapi menggunakan Feed. untuk pengertian Feed kamu bisa cari aja di mbah google banyak dechh kita ke pokok pembicaraan aja yaaaa tapi pokok dari Feed itu adalah isi dari blog (kurang lebih sesingkat-singkatnya gitu..) oke deh kita beranjak ke cara pemakaian (kaya produk aja) ya iya lahhh masa y iya donk dan ya iya tuuu wkakaka makin ngawur ajaa dehh anas ni... duh caranya ni dibawahh langsung aja gampang kok...

Pastikan aja lah udah Log In ke blogger
Kalau sudah ke menu Layout ---> Page Elements
terus Add A Gagdet pilih Feed
Nah... Feed URL isikan Seperti dibawah ini
Jika buat Recents Post taruh URL
http://AlamatBlog.blogspot.com/feeds/posts/default

Jika mau buat Recents Comments
http://AlamatBlog.blogspot.com/feeds/comments/default

Kemudian Continue dan Atur dehh yg lainyaa...
Jangan Lupa Ganti tulisan AlamatBlog yang tercetak tebal dan merah diatas dengan Alamat Blog anda okey

Aduhhhhh gampang deh gak perlu banyak mengeluarkan keringat... yang menting mau belajar dan berkreasi sendiri okeyy dah anas udah capekk bangettt... udah dulu ahhhh

Membuat Recent Comments

Wah biasanya kita sampai kesulitan mengecek komentar terbaru yang ada pada blog kita, soalnya komentar di lontarkan di postingan kita yang berbeda-beda, jadi kita akan merasa kesulitan untuk mengetahui siapa saja yang memberi komentar dan dimana dia melontarkan komentarnya juga isi komentarnya bagaimana.
Tapi jangan kawatir saya akan beri tips jadul tapi manjur yaitu cara membuat recent comments dengan JavaScript.
Dulu anas udah posting cara menampilkan postingan terbaru yang saya tulis sebelumnya, kali ini anas tulis juga membuat recent comments dehhh... ikuti yukkk

Pastikan dulu sudah Log In di blogger yah!
lalu beranjak ke menu Layout Kemudian Page elements
Kalau sudah! hoi sudah belom! sudah- sudah yaa jangan nangis... Lo kok malah mbulet-mbulet. Ahh serius nihhh Pilih tempat yang mau dipasangi terus Add a Gadget
Lalu pilih Menu HTML/JavaScript
Taruh Code Dibawah ini Kedalam HTML/JavaScript

<script style="text/javascript" src="http://sites.google.com/site/anasku2000/comments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan:
- Tulisan NamaBlogKamu yang tercetal tebal dan merah diatas harus kamu ganti dengan alamat blog kamu
- Angka 5 yang tercetak tebal dan biru itu menunjukkan Komentar terakhir yang ditampilkan di blog, kamu bisa mengubah sesuai selera kamu
Kalau sudah Simpan dehhhh

Aduhhh gampang kannnnn cuma itu aja gak ada yang ribet kok.
ohh yaa jangan sampai lupa isi komentar kamu dibawah yaaaa thx lo sebelumnya.... ihhh gemes dechhhhh

Pasang Counter Di Blog

Yap... Anas kembali lagi dehhh kali ini anas bahas tentang web counter. Pernahkah anda mengunjungi Website nah di disidebarnyaa ada seperti Nomor-nomor nah itu yang disebut Counter, jika anda belum mudeng juga anas akan kasih tau penjelsanya dan contohnya.
Apa itu Web Counter?
Web counter adalah Aplikasi tambahan pada web atau blog yang berguna untuk menghitung pengunjung yang mengunjungi blog kita. Contohnya seperti dibawah ini

Nah jika anda Udah tau pengertianya dan anda minat ni anas kasih tau cara buatnya

Buka website www.wowcounters.net
Kemudian Klik Link ** Click Here to Sign Up for your Free Counter ** yang ada di Website tersebut
Kemudian Isi Form sesuai data diri anda dan pilih sebuah Style kemudian Sign Up
Kemudian Copy Code HTMLnya Dan taruh di Blog kamu, dengan cara ke menu Layout --> Page elements kemudian Add a page elements terus pilih HTML/Java Script

Selesai Dehhhh Gampang kannnn jangan lupa isi komentar anda dibawah yaaa

Situs yang menyediakan Counter dan Statistik Blog:
http://www.easycounter.com/
http://sitemeter.com/
http://blogaja.com/
http://hitstats.com/
http://oggix.com/

Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Recent Post Dengan Thumbnail

Widget Recent Posts Dan Recent Comments Dari Blogger

Widget Daftar Isi / Sitemap

Cbox.ws Pengganti Shoutbox Shoutmix

Wibiya : ToolBar Blogger Canggih

Menambah Status Yahoo Messenger Di Gagdet Profil

Widget Sederhana Twitter

Widget Penerjemah Dari Google

Cara Menampilkan Satus G-Talk (Google Talk)

Membuat Widget Melayang

Widget Dari Feedjit

Menampilkan Status Camfrog

Membuat Label/Tag Clouds

Search Engine Dengan Background Dan Tombol Gambar

Membuat Berlangganan Lewat E-mail

Statistik Blog Dengan Shiniystat

Membuat Blogroll Atau Tempat Link Teman

Recents Post Dan Recents Comments Dengan Feed

Membuat Recent Comments

Pasang Counter Di Blog

About Me

Followers

Sample Text

Sample text

Daily Categories

Test Footer 1

Test Footer

Comment

Stay connected

Random Post

Template Information

Test Footer

Ads 468x60px

Entri Populer

Social Icons

Blog Archive

Featured Posts