Come aggiungere widget Blogger commenti Disqus

Come aggiungere un widget Blogger dei commenti recenti di Disqus? É possibile integrare all'interno del tuo blog un widget per i commenti recenti Disqus. Vediamo come fare!
Non è difficile basta seguire i passi che ti indico qui sotto:

Per prima cosa accedi al modello HTML del tuo sito, quindi clicca su "Tema"
Poi "Modifica HTML"
Ora clicca i pulsanti Ctrl + F, in questo modo avvierai la ricerca e scrivi <head>, subito sotto incolla il seguente codice:

Ora cerchiamo il seguente tag ]]></b:skin> e incolliamo subito sopra il seguente codice:

<!—CSS Disqus commenti recenti HelpTecnoBlog.com INIZIO-->
.hel-random{margin:0 5px;border:0;width:100%;overflow:hidden} 
.hel-random .slides{list-style-type:none;margin:0 auto;padding:0} 
.hel-random li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px} 
.hel-random .flex-control-nav li{display:inline-block;margin:0 2px} 
.hel-random .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important} 
.flex-direction-nav .flex-prev{left:-50px} 
.flex-direction-nav .flex-next{right:-50px;text-align:right} 
.hel-random .flex-control-paging{display:none} 
.flex-direction-nav{position:relative;top:-250px} 
.hel-random .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128} 
.hel-random .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px} 
.hel-random li a{color:#0080ff;text-decoration:none} 
.hel-random i{color:#999;padding-right:5px} 
.hel-random .iline{line-height:2em;margin:0;position:relative;top:-90px;background: #62b1fc;padding:3px 10px;display:inline-block} 
.hel-random .icontent{line-height:1.5em;margin-top:5px} 
.hel-random div span{margin:0 5px 0 0;display:inline-block;font-weight:400} 
.hel-random .heltitle{font-family:oswald;font-size:20px;color:#fff;font-weight:400;text-decoration:none;position:relative;top:-90px;background: #43a1f9;padding:15px 10px;display:block} 
.hel-random .heltitle:hover,.hel-random .itotal a:hover{color:#fff;text-decoration:none} 
.hel-random .iedit a{text-decoration:none;color:#999;cursor:pointer} 
.hel-random .iedit:before,.hel-random .iauthor:before,.hel-random .itag:before,.hel-random .icomments:before,.hel-random .idate:before,.hel-random .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff} 
.hel-random .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px} 
.hel-random .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%} 
.hel-random .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px} 
.hel-random .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7} 
.hel-random .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} 
.hel-random .icomments a, .hel-random .itag a{color: #017ac4;font-family:arial;font-size:12px} 
.hel-random .icomments a:hover, .hel-random .itag a:hover{text-decoration:underline} 
.hel-random .itag:before{content:'\f02c';padding:0 3px 0 7px;color:#fff} 
.hel-random .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff} 
.hel-random .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px} 
.hel-random .idate:before{content:'\f073';padding:0 5px;color:#fff}
<!—CSS Disqus commenti recenti HelpTecnoBlog.com FINE-->

Infine possiamo aggiungere andando su Layout Aggiungi elemento HTML/JavaScript e incolliamo il seguente codice, posizione ideale è sotto il post:

<!—CSS Disqus commenti recenti HelpTecnoBlog.com INIZIO-->
<script type="text/javascript"> 
//################### Defaults 
var ListBlogLink = "http://www.helptecnoblog.com"; 
var ListCount = 5;  
var TitleCount = 60; 
var ImageSize = 790; 
$(window).load(function() { 
  $('.mbt-random').flexslider({ 
   animation: "slide", 
    itemWidth: 600, 
itemMargin: 25, 
  directionNav: true, 
       touch: true, 
       slideshowSpeed: 2500, 
      pauseOnHover: true, 
     animationSpeed: 700, 
  }); 
});
var RandomArray = []; 
var TotalPosts  = 0; 
var RandomArray = new Array(ListCount); 
function TotalCount(json) { 
    TotalPosts   = json.feed.openSearch$totalResults.$t 
} 
document.write('<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() { 
    for (var i = 0; i < ListCount ; i++) { 
    for (var j = 0; j < RandomArray.length; j++){ 
    var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1); 
    RandomArray[i] = RandomNum; } 
                                                                  } 
}
</script> 
<div class="flexslider mbt-random">
 
<ul class="slides"> 
<script type="text/javascript"> 
//################### Function Start 
function mbtrand(json) { 
for (var i = 0; i < json.feed.entry.length; i++) 
{  
//################### Variables Declared 
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  ""; 
//################### Category 
if (json.feed.entry[i].category != null) 
{ 
for (var k = 0; k < json.feed.entry[i].category.length; k++) { 
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>"; 
if(k < json.feed.entry[i].category.length-1) 
{ ListTag += ", ";} 
} 
} 
//################### URL 
for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
      if (json.feed.entry[i].link[j].rel == 'alternate') { 
        break; 
      } 
    } 
ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; 
//################### Info 
TotalPosts = json.feed.openSearch$totalResults.$t; 
if (json.feed.entry[i].title!= null) 
{ 
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount); 
} 
if (json.feed.entry[i].thr$total) 
{ 
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>"; 
} 
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" "); 
ListAuthor=ListAuthor.slice(0, 1).join(" "); 
AuthorPic = json.feed.entry[i].author[0].gd$image.src; 
//################### Date Format 
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
ListDate= json.feed.entry[i].published.$t.substring(0,10); 
                         Y = ListDate.substring(0, 4); 
                        m = ListDate.substring(5, 7); 
                         D = ListDate.substring(8, 10); 
                         M = ListMonth[parseInt(m - 1)];                       
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16); 
                         YY = ListUpdate.substring(0, 4); 
                        mm = ListUpdate.substring(5, 7); 
                         DD = ListUpdate.substring(8, 10); 
                         TT = ListUpdate.substring(11, 16); 
                         MM = ListMonth[parseInt(mm - 1)];   
//################### Thumbnail Check 
if (json.feed.entry[i].media$thumbnail) 
{ 
thumbUrl = json.feed.entry[i].media$thumbnail.url; 
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); 
ListImage= "'" + sk.replace("?imgmax=800","") + "'"; 
}
// YouTube scan 
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null) 
{ 
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop(); 
    
    if (youtube_id.length == 11) { 
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'"; 
        } 
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null) 
{ 
// Support For 3rd Party Images 
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]; 
} 
else 
{ 
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofx3uaCz1eRKFJ1rAZ61Jc82wUOOO6I27MFupD-DwRSAo20zoBiLAYrrbXpruXkbfz4ILU3ZZ1P5XvX71zmkrD-eig-ewXbKr8xwzEW41eGQoQvbwe91GybZpT3zsdTkrqGro8B1EvHI/s200/Icon.png'"; 
} 
//###################  Printing List 
var listing = "
<li><div class='flex-div'>
<div class='iFeatured'>
<a  href=" 
+ ListUrl+ 
  "><img src=" 
+ListImage+ 
"/></a></div>
<div class='iline'>
<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>" 
+ListAuthor+ 
"</span><span class='icomments'>" 
+ListComments + 
"</span> <span class='idate'>" 
+ D + 
" " 
+ M + 
"</span><span class='itag'>" 
+ListTag + 
"</span></div>
<a class='mbttitle' href=" 
+ListUrl+ 
"target='_blank'>" 
+ListTitle+ 
"</a></div>
</li>
"; 
document.write(listing); 
} } 
 
for (var i = 0; i < ListCount ; i++) { 
GenerateNum(); 
var scripta = '<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&start-index='+RandomArray[i] + '&max-results=1&callback=mbtrand\"><\/script>'; 
document.write(scripta); 
};
</script> 
</ul>
</div>
<!—CSS Disqus commenti recenti HelpTecnoBlog.com FINE-->

Attenzione dovete modificare con il vostro Url la quarta riga dove è presente il seguente codice: var ListBlogLink = "http://www.helptecnoblog.com" il link in blu sostituitelo con l'url del vostro blog.

Ed ecco fatto, potete vedere altre guide Blogger qui.

Segui Help Tecno Blog sui canali social per rimanere aggiornato sulle ultime novità, basta un click:
-Seguici su Facebook😄
-Seguici su Twitter😀
-Seguici su YouTube😁
-Iscriviti ai Feed😏

Offerte consigliate:

Help Tecno Blog - Guide Internet

Cerca nel blog

Come aggiungere widget Blogger commenti Disqus

Commenti

Posta un commento