Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε έναν πολύ
εύκολο και πρακτικό τρόπο να ενσωματώνουμε λέξεις, τίτλους προτάσεις
η ότι κείμενο θέλετε εσείς, μέσα στις εικόνες που αναρτούμε στα blog μας!






Η εγκατάσταση του είναι απλή η βάζετε τον κώδικα

στο HTML section της ανάρτησης 

η ακολουθείτε την γνωστή διαδικασία..

Blogger-->Διάταξη

Προσθήκη gadget-->Html javascript

και κάνετε επικόλληση τον ακόλουθο κώδικα:

...........................................................................................................................................................

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin: auto; position: relative; width: 400px;">
<!-- Original image inserted with blogger -->
<a href="ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ" /></a>
<!-- Text over the image -->
<br />
<div style="color: green; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">
ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ
</div>
</div>  

 
....................................................................................................................................................................
ΑΛΛΑΓΕΣ

ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ---Εδώ βάζετε την διεύθυνση της εικόνας σας!

Προσέξτε την βάζετε 2 φορές!

ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ---Εδώ γράφετε τον τίτλο που θα φαίνεται στην εικόνα!

green: Εδώ αλλάζετε το χρώμα του κειμένου με ότι θέλετε εσείς - red- blue- black - yellow κτλ!

left: 130px - Αλλάζετε την τιμή για να κεντράρετε το κείμενο στην εικόνα δεξιά η αριστερά και

αλλάζετε και το  top: 110px για το πάνω κάτω!


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


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


Πηγή κώδικα
thanks to probloggertricks.com



 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer της σελίδας μας, εάν υπάρχει χώρος!Διαθέτει και
Hover effect στο mouseover του κέρσορα μας όπως θα







  
Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτό...

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

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

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> 


Πηγή κώδικα 
thanks to dynamicdrive.com



 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε
μία Vertical 
Social Bar για τα blog μας!Μία απλή κάθετη μπάρα χωρίς
εφέ και κώδικες,
με μεγάλα social εικονίδια που μπορείτε να την τοποθετήσετε
στην δεξιά η
αριστερή sidebar της σελίδας σας!








Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

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

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> 
..............................................................................................................................................................

<center><a href="ΕΔΩ ΤΟ URL ΑΠΟ ΤΟ FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadpEf-aa6XVETmHzN3pYuVDHEo9lNzT5W4RhL1IOiacz7ESAzcHuUeTA0k0L5YHfbvdDkVxzO1YkHLcsVzh8IL6M8aeaIeQZHELfb60jIC5QAKyExEw5akxPMbcz5Fuxy-jvETHreRyc/s256/social_media_icons_flat_shadow_set_256x256_0000_facebook.png"width="100px" height="100px"title="Enter Facebook" /></a></center>

<center><a href="ΕΔΩ ΤΟ URL ΑΠΟ ΤΟ GOOGLE PLUS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitOAHreBBkUqI3NCJDRHrdPBenaLnqmZCjyx0xPyGj8ShZxZCFc-345zM7T11oZ9ATh9AQ_ZX9920ZNwF7Puih3T1ySQC3JAE0RaNUPM1IitYpiaUrcTuOlvznZWGm0i7Lu-_PEP-FWgs/s256/social_media_icons_flat_shadow_set_256x256_0003_google%252B.png"width="100px" height="100px"title="Enter Google+" /></a></center>

<center><a href="ΕΔΩ ΤΟ URL ΑΠΟ ΤΟ TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-gW8KCjJSADbjyxADXKzSeLea3-GYSOS_YBFOknbbw6Bus-vKvVWo5GIe7oeEYv_0IVe_ArChOUsCMPbXGpw2h77moZuwgHeSLvCQSTo06ENrYjTV1PX-sXQfL8Fqyq1d6NLCMsolr4/s256/social_media_icons_flat_shadow_set_256x256_0002_twitter.png"width="100px" height="100px"title="Enter Twitter" /></a></center>

<center><a href="ΕΔΩ ΤΟ URL ΑΠΟ ΤΟ YOUTUBE" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoH8caN1nNJXnJpEvEetT6E1myft1mLKd6Pqf5_CnXWwxpQxSAQSxpPHBch-oWpDHoud63TWuoRetkiL_2uzyiKIWTtiEWinVvFLH_ZaxnP-KeRsbooSkqqf96ENplFDMvNZ40DjO0nZk/s256/social_media_icons_flat_shadow_set_256x256_0004_youtube.png"width="100px" height="100px"title="Enter Youtube" /></a></center>

<center><a href="ΕΔΩ ΤΟ URL ΑΠΟ ΤΟ LINKEDIN" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19WJq6KX1tdpXZRhGO-ntWdJkTy_yV-_h4f8ZCBPbF-24mX2FtDRT2Xi1MJV-VwIA3E1GtMQBuz93NsRp1DMTqyJzof6NcS30-ovgh-qyaPD_YOlgNbbB4dTWwvHPTQm9qC9buKOGZQY/s256/social_media_icons_flat_shadow_set_256x256_0010_linkedin.png"width="100px" height="100px"title="Enter
Linkedin" /></a></center> 

...............................................................................................................................................................
ΑΛΛΑΓΕΣ

Βάλτε όλα τα δικά σας urls που έχετε στα social media στα αντίστοιχα σημεία του κώδικα,
προσέξτε όλο το url όχι μόνο το username και πατήστε Αποθήκευση!Αυτό ήταν!


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



 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα οριζόντιο
menu για τα blog μας!Είναι αρκετά μεγάλο σε κατηγορίες, διαθέτει ένα 
πολύ ωραίο 3d flying effect και είναι ιδανικό για blogs που διαθέτουν
πολλές κατηγορίες θεμάτων!





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

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

και στο παράθυρο που θα ανοίξει κάντε 

επικόλληση τον ακόλουθο κώδικα:-->

......................................................................................................................................................

<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Αρχική</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Γενικές ειδήσεις</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">Ποδόσφαιρο</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Επικοινώνια</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Αθλητικά</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Πιλότος</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Κίνηση</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">Εσωτερικά</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Καιρός</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

............................................................................................................................................................
 ΑΛΛΑΓΕΣ

#url-->  Αντικαταστήστε όλα τα #url με τα urls (links) των δικών

σας διευθύνσεων!   


 Αρχική-->  Εδώ βάζετε τις δικές σας ονομασίες που

θέλετε να φαίνονται στις ετικέτες του menu!

Mόλις τελειώσετε από όλα Αποθήκευση και έτοιμοι! 


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


Πηγή κώδικα 
thanks to avdhootblogger.com



 Edit by

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο follow me
gadget για facebook και twitter  με floating icons!

Όπως και όλα τα άλλα
παρόμοια gadget & widgets τοποθετείτε σε όποιο σημείο του blog μας θέλουμε και βοηθά
τους αναγνώστες μας, να μας ακολουθήσουν στα διάσημα Social networks!









Η εγκατάσταση είναι και εδώ πολύ απλή..


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


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


και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->

...........................................................................................................................................

<div id="Follow-Fb.Twt"><div style="position:fixed; top:40px; right:20px;">

<a href="http://twitter.com/twitter username" target="_blank"><img title=

"Follow Us

 On Twitter"  src="https://lh6.googleusercontent.com/-

qXiEI4g6Hl4/Ud7itsU5mjI

/AAAAAAAAC-c/nRegebya0j8/s100/twitter%2520follow.png" border="0" /></a>
<div style="margin-top:15px; z-index:999px;"><a href="

http://www.facebook.com

/facebook username" target="_blank"><img src="

https://lh3.googleusercontent.com/

-NjbMvm

_04Zw/Ud7i9bQLA8I/AAAAAAAAC-k/uGnNdrRfKR8/s150/facebook.png" 

width="100px" alt="

 Follow  us on Facebook "/></a>
<center><div style="font-size:8px;"><a href="http://www.safetricks.ne

t/2013/07/

Floating-Facebook-And-Twitter-Follow-Me-Widget-For-Blogger.html">

Get This</a>

</div></center></div></div></div>

................................................................................ 

 Οι αλλαγές που πρέπει να γίνουν....

twitter username--> Εδώ το username που έχετε στο twitter

facebook username-> Εδώ το username που έχετε στο facebook

position:fixed Eάν αλλάξουμε το fixed  με το left to widget μπαίνει

αριστερά στην σελίδα μας,εάν το αφήσουμε ως έχει,μένει δεξιά!! 

top:40px;  Εάν αυξήσουμε το 40px κατεβαίνει πιο χαμηλά το widget από

την κορυφή της σελίδας μας,εάν το μειώσουμε ανεβαίνει και άλλο!

right:20px Εάν αυξήσουμε το 20ρχ το widget μπαίνει πιο αριστερά προς τα

μέσα της σελίδας μας δηλαδή,και εάν το μειώσουμε βγαίνει προς τα έξω!

Μόλις τελειώσετε πατάτε Αποθήκευση και είστε έτοιμοι!

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

Πηγή κώδικα http://www.safetricks.net

Edit by 

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer του blog μας, και είναι με κώδικα Css3 ο οποίος
του δίνει ένα πολύ ωραίο animated slanted menu!





ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!
Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to dynamicdrive.com



Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
δώσουμε έμφαση και χιούμορ στις φωτογραφίες μας με το rollover effect!Έχουμε
δει και παλιότερα σε ανάρτηση παρόμοιο script με φωτογραφίες εδώ σήμερα θα το
δούμε με εικονίδια!

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

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

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> ...............................................................................................................................................................

<center><script type="text/javascript">
// Pre load images for rollover
if (document.images) {
    smile = new Image;
    nosmile = new Image;

    smile.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAfq9zQZl2DhpOnbj-DDQ0D3uccWuJ2ZFH1u7Wg9IekavD1vMM2B_4ZlvJhWSKyEMMlqB8Xvhg8t4EAY0sfEvygnoeRoNYpQlsDwZpH785RkrPV952iLzryTNrCRw5ajs4-JMwEGDyxgo/s95/emoticon-happy-128.png";
    nosmile.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-KgPy_MvYAll5sefVCRSucevKBgz2ElBaiT42pWrAVh3uzWr-DvmzGTTNkfLSRCdPAw3HK2zD_vXOwaoZEQ8nuT6hgQCZUhacG9H7Z2kEGUGaEHIB1MIL2_N39jMt7BkXeCb8iYKTbo/s95/emoticon-sad.png";
}
function swapImage(thisImage,newImage) {
    if (document.images) {
        document[thisImage].src = eval(newImage + ".src");
    }
}
</script>  
<a href="/html/codes/" onmouseover="swapImage('jack','smile')" onmouseout="swapImage('jack','nosmile')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-KgPy_MvYAll5sefVCRSucevKBgz2ElBaiT42pWrAVh3uzWr-DvmzGTTNkfLSRCdPAw3HK2zD_vXOwaoZEQ8nuT6hgQCZUhacG9H7Z2kEGUGaEHIB1MIL2_N39jMt7BkXeCb8iYKTbo/s95/emoticon-sad.png" width="100" height="100" border="0" name="jack" /></a></center>

...........................................................................................................................................................
 2ος
 Αντιγράψτε και επικολλήστε τον κώδικα στο HTML Section της εκάστοτε ανάρτησης!

ΑΛΛΑΓΕΣ 

Απλώς θα κάνετε αντικατάσταση και θα βάλετε τα url σας με τα δικά σας εικονίδια!Δύο διαφορετικά εικονίδια,
το 1 το βάζουμε στην διεύθυνση url του πράσινου φόντου, και το 2 το βάζουμε στην διεύθυνση
url του κίτρινου φόντου! Το 2 το βάζουμε 2 φορές!


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

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


Πηγή κώδικα 
thanks to quackit.com



Edit by

Φίλες και φίλοι γεια σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο Author Profile
widget box, από το οποίο μπορούν να βλέπουν οι αναγνώστες-επισκέπτες μας,  εύκολα και
γρήγορα το προφίλ μας, λίγα λόγια για το blog μας, να διαβάσουν για τον ιδιόκτητη-διαχειριστή
του blog  και ότι άλλο εσείς θέλετε!Έχει ενσωματωμένα και social media links δίνοντας μας, μία
εξαιρετική επιλογή για το Author Profile box μας!!


Η εγκατάσταση του είναι πάρα πολύ απλή και για να γίνει αυτό

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

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

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> 
........................................................................................................................................

<style>
/*widget by www.bloggerspice.com */
.BloggerSpice {width:auto;  height:83px;padding:5px}
.BloggerSpice-BS {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:5px solid #005C91;border-right:5px solid #04BDFA;border-bottom:5px solid #005C91;border-left:5px solid #04BDFA}
.BS-AP{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px;font-size:11px; color:#000000;text-align:justify;}
.BSfb, .BSgp, .BStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; 
height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.BSfb {background: #3B5998;margin-left:76px}
.BSfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.BSgp {background: #D34836;font-size:11px;margin-left:86px}
.BSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.BStw {background: #4099FF;margin-left:82px}
.BStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}
</style>
 <!-- Author Profile By http://www.bloggerspice.com/ start -->
<div class='BloggerSpice'>
<img alt='TO ΟΝΟΜΑ ΣΑΣ' src='ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ' title="TO ΟΝΟΜΑ ΣΑΣi" class='BloggerSpice-BS' />
<a class='BSfb' href='http://www.facebook.com/USERNAME FACEBOOK rel='nofollow' target="_blank">f</a>
<a class='BSgp' href='https://plus.google.com/GOOGLE PLUS ID' rel='nofollow' target="_blank">G</a>
<a class='BStw' href='http://twitter.com/USERNAME TWITTER' rel='nofollow' target="_blank">t</a>
<div class='BS-AP'>
ΕΔΩ <a href=https://plus.google.com/GOOGLE PLUS ID title="TO ΟΝΟΜΑ ΣΑΣ" rel='nofollow' target="_blank">TO ΟΝΟΜΑ ΣΑΣ</a><br/>
ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΚΑΛΟΣΩΡΙΣΜΑΤΟΣ ΠΟΥ ΘΕΛΕΤΕ >><a style="color:#04BDFA;" href=" 
ΕΔΩ ΤΟ ΛΙΝΚ ΤΟΥ ΠΡΟΦΙΛ ΣΑΣ Η ΟΤΙ ΑΛΛΟ ΘΕΛΕΤΕ" target="_blank"> Read More &#187;</a>
</div></div>
<!-- Ends -->

..............................................................................................................................................................
ΑΛΛΑΓΕΣ 

TO ΟΝΟΜΑ ΣΑΣ-Εδώ βάζετε το όνομα σας,η το username του google+ σας!
ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ-Εδώ μπαίνει η εικόνα που θα φαίνεται στο box!


 USERNAME FACEBOOK
 GOOGLE PLUS ID                         Εδώ βάζετε τα αντίστοιχα usernames
 USERNAME TWITTER                   που έχετε στα εκάστοτε social media!


 ΕΔΩ ΤΟ ΛΙΝΚ ΤΟΥ ΠΡΟΦΙΛ ΣΑΣ Η ΟΤΙ ΑΛΛΟ ΘΕΛΕΤΕ-Εδώ βάζετε το λινκ της σελίδας-
προφίλ σας,που θα οδηγείτε ο αναγνώστης σας μετά το Read More!


000000-  Όποιος θέλει αλλάζει και το χρώμα του box

ΕΔΩ
ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΚΑΛΟΣΩΡΙΣΜΑΤΟΣ ΠΟΥ ΘΕΛΕΤΕ--Εδώ γράφετε το κείμενο
που θέλετε να φαίνεται!!!ΠΡΟΣΕΞΤΕ  το ΕΔΩ από που ξεκινά να μην κάνετε λάθος!Εκεί λέτε
γεια η ότι άλλο θέλετε και το κείμενο συνεχίζεται μετά τον σύνδεσμο!



Αυτά είναι όλα!

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

DEMO



Πηγή κώδικα
Thanks to bloggerspice.com


Edit by 

Φίλες και φίλοι γεια σας, όλοι η σχεδόν όλοι ξέρετε τι σημαίνει το blockquote
μέσω του οποίου μπορούμε να τονίσουμε και να αναδείξουμε διάφορα μέρη
και σημεία μίας ανάρτησης!Οι τρόποι που μπορούμε να το
κάνουμε αυτό είναι πολλοί όπως: Μέσα σε παρένθεση, κείμενο με εικόνα,
παράγραφο μέσα σε text box και άλλοι πολλοί!


Σε αυτή την ανάρτηση θα δούμε μερικές παραλλαγές του blockquote που
μας επιτρέπουν να κάνουμε ότι είπαμε στον πρόλογο της ανάρτησης!

Οι κώδικες έχουν παραμετροποιηθεί έτσι ώστε να χρειάζεται να τους εγκαταστήσουμε
απλά μέσα στο Html section της ανάρτησης!





ΚΩΔΙΚΑΣ ΠΡΩΤΟΣ...

 ........................................................................................................................

  <style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
............................................................................................................................ 



ΚΩΔΙΚΑΣ ΔΕΥΤΕΡΟΣ...
 ...........................................................................................................
<style>
.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
</style> 

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 
ΚΩΔΙΚΑΣ ΤΡΙΤΟΣ....
.......................................................................................................................
 <style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 




ΚΩΔΙΚΑΣ ΤΕΤΑΡΤΟΣ....
.......................................................................................................................

  <style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyOIRMK6l4nTrCqKhHeTDVtr4slhXHtMRR5O6TInsaS0RnGg4as4E8KKzT5C2io-uYKfAvnN8xTztZQ63aFFfJgxUzUzJDr9Y0-bEPV4YgwIaYmYoZZu74hlp4kC7_xrpUZHxxTnfN3Hg/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 ΕΓΚΑΤΑΣΤΑΣΗ:

Απλά γράφετε το κείμενο σας  στο-- ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ --
και πηγαίνεται στο Html Section της ανάλογης ανάρτησης και κάνετε επικόλληση
τον κώδικα!

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

Πηγή κώδικα


 Edit by