Menu

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

Categories

  • Android (16)
  • Apps (38)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (73)
  • News (3)
  • OS (15)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (157)
  • Tips (77)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (47)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (21)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS Experience ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
Home Web Blogger
Cara Menambahkan Widget Chat Box di Blogger, Seperti ShoutBox/ShoutMix dengan Menu Show/Hide

Cara Menambahkan Widget Chat Box di Blogger, Seperti ShoutBox/ShoutMix dengan Menu Show/Hide

Febri Tri Harmoko by Febri Tri Harmoko
February 22, 2023
in Blogger, Tutorial
1
0

Sebelumnya saya sudah membuat tutorial cara memasang ChatBox melayang di Blogger, di artikel kali ini saya akan membagikan tutorial cara menambahkan widget Chat Box di Blogger seperti ShoutBox/SHoutMix, beserta modifikasi kotak chat menjadi melayang di sebelah kiri atau kanan blog.

Pada tutorial sebelumnya kan itu untuk widget Chat Box, lalu bagaimana dengan widget Shoutbox/Shoutmix? kali ini saya mencoba membuat Show/Hide content untuk widget selain Chat Box.

Table of Contents

  • Demo Widget Chat Box di Blogger dengan Menu Show/Hide
  • Tutorial Cara Membuat Chat Box di Blogger ShoutBox/ShoutMix dengan Menu Show/Hide
    • 1. Tambahkan CSS Chat Box ke Template Blogger
    • 2. Tambahkan JavaScript Show/Hide ke Blogger
    • 3. Tambahkan Kode HTML Pemanggil Script Chat Box
  • Cara Menambahkan Widget Chat Box di Blogger dengan Menu Show/Hide
  • Kesimpulan

Demo Widget Chat Box di Blogger dengan Menu Show/Hide

Cara Menambahkan Widget Chat Box di Blogger, Seperti ShoutBox/ShoutMix dengan Menu Show/Hide
Contoh Tampilan Widget Chat Box di Blogger
Demo

Tutorial Cara Membuat Chat Box di Blogger ShoutBox/ShoutMix dengan Menu Show/Hide

1. Tambahkan CSS Chat Box ke Template Blogger

Tambahkan CSS ini ke templates blog, bisa di letakan di atas ]]></b:skin>

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;
}

2. Tambahkan JavaScript Show/Hide ke Blogger

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);
        }
    }

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

3. Tambahkan Kode HTML Pemanggil Script Chat Box

HTML
<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 menggabungkannya di templates Blogger kamu.

Cara Menambahkan Widget Chat Box di Blogger dengan Menu Show/Hide

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.

  1. Langkah pertama kamu buka Tata Letak pada blog.
  2. Klik Tambahkan Widget.
  3. Pilih widget HTML/JavaScript.
  4. Kemudian Paste kode HTML, CSS, JavaScript menu Show/Hide dan kode widget ShoutBox/ShoutMix.
  5. Simpan.
HTML
<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/cara-menambahkan-widget-chat-box-di-blogger/" 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>

Silakan ganti kode pada line 91, dengan kode widget ChatBox, ShoutBox, atau ShoutMix milik kamu.

HTML
<!-- Ganti Tulisan Ini dengan Kode Widget kamu-->

Kesimpulan

Silahkan mencoba dan berkreasi sesuka hati kamu yah, untuk blog yang menggunakan Font Awesome bisa menambahkan Font -nya setelah chat blog atau membuat pseudo element :before pada CSS di atas.

Semoga artikel ini bermanfaat.

REFERENSI
Script JavaScript dari http://dextoshare.blogspot.com/2012/01/membuat-buku-tamuchat-box-show-hide.html

Tags: CodingCSSWidget
Previous Post

Cara Menambahkan Feed di Blogger dengan Custom Domain, Wajib Ada Sitemap di Blog Loh!

Next Post

Review ROG Phone 6, Performa, Spesifikasi, dan Harga Terbaru 2023

Leave a Reply Cancel reply

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

Promo Jagoan Hosting

Promo Hosting Murah - Jagoan Hosting

Recommended Videos

For You
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

39 VIEWS
March 13, 2023
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

57 VIEWS
March 3, 2023
Cara Membuat Website di Jagoan Hosting

Cara Membuat Website WordPress di Jagoan Hosting, 100% Mudah dan Cepat untuk Pemula!

38 VIEWS
February 26, 2023
Show More

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • 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