Membuat Label SexyBlogCumulus

Membuat Label SexyBlogCumulus

Sahabat blogger yang berbahagia, saya akan sampaikan info yang semoga bermanfaat yaitu tentang Bagaimana cara membuat label yang menarik dan indah, karena sangat indah dan menarik maka saya berinama "SexyBlogCumulus". Hal ini sebagai perpaduan atau modifikasi dari dua label yaitu pertama saya peroleh dari sahabat Raythank dan Ahmad Fazani yang nanti Anda akan tahu alamatnya dalam script dengan nama "Blogumulus", yaitu label otomatis namun penampilannya satu warna saja. Disisi lain yang kedua yaitu sahabtku si kumis tebal dengan istilah bocah deso dan ganteng di gubhugreyot telah membuat label cumulus yang indah menawan dengan CSS3. Perpaduan antara dua label tersebut akan menjadi label yang menarik seperti disidebar milik saya sebelah kanan, atau gambar pada posting ini di atas. Anda tertarik membuatnya? simpel kok, silahkan ikuti terus untuk menyimak tulisan berikut ini.

Adapun caranya ada dua tahap yaitu yang pertama buatlah Label otomatid Blogumulus miliknya Mr. Roy Tank yang telah saya modif seperti berikut :

1. Masuklah ke Dasboard Anda dan langsung ke Edit HTML, silahkan backup dulu dengan mengunduh template lengkap untuk berjaga-jaga jika terjadi hal yang tidak diinginkan;
2. Centang expand widget template dan carilah kode berikut ]]></b:skin>
3. Kalau ada kesulitan mencari kode tersebut dalam template Anda silahkan gunakan tombol keyboard CTRL+F;
4. Kalau sudah ketemu silahkan pastekan code HTML berikut tepat diatasnya :


#Label99 { border:2px dashed #ccb79f; background:#b19f89; color:#716349; margin-top:5px; margin-bottom:10px; padding:10px; width:300px; }


5. Selanjutnya carilah kode berikut ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
6. Jika sudah ditemukan pencariannya silahkan buat script label berikut dibawah ini tepat berada dibawah kode diatas sehingga akan seperti berikut ini :


<b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget
id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div class='bgsGR_CommBox-cumulus' style='align:center'> <div class='menuTitle'/><p style='text-align:center;margin-top:5px;font-size:12px;font-family:Bremen BLK BT'>Label Blogcumulus Info Toko Surya62</p> <div class='box4' style='background:#222; width:250px;border:8px solid #333;margin:20px 4px 20px 4px;'> <div class='box3' style='background:transparent url(http://i1222.photobucket.com/albums/dd489/surya546/AA0Tagcloud.png) center repeat-x;border:3px solid #555;width:244px;'> <div class='box2' style='background:transparent;width:238px;border:3px solid #777;'> <div class='box1' style='background:#999; width:222px; background:transparent url(http://i1222.photobucket.com/albums/dd489/surya546/ann_rose_kupu.gif?imgmax=70%) center no-repeat;border:3px solid #999;padding:0 5px'> <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/> <div id='flashcontent'> <script type='text/javascript'> var so = new SWFObject(&quot;http://sites.google.com/site/ bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;230&quot;, &quot;230&quot;, &quot;7&quot;, &quot;#ffffff&quot;); // uncomment next line to enable transparency //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;); so.addVariable(&quot;mode&quot;, &quot;tags&quot;); so.addVariable(&quot;distr&quot;, &quot;true&quot;); so.addVariable(&quot;tspeed&quot;, &quot;100&quot;); so.addVariable(&quot;tagcloud&quot;, &quot;<tags> <b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.write(&quot;flashcontent&quot;); </script></div></div></div></div></div> <p style='text-align:center;margin bottom:5px'><a href='http://www.roytanck.com/' target='_blank' title='Blogumulus by :'>RoyTanck</a>,<a href='http://www.bloggerbuster.com' target='_blank' title='Blogumulus by :'> Amanda Fazani</a>, <a href='http://gubhugreyot.blogspot.com/' title='Menu Cumulus Cantik by :'>GubhugReyot</a>, <a href='http://s-surya62.blogspot.com/' title='Modicikasi Label SxyBlogCumulus by :'>Surya62</a></p></div> <b:include name='quickedit'/> </div> </b:includable> </b:widget>


7. Sebelum di tutup silahkan masukkan script berikut ini agar box 1, 2, 3 dan 4 berfungsi, silahkan Anda mengedit sesuai lebar dan tinggi ruang widget Anda termasul warna :


<style type='text/css'>
.bgsGR_CommBox, .bgsGR_CommBox-cumulus {background:#000
url(http://i1222.photobucket.com/albums/dd489/surya546/bgwidget.jpg)
bottom center repeat;border:5px groove #666;font:Droid normal;
font-size:10px;color:#CCFFFF;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-o-transition:all 2s ease-in;-moz-transition: all 2s ease-in;-webkit-transition:all 2s ease-in;}
.bgsGR_CommBox-cumulus {float: left;margin: 0px; opacity: 0.2;filter:alpha(opacity=20); margin: auto;width:
auto;height: auto;overflow: auto; opacity: 0.2;filter:alpha(opacity=20);}
.bgsGR_CommBox { overflow:auto;height:200px; padding:5px 5px 5px 5px;opacity:0.1;}
.bgsGR_CommBox:hover, .bgsGR_CommBox-cumulus:hover, .Label .widget-content:hover{opacity:1.0;
filter:alpha(opacity=100);}
.bgsGR_CommBox a{color:#cb5d03;font-size:12px;font-weight:bold;text-decoration:none;}
.bgsGR_CommBox a:hover{text-decoration:underline;color:#33FF00;font-style:normal;}</style>
<script type='text/javascript'>var thumbnail_mode = &quot;float-left&quot; ;
summary_img = 250;
</script>
<script type='text/javascript'>



8. Script tersebut diatas letakkan tepan dibawah tag ]]></b:skin> jika kurang tepan untuk template Anda silahkan diedit lebar dan tinggi termasuk warnanya;
9. Terakhir silahkan simpan Template dan lihat perubahan template;
10. Semoga tahap pertama ini Anda berhasil menerapkan Tag Cloud Label yang sederhana tapi sudah tampil cantik;
11. Anda bisa mengatur lebar dan tinggi area label pada angka berwarna hijau dan warna teks atau begroundnya;
12. Lebar box 1 hingga 4 jika Anda akan menyesuaikan harus mempunyai selisih yang berimbang antara lebar box 1 hingga box 4.
13. Tag URL SWF mohon untuk dipadatkan agar terbaca;

Demikian info saya kali ini semoga bermanfaat, saya potong untuk saya lanjutkan pada info berikutnya, sebagaimana judul posting. Wassalamu'alaikum Warakhmatullahi Wabarakatuh.

Bergabunglah bersama kami dengan para Mentor Bisnis ternama !

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone.

Komunitas dan Affiliasi | Promosikan Halaman Anda Juga