Ads 468x60px

Παρασκευή 18 Οκτωβρίου 2013

Stylish jQuery Recent Posts Ticker

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
παρουσιάσουμε τις τελευταίες αναρτήσεις μας, μέσω ενός πολύ ωραίου και
χρήσιμου widget, το οποίο λειτουργεί σκρολάροντας τους τίτλους των αναρτήσεων!
Eίναι ένα πολύ στυλάτο scrolling Ticker Widget και μπορείτε να δείτε πως λειτουργεί
στο demo!

                                                  
  DEMO



Για να το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--> 
........................................................................................................................................
<center>
 <style type="text/css">  .ticker-controls{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}  .ticker-wrapper.has-js{margin:20px 0px 20px 0px;padding:0px 20px;width:480px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#ebebeb;font-size:0.75em;}  .ticker{width:510px;height:23px;display:block;position:relative;overflow:hidden;background-color:#ebebeb;}  .ticker-title{padding-top:9px;color:#3d9900;font-weight:bold;background-color:#ebebeb;text-transform:uppercase;}  .ticker-content{margin:0px;padding-top:9px;position:absolute;color:#1F527B;font-weight:bold;background-color:#ebebeb;overflow:hidden;white-space:nowrap;line-height:1.2em;}  .ticker-content:focus{:one;}  .ticker-content a{text-decoration:none;color:#1f527b;}  .ticker-content a:hover{text-decoration:underline;color:#1f527b;}  .ticker-swipe{padding-top:9px;position:absolute;top:0px;background-color:#ebebeb;display:block;width:500px;height:23px;}  .ticker-swipe span{margin-left:1px;background-color:#ebebeb;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block;}  .ticker-controls{padding:8px 0px 0px 0px;list-style-type:none;float:left;}  .ticker-controls li{padding:0px;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block;}  .ticker-controls li.jnt-play-pause{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc5si9DWmsZ0XuaDTuovkYH2YWSgV-jaNrr5UHk17u-NzjR3rg0glONz5ep85QncxuAn2lX5CddLBhdVS6mKOs5n4D-BKxvp9gGR3Rw6mz-2n-WnmRCs8XzR0h_Q5J1hY2eKsyRibmMla/s1600/controls.png');background-position:32px 16px;}  .ticker-controls li.jnt-play-pause.over{background-position:32px 32px;}  .ticker-controls li.jnt-play-pause.down{background-position:32px 0px;}  .ticker-controls li.jnt-play-pause.paused{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AxvQWxt7llFKGVGs3JogphMCAG3cKIU9lVW5XtfJf-el_ooJlbQ8s9OrkhqPdt6XBB1fuD8dqByDKz0t5omDDrqKO3bGwg4aoLCi-Qflm698M0Ss8USBGd3GnfJqJV2N1ST3iZa5vwVN/s1600/Ticker-controls.png');background-position:48px 16px;}  .ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px;}.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0px;}.ticker-controls li.jnt-prev{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AxvQWxt7llFKGVGs3JogphMCAG3cKIU9lVW5XtfJf-el_ooJlbQ8s9OrkhqPdt6XBB1fuD8dqByDKz0t5omDDrqKO3bGwg4aoLCi-Qflm698M0Ss8USBGd3GnfJqJV2N1ST3iZa5vwVN/s1600/Ticker-controls.png');background-position:0px 16px;}  .ticker-controls li.jnt-prev.over{background-position:0px 32px;}  .ticker-controls li.jnt-prev.down{background-position:0px 0px;}  .ticker-controls li.jnt-next{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AxvQWxt7llFKGVGs3JogphMCAG3cKIU9lVW5XtfJf-el_ooJlbQ8s9OrkhqPdt6XBB1fuD8dqByDKz0t5omDDrqKO3bGwg4aoLCi-Qflm698M0Ss8USBGd3GnfJqJV2N1ST3iZa5vwVN/s1600/Ticker-controls.png');background-position:16px 16px;}  .ticker-controls li.jnt-next.over{background-position:16px 32px;}  .ticker-controls li.jnt-next.down{background-position:16px 0px;}  .js-hidden{display:none;}  .no-js-news{padding:10px 0px 0px 45px;color:#F8F0DB;}  .left .ticker-swipe{/*left: 80*/left:80px;:/;}  .left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker{float:left;}  .left .ticker-controls{padding-left:6px;}  .right .ticker-swipe{/*right: 80*/right:80px;:/;}  .right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker{float:right;}  .right .ticker-controls{padding-right:6px;}  </style>  <script type="text/javascript">      $(function () {          $('#js-news').ticker({              speed: 0.10,              fadeInSpeed: 600,              controls: false,              titleText: 'Latest articles:'          });      });  </script>  <script src="https://dl.dropbox.com/s/sldtlkhnpu1vd4m/NBT-news-Ticker.js" type="text/javascript"></script>  <script src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΟΥ BLOG ΜΑΣ//feeds/posts/summary?max-results=16&alt=json-in-script&callback=newbloggertips_recentpostticker"></script>
</center>
...................................................................................................................................................................
ΑΛΛΑΓΕΣ
 
width:480px--Εδώ αλλάζουμε το πλάτος του ticker!

  16--Εδώ βάζουμε πόσες αναρτήσεις θέλουμε να αναπαράγονται!

Βάζετε και την διεύθυνση του blog σας προσέξτε τα // να είναι 2, και πατάτε Αποθήκευση! 

Αν θέλετε και άλλες αλλαγές να κάνετε, απο την ΠΗΓΗ που δίνω μπορείτε να πάτε στην
σελίδα του δημιουργού και να χρησιμοποιήσετε τον έτοιμο Generator!

Καλή επιτυχία!!



Edit by vaiol!!!!

 
Αναρτήθηκε από στις 12:00 μ.μ.
Σας άρεσε το άρθρο? Διαδώστε το!

If you enjoyed this Post Please take 5 Seconds to share it and Join Us Our Latest Updates By Email and Social Networks.

Stay Connected With Free Updates!

Follow us!
Ετικέτες ,

0 σχόλια :

Δημοσίευση σχολίου

Εγγραφή σε: Σχόλια ανάρτησης ( Atom )
Icon Icon Icon

spice up your blog


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .