Ads 468x60px

Πέμπτη, 21 Απριλίου 2016

Author info box widget

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα Author info box widget για τα
blog μας!Στην σελίδα που θα ενσωματώσουμε πάνω στο Author info box 
μπορούμε να δείξουμε στους αναγνώστες - επισκέπτες μας, λίγα λόγια για την
δουλειά μας, το έργο μας, κάποια σελίδα, ποιοι είμαστε κτλ!!Έχει ενσωματωμένο
ένα πολύ ωραίο slide out effect και
μπαίνει παντού λόγω του μικρού μεγέθους του!







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

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

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


επικολλήστε τον ακόλουθο κώδικα--
..............................................................................................................................................................

<style>
#BloggerSpiceRibbonAuthorBox {
position: absolute;
top: 30px;right: 32%;
z-index: 10;
width: 108px;
height: 160px;
background-color: #333;
color: #999;
-webkit-box-shadow: 0 5px 7px rgba(0,0,0,.7);
-moz-box-shadow: 0 5px 7px rgba(0,0,0,.7);
box-shadow: 0 5px 7px rgba(0,0,0,.7);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: right 5.15s linear;
-moz-transition: right 5.15s linear;
-ms-transition: right 5.15s linear;
-o-transition: right 5.15s linear;
transition: right 5.15s linear;
border: 1px solid;
border-color: #444 #222 #222 #444;
padding: 10px;
-webkit-transition: all 7s ease-out;
-moz-transition: all 4.26s ease-out;
-ms-transition: all 7s ease-out;
-o-transition: all 4.26s ease-out;
transition: all 7s ease-out;
}
#BloggerSpiceRibbonAuthorBox:hover {right: 12%;-webkit-transition: all 0s ease-out!important;
-moz-transition: all 0s ease-out!important;
-ms-transition: all 0s ease-out!important;
-o-transition: all 0s ease-out!important;
transition: all 0s ease-out!important;}
#BloggerSpiceRibbonAuthorBox, {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
-animation-duration: 2s;
}
#BloggerSpiceRibbonAuthorBox:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 20px;
border: 15px solid transparent;
border-top-color: #333;
}
#BloggerSpiceRibbonAuthorBox .img-container img {
display: block;
background-color: #3c3c3c;
padding: 5px 0;
}
#BSBack li a {
display: block;
background-color: #3c3c3c;
color: #ccc;
font: normal normal 8px/normal Arial,Sans-Serif;
text-transform: uppercase;
position: relative;
-webkit-transition: all .26s ease-out;
-moz-transition: all .26s ease-out;
-ms-transition: all .26s ease-out;
-o-transition: all .26s ease-out;
transition: all .26s ease-out;
padding: 6px 10px;
}
#BloggerSpiceRibbonAuthorBox .img-container {
width: 82px;
border: 3px double #3c3c3c;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0,0,0,.4);
margin: 0 0 10px auto;
padding: 10px;
}
#BSBack {
width: 108px;
display: block;
margin: 0 0 0 -10px;
}
#BSBack li a:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
border: 11px solid transparent;
border-right-color: #333;
}
#BSBack li {
list-style: none;
}
#BSBack li.BS1 a:hover, #BSBack li.l-3 a:focus {
background-color: #0186cb;
}
#BSBack li.BS2 a:hover, #BSBack li.l-3 a:focus {
background-color: #005C91;
}
<!--www.bloggerspice.com-->
</style>
<div id="BloggerSpiceRibbonAuthorBox" style="margin-right: 0px; width: 108px; overflow: hidden;">
<div class="img-container center">
       <a href="/"><img alt="Mohammad Rabbi" src="ΕΔΩ ΤΟ URL THΣ EIKONAΣ" height="70" width="82" /></a>
        </div>
<ul id="BSBack">
<li class="BS1">
<a href="ΕΔΩ ΤΟ LINK ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ">About Author</a>
</li>
</ul>
</div>
.........................................................................................................................................................
 ΑΛΛΑΓΕΣ

Βάζετε το url της εικόνας που θα φαίνεται στο box και το link της σελίδας που θα
οδηγεί το box, και πατάτε Αποθήκευση!!


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


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




Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog