gravatar

Mengubah Gambar Favicon

Sudah tahu yang namanya favicon? Kalau belum, favicon adalah ikon kecil yang muncul di pojok kiri address bar dan pojok kiri tab. Secara default favicon blog berbasis Blogger/Blogspot adalah simbol B dengan background jingga. Tentunya anda ingin punya favicon sendiri untuk branding blog anda kan? Bagaimana cara membuat favicon yang gampang, lalu menampilkannya di blog? Ikuti langkah-langkahnya.

Pertama anda harus punya gambaran untuk favicon. Bagi Anda yang menguasai software grafis, Anda boleh membuat sebuah logo dengan Adobe Photoshop, Illustrator, CorelDraw, atau software grafis apapun yang Anda kuasai. Lalu ekspor ke gif, png atau jpg. Jika Anda tidak menguasai software grafis, anda bisa gunakan icon gratis dengan googling atau bahkan foto yang ada di harddisk anda.

Lalu upload file tersebut ke website FavIcon from Pics dengan menekan Browse. Contreng pilihan "Animate Favicon" jika anda menginginkan favicon animasi. Lalu klik "Generate Favicon.ico".


Selanjutnya download favicon yang dihasilkan dengan mengklik tombol "Download Favicon".


Extract file zip yang dihasilkan. Lalu upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis seperti Google Pages, Photobucket.

Sekarang, login ke Blogger. Pilih Layout -> Edit HTML.

Copy kode di bawah ini:


<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon1.gif" type="image/gif" />

Lalu paste persis di bawah baris kode berikut:

<b:include data="blog" name="all-head-content"/>


Sekarang ubah alamat URL favicon dengan URL tempat anda menyimpan file favicon di file hosting. Lihat gambar di atas, klik untuk melihat lebih besar. Perhatikan, bagian yang dihighlight adalah contoh URL yang telah diubah. Ubah juga alamat URL favicon animasi (animated_favicon1.gif) jika anda memang menginginkannya. Periksa lagi apakah alamat URL sudah benar.

Simpan Template. Lihat hasilnya. Jika favicon belum muncul, refresh browser.

Selamat mencoba!

Ditulis Oleh : EchoDhoxXx ~ Deskripsi Blog Anda

Artikel Mengubah Gambar Favicon ini diposting oleh EchoDhoxXx pada hari Rabu, 02 Mei 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

Lumayan SMS gratisSS


Make This Widget

nii nomer q 081945321350
English French German Spain Italian Dutch

Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

Subscribe Now: poweredby

Powered by FeedBurner

Pengikut



@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("facebook.com") { /* Hide this shit! */ .highlightIndicator, .tinyman:after, .fbTimelineSideAds, .fbTimelineScrubber, .buttonWrap, .fbTimelineSpine, .spinePointer, .topBorder, .bottomBorder, #footerContainer, .middleLink, .moreSectionsLink, .uiStreamHeaderChronologicalForm, .uiStreamHeader { display:none !important; } /*Global Facebook Settings*/ * { border-color: transparent !important; font-family: Arial !important; color: #FFFFFF !important; background-color: transparent !important; /*Temporary Fix*/ } /* Work In Progress .inputContainer, .uiSelectorButton, .uiCloseButton:focus, .hidden_elem, .stage, .stageWrapper, .dialog_content, .dialog_title, .seeMore, #contentCurve, #pageFooter, .uiBoxLightblue, .fbCurrentThickline, .showOnceInteracted, span, .text, .fbDockChatTab .input, .fbFeedTickerStory, .ufiItem, .uiHeader, .uiSideNavCount, .clearfix, .uiUfi, .uiSearchInput, .uiSearchInput button, .uiMentionsInput, .uiComposerMetaContainer, .inputtext, .nub { background-color: transparent !important; } */ /* Facebook's Theatre (Photo Viewer) Mode */ .fbPhotoSnowbox, .fbPhotoSnowliftInner { background-color: rgba(0, 0, 0, 0.75) !important; } .fbPhotoSnowboxInfo, .UIBeeper, .UIBeeper_Full, .menuDivider { background-color: #222222 !important; } .profile-picture img { max-width: 170px !important; } .inputtext { background-color: #111111 !important; } .webComposerPhotoUpload input, .webComposerPhotoUpload { color: #000000 !important; } .field_container { background-color: #000000 !important; } /* Background Image */ body { background-image:url('http://i.imgur.com/erZFE.jpg') !important; background-repeat:repeat !important; background-attachment:fixed !important; background-position:center !important; } .fbIndex .gradient { background: transparent !important; } .fbCurrentStory:hover, .connect_widget_like_button, .fbFeedTickerStory:hover, .item a:hover, .fbJewelFlyout li:hover, .uiSideNav a:hover, .fbNubFlyoutBody, .uiButtonConfirm { background-color: #333333 !important; } .fbChatMessageGroup { border-color: #2c2c2c !important; } .fbChatSidebar { background-color: #000000 !important; } #leftCol { /*position: fixed !important;*/ min-height: 400px !important; } .arrowLeft a { background-image:url('http://i.imgur.com/26zf5.png') !important; border-color: #666666 !important; } .arrowRight a { background-image:url('http://i.imgur.com/v6B6z.png') !important; border-color: #666666 !important; } .uiStreamSubstory { border-color: transparent !important; } .uiHeader { background-color: transparent !important; } .fbSidebarGripper, .fbTickerFooter, .fbSidebarGripper div, .navSubmenu:hover { background-color: #222222 !important; } .fbTimelineCountButton, .uiBoxWhite, .uiButtonGroup { background-color: #1c1c1c !important; } .fbxWelcomeBox { background-color: #0a0a0a !important; text-align: center !important; } #leftCol { padding-top: 0px !important; padding-left: 0px !important; } .fbNubFlyoutFooter { background: #111111 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; border: #333333 !important; } .uiStream .uiSelectorButton { background-image: url("http://i.imgur.com/nOfuQ.png") !important; } .uiSearchInput { background-image: url("http://i.imgur.com/agNWI.png") !important; } .jewelButton, a.jewelButton:hover { background-image: url("http://i.imgur.com/yoSw2.png") !important; } .jewelButton:hover, .topNavLink a:hover { background-color: #222222 !important; } .uiScrollableAreaGripper { background-color: #666666 !important; } .uiSearchInput, .fbPhotosGridHeader, .uiComposerMessageBoxControls, #MessagingShelf, .uiBoxGray { background: #111111 !important; } .uiButton { background: #1c1c1c !important; } #blueBar { background: -moz-linear-gradient(center top , #333333, #000000) repeat scroll 0 0 transparent !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; border-color: #333333 !important; } #navSearch { width:510px !important; margin-top: 8px !important; margin-left: 22px !important; } #contentCol, #pageLogo a { background-color: transparent !important; border-color: transparent !important; } .uiMorePager { margin-bottom:6px !important; background-color: #1c1c1c !important; -moz-border-radius: 5px 5px 5px 5px; border: 0px solid #333333 !important; } .uiStreamStory, .fbIndexFeaturedRegistration, .signupForm { margin-bottom:2px !important; background-color:transparent !important; background-image:url('http://i.imgur.com/T2LPj.png') !important; -moz-border-radius: 5px 5px 5px 5px; border: 0px solid #333333 !important; } #album_pagelet { background-color: #111111 !important; margin-left: 0px !important; margin-top: -15px !important; width: 722px !important; } .tagWrapper, #pagelet_main_column, .timelineUnitContainer, .timelineReportContainer, .fbTimelineTopSection, #MessagingMessages { background-color:transparent !important; background-image:url('http://i.imgur.com/T2LPj.png') !important; -moz-border-radius: 5px 5px 5px 5px; border: 0px solid #333333 !important; } #pagelet_main_column { width: 500px !important; } .fbJewelFlyout, .fbPhotoSnowliftContainer, .snowliftOverlay, .uiToggleFlyout, .navigation, .container, .uiOverlayContent, .search, .pop_container_advanced { background-color: #111111 !important; -moz-border-radius: 0px 5px 5px 5px; border: 2px solid #333333 !important; } #left_column, #leftCol, .MessagingReadHeader { background: #111111 !important; -moz-border-radius: 0px 0px 0px 5px; } #left_column, #leftCol { margin-left:-8px !important; width: 185px !important; } .uiMediaThumb i, .uiProfilePhoto { -moz-border-radius: 5px 5px 5px 5px; border: 1px solid #000000 !important; } #rightCol { margin-top: -5px !important; padding-top: 0px !important; background: #111111 !important; -moz-border-radius: 0px 0px 5px 0px; border: 0px solid #333333 !important; } #right_column, .rightColumnWrapper { margin-top: 0px !important; padding-top: 0px !important; position: fixed !important; background: #111111 !important; -moz-border-radius: 0px 0px 5px 0px; border: 0px solid #333333 !important; } .aboutMePagelet { background-color:transparent !important; background-image:url('http://i.imgur.com/T2LPj.png') !important; -moz-border-radius: 0px 0px 5px 5px; border: 0px solid #333333 !important; } .fbNubButton, .fbNubFlyoutTitlebar, .uiToggleFlyout, .fbChatSidebarFooter { background: -moz-linear-gradient(center top , #333333, #000000) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; -moz-border-radius: 5px 5px 0px 0px !important; border: #333333 !important; } .fbChatOrderedList { background: -moz-linear-gradient(center right , #333333, #000000) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; -moz-border-radius: 5px 5px 0px 0px !important; border: #333333 !important; } .uiTypeahead { background: #111111 !important; -moz-border-radius: 5px 5px 5px 5px; border: 2px solid #333333 !important; } }