Tampilkan postingan dengan label Web design. Tampilkan semua postingan
Tampilkan postingan dengan label Web design. Tampilkan semua postingan

Membuat Text 3D Dengan CSS

Membuat Text 3D dengan CSS
CSS jaman sekarang memang semakin kompleks, dari mulai memberi efek shadow / bayangan pada text sekarang pun kita bisa membuat text 3d dengan mudah hanya dengan CSS (Cascading Style Sheets). Yakni dengan metode memberikan efek shadow alias bayangan berlapis-lapis di bawah text sehingga text yang kita buat tersebut menjadi 3d. Penasaran bagaimana cara membuatnya? Simak cara membuat text 3d hanya dengan CSS berikut ini.

Oke pertama kita buat tulisan/text yang akan kita buat 3d dalam bahasa html dengan id atau class tertentu, contoh :

<h2 class="inset"> saktyambara.blogspot.com <strong style="color:#CC0000">tutorial</strong> membuat text 3d dengan CSS </h2>

Selanjutnya kita buat class inset text diatas dengan kode css berikut :

.inset { font-size: 33px;    
         color: #0099FF;    
         text-shadow: 
           0 1px 0 #bbb,
           0 2px 0 #bbb,
           0 3px 0 #aaa,
           0 4px 0 #aaa,
           0 5px 0 #999,
           0 6px 1px #000,
           0 0px 3px #000,
           0 1px 3px #000,
           0 3px 5px #000,
           0 5px 10px #000,
           0 5px 20px #000;}

Jadi deh tuh text html diberi class pada css-nya. Pada dasarnya membuat text 3d dengan CSS ini sebenarnya kita membuat beberapa lapis shadow pada suatu text sehingga text tersebut terlihat 3 dimensi.


Contoh Membuat Text 3D dengan CSS

Nah berikut penjelasan struktur format css-nya :

.inset  {   text-shadow: [X-offset] [Y-offset] [Blur size] [Colour];  }

keterangan :
.inset : Nama class
X-offset : Jarak horizontal shadow dari text
Y-offset : Jarak vertical dari text
Blur size : Jarak ketebalan efek blur dari shadow itu sendiri
colour : Warna dari shadow text yang anda inginkan, anda bisa memakai rgb atau memakai kode hex colour

Sehingga kalau diterapin css-nya sbb:
text-shadow: 0 1px 0 #bbb,
             0 2px 0 #bbb,
             0 3px 0 #aaa,
             0 4px 0 #aaa,
             0 5px 0 #999,
             0 6px 1px #000,
             0 0px 3px #000,
             0 1px 3px #000,
             0 3px 5px #000,
             0 5px 10px #000,
             0 5px 20px #000;

Buruan dicoba supaya lebih paham, membuat teks 3d dengan bantuan css ini kelebihannya dibanding dengan 3d text berupa image/gambar adalah teks bisa di blok dengan cursor sehingga terbaca oleh search engine, dengan demikian bisa lebih SEO friendly tentunya.

Incoming keyword google search terms dari postingan Membuat Text 3D dengan CSS :
membuat symbol text 3d dengan CSS , cara membuat tulisan 3 dimensi dengan css , membuat teks 3d dengan bantuan css , langkah membuat text 3d ala css , tutorial membuat 3d teks dengan css , membuat text menjadi 3d dengan css, membuat efek 3d pada css, kelebihan membuat tulisan 3d dengan css, membuat bayangan tampak 3d dengan css, tulisan 3d menggunakan css, mempercantik teks nampak 3d dengan css, menambahkan bayangan 3d pada text dengan css, teks 3dimensi dengan css, efek shadow 3d text css, efek bayangan 3d dengan css, tulisan 3d hanya dengan css, membuat efek bayangan menumpuk tampak 3 dimensi pada text dengan css

Membuat Komentar dalam Bahasa HTML, JAVA, PHP dan CSS

Bagi yang suka disain web seperti membuat tema (themes) ataupun yang berhubungan dengan bahasa html, java, php maupun css membuat catatan pribadi didalam script sangatlah membantu dimana kita bisa memberikan catatan kecil rangkaian script (source code) tentang apa, bagaimana dan jelas ini sangat membantu sekali dengan memberikan komentar di dalam sourcecode script. Apalagi terdapat banyak kode di dalam satu file yang sedang kita kerjakan tentunya sangat penting untuk memberikan komentar komentar per kode yang kita buat, sehingga memudahkan kita dalam menganalisa suatu kode saat menyimaknya. Penulisan komentar ini tidak akan muncul di tampilan browser kecuali dengan melihat page source.

Membuat Komentar dalam Source Code HTML

Penulisan komentar pada bahasa HTML adalah seperti contoh dibawah:
<!-- Ini adalah komentar dalam kode HTML yang tidak muncul di tampilan browser -->

Membuat Komentar dalam Source Code JavaScript

Penulisan komentar pada bahasa Javascript berbeda dengan penulisan komentar HTML, ada yang sebaris dan beberapa baris komentar. Dalam javascript setelah karakter "//" (tanpa petik) instruksi javascript akan diabaikan sebaris. contoh :
//document.write("Ini adalah komentar pada javascript");
//-->

Bagaimana jika menuliskan banyak komentar di javascript / lebih dari satu baris? Gunakan "/*" dan akhiri komentar dengan "*/" (ndak pakai tanda petik lho ya). Begini contohnya :
/*document.write("komentar di javascript baris pertama");
document.write("komentar di javascript baris kedua");
document.write("komentar di javascript baris ketiga");
document.write("komentar di javascript baris keempat");
document.write("komentar di javascript baris berikutnya");*/

Membuat Komentar dalam Source Code PHP

Selanjutnya making comment in coding dalam PHP.
Jika komentarnya hanya satu baris gunakan:
// komentar di source code PHP

Jika menulis komentar dalam PHP lebih dari satu baris
/*
# komentar baris pertama di source code PHP
# komentar baris kedua di source code PHP
# komentar baris ketiga di source code PHP
# komentar baris selanjutnya di source code PHP
*/ 

Membuat Komentar dalam Source Code CSS

Menulis komentar dalam CSS dengan mudah yakni dengan menuliskan "/*" diakhiri dengan "*/" (tanpa petik).
/* menulis komentar dalam CSS */ 

Membuat Komentar dalam Source Code DELPHI

Penulisan komentar dalam bahasa Delphi:
Komentar Sebaris:
// penulisan komentar dalam source code delphi

Komentar lebih dari satu baris:
{
penulisan komentar dalam source code delphi baris 1
penulisan komentar dalam source code delphi baris 2
} 

Oke sekian dulu penulisan komentar dalam source code. semoga bermanfaat. Salam

Koleksi Background Pattern

Berkelana di dunia maya sejak bertahun-tahun lamanya akhirnya baru sekarang punya niatan mengkoleksi pattern background/tile background diblog, meskipun sudah pernah sempat menyimpannya di harddisk namun ketika sedang jauh dari harddisk itulah permasalannya. Memang banyak sekali situs-situs yang khusus menyediakan background-background jenis tile ini namun selera kadang yang membuat browse bejibun backround mode tile ini serasa lama. Lagipula menemukan background yang eye catching bisa terjadi kapan saja saat kita browsing, tidak ada salahnya kan menyimpannya? justru bisa menjadi inspirasi kedepan dalam merancang suatu desain. Hehe semoga tidak sampai pelanggaran HAKI segala ah ya?

Langsung aja cekidot background pattern yang kan senantiasa update jika pas nemu yang asyik,,,


Untuk pasangnya bisa kan? umumnya ya pake css, kalo di table tinggal background="url-background" aja, contoh :
<td height="250" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVtxsmOadFr3z_ccdL_GREUydNSt9OEmta_92BW2I-pEgv-vrfEI7tQLybf5XJQlzW-FKnkfy5AoT9Nsx3hXrPUrb5FmC8hu_qSSJdX_Jndafp-7zKOWx1CIss2Kk6_BIYwXVv-Rci5Y/">&nbsp;</td>

Oke selamat pilih backgroundnya bagi yang butuh.

Streaming Siaran TV Online (RCTI, SCTV, Indosiar, Trans TV, Trans 7, TV One, Global TV, MNC TV dll)

Bagi yang sering mobile dan ketika "genting" butuh nonton siaran TV sementara tak ada TV disekitar, seperti ketika saya kebingungan mau nonton bola tapi lagi jauh dari TV analog dan adanya cuma smartphone yang support flash player dengan pulsa unlimited internet dan kebetulan jaringan tercoverage 3g ya jadilah nonton TV Online dengan streaming TV Online. Untuk lebih memudahkan akhirnya ku taruh deh beberapa Streaming TV Online siaran TV swasta Indonesia seperti RCTI, SCTV, Indosiar, Trans TV, Trans 7, TV One, Global TV, MNC dan lain lain. Langsung saja berikut Streaming Siaran TV Online yang ada di Indonesia :

    TV Online by saktyambara

    Nonton TV Online sebenarnya telah lama ada. Dengan streaming data video yang langsung ke penyedia TV online kita sudah bisa menyaksikan suatu siaran TV yang sedang dibroadcast ulang oleh penyedia layanan streaming data secara langsung. Umumnya sekalipun kecepatan internet kita memadai (tidak putus ketika sedang streaming siaran TV online) tetap saja terdapat latency antara 2 hingga 8 detik dari tv analog. Bagi yang ingin pasang TV Online nanti saya tuliskan cara pasang tv online di web. Selamat menyaksikan

    Jam Flash Penghias Widget

    Widget Jam FlashDari blogwalking kesana-kemari tuk sekedar singgah membaca artikel dan ninggalin jejak mengisi komentar baik di postingan atau di shoutbox rekan-rekan blogger, aku menjumpai hal unik yang menghiasi widget-widget yang umumnya nempel di sidebar blog. Ada yang berupa biasa seperti banner sampai dengan widget sms gratis, Cieh keren juga. Ups tapi yang bakal aku share disini bukan banner maupun widget sms gratis (di lain kesempatan pasti akan aku lengkapi juga widget-widget yang menarik seperti kirim sms gratis tersebut). Namun yang akan aku share disini adalah jam alias penunjuk waktu berbasis flash. Widget Jam ini selain unik juga tampak elegan sehingga menambah tampilan blog terlihat keren. Oke ini dia jam flash transparan yang sapa tau berminat untuk dipasang di widget blog/website rekan blogger.

    Cara pemasangan widget jam flash ini sangat mudah, yakni tinggal copy saja kode berikut ini dan letakkan di sidebar mana yang dikehendaki
    <OBJECT classid=
    "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/
    pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    WIDTH="130" HEIGHT="130" id="anaclock" ALIGN="">
    <PARAM NAME=movie VALUE="modules/envotime_ora_cal.swf">
    <PARAM NAME=quality VALUE=high>
    <PARAM NAME=bgcolor VALUE=#FFFFFF>
    <param name="wmode" value="transparent">
    <param name="menu" value="false">
    <EMBED src="http://garassicell.co.cc/img/garassicell/anaclock.swf"
    quality=high bgcolor=#FFFFFF WIDTH="130" HEIGHT="130"
    wmode="transparent" ALIGN=""
    TYPE="application/x-shockwave-flash"
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"
    menu="false"></EMBED></OBJECT

    Oiya berhubung filenya berupa SWF dan jika ingin dihostingkan di hosting sendiri silahkan untuk didownload saja filenya dan uploadlah di hosting sobat. Tapi kalo tidak ya tidak masalah tetap menggunakan hosting dari saktyambara.com seperti yang tertera pada kode diatas. Berikut adalah file SWF dan source kodenya: (maaf link blm aktif, ini hanya preview semata)
    download jam swf flash dan source code pemasangan
    atau klik http://www.box.net/shared/zqv8ghbrgj0gs9ige7l7
    Sementara baru ini dulu widget jam dalam format flashnya yang tidak terlalu mencolok ads/iklannya dan transparan (usahakan background selain warna hitam). Sebenarnya banyak sekali widget-widget berfungsi sebagai jam yang dari flash, tapi sementara jam flash diataslah yang sering saya gunakan bila ada yang ingin dipasangi jam pada web/blog. Sebenarnya jam flash untuk widget ini tidak penting-penting amat karena kurang efektif. Namun apa dikata kalo si pemilik web ingin tampilan yang lebih atau bisa dengan kata lain "dari pada sepi?" hehe,, yayaya... oke semoga berguna juga bagi yang mau pasang jam flash diweb/blog sobat blogger. Salam

    Tabel Daftar Hosting Gratis dan Fiturnya

    Tabel list Daftar Layanan Hosting GratisBagi yang sedang berburu layanan hosting gratis tanpa banner alias no ads free hosting service atau sekedar ingin mencoba layanan hosting gratis lainnya dari hosting gratis yang pernah dicoba, Layanan hosting gratis memang sangat kompleks fiturnya (maklum namanya juga hosting gratisan) mulai dari kapasitas, bandwidth, ukuran maximal  per file upload termasuk batasan-batasan coding apa yang telah di support dalam layanan hosting gratisnya. Berikut ini adalah daftar-daftar layanan hosting gratis tanpa banner/iklan yang tersedia di berbagai belahan internet yang sempat saya rangkum kedalam tabel disertai dengan fitur yang disediakan oleh masing-masing penyedia layanan hosting sehingga memudahkan kita dalam perbandingan antara penyedia layanan hosting gratis satu dengan lainnya. Kapasitas Ukuran Hosting dan Bandwidth dalam tabel dibawah adalah dalam satuan MB dan untuk max upload per file dalam satuan KB.
    Host. Space BW / File
    FTP
    CGI
    PHP
    ASP
    Net
    MySql
    POP3
    host-ed.net
    200
    5000
    500
    ya
    ya
    ya
    tdk
    tdk
    ya
    tdk
    0000free.com
    1000
    10000
    ∞
    ya
    ya
    ya
    tdk
    ya
    ya
    ya
    XtreemHost.com
    5500
    200000
    ∞
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    stonerocket.net
    150
    15000
    ∞
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    atspace.com
    50
    ∞
    200
    ya
    tdk
    tdk
    tdk
    tdk
    tdk
    ya
    awardspace.com
    2000
    5000
    500
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    frihost.com
    250
    10000
    ∞
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    678host.com
    500
    10000
    5000
    ya
    ya
    ya
    ya
    tdk
    ya
    tdk
    byethost.com
    250
    6000
    4000
    ya
    tdk
    ya
    tdk
    tdk
    ya
    ya
    main-host.org
    250
    5000
    10000
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    prohosts.org
    300
    30000
    4000
    ya
    tdk
    ya
    tdk
    tdk
    ya
    ya
    phpnet.us
    300
    80 000
    1000
    ya
    tdk
    ya
    tdk
    tdk
    ya
    tdk
    nextmill.com
    1000
    5 000
    ∞
    ya
    ya
    ya
    ya
    tdk
    ya
    ya
    afmu.com
    100
    1 000
    ∞
    tdk
    ya
    ya
    tdk
    tdk
    ya
    ya
    freewebs.com
    40
    500
    1000
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    iFastNet.com
    300
    30 000
    1000
    ya
    tdk
    ya
    tdk
    tdk
    ya
    tdk
    200host.com
    150
    4000
    500000
    ya
    tdk
    ya
    tdk
    tdk
    ya
    ya
    freewebtown.com
    2000
    2000
    ∞
    ya
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    webhostforasp.net
    15
    2000
    1000
    tdk
    ya
    ya
    ya
    ya
    tdk
    tdk
    chemicalservers.com
    250
    5000
    ∞
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    hostrocket.com
    25
    2000
    1000
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    110.com
    5000
    300000
    6000
    ya
    ya
    ya
    ya
    tdk
    ya
    tdk
    telavir.org
    10
    100
    1000
    ya
    ya
    ya
    tdk
    tdk
    tdk
    tdk
    astahost.com
    150
    5000
    ∞
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    asphost4free.com
    100
    1000
    ∞
    ya
    tdk
    tdk
    ya
    ya
    tdk
    tdk
    freehostia.com
    250
    5000
    1000
    ya
    ya
    ya
    tdk
    tdk
    ya
    tdk
    razyhosting.com
    150
    4000
    500
    ya
    ya
    ya
    tdk
    tdk
    tdk
    ya
    memebot.com
    30
    100
    1000
    ya
    ya
    tdk
    tdk
    tdk
    tdk
    tdk
    myrobotix.com
    50
    500
    1000
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    x10hosting.com
    500
    ∞
    1000
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    freedomainsite.com
    1000
    ∞
    ∞
    ya
    ya
    ya
    ya
    ya
    ya
    ya
    zendurl.com
    200
    10000
    1000
    ya
    ya
    ya
    tdk
    tdk
    ya
    tdk
    tdkads.biz
    50
    150
    1000
    ya
    tdk
    ya
    tdk
    tdk
    tdk
    tdk
    doteasy.com
    100
    1000
    ∞
    ya
    tdk
    tdk
    tdk
    tdk
    tdk
    ya
    hostlite.co.uk
    25
    250
    1000
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk
    letwebhost.com
    300
    10000
    5000
    ya
    tdk
    ya
    tdk
    tdk
    ya
    ya
    niftyhost.us
    2048
    20480
    100000
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    FreeGreenHost.com
    150
    4000
    500000
    ya
    ya
    ya
    tdk
    tdk
    ya
    ya
    freehosting1.net
    100
    150
    25000
    ya
    tdk
    tdk
    tdk
    tdk
    tdk
    tdk.

    Bagaimana? masih kurang? bagi yang mau menambahkan penyedia layanan hosting tanpa adanya iklan gratis ke daftar layanan hosting gratis ini. Dengan senang hati saya persilahkan (isikan komentar). Semoga daftar nama-nama penyedia layanan hosting gratis ini dapat bermanfaat bagi kita semua. Amin

    Cara Menuliskan Symbol (TradeMark, Copyright, Registered dkk)

    Cara Membuat Simbol TradeMark, Copyright dan RegisteredMenuliskan symbol ternyata lumayan penting bagi para blog/web designer. Saat kita membuat suatu karya seperti template atau lainnya yang harus menuliskan symbol ASCII kedalam konten dengan maksud dan tujuan tertentu. Symbol ASCII seperti ; », ², ½, ±,®, ©, ™ dan lainnya sering kita jumpai di berbagai website. Bagaimana cara menuliskannya? Cara membuat symbol trademark, cara membuat simbol copyright, cara membuat registered dll adalah mudah, Berikut tabel perbendaharaan cara membuat symbol/kode ASCII baik cara pembuatannya langsung melalui kombinasi ALT Keyboard dan juga dalam bahasa HTMLnya.


    Simbol Keterangan. Kode Kombinasi. Kode HTML
    ©CopyrightALT+169&copy;
    ®RegisteredALT+174&reg;
    ™Trade Mark ALT+153&trade;
    »,«Double Pointing ALT+0187, ALT+0171 &raquo;, &laquo;
    ♥, ♫Love, Music ALT+3, ALT+14 &laquo;,&#9835;
    µMicro Sign ALT+ 181&micro;
    Pilcrow/ParagraphALT+182&para;
    •,♦Dot, Wajik ALT+0149, ALT+4 &bull;,&diams;
    ☺, ☻SmileyALT+1, ALT+2 &#9786;, &#9787;
    €EuroALT+128&euro;
    £PounsterlingALT+163&pound;
    ¥YenALT+165&yen;
    ∞UnlimitedALT+236&infin;
    §Section Sign ALT+0167&sect;
    |Garis Pembatas ALT+162|
    ΩOmegaALT+234&Omega;
    ¿Mirror Question ALT+0191&iquest;
    ±Min Plus ALT+0177 &plusmn;
    ºDegreeALT+0186&ordm;
    ²Pangkat Dua ALT+0178&sup2;
    ³Pangkat Tiga ALT+0179&sup3;
    ½SetengahALT+0189&frac12;
    ¼SeperempatALT+0188&frac14;
    ¾Tiga per empat ALT+0190&frac34;

    Bila masih susah dalam mengingat kombinasi-kombinasi cara membuat symbol-symbol ASCII yang dimaksud, tinggal trial and error saja. Oiya bagi yang membuat symbol ASCII ini melalui laptop mungkin perlu mengaktifkan tombol fn dalam menggunakan mode numlocknya. Semoga bermanfaat!

    Incoming keyword google search terms dari postingan Cara Menuliskan Symbol (TradeMark, Copyright, Registered dkk) :
    membuat symbol di komputer, cara membuat symbol di microsoft word, membuat teks symbol di laptop, langkah membuat text symbol trademark, tutorial menuliskan symbol kurang lebih, tombol kombinasi text symbol notebook, cara menuliskan symbol di postingan blogspot, tutorial cara membuat simbol copyright registered symbol, kombinasi symbol text, cara mudah membuat symbol trademark, membuat text karakter symbol, membuat rumus symbol, kumpulan symbol-symbol pada text microsoft word, text simbol microsoft words, tanda atau symbol copyrighted, cara menuliskan sy,mbol copyrighted trademark registered dan lain lain, kumpulan karakter symbol dengan kombinasi tombol alt, belajar microsoft word menuliskan karakter aneh, menambahkan symbol harga dollar logo, contoh tombol kombinasi simbol, cara memasukkan symbol di tema, memasukkan karakter aneh pada web, penulisan symbol copyrighted, teks symbol kombinasi angka, membuat tanda kurang lebih, memunculkan symbol code, kode-kode membuat symbal

    Membuat Tombol "Naik Keatas"

    Cara Membuat Tombol Navigasi Keatas HalamanTombol navigasi up / naik keatas halaman ini cukup membantu para pembaca artikel yang panjang kebawah. Dengan sekali klik saja kita langsung dibawa ke paling atas dimana umumnya menu kategori maupun menu halaman lainnya ditempatkan dalam suatu blog/web. Sebenarnya dengan mengklik tombol tengah/scroll dibagian halaman pada mouse kita bisa mendapatkan navigasi naik-turun bahkan kiri-kanan halaman. Tapi adakalanya kita memanjakan pengunjung sekaligus mempercantik web/blog kita dengan menambahkan tombol navigasi up/ke atas ini bukan? ups,, Bisa jadi dengan adanya tombol navigasi ke atas ini untuk menambah usia scroll mouse kita! hehe,,

    Caranya sangat mudah dan sederhana, pemasangan tombol navigasi ke atas suatu halaman yang akan saya tampilkan berikut ini hanya dengan menambahkan java script yang bertugas menampilkan ikon (gambar kicil) di sudut kiri bawah browser saat scroll berada bukan di paling atas suatu halaman dengan efek fade. Saat di klik langsung menuju ke arah paling atas suatu halaman dengan sendirinya. Contoh kongkritnya penerapannya ya di blog ini, lihat bagian kiri bawah pada saat berada di bukan paling atas halaman.

    Yang pertama adalah menyiapkan gambar dengan ukuran relatif kecil aja misal 52 x 32 pixel dengan format png/gif yang mendukung transparansi sebagai tombol navigasi keatas halaman. upload gambar tersebut di hosting Anda kemudian kita buat kode javascript navigasi up atau tombol keatas halaman dengan notepad aja bisa, copy script codenya:

    var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://HostingMu/up.png" style="width:52px; height:32px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:55}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
    if (!this.cssfixedsupport) //if control is positioned using JavaScript
    this.$control.css({opacity:0}) //hide control immediately after clicking it
    var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
    if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
    dest=jQuery('#'+dest).offset().top
    else
    dest=0
    this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
    var $window=jQuery(window)
    var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
    var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
    this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
    var scrolltop=jQuery(window).scrollTop()
    if (!this.cssfixedsupport)
    this.keepfixed()
    this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
    if (this.state.shouldvisible && !this.state.isvisible){
    this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
    this.state.isvisible=true
    }
    else if (this.state.shouldvisible==false && this.state.isvisible){
    this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
    this.state.isvisible=false
    }
    },
    init:function(){
    jQuery(document).ready(function($){
    var mainobj=scrolltotop
    var iebrws=document.all
    mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
    mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
    mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
    .attr({title:'Ke Atas'})
    .click(function(){mainobj.scrollup(); return false})
    .appendTo('body')
    if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
    mainobj.togglecontrol()
    $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
    mainobj.scrollup()
    return false
    })
    $(window).bind('scroll resize', function(e){
    mainobj.togglecontrol()
    })
    })
    }
    }
    scrolltotop.init()

    Sesuaikan lokasi gambar serta ukurannya (warna orange tebal). Simpan dengan nama misal saja up.js, upload di yang dikehendaki. Misal di HostingKamu.com/js/up.js. jika sudah, panggil script tersebut di header web/blog Anda dengan menempatkan kode berikut diantara<HEAD> </HEAD> dalam template kita:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="HostingMu.js"

    Sip! Simpel kan? jadi deh tombol navigasi ke atasnya. Nantikan tutorial blog ringan lainnya ya,, Selamat mencoba.

    Kode-kode Warna dalam HTML

    kode-kode warna dalam htmlMewarnai suatu element dalam dunia desain web cukup mudah dilakukan disaat menggunakan html editor seperti dreamweaver dsb, saya rasa banyak diantara web desainer web yang tidak hafal kode dalam mewarnai di dunia html ini kecuali warna-warna dasar yang sering digunakan. Karena alasan tertentu ketika kita tidak sedang menggunakan html editor dalam mendesain web, menulis css dll kode html akan warna-warni berikut ini barangkali bisa membantu melanjutkan pekerjaan para desainer web. Langsung saja catatan kecil kode warna dalam html ini saya tampilkan. Catatan: Printable version. Hitam, Abu-abu dan putih ditulis dengan warna merah tebal. Warna warna primari ditulis dengan huruf Tebal dan miring. Lihat Cara Penggunaannya yang ada dibawah.

    Warna-warna Dasar, warna utama (primary colors) dalam HTML
    000000 000033 000066 000099 0000CC 0000FF
    003300 003333 003366 003399 0033CC 0033FF
    006600 006633 006666 006699 0066CC 0066FF
    009900 009933 009966 009999 0099CC 0099FF
    00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
    00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
    330000 330033 330066 330099 3300CC 3300FF
    333300 333333 333366 333399 3333CC 3333FF
    336600 336633 336666 336699 3366CC 3366FF
    339900 339933 339966 339999 3399CC 3399FF
    33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
    33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
    660000 660033 660066 660099 6600CC 6600FF
    663300 663333 663366 663399 6633CC 6633FF
    666600 666633 666666 666699 6666CC 6666FF
    669900 669933 669966 669999 6699CC 6699FF
    66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
    66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
    990000 990033 990066 990099 9900CC 9900FF
    993300 993333 993366 993399 9933CC 9933FF
    996600 996633 996666 996699 9966CC 9966FF
    999900 999933 999966 999999 9999CC 9999FF
    99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
    99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
    CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
    CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
    CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
    CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
    CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
    CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
    FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
    FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
    FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
    FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
    FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
    FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

    Kode pewarnaan HTML dengan warna yang lebih lembut, seperti warna pastel dan warna soft lainnya.

    Warna-warna Campuran, warna pastel (secondary colors) dalam HTML
    FF4848 FF68DD FF62B0 FE67EB E469FE
    D568FD
    9669FE
    FF7575 FF79E1 FF73B9 FE67EB E77AFE
    D97BFD
    A27AFE
    FF8A8A FF86E3 FF86C2 FE8BF0 EA8DFE DD88FD AD8BFE
    FF9797 FF97E8 FF97CB FE98F1 ED9EFE E29BFD B89AFE
    FFA8A8 FFACEC FFA8D3 FEA9F3 EFA9FE E7A9FE C4ABFE
    FFBBBB FFACEC FFBBDD FFBBF7 F2BCFE EDBEFE D0BCFE
    FFCECE FFC8F2 FFC8E3 FFCAF9 F5CAFF F0CBFE DDCEFF
    FFDFDF FFDFF8 FFDFEF FFDBFB F9D9FF F4DCFE E6DBFF
    FFECEC FFEEFB FFECF5 FFEEFD FDF2FF FAECFF F1ECFF
    FFF2F2 FFFEFB FFF9FC FFF9FE FFFDFF FDF9FF FBF9FF
    800080
    872187
    9A03FE
    892EE4
    3923D6
    2966B8
    23819C
    BF00BF
    BC2EBC
    A827FE
    9B4EE9
    6755E3
    2F74D0
    2897B7
    DB00DB
    D54FD5
    B445FE
    A55FEB
    8678E9
    4985D6
    2FAACE
    F900F9
    DD75DD
    BD5CFE
    AE70ED
    9588EC
    6094DB
    44B4D5
    FF4AFF DD75DD C269FE
    AE70ED
    A095EE 7BA7E1 57BCD9
    FF86FF E697E6 CD85FE C79BF2 B0A7F1 8EB4E6 7BCAE1
    FFA4FF EAA6EA D698FE CEA8F4 BCB4F3 A9C5EB 8CD1E6
    FFBBFF EEBBEE DFB0FF DBBFF7 CBC5F5 BAD0EF A5DBEB
    FFCEFF F0C4F0 E8C6FF E1CAF9 D7D1F8 CEDEF4 B8E2EF
    FFDFFF F4D2F4 EFD7FF EDDFFB E3E0FA E0EAF8 C9EAF3
    FFECFF F4D2F4 F9EEFF F5EEFD EFEDFC EAF1FB DBF0F7
    FFF9FF FDF9FD FEFDFF FEFDFF F7F5FE F8FBFE EAF7FB
    5757FF
    62A9FF
    62D0FF 06DCFB 01FCEF 03EBA6 01F33E
    6A6AFF
    75B4FF
    75D6FF 24E0FB 1FFEF3 03F3AB 0AFE47
    7979FF
    86BCFF 8ADCFF 3DE4FC 5FFEF7 33FDC0 4BFE78
    8C8CFF 99C7FF 99E0FF 63E9FC 74FEF8 62FDCE 72FE95
    9999FF 99C7FF A8E4FF 75ECFD 92FEF9 7DFDD7 8BFEA8
    AAAAFF A8CFFF BBEBFF 8CEFFD A5FEFA 8FFEDD A3FEBA
    BBBBFF BBDAFF CEF0FF ACF3FD B5FFFC A5FEE3 B5FFC8
    CACAFF D0E6FF D9F3FF C0F7FE CEFFFD BEFEEB CAFFD8
    E1E1FF DBEBFF ECFAFF C0F7FE E1FFFE BDFFEA EAFFEF
    EEEEFF ECF4FF F9FDFF E6FCFF F2FFFE CFFEF0 EAFFEF
    F9F9FF F9FCFF FDFEFF F9FEFF FDFFFF F7FFFD F9FFFB
    1FCB4A 59955C 48FB0D 2DC800 59DF00 9D9D00 B6BA18
    27DE55 6CA870 79FC4E 32DF00 61F200 C8C800 CDD11B
    4AE371 80B584 89FC63 36F200 66FF00 DFDF00 DFE32D
    7CEB98 93BF96 99FD77 52FF20 95FF4F FFFFAA EDEF85
    93EEAA A6CAA9 AAFD8E 6FFF44 ABFF73 FFFF84 EEF093
    A4F0B7 B4D1B6 BAFEA3 8FFF6F C0FF97 FFFF99 F2F4B3
    BDF4CB C9DECB CAFEB8 A5FF8A D1FFB3 FFFFB5 F5F7C4
    D6F8DE DBEADC DDFED1 B3FF99 DFFFCA FFFFC8 F7F9D0
    E3FBE9 E9F1EA EAFEE2 D2FFC4 E8FFD9 FFFFD7 FAFBDF
    E3FBE9 F3F8F4 F1FEED E7FFDF F2FFEA FFFFE3 FCFCE9
    FAFEFB FBFDFB FDFFFD F5FFF2 FAFFF7 FFFFFD FDFDF0
    BABA21 C8B400 DFA800 DB9900 FFB428 FF9331 FF800D
    E0E04E D9C400 F9BB00 EAA400 FFBF48 FFA04A FF9C42
    E6E671 E6CE00 FFCB2F FFB60B FFC65B FFAB60 FFAC62
    EAEA8A F7DE00 FFD34F FFBE28 FFCE73 FFBB7D FFBD82
    EEEEA2 FFE920 FFDD75 FFC848 FFD586 FFC48E FFC895
    F1F1B1 FFF06A FFE699 FFD062 FFDEA2 FFCFA4 FFCEA2
    F4F4BF FFF284 FFECB0 FFE099 FFE6B5 FFD9B7 FFD7B3
    F7F7CE FFF7B7 FFF1C6 FFEAB7 FFEAC4 FFE1C6 FFE2C8
    F9F9DD FFF9CE FFF5D7 FFF2D2 FFF2D9 FFEBD9 FFE6D0
    FBFBE8 FFFBDF FFFAEA FFF9EA FFF7E6 FFF4EA FFF1E6
    FEFEFA FFFEF7 FFFDF7 FFFDF9 FFFDF9 FFFEFD FFF9F4
    D1D17A C0A545
    C27E3A
    C47557
    B05F3C
    C17753
    B96F6F
    D7D78A CEB86C C98A4B
    CB876D
    C06A45
    C98767
    C48484
    DBDB97 D6C485 D19C67 D29680
    C87C5B
    D0977B
    C88E8E
    E1E1A8 DECF9C DAAF85 DAA794 CF8D72 DAAC96 D1A0A0
    E9E9BE E3D6AA DDB791 DFB4A4 D69E87 E0BBA9 D7ACAC
    EEEECE EADFBF E4C6A7 E6C5B9 DEB19E E8CCBF DDB9B9
    E9E9C0 EDE4C9 E9D0B6 EBD0C7 E4C0B1 ECD5CA E6CCCC
    EEEECE EFE7CF EEDCC8 F0DCD5 EACDC1 F0DDD5 ECD9D9
    F1F1D6 F5EFE0 F2E4D5 F5E7E2 F0DDD5 F5E8E2 F3E7E7
    F5F5E2 F9F5EC F9F3EC F9EFEC F5E8E2 FAF2EF F8F1F1
    FDFDF9 FDFCF9 FCF9F5 FDFAF9 FDFAF9 FCF7F5 FDFBFB
    F70000
    B9264F
    990099
    74138C
    0000CE
    1F88A7
    4A9586
    FF2626
    D73E68
    B300B3
    8D18AB
    5B5BFF"
    25A0C5
    5EAE9E
    FF5353 DD597D CA00CA
    A41CC6
    7373FF
    29AFD6 74BAAC
    FF7373 E37795 D900D9 BA21E0 8282FF 4FBDDD 8DC7BB
    FF8E8E E994AB FF2DFF CB59E8 9191FF 67C7E2 A5D3CA
    FFA4A4 EDA9BC F206FF CB59E8 A8A8FF 8ED6EA C0E0DA
    FFB5B5 F0B9C8 FF7DFF D881ED B7B7FF A6DEEE CFE7E2
    FFC8C8 F4CAD6 FFA8FF EFCDF8 C6C6FF C0E7F3 DCEDEA
    FFEAEA F8DAE2 FFC4FF EFCDF8 DBDBFF D8F0F8 E7F3F1
    FFEAEA FAE7EC FFE3FF F8E9FC EEEEFF EFF9FC F2F9F8
    FFFDFD FEFAFB FFFDFF FFFFFF FDFDFF FAFDFE F7FBFA

    Cara Penggunaan:
    <body bgcolor="#003300">
    <font color="#330066"> 

    Semoga catatan kecil tabel pewarnaan kode html ini bisa membantu dan cukup berguna. Salam