Blogger Tips: Post Divider & Slider Post

31/1/14

Με το σημερινό ποστ θα σας δώσω δυο gadget για να διακοσμήσετε όμορφα το blog σας! 

Blogger Tips: Post Divider & Slider Post
Blogger Tips: Post Divider & Slider Post


Post Divider

Ίσως αναρωτιέστε τι είναι αυτό, θα σας πω αμέσως!
Πρόκειται για την εικόνα που μπαίνει κάτω από κάθε ανάρτηση όπως έχω εγώ και φαίνεται παρακάτω εικόνα.



Την συγκεκριμένη εικόνα μπορείτε να φτιάξετε μια δική σας (αυτό έχω κάνει και εγώ) για να είναι και μοναδική όπως και το blog σας, με την βοήθεια του site επεξεργασίας φωτογραφιών picmonkey.com και στην συνέχεια ανεβάζοντας την φωτογραφία στο photobucket.com, ακολουθώντας τον τρόπο που σας είχα δείξει στο “Οριζόντιο μενού με εικόνες”.

Εγώ εδώ έχω χρησιμοποιήσει διαστάσεις 590 x 43.


Αν πάλι την βρίσκετε βαρετή την διαδικασία μπορείτε κάνοντας αναζήτηση στις εικόνες google βάζοντας "post divider", εκεί θα σας βγάλει πολλές και μπορείτε να αντιγράψετε την url (ή αλλιώς το λινκ της φωτογραφίας).


Στην συνέχεια ακολουθήστε την διαδικασία:
Πρότυπο=>Προσαρμογή=>Προηγμένη=>Προσθήκη CSS 


Εκεί προσθέστε τον παρακάτω κώδικα:

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(Προσθέστε εντός το link της δικής σας φωτογραφίας);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:3.5em;



Slider Post




Βασικά δεν το έχω βάλει στο blog μου ακόμα και έτσι δεν το έχω ψάξει λεπτομερώς, επειδή το θεωρώ λίγο βαρύ και κάνει το blog να αργεί ανοίξει. Ωστόσο επειδή μου το ζητήσατε έψαξα στα ήδη υπάρχοντα σε ξένα και ελληνικά και σας βρήκα το καλύτερο με τα πιο εντυπωσιακά εφέ το οποίο προέρχεται από dr-blogger.com.


Είναι αυτόματο και δεν χρειάζεται να ανανεώνεται τίποτα.

Διαδικασία:
Διάταξη=>Προσθήκη gadget =>HTML/JavaScript

επικολλήστε τον παρακάτω κώδικα: 

<!--   begin post slider  -->
<style scoped="" type="text/css">

#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}

.coin-slider{overflow:hidden;zoom:1;position:relative}

.coin-slider a{text-decoration:none;outline:none;border:none}

.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
var AutoCoinConfig = {
 url_blog: "Προσθέστε το λινκ του blog σας",
 MaxPost: 8,
 cmtext: "comments",
 MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "comment number",
 imageSize :500,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'prev',
 nextText: 'next'
};
</script>
<script src="http://dr-blogger.com/files/scripts/coinslider.js" type="text/javascript"></script>
<!--  end post slider  -->



Στο MaxPost: 8, το 8 μπορείτε να το αλλάξετε με το πόσες αναρτήσεις θέλετε να εμφανίζονται.



Ελπίζω να σας φάνηκε χρήσιμο το ποστ και να μην σας δυσκόλεψα!

Για οποιαδήποτε απορία αφήστε μου στα σχόλια.


Δημιουργία ή ανανέωση blog, περισσότερες πληροφορίες διαβάστε στο El Design, καθώς μπορείτε να στείλε και μήνυμα στο email
eleftheraki0000@gmail.com

14 σχόλια:

  1. Μόλις έβαλα το 2ο,πανεύκολο να το βάλεις!
    Ευχαριστούμε πολύ Ελευθερία <3
    xxx

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Χαίρομαι που σου άρεσε Λίλα!
      Το είδα που το έβαλες! ;)

      Διαγραφή
  2. Πάρα πολύ ενδιαφέρον άρθρο,λατρεύω αυτή τη στήλη!

    ΑπάντησηΔιαγραφή
  3. Πόσο βοηθητικό ποστ κορίτσι μου; Μπράβο σου!
    Σε ευχαριστούμε για τα τιπς!
    Φιλάκια πολλα!

    ΑπάντησηΔιαγραφή
  4. Πόσο μα πόσο χρήσιμο το ποστ σου μπράβο!
    Γράφεις όμορφα & αναλυτικά!
    xxx

    ΑπάντησηΔιαγραφή
  5. Το πρώτο θα το προσθέσω, το δεύτερο, το Slider Post το είχα βάλει πριν λίγο καιρό και για λίγες ημέρες αλλά δεν το κράτησα γιατί ήταν "πολύ"!
    Ωραία ανάρτηση Ελευθερία μου!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ πολύ Μαρία!
      Χαίρομαι που σου άρεσε!

      Διαγραφή

Σας ευχαριστώ για την επίσκεψη στο blog μου❣
Thank you for visiting my blog❣

Copyright © by Diary Of A Beauty Addict. All rights reserved. Designed By El Design

UP
Blogger Widget