by

Cara Cepat Tanpa Iklan Menciptakan Widget Label Keren Mirip Arlina Design Di Blogger

Cara Membuat Label Keren – Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat atau memodifikasi widget label di blogger mirip Arlina Design,

Bentuknya nyaris sama mirip halnya widget arlina, Namus sedikit dirubah beberapa bab mulai dari icon folder list label.

Untuk kau pengguna template viomagz mungkin kamu langsung bisa melekat isyarat dibawah untuk menggunakan desain label ini,

Namun untuk pengguna template yang lain bisa menyesuaikan sendiri kalau terjadi sedikit penataan yang kurang rapi.

Tinggal kamu sesuaikan dan tentukan kau membacanya sampai final.

Cara Membuat Widget Label Keren Seperti Arlina Design di Blogger

1. Silahkan kau login ke blogger.com, dan masuk ke hidangan dashboard.

2. Klick di menu TEMA > Edit HTML.

Cara Membuat Blog Secara Gratis di Blogger

3. Untuk kamu pengguna template viomagz, silahkan cari arahan dibawah ini dengan memakai CTRL + F untuk memudahkan pencarian :

.postingan-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::before

Kemudian silahkan kau GANTI aba-aba tersebut dengan arahan berikut ini

.artikel-terbaru ul li::before, .LinkList ul li::before, .PageList ul li::before

4. Selanjutnya silahkan kamu cari isyarat dibawh ini, Lalu HAPUS isyarat tersebut.

.list-label-widget-content ul li::before 
content: "\f07b";

Cara diatas ini berniat untuk menetralisir icon Folder di dalam [li before] di template viomagz.

Untuk kamu yang memakai template lain mungkin mampu menyesuaikan sendiri, atau mampu tinggalkan untuk cara ini.

Cara Mempercepat Loading Blog dengan Lazy Load Gambar

5. Selanjutnya, Copy aba-aba dibawah ini dan letakkan kodenya sempurna di ATAS kode ]]> atau

(Gunakan CTRL + F untuk mencari kode tersebut)

/* Label Arlina */
.list-label-widget-content ul li a border-bottom: 1px dotted #e6e6e6;border-radius: 5px;margin-bottom: 3px;font-size: 14px;color: #de0985;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;display: block;transition: initial;padding: 7px 11px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
.list-label-widget-content ul li a:hover background: #f5f5f5;color: #888;
.list-label-widget-content ul li list-style-type: none;margin: 0 0;border:none;display: inline-grid;width: 100%;
.list-label-widget-content padding: 0px 7px;
div.Labelbackground: #fff;padding-bottom: 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);
div.Label h2 border-top: 2px solid #df0d83;padding: 15px 0;text-indent: 20px;width: 100%;border-bottom: 1px solid #dadada;margin-bottom: 5px;
.Label h2 svg float: right;margin-right: 15px; display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';
.widget:hover h2 > svg animation: rubberBand 1s;
.list-label-widget-content ul li a:before background-image:url("data:image/svg+xml,");margin-right: 10px;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';
@keyframes rubberBandfromtransform:scale3d(1,1,1)30%transform:scale3d(1.25,0.75,1)40%transform:scale3d(0.75,1.25,1)50%transform:scale3d(1.15,0.85,1)65%transform:scale3d(.95,1.05,1)75%transform:scale3d(1.05,.95,1)to-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)

Untuk Mengganti warna icon folder, cari fill=’%23de0985′ di code di atas, kemudian rubah menjadi fill=’%23000‘.

000 yaitu warna hitam dalam HEX, silakan ganti sesuai cita-cita kalian. Ingat Jangan menghapus %23

6. INGAT!! Masih di dalam sajian EDIT HTML, kali ini kita akan menambahakan icon tag label, silakan kalian (lompat ke widget “Label“).

Kemudian klik icon titik titik 3 (…) untuk membuka full codenya, Lalu Tambahkan code berikut ini SETELAH code



Untuk mengubah warna icon tag label silakan kalian ganti dibagain Fill

7. Setelah langkah – langkah diatas akhir, masuk kemenu tata letak dan ubah Tampilannya seperti gambar dibawah ini.

8. Klik SIMPAN dan Selesai.

Cara Mempercepat Loading Blog dengan Lazy Load Adsense

Bagaimana mudah bukan untuk panduan Cara Membuat Widget Label Keren Seperti Arlina Design di Blogger, kalau kau mempunyai pertanyaan seputar blogger silahkan komen di kolom komentar dibawah postingan ini.

News Feed