Simple Style

 

 

Template Information

 

Name	Simple Style
Type	Blogger Template
Properties	White, 2 columns, multi columns, right sidebar, xml
Compatible with

Border-Radius : Membuat Garis Lengkung Dengan CSS

Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolom atau curve corner. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

 

Saya akan berikan contoh pengunaan border-radius pada tulisan saja, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.

 

Syntax untuk border-radius

 

Mozilla Equivalent	Browser Opera 10.5	Webkit Equivalent (Safari 3)
-moz-border-radius-topright	border-top-right-radius	-webkit-border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius	-webkit-border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius	-webkit-border-bottom-left-radius
-moz-border-radius-topleft	border-top-left-radius	-webkit-border-top-left-radius
-moz-border-radius	border-radius	-webkit-border-radius

 

 

-Moz-Border-Radius (Untuk Mozilla)

 

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

-Webkit-Border-Radius (Untuk Safari)

 

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

 

Border-Radius (Support Opera 10.5)

 

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam css sidebar blog sobat.

 

Semoga bermanfaat ya.

Negocios Template

 

 

Template Information

 

Name	Negocios
Type	Blogger Template
Properties	White, 2 columns, right sidebar, xml
Compatible with

Membuat Widget 3 Kolom Dibawah Header

Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. Widget 3 kolom ini bisa sobat lihat demonya disini.

 

Baiklah langsung menuju lokasi pengeditan template-nya.

•  Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HML.
• Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
• Letakkan kode css berikut ini diatas kode ]]></b:skin>

  /* –- Top --*/

  #top {

  background:#fff;

  margin-top:10px auto;

  width:960px;

  overflow:hidden;

  font-size:12px;

  padding:10px;

  }

   

  #top h2 {

  background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

  font-size:14pt;

  font-weight:400;

  text-align:center;

  font-style:normal;

  line-height:1.3em;

  color:#fff;

  padding:5px;

  margin-top:-10px;

  margin-left:-10px;

  margin-right:-10px;

  }
  

  
  #top ul {

  color:#333;

  margin:0;

  padding:0;

  }

  
  #top ul li {

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXv99Ki31zwych69FTEZsyCCE9sUPcZJvZtizNgcOJyXvCB3pNESUlhGf2Xr3hBfNbWsrm4P2sZ8aMX0nYiFymmcUe_LTN6d53EkXEz13pXICWU9nsk7A40U1eN6tJikutpg5Uj9RASgu/s320/b3.gif) no-repeat;

  list-style-type:none;

  border-bottom:1px dashed #CCC;

  margin:0 0 10px;

  padding:0 0 5px 20px;

  }

   

  #top ul li a:hover {

  margin:0px 0px 5px;

  padding:0px;

  }

  
  #topcenter {

  width:300px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px

  }

  
  #topleft {

  width:280px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

  
  #topright {

  width:280px;

  float:right;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

   

• Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
  </b:section>

  </div>

• Kemudian letakkan kode berikut ini tepat setelah kode diatas :

  <div id='top'>
  <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
  </b:section>

  <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
  </b:section>

  <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
  </b:section>
  </div>

• Simpan Template.

 

Semoga bermanfaat dan bisa membuat blog sobat jadi ramai.

Leaf Shape Template

 

 

Template Information

 

Name	Leaf Shape
Type	Blogger Template
Properties	Black, 2 columns, right sidebar, xml

Cara Membuat Dan Mempercantik Blockquote

Ada pertanyaan dari salah seorang sobat pada postingan membuat navigasi horizontal 2 baris yang menanyakan tentang modifikasi blockquote. Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog. Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger.

 

Blockquote Gambar

 

Sama seperti yang ada di blog ini, kode css-nya :

 

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufHghSTWVFNVV39YPXUkI6sh3cw-O93tq_70eOYtwjJFI5z-OhE3_uuyckue_QtAnxFL4inym3IzuTqt65v0vGx3b6HhZs94cZCgkZub1v7FLX-MgVSahVPvjb3y9FdUedRJC-cEe6VA/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}

 

Hasilnya :

 

Keterangan :

• #F9F9F9 adalah warna background.
• padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.
• Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

 

 

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas, kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

 

---

 

Blockquote Border dan Warna

 

Kode css :

 

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

 

Hasilnya :

 

 

---

 

Blockquote Tulisan Besar Pada Baris Pertama

 

Kode css :

 

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em;

}
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;

}
.post blockquote p:first-line {
font-variant: small-caps;

}

 

Hasilnya :

 

 

---

 

Blockquote Warna dan Model Tulisan

 

Kode css :

 

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

 

Hasilnya :

 

 

---

 

Berikut cara pemasangannya :

• Login ke blogger.
• Tuju Tata Letak.
• Pilih Edit HTML.
• Cari kode .post blockquote { …………………………………dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
• Jangan Lupa Simpan Template.

 

Mudah-mudahan bermanfaat ya.

Membuat Navigasi Horizontal 2 Baris

Sebelumnya saya sudah pernah membahas cara membuat navigasi horizontal, sama halnya dengan yang dulu, namun kali ini saya menambahkan navigasinya menjadi 2 baris. Contohnya bisa sobat lihat pada gambar berikut, dimana saya menggunakan navigasi 2 baris dengan warna yang berbeda dan plus widget search engine sebagai bonus.

 

Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Saya sudah mencobanya dibeberapa template standard dari blogger. Jika berminat, berikut cara memasangnya.

 

1. Login ke blogger.
2. Masuk ke Tata letak.
3. Klik Edit HTML.
4. Sebaiknya backup template sobat terlebih dahulu.
5. Letakkan kode berikut sebelum kode ]]></b:skin>

    

   /*-- Nav --*/

   #nav {
   width:980px;
   float:left;
   background:#444;
   height:33px;
   border-bottom:1px solid #fff;
   padding:0;
   }

    

   #nav-left {
   float:left;
   display:inline;
   width:700px;
   }

    

   #nav-right {
   float:right;
   display:inline;
   width:200px;
   }

    

   #nav ul {
   position:relative;
   overflow:hidden;
   font:1em verdana,Helvetica,sans-serif;
   font-weight:700;
   font-size:13px;
   margin:0;
   padding:0;
   }

    

   #nav ul li a,#nav ul li a:visited {
   display:block;
   color:#f9f9f9;
   text-decoration:none;
   margin:0;
   padding:9px 10px;
   }

    

   #nav ul li a:hover {
   color:#B40404;
   background-color:#fff;
   margin:0;
   padding:9px 10px;
   }

    

   #search {
   background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
   border:1px solid #b3b3b3;
   float:right;
   height:20px;
   width:160px;
   margin-top:5px;
   margin-right:5px;
   padding-top:2px;
   }

    

   * html #search {
   margin-right:5px;
   }

    

   #search input {
   font-family:Arial,Helvetica,sans-serif;
   background:transparent;
   border:0;
   color:#000;
   float:left;
   font-size:12px;
   width:120px;
   padding-left:27px;
   margin:0;
   }

    

   /*-- Nav2 --*/

   #nav2 {
   float:left;
   display:inline;
   width:980px;
   background:#46040C;
   height:30px;
   clear:both;
   margin:0 auto;
   padding:0;
   }

    

   #nav2 ul {
   position:relative;
   overflow:hidden;
   font:1em Verdana,Arial,Helvetica,sans-serif;
   font-weight:500;
   margin:0;
   padding:0;
   }

    

   #nav2 ul li a,#nav2 ul li a:visited {
   display:block;
   color:#fff;
   text-decoration:none;
   margin:0;
   padding:8px 10px;
   }

    

   #nav2 ul li a:hover {
   color:maroon;
   background-color:#fff;
   margin:0;
   padding:8px 10px;
   }

    

   #nav ul li,#nav2 ul li {
   float:left;
   list-style:none;
   }

6. Kemudian cari kode yang mirip seperti dibawah ini :

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
   </b:section>
   </div>

7. Letakkan kode berikut tepat setelah kode diatas :

    

   <div id='nav'>    
   <b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
   <b:widget id='LinkList10' locked='true' title='Top Tabs' type='LinkList'>
   <b:includable id='main'>
   <div class='widget-content'>
   <b:if cond='data:title'/>
   <div id='nav-left'>   
   <ul>
   <li><a href='/'>Home</a></li>
   <b:loop values='data:links' var='link'>
   <li><a expr:href='data:link.target'><data:link.name/></a></li>
   </b:loop>
   </ul>
   </div>  
   </div>
   </b:includable>
   </b:widget>
   <b:widget id='HTML70' locked='true' title='Search' type='HTML'>
   <b:includable id='main'>
   <div id='nav-right'>
   <form action='/search/' id='searchform' method='get' style='display:inline;'>
   <div id='search'>
   <input id='search' maxlength='150' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
   <data:content/>
   </div>
   </form>
   </div>
   </b:includable>
   </b:widget>
   </b:section>   
   </div>

   <div id='nav2'>
   <b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
   <b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
   <b:includable id='main'>
   <div class='widget-content'>
   <b:if cond='data:title'/>
   <div id='nav2'>   
   <ul>
   <li><a href='http://www.blog-zone.info'>blogger news</a></li>
   <b:loop values='data:links' var='link'>
   <li><a expr:href='data:link.target'><data:link.name/></a></li>
   </b:loop>
   </ul>
   </div>  
   </div>
   </b:includable>
   </b:widget>
   </b:section>   
   </div>

8. Ganti tulisan yang berwarna merah dengan link yang sobat ingin tampilkan, karena link ini akan muncul secara automatis ketika link pertama pada baris ke-2 sobat isi.

9. Simpan Template.

 

Keterangan :

• width:980px  --->> lebar dari navigasi, sesuaikan dengan lebar template sobat.
• width:700px --->> lebar dari navigasi utama (tidak termasuk widget search engine).
• Contoh : jika sobat mempunyai template dengan lebar 900px, maka ganti angka 980px menjadi 900px dan ganti angka 700px menjadi 620px.
• Tulisan uji coba (Header) adalah judul blog, sesuaikan dengan judul blog sobat, sehingga ketika melakukan pencarian tidak bingung karena setiap blog mempunyai judul yang berbeda toh, jadi jangan di telan mentah-mentah kode :

  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
  </b:section>
  </div>

Semoga berhasil dan bermanfaat tentunya.

Memasang Widget Top Komentator Cloud

Mungkin sudah banyak sobat yang memasang widget top komentator, tapi tentunya dengan bentuk yang standard. Sama halnya dengan label cloud, widget top komentator ini juga berbentuk cloud atau menyerupai awan. Buat sobat yang menggunakan atribut nofollow, mungkin bisa berbagi sedikit backlink dengan memasang widget ini.

 

Dengan menggunakan atribut nofollow dan memasang widget top komentator ini, sobat tidak terlalu banyak memberikan backlink seperti halnya blog dofollow, tapi akan mengundang pengunjung untuk memberikan komentar sebanyak-banyaknya di blog sobat.

 

 

Widget ini saya dapatkan dari blogger sentral, sobat bisa mengunjungi langsung situsnya jika ingin tau lebih jelas. Dibawah ini cara pemasangan widget top komentatornya.

 

• Login ke blogger.
• Silahkan tuju ke Tata Letak.
• Klik tab Elemen Halaman.
• Tambah Gadget (Add Gadget) –-> pilih yang HTML/Javascript.
• Kemudian masukkan kode script dibawah ini :

  <!-- Top Commentators Cloud Start
  (c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
  <div style="text-align:justify;line-height:1.2;">
  <script type="text/javascript">
  function cCloud(feed) {
  max = 0;
  min = 10000;
  //finding highest and lowest count
  for (i=0;i<feed.count;i++)
  {
  ccCount = feed.value.items[i].commentcount * 1;
  if (ccCount > max)
  {
  max = ccCount;
  }
  if (ccCount < min)
  {
  min = ccCount;
  }
  }
  ccCountD = "";
  display = "";
  for (j=0;j<feed.count;j++)
  {
  ccdiff = feed.value.items[j].commentcount - min;
  ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
  ccUrl = "'" + feed.value.items[j].authorurl + "'";
  ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
  ccName = feed.value.items[j].title + ccCountD;
  ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "  </a>";//clickable commentator name
  display = display + ccLName;
  }
  document.write(display);
  }
  </script>
  <script src="http://pipes.yahoo.com/pipes/pipe.run?
  YourBlogUrl=http://bloggersentral.blogspot.com
  &Exclusions=Anonymous,Greenlava
  &ShowHowMany=20
  &Order=alphabet
  &_callback=cCloud
  &_id=cfa196644e1d6159c9183548c4b5e2f5
  &_render=json"
  type="text/javascript"></script>
  <span style="font-size: 80%; float:right;;margin-top:10px;"><a href="http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html" target="_blank">Make your own</a></span>
  </div>
  <!-- Top Commentators Cloud End -->

Keterangan :

• Hapus tulisan yang berwarna merah jika sobat tidak ingin menampilkan jumlah komentar.
• Silahkan ganti http://bloggersentral.blogspot.com dengan alamat url blog sobat tanpa diakhiri dengan slash ( / ).
• Anonymous,Greenlava  adalah nama komentator yang tidak ingin sobat tampilkan, biasanya nama pemilik blog, ganti saja dengan nama sobat (nama pada user blogger dan besar kecilnya huruf juga berpengaruh).
• Angka 20 adalah banyak komentator yang ingin ditampilkan.
• alphabet adalah urutan top komentator berdasarkan abjad atau huruf, silahkan ganti dengan "frequency" jika ingin mengurutkannya berdasarkan banyaknya komentar.

 

Semoga bisa bermanfaat, selamat mencoba !

 

---

sumber : http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html

Fialova Template

 

 

Template Information

 

Name	Fialova
Type	Blogger Template
Properties	Purple, White, 3 columns, right sidebar, xml

Google Update PageRank

Hal yang di tunggu-tunggu blogger datang juga, setelah 3 bulan terhitung sejak tutup tahun 2009 google update pagerank. Setelah melakukan pengecekan, hanya 2 blog saya yang mengalami perubahan termasuk blog ini. Bagaimana dengan blog sobat, apakah mengalami perubahan?

 

Buat yang pageranknya naik, saya ucapkan selamat. Dan buat yang turun jangan kecewa. Naik pagerank jangan senang dulu, karena ini belum stabil. Bisa saja google melakukan update lagi dalam waktu dekat, karena hal ini pernah google lakukan tahun 2009 dengan mengupdate pagerank sebulan kemudian setelah update rutin 3 bulanan.

 

Sekali lagi saya ucapkan selamat buat yang pageranknya naik.

CSS Border Style

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

 

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

 

Berikut ini contoh dari border yang bisa sobat gunakan :

 

Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">

 

dotted dotted dotted dotted dotted

 

</div>

 

dotted dotted dotted dotted dotted

 

 

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">

 

solid solid solid solid solid

 

</div>

 

solid solid solid solid solid

 

 

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">

 

dashed dashed dashed dashed dashed

 

</div>

 

dashed dashed dashed dashed dashed

 

 

 

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">

 

groove groove groove groove groove

 

</div>

 

groove groove groove groove groove

 

 

 

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">

 

double double double double double

 

</div>

 

double double double double double

 

 

 

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">

 

inset inset inset inset inset

 

</div>

 

inset inset inset inset inset

 

 

 

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">

 

outset outset outset outset outset

 

</div>

 

outset outset outset outset outset

 

 

 

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">

 

ridge ridge ridge ridge ridge

 

</div>

 

ridge ridge ridge ridge ridge

 

 

Border Campur Aduk 

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">

 

dotted dashed double outset

 

</div>

dotted dashed double outset

 

 

Keterangan :

• border:5px adalah tebal dari border.
• #08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
• width:500px adalah lebar dari kotak.
• padding:20px adalah jarak antara tulisan dengan border.
• background:#FFF adalah warna latar.

 

Semoga bermanfaat.

 

Variasi List-Style-Type

Mungkin sebagian blogger belum banyak yang mengerti fungsi dari list-style-type. List-style-type sendiri berfungsi sebagai penanda bullet icon blog, sobat bisa melihat contohnya pada icon panah warna kuning yang ada di sidebar blog saya. Beberapa pertanyaan muncul yang menanyakan cara membuat icon warna kuning seperti di blog saya.

 

Saya pernah membahas sebelumnya di postingan cara memasang icon tab di sidebar blog, namun pada saat itu contoh yang saya gunakan menggunakan image icon dengan url atau icon yang sudah di simpan sebelumnya di hosting. Saya akan berikan beberapa kode dari list-style-type yang bisa sobat gunakan.

 

list-style-type: disc;	list-style-type: lower-greek;
list-style-type: circle;	list-style-type: hewbrew;
list-style-type: square;	list-style-type: armenian;
list-style-type: decimal-leading-zero;	list-style-type: georgian;
list-style-type: lower-roman;	list-style-type: cjk-ideographic;
list-style-type: upper-roman;	list-style-type: hiragana;
list-style-type: upper-alpha;	list-style-type: katakana;
list-style-type: lower-alpha;	list-style-type: hiragana-iroha;
list-style-type: none;	list-style-type: inherit;

 

• Silahkan login ke blogger.
• Tuju Tata Letak.
• Klik Edit HTML.
• Cari kode "list-style-type", jika list-style-type tersebut terletak di bagian css sidebar, maka yang akan sobat ubah adalah icon bullet pada sidebar.
• Contohnya seperti ini :

  #sidebar ul { padding:0; margin:0; color:#FFF }
  #sidebar ul li { list-style-type:square; padding-left:5px; margin:8px 0 0 20px }

• Ubah dan sesuaikan dengan keinginan sobat, contohnya di ubah menggunakan decimal-leading-zero, maka ganti hasilnya menjadi : 

  #sidebar ul { padding:0; margin:0; color:#FFF }
  #sidebar ul li { list-style-type:decimal-leading-zero; padding-left:5px; margin:8px 0 0 20px }

• Simpan Template.

 

Untuk list-style-type: square bisa sobat lihat pada bagian bawah blog ini. sobat bisa melihat icon kotak kecil yang tampil sebelum isi dari recent post di bawah.

 

 

Semoga bermanfaat.