Cara Membuat Tag Typography Html pada Blog

Tentunya mata anda tidak akan asing dengan tag atau menu dengan style typography seperti pada gambar diatas bukan?
Anda juga bisa membuatnya kok ! penasaran? Scroll mouse anda ke bawah ya :)


Langsung saja kita ke tutorialnya ya :

1. Buka aplikasi seperti notepad, notepad ++ atau dreamweaver, terserah anda.
2. Kita buat file css nya terlebih dahulu.
3. File > New > Css (Dreamweaver)

	@charset "utf-8";
	/* CSS Document */
	a {
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	}
	.widget-title{
	font-family:Tahoma, Geneva, sans-serif;
	}

view raw link.css hosted with ❤ by GitHub
4. Simpan dengan nama link.css
5. Upload filenya ke website anda, terserah pake apa, kalo saya pake google site, anda juga bisa mendaftar di google site Di sini
6. Kemudian kita buka blogger.com dan masuk ke Tata letak, tambahkan widget dan pilih html/text.
7. Masukkan Script Berikut.

	<link href="link css" rel="stylesheet">
	<div class="twd-widget l-two">
	<h3 class="widget-title">Tags</h3><div class="tagcloud"><a href='#' title='25 topics' style='font-size: 15.285714285714pt;'>Contoh</a>
	<a href='#' title='7 topics' style='font-size: 8pt;'>Contoh</a>
	<a href='#' title='13 topics' style='font-size: 11.571428571429pt;'>Contoh</a>
	</div></div>

view raw gistfile1.txt hosted with ❤ by GitHub
8. Terus ganti "link css" dengan link css anda yang telah terupload, ganti tanda "#" dengan link menu anda dan ganti tulisan "Contoh" dengan nama menu anda.
9. Setelah selesai, simpan widgetnya dan lihat blog.
10. Jika berhasil maka akan seperti ini kurang lebih.

    

11. Jika anda klik salah satu dari menu tersebut maka anda akan berpindah halaman sesuai link yang anda masukkan tadi.

Sekian dari saya, Terimakasih

Semoga Bermanfaat.

Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com