Karya-Reza

Blue Awesome Template Seo Dan Rensponsive

2015-10-17T02:29:00.003-07:00

DOWNLOAD TEMPLATE

Karya-Reza Blue Awesome Template Seo Dan Rensponsive, Template, Kembali lagi
saya share template memang pada dasarnya selera template berbeda-beda ada yang suka
dengan template elegant dan ada juga yang suka minimalis, Tetapi pasti dari semua selera
tersebut fiture Seo dan Responsive pasti jadi andalannya karena 2 fiture tersebut sangat
berperan bagi blog kita .

Fiture Template :

Responsive
SEO
Custom Threaded Comment
2 Column
Responsive Ads ready
Breadcrumbs
Related Posts with Thumb
Search Box
Share Button
Top Dropdown Menu
Main Dropdown Menu
Top Social Bookmark
Custom 404 Page
Subscribe Box
Facebook Comment
Recent Comment
Back To Top Button

Tips Agar Gambar Di Blogger Valid HTML 5

2015-10-15T03:39:00.000-07:00

Karya-Reza Tips Agar Gambar Di Blogger Valid HTML 5 , Membuat Blog Valid Html 5
Adalah keinginan semua blogger kalau menurut saya,Tetapi sebelum kita membahas artikel saya
mari kita mengenal manfaat dari Valid Html 5

Baca Juga ! : Tips Membuat Recent Comment Dengan Notifikasi

Manfaat Blog Valid HTML 5 :

   1.)Validasi sebagai alat debugging
    2.)Validation as a future-proof quality check     3.)Validasi untuk memudahkan pemeliharaan
    4.)Validasi membantu mengajarkan praktik-praktik yang baik
    5.)Validasi adalah tanda profesionalisme

Tetapi kali ini saya tidak akan membahas bagaimana blog anda valid html melainkan saya akan
membahas bagaimana gambar di blog anda bisa valid html cara dibawah ini
termasuk cara lama,Meskipun cara lama tetapi cara ini masih berlaku dan terbukti
efektif membuat gambar di blog anda valid html 5

Langkah Cara :

Seperti yang kita tahu apabila kita mengunggah gambar di blog atau menambahkan gambar
pada suatu postingan pasti gambar tersebut belum valid html 5 Contoh :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTTkW7hr1O6IGwfigRTk7E0zDdJZIKlHeDz9j-NcJQb4eQNhBQbxEMMFkIb2QuOT2xReMEPnFsSyQjS63BDMokcZie3m4lV-XSSaiN5rYwr5MNNdS12uiXEOdWofvivm85Tl4YgPbS6nt/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTTkW7hr1O6IGwfigRTk7E0zDdJZIKlHeDz9j-NcJQb4eQNhBQbxEMMFkIb2QuOT2xReMEPnFsSyQjS63BDMokcZie3m4lV-XSSaiN5rYwr5MNNdS12uiXEOdWofvivm85Tl4YgPbS6nt/s1600/3.jpg" />
</a>
</div>

Jika Ingin Membuat Gambar tersebut berubah menjadi valid html 5 anda bisa mengubah
kode tersebut menjadi :

<div class="separator" style="clear: both; text-align: center;">
<img alt="Judul" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTTkW7hr1O6IGwfigRTk7E0zDdJZIKlHeDz9j-NcJQb4eQNhBQbxEMMFkIb2QuOT2xReMEPnFsSyQjS63BDMokcZie3m4lV-XSSaiN5rYwr5MNNdS12uiXEOdWofvivm85Tl4YgPbS6nt/s1600/3.jpg" />
</div>

Tips Membuat Recent Comment Dengan Notifikasi

2015-10-13T05:22:00.001-07:00

Tips Membuat Recent Comment Dengan Notifikasi - Recent Comment sangat penting bagi blog
Kenapa ? ,Karena apabila blog tersebut besar,Besar dalam arti kata sudah banyak pengunjung
pasti pemilik blog tidak mungkin mengecek satu-satu komentar di artikelnya,Maka dari itu
dia membutuhkan Recent Comment sebenarnya cara ini adalah cara lama yang sudah digunakan
banyak orang,Saya akan memberi Bagaimana Membuat Recent Comment Dengan Notifikasi
Setelah kemarin saya share artikel :Template Ramai Blogger

Langkah Pembuatan :

1.Masuk kedalam Tata Letak Agan :

2.Salin Kode Dibawah ini Kedalam HTML/JAVASCRIPT :

<style scoped="scoped">
.cm-outer {
  margin:0 auto;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  border:1px solid;
  border-top:none;
}
.cm-outer li {
  margin:0;
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  border-top:1px solid;
}
.cm-outer .cm-header {margin:0 0 5px}
.cm-outer .cm-content {overflow:hidden}
.cm-outer img {
  display:block;
  float:left;
  margin:2px 10px 2px 0;
  border:4px solid black;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
}
</style>
<div id="comments-container">Loading&hellip;</div>
<script>
var cm_config = {
    home_page: "http://nama_blog.blogspot.com",
    max_result: 7,
    t_w: 32,
    t_h: 32,
    summary: 9999,
    new_tab_link: true,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/recent-comments-script-with-notification.js"></script>

Silahkan Ganti Data-Datanya Dengan Sesuai Selera Anda

Template Ramai Blogger !

2015-10-12T03:03:00.001-07:00

DOWNLOAD

Template Ramai Blogger ! - Bagi semua blogger, Template adalah salah satu senjata bagi blog anda
untuk menarik pengunjung atau bisa juga untuk membuat blog anda terlihat menarik
tapi ada yang masih bingung nyari template ? mungking template ini bisa jadi referensi
template ini dinamakan Ramai Blogger entah kenapa si pembuat template memberi nama ini
mungkin saja karena kalau anda pakai template ini blog anda akan ramai pengunjung.
Maaf kemarin saya tidak update karena sibuk untuk blog yang satu lagi Semua Niche

Fiture Template:

1.SEO Ready

2.Responsive

3.Auto Readmore

4.Breadcrumb

5.Related Post

6.Social Share Buttons

7.Tampuilan Elegan

Membuat Nama/Judul Pada Tag Pre Di Blog

2015-10-10T00:36:00.003-07:00

Membuat Nama/Judul Pada Tag Pre Di Blog- Mungkin dari sebagian anda sudah akrab
atau sudah familiar dengan Sebutan diatas,Dan mungkin saja sudah ada yang tau
Tag Pre memang sangat berperan bagi blog anda,Terlebih bagi blog Niche blogging pastinya
sangat membantu karena dengan begitu script-script yang asalnya panjang-panjang bisa begitu
saja menjadi pendek atau lebih rapih,Member nama pada tag pre sangat lah penting
karena apabila ada orang yang sedang berkunjung dan menerapkan apa yang ada di blog
anda seperti tutorial atau apapun pasti dia harus tau dulu apakah script itu Jquery,Html,CSS

Keuntungan Menggunakan Judul Pada Tag Pre

1.Memudahkan Pengunjung Untuk Menaruh Sciprt
2.Membuat Pengunjung Akan Semakin Betah (Karena Tampilannya Menarik)
3.Judul Pada Tag Pre Bisa Menambah Blog Anda Semakin Keren

Langkah Pembuatan :

1.Carilah Kode ]]></b:skin> Pada Blog Anda
2.Letakan Kode Dibawah Ini diatas kode Tersebut

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre[data-codetype=&quot;CSS&quot;]:before{background-color:#5fbbba}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

4.Kemudian Simpan Template
5.Untuk Meng-Aktifkan Silahkan Pasang Kode Html dibawah ini di postingan anda

<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */
dst...

Widget Cumtom Facebook Like Counter

2015-10-09T03:51:00.003-07:00

Widget Cumtom Facebook Like Counter - Itulah nama widget yang saya akan kasih
bagaimana cara membuatnya di blog anda, mungkin anda yang aktif di facebook membuat
facebook like sangat menguntungkan,Apalagi blog anda sudah ada fanspage nya,Custom Like
sendiri berguna bagi blog yang sudah mempunyai fanspage atau bisa juga dipake untuk like apa saja
asalkan itu dari facebook,Setelah kemarin saya share artikel berjudul :Keren! Membuat Spoiler Dengan JavaScript

Langkah Pembuatan :

1.Masukan Jquery Dibawah Ini Kedalam Blog Anda

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

2. Apabila sudah ada Kode Jquery Tersebut Lebih baik cara diatas dilewat saja
3. Untuk Kode Jquery nya,Letakan kode dibawah ini di blog anda

jQuery(document).ready(function() {
    realtime_fb_likes();
    setInterval("realtime_fb_likes()", 30000);
});
function realtime_fb_likes() {
    $.getJSON('http://graph.facebook.com/karya-reza/', 
      function(data) {
      var fb_likes = addCommas(data.likes);
      $('.fb-likes-count').text(fb_likes);
    });
}
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}

4. Kemudian Untuk Menampilkannya,Letakan HTML ini dimana anda suka :)

<span class="fb-likes-count"></span>

Keren! Membuat Spoiler Dengan JavaScript

2015-10-06T01:12:00.000-07:00

Membuat Spoiler Dengan JavaScript - Sebagian dari anda pasti adalah blogger yang sudah
terbiasa dengan menulis artikel, Pada umumnya kalangan blogger yang sudah terbiasa
menulis artikel,Sangat tidak puas apabila artikelnya tersebut berisi pendek karena
menurut mereka dengan mereka memperpanjang artikel mereka dapat memberikan informasi
yang lebih kepada pengunjung, Tetapi mungkin ada juga yang Membuat Spoiler Di blog
agar blognya bisa mengurangi tulisan-tulisan tersebut atau terlihat pendek, Fungsi Spoiler
ini sendiri sangat berguna bagi anda yang suka menulis artikel yang panjang Hari ini saya
akan share tutorial Membuat Spoiler Dengan JavaScript Setelah kemarin saya share artikel
Download KanBai BTemplate Blog

Langkah Pembuatan :

1. Cari Kode </head>
2. Letakan Kode Dibawah Ini Diatas Kode Tersebut

<script>document.documentElement.className += ' spoiler-js';</script>

3. Selanjutnya, Cari Kode ]]></b:skin>
4. Letakan Kode Dibawah Ini Diatas Kode Tersebut

.spoiler {
  background-color:darkslategray;
  color:white;
  padding:.15384615384615385em;
  margin:1em 0;
}

.spoiler-toggle,
.spoiler-toggle:focus,
.spoiler-toggle:hover,
.spoiler-toggle:active {
  display:block;
  margin:0;
  padding:0 1.2em 0 .6em;
  height:2em;
  font:normal normal 100%/2em Helmet,FreeSans,Sans-Serif;
  color:inherit;
  text-decoration:none;
  outline:none;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor:pointer;
}

.spoiler-toggle:before {
  content:"";
  display:block;
  float:right;
  width:0;
  height:0;
  border-width:.3076923076923077em .3076923076923077em 0;
  border-style:solid;
  border-color:white transparent transparent;
  margin:.9230769230769231em -.6em 0 0;
}

.spoiler-content {
  padding:1em;
  background-color:white;
  color:#333;
}

.spoiler-state-expanded .spoiler-toggle {padding-bottom:inherit}

.spoiler-state-expanded .spoiler-toggle:before {
  border-width:0 .3076923076923077em .3076923076923077em;
  border-color:transparent transparent white;
  margin-top:.8461538461538461em;
}

.spoiler-state-expanded .spoiler-content + .spoiler-toggle {
  padding-top:inherit;
  padding-bottom:0;
}

.spoiler-state-disabled .spoiler-toggle {
  cursor:default;
  cursor:not-allowed;
}

.spoiler-state-disabled .spoiler-toggle:before,
.spoiler-js .spoiler-state-collapsed .spoiler-content {display:none}

.spoiler-primary {background-color:steelblue}
.spoiler-success {background-color:mediumseagreen}
.spoiler-info {background-color:skyblue}
.spoiler-warning {background-color:sandybrown}
.spoiler-danger {background-color:salmon}

5. Cari Kembali Kode </body> Dan Kembali letakan kode dibawah ini diatasnya

<script>
//<![CDATA[

// http://www.dte.web.id

(function(w, d) {
  var panel = d.getElementsByClassName('spoiler');
  if (!panel) return;
  for (var i = 0, len = panel.length; i < len; ++i) {
    if (!panel[i].id) panel[i].id = 'spoiler-' + (i + 1);
  }
  function toggleSpoiler(elem, index) {
    var toggle = d.createElement('a'),
        toggleText = (elem[index].getAttribute('data-toggle-text') || '&nbsp;').split(' | '),
        togglePlacement = elem[index].getAttribute('data-toggle-placement') && elem[index].getAttribute('data-toggle-placement') !== 'bottom' ? elem[index].getAttribute('data-toggle-placement') : 'bottom';
    toggleText.push(toggleText[0]);
    toggle.className = 'spoiler-toggle';
    toggle.href = '#' + elem[index].id;
    toggle.innerHTML = toggleText[/(^| )spoiler-state-collapsed( |$)/.test(elem[index].className) ? 0 : 1];
    toggle.onclick = function() {
      var target = this.parentNode,
          isExpanded = /(^| )spoiler-state-expanded( |$)/.test(target.className),
          isConnected = target.getAttribute('data-connection');
      if (/(^| )spoiler-state-disabled( |$)/.test(target.className)) return false;
      target.className = isExpanded ? target.className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2') : target.className.replace(/(^| )spoiler-state-collapsed( |$)/, '$1spoiler-state-expanded$2');
      this.innerHTML = toggleText[isExpanded ? 0 : 1];
      if (isConnected) {
        for (var i = 0, len = elem.length; i < len; ++i) {
          var isConnectedTo = elem[i].getAttribute('data-connection'),
              toggleTextSibling = (elem[i].getAttribute('data-toggle-text') || '&nbsp;').split(' | '),
              togglePlacementSibling = elem[i].getAttribute('data-toggle-placement') && elem[i].getAttribute('data-toggle-placement') !== 'bottom' ? elem[i].getAttribute('data-toggle-placement') : 'bottom';
          if (isConnectedTo && isConnected === isConnectedTo && target.id !== elem[i].id) {
            elem[i].className = elem[i].className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2');
            elem[i].children[togglePlacementSibling === 'bottom' ? 1 : 0].innerHTML = toggleTextSibling[0];
          }
        }
      }
      return false;
    };
    toggle.onmousedown = false;
    elem[index].insertBefore(toggle, togglePlacement == 'bottom' ? null : elem[index].firstChild);
  }
  for (var i = 0, len = panel.length; i < len; ++i) {
    toggleSpoiler(panel, i);
  }
})(window, document);
//]]>
</script>

*Terakhir Simpan Template Anda

Download KanBai BTemplate Blog

2015-10-05T00:10:00.000-07:00

DOWNLOAD

Download KanBai BTemplate Blog- Template sangat berperan bagi sebuah blog
apabila anda masih binggung atau masih mencari template yang pas bagi blog anda atau
anda sudah bosan dengan template default anda, template ini sangat cocok buat anda template
ini dinamai Download KanBai BTemplate Blog, Setelah kemarin saya share artikel berjudul
BLOG NICHE LEBIH UNTUNG DARI GADO-GADO ?

Fiture Template :

Grid Home Page
Custom Blog Pager
Custom Error Page
Related Posts
SEO FRIENDLY
Tampilan blog sudah di modifikasi
Valid HTML 5
Related Post
Breadcrums

Sekian, Semoga Template ini bisa anda pakai, dan anda bakal suka dengan template ini :)

Blog Niche Lebih Untung Dari Gado-Gado ?

2015-10-02T22:41:00.000-07:00

Blog Niche Lebih Untung Dari Gado-Gado ? - Blog Niche ? Atau pilih gado-gado ?
hal tersebut pasti pernah ada dipikiran anda dan anda sendiri bingung mau pilih yang mana
karena mungkin saja kebetulan agan ini blogger baru dan masih belum tau pilih yang mana
dan bagusan yang mana, Ok di artikel ini saya akan memberi anda ilmu apakah benar
Blog Niche Lebih Untung Dari Gado-Gado ? Setelah kemarin saya share artikel berjudul
Membuat Tabulasi Widget Sidebar Otomatis

Keuntungan Blog Niche

1.Pengunjung Tidak kebingungan
Apa maksudnya kebingungan ?, maksudnya pengunjung tidak akan bingung untuk mencari artikel
karena blog anda blog niche, bukan blog gado-gado dan pengunjung lebih mudah mencari sesuatu
yang mereka cari sesuai niche yang anda pakai di blog anda .

2.Blog Lebih Mudah Dikenali Google
Mengapa lebih dikenali google ? , ini dikarenakan blog anda sesuai tema, jadi ketika anda
memasukan/mendaftarkan artikel anda di google, Google akan lebih mudah menangkap keyword
dari blog anda,Dengan begitu blog lebih mudah dikenal google atau bisa jadi lebih mudah
Ter-index google .

3.Untuk Google adsense akan lebih mudah
Ada yang udah pernah daftar google adsense ?, Dan ditolak ? , mungkin solusi ini bisa dipake
untuk adsense akan lebih mudah untuk blog niche karena blog niche akan relavan dengan iklan
yang akan ditayangkan di blog anda, berbeda dengan blog gado-gado biasanya google perlu
lebih lama untuk meneliti blog gado-gado karena seperti yang kita ketahui blog gado-gado
berisi sangat banya niche .

Keuntungan Blog Gado-Gado

1.Pengunjung Dapat Menemukan Banyak Konten
Dengan blog anda gado-gado blog dapat banyak sekali mendapat konten,Seperti halnya
anda berada di perpustakaan, Di perpustakaan pasti banyak sekali ragam buku dan dari ragam
kategori yang berbeda begitu juga blog gado-gado,dengan begitu pengunjung bisa mendapat
banyak informasi dari blog anda

2.Tidak usah bingung mau posting apa
Apabila anda mempunyai blog gado-gado, Tentu saja anda tidak perlu binggung untuk posting apa
karena blog gado-gado berbeda dengan blog niche.

Intinya Mau blog anda niche/gado-gado hal yang terpenting adalah bagaimana anda
memanfaatkan blog anda dengan benar urusan niche/gado-gado itu selera agan masing-masing .

Membuat Tabulasi Widget Sidebar Otomatis

2015-09-30T00:14:00.001-07:00

Membuat Tabulasi Widget Sidebar Otomatis - Membuat tabulasi widget ini sudah sangat
banyak di share di blog, bahkan tutorialnya pun sudah bertebaran di google, tapi apa salahnya
saya membuat artikel ini dengan tujuan baik,Oh iya makasih buat dukungan nya karena
tanpa kalian mungkin gue kgak akan bisa update artikel lagi, Setelah kemarin saya share
artikel berjudul Nostalgia Blogger

Langkah Pembuatan :

1. Cari Kode </head> dan letakan kode dibawah ini diatas kode tersebut
*Note:Bagi yang sudah di pakai tidak usah di pasang

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

2. Letakan Script dibawah ini diatas script tadi

<script type='text/javascript'>
//<![CDATA[
var starttab = 0;
var endtab = 3;
var sidebarname = 'sidebar-wrapper';

var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul></div>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("hompitab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .hompitab").hide();$jtab1("#widg"+$jtab1(this).attr("id")).fadeIn();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});

//]]>
</script>

3.Cari kembali Kode ]]></b:skin> dan letakan script ini diatasnya

/*
 * Modifikasi 3 Oktober 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 * (original: http://www.abu-farhan.com)
 */

.hompitab {
  position:relative;
  z-index:1;margin:0px 0px;
  padding:0px 0px;
  border:1px solid #ccc;
  background:#fff;
}

.hompitab .widget-content {
  margin:10px 15px !important;
}

ul.tab-wrapper {
  margin:15px 0 -10px 0;
  padding:0 0 0 0;
}

ul.tab-wrapper li {
  position:relative;
  z-index:0;
  cursor:pointer;
  background:#666;
  padding:6px 8px 5px;
  text-decoration:none;
  color:#ebebeb;
  font:bold 11px Arial,Sans-serif;
  text-shadow:0 1px rgba(0,0,0,0.4);
  display:inline;
  list-style:none !important;
  margin:0px 1px;
  text-transform:uppercase;
  -webkit-border-radius:3px 3px 0px 0px;
  -moz-border-radius:3px 3px 0px 0px;
  border-radius:3px 3px 0px 0px;
}

ul.tab-wrapper li.active-tab {
  border:1px solid #ccc;
  border-bottom-color:#fff;
  background:#fff !important;
  z-index:2;
  color:#666;
  text-shadow:none;
}

4. Ganti Kode Dibawah ini dengan ID SIDEBAR anda

<div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'/>
          <b:widget id='Label1' locked='false' title='Media' type='Label'/>
          <b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/>
          <b:widget id='HTML4' locked='false' title='Label' type='HTML'/>
          <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
     </b:section>
</div>

Nostalgia Blogger !

2015-09-27T02:08:00.001-07:00

Hai semuanya, Suda lama sekali saya tidak update postingan disini karena kesibukan yang
terlalu banyak dan maafin saya juga karena gara-gara saya tidak update pasti pasti Rindu Kan ?
Oh iya sudah lama saya tidak update, Ternyata banyak sekali yang berubah dari blog
kesayangan saya ini dari mulai alexa yang mulai besar dan juga berkurangnya pengunjung saya

Sengaja saya merubah tampilan semua blog nya biar terlihat menarik, Meskipun ini belum
selesai doa'in aja semoga cepat selesai untuk merubah template blog ini

Hal Yang Dirindukan Saat Nge-Blog

1. Blogwalking Sesama Blogger

Hal yang pertama saya rindukan adalah blogwalking, Kenapa ? , Karena dengan B'W
Saya banyak kenal teman dan banyak mengenal blog orang dengan begitu saya bisa belajar banyak
Tetapi entah kenapa sekarang ini teman-teman blogger saya juga ikutan pensiun dari blogger
itu menambah saya sedih karena dulu sangat banyak orang yang bersemangat untuk blogwalking
sekarang justru sebaliknya

2.Banyaknya Ide Postingan

Ini dia yang merubah, Dulu ide postingan sangat lah banyak jadi gemar untuk menulis artikel
sekarang justru sebaliknya ide untuk postingan sudah berkurang dibandingkan pertama nge-blog
dengan kita memperbanyak postingan semakin banyak pula pengunjung yang ingin datang
ke blog kita karena ingin hal yang baru di blog kita .

3.Banyak teman yang mendukung kita

Seperti yang saya katakan pada point pertama, Entah kenapa ketika saya vakum teman-teman juga
ikutan vakum karena teman-teman saya pada vakum otomatis tidak ada lagi yang dapat mendukung

saya untuk nge-blog, berbeda dengan dulu ketika saya binggung mau posting apa saya di beri

dukungan untuk kembali nge-blog, Itu pengalaman keren menurut saya .

4. Sangat Bersemangat Untuk Nge-blog

Untuk pertama kalinya saya bosan nge-blog, berbeda dengan dulu saya sangat bersemangat sekali
untuk nge-blog dan sangat bersemangat untuk mengotak-ngatik blog, Sekarang ? , saya sudah
rada2 lupa untuk ngotak-ngatik berbeda dengan dulu saya sangat bersemagat untuk otak atik
sampe-sampe saya pernah beberapa ganti template hanya untuk ngotak ngatik.

Penutup !

Spoiler :

Sekian Postingan saya tentang Nostalgia Blogger Ini telah banyak kenangan yang saya alami

Terima kasih untuk semua kawan blogger saya .

Membuat Toggle Side Navigation Di Blog

2014-09-09T01:43:00.000-07:00

DEMO KLIK DISINI

DEMO WIDGET

Membuat Toggle Side Navigation Di Blog - Hai Sobat Blogger Walah hampir sebulan saya tidak aktif lagi di blog ini di karenakan sibuk di dunia nyata seminggu
Membuat Toggle Side Navigation Di Blog Toggle Side Navigation ini sama seperti navigasi
Kang ismet yang sekarang ini sedang banyak dicari oleh kalangan blogger dimanapun.. Mumpung
Setelah kemarin saya share artikel berjudul 3 CIRI BLOG YANG DISUKAI PENGUNJUNG
Membuat Toggle Side Navigation Di Blog Juga dapat menghilangkan Jenuh Bagi anda
Yang bosan dengan tampilan Navigasi Default dari blog anda mungkin dengan mengubah
dengan versi ini kejenuhan itu bisa teratasi

Langkah Pembuatan :

1. Letakan Kode Dibawah Ini Diatas Kode ]]></b:skin>

 /* Outer wrapper */
#outer-wrapper {
  background-color:black;
  overflow:hidden;
}

/* Left sidebar */
#nav {
  float:left;
  width:2.8em;
  color:#999;
  position:relative;
}

#nav .inner {
  padding:1em;
  display:none;
}

.menu,
.menu li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

.menu {margin:2em -1em 1em}

.menu a {
  display:block;
  font-weight:bold;
  color:white;
  text-decoration:none;
  height:2.4em;
  line-height:2.4em;
  padding:0 1em;
}

.menu a:hover {background-color:#222}

/* Right sidebar */
#main {
  background-color:white;
  margin-left:2.8em; /* Same with the `#nav` width */
  padding:1em 2em;
}

/* Toggle navigation button */
#toggle-nav-btn {
  text-decoration:none;
  font-size:200%;
  line-height:100%;
  color:#666;
  display:block;
  position:absolute;
  top:.2em;
  right:.4em;
}

#toggle-nav-btn:hover {color:#888}

/* When the `.menu-is-visible` class applied */
.menu-is-visible #nav {width:200px}
.menu-is-visible #nav .inner {display:block}
.menu-is-visible #main {margin-left:200px} /* Same with the `.menu-is-visible #nav` width */
.menu-is-visible #toggle-nav-btn {color:#aaa}

2. Sekarang Letakan Kode Dibawah Ini Diatas Kode </body>

 (function() {

    var page = document.body,
        btn = document.getElementById('toggle-nav-btn');

    btn.onclick = function() {

        // Toggle the `.menu-is-visible` class to the <body> tag based on `#toggle-btn-nav` click event
        page.className = (/(^| )menu-is-visible( |$)/.test(page.className)) ?
            page.className.replace(/menu-is-visible/,"") :
                page.className + " menu-is-visible";

        // Toggle the toggle navigation title too...
        this.title = (this.title == "Show Navigation") ?
            "Hide Navigation" :
                "Show Navigation";

        return false;

    };

})();

3. Dan Berikut Kerangka Dari Menu navigasi Tersebut

 <div id="outer-wrapper">

    <section id="nav">
        <a href="#nav" id="toggle-nav-btn" title="Show Navigation">&equiv;</a>
        <div class="inner">
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Archive</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            ...
            ...
        </div>
    </section>

    <section id="main">
        Artikel di sini...
    </section>

</div>

4 Cara Mempertahankan Pengunjung Blog

2014-08-22T00:45:00.001-07:00

1. Buatlah Artikel Yang Jarang Ada Di Google

4 Cara Mempertahankan Pengunjung Blog -Dalam Membuat Artikel Pasti banyak sekali inspirasinya, Tapi Sekarang sudah banyak
Artikel yang banyak di google dan sama , mungkin dengan membuat artikel yang tidak

ada di google atau Unik Pengunjung akan tertarik untuk mengunjungi blog anda dan
akan bertahan di blog untuk mencari artikel unik lainnya

2. Percepat Loading Blog

Mempercepat Loading Blog ini hal Utama Dalam mempertahankan Pengunjung Blog Anda
usahakan kecepatana blog anda tdak lambat dan buatlah cepat karena kebanyakan pengunjung
tidak suka dengan blog yang bagus sekalipun tetapi loading blog tersebut sagatlah lama

3. Perindah Tampilan Blog Anda

Sedikit Modifikasi tampilan Blog anda bisa juga mendatangkan pengunjung baru dan
mempertahankan pengunjung yang biasa berkunjung di karenakan pengunjung suka sekali
dengan tampilan blog yang rapih dan enak dipandang , siapa yang ingin melihat
blog yang berkualitas tapi tampilan blog tersebut amburawut alias acak-acakan dan tidak
teratur jadi Rapihkan lah blog anda

4.Artikel Tidak Meniru/Copas

Nah... !! ini yang Paling utama yaitu usahakan artikel anda tidak meniru dari blog lain
Atau kita sebut juga copy paste atau juga Copas Seringkali saya mencari artikel dari Page 1
Sampai Page 10 Artikel itu sama semua dan tidak ada yang diganti palingan hanya beberapa
blog tertentu yang tidak meniru tersebut . jadi Jadilah Blogger Bijak dan janganlah copas
dengan begitu pengunjung dapat menilai bahwa blog ini berkualitas tidak meniru blog lain dan
Juga google juga lebih suka blog yang berartikel Murni namun jelek daripada copas namun bagus

Membuat Recent Post & Recent Koment Pada Dropdown Menu

2014-08-16T18:52:00.003-07:00

DEMO WIDGET

DEMO KLIK DISINI

Membuat Recent Post & Recent Koment Pada Dropdown Menu - Mungkin Bagi Sebagian
Anda Kaget
Mana mungkin Recent post Atau Recent Komentar Ada Di Dropdown Menu, Kali Ini
Saya akan menuntaskan rasa heran anda dengna membuat tutorial nya , Setelah Saya Kemarin
Share Artikel Berjudul MEMODIFIKASI TAMPILAN TAG PRE DI BLOG , Jika Anda merasa bosan dengan Di Sidebar apasalahnya anda mencoba Di Menu Navigasi

Langkah Pembuatan :

1. Cari Kode <head> Di dalam Template Anda

2. Sekarang Letakan kode dibawah ini Diatas kode tersebut

 <style>
#autonav {
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  margin:0;
  padding:0;
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:white;
  border-bottom:2px solid #333;
  -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
  box-shadow:0 1px 7px rgba(0,0,0,.4);
}

#autonav ul {
  margin:0;
  padding:0;
  height:30px;
  background-color:#0F5079;
}

#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0;
  padding:0;
  position:relative;
}

#autonav ul li a {
  display:block;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:0;
  padding:0 15px;
  border-left:1px solid #155F90;
  border-right:1px solid #082E46;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  color:white;
  font-weight:bold;
}

#autonav ul li a:hover,
#autonav ul li:hover > a {
  background-color:#0F486C;
  border-right-color:#082434;
}

#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  left:0;
  z-index:9999;
  background-color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.7);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
  overflow:visible !important;
  display:none;
}

#autonav ul ul:before {
  content:"";
  width:0;
  height:0;
  border:7px solid transparent;
  border-bottom-color:#111;
  position:absolute;
  top:-14px;
  left:24px;
}

#autonav ul ul li {
  display:block;
  float:none;
}

#autonav ul ul li a {
  border:none;
  color:#999;
}

#autonav ul ul ul {
  top:0;
  left:100%;
}

#autonav li:hover > ul {display:block}

/* Khusus JSON */
#autonav ul.json-dropdown {overflow:hidden}

#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0;
  overflow:hidden;
}

#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0;
}

#autonav ul.json-dropdown li a:hover {
  text-decoration:underline;
  background:transparent;
}

#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {background-color:#000}

#autonav ul.json-dropdown img.rp-thumb {
  padding:0;
  outline:none;
  border:2px solid #333;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0 10px 0 0;
  width:40px;
  height:40px;
}

#autonav .subposts span,
#autonav .subcomments span {
  font-family:Verdana,Tahoma,Helmet,Freesans,Sans-Serif;
  color:#666;
  font-size:9px;
}

/* Drop down menu untuk ukuran yang cukup lebar */
#autonav .wide {width:400px}
</style>
<script>
//<![CDATA[
var numpost = 7,
    numcomment = 7,
    cmtext = "Komentar",
    cmsumm = 100,
    pBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/json-dropdown.js'></script>

3. Sekang Cari kode </body> dalam template Anda

4. Letakan Kode Dibawah Ini Diatas Kode Tersebut

 <nav id='autonav'>
  <ul>
    <li><a href='/'>Beranda</a></li>
    <li><a href='#'>Profil</a></li>
    <li><a href='#'>Terbaru</a>
      <ul class='json-dropdown subposts wide'>
        <script src='http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;callback=dropdownposts'></script>
      </ul>
    </li>
    <li><a href='#'>Komentar Terakhir</a>
      <ul class='json-dropdown subcomments'>
        <script src='http://nama_blog.blogspot.com/feeds/comments/summary?alt=json-in-script&amp;callback=dropdowncomments'></script>
      </ul>
    </li>
    <li><a href='#'>Kontak</a>
      <ul>
        <li><a href='#'>Lorem Ipsum</a></li>
        <li><a href='#'>Dolor Sit Amet</a></li>
      </ul>
    </li>
  </ul>
</nav>

Memodifikasi Tampilan Tag Pre Di Blog

2014-08-15T00:10:00.000-07:00

DEMO WIDGET

DEMO KLIK DISINI

Memodifikasi Tampilan Tag Pre Di Blog - Mungkin Dari Sebagian Kalangan Blogger
Sudah Bosan Dengan Tampilan Tag Pre Dari Syntax Anda Mungkin Masalah Itu Bisa Diatasi
Dengan Memodifikasinya Dengan Tutorial Yang akan saya sampaikan pada kesempatan
Hari Ini Setelah Kemarin Saya Share Artikel Berjudul CARA MEMBUAT TOMBOL 3 DIMENSI DENGAN CSS

Langkah Pembuatan :

1. Cari kode ]]></b:skin> Dalam Template Anda

2. Letakan Kode Dibawah Ini Diatas Kode Tersebut

 pre {
  background-color:#333;
  font:normal 12px/14px Monaco,Monospace;
  color:#ccc;
  padding:10px 15px;
  margin:0px 0px 10px;
  position:relative;
}

pre[rel] {
  padding-top:32px;
}

pre[rel]:before {
  content:attr(rel);
  font:bold 12px/22px Arial,Sans-Serif;
  color:white;
  background-color:#39f;
  padding:0px 10px;
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
}

3. Simpan Template

Cara Membuat Tombol 3 Dimensi Dengan CSS

2014-08-13T02:57:00.000-07:00

Cara Membuat Tombol 3 Dimensi Dengan CSS - Membuat Tombol Pasti Diperlukan Apa
Itu Untuk Widget Post Atau Untuk Mempercantik Blog , Tetapi Tombol Yang Sering
Dipake Ialah Tombol Untuk Download Yang tentunya sering dipake untuk Niche Download
Jika Anda adalah orang yang mempunya Blog ber-Niche download mungkin Cara Membuat
Tombol 3 Dimensi Dengan CSS Ini Bisa Jadi Pilihan Anda

Langkah Pembuatan :

1. Silahkan Anda Cari Kode ]]></b:skin> Di Blog Anda

2. Silahkan Taruh CSS Dibawah Ini Diatas Kode Tersebut

 .button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#479ECD;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #297EB9;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}

3. Untuk Pengaturan Silahkan Masukan Kode Dibawah Ini Di HTML Anda Bukan Compose

 <a class='button3' href='#'>Tombol 3 Dimensi</a>a

Membuat Recent Post Sesuai Label

2014-08-12T02:52:00.000-07:00

Membuat Recent Post Sesuai Label - Membuat Recent Post Memang Dibutuhkan Dikarenakan
Dapat Memudahkan pengunjung Untuk pengetahui Post random atau post yang anda sajikan
Di Blog anda Saya Untuk Kesemapatan Hari ini akan Memberi Anda Tutorial
Cara Membuat Recent Post Sesuai Label Tapi Perlu diketahui Sebelum Membuat Ini
Pilihlah Post Dengan Label Yang Benar Dengan Sedikit Modifikasi Mungkin Tampilannya
Bisa Lebih Bagus

Langkah Pembuatan :

1. Taruh CSS Dibawah Ini Diatas Kode ]]></b:skin>

 /*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}

2.Selanjutnya, Taruh Kode Dibawah Ini Diatas Kode <head>

 script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Reza-Rizal
// http://gplus.to/RezaRizal - http://rezaberkarya1.blogspot.com/
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;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!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TLT-4ikTaaj2sf_zRRa_4hoIypsuOdE6EEvmkM-yJrO9xB9D3vJMVodl6-dFLNZIOFFTx2Tjp47zJptqZEnhr-Momki7KJ8jQJJKT6N-SsTfDMTte9GeZN6raLxq28aTo46Y8pReqHFu/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

3. Terakhir Silahkan Masukan Kode Ini Di HTML/JAVASCRIPT

 <script>
document.write("<script src=\"/feeds/posts/default/-/Masukan Url Label Anda?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Cara Membuat Navigasi CSS3 Sohtanaka

2014-08-11T01:34:00.000-07:00

DEMO WIDGET

DEMO KLIK DISINI

Cara Membuat Navigasi CSS3 Sohtanaka - Ada Yang Ingin Membuat Template ?
Atau Sedang menyari model menu navigasi yang manarik atau Sudah ketemu dan tidak cocok ?
Coba Ini Menu Ini diberi nama Navigasi CSS3 Sohtanaka Setelah Tadi saya share artikel
Berjudul MEMODIFIKASI GAMBAR DENGAN EFEK ZOOM Menu Navigasi ini
Sangat Indah karena adanya Efek Buka Tutup dan Perbaduan Warna Merah Meskipun Untuk
Warna Anda Bisa mengaturnya Sesuai Selera

Langkah Pembuatan :

1. Silahkan Masuk Ke Bagian HTML Anda

2. Dan Letakan Kode Dibawah Ini Diatas Kode ]]></b:skin>

 #rolling-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* CSS Transisi */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
  content:attr(data-clone); /* Memuat data atribut */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}

3. Berikut Kerangka Dari Menu Navigasi Tersebut

 <nav id='rolling-nav'>
    <ul>
        <li><a href='#' data-clone='Home'>Home</a></li>
        <li><a href='#' data-clone='About'>About</a></li>
        <li><a href='#' data-clone='Portfolio'>Portfolio</a></li>
        <li><a href='#' data-clone='Comments'>Comments</a></li>
        <li><a href='#' data-clone='Contact'>Contact</a></li>
    </ul>
</nav>

Memodifikasi Gambar Dengan Efek Zoom

2014-08-11T01:08:00.000-07:00

Memodifikasi Gambar Dengan Efek Zoom - Setelah Kemarin Saya Share MEMBUAT KOTAK MELAYANG DENGAN JQUERY Kali ini saya akan share bagaimana membuat
Gambar Di Blog Anda Menjadi Zoom Zoom ini berfungsi bagi pengunjung blog anda
Ketika gambar dari contoh Ilustrasi atau gambar yang anda sajikan dapat Teratasi dengan efek
Ini selain itu cara membuat efek ini sangat mudah simple dan tidak membuat blog anda berat sekalipun

Tutorial Pembuatan :

1. Masuk Ke Blog Anda

2. Masuk ke Bagian HMTL

3. Cari Kode ]]></b:skin>

4. Sekarang Letakan Kode Dibawah Ini Diatas Kode Tersebut

 .post img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

*Note :

Sesuaikan Ukuran Gambar Atau Tinggi Gambar Dengan Ukuran Gambar Di Blog Anda

Memodifikasi Tampilan Demo Dan Download

2014-08-02T22:58:00.002-07:00

Memodifikasi Tampilan Demo Dan Download - Mungkin Dari Sebagian Blog
atau lebih tepatnya blog download atau blog yang menyediakan tombol dan download
Membutuhkan Tombol Download Dan Demo Yang Keren Oleh karena itu kali ini
saya akan membagikan kepada anda Setelah kemarin saya share artikel berjudul
MEMBUAT WIDGET TRANSLATOR HALAMAN

1. Cari Kode ]]></b:skin> Dalam Template Anda

2. Sekarang Letakan Kode Dibawah ini diatas Kode Tersebut

 /* -- Reza Tombol --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.button li a {color:#fff}
.download {
  cursor:pointer;
  margin:10px 0px;
  background:#479ECD;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #297EB9;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.download:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.download:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}
.demo {
  cursor:pointer;
  margin:10px 0px;
  background:#A90606;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #770101;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #770101,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #770101,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #770101,
    0px 5px 8px rgba(0,0,0,0.4);
}

.demo:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #770101,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #770101,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #770101,
    0px 5px 8px rgba(0,0,0,0.4);
}

.demo:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #770101,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #770101,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #770101,
    0px 3px 3px rgba(0,0,0,0.4);
}

3. Berikut Script Untuk Pemasangan Pasang Di HTML Bukan Compose

 <div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://rezaberkarya1.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://rezaberkarya1.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Membuat Widget Translator Halaman

2014-07-31T23:35:00.001-07:00

Membuat Widget Translator Halaman - Membuat Widget Translator mungkin ini sangat
Banyak dilakukan oleh bloggger , Karena mereka takut bahwa Pengunjung yang tidak
Mengerti bahasa dari artikel mereka dan mereka meninggalkan blog tersebut karena tidak
mengerti bahasa yang penulis bawakan di artikel tersebut , Mungkin jika anda tidak ingin
Menaruh widget translator di Sidebar mungkin widget ini bisa jadi pilihan anda

Langkah Pembuatan

1. Masuk Ke Blog Anda

2. Masuk Ke Tata Letak

3. Dan Klik Bagian HTML/Java Script

4. Dan Masukan Kode Dibawah Ini Di Dalam HTML/Java Script

 <style type="text/css">
#translator-wrapper {
  display:block;
  width:200px;
  border:1px solid #0A340A;
  background-color:white;
  overflow:hidden;
  position:relative;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  width:100%;
  color:black;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#0A340A;
  border:none;
  color:white;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:30px;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:13px;
  margin-top:-5px;
}
#translator-wrapper a:hover {background-color:#0A2C0A}
#translator-wrapper a:active {background-color:#082408}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
</style>
<h3>Translate this page to:</h3>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate!"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

Memodifikasi Breadcrumbs Seo Friendly

2014-07-29T01:58:00.000-07:00

Memodifikasi Breadcrumbs Seo Friendly - Maaf Untuk Para Blogger Untuk Tempo Hari Ini
Saya jarang Update artikel di blog ini , disebabkan saya Pergi Mudik untuk beberapa hari
dan saya akhirnya mendapatkan waktu untuk Update , Kali ini saya akan update
Memodifikasi Breadcrumbs Seo Friendly Mungkin dari sebagian Anda tau Breadcrumbs
Dari sebagian Orang Breadcrumbs Sangatlah penting tapi mereka tidak tau Apa itu
Seo Friendly Apa Tidak , Mungkin Anda Bisa Menggantinya dengan Yang Satu Ini
Setelah Kemarin Saya Share Artikel Berjudul MEMASANG TOMBOL SMOOTH BACK TO TOP DENGAN JQUERY DAN CSS

Langkah Penerapan :

1. Cari Kode ]]></b:skin> Dalam Template Anda

2. Sekarang Taruh Kode Dibawah ini diatas Kode Tersebut

 .breadcrumbs {

padding:0 5px 5px 0;

margin:0 0 5px;

font-size:11px;

border-bottom:1px dotted #ccc;

font-weight:normal

}

3. Sekarang Cari Kode <b:includable id='main' var='top'> Sampai Penutup </b:includable>

4. Dan Ganti Kode Tersebut Dengan Kode :

 <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><b:loop values='data:post.labels' var='label'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/>

5. Sekarang Simpan Template

Memasang Tombol Smooth Back To Top dengan Jquery dan CSS

2014-07-27T05:22:00.000-07:00

DEMO WIDGET

DEMO KLIK DISINI

Memasang Tombol Smooth Back To Top dengan Jquery dan CSS - Memasang Back To Top
Memang sangat dibutuh di blogger karena jika tulisan/Artikel Anda terlalu panjang Bisa
Kembali keatas dengan anda menambahkan Tombol Back To Top , Memang Sekarang Sudah
Banyak Yang tombol-Tombol back to top yang di share di google, dan sudah bermacam-macam
Bentuk Variasi dan warna dari back to top Tersebut MEMODIFIKASI WIDGET POPULAR POST TAMPIL LEBIH MENARIK

Langkah Penerapan

1. Cari Kode ]]></b:skin> Di dalam Template Anda

2. Letakan Kode Dibawah Ini Diatas Kode Tersebut

 /*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.2
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

#toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;
overflow:hidden;width:40px;height:40px;border:none;text-indent:-999px;
background:#fff url(http://4.bp.blogspot.com/-u5eNR3_Koe4/UvA__vdHdAI/AAAAAAABLTk/GeV5RC40Xds/s1600/totop_button.png) no-repeat left top;}
#toTop {
 display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 width:51px;
 height:51px;
 border:none;
 text-indent:100%;
 background:url(http://3.bp.blogspot.com/-f4w48d-MePQ/UvBDTiYyihI/AAAAAAABLT4/k9p7sF0NqI0/s1600/ui.totop.png) no-repeat left top;
}

#toTopHover {
 background:url(http://3.bp.blogspot.com/-f4w48d-MePQ/UvBDTiYyihI/AAAAAAABLT4/k9p7sF0NqI0/s1600/ui.totop.png) no-repeat left -51px;
 width:51px;
 height:51px;
 display:block;
 overflow:hidden;
 float:left;
 opacity: 0;
 -moz-opacity: 0;
 filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
 outline:none;
}

3. Sekarang Cari Kode </body> Di Dalam Template

4. Letakan Kode Dibawah Ini diatas Kode Tersebut

 <script type='text/javascript'>
//<![CDATA[

/*
 * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
 *
 * Uses the built In easIng capabilities added In jQuery 1.1
 * to offer multiple easIng options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */



jQuery.extend( jQuery.easing,
{
 easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
 },
 easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
 },
 easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
 },
 easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
 },
 easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
 },
 easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
 },
 easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
 },
 easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
 },
 easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
 },
 easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
 },
 easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
 },
 easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 },
 easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
 },
 easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 },
 easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 },
 easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 },
 easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 },
 easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 },
 easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 },
 easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 },
 easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 },
 easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 },
 easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 },
 easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
 },
 easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 },
 easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158; 
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 },
 easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 },
 easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
 },
 easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 }
});

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

(function($){
 $.fn.UItoTop = function(options) {

   var defaults = {
   text: 'To Top',
   min: 200,
   inDelay:600,
   outDelay:400,
     containerID: 'toTop',
   containerHoverID: 'toTopHover',
   scrollSpeed: 1200,
   easingType: 'linear'
   };

   var settings = $.extend(defaults, options);
  var containerIDhash = '#' + settings.containerID;
  var containerHoverIDHash = '#'+settings.containerHoverID;
  
  $('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');
  $(containerIDhash).hide().click(function(){
   $('html, body').animate({scrollTop:0}, settings.scrollSpeed, settings.easingType);
   $('#'+settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType);
   return false;
  })
  .prepend('<span id="'+settings.containerHoverID+'"></span>')
  .hover(function() {
    $(containerHoverIDHash, this).stop().animate({
     'opacity': 1
    }, 600, 'linear');
   }, function() { 
    $(containerHoverIDHash, this).stop().animate({
     'opacity': 0
    }, 700, 'linear');
   });
     
  $(window).scroll(function() {
   var sd = $(window).scrollTop();
   if(typeof document.body.style.maxHeight === "undefined") {
    $(containerIDhash).css({
     'position': 'absolute',
     'top': $(window).scrollTop() + $(window).height() - 50
    });
   }
   if ( sd > settings.min ) 
    $(containerIDhash).fadeIn(settings.inDelay);
   else 
    $(containerIDhash).fadeOut(settings.Outdelay);
  });

};
})(jQuery);




$('document').ready(function(){
 /*
 var defaults = {
  containerID: 'moccaUItoTop', 
  containerHoverClass: 'moccaUIhover',
  scrollSpeed: 1200,
  easingType: 'linear' 
 };
 */
 
 $().UItoTop({ easingType: 'easeOutQuart' }); 

});
//]]>
</script>

Memodifikasi Widget Popular Post Tampil Lebih Menarik

2014-07-25T20:43:00.000-07:00

Memodifikasi Widget Popular Post Tampil Lebih Menarik - Seperti Biasa
Saya Akan membagikan Tutorial-Tutorial yang mungkin bermanfaat bagi anda
Setelah Kemarin Saya Share Artikel Berjudul MEMODIFIKASI BLOG AGAR SEO FRIENDLY
Sekarang saya akan share artikel berjudul Memodifikasi Widget Popular Post Tampil Lebih
Menarik Mungkin dari sebagian anda sudah mulai bosan dengan Tampilan default dari popular
post yang ada di blog anda , Mungkin anda ingin membuatnya lebih menarik tapi tidak tau caranya
Berikut Tutorialnya

Langkah Penerapan :

1. Cari Kode ]]></b:skin> Di dalam Template Blog Anda

2. Sekarang Masukan Kode Dibawah ini Tepat Diatas Kode Tersebut

 .PopularPosts .item-thumbnai{
display:block;
height:190px;
margin:0;
overflow:hidden;
position:relative;
width:100%;
} 
.PopularPosts .item-title {position:relative;} 
.PopularPosts img {display:block;
height:auto;
position:absolute;
width:100%;
}
.item-title a {
background:none;
color:transparent;
font-family:Oswald;
font-size:17px;
font-weight:400;
padding:10px 0;
padding-right:300px;
position:absolute;
right:0;
text-align:center;
top:0;
width:100%;
transition:all 0.2s ease-out;
}
.item-title a:hover {
background:#f97e76;
color:#fff;
padding-right:0;
}
.item-snippet {
background:none;
color:rgba(0,0,0,0.3);
font-weight:normal;
left:12%;
padding:10px;
position:absolute;
text-align:center;
top:95px;
width:70%;
transition:all 0.2s ease-out;
}
.item-snippet:hover {
background:#4f5a66;
color:#FFFFFF;
}
.item-content {
position:relative;
}

3. Sekarang Cari Kode </body> Di Template Anda

4. Sekarang Letakan Kode Dibawah Ini Diatas Kode Tersebut

 <script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization
    // Trim Code
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

Memodifikasi Blog Agar SEO Friendly

2014-07-24T20:07:00.000-07:00

Memodifikasi Blog Agar SEO Friendly - Membuat Blog Seo Friendly Adalah Harapan
Semua Kalangan Semua Blogger Karena , Siapa Yang Tak mau blognya di sayangi atau
Disukai google , dan dari kebanyakan mereka masih tidak tau bagaimana cara membuat
Blog Mereka Seo Friendly , Mungkin sekarang saya akan berbagi dengan Anda Bagaimana
Memodifikasi Blog Agar SEO Friendly Setelah Kemarin Saya Share artikel berjudul
FND BLOGGER TEMPLATE , Tutorial ini terbilang Simple Bagi semua kalangan
Asalkan Mereka mengerti tata Taruh Script Tersebut

1. Memasang/Memdofikasi Title Tag Seo Friendly

Memdofikasi Atau Memasang Title Tag Seo friendly ini sangat penting Bagi Blog anda
Selain Membuat Blog Suka dengan blog anda karena SEO Friendly , Bisa juga membuat
Blog anda lebih menarik Pengunjung

Cari Kode Dibawah Ini Dalam Template Anda

 <title><data:blog.pageTitle/></title>

Sekarang Ganti Kode Tersebut Dengan Kode Dibawah Ini

 <!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

2. Memasang Tag Heading Dinamis

Tag heading adalah sebuah tag/code HTML untuk memperbesar sebuah tulisan. Biasanya heading tag digunakan dalam membuat judul sebuah document atau artikel. Heading tag sendiri memiliki 6 tingkatan yang dimulai dari 1 sampai 6.Heading 1 atau <h1> merupakan tingkatan paling besar, sementara heading 6 atau <h6> merupakan tingkatan paling kecil. Heading tag juga berguna untuk Pengoptimalan SEO secara onpage

Cari Kode Dibawah Ini Di Template Anda

  <b:widget id='Header1' locked='true' title='Karya-Reza (Header)' type='Header'>
          <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>

Ganti Semua Kode Tersebut Dengan Kode Dibawah Ini

 <b:widget id='Header1' locked='true' title='Karya-Reza (Header)' type='Header'>
        <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
          </b:if>
  </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
      </b:if>
    </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>   
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <p class='title'><b:include name='title'/></p>
     <b:else/>
       <h1 class='title'><b:include name='title'/></h1>
     </b:if>
  <b:else/>
          <p class='title'><b:include name='title'/></p>
  </b:if>
     <b:include name='description'/>
      </div>
 </div>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
      </b:widget>

3. Mengedit Pada Bagian Judul Postingan

Cari Kode Dibawah Ini Di Dalam Template Anda

 <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Ganti Dengan Kode Dibawah Ini :

 <b:if cond='data:post.title'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <h1 class='post-title entry-title' itemprop='name'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h1>
     <b:else/>
          <h2 class='post-title entry-title' itemprop='name'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h2>
  </b:if>
   <b:else/>
        <h1 class='post-title entry-title' itemprop='name'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
              <b:else/>
                <data:post.title/>
            </b:if>
          </b:if>
        </h1>
   </b:if>
    </b:if>

4. Memasang breadcrumb

Cari Kode Dibawah Ini :

 <b:includable id='main' var='top'>

Ganti Kode Tersebut Dengan Kode Dibawah Ini :

  <b:includable id='breadcrumb' var='posts'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'> 
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
     </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
        <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
        </div>
        <b:else/>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
     </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> 
     </div> 
      <b:else/>
        <b:if cond='data:blog.searchQuery'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
     </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
        <div class='breadcrumbs'>
     <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
        <b:else/>
        <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> 
        </b:if>
        </div>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
</b:includable> 

      <b:includable id='main' var='top'>
   <b:include data='posts' name='breadcrumb'/>

Agar Tampilan Lebih Rapih Tambahkan CSS Ini didalam Blog Anda
Atau Lebih Tepatnya Di Atas Kode ]]></b:skin>

 .breadcrumbs {
 font-size: 11px;
 color: #666;
 padding: 10px 0px;
 margin: 10px 0px 20px;
 border-bottom: 1px solid #ddd;
}

5. Terakhir, Meta Tag Seo Friendly

Memang Sudah banyak Meta Tag , Yang di share di google , Dan bermacam-macam dan
Yang Paling Banyak Di pilih ialah blog-blog ternama seperti KangIsmet,KangKapuk,Mas Sugeng
dan masih banyak lagi Setelah Tadi saya panjang lebar dengan Script diatas , sekarang saya akan
Mengasih anda Meta Tag yang Seo Friendly , Taruh Kode Tersebut Dibawah <head>

 <!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>    
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex,nofollow' name='robots'/></b:if>
<b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if>