Blogging cara tepat untukmu

Cara gampang mempercantik blog dengan tambahan css widget

Ayo percantik blog kamu dengan mengubah tampilan widget bawaan default blogger menggunakan kode Css
Cara gampang mempercantik blog dengan tambahan css widget

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

Tapi sebelumnya kita wajib mengetahui apa itu css dan Pengertian Css

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi kode yang menentukan bagimana suatu script akan tampil di halaman web

Kemudian kenali Apa yang dimaksud widget dan Fungsinya

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

Mengubah tampilan arsip blog supaya kelihatan lebih cantik

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

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

Setelah ketemu dengan kode itu sekarang 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 kamu bisa lihat pada blog ini, widget arsipnya kelihatan rapi bukan ??

Nah sekarang kita percantik widget lainnya

Mempercantik tampilan popular post pada blogger dengan css

Langkah-langkahnya sama, kamu 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
Cara gampang mempercantik blog dengan tambahan css widget






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 mudah 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 kamu check sendiri supaya jadi kejutan yah :D

Bagaimana, mudah bukan ?? bagaimana cara saya mempercantik tampilan blog selalu mengandalkan css saja , kenapa ? sebab css itu ringan tidak seperti java script, selain itu menggunakan java script proses penerapannya sulit jadi untuk kamu pemula pasti akan kesulitan membuat tampilan blog lebih menarik.

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

Saya akan bagi dengan proses yang sangat mudah di terapkan sehingga kamu 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...

Tag : Design
2 Komentar untuk "Cara gampang mempercantik blog dengan tambahan css widget"

Pasti om gak disuruh rajin"pun saya hampir semua artkel pmblogging saya baca sampai ke akar"nya dimi mencari ilmu.trimakasih om sangat banyak ilmunya setisp hari selalu ada saja yg baru

Makasih yah udah jadi pengunjung setia omblogging

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan


Back To Top