Showing posts with label thumbnail. Show all posts
Showing posts with label thumbnail. Show all posts

Monday, December 5, 2016

Cara Membuat Memasang Auto Readmore Blogger Blogspot Plus Thumbnail

Cara Membuat Memasang Auto Readmore Blogger Blogspot Plus Thumbnail








 
Huuuufft..... pulang sekolah capek banget, plus panasnya minta ampun, tapi walaupun masih capek, saya akan memposting untuk teman-teman pengguna blogger, Naaah kita mulai saja kita liat di TKP,,, wkwkwk kayak OVJ donk................
Nah kita liat dulu seperti apakah read more itu  ?


 
auto readmore memudahkan kita dalam membuat posting. Memasang fitur ini membuat kita tidak perlu membubuhkan kode <!--more--> atau mengklik tanda 
 
 setiap kali melakukan posting.
Fitur auto readmore akan mengurangi pekerjaan ini karena secara otomatis semua posting yang muncul di halaman-halaman utama (misalnya home, search query results, tag results, dll) akan terpotong dengan readmore.

Berikut langkah-langkahnya:
1. Masuk ke editor template HTML. Download template terlebih dahulu untuk amannya.
2. centang expand widgets template.
3. Masukkan script berikut TEPAT SEBELUM tag </head> (gunakan Ctrl+F untuk mencari)
<script type=text/javascript>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js type=text/javascript/>
keterangan:
-summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
 Tapi untuk amannya tinggalkan begitu saja.

4. Lanjutkan dengan mencari <data:post.body/> (seperti biasa, gunakan senjata Ctrl+F)
5. Lalu GANTI <data:post.body/> dengan script berikut:
<b:if cond=data:blog.pageType == &quot;item&quot;>
<data:post.body/>
<b:else/>
<div expr_id=&quot;summary&quot; + data:post.id>
<data:post.body/>
</div>
<script type=text/javascript>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style=clear: both;/><span style=padding-top:5px;;float:right;text-align:right;><a expr_href=data:post.url rel=bookmark><b>Read more >></b></a></span>
</b:if>
keterangan:
-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
-float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.
-Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this  entry", "Lanjut gan...",  "Monggo dilanjut!", atau apa sajalah...
Tapi untuk amannya tinggalkan begitu saja.
 
6. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya.
7. Setelah beres, silakan di-save.
8. Nah skarang lihat hasilnya di blog temen-temen, SEMOGA BERHASIL


Go to link Download

Read more »

Tuesday, November 22, 2016

Cara Membuat Artikel Terkait dengan Gambar Thumbnail

Cara Membuat Artikel Terkait dengan Gambar Thumbnail


Related Post atau sering juga kita sebut artikel terkait adalah artikel yang berhubungan dengan postingan yang sedang dibuka/dibaca. Artikel terkait yang ditampilkan adalah artikel yang sama-sama dalam satu label/kategori. Artikel terkait penting untuk SEO dan menambah kunjungan ke blog kita. Tentunya agar pembaca tertarik untuk membacanya kita perlu menghiasnya dengan tambahan gambar. Belum lengkap rasanya jika widget yang satu ini tidak disertakan dalam blog kita. Dan kali ini saya masih akan membahas Cara Membuat Artikel Terkait dengan Gambar (Thumbnail) tapi lebih mudah dan praktis tidak perlu mengedit html template dalam membuatnya. Kita akan menggunakan bantuan LinkWithin untuk membuat artikel terkait ini.



LinkWithin akan membaca setiap gambar yang ada didalam setiap postingan artikel dan akan menjadikannya artikel terkait secara otomatis dengan gambar yang relevan dengan judul tepat dibawah postingan artikel. Dan untuk mendapatkannya cukup mudah, untuk langkah-langkahnya silahkan ikuti cara dibawah ini. . . ..  ..
1. Langsung menuju TKP >>> LinkWithin
2. Jika sudah isi form registrasi blog kita untuk mendapatkan Widget ini. Untuk mengisinya seperti gambar dibawah ini :

Formulir Registrasi Blog

3. Untuk langkah selanjutnya dalam LinkWithin sudah dijelaskan dengan rinci cara memasangnya diblog, jika sobat ingin mengambil link Klik bacaan Install Widget

4. utk langkah selanjutnya sobat blogger pasti langsung paham dengan mengikuti langkah Y telah ada pada langkah Y disediakan LinkWithin.

Dan secara otomatis akan langsung terinstall diblog kita, dan selamat Widget LinkWithin utk Membuat Artikel Terkait dengan Gambar berhasil dipasang diblog


<<<<< Selamat Mencoba >>>>>

Go to link Download

Read more »

Sunday, November 20, 2016

Cara Membuat Related Post Berupa Gambar Thumbnail

Cara Membuat Related Post Berupa Gambar Thumbnail


UNTUK melengkapi posting Cara Membuat Recent Post (Lates Post, Posting Terbaru) dengan Gambar yang cocok buat blog foto dan toko online, kali ini CB share tentang Related Postnya (Posting Terkait) yang juga dengan gambar (thumbnail image).

Jenis Posting Terkait ini HANYA berupa gambar. Judul akan muncul saat cursor mouse diarahkan ke gambar.

Ini penampakan Related Posts dengan gambar yang sudah coba diterapkan dan berhasil di CB Blogger Lab.

Cara Membuat Related Post dengan Gambar


Untuk blogger biasa --bukan blog foto/toko online, sebaiknya tidak menggunakan Related Post dengan Thumbnail Image biar lebih cepat loadingnya.

Related Post sendiri adalah bagian dari navigasi dan internal link blog yang bagus buat seo dan user. Google menganjurkan navigasi dan internal linking di halaman situs web. Related Post juga memudahkan user mencari informasi lain denga tag, label. atau topik yang sama.

Cara Membuat Related Post Berupa Gambar Thumbail di Blogger

1. "Template" > "Edit HTML"
2. Copy & Paste kode berikut ini di atas kode ]]></b:skin>

/* Related Posts dengan Gambar  */
.related-post .post-thumbnail {
z-index: 1;
position: relative;
width: 98px;
height: 98px;

margin: 0;
display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left;
position: relative;
width: 98px;
height: 98px;

margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;
float: left;
background: #000;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}

Keterangan:
Yang berwarna merah adalah ukuran gambar.

2. Cari (Ctrl+F) kode yang seprti berikut ini:

<div class=post-footer>
<div class=post-footer-line post-footer-line-1/>
<div class=post-footer-line post-footer-line-2/>
<div class=post-footer-line post-footer-line-3/>
</div>
</div>

3. Copy & Paste kode berikut ini di bawah kode tersebut:

<div id=related-posts>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<script type=text/javascript>//<![CDATA[
var ry=<h3>Related Posts</h3>;rn=<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>;rcomment=comments;rdisable=disable comments;commentYN=no;
var dw=;titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(thr$total in d){commentsNum[titlesNum]=d.thr$total.$t+ +rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if(media$thumbnail in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGuZt_XD7lgxAtb0yxjQy8taeluRg1KG9Bo-f5mQfYE4WeVK5_Tcr2qj8hkE9HdjzK_5QNzhPXpARDiRcHBbcBXib5A-n7SlOrjz6h6-3CvQam2Xx8C4eObjap7sru_8MN6y2-3rUKm76/};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf(?m=0);if(y!=-1){a=a.replace(/?m=0/g,)}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+=<div class="clear"/></div><ul>;while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+?m=0}if(commentYN==yes){comments[c]= - +commentsNum[c]}else{comments[c]=};dw+=<div class="related-post"><div class="related-post-title">+titles[c]+</div><a href="+urls[c]+" rel="nofollow"><img border="0" class="post-thumbnail" alt="+titles[c]+" src="+thumb[c]+"/></a></div></div>;if(c<titles.length-1){c++}else{c=0}b++}dw+=</ul>};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById(related-posts).innerHTML=dw};
//]]></script>
<b:loop values=data:post.labels var=label>
<script expr_src=&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot; type=text/javascript/>
</b:loop>
<script type=text/javascript>varmaxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class=clear/>

Keterangan:
Yang berwarna merah adalah jumlah Related Post atau Jumlah Thumbnail Image yang ingin ditampilkan.

4. Baca basmalah biar berhasil dan berkah... dan Save Template!

Mestinya, jika keempat langkah di atas dilakukan dengan baik dan benar, maka Related Post berupa Thumbnail Image (gambar) akan muncul di postingan blog. Good Luck!

Sumber

Go to link Download

Read more »

Sunday, November 13, 2016

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail


Hai sobat blogger semua !!! Kali ini fahrurrozi18 akan berbagi cara untuk membuat daftar Artikel Terkait / Related Post. Humh... Udah pada tau nggk, yang mana itu Related Post. Yang belum tau, silahkan lihat screenshot di bawah ini :


Nah... Gimana sob, udah tau kan ?!?!
Ya sudah deh, gak pakek lama, langsung aja sob terjun ke langkah-langkahnya !!! 

Cara Membuat Artikel Terkait / Related Post :
1. Login BLOGGER sobat.
2. Klik Template => Edit HTML.
3. Cari kode di bawah ini :
</head>
4.  Kalau sudah menemukan kode di atas, Copy script di bawah ini lalu paste di atas kode </head>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<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:#03C}
#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:#fff; 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:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type=text/javascript>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";
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(){returnw+};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>
</b:if>
5. Selanjutnya cari kode di bawah ini, Gunakan Ctrl+F untuk mempermudah pencarian :
<data:post.body/>
6. Lalu, copy script di bawah ini tepat di bawah kode tadi. Dalam pencarian, sobat akan menemukan beberapa script yang sama... Gunakan script yang Kedua atau Ketiga :
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div id=related_posts style=margin-top:35px;>
<h4 style=color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;>Artikel Terkait</h4>
<b:loop values=data:post.labels var=label>
<script expr_src=&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot; type=text/javascript/>
</b:loop>
<ul id=relpost_img_sum>
<script type=text/javascript>relatpost();</script>
</ul>
</div>
</b:if>
7. Klik Simpan.

Nah... Sudah selesai deh membuatnya, sekarang coba lihat blog sobat... :)
Sekian dulu ya tips dariku, Bye... bye... :)

Keterangan :
  • var relmaxposts = 5, jumlah artikel terkait yang ditambilkan
  • var numchars = 150, jumlah dari ringkasan artikel
  • Untuk mengubah style dari widget seperti ukuran huruf, warna, dll. Edit pada script yang ada didalam tag <style> ... </style>

Go to link Download

Read more »