$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Tutorial Membuat Widget Join This Site Keren ala Blog X Komo

Cara membuat Widget Join This Blog menggunakan CSS

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

COMMENTS

BLOGGER: 3
Loading...
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,5,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Tutorial Membuat Widget Join This Site Keren ala Blog X Komo
Tutorial Membuat Widget Join This Site Keren ala Blog X Komo
Cara membuat Widget Join This Blog menggunakan CSS
https://3.bp.blogspot.com/-Cd2XQJADAmg/VUTLIEY8RLI/AAAAAAAAEC8/XDxV97U1sZA/s1600/capture-20150502-200251.png
https://3.bp.blogspot.com/-Cd2XQJADAmg/VUTLIEY8RLI/AAAAAAAAEC8/XDxV97U1sZA/s72-c/capture-20150502-200251.png
BLOG X KOMO
http://www.xkomo.com/2015/05/tutorial-membuat-widget-join-this-site.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2015/05/tutorial-membuat-widget-join-this-site.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy