Andi's Blog

Icon tersebut akan muncul dengan sendirinya jika kita membuat daftar tulisan, link atau blogroll dengan menambahkan kode <ul><li> dan menutupnya dengan </li></ul>. Atau jika sobat membuat daftar link menggunakan fasilitas tambah gadget pada elemen halaman di blogger.

Untuk menambahkan icon yang berwarna kuning tersebut sangatlah mudah, ikuti langkah-langkahnya berikut ini :

• Login ke blogger dengan user ID sobat.
• Tuju Tata Letak.
• Klik tab Edit HTML.
• Kemudian tambahkan kode berikut ini diatas kode ]]></b:skin>

  #sidebar-wrapper ul {

  color:#333;

  margin:0px;

  padding:0px;

  }

  
  #sidebar-wrapper ul li {

  background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/SuHhL1fZSMI/AAAAAAAAB_w/engBWuVJmlo/link_arrow_thumb%5B1%5D.png) no-repeat 0px 5px;

  margin:0px 0px 5px;

  padding:0px 0px 5px 15px;

  }

  
  #sidebar-wrapper ul li a:hover {

  margin:0px 0px 5px;

  padding:0px;

  }

• Simpan Template.

 Keterangan :

1. Kode yang berwarna merah adalah kode css untuk sidebar blog saya, sobat sesuaikan dengan kode css sidebar blog sobat, tapi umumnya sama.
2. Kode yang berwarna ungu adalah url dari icon, bisa sobat ganti sesuai keinginan sobat.

 Contoh penulisan manual :

<ul>

 

<li><a href="http://miscah.blogspot.com/2009/12/mempercantik-menu-dengan-mycssmenu.html"> Mempercantik Menu Via MyCSSMenu.com</a></li>

 

<li><a href="http://miscah.blogspot.com/2009/12/memasang-widget-sharing-is-sexy.html"> Memasang Widget Sharing is Sexy di Blog</a></li>

 

<li><a href="http://miscah.blogspot.com/2009/12/pasang-breadcrumb-navigasi-di-blog.html"> Pasang Breadcrumb Navigasi di Blog</a></li>

 

<li><a href="http://miscah.blogspot.com/2009/12/acak-copy-paste-artikel-via-tynt.html"> Malacak Copy Paste Artikel via Tynt Insight</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/mengganti-background-dengan-gradient.html"> Mengganti Background Dengan Gradien Image</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/cara-membuat-label-dengan-fungsi-scroll.html"> Label Dengan Fungsi Scroll</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/tabel-perhitungan-google-pagerank.html"> Tabel Perhitungan Google PageRank</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/optimalkan-feedburner-dengan-memasang.html"> Cara Memasang PageFlip</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/membuat-efek-tulisan-dengan-css-text.html"> Membuat Efek Tulisan Dengan CSS Text Shadow</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/03/menyimpan-file-di-google-sites.html"> Menyimpan File di Google Sites</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/03/menyembunyikan-image-pada-read-more.html"> Menyembunyikan Image Pada Read More Otomatis</a></li>

 

</ul>

Tulisan yang saya tebalkan adalah kode yang harus sobat tambahkan setiap mengisi tulisan yang didalamnya terdapat link.

Semoga tutorial singkat ini bisa bermanfaat.

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;

• color : #000 adalah warna dasar tulisan
• background: #fff adalah warna latar
• 1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

	color: #000; background: #fff; text-shadow: 2px 2px 3px #000;
	color: #000; background: #fff; text-shadow: 2px 2px #000;
	color: #000; background: #fff; text-shadow: 2px -2px 3px #000;
	color: #000; background: #666; text-shadow: 0px 1px 1px #fff;
	color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;
	color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
	color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
	color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
	color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
	color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;
	color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup.

• Setelah login ke blogger, langsung saja tuju Edit HTML.
• Letakkan kode css berikut ini sebelum kode ]]></b:skin>
  

  #pageflip { position: relative }
  #pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
  #pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
  background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png?imgmax=800) no-repeat right top; text-indent:-9999px }
  

  
  
• Copy semua kode script yang ada disini dan kemudian letakkan setelah kode ]]></b:skin>
• Kemudian letakkan kode berikut ini tepat setelah kode <body>
  

  <div id='pageflip'>
  <a href='http://feeds.feedburner.com/blog-zone' target='_blank'>
  <img alt='' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png?imgmax=800'/>
  <span class='msg_block'/>
  </a>
  </div>
  

  
  
• Simpan Template.

1. Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
2. Tulisan yang berwarna biru adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.