XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Profile
No Result
View All Result
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
No Result
View All Result
  • Profile
XKOMODOTCOM

Tutorial Membuat Widget Join This Site Keren ala Blog X Komo

Febri Tri Harmoko by Febri Tri Harmoko
in Blogger, Tutorial
0
0
0
SHARES
96
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.

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.

BACAJUGA

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

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

Cara Setting Private atau Public DNS di Android - PC - Laptop
Internet

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

3 weeks ago
241
Solusi Tidak Bisa Main Game Online Dengan Internet Indihome
Tips

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

3 weeks ago
24.4k
Cara Login Akun Admin Modem IndiHome Huawei HG8245H
Tutorial

Cara Login Akun Admin Modem IndiHome HUAWEI HG8245H / HG8245A

1 month ago
195.6k
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem IndiHome ZTE F609 / F660 (Username & Password)

1 month ago
270.4k
Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows
Windows

Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows

1 month ago
12
Cara Mengganti DNS Google - Cloudflare di Windows PC atau Laptop
Windows

Cara Mengganti DNS Google / Cloudflare di Windows (PC/Laptop)

2 months ago
168
Load More
Please login to join discussion
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Advertise with us

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

No Result
View All Result
  • Profile
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

Welcome Back!

Sign In with Facebook
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
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.