Anasayfa
Hakkımda
Reklam
İletişim
v4
Panelden Düzenleyiniz
Burayı panelden düzenleyebilir ve yazı ekleyebilirsiniz.
sipsiv2
Panelden Düzenleyiniz
Burayı panelden düzenleyebilir ve yazı ekleyebilirsiniz.
wordpress seo
Panelden Düzenleyiniz
Burayı panelden düzenleyebilir ve yazı ekleyebilirsiniz.

Blogger Jquery Son Twitler Eklentisi

6 saat önce Onur BATUR tarafından yazılmıstır.

Blogger Jquery Son Twitler Eklentisi


Blogger Jquery Son Twitler Eklentisi Widgets


Blogunuzun bir köşesinde , twitter hesabınızdan yazdığınız son yazılarınızı göstermek istermisiniz ?

Jquery ile hazırlanmış , son twitlerim eklentisi ile , twitter yazılarınızı blogger blogunuzdan ziyaretçilerinizle paylaşabilirsiniz..


Hemen anlatıma geçelim..

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..
<div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN3oGPzsa0Cfr7sFNsJuHGCT-RFEUVannWOAkkwvTsy1Fu5nk1p6mzxEl7UHQbOTadAt3xSvSa0wSyi116fVmdBE4ncp7LucWsVYID_mhC69Yp5iDONMC13Ts4hSnFgrbVBzK6kU3f99I/s1600/helperblogger.com-twitter.png" width="64" height="64" alt="Twitter icon" /></div><h2 class="tut">Son Yazdıklarım</h2></div><div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelZzFfiyPjnR597t_Dp8Ixg6T_rujJA71hFtM3jN7Mao3vVyyI7QM0AugcvARYeR0zVEoQFDCxNOqzMIdievCzAes5E1LF5pg_Y4JkHXVf1hsPdcSNzurmdZm-AJluTlFwnuC0uaHRug/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/AVvXsEjV5ff0_qq3nQkEnt19L2OzcX3fFgJYvEpD8-CnwLZOXhNOkDl2qu-FytuUgV0fBqqFSn6cNcxa988HJwecNhmzphdHXCwVaCpevk6galwK1cEJdXISEtSScvri89Z7C_aJoVJt2vhzYlw/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/AVvXsEiOfzSTS7_2S6M0eK7BC29c94FuLKxArsSHHqRj4qm6Ki4u3fFhzpdmI58SOI9zgTTLtMNaVJiEzhtV97gxLSbiRwre4KX0HHLua1JCN2beHEx4a5wHi7RPkECNXqST7BHuswQ6H401M08/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/AVvXsEhZbM1Di7ORVuJgFmFgrE5vdHgQDxRPv2qAG3P1NickBBSmw0OL_LqLxj-1kFV6l0Z9z33SUP7J5WsoQuhGZazI7DpmiSF04YU30j-_j5lgg57QqvqvTK9cbYo0o9_Cm-6bPI9_k3fEjh0/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=['
BloggerEklenti'];</script>
Yukarıdaki kod içinde geçen , kırmızı ile yazılmış BloggerEklenti Yerine kendi blog adresinizi , mavi le yazılmış olan width: 300px;height: 300px; değerlerini değiştirerek ise eklentinin genişlik ayarlarını düzenleyebilirsiniz..
Benzer Yazılar
Yorumlar ( Yorum Yok )

Bu sitede yayınlanan yazılar kaynak gösterilmeden alıntı yapılamaz. Tüm hakları saklıdır.