by

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

Cara Membuat Label Keren – Pada potensi kali ini saya akan menunjukkan panduan bagaimana cara menciptakan atau memodifikasi widget label di blogger mirip Arlina Design,

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

Untuk kau pengguna template viomagz mungkin kamu eksklusif bisa menempel petunjukdibawah untuk memakai rancangan label ini,

Namun untuk pengguna template yang lain bisa beradaptasi sendiri bila terjadi sedikit penataan yang kurang rapi.

Tinggal kamu sesuaikan dan tentukan kau membacanya hingga simpulan.

Cara Membuat Widget Label Keren Seperti Arlina Design di Blogger

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

2. Klick di sajian 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 penelusuran :

.postingan-modern 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-modern ul li::before, .LinkList ul li::before, .PageList ul li::before

4. Selanjutnya silahkan kau cari petunjukdibawh ini, Lalu HAPUS isyarat tersebut.

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

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

Untuk kau yang memakai template lain mungkin mampu menyesuaikan sendiri, atau mampu lewati untuk cara ini.

Cara Mempercepat Loading Blog dengan Lazy Load Gambar

5. Selanjutnya, Copy arahan 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, lalu rubah menjadi fill=’%23000‘.

000 yakni warna hitam dalam HEX, silakan ganti sesuai keinginan kalian. Ingat Jangan meniadakan %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 simpulan, masuk kemenu tata letak dan ubah Tampilannya mirip gambar dibawah ini.

8. Klik SIMPAN dan Selesai.

Cara Mempercepat Loading Blog dengan Lazy Load Adsense

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

News Feed