Cara Membuat Share melayang di samping

Jumat, Oktober 21, 2011 | Diposting oleh yodicakep |

Kali ini saya mau share sebuah trik yang bisa anda gunakan yaitu " Cara membuat kotak Share,like,tweet dan lain2 di samping postingan" membuat sebuah postingan tentunya harus sering2 untuk share atau di promosikan,hal itu bertujuan untuk menambah jumlah pengunjung blog tersebut,karena dengan share tersebut maka blog anda juga aan terlihat profesional...heeeee,jadi buat anda yang punya hobby ngoprak2 blog silahkan tambahkan widget seperti ini...monggo di coba

Contoh Tampilan

Cara Penerapan

1.Masuk ke Blogger
2.Pilih Template kemudian pilih Edit HTML

Maka akan keluar tampilan semua Code HTML

3.Pilih Lanjutkan----> Centang Expand Template Widget

4.Tekan CTRL+F untuk membuka menu Search

cari code <includable id=post var=post></includable>

5. Taruh code tambahan di atasnya <includable id=post var=post></includable>

Berikut ini adalah code yang perlu anda tambahkan

<if cond="data:blog.pageType == "item""></if>
<if cond="data:blog.pageType != "static_page""></if>
<style></style>
.mbt_social_floating{

position:fixed; bottom:10%; margin-left:-60px; float:left;
    width:60px;

background-color:#f7f7f7;
    padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2WO5hdnSKEMahXQOmUF4zNKmSYAGTjg5m-e9_g4zWjmhZ1XRGT49xXAY5ImHXQIP3XVyGGAHYN3FYGHlOpbjKt8hh6xAFUAk76ENinuvoPCzrYA7EdcLOiSvRMfRqwxMhQBCFgEpPy8g/s400/gc_social_sprite.gif') no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2WO5hdnSKEMahXQOmUF4zNKmSYAGTjg5m-e9_g4zWjmhZ1XRGT49xXAY5ImHXQIP3XVyGGAHYN3FYGHlOpbjKt8hh6xAFUAk76ENinuvoPCzrYA7EdcLOiSvRMfRqwxMhQBCFgEpPy8g/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}

    <script type="text/javascript"></script>
    <script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
    <script type="text/javascript"></script>



<center>Pin It<script src="http://assets.pinterest.com/js/pinit.js" type="text/javascript"></script>
<script type="text/javascript"></script>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}

</center>



<script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript"></script>
<script type="text/javascript"></script>
var addthis_config = {
     ui_cobrand: "Tulis username tweeter anda",
ui_header_color: "#ffffff",
     ui_header_background: "#0080FF"
}