Minggu, 01 Juli 2012

Cara memasang komentar fb di blog

memasang komentar fb di blog susah-susa gampang, namun disini kang salman akan sedikit berbagi tips dengan Anda dan membuat memasang komentar fb sangan mudah dan cepat. Dengan cara yang sederhana blog Anda dapat memiliki komentar fb eperti yang berada di kucoba.com ini.

Cara Membuat Komentar Facebook Di Blog

Mau tau caranya??
1. Login Blogger
2. Pilih Rancangan
3. EDIT HTML
4. Centang tulisan Expend Widget
5. Car kode yang mirip di ibawah ini :


</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>
Jika sudah ketemu tambahkan kode komentar fb ini di attas </b:includable> :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if> 
Hasilnya seperti ini sob :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/><script src=' http://connect.facebook.net/en_US/all.js#appId=xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='2' width='477'/></b:if></b:includable><b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>
Tulisan yang kang salman tandai biru sesuaikan dengan lebar main posting Anda.  Nah sahabat kucoba, mudah bukan? demiianlah cara gampag memasang komentar fb di blog semoga bermanfaat.

Widget Related Post Unik Dengan Summary (Deskripsi+Image)

Widget Related Post Unik Dengan Summary (Deskripsi+Image)
Widget Related Post Unik Dengan Summary (Deskripsi+Image) - Hallo selamat malam sahabat kucoba! Malam ini kang salman akan mengenalkan sebuah widget blog terbaru untuk artikel berkaitan. Berbeda dengan versi sebelumnya yang pernah kang salman ulas yaitu Related Post With Icon for Blogger dan Membuat Related Post Dengan Fungsi Scroll. Kali ini widgetnya banar-benar unik dimana pengunjung tidak hanya melihat judul atau fotonya saja tetapi mereka juga bisa membaca sekilas terlebih dahulu sebelum memutuskan untuk mengklik link / artikel tersebut.


Sebenarnya widget ini lebih tepat di katakan label thumb.
Mau Tau Cara Pasangnya?
Langsung aja:

Langkah1:
1. Login Blogger  >  Rancangan >  Edit Template  >  Copy kode berikut dan simpan di atas </head>

<style>
#related_posts {
}
#related_posts h4 {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: #333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    margin: 0 0 5px;
    padding: 5px 10px;
background:#ccc;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 0px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #ccc;
background:#f0f0f0;
margin: 0 0 5px;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #ccc;
width: 55px;
height: 55px;
background:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 165;
var morelink = "readmore";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]>
</script>
Langkah 2
Simpan kode ini di bawah <data:post.body/>
<div id="related_posts">
<h4>Related Posts</h4>
<script src="/feeds/posts/default/-/Widget?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50" type="text/javascript">
</script>
<ul id="relpost_img_sum"><script type="text/javascript">
relatpost();
</script> </ul>
</div>

Keterangan:
Tulisan warna merah adalah nama label yang ingin di tampilkan.

var relmaxposts = jumlah artikel yang di tampilkan
var numchars = panjang summary (deskrisi yang di tampilkan)

width: 55px; = ukuran gambar
height: 55px; = ukuran gambar

Cara paling mudah adalah dengan mengcopy semua kode di atas ke dalam widget di sidebar kita
1. Pilih Rancangan > Tambah Widget  >  Pilih HTML/Javascript
2. Paste semua kode di atas baik langkah1 dan langkah2
3. Simpan widget dan lihat hasilnya.

Semoga bermanfaat dan silakan komentar sesuai topik.

Scroll Otomatis Pada Blockquote

Selamat malam sobat setia ruki-zone. Semoga malam hari ini semua sobat ruki-zone tetap dalam keadaan sehat tanpa kekurangan sesuatu apapun.

Sudah lama rasanya ruki-zone tidak membuat postingan baru ya sobat. Alhamdulillah pada malam hari ini ruki-zone akan membuat postingan yang berisikan tentang membuat/memasang scroll secara otomatis pada blockquote seperti yang saya terapkan pada blog ini.

Sedikit penjelasan mengenai blockquote bagi sobat-sobat ruki-zone yang mungkin masih bingung dengan maksu dari blockquote, terutama buat sobat ruki-zone yang baru mengenal dunia blogging.

Blockquote adalah tampilan yang biasa digunakan untuk menandai suatu kalimat atau apa saja yang di anggap pening dalam suatu postingan tersebut agar mudah dikenali, dsb. Penggunaannya seperti yang ada di ruki-zone ini, yaitu sebagai tempat untuk memuat postingan yang berupa kode-kode sript, css, html. dsb. Namun itu semua tergantung dari masing-masing individu dalam penggunaanya.

Mungkin itu saja penjelasan singkat yang bisa saya utarakan mengenai blockquote dan bagi sobat ruki-zone yang masih bingung mungkin karena kalimat saya tidak jelas bisa lihat pada postingan pada blog ini yang berisikan tips 'n trik blogging karena disana sobat akan menjumpai serangkai kode script yang saya tulis menggunakan blockquote.

Nah, sekarang kita kembali kepada pembahasan, yaitu membuat scroll pada blockquote. Penggunaan scrolll pada blockquote ini dimaksudkan untuk mengefisienkan ruang tulis untuk kalimat atau kode script yang mungkin terlalu panjang sehingga bisa menghemat ruang posting blog tersebut.
Seperti yang sobat tahu bahwa template blog yang default atau yang ada tersebut tidak melengkapi dirinya dengan scroll pada blockquotenya. Mungkin ada beberapa template saja, tapi saya yakin itu sangat sedikit, karena dari beberapa template yang pernah saya pakai tidak ada yang memberikan fasilitas tersebut.

Jadi dengan pemberian scroll secara otomatis tersebut sobat tidak akan kerepotan lagi ketika membuat postingan script atau apa saja yang menggunakan blockquote yang terlalu panjang karena harus memasang kode scrollnya secara manual yang bisa dipastikan akan menyita waktu sobat.

Kemudian yang uniknya lagi, kali ini sobat tidak hanya bisa memasang scroll secara otomatis saja melainkan bisa mengatur panjang dari scroll tersebut. Misalnya sobat menjadikan panjang scrool tersebut 200px, maka ketika script ata postingan sobat yang menggunakan blockquote tersebut panjangnya melebihi 200px maka secara otomatis scroll tersebut akan berjalan/terpasang dengan sendirinya.

Berikut kode yang harus sobat tambahkan pada template yang sobat gunakan.
overflow:auto;
max-height:400px;
Silahkan sobat tambahkan kode tersebut pada kode blockquote pada template sobat masing-masing (setiap template kodenya berbeda-beda). Untuk contoh bisa lihat di bawah ini.
blockquote {overflow:auto;
max-height:100px;
......................}
Untuk pengaturan tinggi scroll tersebut silahkan ganti kode yang berwarna biru tersebut, silahkan sesuaikan dengan keinginan sobat masing-masing.

Jika sobat tidak menemukan ada banyak tulisan blockquote pada template sobat, silahkan sobat pilih yang pertama karena biasanya kode pertama tersebut merupakan kode dasarnya. Dan sekali lagi yang perlu diingat adalah bahwa kode setiap template berbeda-beda.

Dan apabila sobat ingin mencoba merubah tampilan blockquote template blog sobat mungkin postingan mengenai membuat desain blockquote untuk blogspot ini bisa menjadi salah satu rujukan bagi sobat.

Demikian postingan kita kali ini.
Semoga bisa bermanfaat untuk kita bersama.

Wassalam.
 

G-Boy | Bloger Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger