Post Game: sidebar

Showing posts with label sidebar. Show all posts

Friday, December 23, 2016

Cara Membuat Widget Label Blog Warna Warni di Sidebar Terbaru

Cara Membuat Widget Label Blog Warna-Warni di Sidebar

SETELAH berbagi tentang Widget Popular Posts Warna Warni dan Cara Mempercantik Widget Label, kali ini CB share kode label blog warna-warni. Penampakannya seperti ilustrasi posting ini.

Live Demonya bisa dilihat di sumber kode di bawah ini, yaitu di template blog Blogholic. Lihat sidebar paling bawah di widget Label Cloudnya.

Memasang widget label warna-warni bisa dikategorikan bagian dari memperindah tampilan blog sekaligus menarik pehatian dan ramah pengguna (user friendly). Karena, dengan label warna-warni ini, kategori posting blog kita mudah ditemukan.

Cara Membuat Widget Label Blog Warna-Warni di Sidebar

Langsung saja kita pasang:

1. Template > Edit HTML
2. Copy & Paste Kode CSS Label Cloud berikut ini di atas kode </b:skin> atau </style>

/* Sidebar Label Cloud */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {color:#fff!important;background:#222;padding:8px 22px;margin:0 3px 3px 0;float:left;display:block;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
background:#2288bb;
color:#fff;
padding:8px 22px;
margin:0 0 3px;
clear:both;
float:left;
}
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:16px;
font-family:Oswald, sans-serif;
color:#fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

3. Save Template!

Kini kode CSS untuk Widget Label Blog Warna-Warni sudah terpasang dan akan muncul di Sidebar Blog Anda.

Catatan Penting

1. Warna latar (kode angka warna merah) bisa diubah lagi. Silakan rujuk Kode Warna HTML
2. Kode di atas untuk menampilkan 5 LABEL saja.

Jika Label Blog Anda banyak, dan biasanya begitu, maka gunakan kode yang di bawah ini --menampilkan hingga 20 Label Warna-Warni.

KODE LABEL WARNA-WARNI BANYAK

/* Sidebar Label Cloud */
.cloud-label-widget-content {text-align: left;} .label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;} .label-size:nth-child(1) {background: #F86D9E;} .label-size:nth-child(2) {background: #37C371;} .label-size:nth-child(3) {background: #10BBEA;} .label-size:nth-child(4) {background: #25CBFE;} .label-size:nth-child(5) {background: #963690;} .label-size:nth-child(6) {background: #A3195C;} .label-size:nth-child(7) {background: #545454;} .label-size:nth-child(8) {background: #F2A15F;} .label-size:nth-child(9) {background: #00FF80;} .label-size:nth-child(10) {background: #B7860B;} .label-size:nth-child(11) {background: #99CC33;} .label-size:nth-child(12) {background: #FFFF3D;} .label-size:nth-child(13) {background: #3FDECF;} .label-size:nth-child(14) {background: #FF2F0A;} .label-size:nth-child(15) {background: #E9DB58;} .label-size:nth-child(16) {background: #42FFBD;} .label-size:nth-child(17) {background: #6899ED;} .label-size:nth-child(18) {background: #FF52AE;} .label-size:nth-child(19) {background: #8DBC2F;} .label-size:nth-child(20) {background: #80FF00;} .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: #FF6BFF; }

CARA PASANG WIDGET LABEL CLOUD

Langkah berikutnya adalah memasang widgel Label Cloud:
1. Layout > Add a Gadget > Pilih Label

2. Centang "Cloud" seperti ini:

3. Save! Simpan.

Go to link Download

Cara Membuat Tabbed Content di Sidebar Blog

Menampilkan atau membuat Tabbed Content Widget di Sidebar Blog bagus buat navigasi dan internal link blog, sekaligus mempercantik dan menghemat ruang.

Apa itu Tabbed Content? Jawabannya, seperti yang Anda lihat di gambar ilustrasi posting ini. Cara membuat tabbed widget semacam ini sangat mudah. Tinggal pasang kode yang sudah disediakan Blogger Central.

1. Klik "Layout" > "Add A Gadget"
2. Pilih "HTML/Javascript"

3. Kotak "title" (judul) kosongkan, jangan diisi apa pun.
4. Copy + Paste kode berikut ini di kotak konten:

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $(#codeholder).bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id=codeholder><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

5. Hapus javascript yang berwarna merah jika di dalam template Anda sudah ada. Jangan dobel, nanti "berantem" :)

6. Ubah angka 3 menjadi 4-5 atau berapa pun jika ingin menambah jumlah tab.

7. Save!

8. Tambahkan 3 widget (Add a Gadget) di bawah Tabbed Widget yang sudah dibuat tadi. Lihat gambar berikut ini:

Demikian Cara Membuat Tabbed Content di Sidebar Blog. Untuk lebih jelas dan rinci, silakan ke TKP. Good Luck!

Go to link Download

CARA MEMBUAT GARIS PUTUS PUTUS SIDEBAR WRAPPER

MEMBUAT GARIS PUTUS-PUTUS SIDEBAR WRAPPER

Assalamualaikum w.b.t :)

Kali ini saya akan posting bagaimana mebuat garis putus-putus di sidebar wrapper.Sebelum melakukan nya anda back up dahulu templatnya, so kalau terajdi masalah anada tinggal panggil template yang tadi.Kalau tak jadi, jangan salahkan ane ya. (hahaha jangan terlalu serius, becanda). Berikut cara membuatnya :

Contohnya seperti ni, ada garis-garis kecil yang warna hijau

Klik Template > Edit HTML > Proceed > ( Expand Widget Templates.) centang

Tekan CTRL+F/F3, (untuk mempermudah ) cari kode di bawah ini

/* Headings

Setelah kode ketemu, copas code dibawah ini dan leatak BAWAH code /* Headings

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar .widget {
background : url(URL BACKGROUND);
border:2px dotted #000000;
margin:0 -5px 2.0em -5px;
padding:10px 10px 10px 10px;
-webkit-border-radius: 20px 20px 20px 20px;
}

Catatan :

Perhatikan warna

1 : Masukkan backgroundnya. Kalau boleh jangan ambil yang ada gambar, ambil yang simple.

2 : Ketebalan border. Yang saya buati tu dah lawa la kot?

3 : Ganti solid > dotted > dashed. Choose one only.

4 : boleh edit sedikit dengan menukar nomor itu kalau yang saya bagi menurut punya saya. Karena setiap blog berbeda?

5 : Warna border

Sekian tutorial ini saya buat , semoga bermanfaat.

Go to link Download

Cara Memberi Warna Background Judul Sidebar Widget

BANYAK orang yang tanya bagaimana Cara Memberi Warna & Background (Latar Belakang) Judul Widget di Sidebar!!!

Berikut ini tipssNya dari ane gan!!!

Harap diingat, warna terbaik untuk desain web adalah biru. Hindari warna terang seperti orange atau merah menyala yang menyilaukan mata pengunjung.

1. Template > Edit HTML

2. Cari kode sidebar h2

Di template NJW Series kodenya seperti ini:

.sidebar h2 {
color: #fafafc;
font: 18px Marcellus SC,serif; margin: 0 10px;
padding: 5px 0 5px 8px;
border-bottom: 4px solid #ddd;
background: #48d;
}

Yang font itu jenis huruf dan ukurannya. Kode bagian bawah itulah backgroundnya.

Kode tersebut yang digunakan blog CB ini. Anda bisa memilih warna lain di Kode Warna HTML.

Demikian Tutorial cara memberi Warna & Background Judul Sidebar Widget yang banyak ditanyakan pengnjung,

wasalam gan ! Blog Sempronx

Go to link Download

Cara Membuat Widget Sticky di Sidebar Blog

Cara Membuat Widget Sticky di Sidebar Blog - Halo sobat di pagi hari ini saya akan memberikan tutorial sedikit mengenei tentang bagaimana Cara Membuat Widget Sticky di Sidebar Blog . sobat pasti sudah tau apa itu widget sticky . yups benar sekali widget stiky adalah widget yang selalu menempel atau melayang meskipun kita scroll kebawah . untuk demonya sobat coba scroll ke bawah dan lihat disidebar saya pasti ada widget sticky nya yang selalu menempem atau melayang pada sidebar .

Berikut cara mudah membuat widget sticky pada sidebar blog. :
Ada dua langkah untuk membuat widget sticky ini

A. DENGAN MENAMBAH KODE CSS

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {
 position:fixed;
 top:10px;/* jarak dari atas*/
 z-index: 100;
}

B.TAMBAHKAN JAVASCRIPT
Simpan kode ini di atas </body>

<script type=text/javascript>
$(document).ready(function() {
var stickyWidgetTop = $(#HTML7).offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop(); 
if (scrollTop > stickyWidgetTop) { 
 $(#HTML7).addClass(sticky);
} else {
 $(#HTML7).removeClass(sticky); 
}
};
stickyWidget();
$(window).scroll(function() {
 stickyWidget();
});
});
</script>

Ganti #HTML7 dengan ID widget yang akan dibuat sticky. Taraaa selamat anda sudah dapat membuat widget sticky pada blog sobat . Demikian artikel saya tentang Cara Membuat Widget Sticky di Sidebar Blog semoga bermanfaat bagi anda , jika ada pertanyaan silahkan bertanya pada saya . ok akhirul kalam wassalaammualaikum wr.wb.

Go to link Download

Cara Membuat Tabbed Widget di Sidebar Blog

MEMBUAT Tabbed Widget di Sidebar Blog bisa "menghemat" ruangan sidebar. Contohnya Tabber yang ada dalam ilustrasi gambar posting ini --Popular Posts, Latest Post, Comments. Keren kan?

Widget seperti ini dalam istilah bahasa Inggrisnya disebut "Multi Tabbed Widget".

Lihat DEMO

Di blog CB ini juga ada, tapi hanya dimunculkan di halaman depan dengan menampilkan "Terbaru", "Terpopuler", dan "Teraniaya".

Tabber Widget ini termasuk Navigasi Blog sekaligus Internal Link yang sangat dianjurkan Google.

Internal Link atau Navigasi Menu akan memudahkan pengunjung mengeksplorasi konten blog.

Cara Membuat Tabbed Widget di Sidebar Blog

1. Template > Edit HTML
2. Cari (Ctrl+F) kode </head> dan Copy & Paste kode berikut ini tepat di atas </head>

<script type=text/javascript>
//<![CDATA[
document.write(<style type="text/css">.tabber{display:none;}</style>);
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = [h2,h3,h4,h5,h6];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = <tabberid>nav<tabnumberone>;
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp(b + this.classMain + b, gi);
this.REclassMainLive = new RegExp(b + this.classMainLive + b, gi);
this.REclassTab = new RegExp(b + this.classTab + b, gi);
this.REclassTabDefault = new RegExp(b + this.classTabDefault + b, gi);
this.REclassTabHide = new RegExp(b + this.classTabHide + b, gi);
this.tabs = new Array();
if (this.div) {
    this.init(this.div);
    this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
    this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ; }
    if (!t.headingText) {
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }
    if (!t.headingText) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9-]/gi, ));
      DOM_a.id = aId;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == function) {
    this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == function) {
    onClickArgs = {tabber:self, index:tabberIndex, event:event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
    div.className += + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, );
Go to link Download

Post Game

Friday, December 23, 2016

Cara Membuat Widget Label Blog Warna Warni di Sidebar Terbaru

Cara Membuat Widget Label Blog Warna Warni di Sidebar Terbaru

Cara Membuat Widget Label Blog Warna-Warni di Sidebar

Thursday, December 8, 2016

Cara Membuat Tabbed Content di Sidebar Blog

Cara Membuat Tabbed Content di Sidebar Blog

Monday, November 21, 2016

CARA MEMBUAT GARIS PUTUS PUTUS SIDEBAR WRAPPER

CARA MEMBUAT GARIS PUTUS PUTUS SIDEBAR WRAPPER

MEMBUAT GARIS PUTUS-PUTUS SIDEBAR WRAPPER

Wednesday, November 2, 2016

Cara Memberi Warna Background Judul Sidebar Widget

Cara Memberi Warna Background Judul Sidebar Widget

Sunday, October 16, 2016

Cara Membuat Widget Sticky di Sidebar Blog

Cara Membuat Widget Sticky di Sidebar Blog

Saturday, October 8, 2016

Cara Membuat Tabbed Widget di Sidebar Blog

Cara Membuat Tabbed Widget di Sidebar Blog

Cara Membuat Tabbed Widget di Sidebar Blog