Κινούμενο (Floating) Chat Box για το blog σας

Κινούμενο (Floating) Chat Box για το blog σας

Σήμερα θα σας δείξω πως να βάλετε ένα πολύ όμορφο Chat στο blog σας.

Αυτό το Widget έχει δημιουργηθεί απο εμένα με την βοήθεια του Floating Style.

Το Gadget που θα προσθέσουμε φαίνεται στην παρακάτω εικόνα:

Παμε να δούμε όμως πως θα το προσθέσεις στο blog σου

1) Πάμε στο http://chatroll.com
2) Φτιάχνουμε έναν λογαριασμό (εάν δεν έχουμε)
3) Στην συνέχεια πατάμε στο "Install Module"
4) Διαλέγουμε την "Blogger Platform"
5) Αντιγράφουμε τον κώδικα που μας δίνει στο 3 βήμα 

Και στη συνέχεια τον τοποθετούμε στο κίτρινο σημείο:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://asteiakia.gr/images/chat.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" src="http://chatroll.com/embed/chat/bloggertricksgr?id=bM2R-rMCjuU&platform=blogger&w=$0"></iframe><div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr">Powered by <a target=_blank href=http://www.bloggertricks.gr/>Blogger Gadgets</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNl_2VtpriZZir3n0r3Hak1Bs-UJ8P19lnK5q_cvlyZV8STqLqkMrcnYY0UPLD4ivkK-MF8mLsOaDZ2yf1w5L4XW25C7aHZV8cdU1soUgaBRiy0d3LnmxTerrHISuuV8hu_JCfgqMqr5Ds/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style></div>

Αφού λοιπόν βάλεις όπου "κιτρινο" τον δικό σου κώδικα του Chatroll θα πας:

Σχεδίαση >> Προσθήκη Gadget >> HTML/JavaScript

Αυτό ήταν! κάνεις Αποθήκευση και τέλος !

-----------------------------------------------------------------------------

Υ.Γ: Εάν σας βγάλει αυτό εδώ, απλά κάνει Update το Chatroll, δεν έχετε πρόβλημα :)

Too many simultaneous requests!
Please retry in a minute.

(We're adding capacity as quickly as possible)