WIDGET COM ATUALIZAÇÕES DO TWITTER EM SEU BLOG

Olá Pessoal, hoje irei mostrar para vocês como colocar um widget muito legal, ele mostra as atualizações recentes do seu twitter (twitter updates), onde seus leitores poderão ver seus tweets e então decidir segui-lo através do microblog. O código do widget é extremamente simples e muito fácil de adicionar em seu blog, vamos lá.

Acesse o Painel do Blogger, vá em Layout e Adicionar Gadget do tipo Html/JavaScript  e cole o código a seguir e salve.

<div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF1wRyjQdt_Dzqr5FlurVDo7rDcsEzsy_Ur3oiPJ_JXDKkf5ZZubS348u1-m_Yz1dNpvIDG_NnMshe43jvg5yseFNFuEx3E-nGt1UEFBh7L8tEZ5vTLZ_mnsIlOcYl-PZ7kmKufXhb2OQ/s1600/helperblogger.com-twitter.png" width="64" height="64" alt="Twitter icon" /></div>
<h2 class="tut">Meus Tweets</h2>
</div><div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFZakQe_u1E0H8suKpJ3AxzMpa4tWV1U3zGyccjqgFwJo_OlEtZcuvedYa0iua6Q1y4SSwe_CQtfKPxW0ab7GagdVt3s5-f_BfTrBZwh6rpyXH2yjRBIPj2fEkLwK31MHV6sIX7ENrMI/s1600/helperblogger.com-loading.gif" width="16" height="11" alt="Loading.." /></div><div id="scroll"></div></div><style>/* CSS Document */h2.tut{/* This is the "MY TWEETS" title */    color: white;font-family: "Myriad Pro", Arial, Helvetica, sans-serif;font-size: 16px;padding: 12px 0 0 58px;text-transform: uppercase;/* The CSS3 text-shadow property */    text-shadow: 2px 1px 6px #333;}#twitter-ticker{/* Styling the ticker */    width: 300px;height: 300px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOmTq44jU_Y9KUL0Ic64HStsQl-PyV1BfceeGKQ0YhHWGrRgvsWFNhTIjbBZWgwKAEg6lTEUAOTsUHV1K2NmCA0xIqDQ195WJYBFPHJosORmw3N6Nn2FTSaFKMOWw_rkQL_DqR5FWZ0Tk/s1600/helperblogger.com-slickbg.png) no-repeat #f5f5f5;color: #666666;display: none;/* Rounded corners */    -moz-border-radius: 10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;text-align: left;}#tweet-container{/* This is where the tweets are inserted */    height: 230px;width: auto;overflow: hidden;}#twitIcon{/* Positioning the icon holder absolutely and moving it to the upper-left */    position: absolute;top: -25px;left: -10px;width: 64px;height: 64px;}#top-bar{height: 45px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-eD-YELdZ_OmFQjIPy5WOhnwmx_S_2cHIm_35gREebq3XYTAvlq9IhSb4W-A9AvY6IFWwyxWGJs4mX5Ssc-cYqeqVxA6OEqINd1pAc8NZkBSaFRyogomfpHWvf5FxqpxPZVvlFj9khY/s1600/helperblogger.com-top_bar.png) repeat-x;border-bottom: 1px solid white;position: relative;margin-bottom: 8px;/* Rounding the top part of the ticker, works only in Firefox unfortunately */    -moz-border-radius: 6px 6px 0 0;}.tweet{/* Affects the tweets */    padding: 5px;margin: 0 8px 8px;font-family: calibri;border: 1px solid #F0F0F0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt31NpbYkRyM2REuR56-mJDtQmr9535tQkfKXaNKq9pKkv62LTBdJwhRHklg_qwTrpZzGxdpGn2d7kG0qxlSFXEA4YMaScFCNONMeEs0egWYkORzm0YUfD1tTHNKL0OMn801qnsmw1_w/s1600/helperblogger.com-transparent.png);width: auto;overflow: hidden;}.tweet .avatar, .tweet .user, .tweet .time{float: left;}.tweet .time{text-transform: uppercase;font-size: 10px;color: #AAAAAA;white-space: nowrap;}.tweet .avatar img{width: 36px;height: 36px;border: 2px solid #eeeeee;margin: 0 5px 5px 0;}.tweet .txt{/* Using the text container to clear the floats */    clear: both;}.tweet .user{font-weight: bold;}a, a:visited{/* Styling the links */    color: #00BBFF;text-decoration: none;outline: none;}a:hover{text-decoration: underline;}#loading{/* The loading gif animation */    margin: 100px 95px;}.jScrollPaneContainer{position: relative;overflow: hidden;z-index: 1;}.jScrollPaneTrack{position: absolute;cursor: pointer;right: 4px;top: 0;height: 100%;background: #ddd;}.jScrollPaneDrag{position: absolute;background: #999;cursor: pointer;overflow: hidden;}.jScrollPaneDragTop{position: absolute;top: 0;left: 0;overflow: hidden;}.jScrollPaneDragBottom{position: absolute;bottom: 0;left: 0;overflow: hidden;}a.jScrollArrowUp{display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowUp:hover{/*background-color: #f60;*/}a.jScrollArrowDown{display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowDown:hover{/*background-color: #f60;*/}a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color: #f00;*/}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/jquery.mousewheel.js"></script><script type="text/javascript" src="http://code.helperblogger.com/jScrollPane-1.2.3.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/ticker-script.js"></script><script type="text/javascript">var tweetUsers=['SEU USUÁRIO DO TWITTER'];</script>

Obs: Troque a parte do código destacado em vermelho pelo seu nome de usuário notwiter.

Aproveite e siga-nos no Twitter

Veja um exemplo de como ficará seu widget:

Gostou do widget? Que tal comentar e deixar sua opinião?
Comente logo abaixo é rápido, fácil e grátis.