Tuesday, May 7, 2013

Membuat widget recent post

tanpa gambar atau beberapa postingan terbaru di sidebar mudah langsung jadi. banyak sekali teknik untuk meningkatkan page view blog untuk menunjang serp di setiap posingan kita terutama sebagai contoh membuat daftar isi blog tapi pada kesempatan kali ini akan saya share cara membuat recent post widget tanpa thumbnail atau tanpa gambar.

recent post

Kelebihan widget recent post ini adalah tampilannya yang simpel dan tentunya tanpa thumbnail yang tentunya akan mempercepat loading blog anad dari pada recent post dengan gambar langsung saja kita lihat tahap demi tahap cara membuat Membuat widget recent post di blog tanpa gambar.

Membuat widget recent post

  1. Masuk akun blogger.com >> page element (layout) >> Tambah element.
  2. Pilih HTML lalu masukkan kode di bawah ini.
<div id="tb">
<script style="text/javascript" src="http://tutorialblogspot.googlecode.com/files/recentpostnothumbnail.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://BLOG-ANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="display:none;">Recent Post no Thumbnail by <a href="http://www.firmanardyansyah.blogspot.com/">BlogArdy</a></div>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XYpio0Ms5hnk5P_A-t45oQNSbbsb9s6tdPyp1UIrUSd_GaSwQ4sj9Uv7i0GIBW7ecI9cL1JOAol_pLh_ro_6Pc8tJRb0lWJAEWEIcfl4FZ-AYWfP2XyvcX5DtUW_1oo0guf4Boud93Zj/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#tb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>
   3.  Simpan widget HTML tadi >> lalu tinggal atur letaknya sesuai keinginan kita biasanya di sidebar.

Catatan :
  • Ganti http://BLOG-ANDA.blogspot.com dengan URL blog sobat.
  • var numposts = 10 adalah jumlah postingan yang ditampilkan, silahkan ganti sesuai dengan keinginan sobat membuat.info
Sampai disini sedikit tutorial blog mengenai cara Membuat widget recent post di blog tanpa gambar semoga bermanfaat dan semoga berhasil..

Cara membuat Cursor Keren di blog

 Cara nya :


  • 1. Login ke Blog Anda,
  • 2. lalu klik edit tataletak / Rancangan
  • 3. Tambah Gadget
  • 4. cari dan pilih html javascript
  • 5. Copy script yang anda ingin kan ke html javascript.
  • 6. lalu simpah dan liat ke blog anda lihat cursor nya berubah
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth521.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/06/21/ninja-kunai.html" target="_blank" title="Ninja Kunai"><img src="http://cursors-4u.com/support.gif" border="0" alt="Ninja Kunai" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1035.ani), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/09/04/sharingan-3-naruto.html" target="_blank" title="Sharingan 3 - Naruto"><img src="http://cursors-4u.com/support.gif" border="0" alt="Sharingan 3 - Naruto" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth617.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/20/excalibur-11.html" target="_blank" title="Excalibur"><img src="http://cursors-4u.com/support.gif" border="0" alt="Excalibur" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-4/gam376.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/22/world-of-warcraft-wow-short-sword.html" target="_blank" title="World Of Warcraft, WoW Short Sword"><img src="http://cursors-4u.com/support.gif" border="0" alt="World Of Warcraft, WoW Short Sword" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1229.ani), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/03/perfect-world-online-spear-thingy.html" target="_blank" title="Perfect World Online Spear Thingy"><img src="http://cursors-4u.com/support.gif" border="0" alt="Perfect World Online Spear Thingy" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth520.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/06/21/shuriken-5.html" target="_blank" title="Shuriken"><img src="http://cursors-4u.com/support.gif" border="0" alt="Shuriken" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_cur1027.gif"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_sym144.gif"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_hol512.gif"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_oth829.gif"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_sym142.gif"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_nat1000.png"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_oth561.png"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_hol268.gif"), auto;}
</style> <br>
<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_spe114.gif"), auto;}
</style> <br>

Cara Memasang Artikel Terkait dengan Scroll di Bawah Posting

Cara Membuat Related Post atau Artikel Terkait dengan Sroll Box
Artikel Terkait Scroll
Tips trik ini membuat arikel terkait berbentuk scroll yang biasa mondar-mandir’ ke atas dan bawah. Kelebihan teknik scroll ini, sobat dapat menampilkan jumlah artikel terkait tiap label sebanyak-banyaknya tanpa mengganggu panjang vertikal dari halaman posting karena disiasati menggunakan scrolling. Untuk pengunjung tentu dengan leluasa dan bebas menelusuri Blog sobat.

OK, sekarang berikut tutorial cara memasang artikel terkait dengan scroll:
1. Pastikan sobat ‘stand by’ di akun Blogger, pergi ke Template dan klik Edit HTML,
2. Muncul kotak editor template, sembarang klik disalah satu kotak tersebut,
    kemudian tekan Ctrl + F, cari kode  ]]></b:skin> dan letakkan CSS
    berikut diatasnya:
/* Artikel Terkait */
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
     1. #E0F8E0 = kode warna kotak background Related Post (ganti sesuai selera sobat),
     2. #EFFBEF = kode warna kotak background 'hover' related post
          muncul pada saat disorot mouse (ubah dengan warna kesukaan sobat).

4. Cari kode <data:post.body/> atau <div class='post-body>,
    letakkan script berikut ini di bawah kode tersebut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H4>Related Post:</H4>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
    Prinsipnya, meletakkan kode tersebut berdekatan dengan post-entri atau
    di bawah postingan sobat. Angka 50 berwarna biru menunjukkan jumlah artikel terkait dalam
    satu label, bisa diubah sesuai selera sobat.
6. Klik Simpan Template, dan sobat silahkan lihat hasilnya.

Monday, May 6, 2013

Persinas ASAD


Perguruan Silat Nasional (Persinas) adalah suatu yayasan yang didirikan pada tanggal 30 April 1993 dengan Akte Nomor 430 Notaris J.L. Waworuntu, untuk waktu yang tidak terbatas.
Perguruan Silat Nasional ASAD berasaskan Pancasila dan UUD 1945 dan bermaksud menghimpun seluruh potensi bangsa yang memiliki persamaan cita-cita, wawasan dan tujuan dalam melestarikan budaya bangsa, khususnya ilmu seni bela diri pencak silat nasional yang bersumber pada aliran silat Cimande, Kunto, Cikaret, Singa Mogok, Nagan, Cikalong, Syahbandar, Garuda Mas, Sabeni, dan Tangkap Menangkap (TM).
Bahwa dengan melestarikan ilmu dan seni bela diri pencak silat, berarti melestarikan budaya bangsa, yang merupakan upaya meningkatkan kualitas mental dan fisik bangsa Indonesia, guna mempercepat terwujudnya Tujuan Nasional, dengan motto “Ampuh Sehat Aman Damai”.
Persinas Asad PengCab Jakarta Pusat merupakan salah satu cabang perguruan besar Indonesia Persinas Asad yang mewadahi pecinta silat untuk membumikan silat di bumi Nusantara. Bertempat di Padepokan Al-Muflihun Jakarta latihan diselenggarakan setiap selasa dan Jum’at malam, terbuka untuk umum baik anak-anak, remaja, dewasa dan orang tua. Dengan moto “Pencak Silat is my life” Persinas Asad JakPus mencoba membangkitkan semangat generasi silat untuk dan melestarikan pencak silat nasional sebagai identitas bangsa sejati disiplin dan santun dalam bermasyarakat.berkarakter bangsa, membela kebenaran, dan saling tolong menolong sesama umat manusia serta membumihanguskan Narkoba di bumi Nusantara.

Prestasi Dunia Persinas ASAD

Prestasi Dunia Persinas Asad Perguruan Silat Nasional (Persinas) Asad yang mewakili Indonesia meraih prestasi membanggakan di Festival Beladiri Dunia Chungju World Martial Arts Festival di Chungju Korea Selatan. Persinas Asad meraih prestasi tiga besar peserta terbaik dengan predikat luar biasa (outstanding performance) bersama peserta dari Jepang dan Cina. Persinas Asad ditunjuk PB IPSI mewakili Indonesia bersama perguruan silat Joko Tole Madura dan perguruan Pamor Pamekasan. Persinas Asad sendiri diwakili oleh Pengda Persinas Jawa Barat yang kemudian memberangkatkan lima pendekarnya dari Bandung. Tiga pendekar masih duduk di bangku SMP dan dua lainnnya seusia SMK. Chungju World Martial Arts Festival adalah festival bela diri se-dunia yang diadakan setiap 10 tahun sekali. Dimana, dari berbagai negara akan menampilkan ciri khas bela diri masing-masing. Misalnya, Indonesia dengan pencak silat, China dengan Wushu, Korea dengan Taekkyeon, Canada dengan Oki Chi Taw serta Australia dengan Tai-Kin-Jeri. PB IPSI sendiri telah mengikuti festival bela diri dunia sejak World Martial Arts Union (WOMAU) digelar kali pertama. Festival tersebut selalu mengundang 56 aliran bela diri dari 45 negara yang berasal dari 5 benua.Untuk festival beladiri Chungju Martial Arts ke 11 ini diadakan di Chungju Tangeumdae UN Peace Park dimulai dari 2 Oktober sampai 8 Oktober 2008. Festival diikuti 28 negara yang terdiri dari 51 tim dengan jumlah pendekar sebanyak 1210.

Makna Warna Sabuk Persinas ASAD

  • Tingkat I / Sabuk Putih / Siswa I
    Warna putih pada sabuk mempunyai makna lembaran putih dan bersih dengan tulus ikhlas, ridho dan suci. Bagi seorang calon pesilat untuk diberikan pengetahuan, ketrampilan dan sikap dasar tentang ilmu beladiri.
  • Tingkat II / Sabuk Hijau / Siswa II
    Warna hijau pada sabuk memberi makna kedamaian hati setalah diberikan pelajaran dasar tentang pengetahuan, ketrampilan dan sikap sehingga memberi keteduhan hati dan bangga dengan ilmu yang dimilikinya.
  • Tingkat III / Sabuk Hijau Strip Kuning / Asisten Muda
    Warna hijau yang memberikan kedamaian, kebahagiaan dan kesejahteraan serta dipersiapkan untuk menjadi pesilat yang berkualitas dan berbudi pekerti luhur yang dilambangkan strip kuning pada sabuk.
  • Tingkat IV / Sabuk Kuning / Asisten Madya
    Warna kuning melambangkan keluhuran budi pekerti (akhlaqul karimah) dan keagungan jiwa serta berkualitas, sehingga pesilat makin banyak ilmunya makin berbudi pekerti yang luhur.
  • Tingkat V / Sabuk Kuning Strip Biru / Asisten Utama
    Dengan budi pekerti yang luhur dan keagungan jiwa disertai cita-cita yang luhur, semangat belajar dan tabah dalam menghadapi tantangan yang dilambangkan dengan strip biru pada sabuk.
  • Tingkat VI / Sabuk Biru / Pelatih Muda
    Warna biru melambangkan semangat belajar yang tinggi, dengan percaya diri serta dapat menjaga martabat dan mampu menguasai serta mengendalikan diri walaupun banyak tantangan, rintangan dan halangan.
  • Tingkat VII / Sabuk Biru Strip Coklat / Pelatih Madya
    Dengan semangat dan cita-cita yang tinggi menjadikan percaya diri, selalu menegakkan kebenaran, kejujuran dan menghormati sesama insan.
  • Tingkat VIII / Sabuk Coklat / Pelatih Utama
    Warna coklat tua melambangkan sikap damai, bersahabat, selalu rendah hati dan senantiasa menegakkan kebenaran, kejujuran dan keadilan.
  • Tingkat IX / Sabuk Coklat Bintang Merah 1 / Guru Muda
    Bersikap damai dan bersahabat, ramah dan sopan, senantiasa menegakkan kebenaran.
  • Tingkat X / Sabuk Coklat Bintang Merah 2 / Guru Madya
    Senantiasa mengupayakan perdamaian dan persahabatan dengan sesame. Keramahan dan kesopanan ditingkatkan, dengan keberanian yang tinggi membela kebenaran.
  • Tingkat XI / Sabuk Merah / Guru Utama
    Merah melambangkan keberanian dalam membela kebenaran, berjiwa besar, mawas diri, pemaaf dan mengutamakan kepentingan umum dan dapat menjadi panutan.
  • Tingkat XII / Sabuk Merah Garis Tepi Emas / Guru Besar
    Berjiwa besar sebagai pendekar, bisa meramut dan membina serta sebagai pengayom.

    Referensi : wikipedia

Friday, May 3, 2013

Cara Membuat Widget Follow Keren Di Blog


Langsung saja kita menuju yang dituju, Berikut langkah-langkahnya :
  1. Login ke Dashboard
  2. Masuk ke Layout/Tata Letak
  3. Add Gadget >> HTML/JavaScript
  4. Masukkan kode di bawah, lalu Simpan

<style> #tbisose {
  list-style:none;
  text-decoration:none;
  font-size:0.9em;
  font-family:trebuchet ms,sans-serif;
}
#tbisose a {
  text-decoration:none;
  font-family:trebuchet ms,sans-serif;
}
#tbisose li {
  position:relative;
  height:38px;
  cursor:pointer;
  padding:0 !important;
}
#tbisose .facebook,
.googleplus,
.pinterest,
.rss,
.twitter {
  position:relative;
  z-index:5;
  display:block;
  float:none;
  margin:10px 0 0;
  width:210px;
  height:38px;
  border-radius:5px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit54xQHSdo5pMlygCA7w4-xYr2_uGLbhW3xcuASdObL9sljJxcTx_HHCZbJYO0X5GrSrQt_vx6S0GWyCAsXK4E4vUpocnb-ZC8Wn-fcWbRCvMIIPJruOZosTERD-movYG-RoCiJxbhgu0/s800/sprites.png) no-repeat;
  background-color:rgba(217,30,118,.42);
  -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  color:#141414;
  text-align:left;
  text-indent:50px;
  text-shadow:#333 0 1px 0;
  white-space:nowrap;
  line-height:32px;
  -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#tbisose li:after {
  position:absolute;
  top:0;
  left:50px;
  z-index:2;
  display:block;
  height:38px;
  color:#141414;
  content:attr(data-alt);
  line-height:32px;
}
#tbisose .icon {
  overflow:hidden;
  color:#fafafa;
}
#tbisose .facebook {
  width:32px;
  height:32px;
  background-color:rgba(59,89,152,0.42);
  background-position:0 0;
}
#tbisose .twitter {
  width:32px;
  height:32px;
  background-color:rgba(64,153,255,0.42);
  background-position:0 -33px;
}
#tbisose .googleplus {
  width:32px;
  height:32px;
  background-color:rgba(228,69,36,0.42);
  background-position:-3px -66px;
}
#tbisose .pinterest {
  width:32px;
  height:32px;
  background-color:rgba(174,45,39,0.42);
  background-position:0 -95px;
}
#tbisose .rss {
  width:32px;
  height:32px;
  background-color:rgba(255,102,0,0.42);
  background-position:-3px -126px;
}
#tbisose li:hover .icon,
.touch #tbisose li .icon {
  width:210px;
}
.touch #tbisose li .facebook,
#tbisose li:hover .facebook {
  background-color:rgba(59,89,152,1);
}
.touch #tbisose li .twitter,
#tbisose li:hover .twitter {
  background-color:rgba(64,153,255,1);
}
.touch #tbisose li .googleplus,
#tbisose li:hover .googleplus {
  background-color:rgba(228,69,36,1);
}
.touch #tbisose li .pinterest,
#tbisose li:hover .pinterest {
  background-color:rgba(174,45,39,1);
}
.touch #tbisose li .rss,
#tbisose li:hover .rss {
  background-color:rgba(255,102,0,1);
}
</style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> </ul>
     5. Ganti yang perlu diganti
Dan yang terakhir simpan dan lihat hasilnya..
Semoga Bermanfaat!

Thursday, May 2, 2013

Membuat Widget Label Tertentu dengan Satu Thumbnail

widget per label

Cara membuatnya adalah sebagai berikut :
  1. Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
    img.label_thumb:hover{background:#f7f6f6}
    .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
    ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
    Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
  6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan Google Code Anda sendiri atau gunakan kode script di bawah ini yang sudah saya ringkas di Google Code.
    <script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
  7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
    <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <script type="text/javascript">
    function recentpostslist(json) {
     document.write('<ul>');
     for (var i = 1; i < json.feed.entry.length; i++)
     {
        for (var j = 1; j < json.feed.entry[i].link.length; j++) {
          if (json.feed.entry[i].link[j].rel == 'alternate') {
            break;
          }
        }
    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
    var entryTitle = json.feed.entry[i].title.$t;
    var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
     document.write(item);
     }
     document.write('</ul>');
     }
    </script>
    <script src="http://firmanardyansyah.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://firmanardyansyah.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
    Keterangan :
    Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
    Warna merah : Ganti URL dengan URL blog anda.

    Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Cara Memasang Breadcrumb di Blogspot


Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

  • Seperti biasa anda harus login ke Blogger.
  • Langsung tuju Edit HTML.
  • Klik Expand Template Widget.
  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}
  • Setelah itu, cari kode seperti ini :
    <div class='post hentry'>
  • Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <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;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
    Simpan Template.