Elok BTemplate

Sabtu, 17 Mei 2014

Cara Membuat Label Cloud Menjadi Lebih Rapi dan Keren

Cara Membuat Label Cloud Menjadi Lebih Rapi dan Keren - kali ini saya akan membagikan tutorial yang cukup mudah, yaitu membuat label cloud menjadi lebih rapi dan keren. langsung saja berikut tutorialnya :

Label Cloud

1. pertama masuk ke dashboard > Template > edit HTML
2. kedua, carilah kode ]]></b:skin> (untuk mempermudah gunakan CTRL + F)
3. letakkan kode dibawah ini diatas ]]></b:skin>

/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}
.cloud-label-widget-content{text-align:left;overflow:hidden;margin-top:0px}
.label-size{display:block;float:left;background:#393939;margin:0 1px 1px 0;color:#eee}
.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px}
.label-size:hover{background:#DC1E25;transition:all 0.3s ease-in}
.label-count{white-space:nowrap;padding-right:8px;margin-left:-4px}
.label-size{line-height:1.2}
#sekel-column-divide .label-size{background:#555!important}
#Label1 li a{color:#2c3e50;text-decoration:none}
#Label1 li a:hover,#Label2 li a:active,#Label1 li a:focus{color:#20aea6;text-decoration:none}
#Label1 li .label-counter{float:right;background-color:#20aea6;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align:center;font-size:12px}
#Label1 li:hover .label-counter{background-color:#e74c3c;color:white;transition:all 0.3s ease-in}

4. Simpan template anda dan lihat hasilnya

DEMO

mudah bukan, jika dirasa tutorial ini bermanfaat mohon dishare kembali dan tinggalkan komentar ...

Senin, 12 Mei 2014

Lorem terakhir

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis, ante non iaculis facilisis, lorem arcu gravida erat, non aliquet leo est ut ligula. Sed in varius neque. Vestibulum enim nisl, dictum eu nunc ac, tempus ultricies dui. Nam at dolor neque. Nulla laoreet malesuada ullamcorper. Nulla quis arcu orci. Integer congue dapibus vestibulum. Morbi dignissim viverra fringilla. Aenean adipiscing porttitor euismod. Aliquam pretium rutrum tortor ut rhoncus. Phasellus elementum vehicula laoreet. Morbi mattis ultricies nunc. Nullam tincidunt enim ut nulla consectetur, non mollis nunc dignissim.

Donec ut laoreet leo. Aliquam vitae vulputate libero, ut auctor felis. Aenean consequat, erat vel tristique ornare, orci quam pulvinar turpis, in venenatis leo lorem at elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer varius arcu vel pulvinar rutrum. Ut ultrices lectus a scelerisque dapibus. In lorem ipsum, luctus eget nisi ut, faucibus pretium nunc. Nunc eu lobortis lorem. Phasellus iaculis ac ipsum vel ornare. Vivamus tristique justo mi, quis porttitor ipsum sagittis at. Nullam porta magna et leo tempor fringilla. Fusce nec laoreet diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nulla arcu, et feugiat ante feugiat luctus.
Aliquam bibendum turpis et felis viverra porttitor. Pellentesque vitae leo enim. Donec luctus, risus in blandit iaculis, velit risus bibendum nibh, eu ornare nunc ante eu ante. Aliquam adipiscing porttitor pellentesque. Cras lacinia tortor tempor, bibendum enim ac, interdum justo. Suspendisse vestibulum auctor augue vitae porta. Nullam pulvinar orci non hendrerit ultrices. Quisque eu est vestibulum, gravida dui non, pellentesque urna. Nam at leo id est cursus dictum at non turpis. Ut eleifend volutpat erat ac accumsan. Nunc pulvinar urna diam, in semper odio venenatis id. Phasellus viverra neque nec mi dapibus interdum.
Aliquam ullamcorper vel risus vel sagittis. Praesent vitae justo ac quam mollis tempor sed in quam. Proin fermentum fringilla nunc, sit amet feugiat nunc convallis et. Vivamus gravida ligula hendrerit mattis pharetra. Proin fringilla, massa id viverra elementum, magna metus sollicitudin urna, auctor mattis quam ante a urna. Nunc euismod, enim at sagittis porta, turpis eros pharetra ante, dignissim tincidunt diam odio ac dolor. Vestibulum volutpat orci quam. Duis pulvinar lacinia leo, vitae sollicitudin lectus tincidunt eu. Vestibulum ipsum est, fringilla eget egestas ut, porta eget nisl. Donec aliquet sed turpis in malesuada. Nullam aliquam ipsum eget velit tempor fermentum. Morbi adipiscing sed sapien at egestas. Phasellus in pretium lorem, et accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam volutpat orci turpis, vitae feugiat magna volutpat vitae.

google google google

Wow lorem ipsum mendunia!

Aliquam bibendum turpis et felis viverra porttitor. Pellentesque vitae leo enim. Donec luctus, risus in blandit iaculis, velit risus bibendum nibh, eu ornare nunc ante eu ante. Aliquam adipiscing porttitor pellentesque. Cras lacinia tortor tempor, bibendum enim ac, interdum justo. Suspendisse vestibulum auctor augue vitae porta. Nullam pulvinar orci non hendrerit ultrices. Quisque eu est vestibulum, gravida dui non, pellentesque urna. Nam at leo id est cursus dictum at non turpis. Ut eleifend volutpat erat ac accumsan. Nunc pulvinar urna diam, in semper odio venenatis id. Phasellus viverra neque nec mi dapibus interdum.

Aliquam ullamcorper vel risus vel sagittis. Praesent vitae justo ac quam mollis tempor sed in quam. Proin fermentum fringilla nunc, sit amet feugiat nunc convallis et. Vivamus gravida ligula hendrerit mattis pharetra. Proin fringilla, massa id viverra elementum, magna metus sollicitudin urna, auctor mattis quam ante a urna. Nunc euismod, enim at sagittis porta, turpis eros pharetra ante, dignissim tincidunt diam odio ac dolor. Vestibulum volutpat orci quam. Duis pulvinar lacinia leo, vitae sollicitudin lectus tincidunt eu. Vestibulum ipsum est, fringilla eget egestas ut, porta eget nisl. Donec aliquet sed turpis in malesuada. Nullam aliquam ipsum eget velit tempor fermentum. Morbi adipiscing sed sapien at egestas. Phasellus in pretium lorem, et accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam volutpat orci turpis, vitae feugiat magna volutpat vitae.