Πρόσφατες δημοσιεύσεις Ένα εκπληκτικό Gadget / Amazing Recent Posts Gadget

   Φίλοι bloggers, το gadgets που θα σας παρουσιάσω είναι πανέμορφο και πρακτικό… αντέχει τη παρουσίαση πολλών  αναρτήσεων, και τις παρουσιάζει με πολύ όμορφο σχεδιασμό και κείμενο σε tooltip. DEMO θα βρείτε στη σελίδα του φίλου μας pan de lees όπου έχει βάλει να φαίνονται πάνω από 50 αναρτήσεις…

   Ο κώδικας: βάλτε τον στα gadgets => HTML/Javascript….

<style type="text/css">
#post-gallery {
 width:537px;
 margin:0px auto;
 font:normal 11px Arial,Sans-Serif;
 color:#494848;
 padding:8px;
 background-color:#FFFFFF;
 -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
 -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
 box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
 border-radius:2px;
}
#post-gallery h2 {
 font:20px Arial,Sans-Serif;
 color:white;
 text-shadow:0px 3px 2px black;
 text-transform:uppercase;
 margin:2px 2px 2px;
 padding:7px 14px;
 background-color:#616364;
 text-align: center;
}
#post-gallery .rp-item {
 float:left;
 display:inline;
 position:relative;
 margin:2px;
 padding:0px 0px;
 background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-vldnSyKl7xgleQvhy4OvvCt10d5LgE2arQUTmlwrl5Wbh73GEaRA0A7QG0yfJ_oNRLgvI4LSHw7y_LbQAkq1XQK4lHQae267jsUrecyXj5mebgRyyuKPnfjnvU1nuiI7dwa4FhLZqio/s48/loading.gif') no-repeat 50% 50%;
 width:72px;
 height:72px;
}
#post-gallery .rp-item img {
 width:72px;
 height:72px;
 border:none !important;
 margin:0px 0px !important;
 padding:0px 0px !important;
 background:transparent !important;
 display:none;
}
#post-gallery .rp-item .rp-child {
 position:relative;
 top:10%!important;
 left:10%!important;
 z-index:1000;
 width:200px;
 background-color:white;
 border-top:2px solid #FA7C19;
 -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
 -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
 box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
 padding:10px 15px;
 overflow:hidden;
 word-wrap:break-word;
 display:none;
 opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
 font-size:12px;
 margin:0px 0px 5px;
 color:#1335CC;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://dr-blogger.com/files/scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "Latest Posts", // Widget Title
 numposts = 21, // The number of thumbnail / posts to display
 numchar = 200, // Number of characters in the description tooltip
 rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
 pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFpra5UdTg3qGWMJrvpLDl7Av-irKEtE6BybprfK8cV8opCpNcQxNIAHLiWMs7U_Z-755wTim3kwW9OHLe0yZPqeWOtLIQowbi3TQeiUmk5sNTdogwT-djBtHJh7mjHGotJXkD3ygqWg/s299/notavailable.jpg", // Image that show up if the post doesn't have a image
 blogURL = "EΔΩ ΒΑΛΤΕ ΤΗ ΔΙΕΥΘΥΝΣΗ ΤΟΥ BLOG ΣΑΣ"; // Your Blog Address
</script>
<script src="http://dr-blogger.com/files/scripts/post-gallery.js" type="text/javascript"></script>

   Προσοχή:  Δουλεύει ΜΟΝΟ σε blog του blogger και όχι σε WordPress
   *εκεί που λέει: width:537px; βάλτε το μέγεθος που σας βολεύει, ανάλογα με το πού θα βάλετε το gadget….
   Και μη ξεχάσετε να βάλετε τη διεύθυνση του blog σας, εκεί που το γράφω, γιατί αλλιώς δεν θα δείξει τίποτα. Να ξέρετε ότι οι αναρτήσεις σας πρέπει να έχουν πάντα μια φωτογραφία, αλλιώς θα δείχνει το εικονίδιο, ότι δεν έχει εικόνα. Φυσικά όσοι ξέρουν μπορούν να κάνουν πολλές αλλαγές σε διατάσεις και χρώματα, αφού τον κώδικα σχεδιασμού (css) σας τον δίνω ανοιχτό…
   Μην ξεχάσετε να αφαιρέσετε το Continue to article » όλο το λινκ.
   ΚΑΛΗ ΕΠΙΤΥΧΙΑ !

bloghelp.gr