Pasang Widget WA Channel, Fanpage Facebook, Telegram & YouTube di Blogspot

Cara mudah pasang widget WA Channel FB page Telegram dan Youtube di Blogger atau Blogspot. 

Anda hanya ikuti langkah langkah yang sudah kami cantumkan disini. Tutorial ini sudah kompatibel dengan semua versi theme blogspot.>Anda hanya perlu menambahkan kode html berikut ini:

1. 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">IKA TECHNOLOGY</div>
    <div class="channel_description">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="channel_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

2. 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">IKA TECHNOLOGY</div>
    <div class="channel_description">Tersedia di Facebook</div>
  </div>
  <div class="channel_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

3. 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">IKA TECHNOLOGY</div>
    <div class="channel_description">Tersedia di Telegram</div>
  </div>
  <div class="channel_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

4. 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">IKA TECHNOLOGY</div>
    <div class="channel_description">Tersedia di YouTube Channel</div>
  </div>
  <div class="channel_follow_button">
    <a href="#">Subscribe</a>
  </div>
</div>

Kemudian Anda menambahkan kode CSS sebagai berikut:

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>

Sampai sini jika semua sudah dilakukan maka sudah selesai dan Anda bisa lihat hasilnya. Semoga bermanfaat.