Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?

Who’s Online

There are no users currently online

Categories

  • Android (10)
  • Apps (33)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (29)
  • Event (17)
  • Game (3)
  • Internet (17)
  • Laptop (71)
  • OS (8)
  • Peripheral (21)
  • Personal (260)
  • Publisher (3)
  • Review (23)
  • Smartphone (52)
  • Social Media (6)
  • Technology (145)
  • Tips (66)
  • Travel (5)
  • Tutorial (125)
  • Unboxing (17)
  • Video (33)
  • Web (17)
  • Windows (5)
  • Wordpress (14)
  • YouTube (9)

Subscriptions

  • Febri Tri Harmoko
  • Ahmad Imam Arifin
  • Al Annas
  • Ampera 94
  • Arif Sutarlie

Recent News

  • Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
  • Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
  • Bagaimana Performa ASUS ZenBook Pro Duo 15 OLED (UX582) – Test Benchmark
XKOMODOTCOM
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM
Home Web Blogger
Cara Menambahkan Widget ChatBox Show / Hide Melayang di Blog

Cara Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog

Febri Tri Harmoko by Febri Tri Harmoko
9 years ago
in Blogger, Tutorial
1
0
ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia
246
VIEWS
ShareTweet

Cara Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog – Hi sahabat blogger Indonesia, Sebelum nya saya telah membuat artikel mengenai Tutorial Pasang Widget ChatBox Melayang di Kanan / Kiri Blog Dengan Efek Show / Hide Content.

Pada tutorial sebelumnya kan itu untuk widget ChatBox yah bagaimana dengan Widget Shoutbox atau Shoutmix ? kali ini saya mencoba membuat Show – Hide Content untuk Widget selain chatbox 🙂

RelatedPosts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

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

Tutorial Cara Membuat Show / Hide Widget Shoutbox / Shoutmix

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="https://xkomo.com/tutorial-membuat-show-hide-widget-Shoutbox-Shoutmix" 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 😀

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 😀

Untuk CSS bisa di simpan dalam Template ]]></b:skin> Atau bisa langsung di jadikan satu paket Dengan Kode HTML Widget 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="https://xkomo.com/tutorial-membuat-show-hide-widget-Shoutbox-Shoutmix" 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 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 ini bisa memberikan manfaat untuk kita semua.

Source Script JavaScript By: http://dextoshare.blogspot.com/2012/01/membuat-buku-tamuchat-box-show-hide.html
Tags: BlogCodingCSSHTMLWidget
ShareTweet
Previous Post

Cara Menambahkan Feed Custom Domain Pada Blog

Next Post

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Febri Tri Harmoko

Febri Tri Harmoko

Just content creator

Related Posts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
Android

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

February 1, 2023
11
Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

February 2, 2023
35
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

November 19, 2022
451.9k
Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android
Video

Tutorial Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android (VPN/DNS Pribadi) – 100% Pasti Berhasil!

February 2, 2023
75
Cara Setting VPN Gratis di Windows (PC / Laptop)
Tutorial

Cara Setting VPN Gratis di Windows (PC/Laptop)

October 5, 2022
39
Cara Setting VPN di Android Tanpa Aplikasi Tambahan
Internet

Cara Setting VPN di Android Tanpa Instal Aplikasi Tambahan 100% WORK!

September 30, 2022
510
Next Post
Tutorial Membuat Notifikasi Komentar Ala Google Plus

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

TUTORIAL MODIFIKASI TAMPILAN NOTIFIKASI KOMENTAR ALA KANG ISMET

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist