Beautiful share widget to add below posts for blogger



Πώς να προσθέσετε αυτό το widget:
Βήμα 1: Μετάβαση πρότυπα του blog σας και να δημιουργήσετε αντίγραφα ασφαλείας ένα αντίγραφο του προτύπου σας.

Βήμα 2: Κάντε κλικ στο "Επεξεργασία HTML".

Βήμα 3: Κάντε κλικ στο widget επεκτείνει το πλαίσιο ελέγχου στην κορυφή της HTML.

Βήμα 4: Πατήστε το πλήκτρο "Ctrl + F" και την αναζήτηση για τον κωδικό.


<div class='post-footer-line post-footer-line-1'/>


Βήμα 5: Ακριβώς πάνω από τον κώδικα, επικολλήστε τον παρακάτω κώδικα.


<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHN2GgunghUN0Y_gfu6M96v_kzPiASEix7qTWCC4-7zx9UOTMGJH5gKwWK1QWyOr29btKRFtm9RyyXMQ-BPFY0ECQ1A8XzcM1AnqQJ88a4xiBV-9rS74CD0kgHg0oD94-SBnwzyAO3SDM/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</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 class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
</b:if>


Βήμα 6: Τώρα αποθηκεύσετε το πρότυπό σας και το widget θα εμφανιστεί.

DEMO

ΠΗΓΗ 
Κατηγορίες:
Σχόλια