Click PopUp jQuery Facebook Like Box widget για τον Blogger

Το συγκεκριμένο gadget το είδαμε στην προηγούμενη ανάρτηση Click PopUp jQuery Subscription box widget για τον Blogger v2. Δυστυχώς δεν μπορούν να λειτουργήσουν και τα δύο ταυτόχρονα διότι συγκρούονται τα script. Ο κώδικας που θα σας δώσω θα σας δώσει με τη σειρά του έναν τρόπο απόσπασης "LIKE" από τους αναγνώστες σας.



Δείτε το Demo ΕΔΩ πατώντας το λογότυπο του Facebook κάτω δεξιά και αποφασίστε αν θέλετε να το προσθέσετε στη Σελίδα σας. Όσοι το αποφάσισαν ας ακολουθήσουν τα παρακάτω βήματα:

• Σύνδεση στον Blogger
• Πρότυπο / Επεξεργασία HTML / Συνέχεια
• Βρείτε την </head>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
(Όσοι τον έχετε ήδη από το προηγούμενο gadget που θέλετε να αντικαταστήσετε απλά παραλείψτε αυτό το βήμα)

• Αποθηκεύστε το πρότυπο.
• Πατήστε "Διάταξη / Προσθήκη gadget"
• Επιλέξτε HTML/JavaScript
• Επικολλήστε τον παρακάτω κώδικα:

<style type="text/css"> #subscribe-button { float: right; position: fixed; bottom: 5%; right: 0; z-index: 999; } #subscribe-widget { display:none; } /* Overlay */ #btnt-overlay { background-color:#000; } /* Container */ #btnt-container { min-height:500px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; } #btnt-container .btnt-data { padding:8px; } #btnt-container a.btntCloseImg { background:url(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; } #description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; } #description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; } #btntfollowForm { padding: 15px; } #btntfollowForm p { margin: 0 0 10px; } #btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #btntfollowForm input:not([type="checkbox"]):active, #btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } #btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; } #btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; } #btntfollowForm .button input:active, #btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } .btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; } .btntFollowFooter a { color: #222; text-decoration: none; } .btntFollowFooter a:hover { color: #fff; } <!--[if lt IE 7]> #btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png',sizingMethod='scale'); } #btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; } #btntfollowForm input[type=checkbox]{ width: 10px; padding: 0; } <![endif]--> </style> <div id="subscribe-button"> <a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQD_ktpX117UYUvF1DZPS9-xPN3AEjBW3tSgaj1FKusoA456pP9Z5WD86YqE3EYsoTcraDWTbE3BbBlXEpIj9zfvMkYcUCFjQ5LE6UdbXaPF4ga94y7Y5QzVTIFJ6VFAd4bPP0ti5nWsR/s1600/facebook-icon+(1).png" alt="subscribe" /></a></div> <div id="subscribe-widget"> <div id="btntfollowForm"> <center> <img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiEx2SbP_MuE37nS28_L3I7DORtzxjPYdQmzkTOUiB-DxFEt1YWxETZGmW8EGI551vw3s6_sfhS8BPGe3NxwaGSht7drko1-5rH5uZr0emBxHwkBEV6ZPwqNlA0B1L3G0czS8bywa_CQ/s1600/subscribe.gif" /></center> <div id='description'> <img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxProgqwu5s_IYMjAVVhpkJUoCftxEgbBtOH27o-oqOD8VfQ8Ha831ylshSO63M9X_I0BXMoiM0tYcR69w9XF0_nmhnuBZTw8jgtuubCI050D650SA-z7leL1OLlGAVWjx0FuCerOR0TT0/s1600/facebook-icon.png" />Ελάτε στην παρέα μας! Κάντε μας ένα Like και δεν θα χάσετε...Ό,τι νεότερο θα το βλέπετε πρώτοι!</div> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK&width=292&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:255px;" allowtransparency="true"></iframe></center> </div> <script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript"> </script> <script type="text/javascript"> jQuery(function ($) { // Load dialog on page load //$('#subscribe-widget').modal(); // Load dialog on click $('#subscribe-button .subscribe').click(function (e) { $('#subscribe-widget').modal(); return false; }); }); </script> <p style=" float:right; margin-right:10px;" > <a style=" font-size:5px; color:#999; text-decoration:none;" href="http://www.bloggertipsandtricks.net/2012/04/click-popup-jquery-facebook-like-box.html" target='_blank'>Blogger Tips & Tricks</a></p> </div>

• Αντικαταστήστε ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK με το δικό σας και πατήστε αποθήκευση.

.bloggertipsandtricks