Twitter Feed Vticker Untuk Widget Blogspot

By:
Twitter yang menawan bisa sobat, bisa gunakan diwidget blogspot sobat, agar status twitter selalu muncul di blog. Lihat Contoh


Ada beberapa langkah untuk membuatnya, karena ini menggunakan script js pastinya harus masuk gadget dan masukan kode script jsnya, langsung saja sob.
1. Masuk ke Blogger.
2. Pilih Layout.













3. Pilih Gadget.









4. Pilih HTML/ Javascript.






















5. Masukan Scritp dibawah ini.



 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
 .twitterFeed
{
 font-family: Arial, Helvetica, sans-serif;
 font-size: small;
 width: 300px;
 margin-bottom: 1em;
    
}
.twitterFeed a
{
 color: red;
 text-decoration: none;
}
.twitterFeed a:hover
{
 color: blue;
 text-decoration: underline;
}
.twitterFeed a img { border: none; }
.twitterFeed img
{
 float: left;
 margin: 0 1em 1em 0;
}

.twitterHeader {display:none}
.twitterHeader span
{
 font-weight: bold;
 font-size: 2.2em;
}

.twitterBody
{ 
color:white;
 clear: left;
 border:inset 5px #000000;
    -moz-border-radius-topleft: 75px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:75px;
    -webkit-border-top-left-radius:75px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:75px;
    border-top-left-radius:75px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:75px;
 -moz-box-shadow: 0px 8px 36px #1bb0b5;
    -webkit-box-shadow: 0px 8px 36px #1bb0b5;
    box-shadow: 0px 8px 36px #1bb0b5;


      





}
.twitterRow p a { text-decoration: underline; }
.twitterRow p a:hover { text-decoration: none; }
.twitterRow img, .twitterRow h4, .twitterRow div
{
 margin: 0;
 padding: 0.5em;
}
.twitterRow p { margin-left: 70px; padding-bottom: 0.5em;color: #000; }

.tweetName a, .tweetTime
{
 font-weight: bold;
 color: #444;
}
.tweetName
{
 float: left;
 font-size: 1.2em;
}
.tweetTime { text-align: right; }

#ticker1 .odd { background-color: #; }
#ticker1 .even { background-color: #; }

#ticker2 .odd { background-color: #; }
#ticker2 .even { background-color: #; }
</style>


<script type="text/javascript">
/*
* Tadas Juozapaitis ( kasp3rito@gmail.com )
*/
(function($){
$.fn.vTicker = function(options) {
 var defaults = {
  speed: 700,
  pause: 4000,
  showItems: 10,
  animation: '',
  mousePause: true,
  isPaused: false
 };

 var options = $.extend(defaults, options);

 moveUp = function(obj2, height){
  if(options.isPaused)
   return;
  
  var obj = obj2.children('ul');
  
     first = obj.children('li:first').clone(true);
  
     obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
         $(this).children('li:first').remove();
         $(this).css('top', '0px');
        });
  
  if(options.animation == 'fade')
  {
   obj.children('li:first').fadeOut(options.speed);
   obj.children('li:last').hide().fadeIn(options.speed);
  }

     first.appendTo(obj);
 };
 
 return this.each(function() {
  var obj = $(this);
  var maxHeight = 0;

  obj.css({overflow: 'hidden', position: 'relative'})
   .children('ul').css({position: 'absolute', margin: 0, padding: 0})
   .children('li').css({margin: 0, padding: 0});

  obj.children('ul').children('li').each(function(){
   if($(this).height() > maxHeight)
   {
    maxHeight = $(this).height();
   }
  });

  obj.children('ul').children('li').each(function(){
   $(this).height(maxHeight);
  });

  obj.height(maxHeight * options.showItems);
  
     var interval = setInterval(function(){ moveUp(obj, maxHeight); }, options.pause);
  
  if(options.mousePause)
  {
   obj.bind("mouseenter",function(){
    options.isPaused = true;
   }).bind("mouseleave",function(){
    options.isPaused = false;
   });
  }
 });
};
})(jQuery);
</script>


<script type="text/javascript">

(function($){$.fn.twitterfeed=function(username,options){var defaults={limit:10,header:true,tweeticon:true,tweetname:true,tweettime:true};var options=$.extend(defaults,options);return this.each(function(i,e){var $e=$(e);if(!$e.hasClass('twitterFeed'))$e.addClass('twitterFeed');if(username==null)return false;var url='http://twitter.com/statuses/user_timeline/'+username+'.json';var params={};params.count=options.limit;jQuery.ajax({url:url,data:params,dataType:'jsonp',success:function(o){_callback(e,o,options);}});});};var _callback=function(e,feeds,options){if(!feeds){return false;}
var html='';var row='odd';if(options.header)
var name=feeds[0].user.name;var screenname=feeds[0].user.screen_name;var icon=feeds[0].user.profile_image_url;var link='<a href="http://twitter.com/'+screenname+'/" title="Visit '+name+' on Twitter">';html+='<div class="twitterHeader">'+
link+'<img src="'+icon+'" alt="'+name+'" /></a>'+'<span>'+link+name+'</a></span>'+'</div>';html+='<div class="twitterBody">'+'<ul>';for(var i=0;i<feeds.length;i++){var tweet=feeds[i];var link='<a href="http://twitter.com/'+tweet.user.screen_name+'/" title="Visit '+tweet.user.name+' on Twitter">';html+='<li class="twitterRow '+row+'">';if(options.tweeticon){var icon=tweet.user.profile_image_url;html+=link+'<img src="'+icon+'" alt="'+name+'" /></a>';}
if(options.tweetname){var name=tweet.user.name;html+='<div class="tweetName">'+link+name+'</a></div>'}
if(options.tweettime){var lapsedTime=getLapsedTime(tweet.created_at);html+='<div class="tweetTime">'+lapsedTime+'</div>'}
var text=tweet.text.replace(/(https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/,function(u){var shortUrl=(u.length>30)?u.substr(0,30)+'...':u;return'<a href="'+u+'" title="Click to view this link">'+shortUrl+'</a>';}).replace(/@([a-zA-Z0-9_]+)/g,'@<a href="http://twitter.com/$1" title="Click to view $1 on Twitter">$1</a>').replace(/(?:^|\s)#([^\s\.\+:!]+)/g,function(a,u){return' <a href="http://twitter.com/search?q='+encodeURIComponent(u)+'" title="Click to view this on Twitter">#'+u+'</a>';});html+='<p>'+text+'</p>'
html+='</li>';if(row=='odd'){row='even';}else{row='odd';}}
html+='</ul>'+'</div>'
$(e).html(html);};function getLapsedTime(strDate){strDate=Date.parse(strDate.replace(/^([a-z]{3})( [a-z]{3} \d\d?)(.*)( \d{4})$/i,'$1,$2$4$3'));var todayDate=new Date();var tweetDate=new Date(strDate)
var lapsedTime=Math.round((todayDate.getTime()-tweetDate.getTime())/1000)
if(lapsedTime<60){return'< 1m';}else if(lapsedTime<(60*60)){return Math.round(lapsedTime/60)+'m';}else if(lapsedTime<(24*60*60)){return Math.round(lapsedTime/3600)+'h';}else if(lapsedTime<(7*24*60*60)){return Math.round(lapsedTime/86400)+'d';}else{return Math.round(lapsedTime/604800)+'w';}};})(jQuery);
</script>

<script type="text/javascript">
$(document).ready(function () {
 $('#ticker1').twitterfeed('hendoko').ajaxStop(function() {
  $('#ticker1 div.twitterBody').vTicker({ showItems: 1});
 });

 
});
</script>

<div id="ticker1">
</div>
<a href="http://pendopo2.blogspot.com">&copy;</a>


Dan Ganti nama hendoko (itu nama saya) hehe..ganti dengan nama sobat.

Untuk Jumlah Itemsnya cari kode ini  :


<script type="text/javascript">
$(document).ready(function () {
 $('#ticker1').twitterfeed('hendoko').ajaxStop(function() {
  $('#ticker1 div.twitterBody').vTicker({ showItems: 1});
 });

 
});
</script>


[edit]

1 comment

15 Juli 2013 11.33

Boleh dicoba nie triknya. Terima kasih share'y masbro.....


Pasang INTERNET FASNET PLUS TV KABEL FIRSTMEDIA
Pasang FIRSTMEDIA internet speed hingga 100mbps + CHannel TV HD hingga 50HD hub 087777313417 only SMS