Artikel Dan Informasi: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Jumat, 24 Desember 2010

Membuat area sidebar dalam kotak terpisah

Pasti kebanyakan para blogger udah tau yang mana sidebar. apalagi setiap harinya edit-edit tamplate tentu udah pada hafal dong. jadi nggak perlu di jelaskan lagi. sidebar dalam kotak terpisah artinya adalah menambah pembatas disekeliling sidebar agar terpisah dari area sekitarnya. untuk lebih jelas nya anda bisa lihat contoh di bawah ini.
Sidebar tanpa baris pembatas.

Sidebar dengan border pembatas

Untuk membuat nya sangat lah mudah.

Log in dulu ke blogger
Tata letak
Edit HTML
Cari kode
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Temukan yang hampir sama dengan kode diatas
Setelah ketemu hapus kode diatas ganti dengan kode dibawah ini.
.sidebar .widget {
background:#ffffff;
border:1px solid #0B610B;
margin:0 0 0.5em;
padding:0.5em;
font-family:"Trebuchet MS";
}
Silahkan di modifikasi lagi sesaui dengan warna tamplate blog anda.
Setelah itu simpan template anda dan liat hasilnya.

Selamat mencoba........

Cara pasang animasi intro flash di blogger

Article ini sebenarnya menjawab pertanyaan salah satu teman kita sheila. karna bawaan tamplate nya berbeda dengan kode css intro flash jadi ada sedikit harus dirubah. Nah sebelum memasang intro flash terlebih dahulu anda persiapkan file flash sebagai intro-nya.anda bisa menggunakan program populer seperti adobe flash, swish dll. pastikan file yang anda buat ukuran byte nya sekecil mungkin. atau bisa anda ambil atau temukan di mesin pencari search engine di google dengan kata kunci “ free intro flash “ dsb. Setelah file intro flash nya di buat atau tersedia simpan di tempat penyedia layanan hosting. kalau mau yang gratisan bisa coba menyimpanya di fileave.com atau fileden.com.

Lihat contoh animasi intro flash disini. Untuk membuatnya ikuti saja langkah-langkah dibawah ini.

Log in dulu ke blogger
Tata letak
Edit HTML
Sebelumnya Download lengkap dulu Template sebelumnya, buat jaga2...
Beri tanda centang di kotak kecil kanan atas Expand Widget
Kemudian cari kode <body> dan letakkan kode di bawah ini persis di bawah <body>
<div id='flashintro'>
<div align='center'> <p style='padding:50px;'> <object height='340' width='150'> <param name='movie' value='MYFLASH.swf'/> <embed height='410' src='http://encepsetiawan.fileave.com/animoto_video_NEW.swf' width='560'> </embed> </object> </p><p style='padding-top:5px;font-size:18px;font-weight:bold;color:#fff;'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'>Klik disini Masuk</a></p> </div> </div>
Selanjutnya Ganti height , width untuk tinggi dan lebar http://encepsetiawan.fileave.com/animoto_video_NEW.swf Ganti dengan Url yang kamu punya
Selanjutnya cari kode <b:includable id='main'>
Letakkan kode dibawah ini persis di bawahnya
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body {
background-color: #000000;
background-image: none;
}
#flashintro {
text-align:center;
margin:auto;
padding:auto;
}
#outer-wrapper{display:none;} </style>
<b:else/>
<style>#flashintro{display:none;}</style>
</b:if>
Ada kemungkinan dengan kode diatas tidak berhasil itu di karna kan nama kode css di outer-wrapper nya yang berwarnah merah berbeda. seperti halnya teman kita sheila.
Khusus untuk blog nya si sheila atau kode ccs teman yang berbeda anda bisa mencoba yang di bawah ini. yang perlu di ganti yaitu tulisan yang berwarnah merah di atas sehingga menjadi begini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body {
background-color: #000000;
background-image: none;
}
#flashintro {
text-align:center;
margin:auto;
padding:auto;
}
#head{display:none;}
#page{display:none;}
</style>
<b:else/>
<style>#flashintro{display:none;}</style>
</b:if>
Selanjutnya Untuk menghilangkan intro flash di halaman page elemen cari ]]></b:skin>
Letakkan kode dibawah ini di atasnya
.body#layout #flashintro {display:none;}
Kemudian Save Tamplate

Catatan :

Pengaturan Untuk Halaman Depan ( tab Home ) jika anda mempunyai tab menu/ navigasi maka halaman depannya yang biasa di wakili dengan menu Home/depan/beranda mesti di atur ke halaman search/label/?max-results=4 atau 5/6 dst yakni;
<a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'> Home </a>
Begitu juga untuk link Home di Page Navigation –nya ( yang ada di bawah Older – Home – Newer ), untuk Home –nya atur dengan link di atas. sumber catalog-tutorial

Selamat mencoba.........

Pasang kotak pencarian di blog

Alhamdulillah hari ini kita ketemu lagi. semoga sobbat blogger kabarnya baik-baik aja... amin...... kali ini postingan baru ku yang mungkin nggak begitu berharga banget bagi master-master blog. tapi bagi kami yang pemula sangatlah membantu dengan hadirnya article ini.

kegunaan kotak pencarian ini sangat lah berguna untuk mempermudah pengunjung mencari article / postingan yang di maksud di blog kita. untuk pasang nya anda cukup ikuti langkah-langkah dibawah ini.

log in keblogger dulu
klik layout/tata letak
kemudian klik widget/add gadget
kemudian pilih HTML/Java script
Masukan kode di bawah ini

ganti tulisan berwarna merah dengan alamat blog anda
untuk ukuran bisa diganti ukuran SIZE nya
kemudian SAVE selesai deh

Selamat mencoba....

Pasang Recent comment di blogger

Hai sahabat ketemu lagi dengan artikel terbru ku. kali ini kita akan membahas cara pasang Recent comment di blogger. ini untuk menarik pembaca untuk berkomentar dan sekaligus mempromosikan blognya sendiri, ada baiknya kita memasang recent comments di sedebar. bagi anda yang tertarik untuk memasang nya anda bisa mengikuti langkah di bawah ini.

- Buka Dashboard blog anda
- Klik Layout, lalu pilih Page Elements
- Klik Add a Gadget, lalu pilih Feed
- Pada jendela Configure Feed, masukkan feed komentar blog anda. Contoh: http://jayaputrasbloq.blogspot.com/feeds/comments/default
- Klik Continue

- Beri judul Recent Comments pada kotak Title, lalu klik Save
- Klik Save Lagi
- Selesai

selamat mencoba sahabat blogger... jangan lupa commentar nya ya

Pasang Daftar isi pada blog

klik gambar untuk memperbesarKeberadaan daftar isi sangat lah penting untuk para pengunjung... karna sangat membantu para pengunjung untuk mencari article yang mereka temukan. liat contoh klik disini .untuk membuat nya sangat lah mudah ikuti saja langkah-langkah di bawah ini:

Langkah Pertama

Log in dulu di blogger
Klik Layouts --> Edit HTML -->
Beri centang di Expand Widget Template.
cari kode dibawah ini

<b:include data='post' name='post'/>
ganti kode diatas dengan kode dibawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"><data:post.title/></div></a> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>

Save tamplate

Langkah Kedua

klik layout
Klik Add a Gadget
Klik HTML/Javascript
Masukan kode di bawah ini

<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar Isi»</a>

Ganti yang berwarna merah dengan alamat blog anda
Save Lihat hasilnya...

Selamat mencoba

Pasang widget share facebook pada blog

Pasang widget share facebook pada blog itu topik pembahasan kita hari ini. ini bertujuan untuk mempublikasihkan atau shring posting atau artikel blog ke teman blogger dan memperluas jaringan blog anda dan meningkat kan SEO, ya begitulah kata para master blogger. sebenarnya ini menjawab salah satu teman blogger yang bertanya di shoutmix blog ini. begini pertanyaanya. bang jay gimana cara pasang widget share facebook ke blog kita. nah sekalian saya posting aja deh, biar ngerti bagi yang belum mengerti dan tentunya menambah tutor di blog ini.

untuk membuatnya ikuti langkah-langkah di bawah ini:

Login ke blogger
Edit tamplate
Centang "expand widget template"
Kemudian cari kode <span class='post-author vcard'>
Letakkan kode dibawah ini persis dibawah nya
<b:if cond='data:post.url'>
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'><img alt='This share facebook' border='0' src='http://img32.imageshack.us/img32/5742/sharefacebook.jpg'/></a>
</b:if>
Kemudian simpan dan lihat hasilnya

Cara Mengganti Kursor pada Blog anda

Anda bosan dengan tampilan kursor yang biasa-biasa saja? maka kali ini anda mempelajari bagaimana mengganti atau merubah kursor anda misalnya menjadi kursor yang bergerak atau animasi. untuk membuat kursor animasi sesuai keinginan anda bisa dilakukan dengan menggunakan software-software pembuat animasi. Namun jika anda tidak menguasai software tersebut, maka ada cara yang lebih mudah dilakukan. diinternet banyak sekali situs-situs yang menawarkan kursor animasi. anda bisa mendapatkan kursor yang anda inginkan didalam situs seperti itu.

Berikut langkah-langkah yang harus anda lakukan:
Mencari kursor gratis terlebih dahulu

Berikut ini langkah-langkah pencarian situs penyediaan kursor gratis, lalu mendapatkan kursor yang anda inginkan dan membuanya siap ditempatkan dalam blogspot anda:

Untuk mencari situs penyedia kursor gratis, gunakan Search engine dengan penulisan kata kunci pencarian misalnya "free animated cursor" atau anda bisa kunjungi situs http://www.cursorpedia.com/ untuk mendapatkannya
Bila anda telah menemukan situs yang tepat dan model kursor animasi yang anda sukai, maka pastikan bahwa anda memperoleh URL dari animasi tersebut.
Contoh URL animasi yang didapatkan dari situs www.cursorpedia.com adalah seperti ini: http://www.cursorpedia.com/ani/heart_heart_32.ani
Kebanyakan kursor telah memiliki kode lengkap yang khusus diperuntukkan bagi situs tertentu, misalnya MySpace. bila anda menemukan yang seperti ini, maka ambil saja URL kursornya.
Pastikan alamat URL ini mempunyai ekstensi .ani (untuk kursor animasi) atau .cur (untuk kursor biasa) apabila anda hanya mendapatkan file berformat.ani atau .cur (bukan sebuah URL), maka anda harus meng-upload kedalam webhosting khusus untuk image seperti www.photobucket.com
Selanjutnya sisipkan URL kursor animasi anda ke dalam script berikut ini
Cursor: url ("URL KURSOR");
Gantilah teks "URL KURSOR" dengan URL kursor yang anda peroleh. Contohnya seperti ini:

cursor:url("http://www.cursorpedia.com/ani/heart_heart_32.ani");
Dengan script diatas maka kursor animasi anda telah siap diaplikasikan kedalam halaman Blogspot anda.

Mengaplikasikan Kursor dalam Blog anda

Setelah anda mempunyai script kursor seperti bahasan diatas, maka selanjutnya akan dijelaskan bagaimana cara mengaplikasikan kursor ke dalam halaman blogspot milik anda.

Berikut ini caranya:

Login terlebih dahulu kedalam akun Blogspot anda
Setelah itu klik menu Layout pada halaman dashboard
Selanjutnya klik menu EDIT HTML
Kemudian Cari kode body {
Setelah ketemu masukkan script kursor yang anda miliki tadi seperti ini
body {
padding: 0;
margin: 0;)
font-size: small;
color: $textcolor;
background: #fff;
text-align: center;
cursor:url("http://www.cursorpedia.com/ani/heart_heart_32.ani");
}
Setelah itu klik tombol Save Template dan lihat hasilnya

Selamat mencoba.......

Cara menambah widget feedjit di blog kita

Cara menambah widget feedjit di blog kita - Tutor kita kali ini adalah Cara menambah widget feedjit di blog kita. di mana sebelumnya saya pernah membahas ini. tapi seiring berjalan nya waktu, feedjit mengalami perubahan tata cara nya. tapi tidak masalah saya akan membuat tutor yang baru buat sobat yang memerlukan aplikasi feedjit ini. berikut ini cara-caranya.

Kunjungi link http://feedjit.com/plansPricing/.
Kemudian pada halaman berikut nya terdapat 3 pilihan
Pilih yang pertama Feedjit Completely Free klik Sign UP
Disana anda di minta memasukkan nama dan alamat email anda
Kemudian pilih warna costum dan pilih tempat yang ingin anda instal, di sana terdapat blogger, wordpres dan lainnya
Berikutnya Klik Go
Kemudian Click to open a new window and install on blogger untuk menginstall nya
Pada halaman berikut nya pilih halaman blog tempat feedjit yang ingin anda instal, ganti judul jika ingin menggantinya.
Kemudian klik menambah widget
Selesai...

Sekarang lihat halaman blog anda. di sana akan terdapat widget feedjit yang anda tambahkan tadi. semoga bermanfaat dan salam sukses...

Pasang scroll box di blogger

Untuk Menanggapi salah satu pertanyaan teman blogger tentang Bagaimana pasang scroll box di halaman posting blogger.sangat lah sederhana . untuk membuat halaman seperti di bawah tidaklah harus membuat kode html yang sangat banyak, melainkan hanya sedikit kode untuk membuatnya. Anda pasti penasaran kan seperti apa kodenya. lihat kode di bawah ini :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

isi halaman

</div>

contoh :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

<a href="http://arrayzonecome.blogspot.com/2010/Desember/pasang-related-post-bergambar.html"> Pasang related post bergambar</a>
<br />
<a href="http://arrayzonecome.blogspot.com/2010/Desember/pasang-recent-comment-di-blogger.html">Pasang recent comment di blogger</a>
<br />
<a href="http://arrayzonecome.blogspot.com/2010/Desember/menambah-koleksi-musik-pilihan.html">Menambah koleksi musik pilihan</a>
<br />

</div>

Hasilnya :

Kemudian Simpan » selesai deh.

Sedikit penjelasan :

Didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yang di pakai :

overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.
Good Luck....
Selamat mencoba.....

Pasang script alert penutup

Pada postingan dahulu Pasang script alert pada Blog yaitu membuat pesan pembuka pada blog. Namun pada kesempatan kali ini saya akan membahas bagaimana membuat pesan penutup nya. Sebenarnya caranya sama saja dengan postingan tentang membuat script alert, hanya saja kodenya yang berbeda. pasti pada penasaran kan.ikuti langkah-langkah dibawah ini.

Log in dulu ke blogger
klik tata letak
Edit HTML
Cari kode </head>
kemudian letakkan kode dibawah ini di atas kode </head>

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Mau Kemana Besok Mampir lagi YA...! Terima Kasih Atas Kunjungannya');
}
parent.window.onunload=goodbye;

</script>
Ganti tulisan berwarnah merah dengan kata-kata yang anda inginkan
kemudian Simpan selesai deh.

Selamat Mencoba...........

Pasang script Alert pada blog

Hai sobat blogger.... kali ini saya bahas tentang pasang script alert pada blog. tentu sobat bertanyakan.... apa sih kegunaan pasang script alert pada blog. jawaban nya simpel aja... kegunaannya untuk ngucapin slmat datang, atau untuk mengingat para pengunjung untuk berkomentar di blog kita. supaya nggak banyak celoteh nya kita langsung aja yuk keisinya...

Pertama login dulu ke blogger
klik tata letak
download dulu template anda.(untuk mengatasi terjadi hal yang nggak diinginkan)
cari kode </head>
copy paste code berikut di atas kode </head> (ganti tulisan berwarna merah dengan yang km inginkan)
<SCRIPT language='JavaScript'>alert("selamat datang di blog jaya jangan lupa comment");</SCRIPT>
simpan selesai deh... silahkan buka blog kamu

Cara membuat Judul Address bar tampil beda

Hai sobat blogger ketemu lagi dengan artikel baru ku, mungkin sebagian sobat ini artikel nggak asing lagi di telinga anda. tapi untuk memperlengkap tutor di blog ini pastinya sangat bermanfaat banget. Kita kembali ke topik pembahasan saja. Cara membuat atau merubah judul address bar tampil beda. Nah mungkin sebagian sobat senang dengan tampilan blog yang unik dan menarik. anda bisa terapkan tutor yang satu ini. Anda bisa mencobanya terlebih dahulu untuk milihat hasilnya. jika anda tidak senang anda bisa untuk menghapusnya kembali.

Berikut cara-cara merubah judul address bar anda tampil beda:

Login dulu ke akun blogger anda
Tata letak
Edit HTML
Cari kode <head>
Kemudian copy paste kode di bawah ini dan letakkan di atasnya
<script type="text/javascript">
//<![CDATA[
function tb9_makeArray(n){
this.length = n;
return this.length;
}
tb9_messages = new tb9_makeArray(1);
tb9_messages[0] = "*** [[> Welcome To AriesZone <]] ***++";
tb9_rptType = 'infinite';
tb9_rptNbr = 5;
tb9_speed = 100;
tb9_delay = 2000;
var tb9_counter=1;
var tb9_currMsg=0;
var tb9_timerID = null
var tb9_bannerRunning = false
var tb9_state = ""
tb9_clearState()
function tb9_stopBanner() {
if (tb9_bannerRunning)
clearTimeout(tb9_timerID)
tb9_timerRunning = false
}
function tb9_startBanner() {
tb9_stopBanner()
tb9_showBanner()
}
function tb9_clearState() {
tb9_state = ""
for (var i = 0; i < tb9_messages[tb9_currMsg].length; ++i) {
tb9_state += "0"
}
}
function tb9_showBanner() {
if (tb9_getString()) {
tb9_currMsg++
if (tb9_messages.length <= tb9_currMsg) {
if ((tb9_rptType == 'finite') && (tb9_counter==tb9_rptNbr)){
tb9_stopBanner();
return;
}
tb9_counter++;
tb9_currMsg=0;
}
tb9_clearState()
tb9_timerID = setTimeout("tb9_showBanner()", tb9_delay)
}
else {
var tb9_str = ""
for (var j = 0; j < tb9_state.length; ++j) {
tb9_str += (tb9_state.charAt(j) == "1") ? tb9_messages[tb9_currMsg].charAt(j) : "____"
}
document.title = tb9_str
tb9_timerID = setTimeout("tb9_showBanner()", tb9_speed)
}
}
function tb9_getString() {
var full = true
for (var j = 0; j < tb9_state.length; ++j) {
if (tb9_state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = tb9_getRandom(tb9_messages[tb9_currMsg].length)
if (tb9_state.charAt(num) == "0")
break
}
tb9_state = tb9_state.substring(0, num) + "1" + tb9_state.substring(num + 1, tb9_state.length)
return false
}
function tb9_getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
tb9_startBanner()

//]]>
</script>
Ganti tulisan yang berwarnah merah dengan yang anda inginkan
Kemudian simpan tamplate anda dan lihat hasilnya

Selamat mencoba..........

Senin, 20 Desember 2010

Cara Membuat Shoutmix/ Chat boX

Ikuti Langkah-LangkahnYa>>>>

yang pertama tama musti anda lakukan adalah kunjungi situs yang ini dulu silahkan di klik http://www.shoutmix.com, setelah anda klik link tersebut lalu anda akan di hadapkan ke halaman register/pendaftaran dan masukan data anda sesuai dengan yang di ingan kan di form tersebut... yaitu di kolom yang pertama dari atas silahkan nama username anda (terserah anda) setelah itu di kolom kedua silahkan isikan pasword yang ingin anda pakai untuk login, kemudian di kolom yang ketiga masukkan ferifikasi pasword yang anda masukkan tadi di kolom yang kedua (inget! pasword harus sama dengan yang anda isikan di kolom yang kedua tadi), kemudian di kolom yang ke empat silahkan masukkan nama asli anda, dan yang terakhir masukkan alamat email yang anda punya. nah..setelah anda lengkap mengisi data diri anda termasuk user name dan pasword lalu jangalupa anda mengasih tanda centang atau cecklist pada tulisan " I have read and agree to the Terms of Service." setelah itu tekan tombol "continue". setelah anda tadi tetrdaftar dan anda sekarang ada di halaman pemilihan style chat box. anda bisa memilih style sesuka hati anda dengan cara kasih tanda titik atau cecklist pada style chat box anda pilih, setelah itu masukkan ferisikasi kata yang ada di gambar sebelah kanan kolom. setelah itu anda klik "continue" selesai... dan tahap selanjutnya adalah pengambilan code scriptnya.. yaitu dengan cara klik menu di paling atas yang bertuliskan " settings ", di dalam halam seting ini anda bisa mengkonfigurasi setingan chat box anda, seperti mengubah warna chat box, dan lain2.. nah untuk mengkonfigurasi setingan ini anda bisa lakukan sendiri mendatang ( saya yakin anda bisa, dulu saya juga pas pertama juga binun.. heheh ) dan yang paling penting adalah tahap pengambilan code scriptnya.. setelah anda di halaman setting anda cari aja tulisan " Get codes " yang berada di kotak sebelah kiri atas (klik aja tulisan itu) anda akan dihalam baru dan cari dan klik lagi yang bertuliskan " Place shoutbox on webpage " setelah itu muculah code scriptnya di bawah... dan silahkan copy code script tersebut dan pastekan di halaman blog anda... ,mengenai penempatan nya sesuai dengan selera anda.. dan yang paling baik di tempatkan di bagian "sidebar" blog anda.. cara menempatkan di sidebar pun cukup mudah, anda tinggal login ke blogger setelah itu tekan menu di blogger yg bertuliskan "layout" abis ntu pilih lagi pilihan " Add a Page Element " ( pengaturan dalam bahasa inggris, jika blog anda memakai pengaturan bahasa indonesia silahkan di kira2 sendir arti yang sama dengan kata " Add a Page Element "), kemudian akan muncul jendela baru dan pilih lagi pilihan " HTML/JAVASCRIPT " dan masukkan code script chat box tadi ke kolom yang tersedia dan tekan tombolo save/simpan... selesai sudah, anda bisa ngeceng dengan pengunjung blog anda di chat box tadi... wekekeke....
ya udah.... sekian dulu yah.. kalo masih ada yang binun tinggalkan pesan di kotak komentar di bawah yah.... mungkin bisa bermanfaat buat anda kedepannya....
dan ga lupa saya ucapkan selamat mencoba dan sukses... kalo sukses jangan lupa kasih kabar juga yah di kotak komentar oce..................
InsyaAllah Bisa......

Sabtu, 18 Desember 2010

Browse : Home » Address Bar, Tutorial Blog » Cara Mengganti Ikon Pada Address Bar

Cara Mengganti Ikon Pada Address Bar

Jika anda mempunyai blog pada Blogger.Com tentunya tampilan default pada Address Bar Blogger atau yang disebut dengan favicon adalah seperti pada samping sebelah kanan ini.

Tetapi bagi anda yang ingin mengganti tampilan tulisan huruf B pada ikon address bar (kolom alamat pada tab & kolom alamat url untuk mengetikkan alamat situs) pada Blogger sangatlah mudah anda hanya akan menambahkan kode pada HTML template blog anda yang ingin diganti tampilan huruf B (ikon pada address bar blogger) tersebut.

Berikut Caranya :

Dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).

Jika anda susah untuk membuat ikon/icon pada address bar dibawah ini ada beberapa tool/peralatan yang dengan mudah untuk membuatnya.

http://www.favicongenerator.com atau
http://www.favicon.co.uk :
Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau
http://favicon-generator.org
atau
http://www.favicon.cc :
Anda dapat membuat favicon sendiri sesuai kreasi Anda

Setelah anda selesai membuat icon favicon/address bar langkah langkah selanjutnya adalah menyimpan gambar yang sudah dibuat lalu kita upload pada hosting gambar yang biasa kita gunakan seperti photobucket, Imageshack, Album Web Picasa dll. nanti akan dibahas dibawah tutorial.

Setelah login pada blogger
kemudian masuk ke "Tata Letak --> Edit HTML"
Kemudian copy kode berikut dibawah ini :

<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>

atau bisa juga seperti kode dibawah ini :

<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>

Langkah selanjutnya adalah menaruh kode tersebut diatas sebelum/diatas kode :

</head>

Ganti huruf yang berwarna merah dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di tempat hosting gambar.

Langkah kemudian adalah menyimpannya dan selesai.

Panduan Hosting Gambar :

sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :

Login ke picasa dengan account google di http://picasaweb.google.com
Tekan tombol I accept.
Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
Tekan tombol browse dan arahkan pada file yang akan anda upload
Tekan tombol start upload untuk menguploadnya ke dalam server picasa
Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
Klik kanan gambar tersebut dan pilih properties.
Anda akan mendapatkan URL gambar yang kurang lebih seperti dibawah ini
http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
Link gambar yang bertuliskan
http://img98.imageshack.us/img98/9617/image3cr0.gif
anda ganti dengan link yang baru yaitu seperti
http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
Lakukan hal yang sama untuk gambar2 yang lain

atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

Note : Images by Mr. Kendhin Demikianlah artikel tentang Cara Mengganti Ikon Pada Address Bar
Kembali ke Beranda Blog Trik Tips Tutorial
Semoga Bermanfaat..

Artikel Dan Informasi