Sabtu, 01 November 2014

Memiliki Favicon di Rhjfox | Stra_Rhjfox#8

Diposting oleh Neng Ecy Frecilia di 20.17
Terdapat dalam Strategy / Elisitasi pada Stra_Rhjfox#8 Disini
frame
Permasalahannya : 
1
Yang menjadi permasalahannya sekarang, tidak adanya favicon yang mencerminkan icon dari Rhjfox sendiri. Favicon  singakatan dari "Favorite Icon", yang merupakan icon yang diasosiasikan dengan logo sebuah situs akan muncul jika situs tersebut di bookmark atau di buka. Dengan menggunakan Favicon untuk memudahkan mengidentifikasi RhjFox denganya sehingga sebuah Rhjfox memiliki identitas khusus yang menjadi ciri khasnya dan terlihat lebih bergaya.
Pemecahan Masalahnya :  
Membutuhkan gambar dengan resize dengan ukurannya yang lebih kecil yaitu 16 x 16 dengan  jenis file PNG. Buat ngerisize gambar nya jadi ukurannya lebih kecil malah pecah-pecah pecah gitu,2
Jadi gak kelihatan saat diterapin di Header nya. aneh bentuknya juga. Mencari cara lagi agar favicon nya terlihat jelas, mencoba menggunakan tempat penyedia pembuat Favicon disini http://faviconsgenerator.com/index.php?do=create gambar yang terjadi malah gelap, alias tidak terlihat (sengaja tidak saya tampilkan) karena gambarnya seperti "kotak hitam" saja tanpa ada gambarnya Saya mencoba lagi edit Logo Rhjfox agar bisa dijadikan Favicon di Photoshop cs6, saya menggunakan pen tools, saya klik kanan dan saya klik make selection, baru saya tekan ctrl-J. ini saya merubah kembali dalam bentuk PNG dan saya upload lagi di http://faviconsgenerator.com/index.php?do=create Favicon nya malah dempet gitu mungkin karena kepanjangan :) saya kembali lagi ke photoshop cs6, saya hapus tulisan "rhj", "F" & "X" nya da2n saya hanya mengambil tulisan dengan bentuk rubah nya saja, lebih terang dan terlihat jelas. Kemudian saya terapkan di ACP (Admin Control Panel) , ada  6 (enam) cara untuk saya terapkan gambar Rubah tersebut menjadi Favicon.
  1. saya masuk ke bagian templete, pilih templete yang sekarang di gunakan kemudian saya pilih edit dan saya memilih Overall-Header
    1
  2. Saya upload gambar di Favicon Generator
    2
  3. Muncul icon preview dari favicon tersebut, saya klik "Clik here to download Favicon"
    3
  4. Kemudian saya diarahkan ke URL tersebut faviconnya
    4
  5. Saya Copy URL nya
    5
  6. Kembali lagi ke ACP nya dan perhatikan kotak yang dimerahkan
    6
Yang lebih jelas saya akan menampilkan Scriptnya di sharing Code :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head><meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title><!-- IF S_ENABLE_FEEDS -->
<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF --><link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
<link rel="shortcut icon" href="http://faviconsgenerator.com/favicon/fox3.ico" /><script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
<!-- ENDIF -->function popup(url, width, height, name)
{
if (!name)
{
name = '_popup';
}window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
return false;
}function jumpto()
{
var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
var per_page = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0)
{
if (base_url.indexOf('?') == -1)
{
document.location.href = base_url + '?start=' + ((page - 1) * per_page);
}
else
{
document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * per_page);
}
}
}/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
var parent = document.getElementById(id);
if (!parent)
{
eval('parent = document.' + id);
}if (!parent)
{
return;
}var rb = parent.getElementsByTagName('input');for (var r = 0; r < rb.length; r++)
{
if (rb[r].name.substr(0, name.length) == name)
{
rb[r].checked = state;
}
}
}<!-- IF ._file -->/**
* Play quicktime file by determining it's width/height
* from the displayed rectangle area
*
* Only defined if there is a file block present.
*/
function play_qt_file(obj)
{
var rectangle = obj.GetRectangle();
if (rectangle)
{
rectangle = rectangle.split(',')
var x1 = parseInt(rectangle[0]);
var x2 = parseInt(rectangle[2]);
var y1 = parseInt(rectangle[1]);
var y2 = parseInt(rectangle[3]);
var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
}
else
{
var width = 200;
var height = 0;
}
obj.width = width;
obj.height = height + 16;
obj.SetControllerVisible(true);
obj.Play();
}
<!-- ENDIF -->
// ]]>
</script>
</head>
<body class="{S_CONTENT_DIRECTION}">
<div class="top">
<h1><a href="/" title=""></a></h1>
<ul>
<!-- IF not S_IS_BOT --><li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li><!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}" title="{L_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}" title="">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></li><!-- ENDIF -->
<!-- ELSE --> <li><a href="{U_REGISTER}" title="{L_REGISTER}">{L_REGISTER}</a></li>
<!-- ENDIF -->
<!-- ENDIF -->
<li><a href="{U_FAQ}" title="{L_FAQ}">{L_FAQ}</a></li>
<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a></li><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --> <li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --><li><a href="{U_PROFILE}" title="{L_PROFILE}">{L_PROFILE}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
</div>
<a name="top"></a>
<center>
<div id="wrap">
<div id="linia_out">
<div id="linia_in">
</div>
<div id="hdr_bdr">
<div id="logoreszta">
<div id="logo">
</div>
</div>
</div>
<div id="wrapcentre">
<!-- INCLUDE breadcrumbs.html -->
<br />
<!-- IF S_DISPLAY_SEARCH -->
<p class="searchbar">
<span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
<!-- IF S_USER_LOGGED_IN -->
<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a> | <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
<!-- ENDIF -->
</p>
<!-- ENDIF -->
<br />
Sudah terlihat bukan, Script tambahan saya beri dengan warna merah, Script yang saya dapatkan hasil dari penelusuran saya, dengan membaca langkah-langkahnya saya copas, Url gambar saya ganti dengan : Url Favicon yang saya dapatkan dari "Favicon Generator"
http://faviconsgenerator.com/favicon/fox3.ico
Untuk mengimplementasikannya saya "Submit" Kemudian saya Refresh dan munculah Favicon  Rhjfox.com yang baru :)
Melihat Favicon di browser Safari
1
Melihat Favicon di Browser Chrome
2
Melihat Favicon di Browser Mozilla Firexox
3
3
Ya bener Favicon rhjfox masih ada background putih-putihnya,
Kemudia saya mendownload gambar dari Favicon Generators, saya buka kembalii ke photoshop ternyata background tetap putih-putih diedit kembali,
1
Favicon sudah diterapkan, iconnya juga terlihat lebih jelas tidak pecah-pecah :D

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

Ecy Frecilia.blog Template by Ipietoon Blogger Template | Gift Idea