Δημιουργία/Επεξεργασια Blog

[meletis_m]

Καλησπέρα σε όλα τα μέλη. Εχω φτιάξει ενα blog ώστε να προβάλλω την επιχείρηση μου(τεχνικό γραφείο).

Ήθελα να ρωτήσω πως μπορώ να προσθέσω χάρτη στο blog? Εχω παρακολουθήσει διάφορα βιντεο στο youtube αλλα δεν τα καταφερνω.Επίσης ήθελα να ρωτήσω πως μπορώ να την προσθέσω σε μηχανές αναζήτησης (google,yahoo)?

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

Ευχαριστώ εκ των προτέρων

 

[genius_13]

Σε τι είναι στημένο το blog σου ;

Το ψηφιακό ρολόι και ο μετρητής επισκεπτών που χρησιμεύει τους επισκέπτες σου ; Την ώρα μπορώ να την δω παντού (Ρολόι , υπολογιστή , κινητό , teletext etc) ενώ ο αριθμός των επισκεπτών είναι χρήσιμος μόνο στον webmaster. 

 

[meletis_m]

Σε τι είναι στημένο το blog σου ;

Το ψηφιακό ρολόι και ο μετρητής επισκεπτών που χρησιμεύει τους επισκέπτες σου ; Την ώρα μπορώ να την δω παντού (Ρολόι , υπολογιστή , κινητό , teletext etc) ενώ ο αριθμός των επισκεπτών είναι χρήσιμος μόνο στον webmaster.

 

Δεν γνωρίζω και πολλά σχετικά με τα blog. Το εχω φτιάξει μέσω της google.

[genius_13]

Blogger λοιπόν , η διαδικασία είναι απλή.

Πηγαίνεις στο google maps και πληκτρολογείς την διεύθυνση της επιχείρησης σου.Μόλις εμφανιστεί στον χάρτη πηγαίνεις κάτω δεξιά στο εικονίδιο  και επιλέγεις "κοινή χρήση ή ενσωμάτωση χάρτη"

Στο tab "ενσωμάτωση χάρτη" επιλέγεις τον iframe κώδικα
Τύπου 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7645618789256!2d22.942769499999997!3d40.63507389999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a839a81e03c33d%3A0x4257f344ec62c9f0!2zzpXPgc68zr_PjSA0NSwgzpjOtc-Dz4POsc67zr_Ovc6vzrrOtyA1NDYgMjQ!5e0!3m2!1sel!2sgr!4v1424434122041" width="600" height="450" frameborder="0" style="border:0"></iframe>

Πηγαίνεις στην σελίδα του blogger που θες να τον εμφανίσεις και τον κάνεις αντιγραφή.

[meletis_m]

Blogger λοιπόν , η διαδικασία είναι απλή.

 

Πηγαίνεις στο google maps και πληκτρολογείς την διεύθυνση της επιχείρησης σου.Μόλις εμφανιστεί στον χάρτη πηγαίνεις κάτω δεξιά στο εικονίδιο  και επιλέγεις "κοινή χρήση ή ενσωμάτωση χάρτη"

 

Στο tab "ενσωμάτωση χάρτη" επιλέγεις τον iframe κώδικα

Τύπου 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7645618789256!2d22.942769499999997!3d40.63507389999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a839a81e03c33d%3A0x4257f344ec62c9f0!2zzpXPgc68zr_PjSA0NSwgzpjOtc-Dz4POsc67zr_Ovc6vzrrOtyA1NDYgMjQ!5e0!3m2!1sel!2sgr!4v1424434122041" width="600" height="450" frameborder="0" style="border:0"></iframe>

Πηγαίνεις στην σελίδα του blogger που θες να τον εμφανίσεις και τον κάνεις αντιγραφή.

Σε ευχαριστώ το έφτιαξα. ήθελα να σε ρωτήσω πώς μπορω να φτιάξω ενα άλμπουμ φωτογραφιων (π.χ 15 φωτογραφιες) οι οποίες να είναι μόνιμες ας πούμε πάνω δέξια και να αλλάζουν μόνες τους σαν διαφάνεια .

Η διεύθυνση είναι εξής: margaritistexnikografeio.blogspot.com

[genius_13]

Ξεκίνα με το να αφαιρέσεις το banner/logo που έχει βάλει !
 

Βήμα 1 - > http://i.imgur.com/yvBJl7I.png

Κάνεις αντιγραφή τον παρακάτω κώδικα

 

<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
    
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://lh4.googleusercontent.com/-oxV19sM3O5I/Uc_MfCW09hI/AAAAAAAAAPU/8K4xW8f5ID4/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://lh6.googleusercontent.com/-_V9ia-vRQDw/Uc_Me-WX21I/AAAAAAAAAPQ/1HZH3J08jr0/h120/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://lh6.googleusercontent.com/-E6waK4w3Pyg/Uc_MekrMOpI/AAAAAAAAAPI/WcXBXJKmb9E/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://lh4.googleusercontent.com/-IIz2KjyU3W0/Uc_Mfiw-QaI/AAAAAAAAAPg/kLf_VnQ1YHE/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://lh4.googleusercontent.com/-SH8EBmFLe2A/Uc_MfjT6POI/AAAAAAAAAPk/y4XTNq80Wdk/h120/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
</div>
<div id="htmlcaption2" style="display: none;">
</div>

Μέσα σε αυτόν τον κώδικα,στο τέλος όπου βλέπεις img src και μέσα στα " " είναι το link των εικόνων που θες να εμφανίζονται. Θα αφαιρέσεις δηλαδή τα "https://lh4.googleusercontent.comblablabla" και θα βάλεις τα δικά σου.

Το πλάτος και το ύψος του slider καλό θα ήταν να ταιριάζουν με αυτό των εικόνων.Το αλλάζεις από το  

 

#slider {

width:700px;height:306px;/* Make it the same size as your images */ 

 

 

Υπάρχουν και άλλοι τρόποι σίγουρα που ίσως σας φανούν περισσότεροι φιλικοί με μία αναζήτηση στο google με keywords "slider - blogger".

Μια φιλική επισήμανση , απ' την στιγμή που η σελίδα αφορά την επιχείρηση σας καλό θα ήταν το αποτέλεσμα να μην δείχνει τόσο ερασιτεχνικό ! Ίσως θα ήταν καλύτερα να απευθυνθείτε σε κάποιον web developer .

 

Επεξ/σία 20 Φεβρουαρίου 2015 από genius_13