::: Blogging’s Stuff ! :::

/* Original fresh CSS from friendster.com */ /* CSS modified by S|aSher-X http://www.friendster.com/eksss */ /* i have a feeling that these comments will probably not be here for long */ /* enjoy pimping! :D */ /* — scrollbar colors — */ html, body { scrollbar-face-color: black; scrollbar-shadow-color: gray; scrollbar-highlight-color: gray; scrollbar-3dlight-color: gray; scrollbar-darkshadow-color: black; scrollbar-track-color: #6E6E6E; scrollbar-arrow-color: white; scrollbar-base-color: transparent; } /* — bgcolor of the blog — */ body { min-width: 800px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #fff; font-size: 12px; background: #000 url(”http://img470.imageshack.us/img470/189/back1we5.jpg”) fixed; } /* ——————————————————————————– */ /* — banner behind the photo and blog title — */ #banner { width: 0px; /* necessary for ie win */ background: #086763 url(http://i67.photobucket.com/albums/h316/slasherx12/transparent-bg_X.gif) repeat-x; background-color: transparent; } /* ——————————————————————————– */ /* — repeating background image of the body — */ #container { width: 800px; background: url(http://img470.imageshack.us/img470/5653/maintk7.jpg) repeat-y; } /* ——————————————————————————– */ /* — bgcolor behind the topheader .. and i also use this to center my topheader on both IE and Mozilla — */ .friendster-banner { position: relative; /*width: 800px; height: 270px;*/ width:100%; margin: 0; border-bottom: 0px solid #546172; padding: 0; background:; text-align: center; } /* ——————————————————————————– */ /* — my topheader — */ .friendster-banner-nav-wrapper { width: 800px; height: 270px; background: url(http://img524.imageshack.us/img524/9291/headergj9.jpg); } /* ——————————————————————————– */ /* — dont know what this is .. i think its the position of my topheader :) — */ .friendster-banner-nav { position: static; overflow: hidden; width: 800px; margin: 0 auto; text-align: left; } /* ——————————————————————————– */ /* — friendster logo (i think) :D — */ .friendster-banner-nav-logo { display: none; } /* ——————————————————————————– */ /* — Home | Blogs links — */ .friendster-banner-nav-links { float: right; display: inline; color: #393f3f; font-family: arial, helvetica, sans-serif; padding-right: 20px; padding-bottom: 5px; font-weight: bold; font-size:0px; } /* ——————————————————————————– */ /* — says pretty much everything on the Home | Blogs section only! — */ .friendster-banner-nav-links a:link { color:darkblue; } .friendster-banner-nav-links a:hover, .friendster-banner-nav-links a:active, .friendster-banner-nav-links a:visited { color: #393f3f; } /* ——————————————————————————– */ /* — top ads — */ .friendster-banner-ad-wrapper { width: 780px; height: 132px; display: none; } /* ——————————————————————————– */ /* — top ads — */ .friendster-banner-ad { display: none; } /* ——————————————————————————– */ /* friendster footer (ads) */ .friendster-footer { width: 780px; height: 132px; display: none; } /* ——————————————————————————– */ /* — body ads — */ .friendster-body-ad { width: 780px; height: 132px; display: none; } /* ——————————————————————————– */ /* — module header or the little rectangular boxes with links (not all) on the right side of my blog — */ .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { /* ie win (5, 5.5, 6) bugfix */ position: relative; width: 100%; width: auto; margin: 0 0 1px 0; padding: 10px 10px 10px 24px; /*color: #f93;*/ color: black; background: white; font-size: 11px; font-weight: bold; text-transform: uppercase; } .module-header a, .trackbacks-header a, .comments-header a, .comments-open-header a, .archive-header a { color: black; text-decoration: underline; } .module-header a:visited, .trackbacks-header a:visited, .comments-header a:visited, .comments-open-header a:visited, .archive-header a:visited { color: #595959; } .module-header a:hover, .trackbacks-header a:hover, .comments-header a:hover, .comments-open-header a:hover, .archive-header a:hover { color: #000; } /* ——————————————————————————– */ /* — user photo — */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display:compact; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* ——————————————————————————– */ /* — title of your blog — */ #banner { position: relative; /* ie 5 win */ position: static; /* everything else */ } #banner a { display:none; color: #fff; font-weight: bold; text-decoration: none; } #banner a:visited { display:none; color: #fff; } #banner a:hover { display:none; color: #989898; } /* ——————————————————————————– */ /* — i forgot what this is :S — */ .module-powered .module-content { display: none; margin: 0; padding: 10px; border: 1px solid #888899; color: #fff; background: #343f4a; } /* ——————————————————————————– */ /* Title of your Active Post */ .entry-header { margin-left: 5px; padding-left: 30px; background: white; color: #000; font-size: 18px; font-weight: bold; font-style: none; } /* ——————————————————————————– */ /* –h3 size (the title of the active post) — */ h3 { text-align: left; } /* ——————————————————————————– */ /* — chars at the main body — */ div.entry-body { text-align: justify; } /* ——————————————————————————– */ /* — haha forgot this too :) — */ .module-content { position: relative; margin: 0px 0px 0px 0px; } /* ——————————————————————————– */ /* — color of the BODY of the lil rectangular boxes on my right side — */ div.module-content { background: transparent; } /* ——————————————————————————– */ /* — bullet — */ ul.module-list li { margin: 0px 0px 15px 0px; padding-left: 0px; /*background: url(theme-beckett/li-bg.gif) 0 0.3em no-repeat;*/ background: transparent; } /* ——————————————————————————– */ /* — colors of the links on the right of my blog — */ .module-content a { color: #fff; } .module-content a:visited { color: #595959; } .module-content a:hover { background: yellow } /* ——————————————————————————– */ /* — divider image — */ #container-inner { margin: 0 10px 0 10px; border-bottom: 1px solid #5b626a; background: url() 297px 0 repeat-y; } /* ——————————————————————————– */

Header/ Banner

Kode Header diawali dengan /* — my topheader — */.

Untuk mendesign-nya, amati kode CSS Friendster blog yang urutannya seperti ini:

…

Keterangan gambar:

width: 780px; —–> lebar header
height: 250px; —–> tinggi header
background: url(http://img374.imageshack.us/img374/2365/carheadgd9.jpg); —–> URL image header

…

Tahap men-desain header:

Tentukan lebar & tinggi header yang kamu inginkan (780 pixel x 200 pixel adalah ukuran yang sering dipakai).
Rancang desain kamu via Photoshop (atau sejenisnya). Kemudian save image as JPG.
Upload gambar header kamu di website yang menyediakan image hosting.
Copy-paste URL-nya di kode background untuk Header.

…

Contoh:

Jika URL image header kamu adalah http://contoh-header.jpg, maka kode yang harus kamu tulis adalah:

…

background: url (http://contoh-header.jpg);

This entry was posted on Saturday, June 30th, 2007 at 4:39 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.