Membuat Widget Floating Social Media dengan CSS3

Membuat Widget Floating Social Media dengan CSS3

 DEMO

Motivation - Kali ini saya akan membahas Tutorial "Membuat Widget Floating Social Media dengan CSS3". Jejaring Sosial  memainkan peran yang sangat penting dalam menghasilkan lalu lintas atau traffic pengunjung untuk blogger. Ada beberapa widget jejaring sosial yang tersedia untuk membuat blog anda terkesan lebih ramah dan bersahabat. Widget jejaring sosial ini adalah salah satu widget yang terbaik diantara widget jejaring sosial yang lain. Penulis terinspirasi dari beberapa blog yang pernah di kunjungi sehingga tertarik untuk memposkannya kembali.

Nah, untuk melakukannya, Anda harus memasang Widget berikut ini di blog anda. Yuk disimak cara pemasangannya.

• Cara Membuat Widget Floating Social Media dengan CSS3
• Masuk ke akun Blogger kalian >> Dashboard >> Tata Letak >> Add Gadget >> HTML/Javascript
• Masukkan kode/script di bawah ini.

 <style>
        .sosmed-kananblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtVG0qB6HqdgtqpYbLzbbuqS-3DgeApAb0CGqSSdRZSx6SNLiAyPcs0W-Bp_tBGBpy6CMSqSWcUxftA6SxvFMoo2IDOLMaAZvGLDYN1SkTuqJG_ao0o6GwQoaOziObWMh0FtfZcXrnHDg/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}

        .sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUkePRz30UQv8lpTmjNWwZ539je9_IotdNjkDPMzmxKl8dzEnBedfCHRyE5qHQlBeLfp6TGrgTr4A5q3SfOOE8CzxAt5QxAr4gOoebd66YtLTr-DEm0PFrjJesTidG4k8qyYZGPBDi6t2/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

        .sosmed-isiblogger{margin:0px 0 0 43px}

        .sosmed-kanantwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVl_44L2l2pVPk3I46n1HX_sphs2s04itgWx92Kf3Zx628fOCkOVenzJj8yW9c7usn8DFk6PK31ME07iv-1fKt0Rz_0Kz7WzhI0Rn8AInCcKCnY-9Nzu1yWMymVTAn7lGShLVvKj2-eMjT/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

        .sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJZ5oHwaKUkqg1TZH_B6e4xKXfMBUGYyx0EQAK85N1qYLaQLQKYLAanVXsxnq-u_5C_j_nJTH4c5bJoakdadsriJHZ1GDeh-Q1MPaPcAS9KOx-uwvANIlysMrfOY-WSuejJEcX2feA8dC/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

        .sosmed-isitwitter{margin:0px 0 0 43px}

        .sosmed-kananfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUfo8ZUWYAtjzWpsOJRqyVXAvK1IlUTQijwip2dAOa_OdHMjrQ7HwM65h-h78R-NAuf2hwNs8eq0gXurIQB_b-V-sUmU4cafR47IYK4kA5lAVTCTky8FTw7QWZshWhWqGE2tTheFxnN0_/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

        .sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoQwiFLc2hheKh99gVmR-ixiERu-25-vHJVocGFSJjyKwsRGKzjRiZ86PPLNMfADKPI1r8uVtue56X8wgdTEwzoTfU7FzT9cuko4B-6QbAaeyOEnQ1CCDVRq-95qXTa-a_OkW_VWKbaJA7/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

        .sosmed-isifacebook{margin:0px 0 0 43px}

        .sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

        .sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}

        .sosmed-isirss{margin:0px 0 0 43px}

        </style>

        <div class='sosmed-kananblogger' onmouseout='this.className='sosmed-kananblogger'' onmouseover='this.className='sosmed-kananbloggerc''>

        <div class='sosmed-isiblogger'>

        <a href='https://www.facebook.com/Your Account Name' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHiOeLLQgWROfGt48BE3vW4Lj8_CUNTkB08wBUcrVuZ7SIGrP3PF7BiDSiafbyu-f7hGjxJMlrB2ix7vCsko1LiwNVrQP0P6TIw4pawN-whD1XyiEyX9KiNoS5IKH3W_9jhvCVYo0-qw2P/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>

        </div>

        </div>

        <div class='sosmed-kanantwitter' onmouseout='this.className='sosmed-kanantwitter'' onmouseover='this.className='sosmed-kanantwitterc''>

        <div class='sosmed-isitwitter'>

        <a href='https://twitter.com/Your Account Name' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqubEposUKEMQ013Jl389Eh6RGJfYI_O800BELU-dsSxWLbHYj6G5vZO55hhFrQ3xrI2zxmULevKN517nAtuA-q1HIqWRiJE4_UCqNBJKqq6EEGrEvjh9BRus1uFNBBr0Hhujqc3uOnSz/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>

        </div>

        </div>

        <div class='sosmed-kananfacebook' onmouseout='this.className='sosmed-kananfacebook'' onmouseover='this.className='sosmed-kananfacebookc''>

        <div class='sosmed-isifacebook'>

        <a href='https://plus.google.com/your googleplus/posts' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0-EC2wFaxXdW79Z_Hz56bPuBmhmiTDOWNQbuUME-V1a9ryjkGLc_-l3teprpqejIpD-g1ViHOolvLuUdvRf8k5SqdTsSRrMKdr83_M4mzu5J3xfmJFD1IEI8wSPLdkWRfWxyvIX1ljOO/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>

        </div>

        </div>

        <div class='sosmed-kananrss' onmouseout='this.className='sosmed-kananrss'' onmouseover='this.className='sosmed-kananrssc''>

        <div class='sosmed-isirss'>

        <a href='http://feeds.feedburner.com/Your Account Name' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/>

        </div>

        </div>

• Ket

1. Silahkan Ganti Teks Berwarna Biru Dengan Nama Akun Anda.
2. Anda juga dapat menyimpan/mem-pastekan kode ini di bawah kode

Nah, Itulah Tutorial Blogger Kali ini "Membuat Widget Floating Social Media dengan CSS3". Semoga Bermanfaat. Terima Kasih.

Motivation_2014Arsip