Related Posts Widget Dengan Thumbnail Dan Ringkasan Untuk Blogger

Ada beberapa tutorial cukup tua yang telah menjelaskan metode yang berbeda untuk menampilkan posting terkait di Blogger [ 1 ] [ 2 ] tetapi dalam tutorial ini, saya akan menunjukkan cara untuk menerapkan Related Posts widget yang sangat indah yang datang bersama dengan Thumbnail dan Tulisan Snippets, juga. Jika Anda ingin menambahkannya, ikuti langkah selanjutnya di bawah ini: 

Bagaimana Tambahkan Posting terkait Widget dengan Ringkasan untuk Blogger 

Langkah 1. Dari Anda Blogger Dashboard , pergi ke Template dan klik Edit HTML 

Langkah 2 Centang "Expand Template Widget" kotak centang.: 

. Langkah 3 Cari (CTRL + F) tag ini: 

 </ Head>

... Dan paste kode berikut tepat di atasnya: 

 <script type='text/javascript'>
/ / <! [CDATA [
relatedTitles var = new Array ();
relatedUrls var = new Array ();
var relatedpSummary = new Array ();
var relatedThumb = new Array ();
var relatedTitlesNum = 0;

var relatedPostsNum = 4; / / jumlah entri yang akan ditampilkan
var relatedmaxnum = 75; / / jumlah karakter ringkasan
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY9H96Bp181u5Oe2-36hMQCZmlcHuOIBw4pSxsZWGtH4lTpKZ4r8OG9XdiRKTpgBTNFgt8WPglGgNdirIqXbNqnIUJ9qRBA2qId43D1WPqG_mEdTANsGzOB5ZNrGOVC20QwoNMIml2CldZ/s1600/no_image.jpg"; / / gambar default untuk entri tanpa gambar

readpostlabels fungsi (json) {
entri var, postimg, postcontent, kucing;
for (var i = 0; i <json.feed.entry.length; i + +) {
entri = json.feed.entry [i];
if (i == json.feed.entry.length) {break;}
relatedTitles [relatedTitlesNum] = entry.title $ t;.
postcontent = "";
if ("content" dalam entri) {
. postcontent = entry.content $ t;
} Else if ("Ringkasan" dalam entry) {
. postcontent = entry.summary $ t;
}
relatedpSummary [relatedTitlesNum] = removetags (postcontent, relatedmaxnum);
if ("Media $ thumbnail" dalam entry) {
postimg = entry.media $ thumbnail.url;
} Else {
postimg = relatednoimage;
}
relatedThumb [relatedTitlesNum] = postimg;
for (var k = 0; k <entry.link.length, k + +) {
if (entry.link [k]. rel == 'alternatif') {
relatedUrls [relatedTitlesNum] = entry.link [k] href.;
istirahat;
}
}
relatedTitlesNum + +;
}
}
fungsi showrelated () {
var tmp = new Array (0);
var tmp2 = new Array (0);
var tmp3 = new Array (0);
var tmp4 = new Array (0);
for (var i = 0; i <relatedUrls.length; i + +) {
if (! mengandung (tmp, relatedUrls [i])) {
tmp.length + = 1; tmp [tmp.length - 1] = relatedUrls [i];
tmp2.length + = 1; tmp2 [tmp2.length - 1] = relatedTitles [i];
tmp3.length + = 1; tmp3 [tmp3.length - 1] = relatedpSummary [i];
tmp4.length + = 1; tmp4 [tmp4.length - 1] = relatedThumb [i];
}
}
relatedTitles = tmp2, relatedUrls = tmp; relatedpSummary = tmp3, relatedThumb = tmp4;
for (var i = 0; i <relatedTitles.length; i + +) {
Indeks var = Math.floor ((relatedTitles.length - 1) * Math.random ());
var tempTitle = relatedTitles [i]; tempUrls var = relatedUrls [i];
var tempResum = relatedpSummary [i]; var tempImage = relatedThumb [i];
relatedTitles [i] = relatedTitles [index]; relatedUrls [i] = relatedUrls [index];
relatedpSummary [i] = relatedpSummary [index]; relatedThumb [i] = relatedThumb [index];
relatedTitles [index] = tempTitle; relatedUrls [index] = tempUrls;
relatedpSummary [index] = tempResum; relatedThumb [index] = tempImage;
}
var somePosts = 0;
var r = Math.floor ((relatedTitles.length - 1) * Math.random ());
var relsump = r;
Output var;
var dirURL = document.URL;

while (somePosts <relatedPostsNum) {
if (relatedUrls [r]! = dirURL) {

output = "<div class='relatedsumposts'>";
Output + = "<a href='" + + relatedUrls[r] "'rel='nofollow' target='_self' title='" + + relatedTitles[r] "'> <img src = '" + relatedThumb [ r] + "'/> </ a>";
Output + = "<h6> <a href='" + + relatedUrls[r] "'target='_self'>" + relatedTitles [r] + "</ a> </ h6>";
Output + = "<p>" + relatedpSummary [r] + "... </ p>";
Output + = "</ div>";
document.write (output);

somePosts + +;
if (somePosts == relatedPostsNum) {break;}
}
if (r <relatedTitles.length - 1) {

r + +;
} Else {

r = 0;
}

if (r == relsump) {break;}
}
}
removetags function (teks, panjang) {
var pSummary = text.split ("<");
for (var i = 0; i <pSummary.length; i + +) {
if (pSummary [i]. indexOf (">")! = -1) {
pSummary [i] = pSummary [i] substring (pSummary [i] indexOf (">") +1, pSummary [i] panjang..).;
}
}
pSummary = pSummary.join ("");
pSummary = pSummary.substring (0, panjang-1);
kembali pSummary;
}
fungsi berisi (a, e) {
for (var j = 0; j <a.length; j + +) if (a [j] == e) return true;
return false;
}
/ /]]>
</ Script>

Catatan: 

• Untuk mengubah jumlah posting yang sedang ditampilkan, mengubah nilai merah (4)
• Untuk mengubah jumlah karakter yang akan ditampilkan pada pesan ringkasan, mengubah nilai hijau (75)
• Untuk mengubah pic default untuk posting tanpa gambar, tambahkan URL Anda bukan yang ditandai dengan warna biru

... juga paste kode di bawah tepat di atas </ head> tag: 

 <style>
. Relatedsumposts {
float: left;
margin: 0px 5px;
overflow: hidden;
text-align: center;
/ * Lebar dan tinggi tulisan daerah yang terkait * /
width: 120 px;
height: 210 px;
}

. Relatedsumposts: hover {
background-color: # F3F3F3;-webkit-border-radius: 10px;
-Moz-border-radius: 10px;
border-radius: 10px;
}

. Relatedsumposts img: hover {
-KHTML-opacity: 0.4;
-Moz-opacity: 0.4;
opacity: 0.4;
}

. Relatedsumposts a {
/ * Properti link * /
color: # linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
. Relatedsumposts img {
/ * Properti thumbnail * /
margin-top: 2px;
height: 82 px;
padding: 5px;
width: 82 px;
border: 1px solid # fff;
-Webkit-border-radius: 100 px;
-Moz-border-radius: 100 px;
border-radius: 100 px;
-Webkit-box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
-Moz-box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
}
. Relatedsumposts h6 {
/ * Properti title * /
display: table-cell;
height: 5em;
margin: 5px 0 0;
overflow: hidden;
Padding-bottom: 2px;
vertical-align: tengah;
width: 130px;
}

. Relatedsumposts p {
/ * Properti ringkasan * /
border-top: 1px dotted # 777777;
border-bottom: 1px dotted # 777777;
color: # summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
</ Style>

Catatan: 

• Memodifikasi nilai merah untuk menyesuaikan lebar (120) dan tinggi (210) dari area widget
• Ganti # linkcolor dengan nilai hex warna Anda untuk mengubah warna judul posting
• Untuk mengubah ukuran thumbnail, memodifikasi nilai ditandai violet (82)
• Untuk menentukan kebulatan perbatasan, mengubah nilai-nilai dalam jeruk (100)
• Untuk mengubah warna dari potongan pos, mengubah # summarycolor dengan nilai warna hex

Langkah 4 Cari (CTRL + F) untuk fragmen berikut.: 

 <a expr:href='data:label.url' rel='tag'> <data:label.name/> </ a> <b: if 'Data: label.isLast = "true"!' = cond >, </ b: if>

... dan menambahkan kode ini tepat di bawah ini: 

 <b:if cond='data:blog.pageType == "item"'>
<Script expr: src = '"/ feeds/posts/default/- /" + Data: "? Alt = json-in-script & callback = readpostlabels & max-results = 50" label.name +' type = 'text / javascript' />
</ B: if>

Seluruh fragmen akan terlihat seperti ini: 

 <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/> </ a> <b: if 'Data: label.isLast = "true"!' = cond >, </ b: if>
<b:if cond='data:blog.pageType == "item"'> 
<Script expr: src = '"/ feeds/posts/default/- /" + Data: "? Alt = json-in-script & callback = readpostlabels & max-results = 50" label.name +' type = 'text / javascript' /> 
</ B: if>
</ B: lingkaran>

Langkah 5 Cari fragmen kode ini.: 

 </ B: includable>
<b:includable id='postQuickEdit' var='post'>

Catatan: jika Anda tidak dapat menemukannya, maka pencarian hanya untuk kode merah 

! Klik panah ke samping untuk memperluas kode, kemudian gulir ke bawah sampai Anda mencapai garis disorot!

... Menambahkan hanya ATAS itu, tambahkan berikut: 

 <b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div id='relatedpostssum'> <div style='text-align: left; font-size: 15px; margin-bottom: 10px font-weight: bold;'>BERHUBUNGAN POS </ div>
<script type='text/javascript'> showrelated (); </ script>
</ Div>
<div style='clear:both;'/>
</ Div>
</ B: if>

Screenshot

Langkah 6. Simpan Template Anda ... dan mudah-mudahan kita sudah selesai ... 

Nikmati!