Tapi, kami ingin menjelaskan permintaan Mas Irfan dulu, karena dia mintanya lebih dulu. :). Tentang Slider Content, kami akan menerangkan di artikel yang akan datang.
Bersamaan itu, Tulisan tentang Tag Cumulus mungkin sudah sangat banyak dan bisa ditemukan di mana-mana. Dan juga, kami mungkin hanya memodifikasinya saja.
Kami memodifikasi dengan memakai bingkai "rounded corner (tepi pojok melingkar)"
Sejarahnya, Tag Cumulus ini dibuat oleh Mr. Roy Tanck, kemudian diadaptasi oleh Mrs Amanda. Awalnya, tags cumulus dipakai bagi wordpress, kemudian disesuaikan ke Blogger oleh mereka.
Selanjutnya, apa sih Tag Cumulus itu? Tag Cumulus adalah sebuah fitur/widget berkaitan dengan Label, Categories, dan Tag. Yaa... Tag Cumulus mengorganisasi Label/Categories.
Kelebihan Widget ini adalah bahwa dia bisa berputar-putar sehingga terlihat sangat menarik. Dan mungkin, dia bisa menjadikan-efisien (baca: menghemat) tinggi area sidebar blog kita.
Tentang Demo dari Tag Cumulus, anda sekalian bisa lihat di samping, di sidebar kami.
Selanjutnya, langkah-langkahnya adalah :
Babak Nol
1. Masuk ke Blogger
2. Pilih Tab Layout
3. klik Edit HTML
4. Pilih Expand Widget Template
Babak Kesatu: Menaruh kode CSS Bingkai Rounded (tanpa gambar)
1. Copy kode CSS dibawah ini:
<style>
#xsnazzy{margin:0 0 10px 0; background:transparent}
.xtop, .xbottom{display:block; font-size:1px; background:transparent}
.xb2, .xb3, .xb4{display:block; overflow:hidden; background:; border-left:1px solid ; border-right:1px solid }
.xb1, .xb2, .xb3{height:1px}
.xb1{background:; display:block; overflow:hidden; margin:0 5px}
.xb2{border-width:0 2px; margin:0 3px}
.xb3{margin:0 2px}
.xb4{height:2px; margin:0 1px}
.xboxcontent{display:block; padding:5px; background:; border:0 solid ; border-width:0 1px}
</style>
#xsnazzy{margin:0 0 10px 0; background:transparent}
.xtop, .xbottom{display:block; font-size:1px; background:transparent}
.xb2, .xb3, .xb4{display:block; overflow:hidden; background:; border-left:1px solid ; border-right:1px solid }
.xb1, .xb2, .xb3{height:1px}
.xb1{background:; display:block; overflow:hidden; margin:0 5px}
.xb2{border-width:0 2px; margin:0 3px}
.xb3{margin:0 2px}
.xb4{height:2px; margin:0 1px}
.xboxcontent{display:block; padding:5px; background:; border:0 solid ; border-width:0 1px}
</style>
Keterangan :
Plis, lihat tulisan yang kedap-kedip itu.
a. tulisan ungu #FFFFFF = warna background dari Bingkai
b. tulisan biru #0066FF = warna garis tepi dari Bingkai
Anda bisa merubah kode itu dengan kode warna sesuai selera anda.
3. Save Template-mu
Babak Kedua: Menaruh Kode HTML Bingkai dan Tag Cumulus
1. Cari kode HTML yang menunjuk pada 'id' atau 'class' dari area Sidebar Blog anda...
kode HTML sidebar tergantung dari jenis template anda. Ini bisa bervariasi. Misalnya: pada blog saya adalah id=sidebar-wrapper.
Tapi, dalam blog anda mungkin bisa lain. Misalnya: Mungkin juga, id='sidebar' ; id='column02' ; dan sebagainya.
2. Kemudian, copy kode dibawah ini:
<b:section id='sidebar9' preferred='yes' showaddelement='no'>
<b:widget id='Label9' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2 style='font-family:arial'></h2>
</b:if>
<div class='widget-content'><center>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a>Distributed by <a href='http://analisis-fiqih.blogspot.com'>Cahaya Biru</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "", "", "9", "");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style=''><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</center></div>
</b:includable>
</b:widget>
</b:section>
Keterangan:
a. Tulisan warna merah '' adalah title dari Widget. Anda bisa merubah sekehendak anda. Misalnya: kategori artikel, Grup Artikel, dan sebagainya.
b. Tulisan warna hijau = kode HTML pembuka (yang diatas) dan bingkai penutup (yang dibawah) dari bingkai Rounded corner.
c. Tulisan warna biru adalah kode-kode yang berhubungan dengan Widget.
c.1. Angka 330 (tanpa px) = lebar pixel widget
c.2. Angka 200 (tanpa px) = tinggi pixel widget
333333 (tanpa #) = kode warna dari Tulisan
c.3. #ffffff = kode warna dari Background Widget
c.4. Angka 12 = ukuran font dari widget
6. Taruh kode tersebut, di manapun anda suka. (saya sarankan dalam area sidebar yaa...)
7.Save Template-mu
Setelah disimpan, lihat hasilnya. Apakah tambah rusak atau tambah hancur...... sudah hancur....??? heheheh.......
bercanda...bercanda...
Selamat Menikmati....
P.S.
Jika anda tidak berkenan memberi bingkai "Rounded Corner" pada Tag Cumulus itu, dari babak 0 langsung loncat saja ke babak 2.
Saya beri kode pembuka dan penutup section agar lebih aman bagi blogger-blogger yang sangat newbie. Btw, saya juga newbie kok.
Section pembuka dan penutup itu boleh didelete. Ini berlaku ketika anda sudah memasukkan kode widget ke <b:section> dalam sidebar anda.
Dari : Cahaya Biru
Posting Komentar