Γεια σας,ένα πολύ ωραίο Popup Social Widget για τα blog μας θα δούμε σε αυτήν

την ανάρτηση το οποίο υπενθυμίζει στους αναγνώστες και επισκέπτες μας να μας

ακολουθούν στα διάσημα πλέον social media, facebook & twitter!


Εδώ θα το δούμε τοποθετημένο κάτω αριστερά και στον επισκέπτη, αναγνώστη μας
θα εμφανίζεται όταν πλοηγείται στην σελίδα μας προς τα κάτω και ο πρώτος κώδικας
είναι σε πράσινο χρώμα

όπως θα δείτε στο                                           

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

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

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

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




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

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyMbZvrYtJdddc7gGq1gdoDvycOeOips788KWifgtElVLsXWBiCYKqwY19C5tG7g3dOmlcaXFmH3tX_6VPlu5AgBiVxm-mL_acmAlxVcNSblismUf3egscwuzyHgzZFzlXFvHNwkNQJBc/s1600/NBT_Green.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebook Page Url&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/Twitter Username" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  </div>

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



 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUy5DoLabQkAJ3BcRpzqNAK9QqbGzYgAd7HQCcYdOJfTjkT1Yu15_l-1s3VXraX8v3WkkuXPcf1dYUg0_zsdGEsF61wAgRhW0bckZLIIE2dz1AX6p0NrQWjNZvz73Zg9u3h3DzQ2xLs2A/s1600/NBT_Red.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebook Page Url&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/Twitter Username" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  </div>

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



 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx2cVGFAzMHDh8cFpOvH-RskqkU08_1P8ThAoaAtUkDM1U6ACAeDa3Tijht5uPrKIyrSfi6wbEJYZE7TBh4plC-gHGMmukJ1BV7xBuKsfZtFM99-yISsQ13ORzWxujE5c-eZIAdxpHZNY/s1600/NBT_Broun.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebook Page Url&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/Twitter Username" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  </div>

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

Δυστυχώς η σελίδα της πηγής και του δημιουργού δεν λειτουργεί!Οι αλλαγές μπορούν να γίνουν μόνο μέσα από τον κώδικα εδώ!

.........................................................................................................................
Αλλαγές

Facebook Page Url


Twitter Username


Και στα δύο βάζετε τα δικά σας αντίστοιχα στοιχεία από facebook & twitter!

ΠΡΟΣΟΧΗ ΕΔΩ
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; 

Εάν έχετε στο template σας και άλλον κώδικα jquery αντιγράψτε τους κώδικες μετά από το 
υπογραμμισμένο πλαίσιο!!Προσοχή εδώ: (Σε μερικά templates ενδέχεται να μην λειτουργήσει)

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

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

Demo

Πηγή κώδικα http://www.newbloggertips.com/


Edit by