Flat Social Share Button for Blogger
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Σαβ Σεπ 16, 2017 12:53 pm
Step1: Go to Blogger Dashboard > Template > Edit HTML and copy past below CSS code before </style>
CSS:
- Κώδικας:
/* CSS Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
Step2: Now past below code before </head> tag.
- Κώδικας:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Step3: Now add this code right after <data:post.body/>
- Κώδικας:
<b:if cond='data:blog.pageType == "item"'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div> </b:if>
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
