Cara Mudah Pasang Widget WA Channel, Fanpage Facebook, Telegram & YouTube di Blogspot
Tutorial ini kompatibel dengan semua template Blogger.
Table of Contents
Menambahkan kode HTML
Tambahkan kode HTML tersebut ke dalam widget sidebar, ke dalam postingan (melalui mode Tampilan HTML), atau ke halaman lain sesuai keinginan.
WhatsApp Channel
<div class="channel_widget whatsapp">
<div class="channel_icon">
<svg fill="none" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M15.8301 8.63404C16.3081 8.35745 16.9198 8.52076 17.1964 8.9988C17.7077 9.88244 18 10.9086 18 12C18 13.0914 17.7077 14.1176 17.1964 15.0012C16.9198 15.4792 16.3081 15.6425 15.8301 15.366C15.352 15.0894 15.1887 14.4776 15.4653 13.9996C15.8052 13.4122 16 12.7304 16 12C16 11.2696 15.8052 10.5878 15.4653 10.0004C15.1887 9.52237 15.352 8.91063 15.8301 8.63404ZM8.16995 8.63404C8.64798 8.91063 8.81129 9.52237 8.5347 10.0004C8.19484 10.5878 8 11.2696 8 12C8 12.7304 8.19484 13.4122 8.5347 13.9996C8.81129 14.4776 8.64798 15.0894 8.16995 15.366C7.69191 15.6425 7.08017 15.4792 6.80358 15.0012C6.29231 14.1176 6 13.0914 6 12C6 10.9086 6.29231 9.88244 6.80358 8.9988C7.08017 8.52076 7.69191 8.35745 8.16995 8.63404Z" fill="currentColor" fill-rule="evenodd"></path><path d="M13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="currentColor"></path><path clip-rule="evenodd" d="M5.33243 16.4826L5.09622 17.2728C4.86428 18.0487 4.62086 18.8707 4.41748 19.5825C5.12931 19.3791 5.95126 19.1357 6.72722 18.9038L7.51743 18.6676L8.24444 19.057C9.36447 19.6571 10.6412 20 12 20C16.4154 20 20 16.4154 20 12C20 7.58457 16.4154 4 12 4C7.58457 4 4 7.58457 4 12C4 13.3588 4.34295 14.6355 4.94296 15.7556L5.33243 16.4826ZM3.18 16.7C2.63 18.54 2 20.69 2 21C2 21.55 2.45 22 3 22C3.31 22 5.46 21.37 7.3 20.82C8.7 21.57 10.3 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 13.7 2.43 15.3 3.18 16.7Z" fill="currentColor" fill-rule="evenodd"></path></svg>
</div>
<div class="channel_info">
<div class="channel_name">Gila Temax</div>
<div class="channel_description">Tersedia di WhatsApp Channel</div>
</div>
<div class="channel_follow_button">
<a href="#">Follow</a>
</div>
</div>Fanpage Facebook
<div class="channel_widget facebook">
<div class="channel_icon">
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"></path></svg>
</div>
<div class="channel_info">
<div class="channel_name">Gila Temax</div>
<div class="channel_description">Tersedia di Facebook</div>
</div>
<div class="channel_follow_button">
<a href="#">Follow</a>
</div>
</div>Telegram
<div class="channel_widget telegram">
<div class="channel_icon">
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M11.95 2C6.45 2.03 2 6.5 2 12c0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2h-.05Zm4.13 6.02c.08 0 .27.02.39.12.08.07.13.17.14.27.01.08.03.25.02.39-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.02-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69 0-.03.01-.12-.05-.18s-.14-.03-.21-.02c-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36 0-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.91-1.27 4.86-2.11 5.83-2.51 2.78-1.15 3.35-1.36 3.73-1.36Z"></path></svg>
</div>
<div class="channel_info">
<div class="channel_name">Gila Temax</div>
<div class="channel_description">Tersedia di Telegram</div>
</div>
<div class="channel_follow_button">
<a href="#">Follow</a>
</div>
</div>YouTube
<div class="channel_widget youtube">
<div class="channel_icon">
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z"></path></svg>
</div>
<div class="channel_info">
<div class="channel_name">Gila Temax</div>
<div class="channel_description">Tersedia di YouTube Channel</div>
</div>
<div class="channel_follow_button">
<a href="#">Subscribe</a>
</div>
</div>| Bagian yang Dapat Diubah | Deskripsi | Contoh Nilai |
|---|---|---|
channel_name |
Nama channel atau grup yang akan ditampilkan. | Gila Temax |
channel_description |
Deskripsi singkat mengenai channel atau grup. | Tersedia di YouTube Channel |
href |
URL tujuan ketika tombol diklik. | https://youtube.com/@contohchannel |
Subscribe |
Teks yang ditampilkan pada tombol aksi. | Subscribe |
Menambahkan kode CSS
Tambahkan kode CSS di atas tag </body> di dalam template.
<style>
*, *::before, *::after {
box-sizing:border-box;
}
svg {
width:24px;
height:24px;
}
/* --- Channel Widget --- */
.channel_widget {
display:inline-flex;
align-items:center;
flex-direction:column;
gap:16px;
border-radius:16px;
font-size:14px;
color:#0a0a0a;
text-align:center;
line-height:1.5;
padding:16px;
}
.channel_widget.whatsapp {
background-color:#075e541f;
}
.channel_widget.facebook {
background-color:#0866FF1f;
}
.channel_widget.telegram {
background-color:#24A1DE1f;
}
.channel_widget.youtube {
background-color:#FF00001f;
}
.channel_icon {
display:flex;
align-items:center;
justify-content:center;
background-color:#fff;
border-radius:50%;
width:56px;
height:56px;
}
.channel_widget.whatsapp .channel_icon {
color:#075e54;
}
.channel_widget.facebook .channel_icon {
color:#0866FF;
}
.channel_widget.telegram .channel_icon {
color:#24A1DE;
}
.channel_widget.youtube .channel_icon {
color:#FF0000;
}
.channel_icon svg {
width:32px;
height:32px;
}
.channel_name {
font-size:16px;
font-weight:700;
}
.channel_follow_button {
width:100%;
}
.channel_follow_button a {
display:flex;
align-items:center;
justify-content:center;
border-radius:100px;
font-size:14px;
font-weight:700;
color:#fff;
text-decoration:none!important;
height:40px;
padding:0 16px;
}
.channel_widget.whatsapp .channel_follow_button a {
background-color:#075e54;
}
.channel_widget.facebook .channel_follow_button a {
background-color:#0866FF;
}
.channel_widget.telegram .channel_follow_button a {
background-color:#24A1DE;
}
.channel_widget.youtube .channel_follow_button a {
background-color:#FF0000;
}
</style>Terima kasih telah mengikuti tutorial Cara Mudah Pasang Widget WA Channel, Fanpage Facebook & YouTube di Blogspot. Semoga panduan ini bermanfaat dan membantu Anda memasang widget WA Channel, Fanpage Facebook, serta YouTube di Blogspot dengan lebih mudah, sehingga pengunjung dapat terhubung dengan Anda melalui berbagai platform secara praktis dan tampilan blog tetap optimal.
Jangan lupa untuk meninggalkan komentar di bawah jika Anda memiliki pertanyaan, saran, atau ingin berbagi pengalaman setelah mencoba tutorial ini.
Makin kece ni. Terimakasih bang