$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide

Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide

Hi Blogger :)
Sebelum nya saya telah membuat artikel mengenai Tutorial Pasang Widget ChatBox Melayang di Kanan / Kiri Blog Dengan Efek Show / Hide Content. pada tutorial sebelum nya kan itu untuk widget ChatBox yah bagaimana dengan Widget Shoutbox atau Shoutmix ?
kali ini saya mencoba membuat Show - Hide Content untuk Widget selain chatbox :)

Hide Widget Shoutbox


Kode yang kita gunakan sebagai berikut :

Kode CSS ini bisa di letakan di atas ]]></b:skin>

#at {
    position:fixed;
    left:0;
    z-index:1000;
}
* html #at {
    position:relative;
}
.attab {
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    bottom:0;
    margin-left:-8px;
}
.atcontent {
    float:left;
    background:#2484f1;
    padding:10px;
}
#ButtonchatBlog-Xkomo {
    bottom:0px;
    left:0;
    position:fixed;
    padding:5px 8px;
    background:#2484f1;
    text-decoration:none;
    color: #fff;
    font-weight:bold;
    width:250px;
       text-align:center;
}
#ButtonchatBlog-Xkomo a {
    text-decoration:none;
    color: #fff;
    font-weight:bold;
 
}
#ButtonClose-Xkomo {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding: 2px;
    right: 13px;
    bottom: 15px;
    position: absolute;
    right: 41px;
}
#Buttonclose-Xkomo a {
    text-decoration:none;
    color: #fff;
    font-weight:bold;
    float:right;
}
#ButtonLink-Xkomo {
    color: rgb(66, 66, 66);
    text-decoration: none;
    width: 65px;
    padding: 5px;
    margin: -9px 10px -11px 5px;
    font-size: smaller;
}


Trus Kode Js yang kita gunakan itu ada 3 :

    function showHideAT() {
        var at = document.getElementById("at");
        var w = at.offsetWidth;
        at.opened ? moveAT(0, -400 - w) : moveAT(1000, 30);
        at.opened = !at.opened;
    }

    function moveAT(x0, xf) {
        var at = document.getElementById("at");
        var dx = Math.abs(x0 - xf) > 25 ? 35 : 1;
        var dir = xf > x0 ? 1 : -1;
        var x = x0 + dx * dir;
        at.style.bottom = x.toString() + "px";
        if (x0 != xf) {
            setTimeout("moveAT(" + x + ", " + xf + ")", 10);
        }
    }

    var at = document.getElementById("at");
    at.style.bottom = (-200 - at.offsetWidth).toString() + "px";

Kode HTML silahkan lihat di bawah :

<div id="at">
    <div class="attab" onclick="showHideAT()"></div>
    <div class="atcontent">
        <div align="center">

<!-- Pasang Kode WIdget nya di sini-->
            </div>
        </div>
        <br /> <a id="ButtonClose-Xkomo" href="javascript:void(0);" onclick="showHideAT()" alt="klik close untuk menutup"> Close</a>
 <span><a href="http://www.xkomo.com/2014/05/tutorial-membuat-show-hide-widget-Shoutbox-Shoutmix.html" id="ButtonLink-Xkomo">Get This Gadget</span>
    </div>
    </a>
</div>
<a id="ButtonchatBlog-Xkomo" href="javascript:showHideAT()" />Chat Blog</a>
</div>


Nah itu Semua bahan yang kita perlukan untuk membuat widget Show Hide Shoutbox / Shoutmix :)
sekarang tinggal Bagaimana cara menggabungkan nya ? :D

Sebelum kita mulai membahas cara menggabungkan nya ada dua cara memasang widget ini :) cara pertama bisa langsung di simpan lewat Template dan cara kedua dengan cara menambahkan Widget HTML pada Tata Letak :)

Nah biar simpel dalam artikel ini saya berikan tutorial nya dengan menambahkan Widget HTML pada Tata Letak saja yah :wee :D :hebat
untuk CSS bisa di simpan dalam Template ( ]]></b:skin>) Atau bisa langsung di jadikan satu paket Dengan Kode HTMLWidget Show / Hide Shoutbox / Shoutmix ini :)

Langkah Pertama kamu buka Tata Letak pada blog trus klik Tambahkan Widget  Setelah itu Pilih Widget HTML/JavaScript Kemudian Paste kan saja Kode di bawah ini :)
<style type="text/css">
#at {
    position:fixed;
    left:0;
    z-index:1000;
}
* html #at {
    position:relative;
}
.attab {
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    bottom:0;
    margin-left:-8px;
}
.atcontent {
    float:left;
    background:#2484f1;
    padding:10px;
}
#ButtonchatBlog-Xkomo {
    bottom:0px;
    left:0;
    position:fixed;
    padding:5px 8px;
    background:#2484f1;
    text-decoration:none;
    color: #fff;
    font-weight:bold;
    width:250px;
       text-align:center;
}
#ButtonchatBlog-Xkomo a {
    text-decoration:none;
    color: #fff;
    font-weight:bold;
 
}
#ButtonClose-Xkomo {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding: 2px;
    right: 13px;
    bottom: 15px;
    position: absolute;
    right: 41px;
}
#Buttonclose-Xkomo a {
    text-decoration:none;
    color: #fff;
    font-weight:bold;
    float:right;
}
#ButtonLink-Xkomo {
    color: rgb(66, 66, 66);
    text-decoration: none;
    width: 65px;
    padding: 5px;
    margin: -9px 10px -11px 5px;
    font-size: smaller;
}
</style>
<script type="text/javascript">
    function showHideAT() {
        var at = document.getElementById("at");
        var w = at.offsetWidth;
        at.opened ? moveAT(0, -400 - w) : moveAT(1000, 30);
        at.opened = !at.opened;
    }

    function moveAT(x0, xf) {
        var at = document.getElementById("at");
        var dx = Math.abs(x0 - xf) > 25 ? 35 : 1;
        var dir = xf > x0 ? 1 : -1;
        var x = x0 + dx * dir;
        at.style.bottom = x.toString() + "px";
        if (x0 != xf) {
            setTimeout("moveAT(" + x + ", " + xf + ")", 10);
        }
    }
</script>
<div id="at">
    <div class="attab" onclick="showHideAT()"></div>
    <div class="atcontent">
        <div align="center">
           
<!-- Ganti Tulisan Ini dengan Kode Widget kamu-->
            </div>
        </div>
        <br /> <a id="ButtonClose-Xkomo" href="javascript:void(0);" onclick="showHideAT()" alt="klik close untuk menutup"> Close</a>
 <span><a href="http://www.xkomo.com/2014/05/tutorial-membuat-show-hide-widget-Shoutbox-Shoutmix.html" id="ButtonLink-Xkomo">Get This Gadget</span>
    </div>
    </a>
</div>
<script type="text/javascript">
    var at = document.getElementById("at");
    at.style.bottom = (-200 - at.offsetWidth).toString() + "px";
</script><a id="ButtonchatBlog-Xkomo" href="javascript:showHideAT()" />Chat Blog</a>
</div>

Silahkan ganti tulisan hijau ini
<!-- Ganti Tulisan Ini dengan Kode Widget kamu-->

Dengan Kode Widget kamu :) silahkan mencoba :keren dan berkreasi sesuka hati kamu yah :p untuk blog yang menggunakan Font Awesome bisa menambahkan Font nya setelah Chat Blog atau Membuat pseudo element :before pada CSS di atas :)
semoga artikel Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide Bermanfaat :keren  Good Luck. :keren
Sumber Kode JavaScript : http://dextoshare.blogspot.com/2012/01/membuat-buku-tamuchat-box-show-hide.html

Original Article By Blog X Komo 

COMMENTS

BLOGGER: 13
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide
Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide
Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide
http://2.bp.blogspot.com/-AY136fGwRxQ/U2IJOPuCSVI/AAAAAAAABdU/CDxA4Qukdrk/s1600/capture-20140502-094146.png
http://2.bp.blogspot.com/-AY136fGwRxQ/U2IJOPuCSVI/AAAAAAAABdU/CDxA4Qukdrk/s72-c/capture-20140502-094146.png
BLOG X KOMO
http://www.xkomo.com/2014/05/tutorial-membuat-show-hide-widget-Shoutbox-Shoutmix.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/05/tutorial-membuat-show-hide-widget-Shoutbox-Shoutmix.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy