dengan scroll. Nah, artikel ini masih bersangkutan dengan artikel sebelum. Karena menunjukkan fungsi yang sama, akan tetapi tampilan dan kekuatannya berbeda.
Lah kang, bukan kah kemarin sudah membuat artikel related post yang responsive seo, ko kini buat lagi ? Iya, memang benar, beberapa hari kemudian aku telah menciptakan related post yang responsive seo, dan kenapa aku menciptakan lagi pada artikel ini ? Sengaja aku pisahkan, alasannya yaitu artikel ini lebih dari sekedar SEO. Artinya artikel terkait ini mempunyai kekuatan SUPER SEO, yang dimana sanggup memenuhi kriteria dari 200 lebih google ranking factor. Itu artinya, semakin banyak kriteria google telah kita penuh, semakin memudahkan pula blog kita nongkrong di page one.
Yang dimana pada postingan ini aku akan menunjukkan 2 jenis widget related postPada postingan artikel kali ini kami akan membagikan 2 jenis widget related posts "blogger" yang responsive yang sanggup anda terapkan di bawah postingan artikel atau konten yang anda buat,dan pastinya mempunyai nilai "SEO friendly yang lebih" yang baik memenuhi kriteria "200+google rangking faktor" yang sangat gampang untuk di terapkan.
Oke, pada artikel ini aku akan membagikan related post super seo dengan tumbnail (gambar). Kenapa Harus dengan tumbnail ? Hal ini bertujuan bila kita memasang widget dengan tumbnal akan memberi sinyal kepada pengunjung untuk mengklik artikel kita. Bayangkan saja, saat kita membuka artikel, mana yang berdasarkan kita yummy di baca ? Dengan gambar atau hanya teks saja ? niscaya kita akan mengklik yang ada gambarnya. Karena memang hal tersebut yummy dilihat ^_^
Baiklah, kita pribadi saja yaa bos kuh. Pada tahap pertama ini, kita harus menyipkan struktur instruksi untuk menciptakan lahan bagi gambar tinggal. Caranya :
1. Buka dasbor blog bos kuh
2. Klik Tema
3. Pilih Edit HTML
4. Cari instruksi ]]></b:skin> atau </style> (gunakan CTRL+F untuk memudahkan pencarian)
4. letakan instruksi dibawah ini sempurna di atas instruksi ]]></b:skin> atau </style>
5. lalu, letakan JavaScript di bawah ini di atas instruksi </head>
6. Kemudian letakan instruksi dibawah ini sebelum instruksi <div class="post-footer">
PERHATIAN ! Biasanya dalam satu tema terdapat lebih dari 1 kode <div class="post-footer">, maka letakan instruksi dibawah ini pada kode <div class="post-footer"> yang ke dua.
8. Lihat hasilnya
Selamat, alasannya yaitu kini bos kuh sudah berhasil menciptakan related post keren yang super seo. Terima kasih sudah berkunjung pada blog ini, agar bermanfaat ^_^
Lah kang, bukan kah kemarin sudah membuat artikel related post yang responsive seo, ko kini buat lagi ? Iya, memang benar, beberapa hari kemudian aku telah menciptakan related post yang responsive seo, dan kenapa aku menciptakan lagi pada artikel ini ? Sengaja aku pisahkan, alasannya yaitu artikel ini lebih dari sekedar SEO. Artinya artikel terkait ini mempunyai kekuatan SUPER SEO, yang dimana sanggup memenuhi kriteria dari 200 lebih google ranking factor. Itu artinya, semakin banyak kriteria google telah kita penuh, semakin memudahkan pula blog kita nongkrong di page one.
Yang dimana pada postingan ini aku akan menunjukkan 2 jenis widget related postPada postingan artikel kali ini kami akan membagikan 2 jenis widget related posts "blogger" yang responsive yang sanggup anda terapkan di bawah postingan artikel atau konten yang anda buat,dan pastinya mempunyai nilai "SEO friendly yang lebih" yang baik memenuhi kriteria "200+google rangking faktor" yang sangat gampang untuk di terapkan.
Oke, pada artikel ini aku akan membagikan related post super seo dengan tumbnail (gambar). Kenapa Harus dengan tumbnail ? Hal ini bertujuan bila kita memasang widget dengan tumbnal akan memberi sinyal kepada pengunjung untuk mengklik artikel kita. Bayangkan saja, saat kita membuka artikel, mana yang berdasarkan kita yummy di baca ? Dengan gambar atau hanya teks saja ? niscaya kita akan mengklik yang ada gambarnya. Karena memang hal tersebut yummy dilihat ^_^
Baiklah, kita pribadi saja yaa bos kuh. Pada tahap pertama ini, kita harus menyipkan struktur instruksi untuk menciptakan lahan bagi gambar tinggal. Caranya :
1. Buka dasbor blog bos kuh
2. Klik Tema
3. Pilih Edit HTML
4. Cari instruksi ]]></b:skin> atau </style> (gunakan CTRL+F untuk memudahkan pencarian)
4. letakan instruksi dibawah ini sempurna di atas instruksi ]]></b:skin> atau </style>
/* Related Post */ #related-post {margin:0;padding:20px 0 0 0;} #related-post h4{display:none;color:#30373c;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05);padding:10px 0;font-size:20px;margin:0 0 20px 0;padding-left:8px;line-height:1em} #related-post h4 span{padding:6px;display:inline-block;vertical-align:middle} .relhead {background:#fff;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:0;} ul#related-summary {margin:0;padding:0 15px;} ul#related-summary li{position:relative;float:left;list-style:none outside none;margin:0 5px 15px 5px;padding:0;overflow:hidden;height:180px;width:31.6%} ul#related-summary li img{background-color:#f1f1f1;width:100%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle;} ul#related-summary li a.relinkjdulx{color:#30373c;display:block;font-size:14px;font-weight:400;line-height:normal;overflow:hidden;text-align:center;padding:10px 10px 10px 0} ul#related-summary li a.relinkjdulx:hover{color:#30373c;} .overlayb {position:relative;max-height:140px;overflow:hidden;} .overlayb:before{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:2;opacity:0;visibility:hidden;transition:all 0.4s linear} .overlayb:after{content:'\f002';font-family:fontawesome;font-size:1.3rem;color:rgba(255,255,255,1);position:absolute;top:45%;left:45%;text-align:center;z-index:2;opacity:0;visibility:hidden;transition:all 0.20s linear} .overlayb:hover:before,.overlayb:hover:after {opacity:1;visibility:visible;} 5. lalu, letakan JavaScript di bawah ini di atas instruksi </head>
<script type='text/j4vascript'>/*<![CDATA[*/function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">") (e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgcuplik(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnojudul]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e (postcontent=e.summary.$t),relcuplikan[relnojudul]=saringtags(postcontent,numchars),"media$thumbnail"in e?postimg=e.media$thumbnail.url:postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF",relgambar[relnojudul]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnojudul]=e.link[n].href;break}relnojudul++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function artikelterkait(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],i=relurls[t],o=relcuplikan[t],s=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=i,relcuplikan[a]=o,relgambar[a]=s}for(var g,m=0,d=Math.floor((reljudul.length-1)*Math.random()),c=d,h=document.URL;relmaxtampil>m (relurls[d]==h||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[d]+"' rel='nofollow' target='_top' title='"+reljudul[d]+"'><div class='overlayb'><img src='"+relgambar[d]+"' /></div></a>",g+="<div class='overlaytext'><a class='relinkjdulx' href='"+relurls[d]+"' target='_top'>"+reljudul[d]+"</a></div>",g+="<span class='news-text'>"+relcuplikan[d]+"</span>",g+="</li>",document.write(g),m++,m!=relmaxtampil)) (d<reljudul.length-1?d++:d=0,d!=c););}var relnojudul=0,relmaxtampil=6,numchars=90,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script> 6. Kemudian letakan instruksi dibawah ini sebelum instruksi <div class="post-footer">
PERHATIAN ! Biasanya dalam satu tema terdapat lebih dari 1 kode <div class="post-footer">, maka letakan instruksi dibawah ini pada kode <div class="post-footer"> yang ke dua.
<div id='related-post'> <div class='relhead'> <h4><span>Artikel Terkait</span></h4> <div class='clear'/> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/j4vascript'/> </b:loop> <ul id='related-summary'> <script type='text/j4vascript'>artikelterkait();</script> </ul> </div> </div> 8. Lihat hasilnya
Selamat, alasannya yaitu kini bos kuh sudah berhasil menciptakan related post keren yang super seo. Terima kasih sudah berkunjung pada blog ini, agar bermanfaat ^_^
Baca Juga: |