Pentru cei care sunt interesati de a adauga in blog-ul lor un widget share in peste 300 de retele sociale folosind addthis.com atunci acest stil nou este ideal.Articolele trimise de catre cititorii lor in retelele in care sunt inscrisui sunt cele din Twitter sau Facebook.Tu cand intri pe un blog trimiti respectivul articol in reteaua twitter printr-un link sau in Facebook?Foarte rar.De felul cu arata si locul unde ai adaugat in blog acest share de articole conteaza foarte mult si trimiterea de catre cititori a informatiei gasite pe blog mai departe.Nu ai cum sa le arati decat printr-o pozitionare cat mai vizibila si de preferat in centru.Cu acest widget share oferi celor care iti viziteaza blogul motive in plus de a-ti trimite articolele mai departe.Vezi aici un Demo
Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Adăugaţi un obiect gadget >> HTML/JavaScript .
Pasul [2] Acum copiati codul de mai jos >> click pe "Adaugatiun obiect gadget" >> HTML/JavaScript si in aceatsa casuta introduceti acest cod :
<style type="text/css">
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background:url() no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
.dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
</style>
<div id="sharedock">
<div id="dock">
<div class="dock-container">
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a href="http://99bloguri.blogspot.com/" target="_top"><img src="http://i39.tinypic.com/2efti68.jpg" border="0" alt="Share to 99bloguri" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
<a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>
Pasul [4] Salvati.
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background:url() no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
.dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
</style>
<div id="sharedock">
<div id="dock">
<div class="dock-container">
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a href="http://99bloguri.blogspot.com/" target="_top"><img src="http://i39.tinypic.com/2efti68.jpg" border="0" alt="Share to 99bloguri" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
<a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>
0 comentarii:
Trimiteți un comentariu