24 February 2015

Modifikasi indeks label cloud

Tags
Cara memodif indeks label atau Membuat variasi indeks label.
Banyak cara untuk membuat label cloud menjadi lebih menarik yaitu dengan cara sedikit mengotak-atik pada ruangan html, dan widget label ini nantinya akan terlihat warna-warni indah dan menggoda ....Opss, oky lagsung saja kita ikuti satu langkah praktis di bawah ini



  • Login ke >> Blogger.com

  • Pada Dasbor pilih menu >> Template >> Edit HTML
  • Silahkan anda cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)
  • copy paste kode css berikut tepat di atas kode ]]></b:skin>






/*-----Custom Labels Cloud widget by http://syarif-hidayatd.blogspot.com/----*/
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
klik simpan dan silah kan lihat salah satu artikal anda apa yang terjadi dengan indeks label blog anda....! bagaimana mudahkan..? trimakasih atas kunjunganya jangan lupa sempatkan kirim komentar untuk artikel ini,

Modifikasi Widget Label Cloud

Tags
nama gambar
Gambar: © social media com



Cara memodif indeks label .Banyak cara untuk membuat label cloud menjadi lebih menarik yaitu dengan cara sedikit mengotak-atik pada ruangan html, dan widget label ini nantinya jika tersentuh maost akan terlihat miring beberapa derajat , oky lagsung saja kita ikuti satu langkah praktis di bawah ini

  • Login ke >> Blogger.com

  • Pada Dasbor pilih menu >> Template >> Edit HTML
  • Silahkan anda cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)
  • copy paste kode css berikut tepat di atas kode ]]></b:skin>


  • Artikel terkait: Membuat tab widget tiga kolom

/*-----Custom Labels Cloud widget by http://syarif-hidayatd.blogspot.com/----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}
klik simpan dan silah kan lihat salah satu artikal anda apa yang terjadi dengan indeks label blog anda....! bagaimana mudahkan..? trimakasih atas kunjunganya jangan lupa sempatkan kirim komentar untuk artikel ini,

23 February 2015

Membuat tab widget tiga kolom

Tags

nama gambar
Gambar: © social media com



Cara Membuat Menu Widget Multi Tab di Sidbar Blog
Mempunyai sebuah website atau blog profesional dengan tampilan menarik adalah dambaan bagi semua blogger ,hal ini tentu membutuhkan proses dan waktu. untuk membuat blog kita makin banyak pungunjung kita sebagai pemilik blog di tuntut sebisa mungkin menyediakan berbagai macam sumber informasi dimana informasi tersebut sangat di butuhkan bagi para pengunjung. oky itulah sekilas kata pendahuluan dari Admin , kembali ke pokok pembahasan yaitu Cara Membuat Menu Widget Multi Tab di Sidbar Blog atau Membuat tab widget tiga kolom

Mungkin artikel tentang Menu Tab Multi Widget Di Blog ini sudah banyak berkeliaran di luar sono , tapi kali ini saya memutuskan untuk tetap membuat artikel ini sebagai Documen untuk saya sendiri dan jika kalian semua ingin menerapkan di blog silahkan ikuti beberapa langkah penjelasan di bawah,

Fungsi membuat Menu Tab Multi Widget di blog ini terbukti bisa membuat tampilan widget blog menjadi simpel dan tidak amburadul atau acak-acakan. Karena dengan membuat menu tab multi widget di blog, maka widget akan menjadi satu tampilan atau memiliki efek show hidden widget. Intinya adalah dapat menghemat tempat dalam blog, sebab menu tab multi widget ini dapat berisi banyak widget. Tentunya hal ini sangat berguna sekali bagi blogger yang mengutamakan kerapian, apalagi blog yang banyak sekali memasang widget. demo anda sekalian bisa melihat sidbar blog ini

Baca Juga: Cara Terbaru Membuat Recent Post dengan Thumbnail super keren di Blogspot

  1. Login ke >> Blogger.com

  2. Pada Dasbor pilih menu >> Template >> Edit HTML.
  3. Silahkan anda cari kode </head> (Gunakan CTRL+F untuk mempermudah pencarian)
  4. copy paste kode script berikut tepat di atas kode </head>


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


    Jika dalam template kalian sudah ada kode script diatas, maka tidak perlu menambahkan lagi kedalam template blog anda. Karena efeknya Menu Tab Multi Widget tidak bisa berfungsi dengan baik bahkan bisa menjadi eror.


  5. Simpan Template
  6. Setelah kode di atas tersimpan di dalam template blog anda, sekarang kita menuju ke penerapan kode CSS-nya ke dalam widget blog ,

  7. Kembali ke "Dashboard" blog, pilih menu
    >> Tata Letak
    >> Tambah Gadget
    >> HTML/JavaScript
  8. Masukkan semua kode CSS di bawah kedalam kotak HTML/JavaScriptyang baru saja anda buat tadi






<style type="text/css">

        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float:left;margin:1px;font-size: 12px;padding: 2px 2px;border: 1px solid #000;overflow: hidden;position: relative;background: #49A4EE;cursor:pointer
display: block;
width: 30%;height: 25px;text-align: center;}

        html .blogtabs h2.active {background: #235C76;}

        .blogtabs .widget-content {border-top:1px solid #C6C6C8;padding: 10px;background: #fff;clear:both;margin:0;}

        .btab, #showtabs {display:none;}

        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

        $('#showtabs').simpleBlogTab ({organictabs: 3});

        });

        </script>

        <div id="showtabs"></div>
Terakhir; Simpan widget Catatan: silahkan edit background tampilan widget dengan merubah kode-kode berikut:
  • baris no:5 -border: 1px solid #000 (garis tepi boks kotak widget)

  • baris no:5 -background: #49A4EE; ( boks kotak widget )

  • baris no:7 -width: 30%;height: 25px; ( lebar tinggi kotak widget)


  • baris no:9 -background: #235C76; ( hover widget jika di klik )

  • baris no:11 -background: #fff (warna teks judul widget )










Agar widgetnya dapat menyatu dan menjadi multi tab widget, maka cara penerapan widget di blog harus tersusun seperti gambar di bawah ini.
oky para pengunjung sekalian saya rasa sudah cukup jelas ,Saya yaqin anda sekalian mudah memahami dan bisa mempraktekkan ......

19 February 2015

Membuat Menu Tab Multi Widget Blog

Tags

Membuat Menu Tab Multi Widget Blog
Gambar ilustrasi: © social media com


Cara Membuat Menu Widget Multi Tab di Sidbar Blog atau Membuat tab widget tiga kolom sebenarnya tidaklah susah,
sebuah website atau blog profesional dengan tampilan menarik adalah dambaan bagi semua blogger ,hal ini tentu membutuhkan proses dan waktu. untuk membuat blog kita makin banyak pungunjung kita sebagai pemilik blog di tuntut sebisa mungkin menyediakan berbagai macam sumber informasi dimana informasi tersebut sangat di butuhkan bagi para pengunjung. oky itulah sekilas kata pendahuluan dari Admin , kembali ke pokok pembahasan yaitu Cara Membuat Menu Widget Multi Tab di Sidbar Blog atau Membuat tab widget tiga kolom

Mungkin artikel tentang Menu Tab Multi Widget Di Blog ini sudah banyak berkeliaran di luar sono , tapi kali ini saya memutuskan untuk tetap membuat artikel ini sebagai Documen untuk saya sendiri dan jika kalian semua ingin menerapkan di blog silahkan ikuti beberapa langkah penjelasan di bawah,

Fungsi membuat Menu Tab Multi Widget di blog ini terbukti bisa membuat tampilan widget blog menjadi simpel dan tidak amburadul atau acak-acakan. Karena dengan membuat menu tab multi widget di blog, maka widget akan menjadi satu tampilan atau memiliki efek show hidden widget. Intinya adalah dapat menghemat tempat dalam blog, sebab menu tab multi widget ini dapat berisi banyak widget. Tentunya hal ini sangat berguna sekali bagi blogger yang mengutamakan kerapian, apalagi blog yang banyak sekali memasang widget. demo anda sekalian bisa melihat sidbar blog ini


  1. Login ke >> Blogger.com

  2. Pada Dasbor pilih menu >> Template >> Edit HTML.
  3. Silahkan anda cari kode </head> (Gunakan CTRL+F untuk mempermudah pencarian)
  4. copy paste kode script berikut tepat di atas kode </head>


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


    Jika dalam template kalian sudah ada kode script diatas, maka tidak perlu menambahkan lagi kedalam template blog anda. Karena efeknya Menu Tab Multi Widget tidak bisa berfungsi dengan baik


  5. Simpan Template
  6. Setelah kode di atas tersimpan di dalam template blog anda, sekarang kita menuju ke penerapan kode CSS-nya ke dalam widget blog ,

  7. Kembali ke "Dashboard" blog, pilih menu
    >> Tata Letak
    >> Tambah Gadget
    >> HTML/JavaScript
  8. Masukkan semua kode CSS di bawah kedalam kotak HTML/JavaScriptyang baru saja anda buat tadi



<style type="text/css">

        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float:left;margin:1px;font-size: 12px;padding: 2px 2px;border: 1px solid #000;overflow: hidden;position: relative;background: #49A4EE;cursor:pointer
display: block;
width: 30%;height: 25px;text-align: center;}

        html .blogtabs h2.active {background: #235C76;}

        .blogtabs .widget-content {border-top:1px solid #C6C6C8;padding: 10px;background: #fff;clear:both;margin:0;}

        .btab, #showtabs {display:none;}

        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

        $('#showtabs').simpleBlogTab ({organictabs: 3});

        });

        </script>

        <div id="showtabs"></div>
Terakhir; Simpan widget Catatan: silahkan edit background tampilan widget dengan merubah kode-kode berikut:
  • baris no:5 -border: 1px solid #000 (garis tepi boks kotak widget)

  • baris no:5 -background: #49A4EE; ( boks kotak widget )

  • baris no:7 -width: 30%;height: 25px; ( lebar tinggi kotak widget)


  • baris no:9 -background: #235C76; ( hover widget jika di klik )

  • baris no:11 -background: #fff (warna teks judul widget )




Agar widgetnya dapat menyatu dan menjadi multi tab widget, maka cara penerapan widget di blog harus tersusun seperti gambar di bawah ini.
oky para pengunjung sekalian saya rasa sudah cukup jelas ,Saya yaqin anda sekalian mudah memahami dan bisa mempraktekkan ......