Add a suggested Related Topic tool to blogger 2019

It is one of the most popular tools on open sites and on Blogger and there are other similar additions are made through sites or via Facebook, but this advantage is that it does not depend on external sites in addition to it is light and this tool is an exclusive but blogger

You can preview the tool's work by scrolling down the subject and now with the code.

login blogger  >> Layout  >>  Add a Gadget >>  HTML/Java >> Paste Code >> save template >> view your blog.

<style>.nqnia-suggested { background-color: #fff; border-top: 3px solid #009efa; bottom: 13px; box-shadow: 0 1px 2px #999; box-sizing: border-box; display: none; overflow: hidden; padding: 210px 5px 5px; position: fixed; right: 2px; width: 300px; z-index: 99; } .closebq { background-color: #009efa; color: #fff; font: bold 14px/24px arial; height: 24px; left: 0; position: absolute; text-align: center; top: 0; width: 24px; z-index: 9; } .cnmuranqRandomPostBS { color: #666; display: block; font: 14px/1.8em tahoma; position: relative; text-align: center; } .cnmumoqta ul { list-style: outside none none !important; margin: 0 !important; padding: 0 !important; } .cnmumoqta a {text-decoration: none !important;} .cnmumoqta h2 { background-color: transparent !important; border: 0 none !important; box-shadow: none !important; color: #009efa !important; display: block !important; font: bold 14px/1.8em droid arabic kufi !important; height: auto !important; margin: 0 !important; overflow: hidden; text-align: center !important; } .cnmumoqta li img { height: 200px; margin: 0 !important; position: absolute; right: 5px; top: 5px; width: 290px; } </style><script type='text/javascript'>//<![CDATA[ var _0x84fe=["\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x68\x65\x69\x67\x68\x74","\x73\x6C\x6F\x77","\x73\x68\x6F\x77","\x23\x63\x6E\x6D\x75\x73\x6F\x63\x69\x61\x6C\x73\x6C\x69\x64\x65","\x68\x69\x64\x65","\x73\x63\x72\x6F\x6C\x6C","\x72\x65\x6D\x6F\x76\x65","\x50\x4F\x53\x54","\x2F\x66\x61\x63\x65\x62\x6F\x6F\x6B\x70\x61\x67\x65\x2E\x70\x68\x70","\x61\x6A\x61\x78"];$(window)[_0x84fe[6]](function(){if($(document)[_0x84fe[0]]()>=$(document)[_0x84fe[1]]()/4){$(_0x84fe[4])[_0x84fe[3]](_0x84fe[2])}else {$(_0x84fe[4])[_0x84fe[5]](_0x84fe[2])}});function closecnmusocialslide(){$(_0x84fe[4])[_0x84fe[7]]();$[_0x84fe[10]]({type:_0x84fe[8],url:_0x84fe[9]})} //]]></script><div style="display: none;" id="cnmusocialslide" class="cnmu-moqtarhat"><a class="closebq" href="javascript:void(0);" onclick="return closecnmusocialslide();">X</a><div class="cnmumoqta"><script style='text/javascript'>//<![CDATA[ function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}if(random_posts==true){indexPosts.sort(function(){return 0.5-Math.random()})}if(numposts_cnmuranq>numPosts){numposts_cnmuranq=numPosts}for(i=0;i<numposts_cnmuranq;++i){var entry_cnmuranq=json.feed.entry[indexPosts[i]];var posttitle_cnmuranq=entry_cnmuranq.title.$t;for(var k=0;k<entry_cnmuranq.link.length;k++){if(entry_cnmuranq.link[k].rel=='alternate'){posturl_cnmuranq=entry_cnmuranq.link[k].href;break}}if("content"in entry_cnmuranq){var postcontent_cnmuranq=entry_cnmuranq.content.$t}s=postcontent_cnmuranq;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl_cnmuranq=d}else var thumburl_cnmuranq='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt2kigf2qJOvN5OC5dgSFJjFrRdVFXxNVShdTb0p8wRaijtU7FL4lEO9m5BWLo5O4ayNien_BDkcExwWUI4tkLu5n4dhRIeN2f1G4bT_2suCmKsnX7IF6Th8AYyzdQgO1cE62SuK6aO_b/s320/BS+No+Image+Dark.jpg';document.write('<a href="'+posturl_cnmuranq+'"><li><div id="cnmuranqRandomPostHolder"><span class="cnmuranqRandomPostBS"><h2>');document.write(posttitle_cnmuranq+'</h2>');var re=/<\S[^>]*>/g;postcontent_cnmuranq=postcontent_cnmuranq.replace(re,"");if(showpostsummary_cnmuranq==true){if(postcontent_cnmuranq.length<numchars_cnmuranq){document.write(postcontent_cnmuranq);document.write('</span>')}else{postcontent_cnmuranq=postcontent_cnmuranq.substring(0,numchars_cnmuranq);var quoteEnd_cnmuranq=postcontent_cnmuranq.lastIndexOf(" ");postcontent_cnmuranq=postcontent_cnmuranq.substring(0,quoteEnd_cnmuranq);document.write(postcontent_cnmuranq+'');document.write('</span>')}}document.write('<img src="'+thumburl_cnmuranq+'" width="'+post_image_width+'" height="'+post_image_height+'"/></div>');document.write('</li></a>')}document.write('</ul>')} //]]></script><script style='text/javascript'>var showpostthumbnails_cnmuranq = true; var showpostsummary_cnmuranq = true; var random_posts = true; var numchars_cnmuranq= 100; var numposts_cnmuranq= 1; var post_image_width= 295; var post_image_height = 140; </script><script src='http://nqnia.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999'></script></div></div>

You Must be Change Formats :

• First replace my blog link with your blog link  nqnia.blogspot.com
• This color #009efa  is the blue color of the tool you can modify the
• #FF0808 -  #FFE608 - #21FA02 - #021BFA - #000000
• teacher in red is the title line Replace it with the line you use.
• if you want to modify the height of the images Modify the numbers marked green with the same proportions if you increase one 20 pixels Increase the other by the same percentage
• if you want the tool to be left.
• Replace right with left and left with right