Cara Praktis Mempercantik Blog Dengan Pelengkap Css Widget

Ayo percantik blog kau dengan mengubah tampilan widget bawaan default blogger memakai kode Css

Bosan dengan tampilan widget bawaan blogger yang sangat sederhana ? gampang.. kali ini Om akan menyebarkan cara mempercantik blog di blogger buat pemula . cara ini sederhana dan tidak susah yang perlu kau lakukan hanya dengan menambahkan sedikit css pada template mu.

Tapi sebelumnya kita wajib mengetahui apa itu css dan Pengertian Css

CSS ialah kependekan dari Cascading Style Sheets. Berisi rangkaian kode kode yang memilih bagimana suatu script akan tampil di halaman web

Kemudian kenali Apa yang dimaksud widget dan Fungsinya

Oke sudah mengerti bukan ?? kini kita lanjut dengan tutorial cara mempercantik tampilan blogspot. tidak di perlukan keahlian khusus untuk menerapkan cara ini kau diminta hanya untuk memeperhatikan apa yang om sampaikan supaya ketika kau menerapkannya tidak ada error atau langkah langkah yang salah.

Mengubah tampilan arsip blog supaya kelihatan lebih cantik

Langkah-langkah awal kau pasang dulu widget arsip blog di blogspot kau kemudian pilih hierarki untuk pilihan widget arsipnya, Tempatkan di sidebar kanan atau kiri

Sekarang buka sajian dashboard blogger kemudian klik template kemudian pilih edit html
Cari kode ini, agar lebih simpel klik ctrl+f pada keybord blogger kemudian paste kode ini  ]]> </ b: skin> dan enter

Setelah ketemu dengan kode itu kini tambahkan script css ini diatasnya

/* Widget Arsip */
#ArchiveList ul > li > a.post-count-link{font-size:18px;width:100%;margin:0;padding:0 15px;line-height:38px;background-color:#f6f6f6;box-sizing:border-box;letter-spacing:1px}
#ArchiveList ul ul li a.post-count-link{width:auto;margin:0 5px;padding:8px 25px;background:transparent;text-transform:uppercase;font:12px merriweather sans;font-weight:700}
#ArchiveList .zippy{visibility:hidden}
#ArchiveList ul li a.toggle{position:absolute;top:0;left:0;width:100%;display:block;height:38px;z-index:5}
#ArchiveList ul ul li a.toggle{position:absolute;top:0;left:0;width:30px;height:24px;display:block;z-index:0}
#ArchiveList .toggle{position:relative}
#ArchiveList ul ul .zippy{color:#fff;visibility:visible;text-shadow:none}
#ArchiveList ul ul .zippy:before{content:'\f105';font-family:FontAwesome;position:absolute;top:3px;left:12px;padding:4px;line-height:1;font-size:12px;color:#8C8C8C}
#ArchiveList ul ul .toggle-open:before{content:'\f107';font-family:FontAwesome;position:absolute;top:3px;left:10px}
#ArchiveList ul li{padding:0!important;text-indent:0!important;margin:0!important;position:relative;background:none}
#ArchiveList ul .post-count-link{padding:10px 0;display:inline-block;margin:0 5px}
#ArchiveList ul ul .posts li{padding:0 5px 5px!important;margin:0 5px 5px 20px !important;text-transform:none;border-bottom:1px solid #f0f0f0;font-size:12px}  #ArchiveList ul ul .posts li:before{content:'\f0da';font-family:FontAwesome;padding-right:5px;}
#ArchiveList ul{margin:0 0 2px!important}
span.post-count{position:absolute;right:7px;top:7px;color:#666;background:#fff;padding:5px 5px 0;width:24px;height:24px;border-radius:3px;border:1px solid #ffc1c1;font:10px arial;vertical-align:middle;text-align:center}

Untuk hasil Demonya kau dapat lihat pada blog ini, widget arsipnya kelihatan rapi bukan ??

Nah kini kita percantik widget lainnya

Mempercantik tampilan popular post pada blogger dengan css

Langkah-langkahnya sama, kau hanya perlu menambahkan kode css popular post berikut ke atas kode ]]> </ b: skin>

popular post css #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:- 15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font- size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin- right:10px;background:transparent;padding:0;width:70px;height:70px;} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts3 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px;

Hasilnya

Kalau yang dibawah ini untuk mengubah tampilan follow by email bawaah defaul dari bloggger

Kode css untuk mempercantik tampilan follow by email pada blogger

Caranya masih sama dengan diatas, hanya menambahkan cara paling simpel yakni menambahkan kode css ini diatas kode ]]> </ b: skin>

.FollowByEmail .widget-content:before{content:"Enter your email address to subscribe to this blog and receive notifications of new posts by email.";display:block} .FollowByEmail .follow-by-email-inner .follow-by-email-submit {background-color:#e74c3c;} .FollowByEmail .follow-by-email-inner .follow-by-email-address {font-size: 13px;padding: 6px 0;padding-left: 5%;width: 93%;} .footer .FollowByEmail .follow-by-email-inner .follow-by-email-address {background-color:#000000;border:1px solid #e74c3c;} input[type="submit"] {border-radius:2px;background-color:#06C100;outline:0;border:0;padding:5px 8px;color:#FFFFFF;margin:2px 3px;cursor:pointer;} input[type="submit"]:hover {background-color:#324353;} input[type="text"] {padding: 4px 5px;border: 1px solid rgba(219,219,219,1);color: #324353;}

Untuk hasil demonya kau check sendiri supaya jadi kejutan yah :D

Bagaimana, simpel bukan ?? bagaimana cara saya mempercantik tampilan blog selalu mengandalkan css saja , kenapa ? lantaran css itu ringan tidak menyerupai java script, selain itu memakai java script proses penerapannya sulit jadi untuk kau pemula niscaya akan kesulitan menciptakan tampilan blog lebih menarik.

Masih ada banyak code css untuk mempercantik tampilan blogspot di blogger tentu akan saya share ke kau , tapi tidak kini , kapan kapan akan saya bagikan dan tentu dengan tutorial yang sedikit lebih berbeda dengan tutorial blogger lainnya. 

Saya akan bagi dengan proses yang sangat simpel di terapkan sehingga kau yang sebagai pemula tidak akan merasa susah dalam mempercantik tampilan blog dengan css

Oke ??..sekian dari om, rajin rajin berkunjung ke sini

Silahkan di share...