Memodifikasi Related Posts Maskolis

Memodifikasi Related Posts Maskolis

Bola Hero Gawai

Memodifikasi Related Posts Maskolis

Ada beberapa temen Kompi Ajaib yang menanyakan cara membuat related posts Kompi Ajaib yang berada di bawah postingan. Related posts ini sebenarnya saya dapat dari Maskolis juga, namun pada tutorialnya tersebut penempatannya disatukan dengan widget subscribe, sehingga bagi yang kurang teliti mungkin akan sedikit bingung untuk mengambil kode-kode related posts-nya.

Nah sekarang saya sharing widget Related Posts ini dengan sedikit memodifikasinya sehingga tampilannya akan seperti gambar di bawah ini.

Related Posts

Hanya merubah lebar, size dan jumlah thumbnail, dan gambar shadow di bawah widget. Nah bagi yang tertarik silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan copy kode di bawah ini dan letakan DI ATAS kode ]]></b:skin>


#related{width:100%;border-bottom:0px solid #ccc;margin:.1em 0 .5em;background:url(http://1.bp.blogspot.com/-6gpuAyYJG4s/USRbfeSaZGI/AAAAAAAAXMA/Tif2cNgh2us/s1600/frame_shadow+copy.png) no-repeat bottom center;padding:0 0 35px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{width:650px;margin:5px 0 0;padding:10px 15px 0 0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:1px solid #aaa;display:block;height:77px;position:relative;width:77px;color:#000;text-decoration:none;text-shadow:0 1px 0 #ccc}
ul#related-posts li .overlay{height:72px;line-height:16px;position:absolute;width:72px;z-index:10;padding:5px 0 0 5px}
ul#related-posts li a:hover .overlay{background:#fff;display:block!important;opacity:0.9}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.clearfix:after{content:&quot;.&quot;;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

2. Copy kode di bawah ini di bawah postingan atau di bawah kode <data:post.body/>, jika ada lebih dari satu, pilih yang terakhir.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<h2 style='display:block;font: 18px Oswald;'>YOU MIGHT ALSO LIKE:</h2>
<script type='text/javascript'>
var defaultnoimage='http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg';
var maxresults=14;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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=14&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>               
</div>
</div>
</b:if>

Tulisan yang berwarna merah bisa Anda ganti dengan kalimat lainnya yang Anda kehendaki. Angka 14 menunjukan jumlah thumbnail yang tampil.

Demikian saja penjelasan memodifikasi related posts Maskolis ini semoga dapat dimengerti dan bermanfaat.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

42 Comments Add Comment

Hehehe...gimana kang udah bisa dibuka? :D

Balas

Thank you mas..
1 lagi nih, maaf yah mas..
saya nih kan pengguna template maskolis yang johny ribet.
template ini gak valid html 5 dan menurut mas sendiri struktur tag heading template ini sudah seo gak menurut mas?
maaf yah mas langsung nanya disini.. sebenarnya pertanyaan ini sudah lama saya mau tanyakan ke mas.

makasih.. saya suka banget berkunjung ke blog mas cari tutorial..
hehehe!

Balas

Tag heading template maskolis menurut saya sudah seo khususnya tag h1, h2, h3.

Untuk validasi HTML5 banyak faktor penyebabnya, diantaranya penambahan widget2, cara membuat postingan dan lainnya...

Balas

Bang kompi ngaturnya gimana di blog ku malah jadi ..horizontal ke bawah dia ??

ni SS nya : http://4.bp.blogspot.com/-U9RBrZOEl7o/UXY45YCcpLI/AAAAAAAABPA/KCBcib7E-wU/s1600/Screenshot_4.png

Balas

coba kurangi jumlahnya

Balas

sepertinya bentrok sama related post yng bawah...

Balas

Hanya saran saja...
Kalo bisa jangan menyimpan widget dengan fungsi yang sama lebih dari satu, apalagi widget2 tersebut menggunakan Javascript, akan semakin memberatkan blog...

Balas

keren dehh jadi kepengen :3

[ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

Balas

Translate nya keren juga

Balas

Makasih telah sharing, ijin copy kodenya Mas

Balas

ok deh bang gw gak jadi pake dah ...btw thanks dah share..

Balas

Silahkan mas Suparmin eheh salah maksdnya mas Fian hehehe =))

Balas

Orangnya juga keren hehehe :D

Balas

sudah saya pake om di blog saya, terima kasih ya..o ia kalo ngedit image post kaya blog kompiajaib ini gmna om ? keren tu ada efek prespektivenya..

Balas

Itu manual di photoshop mas :D

Balas

o sy kira ada layanan onlinenya, maklum pingninya yang simple2 aja :D

Balas

oo....! ternyata itu pake kodi...! sy kira itu shadow pake gambar....!

langsung ke TKP mas kompi....!

Balas

Shadownya tetep pakai gambar shadow tapi langsung disimpan di kode CSS :D

Balas

thank you very much http://onekh.blogspot.com/2013/04/bigman-vcd-vol-12-full-album.html

Balas

u're welcome ... :D

Balas

maaf nih yah mas, kok setiap saya posting artikel yang muncul kayak gini mas, tolong buka gambarnya mas!
https://lh5.googleusercontent.com/--q4aopx58q8/UXkGkq35s-I/AAAAAAAACJU/WpHfeCk4hHU/h120/kesalahan%21.png
apa kalau saat diindex juga gitu mas?
Kalau ini bermasalah mohon tipsnya mas! :)

Balas

Itu dari setting deskripsinya kurang tepat, coba pakai trik ini mas http://kompiside.blogspot.com/2013/02/membuat-deskripsi-postingan-agar-bisa-share-di-google-dan-facebook.html

Balas

gan kenapa ya blog saya tadinya halaman staticnya muncul (halaman staic manuaL),,,sekarang jadi hilang

Balas

Maksudnya menu untuk menampilkan statis page? Mungkin kehapus waktu edit html mas...

Balas

yah mas, sayakan maunya nyembunyiiin deskripsinya..
sy cmn pengen deskripsinya ada di homepage saja mas..!!

Balas

oh iya mas, sebenarnya pertanyaan saya tuh cuman 1,
kalau keindex google hasilnya kayak gitu gak?
saya takut mas, kalau nanti kalau disearch engine yang terindexnya kayak gitu..

Balas

Kalo gitu, ketika akan share ke G+ / FB, remove aja deskripsinya.

Balas

tapi mas.. kalau keindex di goolenya yang muncul yang kayak gitu mas?
kalau bukan, ya Alhamdulillah dah mas!
kalau iya.. wah harus ganti template lagi nih mas.. :'(
tapi mau nanya nih mas..
template ini dair maskolis juga kan mas..?
tapi sudah mas modifikasi?
kalau bisa mas mohon donk share template mas...!!

Balas

Makanya agar deskripsinya sesuai dengan yang kita inginkan baik di search result, G+ atau FB, silahkan coba ikuti trik pada url yang saya berikan di atas. Sudah saya coba dan saya gunakan sekarang. Coba mas perhatikan pada url postingan kompi ajaib khususnya yang terbaru (coba aja keywordnya dengan title postingan Kompi Ajaib) pada serch result, G+, dan FB. Deskripsi yang tampil di situ adalah deskripsi yang saya buat untuk postingan. Sehingga postingan akan lebih kuat di Search engine. Jadi tidak hanya homepage yang butuh deskripsi, postingan juga sebaiknya diberi deskripsi.

Balas

saya yakin tidak gan,soalnya saya belum edit apa2,he memang kode untuk static page otomatis yang mana mas? ,atau kasih tutorial donk cara membuat menu navigasi untuk static page otomatis (yang biasa di maskolis itu loh) jadi pas kita membuat static page otomatis muncul ,,,terimakasih sebelumnya gan

Balas

Ini untuk blog yang Nika-7 kan?
Untuk menu yang menampilkan statis page, di template Nika-7 yaitu dengan kode CSS .page-menu
Kode CSS-nya masih ada, namun element HTML untuk pemanggilnya sudah tidak ada. Posisinya di atas menu utama. Bisa jadi gadget untuk page kehapus di tata letak atau layout bukan di edit HTML. Solusinya coba buka lagi kode HTML template yang didownload dari Maskolis kemudian cari untuk kode widget page dengan id "page-menu" simpan di tempatnya sesuai aslinya. Jika itu sudah diperbaiki, maka statis page otomatis muncul di menu tersebut.

Balas

maaf yah mas bukannya sok tahu..
saya pernah membaca, bahwa deskripsi sebaiknya ditaruh di homepage saja, karna prinsip google 2013, memasang deskripsi di setiap artikel itu sudh tidak berguna mas..

Balas

hey dear blog am Image and column Do the same

Balas

Itu jika memasang deskripsinya hanya dengan meta tag, maka deskripsi itu harus disimpan hanya di homepage dengan penambahan kode yang menampilkan sesuatu hanya di homepage. Alasannya agar tidak terjadi duplikat deskripsi (Jika deskripsi tidak disimpan hanya di homepage, maka deskripsi akan terihat di homepage dan di semua postingan dan tentunya ini akan menjadi duplikat deskripsi sebanyak postingan yang ada ditambah komentar, versi mobile, dan lainnya). Namun dengan trik yang seperti di Kompiside, deskripsi homepage dan postingan berbeda-beda sesuai deskripsi yang diberikan. Silahkan coba cek deskripsi homepage Kompi Ajaib dan semua postingannya, semuanya berbeda.

Balas

iya mas berbeda...
makasih infonya yah mas kompi, kapan update template lagi di maskolis?

Balas

Malam mas, kok ngak bisa ya...saya pakai template jhony sompret banget....

Balas

Pastikan di templatenya sudah ada jquery seperti di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js' type='text/javascript'/>

Berapa pun serinya.

Balas

Ngak bisa juga mas...Kalau bisa saya mau minta tolong mas, gantikan menu navigasi tempalate sompret banget dengan menu navigasi dan menu Subscribe me punya jhony storage blue....blog saya http://kebajikandalamkehidupan.blogspot.com/

Balas

Keren bang berhasil di aplikasikan di salah satu blog saya..

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!

×
×
×