Menu

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

Categories

  • Android (19)
  • Apps (42)
  • Blogger (23)
  • Computer (11)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (26)
  • Laptop (75)
  • News (5)
  • OS (17)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (62)
  • Social Media (12)
  • Tablet (1)
  • Technology (167)
  • Tips (87)
  • Travel (5)
  • Tutorial (144)
  • Unboxing (18)
  • Video (55)
  • Web (29)
  • Windows (7)
  • Wordpress (21)
  • YouTube (29)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Blog Coding Competition CSS ExpertBook Firmware Game Mobile Google Google Play Store Hardware HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Root Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN WhatsApp 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 *

Recommended Product

Banner ASUS Online Store - Diskon 500K
Promo Hosting Murah di Jagoan Hosting

Recommended Videos

For You
Rekomendasi Aplikasi Download Video YouTube di HP Android Tanpa Iklan Gratis

Aplikasi Download Video YouTube Terbaik di HP Android Gratis Tanpa Iklan

6 VIEWS
September 21, 2023
Cara Instal Twitter Lite di HP Android dan iOS

Cara Instal Twitter Lite di HP (Android/iOS)

68 VIEWS
July 18, 2023
Solusi Twitter Error Tidak Dapat Memperbarui Tweet

Solusi Twitter Error Tidak Dapat Memperbarui Tweet

325 VIEWS
July 17, 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
  • Tools
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps