Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE

Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE

Bola Hero Gawai

Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE

Related Posts DTE
Related Post merupakan sebuah widget blog yang sangat berguna dan dianjurkan untuk dipasang di blog. Selain memudahkan pengunjung untuk mendapatkan artikel sejenis, related posts juga berguna untuk mengurangi nilai bounce suatu blog.

Namun seiring dengan validasi HTML5, banyak script related posts yang malah menyumbangkan error pada validasinya.

Nah jika Anda ingin memasang related posts yang valid HTML5, saya menyarankan untuk mencoba menggunakan related post dari DTE. Ada 5 jenis tampilan related posts dari DTE ini, Anda bisa memilihnya sesuai dengan selera Anda. 

Related posts dari DTE ini memungkinkan pengguna untuk memodifikasinya lagi agar lebih sesuai dengan keinginan pengguna. Silahkan modifikasi tampilannya pada kode CSS-nya.

Nah kali ini kita mencoba sedikit memodifikasi tampilan related posts DTE style 3 yang menampilkan thumbnail dan judul artikelnya. Untuk mendapatkan scriptnya silahkan menuju Widget Configurator-nya pada link di bawah ini:
  • http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html
Kemudian silahkan pilih Related Post Style-nya pada Style 3 kemudian klik tombol "Preview & Get Code".

Secara default, bentuk thumbnail-nya berupa segi empat sama sisi ( tinggi dan lebarnya sama ). Nah kali ini kita akan merubah lebar thumbnailnya menjadi lebih lebar seperti tampak pada gambar di bawah ini.

Related Posts default
Related Posts

Setelah dimodifikasi
modifikasi Related Posts DTE


Untuk memodifikasinya silahkan perhatikan kode CSS-nya seperti di bawah ini.

.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* Style 3 */
.related-post-style-3,
.related-post-style-3 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-3 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
  margin-bottom:-989px;
  padding-bottom:999px;
}
.related-post-style-3 .related-post-item:first-child {border-left:none}
.related-post-style-3 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-3 .related-post-item-title {font-weight:bold}

.related-post h4 adalah judul widgetnya, silahkan rubah persentase font-size-nya untuk memperbesar ukuran judul widgetnya.

.related-post-style-3 .related-post-item untuk mengatur item related post-nya, silahkan rubah width-nya sesuai keinginan kita misalnya menjadi 140px. Dan hapus kode border-left:1px solid #eee; untuk membuang garis pinggir tiap-tiap item-nya.

Silahkan hapus juga kode berikut: .related-post-style-3 .related-post-item:first-child {border-left:none}

.related-post-style-3 .related-post-item-thumbnail untuk mengatur tampilan thumbnailnya. Silahkan rubah dan samakan width-nya dengan width pada kode .related-post-style-3 .related-post-item di atas tadi (140px). Untuk height-nya silahkan rubah sesuai keinginan Anda, misalnya menjadi 90px.

Selesai... kemudian silahkan simpan kode CSS-nya yang sudah dirubah tapi di atas kode ]]></b:skin> atau </style>

Untuk menambahkan title tag pada thumbnailnya, kita harus mengedit pada kode javascriptnya. Silahkan buka kode js-nya dan nanti Anda akan menemukan kode seperti ini.


<img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'">

Silahkan ganti semuanya dengan kode di bawah ini


<img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'">

Kemudian save perubahannya dan silahkan upload ulang kode js-nya. Anda bisa menggunakan Google Drive untuk mengupload kode js-nya. Untuk mengupload file di Google Drive silahkan baca lagi postingannya pada link di bawah ini.

Kemudian silahkan simpan kode HTML berikut javascriptnya di bawah kode <data:post.body/> yang paling bawah atau terakhir. Jangan lupa menambahkan tag conditional untuk menampilkan widget hanya di postingan saja.

Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

46 Comments Add Comment

hehe penuh dengan kreaktif mas.. kok menghilang beberapa hari ini mas? ;)

Balas

Hehehehe biasa sis sibuk kerjaan :D

Balas

hehe kirain jadi buronan hihi canda deh..

Balas

Mantap nih Mas, biar tidak banyak yang eror lagi, menambahkan title tag dengan cara memodifikasi nya secara benar maka akan lancar ya Mas.

Balas

Betul mas related post merupakan penyumbang error pada validasi HTML5 jika script related postnya tidak tepat :D

Balas

Iya bisa juga seperti itu kang :)

Balas

mantap kang, related postnya jadi keren, dari yang biasa menjadi luar biasa hhee

Balas

oce deeh mas, langsung di coba aja ni ilmu baru buat saya.
:D

Balas

Hehehee iya sis jadi buronan mertua wkwkwkw =)D

Balas

Hehehehe makasih kang :D

Balas

Silahkan mas :) semoga bisa dimengerti :)

Balas

Maaf mas OOT mau tanya kalo masalah ada di blockquote ini agar valid html 5 gimana ya?
ini gambarnya http://s27.postimg.org/i2ymvjlma/test.jpg
Terima Kasih

Balas

bahaya kalau jadi buronan mertua kwkwk :D

Balas

Muantap kang adhy sama BM dulu mas tutor nya :D keren sekali kang ..hee

Balas

Wah saya lagi ngeblog via hp nih mas, jadi belum bisa lihat demonya.? Nanti akan saya lihat kalau dah sampai rumah mas... Hehehehe

Balas

Di situ disebutkan bahwa elemen blockquote tidak bisa menjadi anakan elemen span artinya jangan menyimpan kode blockquote di dalam kode span seperti ini misalnya.
<span>
<blockquote>
...................
</blockquote>
</span>


Nah coba span yang mengapit kode blockquote dirubah menjadi div

Balas

Makasih mas Nucky :)

Balas

Silahkan mas Nady, titi dj aja mas :D

Balas

Ok terima kasih mas dicoba edit dulu..

Balas

Tutorial nya sangat mantapp mas adhy thanks ya

Balas

Wah lama tak berkunjung pak
semakin oke saja
tak cobain ya pak

Balas

Pantesan kang, dari hari kemarin saya nagkring disini buat dapet pertamax, eh udah kedapetan sama mba Leony Li =)D Buat artikelnya mantep deh kang, bisa menambah sensasi related post :-bd

Balas

Perasaan mas adhi pernah ngepos yang mirip deh tapi saya lupa, oh ya pertanyaan OOT saya dijawab dong ^_^

Balas

jadi tampak lebih enak dipandang ya setelah dimodif plus sudah valid :-bd
saya paling nyerah kalau soal valid2an @@,

Balas

jangan sampe deh jd buronan :D

Balas

Wah bisa jadi lebih keren dan Komplit related posts nya
Yah Kang Adhy di coba dulu Kang terima kasih atas artikelnya :)

Balas

Kalau bentuk .related-post nya seperti blog saya apa bisa mas ? sebab saya tidak memakai gambar..Mohon bantuan nya (request) Trims

Balas

wah jadi kelihatan menarik ya mas kalau related post nya ada tittle nya. Sehingga bisa lebih seo friendly. Bisa dicoba nih mas tutorialnya. Terimakasih banyak atas share nya ya :)

Balas

Kalo valid html5 kenapa gak di coba?? Hehhe :)

Balas

Sama-sama mas :)

Balas

Silahkan bang Ronny ;)

Balas

Iya, yang dulu itu penambahan title tag pada related post dari modification blog punya kang Dede.

Balas

Silahkan dicoba mas :D

Balas

Iya jadi bisa menyesuaikan dengan selera kita sis :)

Balas

Iya kang Saud silahkan dicoba :)

Balas

Di situ ada 5 macam related post sis, jika ingin yang seperti di blognya tinggal pilih style 1 seperti yang saya pasang di blog ini, untuk tampilannya tinggal edit kode CSS nya.

Balas

Sama-sama mbak Ririn :)

Balas

Iya dari sekian banyak related post, salah satunya yang valid html5 yaitu dari DTE ini mas dan patut untuk dicoba. :)

Balas

jujur aja lebih bagus yang udah di modif daripada sebelum di modif :D

Balas
This comment has been removed by the author.

makasih pembelajarannya kang, ada yg mau ditanya ni..
kalo menambah title tag pada kode JS berikut bagaimana kang?

eval(function(p,a,c,k,e,d){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--)d[e(c)]=k[c]||e(c);k=[function(e){return d[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;}('K 11(u){6.4(\'<e l="h">\');G(7 i=0;i<12;i++){7 3=u.N.3[i];7 E=3.J.$t;7 x;8(i==u.N.3.w)I;G(7 k=0;k<3.p.w;k++){8(3.p[k].10==\'Y\'){x=3.p[k].q;I}}7 9;Z{9=3.16$17.15}13(14){s=3.o.$t;a=s.v("<B");b=s.v("A=\\"",a);c=s.v("\\"",b+5);d=s.X(b+5,c-b-5);8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){9=d}f 9=\'F://V.T.D/U/W/R/Q/d/1o.1n\'}6.4(\'<j l="n-J 1k">\');6.4(\'<a q="F://1l.1p.D/" z="1j"><B A="\'+9+\'"/></a>\');6.4(\'<a q="\'+x+\'" z ="1b">\'+E+\'</a><1c>\');8("o"C 3){7 2=3.o.$t}f 8("y"C 3){7 2=3.y.$t}f 7 2="";7 M=/<\\S[^>]*>/g;2=2.1a(M,"");8(2.w<O){6.4(\'<m l="n-P">\');6.4(2);6.4(\'</m>\')}f{6.4(\'<m l="n-P">\');2=2.H(0,O);7 L=2.18(" ");2=2.H(0,L);6.4(2+\'...\');6.4(\'</m>\')}6.4(\'</j>\')}6.4(\'</e>\')}K 19(){r=$(\'e#h j:r\').1d().1h();$(\'e#h\').1i(r);$(\'e#h j:1g\').1e("1f")}',62,88,'||postcontent|entry|write||document|var|if|thumburl|||||ul|else||rp_plus_img||li||class|span|news|content|link|href|last|||json|indexOf|length|posturl|summary|target|src|img|in|com|posttitle|http|for|substring|break|title|function|quoteEnd|re|feed|numchars|text|hLjqmEbdtkw|AAAAAAAADMA||ggpht|_xcD4JK_dIjU|lh3|SnamIh0KTCI|substr|alternate|try|rel|rpthumbnt|numposts|catch|error|url|media|thumbnail|lastIndexOf|rpnewsticker|replace|_top|br|hide|slideDown|slow|first|remove|prepend|_blank|clearfix|catatan-piper-comex||gif|noimagethumb|blogspot'.split('|'),0,{}))

itu widget JS recent post with thumbnail kang, tp tdk terpasang title tag pada gambar dan jdulnya..

Balas

Hehehehe terima kasih mas =D

Balas

Untuk javascript yang seperti ini saya masih belum mengerti, namun untuk kode thumbnailnya sepertinya yang ini <a q="F://1l.1p.D/" z="1j"><B A="\'+9+\'"/></a> dan untuk judul artikelnya yang ini <a q="\'+x+\'" z ="1b">\'+E+\'</a> untuk penambahan title tagnya saya masih belum mengerti sudah beberapa kali saya coba yang seperti itu masih error.

Balas

Gan , Thumnail Related Post saya kenapa cuman muncul 2 saja ya, sedangkan yang DEMO munculnya bisa 3, ? makasih
bagaiamana caranya? saya gunakan template agan Kompi Banget

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×