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 :

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

Catatan/Keterangan :

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>
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
Setelah percobaan selesai dengan kode xHTML di bawah, ganti content dengan yang ingin anda tampilkan.
Untuk kode CSS dan javascript anda dapat juga melakukan penyimpanan melalui Add a Gadget.
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:

Port2714 Juni 2010 pukul 10.40
ngapuntene pak, kulo ganggu melih

ingkang kados niki, mnoten saget kangge blogspot nggih???koq kulo cobi "terjadi kesalahan"
BalasHapus
Balasan
cah ndeso kluthuk29 Juni 2010 pukul 11.41
Coba lagi saja!
Sudah tak coba bisa jalan bagus. Beberapa tambahan kode dah tak kasih biar lancar!
Oye?!

Salam ...

gubhug reyot
BalasHapus
Balasan
Anonim13 Maret 2011 pukul 23.37
aduuuw pusing bgtt om udh berkali-kali dicoba kok ngga bisa mulu *Alzajair*
BalasHapus
Balasan
siswandy19 Maret 2011 pukul 07.40
susah banget om/./.
coba de perjelas fungsi dan artinya om

makasih seblumnya.,.,
BalasHapus
Balasan
Unknown10 Agustus 2011 pukul 00.42
BInggung om, gagal maning gagal maning
BalasHapus
Balasan
Unknown13 Januari 2012 pukul 09.11
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
Balasan
Anonim20 Mei 2012 pukul 06.36
Code javanya ada kesalahan Mas
BalasHapus
Balasan

Tambahkan komentar

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh