12 Juni 2011

Cara Ganti Icon Blog pada Address Bar

Kalo kita membuka website atau blog, biasanya ada icon di sambing Address Bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini .Tapi jika kita tidak puas dan ingin mengganti dengan icon lain bisa saja. Contohnya seperti icon Jempol di Tab Bar Blog ini.

Nah berhubung kebetulan ada teman yang nanya soal cara mengganti icon tersebut, maka kali ini saya akan coba buat tutorial singkat tentang hal tersebut. Caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel. Setelah itu upload file icon yang udah dibuat tadi ke Photobucket atau web sejenisnya. Tapi kalo kalian males untuk membuat icon sendiri bisa langsung cari aja di Google gambar sesuai dengan keinginan dan ukurannya.

Setelah itu masuk ke Dashboard --> Layout --> Edit HTML dan tempatkan kode/script berikut tepat sebelum kode </head> (biar gak repot cari dengan CTRL+F).
<link href='http://saungsandy.blogspot.com/ikongue.gif' rel='SHORTCUT ICON'/>
Ganti kode yang dicetak warna merah dengan link gambar yang kalian inginkan. Setelah itu SAVE dan selesai deh...

FOR BONUS
Skalian saya kasi tutorial tentang caran membuat text berjalan di Tab Bar. Caranya gampang, tinggal tempatkan kode/script berikut setelah kode <head>
<script language='JavaScript'>var txt=&quot;Welcome To Saung Sandy &quot;;
var kecepatan=130;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
</script>
Ganti text warna merah sesuai dengan keinginan kalian. Selesai deh...
Met nyoba ya..:D

NB: Nih Screenshot hasil penerapannya di blog saya

157 Komentar:

  1. dapetttt ilmu...senengNa,ntr mauuuu nyobain jg dech:))

    Thengkyu Sandy^^

    BalasHapus
  2. tq mas saya lagi nyoba hehe

    BalasHapus
  3. saya sudah nyoba cara gnti icon tp ggal....

    BalasHapus
  4. sy nyoba pakai wordpress. berhasil! :-D

    BalasHapus
  5. @Make Ur_LiFe : Coba dicek lagi mungkin ada step yg kelewat...:D

    BalasHapus
  6. Kok Gak Bisa Malah Error ,, Tolong Pencerahaannya Thx's

    BalasHapus
  7. sama ko error klo pakai blogger,,,,,,,,

    BalasHapus
  8. gagal mass ,,

    saya pakai bloger ,,

    BalasHapus
  9. gak bisa mas bro. saya pake blogger.

    BalasHapus
  10. kalo teks berjalannya bisa, yg gak bisa ganti iconnya. mohon dibantu ya..

    BalasHapus
  11. mas,,cara buat table komentar di blog gimana..?

    BalasHapus
  12. Buat yang masih gagal coba di baca lagi step2 nya...
    @logan : maksudnya tabel komentar apa ni? belum paham maksud km...:)

    BalasHapus
  13. Makasih Info, saya udah coba & dua_duax brhasiL. . .

    saya pke photobucket trus piLih direct Link. . .

    BalasHapus
  14. sangat berguna bagi saya yang masih amatir :)) thanks yaaa sekalian juga tolong follow blog saya ada tutorial juga :D

    BalasHapus
  15. trims gan tipsnya...mampir ke gubug ku ya? Ditunggu caci makinya..hehehe...

    BalasHapus
  16. kebetulan gw baru belajar ni.,
    thanxz yya infonya,,, :)

    BalasHapus
  17. mas tolong donkk caranya di jelaskan mas...
    kalo bisa di kasih gambar biar jelas
    :D
    (newbie)

    BalasHapus
  18. wah keren juga, saya mau coba ah ke blog saya

    BalasHapus
  19. lumayan dapat tips baru
    kunjungi juga www.blackdakota.co.cc

    BalasHapus
  20. thnx bgt kk!!

    Open my blog ya. www.qolby-182.co.cc

    BalasHapus
  21. salam kenal dik,, ilmunya sangat bermanfaat,, bila ada waktu ,singgah yah ke rumah.

    BalasHapus
  22. artikel yang bagus mas,....
    di tunggu kunjungan balik nya....
    makasih ^ ^

    BalasHapus
  23. dapat ilmu
    makasih ia :)

    BalasHapus
  24. OK mas bro..
    udh di coba & berhasil
    thx ilmunya.. =)

    BalasHapus
  25. Ane uda follow...jagn lupa follback ya..di tunggu..!! heeeee..

    BalasHapus
  26. thanks ya bro, udah bisa :D

    BalasHapus
  27. Thanks ilmunya...

    BalasHapus
  28. thanks bgt gan tutornya bermanfaat bgt... salam bloger

    BalasHapus
  29. thanks ya :) BERHASIL ^^

    mantap dah! keep posting terus ya...

    BalasHapus
  30. Sama-sama...
    huhuhu...Senangnya diriku kalo postinganKu berguna buat orang lain :D

    BalasHapus
  31. bisa d coba tuh...
    o iya,,, gw bleh copy gk tuh?? buat postingan di blog gw??

    BalasHapus
  32. mantap euy kang,,,, thanks ya kang,,,, sipp dah,,,

    BalasHapus
  33. wah mantep nich sob, coba ach...nice post

    BalasHapus
  34. Yang mau co basilahkan dicoba semoga sukses makmur lancar jaya sentosa selamanya!! :D

    Dan yang mau Copas Tutorial silahkan Copas Sesuka hati, Makin berguna bagi orang lain kan makin banyak Amal saya (Lumayan buat ngimbangin sama dosa).Xixixi

    TAPI jangan lupa kasih Link http://saungsandy.blogspot.com tentunya...:D

    BalasHapus
  35. mantap gan... thanks, jempol dah..

    BalasHapus
  36. Makasih atas infonya, semoga bisa diterapkan di blog saya =)

    BalasHapus
  37. makasih ya ga info nya..
    http://iniblogane.blogspot.com

    BalasHapus
  38. thanks infonya :D

    BalasHapus
  39. Balasan
    1. Coba di cek lagi..mungkin ada Langkah2Nya yg belum benar..Semangat! :D

      Hapus
  40. wah mantap infonya ..
    sukses blog nya !!

    BalasHapus
  41. kok susah ya. saya gagal tuch

    BalasHapus
  42. wah gampang., ne gantinya...
    bwt sobat2 baca dengan teliti dulu...!!
    :D

    BalasHapus
  43. trims mas buat infonya.. silahkan main ke blog-ku juga yah di http://nyemplungshops.blogspot.com.. sukses terus mas!

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  44. mantafff gan..monggo diliat hasilnya
    http://jayantimalang.blogspot.com/
    hehehehe..

    BalasHapus
  45. waah, sangat bermanfaat... akhirnya bisa juga... terimakasih informasinya ^^. kalau bisa silakan dilihat...
    www.nadnadhifa.co.cc

    BalasHapus
  46. makasih bro saya sudah coba semuanya ternyata hasilnya bagus juga bro

    BalasHapus
    Balasan
    1. ini alamat blog ku http://anggawar.blogspot.com/ makasih sudah berbagi ilmunya kk

      Hapus
  47. All : Thanks udah mampir ke Blog ini.. pagi ini gw akan jalan2 ke Blog kalian juga :))

    BalasHapus
  48. halo bang sandy salam kenal :)
    makasih bgt nh ilmunya hehe. jika ada waktu silahkan mampir ya ke blog gua http://jakaawaludin.blogspot.com/ hihi :p

    BalasHapus
  49. saya suka template blog anda. simple + kreatif + menarik :)
    thanks buat tipsnya kawand..
    #newbie :D

    BalasHapus
  50. makasih infonya kakak..
    sangat membantu bagi saya yang masih pemula...

    BalasHapus
  51. Thank's info nya bro..nice.

    BalasHapus
  52. langsung berhasil dipercobaan pertama!!!
    thx....
    buat yang belom berhasil coba perhatiin tanda petik satu di kode skripnya, kalo kehapus ga mungkin bisa, itu kemungkinan besar kehapus soalnya!!!!

    maaf nyubi sedikit sotoy!!! :D
    minta pollownya dong biar semangat nulis!!
    here we go >>> http://thousand-links.blogspot.com

    BalasHapus
  53. oh iya sekalian mau ngasih masukan!
    di blog ini kalo ga mainin mouse kurang lebih 1 menit ada saving mode-nya ya?!
    itu sedikit ganggu, tadi pas lagi baca2 eh tau2nya jadi gelap layarnya!!!

    hihihihihihi, keren sih tapi ganggu pengunjung blognya!! :D

    BalasHapus
    Balasan
    1. Iya dikasih Saving Mode nya biar Hemat energi #tsah :D
      Tapi Thanks masukannya yee..

      Hapus
  54. keren juga postinganya..n dah gue praktekin gan...

    follow back ya gan...
    http://arti-psikologi.blogspot.com/

    BalasHapus
  55. tetep aja ga bisa gan...
    udah teliti banget gan...
    coba agan ganti icon blog agan, kl bisa coba tunjukin screenshoot penempatan kodenya ... ikon blog agan masih blogger.
    makasih gan...

    salam
    http://belanjaonlineindonesia.co.cc

    BalasHapus
  56. Oke deh...kalo masih ada yang gagal/gak ngerti cara ganti icon Blognya dengan cara ini. Saya akan buat Tutorial yang lebih mudahnya. klebetulan BLOGGER punya fitur baru sehingga kita gak perlu melalui edit HTML (kaya sebelumnya). Nih langsung aja di klik disini

    BalasHapus
  57. @ benny hidayat : aq posting hampir sama dengan postingan agan sandy57 ... cekidot,moga berhasil

    http://www.portalblogger.co.cc/2012/05/ganti-icon-blogger.html

    BalasHapus
  58. mampirlah kebloggku ada kekurangan apam dibloggku
    http://sihombing-thedarkbing.blogspot.com/

    BalasHapus
  59. sudah dicoba, ternyata bisa.. Makasih ^^

    BalasHapus
  60. mantep ni blog,.. standar tp menarik.. :)

    BalasHapus
  61. Makasih gan Ilmunya
    Jangan Lupa Mampir Di Blogku Ya
    http://hjgondes.blogspot.com/
    jangan lupa difollow ya ntar gwa followback yg udah follow..

    BalasHapus
  62. Thanks All..I'll visit back..:)

    BalasHapus
  63. berhasil bang, makasih :)
    mampir ke blogku ya
    http://limited-edition23.blogspot.com/

    BalasHapus
  64. sippa gan..follow back my blog di aim-mualim.blogspot.com
    thankz..

    BalasHapus
  65. makasih buat infonya.. visit to my blog ya.. :)) http://khusnulintheworld.blogspot.com

    BalasHapus
  66. terima kasih infonya gan ,,,,mantap bangets

    BalasHapus
  67. makasi ya kang ternyata berhasil succes

    BalasHapus
  68. kok saya enggak bisa ya gan?

    BalasHapus
  69. keren gan ilmunya.. mampir ke blog ane gan www.supriatna.co.cc

    BalasHapus
  70. siip.. mkasih ya.. jgn lupa visit my blog ya...

    BalasHapus
  71. oya nieh blog ku gan.. http://zulvangames.blogspot.com

    visi yah.. ^_^

    BalasHapus
  72. Mkasih infonya gan (^_^)
    Visit blog aku ya: gustianime.blogspot.com

    Follow juga ya,,ntar aku follow juga bagi yg ngefollow :)
    Thanks

    BalasHapus
  73. Mkasih infonya gan (^_^)
    Visit blog aku ya http://1freeinvestment.blogspot.com/

    salam blogger
    thanks

    BalasHapus
  74. Thanks juga ya..I'll visit yours too :)

    BalasHapus
  75. Kok di aku kata2 welcomenya engga jalan ya ? Trus fotonya juga masih kayak biasa, emmm kira2 apa nya ya yg salah ? :(
    visit juga ya http://fidyakhrahayu.blogspot.com/
    Makasih sblumnya :)

    BalasHapus
  76. @coba lebih teliti lagi gan dg kode2nya..pasti bisa kok. :)

    BalasHapus
  77. thanks... infony bermanfaat banget... ^_^

    BalasHapus
  78. PERTAMAXX

    BalasHapus
  79. Thanx bgt infonye, wat newbie seperti w...
    it work

    BalasHapus
  80. Semoga blognya makin ramaaaiii hehehe

    BalasHapus
  81. kalo mau masukin gambar yang bergerak gimana

    BalasHapus
  82. makasih banget yaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    BalasHapus
  83. makasih banget ya gan! gw lagi lomba2 nih sama temen2 sekelas gw biar tau siapa yang blog nya paling bagus, soalnya buat ujian praktek TIK, guru gw nyuruh biat blog,

    BalasHapus
  84. eh gan, itu gambarnya kalo udah ada digimanain? di upload ke mana? terus itu di javascript nya kan pake alamat blog sendiri, nah terus gambarnya dari mana?

    BalasHapus
    Balasan
    1. Gambarnya di Upload dulu gan bisa ke photobucket.com, stelah itu ambil link url gambarnya gan..

      Hapus
  85. sy dh nyoba pke ggle crome updaten terbaru gk bisa tampil....kenapa ya gan??tp klo pake firefox bisa....

    BalasHapus
  86. than'x y Gan di blog ane work , lain kali mampir ya ke http://a7xgodhatesus.blogspot.com/ Di tunggu komentarnya

    BalasHapus
  87. ane dak bisa gan knp ya padahal dah ngikutin smua petunjuk gan, mohon bimbingan
    -salam bebek

    BalasHapus
  88. agan, follow back donk agan. .,
    hehe
    salam blogger ya

    http://drafterkita.blogspot.com/

    BalasHapus
  89. Gan kok kok ane malah gagal? malah blog ane sekarang katanya kena malware T.T

    BalasHapus
  90. iseng-iseng buka ngedit blog lagi, sekitar 2 tahun yang lalu aq coba, sekarang tak coba lagi, masiiiih saja gak bisa, kenapa yaa??

    BalasHapus
  91. Mantap ternyata bisa terima kasih gan

    BalasHapus
  92. Wow, Setelah ane coba di blog ane ternyata WORK ! :)
    thanks iya gan buat informasi nya ..
    mampir juga ke blog ane gan .. makasih :)

    BalasHapus
  93. ikuttt bilang makasih ahhh....
    mampir ya' . http://unyublast.blogspot.com
    makasih, lagi :)

    BalasHapus
  94. Gan Masih Kagak Ngarti Pas yang ini.>>
    Ganti kode yang dicetak warna merah dengan link gambar yang kalian inginkan. Setelah itu SAVE dan selesai deh...]
    Cara tau link gambar dari mana..???

    BalasHapus
  95. iya gan bener, dah tak coba dan BERHASIL, makasih triknya ya , ,, ,,,

    BalasHapus
  96. bagus gan..punya belum ada iconnya.ijin sedot

    BalasHapus
  97. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  98. thaks kunjungi juga ya blog ane http://ilhamaf2.blogspot.com/

    BalasHapus
  99. Gan, Blog saya law dibuka di Firefox bisa icon na, tpi klw di google chrome knapa g bsa gan????
    tolong ya gan
    :)

    BalasHapus
  100. sebelum (/head) maksudnya gimana? :)
    Dateng juga yah di blog ku, cerita-cerita khayalan dan nyata www.dien-galuh.blogspot.com atau http://dien-galuh.blogspot.com

    BalasHapus
  101. Saya juga ada artikel serupa di blog Desainew


    BalasHapus
  102. kalau ada informasi lain seputar ini perbaharui aja gan

    BalasHapus
  103. kujngan balik ya
    www.henfuu.blogspot.com

    BalasHapus
  104. kunjungin ya :D
    masih baru communicationscienceunmul@blogspot.com

    BalasHapus
  105. Balasan
    1. Di Baca Lagi aja kawan, yg lain bisa pasti dirimu juga bisa :)

      Hapus
  106. udah saya coba, dan berhasil
    thanks infonya mas sandy :D

    BalasHapus
  107. Thanks...dude! even it doesn't work yet.

    BalasHapus
  108. mudah dimengerti artikelnya... mantab sob, thanks

    BalasHapus
  109. bisa dicoba nih kayaknya...
    ninggalin jejak dulu ah di sini..

    BalasHapus
  110. terima kasih udah di bagi ilmunya

    BalasHapus
  111. terima kasih xoxoxo membantu sekaliiii

    BalasHapus

Komentarmu Menunjukan Kualitasmu di Dunia Maya (^_^)

Sandy Corat-coret! © 2012 | Created by Sandy A. | Powered by Blogger.com