Thursday, March 29, 2012

Membuat Label SexyBlogCumulus

Membuat Label SexyBlogCumulus

Info Toko Surya62
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 :

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

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

  9. <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>

  10. 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 :

  11. <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'>

  12. Script tersebut diatas letakkan tepan dibawah tag ]]></b:skin> jika kurang tepan untuk template Anda silahkan diedit lebar dan tinggi termasuk warnanya;
  13. Terakhir silahkan simpan Template dan lihat perubahan template;
  14. Semoga tahap pertama ini Anda berhasil menerapkan Tag Cloud Label yang sederhana tapi sudah tampil cantik;
  15. Anda bisa mengatur lebar dan tinggi area label pada angka berwarna hijau dan warna teks atau begroundnya;
  16. Lebar box 1 hingga 4 jika Anda akan menyesuaikan harus mempunyai selisih yang berimbang antara lebar box 1 hingga box 4.
  17. 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.


Join wazzub Now

2 comments:

Terimakasih Anda telah silaturakhim keblog ini dengan misi didaktik metodik pembelajaran di SMK, sehingga setiap saat dapat berubah sesuai kompetensi Pembelajaran. Silahkan berikan komentar yang sangat berharga demi kemajuan blog ini. Sehubungan dengan hak cipta apabila ada konten Anda disini dengan rendah hati saya mohon ijin memuatnya dan jika tidak berkenan mohon konfirmasinya, Mari berbagi untuk info yang manfaat dan belajar sepanjang hayat, salam sukses buat Anda dan keluarga!!! Klik gambar emoticon berikut jika Anda ingin menggunakannya.



Tahukah Anda bagaimana menjadi marketter yang bijak,hebat dan tepat?
daftarkan segera hari ini silahkan klik img bergoyang dibawah!!!

Formula Bisnis ClickBank
Marilah Tukar Link Untuk Meningkatkan Performance Blog/Web dengan membuka tombol berikut untuk melihat link Anda yang "Sukses!!!" :

Tukar Link Untuk Meningkatkan Performance Blog/Web

Mari kita tukar link secara otomatis untuk meningkatkan rank kita bersama.
Terima kasih atas kebersamaannya untuk menjalin kesetiakawanan,seia dan sekata kita.
Masuklah Anda ke Contact Formuntuk tukar link atau
untuk cek link-bunner sahabat di Link Partner atau kesini saja Kapten untuk silaturahmi bersama teman lainnya.
Adapun link saya seperti berikut ini:
<a href="http://s-surya62.blogspot.com"title="Free blog tutorials on toko information HTML and CSS"target="_blank">Info Toko Surya62</a>



Join Wazzub Now

Silahkan masukkan kode HTML(bebas)jangan lebih dari 50 baris,kemudian klik"convert",
maka akan didapat kode HTML yang siap di posting dan selanjutnya Anda hanya mencopy hasilnya.
Editlah pada program notepad atau wordpad terlebih dahulu ya...

bisnis syariah

Apabila anda ingin menkonvert lengkap encoding dan decoding online
silahkan kunjungi situs Encode/Decode HTML Entities kesini
Salam Pershabatan Selalu dari saya di Info Toko Surya62

MARI MAJU BERSAMA MEMBANGUN BANGSA DENGAN AKHLAQUL KARIMAH
Online Job for All. Work from home computer.