Membuat Floating Social Bookmark Melayang dengan Efek Easing

Membuat Floating Social Bookmark Melayang dengan Efek Easing » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Hallo teman-teman semua sudah lama juga saya tidak update artikel diblog ini juga ya.. Oiya bagaimana kabar kalian semua? Sehat selalu bukan? Oiya kali ini saya memiliki trik untuk mempercantik blog Anda. Kebetulan tutorial ini saya peroleh dari www.maskolis.com yang merupakan salah satu master pembuat tema blog dan tutorial yang ciamik. Menurut saya lho.

DEMO

Nah jika kalian ingin membuat blognya menjadi lebih atraktif mungkin bisa mencoba untuk memasang icon share yang melayang disamping kanan blog kalian dan ini tentu bisa membuat tampilan blog lebih indah dan enak untuk dilihat. Oiya jika kalian memiliki sejumlah pertanyaan nanti akan saya bantu untuk menjawab namun jika saya tidak bisa menjawabnya kalian bisa langsung mengunjungi situs www.maskolis.com ya untuk mendapatkan jawaban yang detail dan tepatnya. Maklum saya ini hanya seorang newbie yang ingin berbagi informasi yang saya peroleh. Heheheheh..

Ok langsung saja ke tutorialnya ya:

Login ke Blogger
Masuk ke Template
Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :

Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'>Follow via Facebook</a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'>Follow via Twitter</a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'>Follow via Google</a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'>
Follow via Pinterest</a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'>Follow via Youtube</a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'>Follow via RSS</a>
</div>

Terakhir, Save Templates

Nah demikian tadi tutorialyang bisa saya berikan. Jika memiliki sejumlah pertanyaan silahkan bertanya dan saya akan mencoba menjawabnya namun jika tidak bisa menjawabnya mohon dimaafkan ya.. :)