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
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 …
