Tutorial Membuat Widget Join This Site Keren ala Blog X Komo

Tutorial Pasang Widget Join this Site Valid HTML5 Responsive tanpa Javascript
      Sesuai Request dari Majalah Android yang menanyakan Tutorial bagaimana membuat widget Join This Site seperti pada Blog X Komo ini. Nah kali ini saya akan memberikan tutorial nya cukup simple dan sederhana hanya membutuhkan CSS saja tanpa membutuhkan Java Script yang tentu memberatkan Loading blog, buat kamu yang ingin memiliki loading blog yang cepat mungkin menggunakan widget ini salah satu keuntungan nya.
       okay kita langsung ke topik yah, tapi sebelum nya Blog haruslah terpasang link (support) Font Awesome. Jika tidak maka Icon tidak akan berfungsi.

Tutorial

  • 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 > add a gadget > tambahkan HTML/Javascipt > Copy Paste Kode HTML Join This Site > Save.
[<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/>]
  • Selesai. Silahkan di modifikasi widget Joint This Site nya sesuka hati.
  • [message]
    • info:
      • silahkan Ganti ID blog di atas dengan ID Blog kamu (yang saya tandai warna Merah)
untuk Contoh hasil dari Tutorial ini bisa lihat pada widget di sidebar kanan blog ini atau lihat pada preview jsfiddle di bawah.

Jika ada yang ingin di tanyakan, silahkan tanyakan saja di kolom komentar. Mari kita berdiskusi bersama Semoga bermanfaat yah

Jika ada yang ingin di tanyakanan / di diskusikan bersama saya, silahkan gabung ke forum saya

Join Now