Заробіток на капчі в доларах та гривнях
Бот працює ви відпочиваєте
- Переходимо на головну сторінку сайту
- Внизу клікаємо на посилання reCaptcha V3 auto solver
- Слідуємо вказаній там інструкції та отримаємо пасивний дохід
<style>
.social .telegram a:before {content: "\f3fe";font-family: 'Font Awesome 5 Brands';}
ul.share-links.social.social-color {padding: 0px;} li.telegram {background: #3ea9ff;}
.post-share{position:relative;overflow:hidden;line-height:0;margin:0 0 20px;margin-top:10px;} .share-links li{width:30px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style: none;} .share-links li a{float:left;display:inline-block;cursor:pointer;width:100%;height:28px;line-height:28px;color:#fff;font-weight:400;font-size:13px;text-align:center;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .25s ease} .share-links li.whatsapp-mobile{display:none} .mobile-share li.whatsapp-desktop{display:none} .mobile-share li.whatsapp-mobile{display:inline-block} .share-links li a:before{float:left;display:block;width:30px;background-color:rgba(0,0,0,0.05);text-align:center;line-height:28px} .share-links li a:hover{opacity:.8} .social-color .odnoklassniki {background: #ffbc00;} .social-color .email a:before{content:"\f189"} .social a:before{display:inline-block;font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400} .social .blogger a:before{content:"\f37d"} .social .facebook a:before{content:"\f09a"} .social .twitter a:before{content:"\f099"} .social .telegram a:before{content:"\f3fe"} .social .odnoklassniki a:before{content:"\f263"} .social .gplus a:before{content:"\f0d5"} .social .rss a:before{content:"\f09e";font-family:'Font Awesome 5 Free';font-weight:900} .social .youtube a:before{content:"\f167"} .social .skype a:before{content:"\f17e"} .social .stumbleupon a:before{content:"\f1a4"} .social .tumblr a:before{content:"\f173"} .social .vk a:before{content:"\f189"} .social .stack-overflow a:before{content:"\f16c"} .social .github a:before{content:"\f09b"} .social .linkedin a:before{content:"\f3fe"} .social .dribbble a:before{content:"\f17d"} .social .soundcloud a:before{content:"\f1be"} .social .behance a:before{content:"\f1b4"} .social .digg a:before{content:"\f1a6"} .social .instagram a:before{content:"\f16d"} .social .pinterest a:before{content:"\f0d2"} .social .twitch a:before{content:"\f1e8"} .social .delicious a:before{content:"\f1a5"} .social .codepen a:before{content:"\f1cb"} .social .flipboard a:before{content:"\f44d"} .social .reddit a:before{content:"\f1a1"} .social .whatsapp a:before{content:"\f232"} .social .messenger a:before{content:"\f39f"} .social .snapchat a:before{content:"\f2ac"} .social .external-link a:before{content:"\f35d";font-family:'Font Awesome 5 Free';font-weight:900} .social-color .blogger a{background-color:#ff5722} .social-color .facebook a{background-color:#3b5999} .social-color .twitter a{background-color:#00acee} .social-color .gplus a{background-color:#db4a39} .social-color .youtube a{background-color:#db4a39} .social-color .instagram a{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)} .social-color .pinterest a{background-color:#ca2127} .social-color .dribbble a{background-color:#ea4c89} .social-color .linkedin a{background-color:#149fe7} .social-color .tumblr a{background-color:#365069} .social-color .twitch a{background-color:#6441a5} .social-color .rss a{background-color:#ffc200} .social-color .skype a{background-color:#00aff0} .social-color .stumbleupon a{background-color:#eb4823} .social-color .vk a{background-color:#4a76a8} .social-color .stack-overflow a{background-color:#f48024} .social-color .github a{background-color:#24292e} .social-color .soundcloud a{background:linear-gradient(#ff7400,#ff3400)} .social-color .behance a{background-color:#191919} .social-color .digg a{background-color:#1b1a19} .social-color .delicious a{background-color:#0076e8} .social-color .codepen a{background-color:#000} .social-color .flipboard a{background-color:#f52828} .social-color .reddit a{background-color:#ff4500} .social-color .whatsapp a{background-color:#3fbb50} .social-color .messenger a{background-color:#0084ff} .social-color .snapchat a{background-color:#ffe700} .social-color .email a{background-color:#63839f} .social-color .external-link a{background-color:$(main.dark.color)} .social-color-hover .blogger a:hover{background-color:#ff5722} .social-color-hover .facebook a:hover{background-color:#3b5999} .social-color-hover .twitter a:hover{background-color:#00acee} .social-color-hover .gplus a:hover{background-color:#db4a39} .social-color-hover .youtube a:hover{background-color:#db4a39} .social-color-hover .instagram a:hover{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)} .social-color-hover .pinterest a:hover{background-color:#ca2127} .social-color-hover .dribbble a:hover{background-color:#ea4c89} .social-color-hover .linkedin a:hover{background-color:#0077b5} .social-color-hover .tumblr a:hover{background-color:#365069} .social-color-hover .twitch a:hover{background-color:#6441a5} .social-color-hover .rss a:hover{background-color:#ffc200} .social-color-hover .skype a:hover{background-color:#00aff0} .social-color-hover .stumbleupon a:hover{background-color:#eb4823} .social-color-hover .vk a:hover{background-color:#4a76a8} .social-color-hover .stack-overflow a:hover{background-color:#f48024} .social-color-hover .github a:hover{background-color:#24292e} .social-color-hover .soundcloud a:hover{background:linear-gradient(#ff7400,#ff3400)} .social-color-hover .behance a{background-color:#191919} .social-color-hover .digg a:hover{background-color:#1b1a19} .social-color-hover .delicious a:hover{background-color:#0076e8} .social-color-hover .codepen a:hover{background-color:#000} .social-color-hover .flipboard a:hover{background-color:#f52828} .social-color-hover .reddit a:hover{background-color:#ff4500} .social-color-hover .whatsapp a:hover{background-color:#3fbb50} .social-color-hover .messenger a:hover{background-color:#0084ff} .social-color-hover .snapchat a:hover{background-color:#ffe700} .social-color-hover .email a:hover{background-color:#888} .social-color-hover .external-link a:hover{background-color:$(main.dark.color)}
</style>
<b:if cond='data:blog.pageType != "index"'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='mobile-share'/>
<li class='facebook'><a class='facebook' data-height='650' data-width='550' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><span/></a></li>
<li class='twitter'><a class='twitter' data-height='460' data-width='550' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><span/></a></li>
<li class='pinterest'><a class='pinterest' data-height='750' data-width='735' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'/></li>
<li class='odnoklassniki'><a class='' data-height='750' data-width='735' expr:href='"https://connect.ok.ru/offer?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title=''/></li>
<li class='telegram'><a class='' data-height='650' data-width='1000' expr:href='"https://telegram.me/share/url?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='telegram'/> </li>
<li class='vk'><a class='' data-height='650' data-width='650' expr:href='"https://vk.com/share.php?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Vkontakte'/></li>
<li class='reddit'><a class='twitter' data-height='460' data-width='550' expr:href='"https://www.reddit.com/submit?url=" + data:post.url + "&resubmit=true&title=" + data:post.title + ""' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><span/></a></li>
</ul>
</div>
</b:if>
Відео інструкція:<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
або<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>
</head>
натисніть Ентер та добавте перед даним тегом наступний код:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"/>
]]></b:skin>
та додайте після нього CSS:
<style type='text/css'>
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out; z-index:999999}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}
</style>
</body>
та встановити перед ним один з варіантів:
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
]]></b:skin>
та додайте після нього CSS:
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>
</body>
встановіть перед ним:
<ul id='scrollToTop'>
<li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
<li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=0,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeIn(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},800),!1}})});
//]]>
</script>
<a href='link.com'> текст посилання </a>
<a href='linkos.com'> текст посилання </a>
<a class='knopka' href='linkos.com'> текст посилання </a>
.knopka{color:#fff; padding:8px; background:#ff6006;}
.knopka{color:#fff; padding:8px; background:#ff6006; border-radius:4px; box-shadow:2px 2px 4px -2px rgba(0,0,0,0.4)}
<a class='knopka' href='linkos.com'> текст посилання <i class="fa fa-envelope" aria-hidden="true"></i> </a>
Тепер поглянемо на результат: текст посилання Привіт, друзі. Починаючи з жовтня 2023 року, Google практично вбила концепцію SEO для своєї власної платформи Blogspot (блогспот). Половина моїх сайтів була викинута з індексу, а точніше просто прихована. Так, він все ще індексує сайти на blogspot, але при найменших відхиленнях (про які ніхто нічого не знає) сайт просто вимикається з пошуку.
Так, це оновлення зачепило не тільки блогспот, але все ж я думаю, що блогер постраждав більше за інших.
За цей час я також встиг знайти платформу, яку цей апдейт взагалі не торкнувся, я робив там все, що хотів, публікував тексти з ШІ, ставив різні посилання, і жоден з 20 створених мною сайтів не постраждав.
Але, коли я роблю те ж саме на Blogspot, навіть без ШІ та реф. посилань все закінчується плачевно.
Так що так, гуглери молодці, вони вбили власну платформу, і відрізали частину доходу, тому що люди заробляли на Blogspot і Google adsense. Також деякі користувачі купували домени від гугл для своїх блогів. Тому, нагороду року за найкращий постріл в ногу отримує Google)
Просто подивіться на цю картинку і ви зрозумієте весь біль)
Google adsense (до оновлення майже 5 доларів на день, тепер 0.20 центів)
Віджет схожих публікацій є одним із самих головних елементів сайту. Саме завдяки йому ми можемо затримати читачів на своєму сайті на значно довший час. Окрім цього читач зробить один, або більше додаткових переходів, що так саме позитивно вплине на рейтинг сайту в пошукових системах.
Отже плюси даного віджету:
Перед встановленням нагадаю вам, що даний гаджет відтворюється за рахунок "міток". Тобто його основна мета показувати схожі пости міткам, і якщо ви не додали до публікації мітку, в такому випадку на цій сторінці віджет не буде відображатись.
Для різноманітності я додам декілька варіантів цього віджету.
1. В панелі управління перейдіть до розділу Тема - Редагувати HTML
2. В HTML редакторі натисніть клавіші CTRL+F після цього перед вами з'явиться пошукове вікно.
3. Пропишіть в пошуковому вікні тег </head> та натисніть Enter.
4. Перед тегом </head> додайте наступний код;
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
5. Знайдіть тег ]]></b:skin> перед яким встановіть відповідні стилі:
.post-related { display: inline-block; background: #fff; padding: 10px; width:100%; } .post-box .heading { margin-bottom: 10px; text-align: center; margin-top: 10px; position: relative; } .post-box .heading:after { content: "" ; position: absolute; top: 100%; left: 50%; margin-left: -11px; width: 21px; height: 1px; margin-top: 2px; background: #b565a7; } .item-related { width: 31.6%; display: block; float: left; margin-right: 10px; height: 100%; } .item-related:last-child { margin: 0!important; } .item-related .link {display: block; margin: -1px; margin-bottom: 0;} .item-related img {margin-left:0px !important; display: block; opacity: 1; width: 100%; height: 200px; object-fit: cover; } .item-related h3 { font-weight: 400; font-size: 14px; line-height: 1.71429; font-family: Muli; text-transform: uppercase; } img.noops-smly { padding: 0 !important; margin-top: -2px !important; width: 19px; display: inline; }
@media (max-width: 520px)
.item-related {
width: 100%!important;
}
6. Тепер нам потрібно знайти тег <data:post.body/>
в деяких шаблонах він може зустрічатися декілька раз, зазвичай нам потрібен другий по рахунку. Додаємо перед ним наступний скрипт:
<b:if cond='data:blog.pageType == "item"'>
<script id='related-posts' type='text/javascript'> /*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;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!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRht2CIzxotE8FihN1FSlwSzSdfhyphenhyphenVLZljV-4qkoaDEZNGPCPJjtsh4Y707HTN1zdG9tj-JoZb73nsqj90W5w5JegwIgmzEEN0sEklEJEDApkluRNOqFqNTE4Dg8n7HJDtKfJg77bzuuA/s1600/no_pic_available.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72-c/','s300-c/'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script>
<div class='post-related'>
<div class='post-box'>
<h4 class='heading common-heading'> <i class="fa fa-th-list" aria-hidden="true"></i> Схожі публікації</h4>
</div>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3xubOWtIpX_oeCo6pjcBe-J07O9hxYGFH4KJoXXlURn6_j0feFiZhP4ZBodcrVzN6bX73n0e1deEOjLXKp2FABFqBmPsp83V1TISDIIZPUG_nBXDQJZ2xHCr_gRUZaTsZWUc4NGIWxk/s400/noimage.png";
var maxresults=3; // Number Of Posts
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</b:if>
7. Збережіть нові налаштування блогу та перевірте чи відображається віджет в публікаціях вашого блогу, не забувайте додавати публікаціям мітки, інакше віджет не буде спрацьовавути.
Тепер спробуємо встановити інший тип цього віджету, можливо декому з вас він сподобається більше попереднього.
1. В панелі управління перейдіть до розділу Тема - Редагувати HTML
2. Знайдіть тег ]]></b:skin> перед яким встановіть відповідні стилі:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.related-postspace{position:relative;margin:0;padding:20px 0}.related-postspace h4{margin:0 0 15px 0;font-weight:700;font-size:18px;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.05);text-align:center}.related-post-simple-2,.related-post-simple-2 li{list-style:none;margin:0;padding:5px}.related-post-simple-2 li{overflow:hidden;margin:0 auto 10px auto;transition:all .3s}.related-post-simple-2 li:hover .related-post-item-title{color:#e74c3c}.related-post-simple-2 .related-post-item-thumbnail{border-radius: 2px; width: 120px; height: 80px; max-width: none; max-height: none; background-color: transparent; object-fit: cover; border: none; float: left; margin: 2px 15px 0 0; padding: 0; transition: box-shadow 0.3s ease 0s; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); }}.related-post-simple-2 .related-post-item-title{color:#222;font-size:16px;font-weight:700}.related-post-simple-2 .related-post-item-title:hover{color:#e74c3c}.related-post-simple-2 .related-post-item-summary{display:block;font-size:13px;margin:5px auto 0 auto;color:#999}.related-post-simple-2 .related-post-item-summary .related-post-item-more{display:none}
@media screen and (max-width:750px){
.related-post-simple-2 li{width:100%;float:none}
.related-post-simple-2,.related-post-simple-2 li{padding:5px 0}
.related-post-simple-2 .related-post-item-summary{display:none}}
</style>
</b:if>
3. Знайдіть тег <data:post.body/>
перед ним додайте наступний скрипт:
<div class='related-postspace' id='dtostrelated-post'/>
<div class='clear'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Схожі публікації</h4>",
numPosts: 5,
summaryLength: 160,
titleLength: "auto",
thumbnailSizew: 120,
thumbnailSizeh: 80,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnGGi3MPDQ47C0LcW5mI67dn1mP3DiETxt2RI7vLQJMJoZyc620LUD-ZIrwxd9H3V90Ft7FLUcMTExdjoEEZf4BRqmVnUDUzz1OMGcbhYuIG1VkxW-E_tW2w8PyV2Zfi7LjD0dNG0cDD4/s1600/noimage1.png",
containerId: "dtostrelated-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 2,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Recommended</h4>",widgetStyle:1,homePage:"https://blogger.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSizew:150,thumbnailSizeh:100,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-simple-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSizew!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSizew+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
4. Чудово, збережіть нові налаштування блогу та перевірте результат.
На цьому завершимо урок. Якщо у вас виникнуть питання пишіть в коментарях.