Menu

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

Who’s Online

There are no users currently online

Categories

  • Android (10)
  • Apps (33)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (29)
  • Event (17)
  • Game (3)
  • Internet (17)
  • Laptop (71)
  • OS (8)
  • Peripheral (21)
  • Personal (260)
  • Publisher (3)
  • Review (23)
  • Smartphone (52)
  • Social Media (6)
  • Technology (145)
  • Tips (66)
  • Travel (5)
  • Tutorial (125)
  • Unboxing (17)
  • Video (33)
  • Web (17)
  • Windows (5)
  • Wordpress (14)
  • YouTube (9)

Subscriptions

  • Febri Tri Harmoko
  • Ahmad Imam Arifin
  • Al Annas
  • Ampera 94
  • Arif Sutarlie

Recent News

  • Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
  • Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
  • Bagaimana Performa ASUS ZenBook Pro Duo 15 OLED (UX582) – Test Benchmark
XKOMODOTCOM
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM
Home Web Blogger

Tutorial Membuat Widget Join This Site Keren ala Blog X Komo

Febri Tri Harmoko by Febri Tri Harmoko
in Blogger, Tutorial
0
0
ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia
97
VIEWS
ShareTweet

Tutorial Membuat Widget Join This Site Keren ala Blog X Komo – Sesuai Request dari Majalah Android yang menanyakan Tutorial bagaimana membuat widget Join This Site seperti yang saya gunakan di blog ini.

Jadi kali ini saya akan memberikan tutorial yang cukup simple dan sederhana.

RelatedPosts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

Hanya membutuhkan CSS saja tanpa membutuhkan Java Script untuk membuat widget Join This Site yang tentu akan memberatkan Loading blog.

Buat kamu yang ingin memiliki loading blog yang cepat mungkin menggunakan widget ini salah satu keuntungan nya.

Kembali ke topik, sebelum lanjut Blog harus sudah terpasang link (support) Font Awesome.

Jika tidak, maka Icon Font Awasome tidak akan berfungsi atau tidak tampil seperti semestinya.

Tutorial Cara Membuat / Menambahkan Widget Join This Site di Blog

Tutorial Membuat Widget Join This Site Keren

Silahkan lihat Tutorial Cara Membbuat atau Menambahkan Widget Join This Site di Blog, cukup mudah dan sederhana.

Tinggal kamu ikuti saja tutorial di bawah ini dengan perlahan, check this out:

  • Langkah Pertama silahkan Copy dan Paste CSS berikut tepat di atas </style> atau ]]></b:skin>
    .xkomo-blogger{text-align: center;
    display: inline-block;
    margin-bottom: -20px;
    margin-top: 5px;}
    .xkomo-blogger-profile a{ padding: 3px 8px;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 5px;
    font-family: Segoe UI;
    font-weight: 900;
    margin-top: 5px;
    float: left;
    color: white;/*warna tulisan*/
    background: rgb(0, 141, 252);/*warna Background*/}
    .xkomo-blogger-count {
    position: relative;
    padding: 1px 6px;
    border-radius: 5px;
    float: right;
    right: -53px;
    background: rgb(0, 141, 252);/*background Count*/
    color: white;/*warna Tulisan count*/
    top: -24px;
    }
    .xkomo-blogger-count:before {
    position: absolute;
    content: "";
    border: 9px dashed;
    border-color: transparent rgb(0, 141, 252) transparent transparent;
    left: -14px;
    top: 1px;
    }
  • Kemudian Letakan Code HTML berikut di lokasi yang di inginkan, Misal pada widget buka tab Layout pada dashboard.
  • Klik add a gadget.
  • Tambahkan HTML/Javascipt.
  • Copy dan Paste Kode HTML Join This Site.
    <div class="xkomo-blogger">
    <div class="xkomo-blogger-profile">
    <a href="http://www.Blogger.com/follow-blog.g?blogID=4848727032668058109" title="Join this site / follow" onclick="window.open(this.href, 'dofollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;">
    <i class="fa fa-users"> </i> Join This Blog</a>
    </div>
    <div class="xkomo-blogger-count">8.3K</div></div>
    <br/>
  • Save.

Selesai, silahkan di modifikasi kode CSS dan HTML Widget Joint This Site-nya sesuka hati dan selera kamu.

INFO:
Silahkan Ganti ID blog di atas (4848727032668058109) dengan ID Blog kamu.

Untuk contoh hasil dari Tutorial di atas, kamu bisa lihat pada preview jsfiddle berikut ini:

Sampai sini dulu artikel Cara Membuat Widget Tombol Join This Blog, semoga bermanfaat.

Kalau kamu punya pertanyaan atau request tutorial blog lainnya, bisa sampaikan melalui kolom komentar atau forum blog ini, sampai ketemu di next article …

Tags: BlogCSSHTMLWidget
ShareTweet

Related Posts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
Android

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

February 1, 2023
13
Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

February 2, 2023
35
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

November 19, 2022
452.2k
Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android
Video

Tutorial Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android (VPN/DNS Pribadi) – 100% Pasti Berhasil!

February 2, 2023
75
Cara Setting VPN Gratis di Windows (PC / Laptop)
Tutorial

Cara Setting VPN Gratis di Windows (PC/Laptop)

October 5, 2022
39
Cara Setting VPN di Android Tanpa Aplikasi Tambahan
Internet

Cara Setting VPN di Android Tanpa Instal Aplikasi Tambahan 100% WORK!

September 30, 2022
515

Leave a Reply Cancel reply

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

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • 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
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist