Linkkoe My Id

Peristiwa, Literasi, Edukasi, Buku, Game, Tips, Serba-Serbi

Monday, 27 April 2020

Widget Related Post Unik Untuk Blog

Posted by Ronin on Monday, 27 April 2020

Widget Related Post Unik Untuk Blog





Widget Related Post adalah cara yang bagus untuk menunjukkan kepada pembaca Anda posting terkait dari label atau kategori tertentu. Dengan demikian, ini meningkatkan keterlibatan blog Anda dan mengurangi rasio pantulan Anda.

Jadi, jika posting Anda belum diberi label, tidak akan ada postingan terkait yang bisa ditampilkan kepada pembaca Anda.

Oleh karena itu, Anda harus memastikan bahwa Anda telah mempublikasikan label postingan blog Anda. 



Widget Related Post Unik Untuk Blog




Bagaimana cara menambahkan label ke postingan?

Sangat mudah. Ketika membuat postingan baru, di sidebar kanan, Anda akan menemukan Label. Tuliskan yang sesuai yang ingin Anda berikan untuk posting Anda dan klik Selesai.

Menambahkan widget  Related Post ke blog Blog Anda

Langkah 1. Login ke Blogger Anda dan pilih pada Template dan klik Edit HTML.








Langkah 2. Cukup klik di mana saja di dalam bagian editor HTML dan dengan menekan control + F bersama-sama mencari tag < b: Includedabe >.







Langkah 3. Tempelkan kode di bawah ini tepat di atas <code> < b: Includedabe > tag.


<!-- Related Posts widget by https://www.wonderkrish.com-->   
 <b:if cond='data:blog.pageType == &quot;item&quot;'> <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=readpostlabels&amp;max-results=50&quot;' 
 type='text/javascript'/> </b:loop>  <div class='post-footer-line post-footer-line-4'>  <div 
 class='relatedpoststitle'>RELATED POSTS</div> <div id='relatedpostssum'>    <script 
 type='text/javascript'>showrelated();</script>   </div>   <div style='clear:both;'/>  </div> 
 </b:if> <!-- Related Posts with Thumbnails Code End by https://www.wonderkrish.com -->


Langkah 4. Anda harus mencari lagi dengan menekan Control + F bersamaan dan menemukan tag </head> 




Langkah 5. Tepat di atas tag </head>, rekatkan kode CSS dan JavaScript di bawah ini.


<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls =
new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var
relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var
relatedmaxnum = 75; // the number of characters of summary var relatednoimage =
"https://3.bp.blogspot.com/-
PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default
picture for entries with no image function readpostlabels(e){for(var
t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[rela
tedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in
t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="me
dia$thumbnail"in
t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var
d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].hre
f;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new
Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-
1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-
1]=relatedpSummary[a],l.length+=1,l[l.length-
1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var
a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-
1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[
a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpS
ummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSum
mary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-
1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div
class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img
src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"'
target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ...
</p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-
1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-
1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return
r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var
r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script>

Dan pastekan kode ini juga:
<style> .relatedsumposts {margin:0 auto;padding:0;text-align:center; /* width of the related    posts area */ width: 120px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5;    display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link    properties */ color: #linkcolor; text-transform: uppercase; font-size:12px; } .relatedsumposts    img{background-color:#fafafa;width:95%;height:auto;max-width:100%;margin:0 auto;vertical-   align:middle;} .relatedsumposts p { /* summary properties */ border-top: 1px solid #E5E5E5;    border-bottom: 1px solid #E5E5E5; color: #summarycolor; font-size: 12px; height: 4em; line-   height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; }    .relatedpoststitle { font-size: 19px; margin-bottom:15px; ;text-align:center; font-style:bold}    </style>
Sekarang, pilih gaya apa saja yang ada di bawah ini sesuai dengan pilihan Anda, gambar telah ditempatkan untuk mendapatkan intisari, seperti apa sebenarnya bentuknya.

Untuk menambahkan gaya yang berbeda, Anda harus mengikuti dari langkah 1 hingga 3 untuk setiap gaya.


Gaya No. 1.  Widget posting yang indah dan indah dengan thumbnail postingan ditampilkan dalam format bulat.






Kode 1:

<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel)   {relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script>

Kode 2:

<style> .relatedsumposts { padding: 0px 10px; text-align: center; /* width of the related posts area */ width: 120px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5; display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link properties */ color: #linkcolor; text-transform: uppercase; font-size:12px; } .relatedsumposts img { /* thumbnail properties */ height: 82px; width: 82px; -webkit-border-radius: 50%; -moz-border-radius: 50%;    border-radius: 50%; } .relatedsumposts p { /* summary properties */ border-top: 1px dotted #E5E5E5; border-bottom: 1px dotted #E5E5E5; color: #summarycolor; font-size: 10px; height: 4em; line-height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; } .relatedpoststitle { font-size: 19px; margin-bottom:15px; } </style>

Gaya No. 2.  Widget posting yang indah terkait dengan thumbnail posting menunjukkan dalam format persegi panjang dua masing-masing di kedua sisi.




Kode 1:

<script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>      &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>    </b:loop></b:if>]; var relatedPostConfig = {    homePage: &quot;<data:blog.homepageUrl/>&quot;,    widgetTitle: &quot;&lt;h4&gt;Related    Posts:&lt;/h4&gt;&quot;,    numPosts: 4,    summaryLength: 70,    titleLength: &quot;auto&quot;,    thumbnailSize: 100,    noImage: &quot;&quot;,    containerId: &quot;bpostrelated-post&quot;,    newTabLink: false,    moreText: &quot;Read More&quot;,    widgetStyle: 2,    callBack: function() {} }; </script>  


Kode 2:

<style> .related-postbwrap{width:100%;float:left;background:#fff;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #E6E6E6;margin-bottom:10px;} .related-postbwrap h4{color: #2D2D2D; font-size: 15px; font-weight: bold; margin-bottom: 10px; text-align: left; text-transform: capitalize; margin: 0; background: #FCFCFC; padding: 15px; border-bottom: 1px solid #E6E6E6;} .related-post-style-2,.related-post-style-2 li{list-style:none;margin:0} .related-post-style-2 li{overflow:hidden;padding:10px 0;line-height:.9;width:47%;float:left;margin-right:20px} .related-post-style-2 .related-post-item-thumbnail{width:100px;height:85px;max-width:none;max-height:none;background-color:transparent;border:none;float:left;margin:2px 10px 0 0;padding:0} .related-post-style-2 .related-post-item-title{font-weight:700;font-size:13px;color:#2D2D5A;font-family:raleway;}    .related-post-style-2 .related-post-item-summary{display:block;font-size:12px;font-weight:600;margin-top:5px;line-height:1.3} .related-post-item-more{display:none} .related-postbwrap ul {padding:10px;overflow: hidden;} .post-body {width:auto!important;} .related-post-item-title {font-size:12px!important;} .related-post-style-2 li {width:100%;} .related-postbwrap {width:100%;} .related-post-style-2 li {width:100%!important} </style>


Gaya No. 3.  Widget posting yang indah terkait dengan thumbnail posting menunjukkan dalam format persegi panjang menunjukkan dalam satu baris dengan thumbnail posting, judul dan snippet posting.







Kode 1:

<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"'    target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script>

Kode 2:

<style> .relatedsumposts {margin:0 auto;padding:0;text-align:center; /* width of the related posts area */ width: 120px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5; display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link properties */    color: #linkcolor; text-transform: uppercase; font-size:12px; } .relatedsumposts img{background-color:#fafafa;width:95%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle;} .relatedsumposts p { /* summary properties */ border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; color: #summarycolor; font-size: 12px; height: 4em; line-height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; } .relatedpoststitle { font-size: 19px; margin-bottom:15px; ;text-align:center; font-style:bold} </style> 
Ya, itulah 3 Widget Related Post Unik Untuk Blog yang bisa Anda terapkan. Selamat mencoba.


(Admin)


Previous
« Prev Post

No comments:

Post a comment

Note: only a member of this blog may post a comment.