BREAKING

Cara Membuat Dua Kolom Iklan di Atas Posting Blog

Cara Membuat Dua Kolom Iklan di Atas Posting Blog
Cara Menampilkan atau Membuat Ruang (Space) Iklan Adsense Dua Kolom di Atas Judul Tulisan (Posting) Blog.

SETELAH berbagi tentang Cara Membuat Dua Kolom Iklan/Adsense di Bawah Posting, kali ini CB berbagi tentang tips serupa, namun tampilan posisi ruang iklannya di atas postingan.

Kode yang digunakan juga sama, namun cara menampilkan dua kolom iklan/adsense di atas judul tulisan ini jauh lebih mudah.

Menampilkan Iklan Adsense di atas postingan merupakan salah satu upaya meningkatkan pendapatan Google Adsense. Dua kolom tersebut juga buat jaga-jaga kalau ada yang mau pasang iklan di blog kita.

LANGKAH PERTAMA
1. Template > Edit HTML
2. Cari kode berikut ini:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

3. Ubah "no" menjadi "yes".

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Catatan:
Jika sudah tertera "yes", ya... gak usah dibubah lagi, apalagi diubah jadi "no" atau "oh yes-no-yes-no" :)

Perubahan di atas akan Memunculkan Widget Baru tepat di atas area "Blog Posts" di Layout.

4. Save Template!

LANGLAH KEDUA
1. Klik "Layout" > "Add a Gadget" yang ada di atas elemen "Blog Posts".
2. Copy & Paste kode berikut ini:

<table border='0' cellpadding='0' cellspacing='0' color='#ffffff' width='610' style='margin: 5px 5px 0 0'>
<tr>
<td align='center' style='background-color: #fafafc; padding: 5px;' width='300'>
KODE IKLAN PERTAMA DI SINI
</td>

<td align='left' style='background-color: #fafafc; padding: 5px;' width='300'>
KODE IKLAN KEDUA DI SINI
</td>
</tr>
</table>

3. Save!

Jika dilakukan dengan benar, maka dua kolom iklan itu sudah muncul di atas potingan blog!

MODIFIKASI
Kedua langkah di atas akan memunculkan iklan di halaman depan (homepage) dan halaman dalam.

Jika akan mengatur hanya muncul di halaman depan saja atau di halaman dalam saja, gunakan tips Mengatur Posisi Widget di Halaman Tertentu. Good Luck!

Sumber : http://contohblognih.blogspot.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html

Cara Pasang Facebook Like Box SEO Friendly

Cara Pasang Facebook Like Box SEO Friendly
Cara terbaru memasang Facebook Like Box SEO Friendly di blog.

KOTAK "Like" halaman Fanspage (Facebook Like Box) adalah salah satu fasilitas Facebook untuk menambah jumlah fans atau "likers".

Namun, banyak blogger yang memilih kode<iframe> sehingga tidak SEO Friendly.

Jika kita menggukan kode <iframe> di blog, termasuk kode dari Facebook itu, maka skor SEO blog di Chkme bisa turun drastis, dari 100% bisa menjadi 78% saja. Pasalnya, kode iframe tidak diindeks mesin pencari.

Lihat contoh berikut ini:
1. IFrames: Bad: IFrames are not indexed at all, and you have 1. Hasilnya, skor seo cuma 78%

skor seo blog

2. Setelah iframe dihilangkan, maka skor seonya jadi sempurna: 100%!

skor seo blog

Cara Pasang Facebook Like Box SEO Friendly di Blog

1. Buat dulu Fanspage-nya di Facebook Page Creator.
2. Lakukan Seting dan Ambil kode Like Box di Facebook Plugin Like Box Page.
3. Klik "Get Code"
4. Pilih "HTML5", jangan yang IFRAME!
5. Parse kode pertama, yaitu kode yang harus disimpan di bawah kode <body> atau di atas kode </body> di Blogcrowd Parse.

Contoh Kode sebelum di-Parse:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=XXXXX&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Kode setelah di-Parse. 
Kode seperti di bawah inilah yang dicopy+paste ke template blog.

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=XXXXX&amp;version=v2.0&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));&lt;/script&gt;

Keterangan: XXXXX adalah ID Aplikasi Facebook Anda.

6. Jika kode sudah dicopas ke template, Save Template dan kembali ke Dashboard Blog!
7. Copy paste kode seperti berikut ini di Sidebar Widget atau di mana pun posisi yang diinginkan.

<div class="fb-like-box" data-href="https://www.facebook.com/cbblogger" data-width="300" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="false"></div>

Ganti Url https://www.facebook.com/cbblogger dengan alamat Fanspage Anda.

7. Jika mau dipasang di Sidebar, langkahnya sebagai berikut:

  • Layout > Add a Gadget > pilih HTML/Javascript.
  • Copas kode no. 7 tadi di kolom "Content".

Selamat, Anda sudah berhasil memasang Facebook Like Box SEO Friendly di blog Anda.

LIKE BOX MELAYANG
Jika ingin memunculkan Kotak Fanspage itu "melayang" di halaman blog, silakan ikuti panduannya di CB Blogger Lab sekaligus melihat DEMO-nya. Good Luck!

Sumber : http://contohblognih.blogspot.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html

Cara Membuat Navigasi Menu Blog ala Metro UI Windows 8

SETELAH share tentang Cara Membuat Featured Posts Metro UI Style, kali ini CB share Cara Membuat Navigasi Menu Blog ala Metro UI juga. Bagi yang belum paham, Metro UI itu merujuk pada tampilan menu Start Windows 8.

Ini dia penampakan Navigasi Menu Metro UI Style. Demonya bisa dilihat di CB Blogger Lab.
Navigasi Menu Blog ala Metro UI Windows 8

Dengan tampilan Navigasi Menu Blog ala Metro UI Windows 8 ini, maka blog Anda akan "unik", lain dari yang lain, kecuali yang lain itu juga sama-sama pang juga!

Ini dia cara memasangnya:
1. Template > Edit HTML
2. COPAS kode berikut ini di atas kode ]]></b:skin>

/*===MBL METRO UI Menu==*/

body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}

/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

3. COPAS kode berikut ini di bawah kode header atau di atas kode menu. Bisa juga menggantikan kode menu yang ada sebelumnya, replace saja dengan kode berikut ini:

<!-- mblmetromenu -->
<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFLMhekvuDJxXtmqAQHIfxz25lMeCAN4YtwMiUVCLquVXtd9fH-z3I36PimC34OXf96f6s092IxTv3nt1w8Fjz4-vIi0hESh3LmMAQ-QmAeJPo5L7JvHGkEj6QcZ9QigCjzeXEsEWeLxM/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
 
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicyWXiwmBg_gqJTgltBGuEfX3sPLEg60N9T56zNcDqAyDqJXsWTuJne0HdXVURLZC89BO4RwQzgHh8XPmVBsgKTvda-mbEBBTSj2py2PqLe5GDVD7Y8lpvFJRP2UEwVW_tbKY7qkWoh5I/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
 
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwViuuQb9cLgs2PuahNSF9A25vu4-JthRbW3AFM6KhRNgL6PdJZkZTDRZngFCYwoUok4lRHVZiY-m4IpTzFJM7FvCzjsOks2hyphenhyphenA_1DXZb_7FAgEB9b3I_v2deIUpcXl3HKF9k-fXgwcAc/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
 
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXWcbEHTS_dsYhadt4hMpu63X59I9fVXCFU75XOq8TMwzFeJtwCTfennBY5Y7RbuHKRqpSTUOKECQmzNSeakTpeTIujWmX7RnJOokWxfkrJvrLL7BmqtkA_idKaDIkllLBSwQmEaRAfc/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
   
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVwDuIETeY1zqL_wdMWG-om5R6rWRVNmFVfD_62iYQhibnK33KvxvczeeT_TnFoEz-oE1xwe1kOgh-KGM_mAwKOFkkvnGl5ky-WDKXxWmEcNg0jKv6M26Zpjwlrq8nB8gArFsyWp9ixc/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeuFtKdpUpIt2hRyQDNYeDPU1kDD6R_8GL3KZI7zbeAqCuFE2yLPAOfU9t-sZrPbvNjBT3noH69my05h_J1iOkXJb9TLL5QUtzh7rs0NuolWMRTxowIR4yzKouowvz5yQbfj6dVi-Ah7E/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</span>
</a>
 </div>
   
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfXdSEBq_gwLFk1fCu0-sdZXr7RwAJXMW7aHGeDbXd_NFBn6kuWQDDIduz0PYPru1CzzV1DURSRQKT5myjE0WfXQWKhlvBlWJQ0rYx7JKb64DU_Er93F76lqo5BuU4pqDXTHm0pflpWU/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqbKJKa0nag3kNgNozVKQ67MUtaP-3OmyZEJlhFP8HOTxjgiUpqtfkCO5K-oVsK43YXTZ9nhekBL0T-otQY2BR5ZYJHbUrHibRrXj9c4sgICYsk8JspZE_mbVIhu25859rvAFJHH7N4A/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt8Of8QMpKmmoPbYEK1d-mpDgAj2lmc1F7Jhua4fPbw5nqcrGyZ5iZuH7SWH7WOEW4NnDEntVbT3jTF_3F2wCS0OCh8Mr_CAsuzSlQadSQA27jQxbZ34owRaF8XxOlpj5rrq3OQm2eqik/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7FmoQUEw4Cb8JG1g-i8Sz3nXrcZrJpyoc56xe2ugmRsdpkpyEGXEsbd5_NOGR8qtoV5l0Xiw6SUseYpqbRFd9niYYEvy-yqz-K5NPfnvdw-0NAR3YAyv1pfrRH9Rp3ofBcL22vpK_6o/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
   
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://www.mybloggerlab.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ZoYjdhnLYYV2cUhlMErIvwuz8LcaTb98iNEmTCh9nDciG0MQo-of67ymWbe6SBuLfrEfBQ-lu40VxGkC2reQpc9bsxK2yn3SrB34JyYFmdvHGD4mIuMpfZbiJBRgr_DKyf-2rxtr9TY/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END mblmetromenu -->

4. Ganti link (#) dan nama-nama menunya sesuai dengan selera Anda.
4. Save!

Selamat, kini tampilan navigasi menu Anda keren bingit, mirip tampilan "Windows 8 Metro Menu". Good Luck!

Sumber : http://contohblognih.blogspot.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html

Cara Membagi Header Blog Menjadi Dua Bagian

Cara Membagi Header Blog Menjadi Dua Bagian
Cara Membagi Header Template Blog Bawaan Blogger Menjadi Dua Bagian

TEMPLATE blog bawaan blogger (default) biasanya hanya punya satu kolom di header, sehingga hanya bisa menyimpan nama atau logo blog di sana.

Tutorial berikut ini akan memandu bagaimana cara membagi header blog menjadi dua bagian, sebelah kiri untuk nama/logi dan kanan untuk banner atau iklan --biasanya berukuran 468px.

So... this is about How to Divide Blogger Header In Two Parts. Ini caranya:

LANGKAH PERTAMA
1. Template > Edit HTML
2. Cari (Ctrl+F) kode yang penampakkannya seperti berikut ini:
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

3. Copy & Paste kode berikut ini di antara kode </b:section> and </div>

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Hasilnya seperti ini:

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

</div>
</div>



4. Copy + Paste kode berikut ini di atas atau sebelum kode ]]></b:skin>

#header, body#layout #header {width:300px;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:468px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}



Catatan:
Angka 300 (untuk space nama blog/logo di kiri) dan 468 (untuk space iklan di kanan) bisa diubah. Kalau ragu, biarkan seperti itu.

5. Save template!

LANGKAH KEDUA
1.  Klik Layout
2. Akan muncul kolom buat Widget baru HTML/Javascript di bawah Header seperti gambar di bawah.

Edit dan masukkan kode iklan atau url gambar di sana yang akan muncul di samping logo/nama blog.


Cara Membagi Header Blog Menjadi Dua Bagian


Itu dia Cara Membagi Header Blog Menjadi Dua Bagian, seperti sering CB praktekan juga ketika memodifikasi template blog bawaan blogger, misalnya template CB Theme, yang aslinya The Simple default blogger.

CARA LAIN
Jika cara di atas gagal, atau kode-kodenya beda dengan tips di atas, coba gunakan cara lain berikut ini.

1. Template > Edit HTML
2. Cari kode <b:section class='header'> seperti dalam gambar di bawah ini:

Cara Membagi Header Blog Menjadi Dua Bagian

3. Copy & Paste kode berikut ini di atas atau sebelum kode <b:section class='header'> yang dikasih highlight kuning di atas:

<div class='swt-blogheader'>

4. Copas kode berikut ini sebelum atau di atas kode </b:section> yang dihighlight grey di atas:

<b:section class='swt-blogheader-right' id='swt-blogheader-right' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<!-- /swt-blogheader -->
<div style='clear: both'/>



5. Copas kode berikut ini di atas kode ]]></b:skin>

.swt-blogheader {position: relative;width: 100%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}



Angka 35% (untuk logo/nama blog) bisa diubah menjadi 300px. Angka 65% (untuk space iklan di kanan) bisa diubah menjadi 468px. Sesuaikan aja dengan lebar keseluruhan headernya.

6. Save Template!

7. Klik Layout, maka akan tampak seperti ini:

Cara Membagi Header Blog Menjadi Dua Bagian

Silakan klik "Add a Gadget" dan isi dengan kode iklan atau url gambar. Jika menampilkan gambar, maka kodenya adalah seperti ini:

<a href="URL_LINK"><img src="URL _GAMBAR" />



URL_LINK = link yang terbuka jika gambar diklik
URL _GAMBAR = ya... Url gambar yang dimunculkan di sana :) Simpan dulu gambarnya di Picasa Web Google, lalu copy link addressnya (image url link).

MASIH CARA LAINNYA:
Masih gak bisa juga? Coba cara lain yang dishare Spice Blogger Tricks.

Nah itu dia cara membagi header menjadi dua bagian alias membuat widget baru di samping nama/logo blog. Good Luck!

Sumber: 
http://www.mybloggerbuzz.com/2014/03/divide-blogger-header-two-parts.html
http://www.superwebtricks.com/blogger-beginner-guide/display-adsense-in-blog-header
http://www.eliteblogpress.com/2014/01/divide-blog-header-two-parts.html
Sumber : http://contohblognih.blogspot.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html

Warna Dominan Tampilan Blog: Hindari Merah dan Orange!

Summary: Tampilan blog dengan dominasi warna Biru dan Hitam nyaman di mata user. Merah dan Oranye itu menyilaukan.

merah dan biru
SEBELUM posting soal warna dominan tampilan blog, CB sudah share ttg Gunakan Warna Biru untuk Hyperlink! Jangan yang lain.

Soal warna tampilan blog sangat sensitif, karena terkait "kenyamanan mata" pengunjung. Hindari tampilan blog dengan warna dominan merah dan oranye --silau, Man! Menyilaukan mata dan membuat user "tidak betah" berlama-lama di blog kita nanti. 

Gunakan warna yang sejuk di mata, seperti BIRU dan HITAM. Biru lebih OK karena pengunjung sudah "terbiasa" dengan birunya Facebook, Twitter, link judul di SERP Google dan Wikipedia, dll. Ini yang dinamakan UX, User Experience.

Klub favorit CB, Manchester United (MU), yang berjuluk Setan Merah (Red Devils) dan identik dengan merah pun, websitnya didominasi warna hitam. Merah hanya dominan di headernya. 

ALASAN FACEBOOK BIRU
Mengapa Facebook, situs jejaring sosial nomor wahid di dunia, menggunakan biru? Dilansir laman Buffer Social, alasannya sederhana banget: karena Mark Zuckerberg buta warna merah-hijau!
Why is Facebook blue? According to The New Yorker, the reason is simple. It’s because Mark Zuckerberg is red-green colorblind. This means that blue is the color Mark can see the best. In his own words Zuck says: “Blue is the richest color for me; I can see all of blue.”

Buffer Social juga menyajikan data menarik soal warna ini. Hasil studi menunjukkan, kaum wanita menyukai warna biru, ungu, dan hijau, serta membenci warna oranye, coklat, dan abu-abu. Kaum pria menyukai warna biru, hijau, dan hitam, serta tidak suka warna coklat, oranye, dan ungu.
  • Women love: BluePurple and Green
  • Women hate: Orange, Brown and Gray
  • Men love: Blue, Green and Black
  • Men hate: Brown, Orange and Purple
Kesimpulan, wanita dan pria sama-sama suka warna biru dan hitam, serta sama-sama tidak menyukai warna oranye dan coklat.

Dengan demikian, biru adalah juaranya, seperti calon kuat juara Liga Inggris saat ini: The BluesChelsea!

Cool Colors: Bluegreenpurple, turquoise and silver are cool colors. Cool colors tend to have a calming effect on readers. Used alone however, these colors can have a cold or impersonal feel, so when choosing cool colors, it may be wise to add a color from another group to avoid this. (OCSBT).

WARNA TAMPILAN BLOG
Kesimpulan, warna tampilan blog sebaiknya biru atau hitam. Gelap gitu deh pokoknya! Biar tidak silau di mata user. 

Hindari dominasi warna merah, oranye, dan sejenisnya --kecuali untuk bagian tertentu seperti "button" (tombol) atau elemen kecil lainnya dianjurkan juga warna merah selain biru.

Pendapat Anda? Sila bandingkan dua gambar beda warna di bawah ini. Mana yang lebih nyaman di mata? (Eh, kenapa jadi foto cewek contohnya ya? Biar gak terlalu serius lah ngurusin warna blog. Sing penting mah konten berkualitas!).* 

girl in blue
girl in red


Sumber : http://contohblognih.blogspot.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html

Cara Buat Tombol Back To Top di Blogspot

Blogger, jQuery, Tips dan Trik, Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini
Cara Buat Tombol Back To Top di BlogspotFitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursoryang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to topini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks bloggerberikut.

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Template > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas
<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/> 
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com --> 
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZA1HlVtyQwaQd6cLv619RrYEzyoHzgnPNAwoRkXMTDTkECTWqdW31bJU19vPKqRqIkbpW4S23mdYjcQ3vLsy8sBORxF0fMo1M5fDCg7E6kJ1MtQ9udf0EDeB_sSIN4O4sEU1StJfCueA/s1600/back-to-top.gif'/></a>
  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai

Cara Membuat Featured Post Content Slider Image

Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly. 

SEBELUMNYA CB pernah share tentang Featured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasil survei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:
  1. Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
  2. Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.
Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER
Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolis baik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depan tanpa slider, silakan cek  Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya. 

Cara Membuat Featured Post Content Slider Image

VERSI 1 - Thumbnail di Bawah Gambar Utama

 Featured Post Content Slider Image

Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> 

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWbn7ILvqPUsFDpeCwX-4gjPFveLRHUgwlkq7FzgriHugz96ZoTDhV5BbtfdqtQbkYBGGIloqRtahG0DgrsiR1Utd5oXcOrSHOdRhvITJdTqHpb7O3VnMnlRmmzltNgLijVev_aD5KJz7/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.
3. Copas kode berikut ini di atas kode <head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuA59sGm0UWFzYGW5rm2grBw0eLZ_2wEBk_sgHg_kklgRZbZMT4NT0bpgT9UYIrdPc_84CI4WXKKC1OdceR4Ckw8N3S7kb3WOPr2SFF4vbkl1mxEzNHXOlU70_YemxD7tn9fW8Oy4BX8/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);

    j++;
}

}

//]]>
</script>
4. Copas kode berikut ini di bawah kode <div id='main-wrapper'> atau yang sejenisnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5). 

Featured Post Content Slider Image

6. Klik "Edit" dan Copas kode berikut ini ke dalam "Content".

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

7. Save!!! 
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image

VERSI 2 - Thumbnail Image di Samping Gambar Utama

Featured Post Content Slider Image


CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}  

3. Copas kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
    });
</script>

<script type='text/javascript'>
//<![CDATA[
   imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuA59sGm0UWFzYGW5rm2grBw0eLZ_2wEBk_sgHg_kklgRZbZMT4NT0bpgT9UYIrdPc_84CI4WXKKC1OdceR4Ckw8N3S7kb3WOPr2SFF4vbkl1mxEzNHXOlU70_YemxD7tn9fW8Oy4BX8/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 70;
summaryTitle = 20;

numposts1 = 4;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
     
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
     
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
     
        postdate = entry.published.$t;
 
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
 
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

 
    //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


    var trtd = '<div class="ui-tabs-panel ui-tabs-hide" id="post-'+i+'"><a href="'+posturl+'"><img width="400" height="246" src="'+img[i]+'"/></a><div class="info"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...<a href="'+posturl+'"></a></p></div></div>';

    document.write(trtd);

    j++;
}

}

function showrecentposts5(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
     
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
     
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
     
        postdate = entry.published.$t;
 
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
 
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

 
    //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


    var trtd = '<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="80" height="50" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';

    document.write(trtd);

    j++;
}

}

 //]]>
</script>

4. Cari kode <div id='main-wrapper'> atau yang sejenusnya. Copad kode berikut ini di bawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>  

5. Save Template!

6. Klik "Layout". Akan Widget Baru di atas element "Blog Posts" seperti gambar di bawah ini. Jika belum muncul, Refresh dengan menekan tombol F5.

Featured Post Content Slider Image

7. Saatnya memasang posting yang akan ditampilkan. Klik "Edit" dan  Copas kode berikut ini di kolom "Content". Kolom judul biarkan kosong!

<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

Demikian Cara Membuat Featured Post Content Slider Image / Slide Gambar Posting di halaman depan blog. Good Luck & Happy Blogging!

Sumber : http://contohblognih.blogspot.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html
 
Copyright © 2010 RUMAH SAKIT PENDERITA SANTET (RSPS)
Design by FBTemplates | BTT