În acest tutorial am să explic cum se instalează în blog un box, care arată în mod dinamic ultimele tale tweeturi.
Îl poți vedea în subsolul blogului meu de testări.
Boxul poate fi instalat în orice parte a blogului, inclusiv ca un gadget HTML-java-script.
În cazul meu a fost unstalat în subsolul blogului (footer).
Dispunem de trei tipuri de cod:
- HTML, care se pune nemijlocit în secția subsolului;
- CSS, cu care setăm stilul elementului;
- jQuery-script, în baza căruia funcționează elementul în cauză;
Mai există și trei linkuri, care duc spre librăriile cu scripturi — acestea v-or fi amplasate înaintea scriptului jQuery, în așa mod cum sunt deja incluse în codul de mai jos.
Înainte de a începe schimbările în șablon — nu ezita de a face o copie de rezervăGăsim în șablonul blogului rîndul de cod <div id='footer'> și sub el punem codul HTML, ce ar însemna că boxul se va afla în subsolul blogului.
                   HTML
<div id="loefa-cebook-twt">
<div class="wrapper">
<a href="#" id="prev-tweet"></a>
<a href="#" id="next-tweet"></a>
<div id="manuk" alt="Tweets" />
<div id="lc-twt">
<ul class="tweet_list"></ul>
</div>
</div>
</div>
Pentru următoarele coduri găsim rîndul </head>. Deasupra lui punem stilul CSS
                  CSS
<style>
#loefa-cebook-twt{
position: relative;
background: #00274d url(http://4.bp.blogspot.com/-a7rq6eL5KLc/T-M3T97aPyI/AAAAAAAAAqs/3laejE23RvM/s000/bor.png) no-repeat bottom center;
height: 80px;
font-family: &#39;Antic Didone&#39;, serif;
width: 100%;
margin:0px auto;
border-bottom:3px solid #00274d;
}

#loefa-cebook-twt #manuk{
background: url(http://lh5.googleusercontent.com/-O7huEF3Hx3c/UKqv8A4OUWI/AAAAAAAADgY/DAfJ-xPd1lg/s120/twt-bg.png) no-repeat top left;
position: relative;
top: 10px;
margin:0px auto;
width:120px;
height:30px;
}

#loefa-cebook-twt #prev-tweet{
margin-top:2px;
display: block;
position: absolute;
top: 3px;
right: 30px;
width: 15px;
height: 10px;
background: url(http://lh5.googleusercontent.com/-2Me8tlj9wr4/UKtmyI9xxnI/AAAAAAAADhE/PJ4YucvlON4/s15/top.png
) no-repeat;
}

#loefa-cebook-twt #next-tweet{
margin-top:2px;
display: block;
position: absolute;
top: 15px;
right: 29px;
width: 15px;
height: 10px;
background: url(http://lh6.googleusercontent.com/-Z0GbBVA0oAA/UKtmyLKCWCI/AAAAAAAADhE/EbEWzNtYt84/s15/btm.png) no-repeat;
}

#loefa-cebook-twt #lc-twt .tweet_list{
display: block;
position: absolute;
top: 40px;
width: 100%;
text-align:center;
height: 25px;
}

#loefa-cebook-twt #lc-twt .tweet_list li{
display: block;
width: 100%;
height: 25px; /* original height 170px */
font-size: 12px;
line-height: 1.5em;
text-align:center;
font-style: italic;
color: #838383;
margin:0px 0px 0px 0px;
padding:2px 0px 0px 10px;
}

#loefa-cebook-twt #lc-twt .tweet_list li .tweet_time a{
text-decoration: none;
color: #9ef296;
}

#loefa-cebook-twt #lc-twt .tweet_list li a{
text-decoration: none;
color: #00ff00;
}

#loefa-cebook-twt #lc-twt p.loading{
margin-left: 200px;
color: #9ef296;
padding-top: 2px;
font-style: italic;
}
</style>
Tot aici, în continuare punem și codul scriptului împreună cu linkurile, despre care am amintit mai sus
                 J-Query
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://loefa-cebook.googlecode.com/files/jquery.tweet.js' type='text/javascript'/>
<script src='http://loefa-cebook.googlecode.com/files/jquery.cycle.all.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
 
    $(&quot;#lc-twt&quot;).tweet({
        username: &quot;TWITTER_USERNAME&quot;,
        count:20, //INDICĂ NUMĂRUL DE TWEETURI PENTRU A FI DEMONSTRATE //
        callback: loefa_roll
    });
  
 function loefa_roll(){
     $(&#39;#lc-twt .tweet_list&#39;).cycle({
   fx: &#39;scrollVert&#39;, //arah slide, &quot;scrollHorz&quot; untuk horizontal, &quot;scrollVert&quot; untuk vertikal //
   speed: 3000, //VITEZA, CU CARE SE SUBSTITUIE TWEETURILE //
   timeout: 2000, // DURATA DE DEMONSTRARE A TWEETULUI //
   pause: 1, //set 1, untuk mem-pause saat &quot;mouse hover&quot; //
   next: &#39;#loefa-cebook-twt #next-tweet&#39;,
   prev: &#39;#loefa-cebook-twt #prev-tweet&#39;
  });
 }
  
 // navigasi //
 $(&quot;#loefa-cebook-twt #prev-tweet&quot;).hover(function() {
  $(this).stop().animate({
   top: &quot;2&quot;
  }, &quot;fast&quot;);
 } , function() {
  $(this).stop().animate({
   top: &quot;3&quot;
  }, &quot;fast&quot;);
 });
  
 $(&quot;#loefa-cebook-twt #next-tweet&quot;).hover(function() {
  $(this).stop().animate({
   top: &quot;16&quot;
  }, &quot;fast&quot;);
 } , function() {
  $(this).stop().animate({
   top: &quot;15&quot;
  }, &quot;fast&quot;);
 });
 });
</script>
După instalarea în blog a tuturor elementelor, găsim fragmentul de cod din script username: &quot;TWITTER_USERNAME&quot;, , unde foarte atent substitui fragmentul TWITTER_USERNAME cu datele din contul tău Twitter.
Previzualizează rezultatul și dacă e ok—salvează schimbările din șablon.
NB! Imaginile
— http://4.bp.blogspot.com/-a7rq6eL5KLc/T-M3T97aPyI/AAAAAAAAAqs/3laejE23RvM/s000/bor.png
— http://lh5.googleusercontent.com/-O7huEF3Hx3c/UKqv8A4OUWI/AAAAAAAADgY/DAfJ-xPd1lg/s120/twt-bg.png
— http://lh5.googleusercontent.com/-2Me8tlj9wr4/UKtmyI9xxnI/AAAAAAAADhE/PJ4YucvlON4/s15/top.png
— http://lh6.googleusercontent.com/-Z0GbBVA0oAA/UKtmyLKCWCI/AAAAAAAADhE/EbEWzNtYt84/s15/btm.png
sunt găzduite de diferite surse! Pentru o bună funcționare a elementului îți recomand să faci un copy-paste în PC pentru a fi transferate în albumul tău de fotografii Picasa.
În ultimele săptămâni am dezactivat widgetul comentariilor din cauza unor dereglări. Din acest motiv, dacă aveți nevoie de ajutor — puteți să mă contactați în pagina de contact.
Sursa: loefa-cebook.blogspot.com