Breaking News

Seo

Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan

Cara Membuat Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan

Artikel Terkait dengan Gambar dan Ringkasan Deskripsi

Cara memasang related post dengan thumbnail dan snippet model list di bawah postingan blog ini sangat mudah.
			/* Related Post List by igniel.Com */

#ignielRelatedList

display:block;

margin:20px 0px;

line-height:1.25em;

#ignielRelatedList h3.Title

font-size:16px;

font-weight:0;

text-align:center;

text-transform:uppercase;

line-height:initial;

#ignielRelatedList h3.Title span

background-color:#fff;

padding:0px 15px;

position:relative;

z-index:1;

#ignielRelatedList h3.Title:before

content: "http://www.Igniel.Com/";

display: block;

position: relative;

top:10px;

width: 100%;

border-top: 2px solid #cccccc;

#ignielRelatedList ul

margin:20px 0px 0px;

padding:0px;

#ignielRelatedList ul li

list-style:none;

margin-bottom:15px;

padding-bottom:15px;

border-bottom:1px solid #ccc;

-webkit-margin-start:0px !Important;

display:inline-block;

width:100%;

clear:both;

#ignielRelatedList ul li:last-child

border:0px;

padding:0px;

#ignielRelatedList ul li .Thumb

overflow:hidden;

line-height:0px;

border-radius:7px;

float:left;

margin-right:15px;

#ignielRelatedList ul li a

display:block;

#ignielRelatedList ul li a.Judul

color:#000; /* Warna Huruf */

font-weight:0;

font-size:16px;

overflow:hidden;

line-height:1.25em;

#ignielRelatedList ul li .Snippet

color:#444;

font-size:13px;

overflow:hidden;

margin:7px 0px 0px;

padding:0px;

#ignielRelatedList ul li a.Judul:hover, #ignielRelatedList ul li:hover a.Judul

color:#ff5722; /* Warna Huruf Ketika Disorot */

#ignielRelatedList ul li a img

width:120px;

height:90px;

transition:all .3s ease;

border:0px;

margin:0px;

#ignielRelatedList ul li a img:hover, #ignielRelatedList ul li:hover img

transform:scale(1.1) rotate(-5deg);

filter: brightness(75%);

-webkit-filter: brightness(75%);

#ignielRelatedList .Norelated

text-align:center;

font-weight:0;

@media screen and (max-width:480px)

#ignielRelatedList ul li a.Judul

font-size:14px;

#ignielRelatedList ul li .Snippet

font-size:12px;

Kedua, simpan kode ini "SESUDAH / DI BAWAH" <data:post.body/>.

			<!-- Related Post List by igniel.com -->

<b:if cond='data:view.isPost'>

<div id='ignielRelatedList'>

<h3 class='title'><span>Related Posts</span></h3>

<script>//<![CDATA[

var jumlah = 6;

var kata = 150;

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"http://www.igniel.com/":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36));if(!"http://www.igniel.com/".replace(/^/,String)){while(c--){d[e(c)]=k[c]"http://www.igniel.com/"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('d a=["\w","\q\L\g\j\h","\g\e\l\I\h\G","\v","\j\l\D\e\1X\1d\T","\q\E\Z\q\h\p\j\l\I","http://www.igniel.com/","\1o\K\j\l","\e\l\h\p\1x","\T\e\e\D","\1E\h","\h\j\h\g\e","\Q\K\l\h\e\l\h","\q\E\z\z\f\p\1x","\z\e\D\j\f\1E\h\G\E\z\Z\l\f\j\g","\E\p\g","\D\f\h\f\2p\j\z\f\I\e\C\L\l\I\2n\Z\f\q\e\1K\1G\2q\j\1u\1B\1d\1N\1j\1r\2r\2u\I\K\b\b\b\b\1H\1n\1g\G\W\1g\I\b\b\b\b\W\b\b\b\b\1B\O\b\1v\b\b\b\O\1a\D\1P\2c\e\b\b\b\b\b\2s\1H\O\1n\1u\1a\1v\O\b\1o\Z\1G\1g\C\I\b\b\b\b\2l\W\g\W\1a\1u\1a\1v\z\2d\1d\K\p\1K\2k\2t\b\b\1M\2i\b\2j\2g\1p\1d\1Q\1S\1J\b\b\b\b\b\W\g\1Q\1J\1q\1n\E\1a\z\O\O","\g\j\l\1q","\p\e\g","\f\g\h\e\p\l\f\h\e","\G\p\e\T","\p\f\l\D\K\z","\T\g\K\K\p","\1g\1N\1M","\w\g\j\v","\w\D\j\1p\y\Q\g\f\q\q\M\n\h\G\E\z\Z\n\v\w\f\y\G\p\e\T\M\n","\n\y\h\j\h\g\e\M\n","\n\v\w\j\z\I\y\q\p\Q\M\n","\C\1j\1P\1S\1r\1b\G\1Z\1r\1b\L\1b\1q\1b\l\K\1b\l\E","\p\e\L\g\f\Q\e","\n\y\f\g\h\M\n","\n\C\v\w\C\f\v\w\C\D\j\1p\v","\w\f\y\G\p\e\T\M\n","\n\y\Q\g\f\q\q\M\n\1o\E\D\E\g\n\v","\w\C\f\v","\w\q\L\f\l\y\Q\g\f\q\q\M\n\q\l\j\L\L\e\h\n\v","\y\1m\1m\1m\y\w\C\q\L\f\l\v","\w\C\g\j\v","\1j\p\j\h\e"];d R=0,o=J H(),u=J H(),B=J H();F=J H();1c 1O(t,Y){d k=t[a[1]](a[0]);P(d m=0;m<k[a[2]];m++){x(k[m][a[4]](a[3])!=-1){k[m]=k[m][a[5]](k[m][a[4]](a[3])+1,k[m][a[2]]);k=k[a[7]](a[6]);k=k[a[5]](0,Y-1);1t k1c 2f(Y){P(d k=0;k<Y[a[9]][a[8]][a[2]];k++){d t=Y[a[9]][a[8]][k];o[R]=t[a[11]][a[10]];1h=a[6];x(a[12]1i t){1h=t[a[12]][a[10]]1w{x(a[13]1i t){1h=t[a[13]][a[10]];F[R]=1O(1h,2h);x(a[14]1i t){1l=t[a[14]][a[15]]1w{1l=a[16];B[R]=1l;P(d m=0;m<t[a[17]][a[2]];m++){x(t[a[17]][m][a[18]]==a[19]){u[R]=t[a[17]][m][a[20]];1k;R++1c 1R(1s,k){P(d m=0;m<1s[a[2]];m++){x(1s[m]==k){1t!0;1t!11c 2e(){d S=J H(0);d V=J H(0);d U=J H(0);d X=J H(0);P(d i=0;i<u[a[2]];i++){x(!1R(S,u[i])){S[a[2]]+=1;S[S[a[2]]-1]=u[i];V[a[2]]+=1;V[V[a[2]]-1]=o[i];U[a[2]]+=1;U[U[a[2]]-1]=F[i];X[a[2]]+=1;X[X[a[2]]-1]=B[i];o=V;u=S;F=U;B=X;P(d i=0;i<o[a[2]];i++){d A=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1F=o[i];d 1I=u[i];d 1A=F[i];d 1z=B[i];o[i]=o[A];u[i]=u[A];F[i]=F[A];B[i]=B[A];o[A]=1F;u[A]=1I;F[A]=1A;B[A]=1z;d 1f=0;d r=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1L=r;d N;d 1D=1y[a[23]];2m(1f<1C){x(u[r]!=1D){N=a[24];N+=a[25]+u[r]+a[26]+o[r]+a[27]+B[r][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+o[r]+a[26]+o[r]+a[2v];N+=a[1Y]+u[r]+a[1T]+o[r]+a[1U];N+=a[1V]+F[r]+a[1W];N+=a[2b];1y[a[2a]](N);1f++;x(1f==1C){1k;x(r<o[a[2]]-1){r++1w{r=0;x(r==1L){1k',62,156,"http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/"|_0x7d7f|x41"http://www.igniel.com/"var|x65|x61|x6C|x74|_0x8ebex12|x69|_0x8ebex8|x6E|_0x8ebex9|x27|judul|x72|x73|_0x8ebex19"http://www.igniel.com/"_0x8ebex6|urls|x3E|x3C|if|x20|x6D|_0x8ebex13|gambar|x2F|x64|x75|snippet|x68|Array|x67|new|x6F|x70|x3D|_0x8ebex1b|x43|for|x63|rel|_0x8ebexe|x66|_0x8ebex10|_0x8ebexf|x45|_0x8ebex11|_0x8ebex7|x62"http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/"|x51|x2D|function|x4F|Math|_0x8ebex18|x55|postcontent|in|x77|break|postimg|x2E|x53|x6A|x76|x6B|x30|_0x8ebexc|return|x56|x49|else|x79|document|_0x8ebex17|_0x8ebex16|x42|jumlah|_0x8ebex1c|x24|_0x8ebex14|x34|x4E|_0x8ebex15|x54|x36|_0x8ebex1a|x4C|x52|filter|x31|x46|contains|x32|33|34|35|36|x78|32|x39"http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/""http://www.igniel.com/"|38|37|x50|x57|ignielRelatedList|relpostimgcuplik|x37|kata|x2B|x58|x38|x44|while|x3B|30|x3A|x2C|x4B|x33|x48|x47|31'.split("http://www.igniel.com/"'),0,{));

//]]></script>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<script expr:src="http://www.igniel.com/"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"http://www.igniel.com/"/>

</b:loop>

<ul>

<script>ignielRelatedList();</script>

</ul>

<b:else/>

There is no other posts in this category.

</b:if>

</div>

<div class='clear'/>

</b:if>

Nanti hasil dari script related post pakai thumbnail dan snippet jenis list di akhir artikel tersebut akan menghasilkan tampilan seperti ini.

Itulah tutorial lengkap untuk membuat related post yang disertai dengan gambar thumbnail dan ringkasan summary di bawah postingan Blogger dengan model tampilan list. Jika ada kesulitan dalam pemasangan silakan komentar di bawah.

Cara Memasang Artikel Terkait Dengan Gambar dan Ringkasan Deskripsi di Akhir Postingan Blogspot

Yang bisa diganti:var jumlah: jumlah artikel terkait yang ingin dimunculkan.var kata: jumlah karakter / huruf pada snippet.

Yang bisa diganti:#ignielRelatedList ul li a.judul: warna huruf di judul artikel.#ignielRelatedList ul li a.judul:hover, #ignielRelatedList ul li:hover a.judul: warna huruf di judul artikel ketika disorot.

Pertama, tambahkan kode CSS ini "SEBELUM / DI ATAS" </style> atau ]]></b:skin>.

Sebenarnya isi Javascript related post ini hampir dengan versi sebelumnya yaitu related post dengan thumbnail model grid. Yang berbeda adalah adanya penambahan beberapa baris script untuk memanggil snippet atau summary (ringkasan deskripsi) dan perombakan CSS yang membuat tampilannya menjadi model list.

Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan Reviewed by Andi Leangle on Juli 30, 2020 Rating: 5

Tidak ada komentar:

All Rights Reserved by Belajar Seo Dan Link © 2017
Powered By Blogger, Share by Andi Leangle

Hubungi Kami

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.