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 🙂
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.
