twitterfacebookgoogle pluslinkedinrss feedemail
Tampilkan postingan dengan label Desain Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Desain Blog. Tampilkan semua postingan

Senin, 04 November 2013

Tombol Demo dan Download Model Flat

Blog dengan content download akan terlihat lebih bagus jika dipasang tombol / button dengan sedikit bergaya, contohnya seperti pada trik blog kita kali ini memasang Tombol Demo dan Download Model Flat seperti yang sering kita lihat pada website penyedia content download.


yang tertarik untuk memasang Tombol Demo dan Download Model Flat, ikuti langkah-langkah berikut ini :
1.  Langsung saja pada Edit HTML template blog
2.  Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
.button{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.button li{display:inline;margin:0;padding:0;}
.button li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
.button li a:hover{background:#2980b9;}
3.  Kemudian SAVE Template
4.  Selanjutnya paste kode ini setiap anda akan membuat postingan (pada mode HTML)
<div style="text-align: center;">
<ul class="button">
<li><a href="#" target="_blank">Live Demo</a></li>
<li><a href="#" target="_blank">Download</a></li>
</ul>
</div>
READ MORE - Tombol Demo dan Download Model Flat

Senin, 16 September 2013

Membuat Artikel Rekomendasi Model Slide

Widged Recommended Post Slide-oud bloogger atau bisa dibilang widget rekomendasi artikel yang unik dan keren yang berada disudut bawah halaman blog sangat populer di kalangan blogger luar negeri, walaupun kebanyakan dipakai oleh pengguna wordpress saja. Widget rekomendasi bar (bukan rekomendasi facebook) ini cukup ringan dan tidak begitu berat. Cara membuatnya pun cukup mudah, hanya menambahkan gadget pada blog dan hanya menambahkan sedikit kode ke edit HTML template.


Seperti anda lihat diatas bahhwa tampilan sebuah widget rekomendasi slide out artikel adalah begitu simple dan sagat profesional. So ini akan sangat berguna untuk melengkapi aksesoris blog kamu agar tampak lebi keren.
Selain itu widget rekomendasi slide out memilki fungsi yang sangat bermanfaat menurut saya, karena selain tampilannya menarik, aksesoris blog yag satu ini mampu membuat pembaca bertahan lama pada blog kita. Apalagi jika blog telah memiliki related post / artikel terkait cepat loading.

Cara Membuat Rekomendasi artikel *Slide Out

Sebenarnya untuk membuat widget ini sangat sederhana bakan gampang sekali. Heran aja masih banyak saja yang belum berhasil menampilkan rekomendasi bar yang slide dibawah halaman artikel seperti ini.
Okey guys, Mari mulai mencoba. Ada 2 cara (Pilih salah satu):

A. Cara Pertama untuk meampilkan Rekomendasi Slide

Untuk cara ini kita memerlukan dua langkah untuk bisa menampilkan Rekomendasi Slide - out Blogger. berikut kedua langkah tersebut.
Tambahkan Gadget HTML
  • Masuk Ke akun Blogger anda
  • Klik Tata letak (rancangan) > tambah gadget > Pilih HTML/Javascricpt | masukkan kode source dibawah ini:
<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Anda Mungkin Perlu Baca ini</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://tipssahabat.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMjYaV5gAh8_vpzeTDyQC6z4zoFqQdOFpk1PZDh869szYyeKSlextdl8RPwJ0jZuyff5yjuxv16JzgSy6aHS-aOPcGaXiKC_114feIM0Jdzp-YnCeS3nFx5YDS-74q_bNT1Ob3Va65iY/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

  • Simpan
Sisipkan Ke dalam Template

  • Masuk ke Template > Edit > centang expand template
  • Jika sudah, langsung cari kode <div class='post-footer-line post-footer-line-1'> , atau jika tidak ada bisa juga kode <p class='post-footer-line post-footer-line-1'>. jika telah ditemukan salah satunya maka sekarang pastekan kode berikut tepat dibawah kode tersebut :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bpslidein_place_holder' style='display:none'/>
</div></b:if>

  • Selesai, coba lihat : apakah Rekomendasi Slide - out Blogger tampil?. untuk mengeceknya harus dalam halaman artikel bukan home.

B. Cara 2 membuat Rekomendasi Slide

Cara yang satu ini adalah Tutorial khusus blogger yang ggak mau repot-repot, cocok buat yang super sibuk dan tidak punya waktu untuk editing template.
  • Masuk Ke akun Blogger anda
  • Klik Tata letak (rancangan) > tambah gadget > Pilih HTML/Javascricpt | masukkan kode source dibawah ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='bpslidein_place_holder' style='display:none'/></div><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Anda Mungkin Perlu Baca ini</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://tipssahabat.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMjYaV5gAh8_vpzeTDyQC6z4zoFqQdOFpk1PZDh869szYyeKSlextdl8RPwJ0jZuyff5yjuxv16JzgSy6aHS-aOPcGaXiKC_114feIM0Jdzp-YnCeS3nFx5YDS-74q_bNT1Ob3Va65iY/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a></b:if>

  • Simpan dan selesai
Widget recommended post bergaya wordpress ini menampilkan random post atau artikel terkait, tidak ada salahnya kita mencobanya untuk memperindah blog kita, oke sobat blogger, Selamat Mencoba.
Sumber : Blog.Fispol
READ MORE - Membuat Artikel Rekomendasi Model Slide

Jumat, 13 September 2013

Menghilangkan "Showing Post With Label"

Menghilangkan "Showing Post With Label Your Label" atau "Tampilkan posting dengan label Label Anda" Papan pesan ini muncul saat kita klik sebuah label. Contoh seperti gambar dibawah



Bagi yang merasa risih dengan tampilan papan pesan label ini bisa saja kita hapus, Nah untuk menghapusnya ikuti langkah-langkah berikut :

1--> Login blogger
2--> Masuk ke Blogger Admin Page > Template > klick Edit HTML.
3--> Cari kode seperti dibawah ini
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

5--> dan, ganti dengan kode dibawah ini
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Selamat mencoba, semoga sukses
READ MORE - Menghilangkan "Showing Post With Label"

Menampilkan Judul Saja di Halaman Beranda dan Label

Halaman Utama (Homepage)  dan Halaman Label (Label Page) merupakan halaman yang menampilkan beberapa posting dengan ringkasan dan juga menampilkan gambar posting tersebut. Terkadang untuk membuka sebuah halaman utama atau halaman label waktu yang dibutuhkan cukup lama karena harus menampilkan gambar posting dengan ukuran tertentu (bila ada gambarnya). Tentu bagi kamu yang memiliki koneksi internet yang (maaf) agak lambat untuk membuka halaman label waktunya cukup lama apalagi kalau menampilkan lebih dari 10 posting yang mengandung gambar, sampai sedikit membuat kesal.. seperti saya tidak sabaran.. :d.  Untuk mengatasai masalah tersebut kita hanya sedikit memasukan beberapa Tag Conditional dan kode CSS sehingga pada waktu membuka halaman utama (homepage) dan halaman label hanya menampilkan judul posting yang akan mengurangi waktu loading ketika membuka halaman tersebut.


tampilan halaman Beranda / Home

Tampilan Halaman Label

Sebenarnya bukan hanya pada 2 halaman tersebut tetapi juga pada halaman arsip (archive page) dan halaman pencarian (search page).

Langkah langkah penerapanya:
> Login akun Blogger anda.
> Di halaman Dasbor, anda pilih Template.
> Kemudian pilih Edit HTML
> Cari kode <b:include data='post' name='post'/> lalu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>        
<a expr:href='data:post.url'>  
<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#333;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>
<data:post.title/></div></a>    
<b:else/>        
<b:include data='post' name='post'/>    
</b:if>
<b:else/>    
<b:include data='post' name='post'/>
</b:if>

Itulah sedikit tips untuk merubah Halaman Utama dan Halaman Label Hanya Tampil Judul Posting.
Semoga bermanfaat.
READ MORE - Menampilkan Judul Saja di Halaman Beranda dan Label

Kamis, 05 September 2013

Mengubah Older Post Menjadi Halaman Angka

Older Post atau Posting Lama merupakan sebuah link menuju postingan-postingan yang sudah ditulis. Jika anda lihat, di beberapa blog tidak ditemukan tulisan tersebut. Hal tersebut terjadi mungkin karena sengaja dihilangkan oleh pemilik blog tersebut, atau ia menggantinya dengan angka.
Memang, format angka lebih baik dari pada tulisan. Dengan format angka ini, pengunjung dapat lebih mudah meliha postingan-postingan kita sebelumnya.

Thumbnail akutulis.com

Jika ada beberapa dari antara sobat juga mau blog sobat seperti itu, langsung saja praktekkan tutorialnya di bawah......
1. Log in ke blog sobat
2. buka rancangan>Edit HTML
3. Cari kode ]]></b:skin> . Untuk mempermudah pencarian, tekan CTRL+F dari keyboard.
4. Masukkan kode dibawah ini tepat diatas kode ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

5. Jika sudah cari kode </body>.
6. Setelah ketemu, masukkan kode dibawah, tepat di atas kode </body>

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


7. Klik Simpan Template , dan cek hasilnya........ Good Luck
READ MORE - Mengubah Older Post Menjadi Halaman Angka

hrecipe microformat Gambar Posting dan Rating Bintang di Google v2

hrecipe microformat Gambar Artikel dan Rating Bintang v2 kali ini masih tetap dengan intinya yaitu menampilkan gambar artikel dan rating bintang pada hasil pencarian google. Dimana kita bisa mengedit berapa jumlah rating bintang dan berapa kali review/dilihat dengan sesuka hati. Pada versi ke-2 ini ada sedikit perubahan yaitu dari review/dilihat menjadi ulasan yang bekerja otomatis tergantung jumlah komentar suatu artikel (tidak termasuk komentar facebook). 
Contoh : Jika suatu artikel telah dilihat beberapa kali (umpamanya 350 review) tetapi tidak mempunyai komentar dari pembaca rating bintang dan gambar artikel tidak akan muncul pada hasil pencarian google tetapi otomatis akan digantikan dengan gambar profil.

dan jika suatu artikel mempunyai komentar minimal 2 komentar maka rating bintang dan gambar artikel otomatis akan ditampilkan pada hasil pencarian goolge. Perhatikan Gambar dibawah...


Jika anda tertarik ikuti langkah-langkah pemasangan hrecipe microformat Gambar Artikel dan Rating Bintang v2
1. Login blogger.com
2. Masuk pada menu Template >> Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
.photo{
  float:left;
  width:16px;
  height:16px;
  margin-right:5px;
  overflow:hidden;
}
4. Berikutnya jika anda berniat memasangnya dibawah posting cari kode <data:post.body/> dan letakkan kode ini dibawahnya
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.numComments != 0'>
    <b:if cond='data:post.numComments != 1'>
      <div class='hrecipe'>
        <b:if cond='data:post.thumbnailUrl'>
          <img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
        <b:else/>
          <img alt='Image' class='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKLIuoNhqagmtHttsDOuNFBgjZkilxyVmkGCA-zQrucdA_Ma92p3ovewHHT6lp5N8gsEgfDUvlDGXZXah1uSvhMmKqYC-Vwwk_iX5ibfu-UaBBUbzqkq2ofxOAwCDMILEV9uUIVYfEzQ8/s144/No%2520Image.jpg' title='Image'/>
        </b:if>
        Perihal: <span class='item fn'><a expr:href='data:post.url' expr:title='data:post.title' rel='tag'><strong><em><u><data:post.title/></u></em></strong></a></span>
        <span class='review hreview-aggregate'>
          <span class='rating'>
            Peringkat: <span class='average'>4.5</span>
            Balasan: <span class='count'><data:post.numComments/></span>
          </span> 
        </span>
      </div>
    </b:if>
  </b:if>
</b:if>
biasanya ada terdapat 4 kode <data:post.body/> bagi template yang memiliki read more, pastekan kode tersebut dibawah yang ke-3

untuk pemasangan pada kotak footer anda bisa meletakkan kode tersebut dibawah kode post-footer yang ke-2

5.  Simpan template dan lihat hasilnya.

Penjelasan: hrecipe microformat Gambar Artikel dan Rating Bintang v2 pada hasil pencarian google ini bekerja setelah artikel tersebut mempunyai minimal 2 komentar, tapi tidak akan bekerja jika kita sendiri yang membuat komentar
READ MORE - hrecipe microformat Gambar Posting dan Rating Bintang di Google v2

Selasa, 03 September 2013

hrecipe Gambar Posting dan Rating Bintang di Google

Jika kita mencari sebuah artikel di google disana kita akan melihat beberapa hasil pencarian dari berbagai sumber, biasanya yang pertama adalah yang terbaik dan selalu menjadi target utama para penelusur. Tetapi disaat ini setelah maraknya gambar postingan dan rating bintang dimunculkan pada hasil pencarian google selalu menjadi target utama para penelusur karena memang terlihat lebih menarik. 


Jika anda tertarik ingin menampilkan gambar artikel dan rating bintang pada pencarian google, silahkan ikuti langkah-langkah dibawah ini

1.Login ke blogger
2. Pada dashboard, pilih blog anda lalu klik Template > Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut ini diatasnya
 .hrecipe{
        display:block;
        width:auto;
        background:#FFFFFF;
        border:1px solid #000000;
        padding:0;
        margin:30px 0 10px 0;
        font:normal 12px Arial;
        color:#444;
        }

.hrecipe .kontainer{padding:5px;}
.hrecipe h4{
        background:#01b8c0;
        border:none;
        border-bottom:1px solid #000000;
        color:#444;
        text-transform:normal;
        font:bold 12px Arial;
        padding:5px 10px;
        margin:0 0 0 0;
        display:block;
        }

.hrecipe h4 a{color:#FEEA83;}
        .hrecipe img{
        width:120px;
        height:88px;
        margin:0 10px 0 0;
        float:left;
        border:0px solid #000000;
        padding:2px;
        background:#01b8c0;      
        }
4.  Cari kode <data:post.body/> dan letakkan lagi kode berikut dibawahnya, biasanya terdapat 4 kode ini bagi yang menggunakan read more, cobalah salah satu
    <div class='hrecipe'>
      <h4><a expr:href='data:blog.homepageUrl'><data:post.author/></a> - <data:post.title/></h4>
    <div class='kontainer'>
    <img alt='thumbnail' class='photo' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
      Title: <span class='item' style='color:green;'><span class='fn'><data:post.title/></span></span><br/>
    Posted by:<span class='author' style='color:red;'><data:post.author/></span><br/>
    Published :<span class='published'><data:post.timestampISO8601/></span><br/>
    <span class='review hreview-aggregate'>
    <span class='rating'>
    Rating: <span class='average'>5</span><br/>
    Reviewer: <span class='count'>3592</span> Reviews<br/></span></span>
    <span class='summary'><data:post.title/></span>
    </div>
      </div>
5.  Simpan Template dan lihat hasilnya
READ MORE - hrecipe Gambar Posting dan Rating Bintang di Google

Senin, 02 September 2013

Cara Menghilangkan Read More Dari Laman/Page Blog

Hai sobat blogger, pada kesempatan kali ini saya akan share ke sobat semua bagaimana caranya menghilangkan tombol read more otomatis pada Page atau Halaman Blog sobat semua. disini, kita tidak menghilangkan Tombol read more pada Artikel atau Postingan Blog, Tetapi yang akan kita hilangkan yaitu tombol read more / baca selengkapnya yang ikut muncul di halaman blog. Ini sangat riskan, mengingat bahwa tombol read more yang ada pada page atau halaman blog sobat tersebut membuat isi halaman konten blog pada halaman tersebut tidak akan bisa dilihat oleh pembaca. 




Nah saya akan mencoba bersama sobat tentunya untuk Menghilangkan tombol atau tulisan Read More / Baca Selengkapnya pada Halaman Blog sobat. 
Disini kita akan menggunakan condition tag <b:if... untuk menghilangkan read more / baca selengkapnya dari halaman blog
.

Pada tutorial ini sangat dibutuhkan pemahaman dan analisa juga karena mengingat sistem read more disetiap blog itu belum tentu sama, tetapi metode nya tetap sama saja.

1. Masuk Dashboard Blogger > Template > Edit HTML > Centang Expand Widget Templates seperti biasa.
2. Mari kita cari javascript read more / baca selengkapnya yang digunakan untuk memotong artikelnya, caranya sobat cari kode (gunakan CTRL+F untuk mencari kode) yang kira-kira seperti ini:
var thumbnail_mode
kode lengkapnya biasanya seperti kode dibawah ini:
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 250; img_thumb_height = 100; img_thumb_width = 110; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); if(img.length<=0) { imgtag = '<div class="thumb-post"><span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDVzyppt2IMVtlK74_KW-qgr71B7KhgzLvSFmOlnQ0hwcbb_ixZfAWPyU-9bHyqoDyAja1yvI3SrgLo_wWln89SGMd0pGeCM42if4h6x05NpCnwnQyZcOlpniDRVp6tRSLclcxtx9_oMK/s0/diary.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; var summ = summary_noimg; } if(img.length>=1) { imgtag = '<div class="thumb-post"><span style="float:left;margin-right:15px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>
3. Ge mana?? ketemu? Kalau sudah ketemu kode yang kira-kira seperti diatas.
Selanjutnya letakkan kode berikut tepat diatas kode lengkap pada langkah nomer 2 tadi
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
lalu letakkan juga kode berikut tepat dibawah kode lengkap pada langkah nomer 2 tadi
</b:if></b:if>
sehingga hasilnya kira-kira seperti ini
<b:if cond='data:blog.pageType != &quot;item&quot;'> <
b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 250; img_thumb_height = 100; img_thumb_width = 110; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); if(img.length<=0) { imgtag = '<div class="thumb-post"><span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDVzyppt2IMVtlK74_KW-qgr71B7KhgzLvSFmOlnQ0hwcbb_ixZfAWPyU-9bHyqoDyAja1yvI3SrgLo_wWln89SGMd0pGeCM42if4h6x05NpCnwnQyZcOlpniDRVp6tRSLclcxtx9_oMK/s0/diary.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; var summ = summary_noimg; } if(img.length>=1) { imgtag = '<div class="thumb-post"><span style="float:left;margin-right:15px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> </b:if></b:if>
Oke sobat, sampai disini kita sudah berhasil membuat agar halaman / page blog tidak terpotong oleh read more. Nah, berikutnya kita akan menghilangkan tombol read more nya dari halaman / page blog nya.. 
 4. Cari kode yang kira-kira seperti ini
<span class='rmlink'
atau kode lengkapnya kira-kira seperti ini:

Catatan, Setiap Blog Mungkin Berbeda-beda.
<span class='rmlink' style='float:right;font-size:13px;font-weight:bold;'><a expr:href='data:post.url'>Read more</a></span>
5. Kalau sudah ketemu, letakkan kode berikut tepat diatas kode lengkap pada langkah nomer 4
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
lalu letakkan kode berikut tepat dibawah kode lengkap pada langkah nomer 4
</b:if></b:if>
sehingga hasilnya akan jadi seperti ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <span class='rmlink' style='float:right;font-size:13px;font-weight:bold;'><a expr:href='data:post.url'>Read more</a></span> </b:if></b:if>
6. Klik simpan template, dan lihat halaman / page blog sobat apakah read more nya sudah hilang atau belum.. 
Jika sudah.. Ya Alhamdulillah.. 
Semoga Berkenan dan bermanfaat.
READ MORE - Cara Menghilangkan Read More Dari Laman/Page Blog

Menghilangkan Post Footer Dari Halaman Home

Menghilangkan Post Footer Dari Halaman Home - Beberapa template blogspot yang menggunakan read more masih ada yang menampilkan elemen post footer sehingga tampilan blog pada halaman depan terasa kurang enak dipandang, dan kalau template sudah terpasang read more maka semua elemen sudah harus 'terbungkus' oleh read more tersebut.

Contoh elemen post footer di bawah read more yang masih tampil di halaman depan blog dan belum 'terbungkus' oleh read more




Lalu bagaimana sembunyikan post footer di bawah read more seperti yang ada di gambar atas?

Cara sembunyikan post footer di bawah read more

  1. Sebelumnya teman-teman blogger harus login ke akun blogger terlebih dahulu
  2. Lakukan cara berikut secara berurutan :
  3. Pada edit HTML cari kode <div class='post-footer'> , ini biasanya ada 2 pada template
  4. Tambahkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> diatas <div class='post-footer'> yang ke-2
  5. Tambahkan kode penutup </b:if> dibawah kode penutup <div class='post-footer'>. Hati-hati jangan salah meletakkan kode penutupnya karena kebanyakan teman-teman blogger mengalami kesalahan disini
  6. Hasil kode lengkapnya seperti berikut
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/>
                <b:if cond='data:post.authorProfileUrl'>
                  <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                    <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                    <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                      <span itemprop='name'><data:post.author/></span>
                    </a>
                  </span>
                <b:else/>
                  <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                    <span itemprop='name'><data:post.author/></span>
                  </span>
                </b:if>
            </b:if>
          </span> <span class='post-timestamp'>
            <b:if cond='data:top.showTimestamp'>
              <data:top.timestampLabel/>
            <b:if cond='data:post.url'>
              <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
              <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
            </b:if>
            </b:if>
          </span> <span class='post-backlinks post-comment-link'>
             <b:if cond='data:blog.pageType != &quot;item&quot;'>
               <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                 <b:if cond='data:post.showBacklinks'>
                   <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
                 </b:if>
               </b:if>
             </b:if>
           </span> <div class='post-share-buttons goog-inline-block'>
            <b:if cond='data:post.sharePostUrl'>
              <b:include data='post' name='shareButtons'/>
            </b:if>
          </div> </div>

          <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> <span class='post-comment-link'>
            <b:if cond='data:blog.pageType != &quot;item&quot;'>
              <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                <b:if cond='data:post.allowComments'>
                  <b:include data='post' name='comment_count_picker'/>
                </b:if>
              </b:if>
            </b:if>
          </span> <span class='post-icons'>
            <!-- email post links -->
            <b:if cond='data:post.emailPostUrl'>
              <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                  <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
              </a>
              </span>
            </b:if>

            <!-- quickedit pencil -->
            <b:include data='post' name='postQuickEdit'/>
          </span> </div>

          <div class='post-footer-line post-footer-line-3'><span class='reaction-buttons'>
            <b:if cond='data:top.showReactions'>
              <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
                <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
                  <span class='reactions-label'>
                  <data:top.reactionsLabel/></span>&#160;</td>
                <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
               </tr></table>
            </b:if>
          </span> <span class='post-location'>
            <b:if cond='data:top.showLocation'>
              <b:if cond='data:post.location'>
                <data:postLocationLabel/>
                <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
              </b:if>
            </b:if>
          </span> </div>
          <b:if cond='data:post.authorAboutMe'>
            <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
              <b:if cond='data:post.authorPhoto.url'>
                <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
              </b:if>
              <div>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </div>
              <span itemprop='description'><data:post.authorAboutMe/></span>
            </div>
          </b:if>
        </div></b:if>
      </div>
    </b:includable>
  7. Jika teman-teman blogger ragu dalam menambahkan/meletakkan kode penutupnya, silahkan pratinjau template terlebih dahulu. Jika tidak ada error, silahkan simpan.
Saya kira mudah kok untuk menghilangkan atau Menghilangkan Post Footer Dari Halaman Home dan memasukkannya ke dalam read more.
READ MORE - Menghilangkan Post Footer Dari Halaman Home

Jumat, 30 Agustus 2013

Pemasangan Komentar Facebook dan Blog Yang Berdampingan

Memasang kolom komentar facebook di blog ternyata sangat membantu. Bukan cuma untuk pengunjung blog, tapi juga bagi pemilik blog itu sendiri. Tapi ada masalah lain ketika kolom tersebut dipasang berurutan (bawah atas) dengan kolom komentar bawaan blogger. Memakan ruang yang mengakibatkan halaman blog berambah panjang.

Ada trik sederhana agar kolom komentar facebook tampil di blog, tapi tidak memakan banyak tempat, karena diletakkan berdampingan dengan kolom komentar bawaan blogger.

Untuk memasang kolom komentar facebook dan blogger berdampingan, yang harus dipersiapkan yaitu, ID facebook kamu dan ID aplikasi facebook.


Sekarang kita langsung pada cara memasangnya :
1-Login ke akun blogger
2-Pilih blog yang ingin dipasang komentar facebook
3-Klik Template dan lanjutkan..
4-Edit HTML dan jangan lupa untuk centang Expand Widget Templates.
5-Cari kode ]]></b:skin> (tekan F3 untuk mempermudah pencarian kode HTML nya)
6-Letakkan kode berikut ini diatas kode ]]></b:skin>.

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
7-Lalu cari kode <head> masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.
<meta property="fb:admins" content="ID Facebook"/>
<meta property="fb:app_id" content="App ID"/>
Ganti yang berwarna biru dengan ID facebook dan App ID facebook kawan sedusun. Caranya lihat disini : Cara Agar Komentar Facebook Di Blog Ada Pemberitahuan.

8-Cari kode </head>, lalu letakkan kode berikut ini diatasnya
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
9-Lanjutkan dengan mencari kode <div class='comments' id='comments'>. Biasanya didalam template akan terdapat dua kode <div class='comments' id='comments'>.

10-Letakkan kode berikut ini dibawah dua kode <div class='comments' id='comments'>. (Pasang dibawah kode <div class='comments' id='comments'> yang pertama dan kedua)
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://s-static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Angka 5 menunjukkan jumlah komentar yang tampil, sedangkan angka 600 menunjukkan ukuran lebar kolom komentar facebook. Ganti atau sesuaikan dengan keperluan kawan sedusun.

Untuk mempermudah mencari dua buah kode <div class='comments' id='comments'>, tekan F3, tuliskan kode tersebut. Tambahkan angka 1 di belakang kode yang dicari tadi (contoh : <div class='comments' id='comments'1>), dan langsung letakkan kode komentar facebook dibawah kode yang ditemukan pertama. Kembali ke pencarian menggunakan F3 tadi dan cari <div class='comments' id='comments'>. Letakkan kode komentar facebook. Dan kembali lagi ke kolom pencarian menggunakan F3, cari <div class='comments' id='comments'1>, hapus angka 1 dan klik "Save Template".

Selesai, bila semua langkah diikuti dengan benar dan kolom komentar facebook belum juga tampil di blog kawan sedusun. Tutup dulu browser, atau log out sekalian. Buka kembali/login ke akun blogger. Buka blog yang sudah dipasang komentar facebook berdampingan dengan komentar blogger/blogspot. Di kolom komentar sudah tampak di halaman blog kawan sedusun, lengkap dengan pemberitahuan bila ada pengunjung yang memberi komentar melalui akun facebook.

Sekedar tambahan : Bila kawan sedusun memang sudah niat ingin memasang komentar fabeook yang berdampingan dengan kolom komentar blogger. Baca dan ikuti cara diatas disetiap langkahnya. Akan lebih baik jika sambil membaca caranya, kawan sedusun sambil praktek di blognya. Selain menghindari ada langkah yang terlewat, cara ini juga efektif untuk mempercepat proses pemasangan kolom komentar facebook di blog kawan sedusun.

Semoga tulisan saya bisa dipahami dengan mudah dan bisa bermanfaat untuk kawan sedusun semuanya.
READ MORE - Pemasangan Komentar Facebook dan Blog Yang Berdampingan

Kamis, 29 Agustus 2013

Menampilkan Widget Pada Halaman Tertentu

Ketika melakukan setting desain blog, terkadang kita terkendala dengan banyaknya widget yang ditampilkan, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang. Dalam kasus lain lagi, terkadang kita hanya ingin widget tertentu hanya muncul di halaman spesifik, baik homepage, halaman statis, maupun halaman posting saja. Dulu saya pernah berbicara mengenai bagaimana menyembunyikan sidebar Blogger di halaman tertentu, dengan menggunakan conditional tags dan CSS (display), dan jika yang diinginkan hanya untuk menyembunyikan satu atau beberapa widget, maka tentu kurang tepat jika diterapkan. So, dalam kesempatan ini, saya ingin berbagi mengenai bagamana menampilkan atau menyembunyikan salah satu atau beberapa widget dalam halaman tertentu, dan menampikannya pada jenis halaman lain.

Konsep Hack Menampilkan Widget Pada Halaman Tertentu

Cara ini sebenarnya masih sama dengan artikel yang sebelumnya sudah saya sebutkan, yaitu menggunakan conditional tags (b if), salah satu tag XML Blogger, untuk memberikan perintah agar suatu elemen ditampilkan pada bagian/halaman tertentu saja dan menyembunyikannya pada bagian/halaman lain.  Conditional (if) juga dikenal penggunaanya pada PHP, dan juga dikenal dalam bahasa Inggris (if clause, conditional sentence) hehehehe..... Bedanya dengan cara sebelumnya, cara yang saya tawarkan ini tidak akan menggunakan CSS, melainkan menggunakan conditional tags langsung pada elemen yang hendak diberikan perintah, yang dalam hal ini adalah elemen-elemen widget.

Langkah-langkah Menampilkan Widget Pada Halaman Tertentu

1. Mencari ID Widget
Sebelum memberikan conditional tags, anda harus mengetahui ID widget yang hendak ditampilkan pada halaman tertentu. Cara mencarinya sangat mudah:
a. Ada dua cara untuk mengakses editor widget (sebenarnya ada 3, yaitu melalui edit HTML, tapi cara ini akan lebih rumit:
- Jika anda dalam kondisi login Blogger, anda dapat langsung mengakses "quickedit" langsung dari halaman blog, quickedit adalah tool untuk mengedit widget secara langsung, letaknya biasanya adalah di bagian pojok kanan bawah widget, berupa ikon obeng dan kunci (screwdriver and wrench). Klik icon pada widget yang diinginkan dan akan muncul pop-up window dimana anda dapat mengedit konten widget.
- Atau akses editor widget melalui halaman "Layout", lalu klik link "edit" di salah satu bagian widget. Kemudian akan muncul pop-up window.
b. Lihat di bagian URL/address di browser pada halaman pop up window tersebut. Letak ID widget berada di bagian akhir URL (geser URL ke kanan). Perhatikan contoh gambar berikut:
 
d. Simpan Id Widget tersebut, misalnya dari contoh di atas, Id widget yang hendak saya edit adalah "HTML11".
2. Memberikan Conditional Tags Pada Elemen Widget
Untuk menampilkan widget di halaman tertentu, anda harus menambahkan conditional tags (b if cond) pada elemen widget yang diinginkan. Berikut langkah menambahkannya sesuai dengan contoh widget yang sudah disampaikan di atas:
a. Masuk ke halaman template (Dashboard > Template)
b. Klik "Edit HTML" > Proceed.
c. Jangan lupa klik/centang "Expand Widget Templates" untuk menampilkan seluruh elemen widget di dalam editor.
d. Tekan CTRL+F, masukkan ID widget yang diinginkan yang sebelumnya telah dicari dan dipersiapkan. Dalam contoh ini saya akan menggunakan id widget "HTML11" sebagai contoh dan berikut kurang lebihnya elemen widget sobat:
 
e. Kemudian tambahkan conditional tag setelah <b:includable id='main'> dan tag penutupnya sebelum </b:includable>. Berikut conditional tags berdasarkan jenis halaman dan cara menambahkannya, perhatikan tag berwarna merah dan itulah yang harus ditambahkan:
Cara Menampilkan Widget Hanya di Halaman Utama/Indeks (Homepage)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Posting

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Statis

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Salah Satu Halaman (Berdasarkan URL)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

f. Setelah conditional tags ditambahkan, save template.

Jika ingin melakukan hal yang sama pada beberapa widget, anda harus melakukan dan mengulang cara yang sama seperti di atas: cari ID widget, cari elemen widget sesuai ID di edit HTML, dan masukkan conditional tags berdasarkan jenis halaman ke dalam elemen widget. Save and Done.
Semoga bermanfaat and have a nice Blogging.
Sumber Materi : Buka Rahasia Blogspot
READ MORE - Menampilkan Widget Pada Halaman Tertentu

Rabu, 28 Agustus 2013

Membuat Artikel Terkait Bergambar/Thumbnail

Artikel terkait pastinya kamu sudah tau dong, artikel terkait atau related post adalah artikel yang saling berhubungan atau yang di kelompokan di dalam label blog kamu, Dengan memasang artikel terkait ini juga kita dapat menambah jumlah pageview blog karna bukan tidak mungkin pengunjung akan melihat juga artikel terkait tersebut yang mungkin berhubungan dengan artikel kamu.

Sebelumnya saya juga telah menulis tentang Cara Membuat Artikel Terkait Dengan Scroll tapi untuk tulisan sekarang ini saya ingin menjelaskan Bagaimana Cara membuat artikel terkait dengan gambar atau related post thumbnail untuk yang belum tau bagaimana bentuk atau penampakan nya silahkan lihat di bawah postingan ini.


Langkah Pemasangan

1. Login ke blog kamu
2. Klik Template > Edit HTML centang Expand Template Widget
3. Cari </head> Copy code di bawah ini lalu paste kan tepat di atas </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
4. Selanjutnya Cari <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/> Biasa nya terdapat masing-masih 2 buah code di atas tersebut di dalam template, kamu letakan saja di bagian yang pertama namun bila tidak bisa coba saja satu per satu. Lalu kamu copy code di bawah ini dan paste kan diatas code <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Baca juga Artikel Terkait yang mungkin kamu cari&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
5. kalau sudah jangan buru-buru di simpan, klik Pratinjau dulu untuk mengurangi kesalahan bila saja terjadi kesalahan dalam penempatan. kalau tidak ada pesan error baru kamu Simpan atau Ok.
6. Selesai,
sekarang coba kamu buka salah satu artikel untuk melihat apakah pekerjaan kamu berhasil atau tidak.

Silahkan ganti var maxresults=5; untuk jumlah artikel yang ingin di tampilkan.

Ok mungkin segitu aja dulu cara membuat artikel terkait dengan gambar (related post thumbnail) semoga berhasil dan bermanfaat. kalau ada pertanyaan silahkan tinggalkan komentar dibawah.
READ MORE - Membuat Artikel Terkait Bergambar/Thumbnail

Membuat Related Post Terindex Google

Membuat Related Post Terindex Google -  Cara Baru Membuat Artikel Terkait dibawah Posting kali ini sangat berbeda dengan bertambahnya index google. Suatu cara baru yang harus kita terapkan pada blog yang kita punya jika dalam templete yang kita gunakan tidak ada related post / artikel terkait ini.
Fungsi dari memasang artikel terkait dalam setiap posting mempunyai pengaruh yang besar terhadap jumlah pageview setiap pengunjung. Bisa dibayangkan jika satu orang pengunjung blog anda membuka 2-4 artikel anda maka trafiik pun akan meningkat dan ini semakin membuat website / blog anda lebih disukai oleh search engine seperti google.
Jika anda tidak terlalu percaya dengan apa kata saya diatas, perhatikan sekarang dengan apa yang terjadi pada blog saya ini. Lihat pada widget Statistik Blog dan perhatikan aplikasi Histat saya yang menunjukkan counter Visitor dan Page View. Jika dihitung perbandingan antara keduanya adalah 1:4. sehingga dapat disimpulkan, pengunjung blog saya ini rata – rata membuka 4 halaman artikel setiap berkunjung. Tentunya selain artikel terkait yang saya pasang, saya juga Membuat Recent Post / Artikel yang terbaru saya terbitkan.
Jika anda tertarik ingin meningkatkan page view seperti saya tersebut, maka simak saja langkah dalam membuat artikel terkait dibawah ini karena sangat mudah dilakukan.

Cara membuat Related Post Artikel Terkait :

1. Login ke Akun Blog Anda, dalam hal ini blogger karena saya menggunakan blogspot
2. Klik Templete,  lalu pilih Edit HTML
3. Kemudian anda cari kode <data:post.body/>,
Gunaka CTRL+F agar pencarian lebih Mudah dan jika menemukan kode tersebut lebih dari satu, gunakan kode yang ke-2 dari atas

4. Copy-paste kode berikut ini di bawah kode <data:post.body/> yang sudah saya jelaskan pada point nomor 2
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
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>
5. Selanjutnya cari kode ]]></b:skin>
6. Copy-paste semua code berikut ini tepat diatasnya kode ]]></b:skin>
.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}
7. Klik Save/Simpan Templete

KETERANGAN TAMBAHAN:
*ARTIKEL TERKAIT, = bisa diganti sesuai keinginan. misal: Related Post, Baca Juga, Read more ataupun yang lain terserah
*maxNumberOfPostsPerLabel = 50;  = jumlah posting atau artikel terkait yang ingin Anda tampilkan
*maxNumberOfLabels = 3;  = jumlah label terkait yang ingin ditampilkan
*background-color: #F2F2F2; = warna background kotakan artikel terkait dan bisa diganti sesuai selera
*background-color: #EFFBEF; = warna background saat kursor menyorot olom tersebut
*http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png = icon didepan link
Sekian yang bisa saya bagikan dari saya mengenai Cara Baru Membuat Artikel Terkait dibawah Posting  pada kesempatan kali ini. semoga membantu dan bermanfaat bagi anda semua. Saya ucapkan terima kasih karena sudah berkunjung ke blog yang sederhana ini.
READ MORE - Membuat Related Post Terindex Google

Membuat Breadcrumb Yang Mudah Terindex Om Google

Cara Membuat Breadcrumbs pada postingan artikel sebenarnya sangat mudah. Breadcrumbs ini adalah sebuah teknik yang mulai menjadi trend sejak tahun 2009. Breadcrumbs atau "remah roti" adalah istilah yang sering digunakan oleh orang barat untuk hal-hal yang membantu mereka menelusuri posisi mereka dari suatu titik awal.

 
Banyak pelaku SEO meyakini bahwa teknik breadcrumbs ini membantu googlebot untuk lebih cepat mengenali struktur dari blog, karena halaman-halaman yang berada pada hirarki atas akan mendapat lebih banyak aliran poin dibandingkan halaman-halaman yang lebih di bawah hirarki.
Secara teknis saya meyakini bahwa teknik breadcrumbs ini membawa efek positif bagi SEO, karena bagaimana pun link antar halaman itu selalu memberi efek positif dalam aliran pagerank. Bagi yang ingin memasang breadcrumbs bisa mengikuti prosedur berikut:
  • Masuk ke akun blogger saudara
  • Pilih menu TEMPLATE
  • Simpan dulu Full Template saudara dengan mengklik tombol Cadangkan/Pulihkan
  • Klik tombol EDIT HTML
  • Buka semua kode template. Caranya, klik di sembarang tempat di dalam kode. Tekan CTRL+A, lalu tekan CTRL+C, lalu tekan DEL, dan terakhir paste dengan menekan CTRL+V.... Semua kode akan terbuka penuh....
  • Klik di antara kode HTML, lalu tekan CTRL+F untuk membuka kotak pencarian. Cari kode ]]></b:skin
  • Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  • Setelah itu cari kode seperti di bawah:
<b:includable id='main' var='top'>
  • Ganti kode di atas dengan kode di bawah
<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'/>
READ MORE - Membuat Breadcrumb Yang Mudah Terindex Om Google