Blogger widget με φόρμα εγγραφής email και κουμπιά κοινωνικής δικτύωσης (Social Media)

0
Τα κοινωνικά μέσα μαζικής ενημέρωσης θα μπορούσε να είναι μεγάλη πηγή επισκεψιμότητας για κάθε blog. Υπάρχουν πολλές δημοφιλείς ιστοσελίδες κοινωνικής δικτύωσης όπως το Twitter και Facebook. Σήμερα θα σας δώσω ένα πολύτιμο widget στο οποίο εκτός από τα κουμπιά των social media θα περιέχει μια φόρμα εγγραφής εγγραφής για να λαμβάνουν οι αναγνώστες σας πρώτοι τις νέες δημοσιεύσεις σας στο email τους.

Δείτε το demo εδώ

Οδηγίες προσθήκης του widget στο blogger:
  • Σύνδεση στο blogger και από το μενού του blog μας πάμε στη Διάταξη
  • Στο σημείο που θέλουμε πατάμε Προσθήκη gadget
  • Στο παράθυρο που ανοίγει βρίσκουμε το HTML/JavaScript, το πατάμε και βάζουμε μέσα εκεί τον πιο κάτω κώδικα
Σημαντικό*: Όπου βλέπετε τα κόκκινα links που έχω μέσα στον πιο κάτω κώδικα θα πρέπει να τα αντικαταστήσετε με τα δικά σας Social.
    <!- Thesis Email Subscribe Widget -> <div id="sidebars"> <ul class="sidebar_list"> <li id="social-profiles"> <ul> <li> <a class="social facebook" rel="nofollow" target="_blank" title="Σελίδα στο Facebook" href="https://www.facebook.com/blogger.money.tricks.tips.hacking">Facebook</a> </li> <li> <a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/lefta4klik">Twitter</a> </li> <li> <a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/u/0/b/115742708282537896154/+Lefta4klikBlogspotGr/posts">GooglePlus</a> </li> <li> <a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/lefta4klik">Rss</a> </li> <li> <a class="social youtube" rel="nofollow" target="_blank" title="Κανάλι στο Youtube" href="http://www.youtube.com/user/maxhteccc">Youtube</a> </li> </ul> </li> <li id="sidebar-social"> <div id="email-form"> <h6>Για να ενημερώνεστε για τα Νέα μας στο email σας</h6> <form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="input-text" type="text" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your Email Address&#39;;}" onfocus="if (this.value == &#39;Enter Your Email Address&#39;) {this.value = &#39;&#39;;}" value="Εισάγετε το email σας" /> <input type="hidden" value="InfozGuide" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="button" type="submit" value="Υποβολή" /> <br/> </form> <br/> <span style=" line-height:0px; font-size:6px; margin-left:267px;"> <a style="color:#000000;" href="http://lefta4klik.blogspot.gr/">lefta4klik</a> </span> </div> </li> </ul> </div> <style> #sidebars { border: 0 none; float: right; padding: 0 15px; width: 310px; } #email-notice { background: none repeat scroll 0 0 #66CCFF; color: #000000; font-size: 14px; line-height: 1.5; margin: 0 0 20px; padding: 15px 20px; position: relative; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } #email-notice span { border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 10px solid #66CCFF; bottom: -10px; height: 0; position: absolute; right: 40px; width: 0; } #email-form { background: none repeat scroll 0 0 padding-box #313131; border-bottom: 5px solid #202020; border-radius: 2px 2px 2px 2px; text-shadow: 0 -1px 0 #000000; } #email-form h6 { color: #FFFFFF; font-family: arial; font-size: 16px; font-weight: bold; letter-spacing: 0; padding: 15px 20px 0; text-transform: none; } #email-form form { color: #FFFFFF; margin: 0; padding: 20px 18px; } #email-form input.input-text { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #222222; margin: 0 0 10px; padding: 8px; width: 94%; } #email-form .button { background: none repeat scroll 0 0 #FFFFFF; float: right; margin: 0 0 0 10px; } #email-form p { color: #CCCCCC; font-size: 12px; line-height: 18px; margin: 0; } #sidebar-social { float: left; font-size: 12px; margin: 0 0 15px; width: 100%; } ul.sidebar_list { list-style: none outside none; } li.widget ul { list-style: none outside none; } #social-profiles { float: left; } #social-profiles ul { float: left; list-style: none outside none; margin: 0 5px 20px; } #social-profiles ul li { float: left; } #social-profiles ul li a { display: block; float: left; height: 32px; margin: 0 15px; text-indent: -999em; width: 32px; } #social-profiles a.social { background: url("http://1.bp.blogspot.com/-iyMNWqbxNls/UGlLYtLKIgI/AAAAAAAAGw0/SuMYnqQiXt4/s1600/social.png") no-repeat scroll 0 0 transparent; } #social-profiles a.facebook { background-position: -79px 0; height: 32px; margin: 0 15px 0 5px; width: 32px; } #social-profiles a.facebook:hover { background-position: -79px -74px; height: 32px; width: 32px; } #social-profiles a.twitter { background-position: -5px -111px; height: 32px; width: 32px; } #social-profiles a.twitter:hover { background-position: -42px 0; height: 32px; width: 32px; } #social-profiles a.youtube { background-position: -42px -37px; height: 32px; width: 32px; } #social-profiles a.youtube:hover { background-position: -5px -37px; height: 32px; width: 32px; } #social-profiles a.rss { background-position: -42px -74px; height: 32px; width: 32px; } #social-profiles a.rss:hover { background-position: -79px -37px; height: 32px; width: 32px; } #social-profiles a.googleplus { background-position: -5px 0; height: 32px; width: 32px; } #social-profiles a.googleplus:hover { background-position: -5px -74px; height: 32px; width: 32px; } * { margin: 0; padding: 0; } .custom .sidebar ul.sidebar_list { padding: 15px 0; } </style>
    • Αποθήκευση και είστε έτοιμοι

    Tags

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

    0 Σχόλια
    * Please Don't Spam Here. All the Comments are Reviewed by Admin.
    Δημοσίευση σχολίου (0)

    buttons=(Accept !) days=(20)

    Αυτός ο ιστότοπος χρησιμοποιεί cookies για καλύτερη φυλλομέτρηση. Δείτε...
    Accept !
    To Top