Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Floating Box with Opacity Effect: Sebuah Cara Memperindah Blog

Panduan BloGGeR dan Tutorial BloGGeR yang sangat spesial untuk membangun dan membuat blog di BlogSPOT sampeyan semua semakin cantik dan pastinya akan membuat banyak pengunjung blog penasaran. Floating Transpaerent Box di desain dengan hanya sedikit javascript tapi mampu memberikan sebuah penampilan berbeda. Sampeyan bisa tambahkan foto ganteng sampeyan atau foto cantik sampeyan biar pada "dlongap-dlongop" dan tak beranjak ke blog lain. Atau mungkin sampeyan mau tawarkan iklan di sini. Iklan pabrik songkel gigi misalnya ... Ha ..... Hooo ... jangan ketawa .... wong aku sendiri jadi ketawa kok .... he ....ha ....ha .... Onde ... Lihat saja demonya dulu, baru nanti pikir mo buat apa.

D E M O

Langkah pembuatan Floating Box with Opacity Effect :
  1. Login : Login ke Blogger dengan tuliskan User Name atau alamat email, kemudian tulis juga nomor rahasia simpanan sampeyan (Password, broer!).
  2. Selanjutnya anda akan masuk di halaman Dasbor (Dasboard).
    Silahkan cari dan klik Rancangan (Design).
  3. Halaman baru akan kembali terlihat, cari dan klik Edit HTML .
  4. Lakukan Backup Template terlebih dahulu sebelum proses penyimpanan kode baru dimulai.
  5. Cari kode ]]></b:skin>
  6. Copy dan paste-kan kode css di atas ]]></b:skin>
  7. Copy dan paste-kan Javascript di bawah ]]></b:skin>
  8. Cari kode <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  9. Copy dan paste-kan xHTML di bawahnya.
  10. Klik Simpan Template (Save Template).

Catatan/Keterangan :
  1. Dalam demo ini xHTML tidak secara khusus diletakkan di bawah <body> oleh karena itu tampilannya akan sedikit berbeda dengan ketika anda meletakkan dan menyimpan di bawah <body>
  2. Atur width:885px; agar sesuai dengan lebar halaman blog. atau lakukan saja pengaturan posisi floating box dengan melakukan perubahan pada :
    • var startX = 30
    • var startY = 5
  3. Setelah percobaan selesai dengan kode xHTML di bawah, ganti content dengan yang ingin anda tampilkan.
  4. Untuk kode CSS dan javascript anda dapat juga melakukan penyimpanan melalui Add a Gadget.
  5. Silahkan buka Special Tutorials bagi yang membutuhkan panduan dan tutorial tentang cara melakukan Backup Template, cara mencari kode di template dan berbagai cara menyimpan kode css, javascript dan xHTML.
Javascript :
<script type="text/javascript">
/* floatingbox.js - gubhugreyot */ //<[CDATA[
var persistclose = 0
var startX = 30  /* pengaturan pada posisi horizontal */
var startY = 5  /* pengaturan pada posisi vertical */
var verticalpos = "fromtop" //"fromtop" or "frombottom"
function iecompattest() {
    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body
}
function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
  offset = document.cookie.indexOf(search)
  if (offset != -1) {
   offset += search.length
   end = document.cookie.indexOf(";", offset);
   if (end == -1) end = document.cookie.length;
   returnvalue = unescape(document.cookie.substring(offset, end))
  }
    }
    return returnvalue;
}
function closebar() {
    if (persistclose) document.cookie = "remainclosed=1"
    document.getElementById("topbar").style.visibility = "hidden"
}
function staticbar() {
    barheight = document.getElementById("topbar").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    var d = document;
    function ml(id) {
        var el = d.getElementById(id);
        if (!persistclose || persistclose && get_cookie("remainclosed") == "") el.style.visibility = "visible"
        if (d.layers) el.style = el;
        el.sP = function (x, y) {
            this.style.left = x + "px";
            this.style.top = y + "px";
        };
        el.x = startX;
        if (verticalpos == "fromtop") el.y = startY;
        else {
            el.y = ns ? pageYOffset + innerHeight: iecompattest().scrollTop + iecompattest().clientHeight;
            el.y -= startY;
        }
        return el;
    }
    window.stayTopLeft = function () {
        if (verticalpos == "fromtop") {
            var pY = ns ? pageYOffset: iecompattest().scrollTop;
            ftlObj.y += (pY + startY - ftlObj.y) / 8;
        }
        else {
            var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
            ftlObj.y += (pY - startY - ftlObj.y) / 8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("topbar");
    stayTopLeft();
}
if (window.addEventListener) window.addEventListener("load", staticbar, false)
else if (window.attachEvent) window.attachEvent("onload", staticbar)
else if (document.getElementById) window.onload = staticbar
//]]>
</script>

Kode CSS :
#topbar{
        position:absolute;
        border:8px solid rgba(0,0,0,0.6);
        padding:10px;
        background:#333; 
        width:885px;
        visibility:hidden;
        z-index:100;
        text-align:justify;
        font-size:12px;
        font-family:Tahoma;
        font-weight:500;
        color:#eee;
        margin:0 20px;
        opacity:0.8;
        z-index:99;
        filter:alpha(opacity=80);
        transition:opacity 1s linear;
        -o-transition:opacity 1s linear;
        -moz-transition:opacity 1s linear;
        -webkit-transition:opacity 1s linear;
        -ms-transition:opacity 1s linear;
        border-radius:6px;
        background:#0a0e0a;
        background:linear-gradient(-45deg,#0a0e0a 0%,#0a0e0a 49%,#5a605f 64%,#4b5151 70%,#0a0e0a 92%,#6e7774 98%);
        background:-o-linear-gradient(-45deg,#0a0e0a 0%,#0a0e0a 49%,#5a605f 64%,#4b5151 70%,#0a0e0a 92%,#6e7774 98%);
        background:-ms-linear-gradient(-45deg,#0a0e0a 0%,#0a0e0a 49%,#5a605f 64%,#4b5151 70%,#0a0e0a 92%,#6e7774 98%); 
        background:-moz-linear-gradient(-45deg,#0a0e0a 0%, #0a0e0a 49%,#5a605f 64%,#4b5151 70%,#0a0e0a 92%, #6e7774 98%);
        background:-webkit-linear-gradient(-45deg,#0a0e0a 0%,#0a0e0a 49%,#5a605f 64%,#4b5151 70%,#0a0e0a 92%,#6e7774 98%);
        background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#0a0e0a),color-stop(49%,#0a0e0a), color-stop(64%,#5a605f),color-stop(70%,#4b5151),color-stop(92%,#0a0e0a),color-stop(98%,#6e7774));
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a0e0a', endColorstr='#6e7774',GradientType=1);
}
#topbar:hover{opacity:1.0;filter:alpha(opacity=100);}
.GRhidecontroll{position:absolute;bottom:5px;right:5px;display:block;width:70px;height:27px;display:none;visibility:hidden;background:url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-close-anima.gif) center no-repeat;background-size:70px 27px;}
#topbar:hover .GRhidecontroll{display:block;visibility:visible;opacity:0.8;filter:alpha(opacity=80);}

xHTML :
<div id="topbar"><img src="https://lh5.googleusercontent.com/-GkzCLx_FMIE/T14JCKL2c2I/AAAAAAAAAXA/hmebmZZKYOY/s128/gubhugreyot_cwk-05.jpg" width="70" height="100" style="border:3px double #666;float:left;margin:0 10px 0 5px;" />Panduan BloGGeR dan Tutorial BloGGeR yang sangat spesial untuk membangun dan membuat blog di BlogSPOT sampeyan semua semakin cantik dan pastinya akan membuat banyak pengunjung blog penasaran. Floating Transpaerent Box di desain dengan hanya sedikit javascript tapi mampu memberikan sebuah penampilan berbeda. Sampeyan bisa tambahkan foto ganteng sampeyan atau foto cantik sampeyan biar pada "dlongap-dlongop" dan tak beranjak ke blog lain. Atau mungkin sampeyan mau tawarkan iklan di sini. Iklan pabrik songkel gigi misalnya ... Ha ..... Hooo ... jangan ketawa .... wong aku sendiri jadi ketawa kok .... he ....ha ....ha .... Onde ... Lihat saja demonya dulu, baru nanti pikir mo buat apa.
<a class="GRhidecontroll" href="" onclick="closebar(); return false"></a>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Update » Kemis    PON, Maret, 15, 2012

» Happy Blogging - gubhugreyot «

8 komentar:

  1. ngapuntene pak, kulo ganggu melih

    ingkang kados niki, mnoten saget kangge blogspot nggih???koq kulo cobi "terjadi kesalahan"

    BalasHapus
  2. Coba lagi saja!
    Sudah tak coba bisa jalan bagus. Beberapa tambahan kode dah tak kasih biar lancar!
    Oye?!

    Salam ...

    gubhug reyot

    BalasHapus
  3. aduuuw pusing bgtt om udh berkali-kali dicoba kok ngga bisa mulu *Alzajair*

    BalasHapus
  4. susah banget om/./.
    coba de perjelas fungsi dan artinya om

    makasih seblumnya.,.,

    BalasHapus
  5. BInggung om, gagal maning gagal maning

    BalasHapus
  6. Dear to Gubhug reyot . saya mau nanya ,,, bisa gak area post di bikin box semisal pada judul posting yg memakai box , tp ini untuk kesluruhan area posting. mohon maaf kalau merepotkan atau salah ucap kata (newbietol) mohon pencerahan ?

    BalasHapus
  7. Code javanya ada kesalahan Mas

    BalasHapus

 
GR | Edited by | gubhug reyot