Καθαράω

Amazing Recent Posts Gadget

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

O KΩΔΙΚΑΣ: (βάλτε τον στα 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/AVvXsEjND62B6DbJlFY8k8p427rPdk-vPaiPG5I8xcNUzi5jmW5zllcKfklHlBS4km3kF1UWAddjIpjG52IeyK7qwKNBkI-3n4tbYX73Ns7WN-TeZutVhBHx0qr7Vre7RzWdJQ4tBMq4fOZL4bQ/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/AVvXsEidatpLeMlnHvJxwceYWmB74Auq96UXT4wIkhHnkphuTVBGaJaqXCFyTzKP-ypTM5-EpDWKQ0b4U-eCvXDHwC1ok2Vf9T3lOkeFfXqDP5BQItZSG5mGjAwtO-85sz1w-u4X0nuPrRc672U/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….

Kαι μη ξεχάσετε να βάλετε τη διεύθυνση του blog σας, εκεί που το γράφω, γιατί αλλιώς δεν θα δείξει τίποτα….να ξέρετε οτι οι αναρτήσεις σας πρέπει να έχουν πάντα μια φωτογραφία, αλλιώς θα δείχνει το εικονίδιο, οτι δεν έχει εικόνα……Φυσικά όσοι ξέρουν μπορούν να κάνουν πολλές αλλαγές σε διατάσεις και χρώματα, αφού τον κώδικα σχεδιασμού (css) σας τον δίνω ανοιχτό…

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !

πηγη

Διαβάστε περισσότερα

Σταθερή πλευρική μπάρα με κουμπί κλεισίματος.

Ο παρακάτω κώδικας δημιουργεί μια σταθερή πλευρική μπάρα για τις διαφημίσεις σας ή ότι άλλο νομίζετε.Συνόδευται και από κουμπί κλεισίματος ,ώστε αν κάποιος το βρίσκει ενοχλητικό να το κλείνει.

Τη μπάρα μπορείτε να τη δείτε ζωντανά εδώ.

Τώρα το μόνο που έχετε να κάνετε είναι να ρυθμίσετε τη μπάρα ώστε να εμφανίζεται στο σωστό σημείο.Για ρύθμιση του ύψους που θα εμφανίζεται αυξομειώστε αντίστοιχα το πράσινο .Για ρύθμιση του πλάτους στο οποίο θα εμφανίζεται ρυθμίστε το κόκκινο .Το κίτρινο ρυθμίζει το πλάτος της μπάρας.Ενώ το γαλάζιο το ύψος της μπάρας.

πηγη

Διαβάστε περισσότερα

ΠΡΟΣΦΑΤΕΣ ΑΝΑΡΤΗΣΕΙΣ ΜΕ ΤΙΤΛΟΥΣ ΠΕΡΙΓΡΑΦΗ, ΕΙΚΟΝΕΣ, & SCROLL BAR

Αυτό το widget εμφανίζει τις πιο πρόσφατες αναρτήσεις με τίτλους, περιγραφή, εικόνες και scroll bar. Μπορεί να εμφανίσει ακόμα και όλες τις αναρτήσεις σας αν αλλάξετε τον αριθμό των αναρτήσεων που θα εμφανίζονται. Είναι ιδανικό για μία σελίδα αρχειοθήκη αλλά μπορείτε να το βάλετε ακόμα και σε κάποια πλευρική μπάρα. Οι διαστάσεις μπορούν να αλλάξουν αν αλλάξετε τα γαλάζια νούμερα. Ο αριθμός των χαρακτήρων του τίτλου αλλάζει αλλάζοντας το νούμερο με το ρόζ χρώμα.

DEMO

Ο αριθμός των χαρακτήρων της περιγραφής αλλάζει αλλάζοντας το νούμερο με το πορτοκαλί χρώμα. Το μέγεθος των εικόνων των αναρτήσεων αλλάζει αλλάζοντας το νούμερο με το μώβ χρώμα. Ο σύνδεσμος του blog σας πρέπει να αντικαταστήσει τον σύνδεσμο του δικού μου blog ο οποίος είναι με πράσινο χρώμα. Τέλος ο αριθμός των αναρτήσεων που θα εμφανίζονται αλλάζει αλλάζοντας τα κίτρινα νούμερα τα οποία είναι 2, ένα στην μέση του κώδικα και ένα στο τέλος.

var numberOfPosts = 43;

var showPostDate = true;

var showSummary = true;

var summaryLength = 400;

var titleLength = 100;

var showCommentCount = true;

var showThumbs = true;

var showNoImage = true;

var imgDim = 80;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = false;

</script>

πηγη

Διαβάστε περισσότερα

Blogger widget με φόρμα εγγραφής email και κουμπιά κοινωνικής δικτύωσης (Social Media)

Τα κοινωνικά μέσα μαζικής ενημέρωσης θα μπορούσε να είναι μεγάλη πηγή επισκεψιμότητας για κάθε blog. Υπάρχουν πολλές δημοφιλείς ιστοσελίδες κοινωνικής δικτύωσης όπως το Twitter και Facebook. Σήμερα θα σας δώσω ένα πολύτιμο widget στο οποίο εκτός από τα κουμπιά των social media θα περιέχει μια φόρμα εγγραφής εγγραφής για να λαμβάνουν οι αναγνώστες σας πρώτοι τις νέες δημοσιεύσεις σας στο email τους.

Δείτε το demo εδώ

Οδηγίες προσθήκης του widget στο blogger:

Σύνδεση στο blogger και από το μενού του blog μας πάμε στη Διάταξη
Στο σημείο που θέλουμε πατάμε Προσθήκη gadget
Στο παράθυρο που ανοίγει βρίσκουμε το HTML/JavaScript, το πατάμε και βάζουμε μέσα εκεί τον πιο κάτω κώδικα

Σημαντικό*: Όπου βλέπετε τα κόκκινα links που έχω μέσα στον πιο κάτω κώδικα θα πρέπει να τα αντικαταστήσετε με τα δικά σας Social.

<!- Thesis Email Subscribe Widget -> <div id="sidebars"> <ul class="sidebar_list"> <li id="social-profiles"> <ul> <li> <a class="social facebook" rel="nofollow" target="_blank" title="Σελίδα στο Facebook" href="https://www.facebook.com/blogger.money.tricks.tips.hacking">Facebook</a> </li> <li> <a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/lefta4klik">Twitter</a> </li> <li> <a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/u/0/b/115742708282537896154/+Lefta4klikBlogspotGr/posts">GooglePlus</a> </li> <li> <a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/lefta4klik">Rss</a> </li> <li> <a class="social youtube" rel="nofollow" target="_blank" title="Κανάλι στο Youtube" href="http://www.youtube.com/user/maxhteccc">Youtube</a> </li> </ul> </li> <li id="sidebar-social"> <div id="email-form"> <h6>Για να ενημερώνεστε για τα Νέα μας στο email σας</h6> <form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Εισάγετε το email σας" /> <input type="hidden" value="InfozGuide" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="button" type="submit" value="Υποβολή" /> <br/> </form> <br/> <span style=" line-height:0px; font-size:6px; margin-left:267px;"> <a style="color:#000000;" href="http://lefta4klik.blogspot.gr/">lefta4klik</a> </span> </div> </li> </ul> </div> <style> #sidebars { border: 0 none; float: right; padding: 0 15px; width: 310px; } #email-notice { background: none repeat scroll 0 0 #66CCFF; color: #000000; font-size: 14px; line-height: 1.5; margin: 0 0 20px; padding: 15px 20px; position: relative; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } #email-notice span { border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 10px solid #66CCFF; bottom: -10px; height: 0; position: absolute; right: 40px; width: 0; } #email-form { background: none repeat scroll 0 0 padding-box #313131; border-bottom: 5px solid #202020; border-radius: 2px 2px 2px 2px; text-shadow: 0 -1px 0 #000000; } #email-form h6 { color: #FFFFFF; font-family: arial; font-size: 16px; font-weight: bold; letter-spacing: 0; padding: 15px 20px 0; text-transform: none; } #email-form form { color: #FFFFFF; margin: 0; padding: 20px 18px; } #email-form input.input-text { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #222222; margin: 0 0 10px; padding: 8px; width: 94%; } #email-form .button { background: none repeat scroll 0 0 #FFFFFF; float: right; margin: 0 0 0 10px; } #email-form p { color: #CCCCCC; font-size: 12px; line-height: 18px; margin: 0; } #sidebar-social { float: left; font-size: 12px; margin: 0 0 15px; width: 100%; } ul.sidebar_list { list-style: none outside none; } li.widget ul { list-style: none outside none; } #social-profiles { float: left; } #social-profiles ul { float: left; list-style: none outside none; margin: 0 5px 20px; } #social-profiles ul li { float: left; } #social-profiles ul li a { display: block; float: left; height: 32px; margin: 0 15px; text-indent: -999em; width: 32px; } #social-profiles a.social { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-Wt2m8m2bD5IG89JFAcaomgSLIdYj7zV46viDWTmeeY5Sv2fA786-mp9MOV9pRJCMBHL0L3pB7y1pIhx3SgDHp7DtxO8kGwIg5PdpMBoD2JoT55PkxTMVmnJjUcMqyFMZbYg9kFx7lU/s1600/social.png") no-repeat scroll 0 0 transparent; } #social-profiles a.facebook { background-position: -79px 0; height: 32px; margin: 0 15px 0 5px; width: 32px; } #social-profiles a.facebook:hover { background-position: -79px -74px; height: 32px; width: 32px; } #social-profiles a.twitter { background-position: -5px -111px; height: 32px; width: 32px; } #social-profiles a.twitter:hover { background-position: -42px 0; height: 32px; width: 32px; } #social-profiles a.youtube { background-position: -42px -37px; height: 32px; width: 32px; } #social-profiles a.youtube:hover { background-position: -5px -37px; height: 32px; width: 32px; } #social-profiles a.rss { background-position: -42px -74px; height: 32px; width: 32px; } #social-profiles a.rss:hover { background-position: -79px -37px; height: 32px; width: 32px; } #social-profiles a.googleplus { background-position: -5px 0; height: 32px; width: 32px; } #social-profiles a.googleplus:hover { background-position: -5px -74px; height: 32px; width: 32px; } * { margin: 0; padding: 0; } .custom .sidebar ul.sidebar_list { padding: 15px 0; } </style>

Αποθήκευση και είστε έτοιμοι

πηγη

Διαβάστε περισσότερα

Πως βάζω πίνακα μέσα σε μια ανάρτηση

Με τον παρακάτω κώδικα μπορούμε να βάλουμε ένα πίνακα μέσα στην ανάρτησή μας. Ο πίνακας αυτός μπορεί να έχει όσες στήλες και γραμμές θέλουμε. Οι τίτλοι των στηλών είναι χρωματισμένοι με έντονο κίτρινο χρώμα. Αμέσως μετά ακολουθεί το περιεχόμενο των γραμμών του πίνακα που είναι χρωματισμένο με πορτοκαλί χρώμα. Μπορείτε αν θέλετε να αφαιρέσετε όσες στήλες ή γραμμες θέλετε. Για να αφαιρέσετε μία γραμμή διαγράψτε όλην την ενότητα που βρίσκεται μεταξύ του <tr> και του </tr> μαζί με αυτά.

Αν θέλετε να διαγράψετε μία στήλη διαγράψτε μία γραμμή που περιέχει το όνομα της στήλης π.χ. <th>LABEL J</th>.

Για να ρυθμίσετε το πλάτος του πίνακα αλλάξτε το width:960px; Για να ρυμθίσετε το ύψος της κάθε γραμμής αλλάξτε το height:20px;

Για να ρυθμίσετε το πάχος της γραμμής του περιγράμματος των κελλιών και το χρώμα του αλλάξτε το (border:1px solid #FBBB22).

LABEL A	LABEL B	LABEL C	LABEL D	LABEL E	LABEL F	LABEL G	LABEL I	LABEL J	LABEL K
CELL A1	CELL A2	CELL A3	CELL A4	CELL A5	CELL A6	CELL A7	CELL A8	CELL A9	CELL A10
CELL B1	CELL B2	CELL B3	CELL B4	CELL B5	CELL B6	CELL B7	CELL B8	CELL B9	CELL B10
CELL C1	CELL C2	CELL C3	CELL C4	CELL C5	CELL C6	CELL C7	CELL C8	CELL C9	CELL C10
CELL D1	CELL D2	CELL D3	CELL D4	CELL D5	CELL D6	CELL D7	CELL D8	CELL D9	CELL D10
CELL E1	CELL E2	CELL E3	CELL E4	CELL E5	CELL E6	CELL E7	CELL E8	CELL E9	CELL E10

.mytable {width:960px;background-color:#173374;color:#FFFFFF;font-size:13px;border-collapse:collapse;}

.mytable th {background-color:#207907;color:white;}

.mytable td, .mytable th {padding:5px;border:0; }

.mytable td {font-family:Arial; border:1px solid #FBBB22;height:20px;}

</style>

<tr>

<th>LABEL A</th>

<th>LABEL B</th>

<th>LABEL C</th>

<th>LABEL D</th>

<th>LABEL E</th>

<th>LABEL F</th>

<th>LABEL G</th>

<th>LABEL I</th>

<th>LABEL J</th>

<th>LABEL K</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

πηγη

Διαβάστε περισσότερα

ΚΥΛΙΟΜΕΝΑ LINKS ΜΕ ΠΡΟΤΕΙΝΟΜΕΝΑ ΑΡΘΡΑ

Με τον παρακάτω κώδικα θα εμφανίζεται μία μπάρα στο πάνω ή το κάτω μέρος του ιστολογίου σας που θα περιέχει κινούμενα links με προτεινόμενα άρθρα από το ιστολόγιό σας ή και εξωτερικά. Μπορείτε να μην βάλετε καθόλου συνδέσμους αν θέλετε και στη θέση τους να βάλετε το σύμβολο της δίεσης (#). Μπορείτε να αλλάξετε τα χρώματα με αυτά που αρέσουν σε εσάς. Μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς, το ύψος και το πλάτος της οριζόντιας μπάρας καθώς και την θέση που θα εμφανίζεται top ή bottom, left ή right.

<style>

#movingtitles

{

top:0px;

left:250px;

z-index:9999999;

position:fixed;

width:100%;

height:30px;

background:#760991;

color:#FFFFFF;

font:14px Arial;

box-shadow:2px 2px 5px #444444;

-moz-box-shadow:2px 2px 5px #444444;

-web-kit-box-shadow:2px 2px 5px #444444;

-goog-ms-box-shadow:2px 2px 5px #444444;

}

#movingtext

{

text-align:center;

padding:5px;

font-family: Arial, Verdana, Serif;

font-size:12px;

color:#FFFFFF;

}

#movingtext a

{

color:#FFFFFF;

text-decoration:none;

font:14px Arial;

}

#movingtext a:hover

{

color:yellow;

text-decoration:none;

}

</style>

<marquee behavior='scroll' direction="left"

scrollamount="8"

onmouseover="this.stop();"

onmouseout="this.start();">

<a href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html" target="_blank"><b>1...ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ. (Τοποθετήται σαν gadget)…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html" target="_blank"><b>2...ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΣΑΝ GADGET…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html" target="_blank"><b>3...ΠΩΣ ΒΑΖΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ (HTML+CSS μαζί σαν gadget)…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html" target="_blank"><b>4...ΠΩΣ ΒΑΖΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html" target="_blank"><b>6...ΠΩΣ ΒΑΖΩ ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ SCROLL BAR…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2013/07/widgets-for-all.html" target="_blank"><b>7...ΛΙΣΤΑ ΜΕ 150 WIDGETS…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2014/05/blog-post.html" target="_blank"><b>8...ΚΥΛΙΟΜΕΝΟ ΚΕΙΜΕΝΟ ΜΕ ΓΝΩΜΙΚΑ…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2014/05/links.html" target="_blank"><b>9...ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΑ LINKS…</b></a>

<a href="http://the-best-widgets.blogspot.gr/2014/05/link.html" target="_blank"><b>10...ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΕΣ ΕΙΚΟΝΕΣ ΜΕ LINKS…</b></a>

</marquee></div></div>

πηγη

Διαβάστε περισσότερα

Mega Menu Κατηγορίες

Σελίδες Topbar

Ticker / Έκτακτη είδηση

Επιλογή κατηγορίας

Επιλογή κατηγορίας

Επιλογή κατηγορίας

Επιλογή κατηγορίας

Επιλογή κατηγορίας

Επιλογή κατηγορίας

Επιλογή κατηγορίας

Κατηγορίες

Καθαράω

Amazing Recent Posts Gadget

Σταθερή πλευρική μπάρα με κουμπί κλεισίματος.

ΠΡΟΣΦΑΤΕΣ ΑΝΑΡΤΗΣΕΙΣ ΜΕ ΤΙΤΛΟΥΣ ΠΕΡΙΓΡΑΦΗ, ΕΙΚΟΝΕΣ, & SCROLL BAR

Blogger widget με φόρμα εγγραφής email και κουμπιά κοινωνικής δικτύωσης (Social Media)

Πως βάζω πίνακα μέσα σε μια ανάρτηση

ΚΥΛΙΟΜΕΝΑ LINKS ΜΕ ΠΡΟΤΕΙΝΟΜΕΝΑ ΑΡΘΡΑ