Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara mengedit dan memperindah tampilan Side Bar pada blog

Cara mengedit dan memperindah tampilan Side Bar pada blog



Nah, ini menarik. Kita sudah belajar untuk mengubah dan menyesuaikan dengan metode kami widget Blogger (gadget), pada umumnya. Misalnya menambahkan ikon di samping judul sidebar pos dan menempatkan ikon atau gambar di samping Label dan Link . Itu keren. Tapi sekarang, kita akan belajar cara untuk mengubah dan gaya masing-masing widget (gadget) berbeda! Artinya: 
  • masing-masing widget Anda (Label, Arsip, Links, widget kustom) dapat memiliki penampilan itu sendiri (! warna, font, perbatasan, gambar apa-apa ....) 
  • ingat WIDGET yang sama dengan GADGET Ok, inilah contoh sederhana:
Aku telah memilih untuk berbeda widget saya dulu, jadi saya mengubah gaya dari Label, Link, Arsip dan widget Picture. Saya memilih widget ini hanya untuk contoh ini. Ingat bahwa Anda dapat melakukan ini dengan setiap widget lainnya juga!

Ada beberapa langkah sederhana Anda harus mengambil:
  1. memilih widget yang ingin Anda gaya, dan mengidentifikasinya di Blogger HTML kode
  2. menambahkan beberapa gaya CSS pada kode yang akan membumbui widget kami
  3. tidak kehilangan kelereng Anda (bersabar dan kreatif)

Memilih dan Mengidentifikasi

Setiap widget ditambahkan di Layout Blogger memiliki ID unik. Kami akan menggunakan ID ini untuk menerapkan beberapa gaya ke widget kita. Jadi, tugas kita adalah untuk menyelam ke dalam kode HTML Blogger, dan menemukan ini ID. Mari kita pergi.

Dari Dashboard Anda, kunjungi:
Masuk ke menu Template >> Procced >> centang Expand Template Widget dan gulir kursor ke bawah. Karena saya memilih untuk gaya saya widget sidebar (gadget), saya akan melihat ke dalam sidebar-wrapper. Dalam kasus saya, kode terlihat seperti ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Image1' locked='false' title='My Picture' type='Image'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
Ok. Anda dapat melihat ID itu widget saya:
Label widget ID >> Label1
Link widget ID >> LinkList1
Gambar widget ID >> image1
Arsip widget ID >> BlogArchive2

Terkadang, jika Anda memiliki banyak widget kustom, sulit untuk menebak ID itu. Dalam hal ini, ingatlah bahwa posisi mereka adalah sama seperti yang muncul di frontpage Blog Anda. Jika widget Label adalah dalam 1 tempat, maka akan dalam 1 tempat dalam kode terlalu ..
Langkah pertama dilakukan. Mari kita lanjutkan.


Styling dan tweaking
Sekarang, bagian yang menyenangkan. Untuk gaya widget, Anda harus tahu sedikit CSS. Tapi jangan khawatir, Anda bisa mendapatkan ini dalam beberapa menit. Pada langkah sebelumnya, kita telah belajar untuk mengidentifikasi ID dari widget kita. Sekarang, kita akan menggunakannya. Mari kita mulai dengan menyesuaikan widget Daftar Link. 


Dari Dashboard Blogger, kita akan pergi ke:
dan cari bagian ini (untuk pencarian lebih mudah, gunakan CTRL + F):
]]></b:skin> dan </head>
DI ATAS bagian ini, Anda akan menempatkan CSS style for kustom Widget Anda Daftar (gadget), sehingga semuanya akan terlihat seperti ini:

#LinkList1 {
background:#FFF4BF;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFE25F;
}

#LinkList1 h2 {
background: url(http://i40.tinypic.com/wummhj.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

#LinkList1 a:link {
color:#5F5F5F;
text-decoration:none;
}
#LinkList1 a:visited {
color:#5F5F5F;
text-decoration:none;
}
#LinkList1 a:hover {
color:$titlecolor;
text-decoration:underline;
}

]]></b:skin> dan </head>
Sekarang untuk menjelaskan sedikit:
Bagian warna biru adalah gaya untuk kotak widget tertentu (dalam kasus Daftar Link). Anda dapat mengubah latar belakang, gaya font, posisi, warna, perbatasan widget.
Bagian hijau adalah mendefinisikan hanya judul widget. Dalam contoh saya, saya menempatkan gambar bukan teks biasa, dan dengan "font-size:0px" judul aslinya tersembunyi. Cukup keren. Dengan cara ini, Anda dapat memiliki yang berbeda untuk setiap judul widget pada template Blogger Anda!
Pada kuning, saya telah didefinisikan bagaimana LINK saya dan warna Hover akan terlihat seperti. Saya harus melakukan ini karena latar belakang gaya widget baru saya pencampuran dengan warna link default asli. Sekarang Anda tahu bahwa Anda dapat menggunakan warna yang berbeda untuk link Anda di widget setiap!

Ok, saya pikir Anda punya itu. Ingat, ini hanya contoh. Anda dapat melakukan banyak lagi. Satu-satunya hal penting adalah untuk mengingat bahwa Anda harus KENALI widget Anda, dan STYLE melalui kode Blogger Anda.

Odii Siitohang
Judul: Cara mengedit dan memperindah tampilan Side Bar pada blog;
Ditulis oleh: Anonymous;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara mengedit dan memperindah tampilan Side Bar pada blog dengan url http://d-copy.blogspot.com/2012/07/cara-mengedit-dan-memperindah-tampilan.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[3] Komentar untuk Cara mengedit dan memperindah tampilan Side Bar pada blog:

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template