baca in

Membatasi jumlah posting di halamam label

Seringkali terkadang jumlah posting yang muncul di halaman search label blogger melebihi jumlah yang sudah kita terapkan di pengaturan dasar, ketik kita telah mengatur jumlah posting yang muncul di halaman beranda blogger dengan jumlah maksimal misalkan sepuluh posting maka poating yang akan muncul di halaman label akan tetap berada di jumlah default.

untuk mengatasi hal tersebut kita bisa menggunakan trik yang cukup sederhana untuk di terapkan bagi sobat blogger yang sudah paham dan untuk sobat yang belum tahu jadi ikuti saja sob triknya...

Halaman label akan muncul ketika kita membuka link label yang ada di blogger, bisa sobat lihat di blog masing masing, umumnya link label ini terdapat di menu nav atau menu drop down, label dan menu breadcrum. cara yang harus kita lakukan adalah:

Buka editor template anda, lalu cari kode dan Temukan kode apa saja yang tampak kurang lebih seperti ini (kususkan pencarian pada tag yang memiliki atribut expr:href, beberapa atribut lain mungkin juga ditemukan di dalam tag yang sama misalnya expr:dir tips tekan Ctrl + F untuk pencarian cepat:

<a expr:href='data:label.url'>

Ubah atribut di ats yang di awali expr:href menjadi seperti ini:

<a expr:href='data:label.url + &quot;?max-results=5&quot;'>

nilai max-results=5 adalah jumlah posting yang akan di tampilkan dsi halaman label ketika di buka, silahkan anda ubah sesuai keingan.

langkah berikutnya, tambah atribut di bawah ini di url yang ada pada menu drop dwon atau nav blog

?max-results=5

sehingga menjadi seperti berikut:

<a href='http://defandaky.blogspot.com/search/label/HTML?max-results=5'>HTML</a>

tinggal anda lihat dan klik sana sini untuk mencoba hasilnya...

Jangan lupa untuk mengubat semua atribut di widget label dan menu breadcrum yang ada di template, cara cari atribut sampai semua telah terlihat anda tambahkan kode + "?max-results=5"

semoga membantu dan berguna...

Pencarian dengan tombol bersihkan

Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda.

Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link internal ketika akan menerbitkan sebuah posting baru.

Pada kali ini saya akan share sebuah kotak pencarian dengan tambahan fitur tombol pembersih text input, kotak pencarian ini sederhana hanya ada sedikit tambahan jQuery.

CSS

#search-form {width:200px;padding:4px;background:#242424;}
.text-input-wrapper {
  border:1px solid #282828;
  padding:0px;
  display:inline-block;   
  width:150px; 
}
.text-input-wrapper input {
  border:none;
  background:#fff;
  outline:none;
  padding:0;
  margin:0;
  font:inherit;   
  width:150px; 
}
.text-input-wrapper span {
  cursor:pointer;
  color:#369;
  font-weight:bold;
  visibility:hidden;
}
.bersih{ background:#fff;margin-left:-15px}
.search-btn{cursor:pointer;width:40px;height:22px;background:#444;color:#fff;border:1px solid #262626;}
.search-btn:hover{background:#666;}

HTML From

<form id="search-form" action="/search" method="get">
    <span class="text-input-wrapper"><input type="text" name="q" autocomplete="off" size="18"/><span class="bersih" title="bersihkan!">&times;</span></span>
    <button class='search-btn' type="submit" value="Submit">cari</button>
</form>

jQuery

<script type="text/javascript">
//<![CDATA[
(function() {
 var searchForm = document.getElementById('search-form'),
  textInput = searchForm.q,
  clearBtn = textInput.nextSibling;
 textInput.onkeyup = function() {
  clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
 };
 clearBtn.onclick = function() {
  this.style.visibility = "hidden";
  textInput.value = "";
 };
})();
//]]></script>

Coba Disini

Penambahan fungsi pembatasan hasil pencarian:

jika anda ingin membatasi hasil pencarian sesuai dengan nilai atau jumlah yang ingin anda sesuaikan tambahkan kode berikut

<input name='max-results' type='hidden' value='8'/>

Perhatikan pada nilai value='8' ini bisa anda rubah sesuai kebutuhan.

Cara membuat judul header untuk tag pre

Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini.

pertama silahkan buka editor template blogger sobat dan cari kode </style> atau jika sobat masih menggunakan struktur template defaul blogger cari kode ]]></b:skin> setelah ditemukan silahkan copy dan letakkan kode css di bawah ini di atas kode tadi:

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:#006666}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#ffcc66}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

untuk menggunakan atau memanggilnya di dalam posting, buat di pos editor kode berikut ini

<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

Silahkan hapus tulisan untuk css, html, js dan jquery yang ada di kode. jika anda ingin menambahkan lebih banyak judul untuk kode tag pre lakukan langkah seperti di atas dan jika setelah langkah semua diatas sudah sobat lakukan atur kembali css

margin:-11px -13px 10px -54px;

kode diatas menyesuaikan letak judul tag pre lebih ke kiri atau kanan.

semoga berhasil...

Menandai komentar admin dengan css

Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya.
blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang berbeda pada blok komentar administrator secara keseluruhan? Dulu kita bisa menggunakan tag kondisional, tapi sekarang tidak lagi.
jadi untuk lebih mudahnya kita akan menggunakan dan memanfaatkan css tanpa javascript...

oke langsung saja simak trik di bwah ini:

Pertama buka editor template blogger

cari kode tag berikut ini dalam template sobat...

<b:includable id='comments' var='post'>

lalu temukan kode di bawah ini dalam area tag komentar tersebut

<b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> 
   <b:else/>
  <data:comment.author/> 
</b:if>

setelah anda temukan, letakkan kode berikut ini di bawah kode di atas

<span class='comment_author_flag'>Admin</span>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.comment_admin .comment_author_flag {display:inline;background:#bbb;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}

untuk mengubah background komentar milik admin tambahkan kode css berikut ini di atas ]]></b:skin> atau </style>:

div.comment_inner.comment_admin {background:#394549;}

jika dalam template sobat sudah ada, ganti saja warnanya dengan tampilan warna yang anda suka dengan merubah nilai pada {background:#394549;}

sekarang tinggal lihat hasilnya...

demikian saja semoga berguna dan bermanfaat sob...

Memasang meta tag agar blog lebih SEO Friendly

Salam sobat blogger, share lagi ni buat lebih mengoptimalkan seo pada blog agar bisa tampil di halaman pertama halaman mesin pencari. tapi jangan lantas ini di jadikan trik utama karena masih ada trik trik lain yang perlu sobat lakukan untuk membuat blognya lebih seo, ini hanya sebagaian trik sja yang memang cukup efektif di hasilnya.

sudah banyak tutor dan share membuat meta tag seo friendly buat blog apa lagi yang di barengi dengan akhiran super seo 2014 tapi memang pendapat dan penilaian setiap blogger berbeda beda tentang hal tersebut, nah untuk itu buat sobat yang menilai meta tag ini baik silahkan di pakai dan yang merasa kurang silahkan di lewati saja :-)

Di bawah ini adalah meta tag yang bisa sobat pakai

<meta charset='utf-8'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=3.0' name='viewport'/>
<b:else/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada - judul blog anda</title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.searchQuery'>
<title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: judul blog anda</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Arsip Artikel Bulan <data:blog.pageName/> judul blog</title>
<meta expr:content='&quot;Arsip Artikel Bulan &quot; + data:blog.pageName + &quot; diskripsi&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> judul blog</title>
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di judul blog&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<title>Pencarian semua Label :: <data:blog.pageName/> :: judul blog</title>
<meta expr:content='&quot;Pencarian pada kategori ::&quot; + data:blog.pageName + &quot;:: selengkapnya silahkan kunjungi di udul blog.&quot;' name='description'/>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>
</b:if>
<meta content='kata kunci' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> judul blog</title>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di judul blog&quot;' name='description'/>
</b:if>
<meta expr:content='data:blog.pageName + &quot;, kata kunci&quot;' name='keywords'/>
</b:if>

untuk menempatakan meta tag di atas di blog anda, cari saja meta tag yang dulu pernah sobat pasang dan ganti dengan ini, buat yang belum pernah cari saja <b:include data='blog' name='all-head-content'/> dan letakkan meta tag di atas di bawah kode tersebut.

sekedar tips, buat sobat yang masih menggunakan meta seperti

<meta content='index, follow' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='all-language' http-equiv='Content-Language'/>
<meta content='global' name='Distribution'/>
<meta content='global' name='target'/>
<meta content='all' name='Scooter'/>
<meta content='ALL' name='spiders'/>
<meta content='Indonesia' name='geo.
<meta content=' NAMA PENGGUNA BLOG ' name='author'/>
<meta content='2014, ISI DENGAN JUDUL BLOG ' name='copyright'/>country'/>
<meta content='all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='1 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='all' name='Slurp'/>
<meta content='all' name='ZyBorg'/>
<meta content='all' name='msnbot'/>

lebih baik di hilangkan saja, kerena sudah tidak ada gunanya... menurut saya sekali lagi :-), kalau sobat masih merasa penting silahkan saja di pertahankan...

Cukup segitu saja sobat, silahkan di simak dan di pelajari tentang memasang meta tag agar lebih seo... semoga bermanfaat.

Side Menu dengan jQuery

Memfungsikan ikon awesome dan jquery

letakkan kode berikut di atas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Menu vertical side memiliki tampilan memanjang atau menurun kebawah, Biasanya menu vertical ditempatkan dibagian kanan atau kiri laman blog.

Berikut adalah kode CSS, HTML dan jQuerynya :

CSS

#menu {
  position: fixed;
  background-color: #252525;
  height: 100%;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
#menu ul {
  list-style: none;
  margin-top: 0;
  padding: 0
}
#menu ul li { border-bottom: 1px solid #2a2a2a; }
#menu>ul>li>a { border-left: 4px solid #444; }
#menu ul li a {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 10px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 600;
}
#menu ul a i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 3px;
  width: 20px;
}
#menu ul a i[class*='fa-caret'] { float: right; }
#menu ul a:hover,
#menu ul a.active {
  background-color: #111;
  border-left-color: #369;
  color: #369;
}
#menu ul a:hover i:first-child { color: #369; }
/* Submenu */
#menu ul li a.active+ul { display: block }
#menu ul li ul {
  margin-top: 0;
  display: none;
}
#menu ul li ul li { border-bottom: none; }
#menu ul li ul li a { padding-left: 30px; }
#menu ul li ul li a:hover { background-color: #1A1A1A; }
/* show menu */
.left { left: -280px; }
.show { left: 0; }
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #369;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Letakkan kode CSS di atas di antara/bersama CSS yang lain di blog anda, atau di atas kode </style>

HTML

<!-- menu vertical -->
<nav id="menu" class="left">
  <ul>
    <li><a href="#" class="active"><i class="fa fa-home"></i> Beranda</a></li>
    <li><a href="#"><i class="fa fa-user"></i> Tentang</a></li>
    <li> <a href="#"><i class="fa fa-tags"></i> Kategori <i class="fa fa-caret-down"></i></a>
      <ul>
        <li><a href="#">Musik</a></li>
        <li><a href="#">Film</a></li>
        <li><a href="#">Video</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-phone-square"></i> Kontak</a></li>
  </ul>
  <a href="#" id="showmenu"> <i class="fa fa-align-justify"></i> </a> 
</nav>
<!-- end menu vertical -->

Untuk HTMLnya anda bisa meletakkan di bawah elemen footer atau di atas kode </body>, pengecualian pada peletakkan <a href="#" id="showmenu"><i class="fa fa-align-justify"></i></a> ini adalah ikon yang berfungsi untuk membuka menu side vertikal ini, jika anda ingin meletakkan di area tertentu ubah nilai position: absolute dengan position: relative pada css dan sesuaikan letak jarak kiri kanan di css.

jQuery

$("#showmenu").click(function(e){
 e.preventDefault();
 $("#menu").toggleClass("show");
});
 $("#menu a").click(function(event){
  event.preventDefault();
 if($(this).next('ul').length){
 $(this).next().toggle('fast');
 $(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
    }
});

untuk jQuerynya anda letakkan di atas tag kode </body> jangan lupa bungkus dengan kode awalan <script text/javascript'> //<![CDATA[dan akhiran //]]> </script>

Demo Side Menu

Membuat ucapan terimakasih di bawah komentar

Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.

Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya

Buka editor template blogger anda sperti biasanya, dan tekan Ctrl + F untuk menemukan kode

<b:includable id='threaded-comment-form' var='post'>

setelah anda temukan gulung kebawah dan cari kedi di bawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

ada dua kode serupa seperti diatas, tapi yang membedakan adalah akhiran kode name='comment-editor' style='display: none'/> jadi lewati kode ini, ini adalah kode untuk tampilan form komentar mobile.

lalu letakkan kode berikut setelah kode di atas

<div class='db-comment-thanks'>Terima kasih telah berkomentar</div>

kemudian kita beri style kode di atas dengan css berikut, letakkan di antara css template blog anda

.db-comment-thanks {font-family:Arial, sans-serif;font-size:12px;right:27px;margin-top:-73px;padding:6px 12px;background:#f8f8f8;color:#999;border:1px solid #c9cacb;border-radius:3px;position:absolute;}

jangan lupa untuk menyesuaikan letak ucapan terimakasih ini lebih kekiri atau kanan dan atas bawahnya demgan merubah nialai pada css right:27px; margin-top:-73px;.

semogas berhasil dan membantu...