Tulisan Anda...
Categories: Baca selengkapnya »
Tulisan Anda...
Categories: Baca selengkapnya »

Membuat widget fans page facebook melayang

Hallo sob.., Hari ini saya akans share tentang cara membuat widget fans page facebook melayang di slide bar blog, dengan begitu sobat yang menggunakan template yang minimalis bisa menghemat ruang untuk dipakai keperluan lainnya. Caranya sederhana pertma tentunya sobat harus punya fans page facebook terlebih dahulu, bila sobat belum mempunyai fans page facebook sobat bisa membuatnya dulu, untuk yang belum tahu cara membuat fans page facebook sobat bisa lihat caranya di : Cara membuat widget like fan page facebook, jika sobat ingin membuat comment facebook berada di bawah posting blospot sobat bisa lihat di : cara menambahkan facebook comment ke blogger.
Ok skarang kembali cara membuat widget fans page facebook melayang.
Setelah sobat mempunyai fans pagenya kemudian sobat masuk kedasbor blogger >> Template >> Edit HTML
Setelah itu sobat cari kode </head> lalu letakn kode berikut tepat di atas kode </head> tetapai jika sobat sudah mempunyai kode Jquery sebelumnya tidak disarankan untuk menambahkan kode berikut.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
Setelah sobat selesai memasukan kode Jquery kedalam template blogger sobat, selanjutnya sobat pilih Tata letak >> Tambah Gadget >> HTML/JavaScript lalu masukan kode di bawah ke dalam widget HTML/Javascript sobat.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3uDthx1DXITaSF3Z6ladGiwpRvLOmHPc8sYCvUw8oeVw-gKA7OhupT9ouAvdxFXlyFiXbudGMCW0Kc5mDDzYJDynJDqp4AFCuTtSy4rOmXT74CxupBL5Cnd3WTAygZZcs3HTvtkSS4c/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/fajar345blog&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://www.fajar345.com/2012/04/membuat-widget-fans-page-facebook.html" target="_blank">+MAU??</a></span></div></div>
Ganti kode yang berwarna biru dengan url blog sobat. setelah itu simpan dan lihat hasilnya.
Silahkan sobat lihat DEMO untuk mengetahui bentuk widget fans page facebook melayang. Jangan lupa like fans pagenya juga ya :)
Ok mungkin sekian dulu tulisan saya hari semoga bermanfaat.
Categories: Baca selengkapnya »

Membuat widget fans page facebook melayang

Hallo sob.., Hari ini saya akans share tentang cara membuat widget fans page facebook melayang di slide bar blog, dengan begitu sobat yang menggunakan template yang minimalis bisa menghemat ruang untuk dipakai keperluan lainnya. Caranya sederhana pertma tentunya sobat harus punya fans page facebook terlebih dahulu, bila sobat belum mempunyai fans page facebook sobat bisa membuatnya dulu, untuk yang belum tahu cara membuat fans page facebook sobat bisa lihat caranya di : Cara membuat widget like fan page facebook, jika sobat ingin membuat comment facebook berada di bawah posting blospot sobat bisa lihat di : cara menambahkan facebook comment ke blogger.
Ok skarang kembali cara membuat widget fans page facebook melayang.
Setelah sobat mempunyai fans pagenya kemudian sobat masuk kedasbor blogger >> Template >> Edit HTML
Setelah itu sobat cari kode </head> lalu letakn kode berikut tepat di atas kode </head> tetapai jika sobat sudah mempunyai kode Jquery sebelumnya tidak disarankan untuk menambahkan kode berikut.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
Setelah sobat selesai memasukan kode Jquery kedalam template blogger sobat, selanjutnya sobat pilih Tata letak >> Tambah Gadget >> HTML/JavaScript lalu masukan kode di bawah ke dalam widget HTML/Javascript sobat.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3uDthx1DXITaSF3Z6ladGiwpRvLOmHPc8sYCvUw8oeVw-gKA7OhupT9ouAvdxFXlyFiXbudGMCW0Kc5mDDzYJDynJDqp4AFCuTtSy4rOmXT74CxupBL5Cnd3WTAygZZcs3HTvtkSS4c/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/fajar345blog&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://www.fajar345.com/2012/04/membuat-widget-fans-page-facebook.html" target="_blank">+MAU??</a></span></div></div>
Ganti kode yang berwarna biru dengan url blog sobat. setelah itu simpan dan lihat hasilnya.
Silahkan sobat lihat DEMO untuk mengetahui bentuk widget fans page facebook melayang. Jangan lupa like fans pagenya juga ya :)
Ok mungkin sekian dulu tulisan saya hari semoga bermanfaat.
Categories: Baca selengkapnya »

Demo Block quote fajar345 Blog

Ini adalah demo dari block quote yang telah di tulis di http://www.fajar345.com. untuk block quote yang di tulis di postng fajar345.com adalah block quote dengan warna putih seperti dibawah ini
haloo ini block quote yang telah didemokan sebelumnya, sobat dapat menggati ketebalan tulisan seperti yang telah ditulis di fajar345 blog. dan juga dapat memilih warna background yang sesuai dengan tema blog sobat
dan dibawah adalah beberapa pilihan background yang bisa sobat terapkan di blog sobat.



 berikut kode url untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBwMoHBjFdmou8rXVwuN3xkgMjlWnx7taYKUWpg3YOwHTO2iUb1kaDM4BxcYf46o6f2NKcowmSvP5JmZdd9nYSmkbPKA6Rfh8h2cK_4uwurJLgXpUnKOAQrOjQBBR6NX-Qw9fP_PeR34/s1600/notebook-brown.gif


Url block quote dengan background diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiploXC4qcZapZdnSl5Cqidrk4qxXkRT9ljr7kwzbQxdm_jhz0XTYQUUCpWf337upbqcwKFKNDorrpGCxwZ21fxWEJJ5ubMf9fe3tzwVeMvBIhQE8MTAqVAxOQy3Or-M13YDQ5yFvOzbNg/s1600/notebook-green.gif

 
Untuk warna diatas 
1.bp.blogspot.com/_7wsQzULWIwo/SwluBQVcDsI/AAAAAAAACTA/eN3HYcH6nTw/s1600/notebook-grey.gif
Diatas adalah pilihan untuk kode yang pertama jika sobat gunakan pilihan kode yang kedua berikut adalah contoh background block quote dan urlnya.


Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11dw9CjcHpLjTb3tg3cKYZ_pjIwG8dCg-crIqOQxK7pYhoug-oV9oJ6asevdMKdWJl2WGDg_hor5c5lx71WWRqCHoL5-uZZDrTJXZINObeaOfAmDm1XfI66gCvoBaQK86iaJ4FQbuNng/


Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpsiS4pN8i0dZ3NATndt5tLcJuaaLOsY5G1nyY0Gk-sP4EENtNhcHwRtkpMiD77KqaWFqsN3A23UtGMvOK4vhWsTmyDogwWsQzlct9OjWoq-RRTL7OrVnMxhqnTTDLbxX1gvVNaboLcA/


Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamtaLoAhxUNDmNshlOvUP9f0m5RW7ipA5xo96DDkfTKvUZ-nmyVCjoCCFJMtwQsUkW-9CmSXLvEcPOBBPVwucTv-TxmfXflQzErvsNFTUrx8YNTmSCCJkGVBeG7v2_djvmVo18ft80aA/
Silahkan sobat gunakan salah satu bacgroun diatas.
Diposkan oleh di
Categories: Baca selengkapnya »

Demo Block quote fajar345 Blog

Ini adalah demo dari block quote yang telah di tulis di http://www.fajar345.com. untuk block quote yang di tulis di postng fajar345.com adalah block quote dengan warna putih seperti dibawah ini
haloo ini block quote yang telah didemokan sebelumnya, sobat dapat menggati ketebalan tulisan seperti yang telah ditulis di fajar345 blog. dan juga dapat memilih warna background yang sesuai dengan tema blog sobat
dan dibawah adalah beberapa pilihan background yang bisa sobat terapkan di blog sobat.



 berikut kode url untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBwMoHBjFdmou8rXVwuN3xkgMjlWnx7taYKUWpg3YOwHTO2iUb1kaDM4BxcYf46o6f2NKcowmSvP5JmZdd9nYSmkbPKA6Rfh8h2cK_4uwurJLgXpUnKOAQrOjQBBR6NX-Qw9fP_PeR34/s1600/notebook-brown.gif


Url block quote dengan background diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiploXC4qcZapZdnSl5Cqidrk4qxXkRT9ljr7kwzbQxdm_jhz0XTYQUUCpWf337upbqcwKFKNDorrpGCxwZ21fxWEJJ5ubMf9fe3tzwVeMvBIhQE8MTAqVAxOQy3Or-M13YDQ5yFvOzbNg/s1600/notebook-green.gif

 
Untuk warna diatas 
1.bp.blogspot.com/_7wsQzULWIwo/SwluBQVcDsI/AAAAAAAACTA/eN3HYcH6nTw/s1600/notebook-grey.gif
Diatas adalah pilihan untuk kode yang pertama jika sobat gunakan pilihan kode yang kedua berikut adalah contoh background block quote dan urlnya.


Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11dw9CjcHpLjTb3tg3cKYZ_pjIwG8dCg-crIqOQxK7pYhoug-oV9oJ6asevdMKdWJl2WGDg_hor5c5lx71WWRqCHoL5-uZZDrTJXZINObeaOfAmDm1XfI66gCvoBaQK86iaJ4FQbuNng/


Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpsiS4pN8i0dZ3NATndt5tLcJuaaLOsY5G1nyY0Gk-sP4EENtNhcHwRtkpMiD77KqaWFqsN3A23UtGMvOK4vhWsTmyDogwWsQzlct9OjWoq-RRTL7OrVnMxhqnTTDLbxX1gvVNaboLcA/


Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamtaLoAhxUNDmNshlOvUP9f0m5RW7ipA5xo96DDkfTKvUZ-nmyVCjoCCFJMtwQsUkW-9CmSXLvEcPOBBPVwucTv-TxmfXflQzErvsNFTUrx8YNTmSCCJkGVBeG7v2_djvmVo18ft80aA/
Silahkan sobat gunakan salah satu bacgroun diatas.
Diposkan oleh di
Categories: Baca selengkapnya »

Menetukan Posting Yang Tampil saat menuju link Label

hay kali ini saya akan mengasi tau teman-teman semu cara untuk menentukan sendiri posting yang tampil di blog saat menuju link label....

Memang sebuah label jika diklik akan menampilkan semua posting di bawah label tersebut. Bila sebuah label telah mempunyai jumlah posting yang cukup banyak, tentu hal ini akan membuat loading blog terasa berat, kita batasi saja jumlah posting yang tampil di satu halamannya sesuai dengan keinginan kita.

Untuk membatasi jumlah posting yang tampil dalam satu halaman saat label diklik, kita perlu menambahkan kode pembatas seperti di bawah ini.

+ &quot;?max-results=5&quot;

Angka 5 di atas menunjukkan berapa banyak jumlah posting yang ditampilkan per halamannya. Silakan ganti sesuai dengan keinginan Anda.

Berikut ini akan kita praktikkan di template blog kita. Namun, sebelumnya pastikan bahwa Anda sudah memasang widget label di sidebar blog Anda. Labelnya bisa label berbentuk daftar atau list atau label yang berbentuk cloud.

1. Masuk ke akaun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template. Hal ini dilakukan untuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.



<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>



6. Tambahkan kode pembatas + &quot;?max-results=5&quot;

7. Sehingga hasilnya akan seperti di bawah ini.



<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>



8. Kode di atas adalah kode untuk label yang berbentuk list. Sedangkan untuk label cloud, silakan cari kode seperti di bawah ini. Letaknya di bawah kode label list.
 
 

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if
cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>



9. Tambahkan kode pembatas + &quot;?max-results=5&quot;

10. Maka hasilnya akan tampak seperti di bawah ini.



<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>



11. Klik tombol SIMPAN TEMPLATE.

12. Selesai.

Cara di atas berlaku pada sebuah label yang diklik di widget label, baik label daftar atau label cloud. Namun, untuk link label yang terdapat di menu navigasi breadcrumbs dan post footer line, link label tersebut bila diklik masih menampilkan semua posting. Nah, bila Anda ingin membatasi juga jumlah posting yang tampil pada label di kedua lokasi tersebut, silakan simak langkah-langkahnya di bawah ini.

1. Lakukan langkah no. 1 - 4 pada langkah di atas.

2. Cari kode seperti di bawah ini  atau yang mirip dengan kode tersebut, yaitu kode untuk menu navigasi breadcrumbs.


<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>

3. Tambahkan kode pembatasnya, maka hasilnya seperti di bawah ini.

<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>

4. Cari kode seperti ini di bawah ini atau yang mirip dengan kode tersebut, yaitu kode untuk label pada post footer line.

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

5. Kemudian tambahkan kode pembatasnya, maka jadinya akan seperti di bawah ini.

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
 
 

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai.
Categories: Baca selengkapnya »

Menetukan Posting Yang Tampil saat menuju link Label

hay kali ini saya akan mengasi tau teman-teman semu cara untuk menentukan sendiri posting yang tampil di blog saat menuju link label....

Memang sebuah label jika diklik akan menampilkan semua posting di bawah label tersebut. Bila sebuah label telah mempunyai jumlah posting yang cukup banyak, tentu hal ini akan membuat loading blog terasa berat, kita batasi saja jumlah posting yang tampil di satu halamannya sesuai dengan keinginan kita.

Untuk membatasi jumlah posting yang tampil dalam satu halaman saat label diklik, kita perlu menambahkan kode pembatas seperti di bawah ini.

+ &quot;?max-results=5&quot;

Angka 5 di atas menunjukkan berapa banyak jumlah posting yang ditampilkan per halamannya. Silakan ganti sesuai dengan keinginan Anda.

Berikut ini akan kita praktikkan di template blog kita. Namun, sebelumnya pastikan bahwa Anda sudah memasang widget label di sidebar blog Anda. Labelnya bisa label berbentuk daftar atau list atau label yang berbentuk cloud.

1. Masuk ke akaun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template. Hal ini dilakukan untuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.



<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>



6. Tambahkan kode pembatas + &quot;?max-results=5&quot;

7. Sehingga hasilnya akan seperti di bawah ini.



<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>



8. Kode di atas adalah kode untuk label yang berbentuk list. Sedangkan untuk label cloud, silakan cari kode seperti di bawah ini. Letaknya di bawah kode label list.
 
 

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if
cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>



9. Tambahkan kode pembatas + &quot;?max-results=5&quot;

10. Maka hasilnya akan tampak seperti di bawah ini.



<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>



11. Klik tombol SIMPAN TEMPLATE.

12. Selesai.

Cara di atas berlaku pada sebuah label yang diklik di widget label, baik label daftar atau label cloud. Namun, untuk link label yang terdapat di menu navigasi breadcrumbs dan post footer line, link label tersebut bila diklik masih menampilkan semua posting. Nah, bila Anda ingin membatasi juga jumlah posting yang tampil pada label di kedua lokasi tersebut, silakan simak langkah-langkahnya di bawah ini.

1. Lakukan langkah no. 1 - 4 pada langkah di atas.

2. Cari kode seperti di bawah ini  atau yang mirip dengan kode tersebut, yaitu kode untuk menu navigasi breadcrumbs.


<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>

3. Tambahkan kode pembatasnya, maka hasilnya seperti di bawah ini.

<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>

4. Cari kode seperti ini di bawah ini atau yang mirip dengan kode tersebut, yaitu kode untuk label pada post footer line.

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

5. Kemudian tambahkan kode pembatasnya, maka jadinya akan seperti di bawah ini.

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
 
 

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai.
Categories: Baca selengkapnya »

Cara Membuat Menu Horizontal Melayang



Untuk contohnya sobat bisa lihat gambar berikut:
Contoh Menu Horizontal Melayang
Gambar di atas adalah contoh Menu Horizontal Melayang, walaupun sobat menuju ke bagian paling bawah halaman blog, Menu Horizontal Melayang itu akan selalu setia mengikuti sobat dan selalu berada di bagian atas, ckckck... Setia tambah romantis aja . . .
Oke dah sekarang kita akan membahas cara memasnganya di blog sobat, cara pemasangannya sangatlah mudah sob, ya . . . mudah bangetz gitu lho . . .
Udah kita lansung aja ya . . .

Cara Membuat Menu Horizontal Melayang:

1. Login ke akun blogger sobat.

2. Pada menu klick Rancangan ➨  Tambah Gadget(saya sarankan di bagian paling bawah dan jangan di beri judul)  ➨ Lalu pilih HTML/Java Script.

3. Selanjutnya copy kode berikut dan paste atau letakkan di dalam gadget HTML/Java Script tadi.

<style type="text/css">
#msuteja ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#msuteja li .current{color: transparant;}#msuteja li a:hover, #msuteja li a:active {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Uyr3AzGSoO4XLkYIU_HtghXnGokDqr_gwVEII4-NmHDDT34zVLkdD1PwX0Vozw9NLGrtVkx7IOIS7zpsNk4bqRV7yUQQeG4hHnICRRoEzw9Rt8kRF1ymWuvqS0Soue4RpH9YSSn04pkO/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja {margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin: 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja li li a, #msuteja li li a:link, #msuteja li li a:visited {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Uyr3AzGSoO4XLkYIU_HtghXnGokDqr_gwVEII4-NmHDDT34zVLkdD1PwX0Vozw9NLGrtVkx7IOIS7zpsNk4bqRV7yUQQeG4hHnICRRoEzw9Rt8kRF1ymWuvqS0Soue4RpH9YSSn04pkO/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#msuteja li li a:hover, #msuteja li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#msuteja li {float: left;padding: 0;}#msuteja li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja li.sfhover ul ul ul {left: -999em;}#msuteja li:hover ul, #msuteja li li:hover ul, #msuteja li li li:hover ul, #msuteja li.sfhover ul, #msuteja li li.sfhover ul, #msuteja li li li.sfhover ul {left: auto;}#msuteja li:hover, #msuteja li.sfhover {position: static;}#footer-column-divide {clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicOW4iiviA6za_oEVL1Vu8QxAjRRdS59E788RYIz3O9dA3eVDeMOazcPUVrdOfhLYq1LBYQWTSF3gVCYo5i3V4d2WHXQ2viGd5rvtHT_P5IiKw_RvJvNjjC2UZjFpkCSu2Q31jPRcPtCIY//)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>
<div id='msuteja'>
<ul id='msuteja'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 2.1</a></li>
<li><a href= '#'target='_blank'>Menu 2.2</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Menu 3</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 3.1</a></li>
<li><a href='#' target='_blank'>Menu 3.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'' target='_blank'><blink>Menu 5</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 6</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 7</blink></a></li>
</ul>
</div>

4. Simpan.

Sekarang sobat bisa lihat sendiri hasilnya.

Keterangan:
  • Sobat ganti tanda # dengan url tujuan.
  • Ganti Menu dengan nama tujuan url.
Sekian dulu untuk Cara Membuat Menu Horizontal Melayang semoga articles ini bisa bermanfaat untuk sobat semua.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas! Description: Cara Membuat Menu Horizontal MelayangRating: 4.5Reviewer: dek rifItemReviewed: Cara Membuat Menu Horizontal Melayang

sumber info : 
http://otowebsite.blogspot.com/2012/05/cara-membuat-menu-horizontal-melayang.html/
Categories: Baca selengkapnya »