Adicionando widget news no Blogger

blogger template widget news

Hoje vamos compartilhar um tutorial de CB se você deseja ter em seu blogger um sistema de noticias, é uma vantagem a mais, que você pode criar mais visualização também na questão de visitas isso também é uma boa opção, para mostrar o que há de novo se você deseja, adicionar siga os passos abaixo:


Adicionando o Widget no seu Blog:

Faça login no blogger então va no menu tema editar HTML
então com as teclas combinadas CTRL+F busque por esse código ]]></b:skin> logo acima disso copie e cole o seguinte código:

#breakingnews {
  float: left;
  height: 40px;
  line-height: 42px;
  overflow: hidden;
  width: 100%;
  background: #eee;
  box-shadow: 0 2px 7px -3px #000;
  -ms-box-shadow: 0 2px 7px -3px #000;
  -moz-box-shadow: 0 2px 7px -3px #000;
  -o-box-shadow: 0 2px 7px -3px #000;
}
#recentpostbreaking li a {
color:#949494;
font-family: sans-serif;
font-weight: bold;
}
#recentpostbreaking li a:hover {
color:#e91b23;
}
 #breakingnews .tulisbreaking {
background:#e91b23;
}
 #breakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#breakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
  background: url(http://3.bp.blogspot.com/-xD-8rredGa0/VYhMCriYg2I/AAAAAAAAF1U/8-DoLAjUM04/s1600/ticker-bg.png) no-repeat right center;
  color: #fff;
  float: left;
  font: 700 20px/20px 'Oswald',sans-serif;
  max-width: 155px;
  height: 20px;
  padding: 10px 25px 10px 20px;
  text-transform: uppercase;
}
#recentpostbreaking {
    float: left;
    margin-left: 155px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
div#fontoo {
width: 100%;
display: block;
line-height: 0;
overflow: hidden;
border-bottom: 1px solid #dfdfdf;
}
div#fontoo p {
margin: 0px 30px;
font-size: 16px;
text-shadow: 0 1px 0 #fff;
color: #333;
font-family: 'Ubuntu', Arial, Lucida, sans-serif;
}

Então agora coloque o código html onde desejar pode optar pelo código do template se você sabe programar ou pelo menu layout em adicionar novo gadget HTML/javascript 

então use esse código:



 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='fontoo section' id='fontoo'>
   <div id='breakingnews'>
            <span class='tulisbreaking'>
              DON&#39;T MISS
            </span>
            <div id='recentpostbreaking'>
              Loading...
            </div>
          </div>
          <script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'https://contohblognih.blogspot.com/', // Replace With your Blog Url
                  numpostx  = 20; // Maximum Post
              $.ajax({
                url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
                type: 'get',
                dataType: "jsonp",
                success: function(data) {
                  var posturl, posttitle, skeleton = '',
                      entry = data.feed.entry;
                  if (entry !== undefined) {
                    skeleton = "<ul>";
                    for (var i = 0; i < entry.length; i++) {
                      for (var j=0; j < entry[i].link.length; j++)
                      {
                        if (entry[i].link[j].rel == "alternate")
                        {
                          posturl = entry[i].link[j].href;
                          break;
                        }
                      }                          posttitle = entry[i].title.$t;
                      skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
                    }
                    skeleton += '</ul>';
                    $('#recentpostbreaking').html(skeleton);
                    // kode untuk efek pada breaking news
                    function tick(){
                      $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostbreaking').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>
      </div>
      </b:if>

Salve e pronto



EmoticonEmoticon

Formulário de contato

Nome

E-mail *

Mensagem *