Browse Source

Add share button

Add share button: Twitter, Facebook and Google+.
pull/9/head
Danang Probo Sayekti 12 years ago
parent
commit
d184a29037
6 changed files with 62 additions and 10 deletions
  1. +1
    -1
      system/htmly.php
  2. +47
    -5
      themes/default/css/style.css
  3. BIN
      themes/default/img/share-facebook.png
  4. BIN
      themes/default/img/share-googleplus.png
  5. BIN
      themes/default/img/share-twitter.png
  6. +14
    -4
      themes/default/post.html.php

+ 1
- 1
system/htmly.php View File

@ -149,7 +149,7 @@ get('/:year/:month/:name', function($year, $month, $name){
render('post',array(
'title' => $current->title .' - ' . config('blog.title'),
'p' => $current,
'authorinfo' => '<div class="author-info"><div class="separator">&rarr;</div><h4><strong>by ' . $bio->title . '</strong></h4>' . $bio->body . '</div>',
'authorinfo' => '<div class="author-info"><h4>by <strong>' . $bio->title . '</strong></h4>' . $bio->body . '</div>',
'canonical' => $current->url,
'description' => $description = get_description($current->body),
'bodyclass' => 'inpost',


+ 47
- 5
themes/default/css/style.css View File

@ -552,20 +552,52 @@ aside .copyright p{
}
/*----------------------------
Author info
Share + Author info
-----------------------------*/
.separator {
text-align:left;
font-size: 18px;
line-height: 1;
}
.share-box {
margin-bottom: 0.75em;
}
.author-info {
font-size: 12px;
font-style:italic;
float:left;
width: 430px;
margin-right: 2em;
}
.separator {
text-align:left;
font-size: 18px;
line-height: 1;
.share {
font-size: 12px;
font-style:italic;
width:120px;
}
.share a {
display: inline-block;
width: 18px;
height: 18px;
margin: 2px;
vertical-align: middle;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
text-indent: -9999em;
}
.share a.twitter { background: url(../img/share-twitter.png) left top no-repeat; }
.share a.facebook { background: url(../img/share-facebook.png) left top no-repeat; }
.share a.googleplus { background: url(../img/share-googleplus.png) left top no-repeat; }
.share a:hover { background-position: left -26px; }
/*----------------------------
Media queries
-----------------------------*/
@ -640,6 +672,16 @@ aside .copyright p{
.search {
text-align:center;
}
.author-info {
width: 100%;
}
.share {
float:left;
width:100%;
padding-bottom: 1em;
}
}
/*----------------------------


BIN
themes/default/img/share-facebook.png View File

Before After
Width: 18  |  Height: 44  |  Size: 582 B

BIN
themes/default/img/share-googleplus.png View File

Before After
Width: 18  |  Height: 44  |  Size: 836 B

BIN
themes/default/img/share-twitter.png View File

Before After
Width: 18  |  Height: 44  |  Size: 668 B

+ 14
- 4
themes/default/post.html.php View File

@ -13,10 +13,20 @@
</div>
</div>
<?php if ($type == 'blogpost'):?>
<?php if (config('author.info') == 'true'):?>
<?php echo $authorinfo ?>
<?php endif;?>
<?php endif;?>
<div class="separator">&rarr;</div>
<div class="share-box">
<?php if (config('author.info') == 'true'):?>
<?php echo $authorinfo ?>
<style>.share {float:right;}</style>
<?php endif;?>
<div class="share">
<h4>Share this post</h4>
<a class="twitter" href="https://twitter.com/share?url=<?php echo $p->url ?>&text=<?php echo $p->title?>">Twitter</a>
<a class="facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $p->url ?>&t=<?php echo $p->title?>">Facebook</a>
<a class="googleplus" href="https://plus.google.com/share?url=<?php echo $p->url ?>">Google+</a>
</div>
</div>
<?php endif;?>
<div class="comments border">
<?php if ($type == 'blogpost'):?>
<?php if (disqus(null, null) == true):?>


Loading…
Cancel
Save