How to Install Multi Related Posts in Blog Post

How to Install Multi Related Posts in Blog Post

பெரிய Website-களில் Article-யின் Content களுக்கிடையே தொடர்புடைய Post Link செருகப்பட்டதை நீங்கள் எப்போதாவது பார்த்தீர்களா? Blogger-ரில் கூட Post-டில் உள்ள Link-கை Manually சேர்ப்பதன் மூலம் அதைச் சேர்க்கலாம், ஆனால் ஒவ்வொரு முறையும் நாம் ஒரு Post-யைச் சேர்க்கப் பழகிவிட்டதால், அது ஒரு தொந்தரவாக இருக்கும்.

இந்த முறை Blogger Tips TamilBloggers.org பல Post-கள் தொடர்பான Post-களை எப்படி Post-களில் Install செய்வது என்பதை Share செய்து இருக்கோம்.

இந்த Post-யில் உள்ள பல தொடர்புடைய Post-கள் நான் முன்பு Share செய்து குறிப்புகள் போலவே செயல்படுகின்றன, துல்லியமாக Post-களில் தொடர்புடைய Article-களை எவ்வாறு Install செய்வது.  அதாவது, ஒவ்வொரு பத்தியிலும் தோராயமாக Post-யின் Content-கள் தொடர்பான Article Link-களை அது காண்பிக்கும்.

கீழே உள்ள image போன்ற உதாரணங்கள்:

How to Install Multi Related Posts in Blog Post

மேலே உள்ள படம் பல தொடர்புடைய Post-யைப் பயன்படுத்துவதற்கு முன்பு Article Content திற்கு ஒரு எடுத்துக்காட்டு மற்றும் கீழே உள்ள பல Content பதிவை இணைப்பதற்கான ஒரு எடுத்துக்காட்டு, இது Post Content-தின் ஒவ்வொரு பத்தியிலும் தானாகவே தோன்றும்:

How to Install Multi Related Posts in Blog Post

image அப்படி.  நீங்கள் முயற்சி செய்ய ஆர்வமுள்ளவர்கள், கீழே உள்ள படிகளைப் பின்பற்றவும்.

How to Install Multi Related Posts in Blog Post 

Blogger Page> Theme மெனுவைக் Click செய்து திருத்து HTML Button-னை Click செய்யவும்> இதற்கு முன் இந்த CSS Coding சேர்க்கவும் </head>

<b:if cond='data:view.isPost'> <style> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#222} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .content a:hover{text-decoration:underline} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;https://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} </style> </b:if>

அடுத்து <data:post.body/> என்ற Coding கண்டுபிடி (பல <data:post.body/> Coding இருந்தால், Post Page நிபந்தனை குறிக்குள் உள்ளவற்றைத் தேர்ந்தெடுக்கவும்) மற்றும் கீழே உள்ள குறியீட்டை கீழே சேர்க்கவும்.

<b:if cond='data:view.isPost'> <script type='text/javascript'> //<![CDATA[ // Multi Related Post (function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1); for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})(); var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}} function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx} function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false} //]]> </script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:view.isPost'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/> </b:if> </b:loop> </b:if> <script type='text/javascript'> //<![CDATA[ (function arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})(); //]]> </script> </b:if>

TypeInformation
ch no = 4காட்டப்படும் Post-களின் எண்ணிக்கையை தீர்மானிக்க எண் 4 மாற்றவும்
ch text = 'Also read :'Also read எழுத்தை நீங்கள் விரும்பியபடி தொடங்க மாற்றவு

அதன் பிறகு Theme Save Button-னைக் Click செய்யவும், நீங்கள் முடித்துவிட்டீர்கள்.  முடிவுகளைப் பார்க்க கீழே உள்ள முடிவு image போன்றதகும்

How to Install Multi Related Posts in Blog Post

கீழே, பல வண்ண விருப்பங்கள் உள்ளன, இங்கே நீங்கள் CSS Coding மாற்ற வேண்டும்

Options 1

<b:if cond='data:view.isPost'> <style> /* Multi Related Post */ .arldzgnMultiRelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;https://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23000&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s} .arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3} </style> </b:if>

How to Install Multi Related Posts in Blog Post

Options 2

<b:if cond='data:view.isPost'> <style> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#e3e3e3} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f5f5f5 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;https://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23888&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} .arldzgnMultiRelated:hover .icon{background-color:#f9f9f9} </style> </b:if>

How to Install Multi Related Posts in Blog Post

Options 3

<b:if cond='data:view.isPost'> <style> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#e74c3c} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;https://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} .arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)} </style> </b:if>

How to Install Multi Related Posts in Blog Post

Options 4

<b:if cond='data:view.isPost'> <style> /* Multi Related Post */ .arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content{padding:10px 15px} .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline} </style> </b:if>

How to Install Multi Related Posts in Blog Post

Okay, Post-களில் பல தொடர்புடைய Post-களை எவ்வாறு Install செய்வது என்பது குறித்த TamilBloggers.org Coding லிருந்து Blogger உதவிக்குறிப்புகள்.  பயனுள்ளதக என்று நம்புகிறேன்.



Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.