Membuat Widget Floating Social Media dengan CSS3

https://www.ramelhobbyshop.com/2022/04/membuat-widget-floating-social-media.html
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.

 <style>
        .sosmed-kananblogger{ background:url('http://4.bp.blogspot.com/-pHaCPnRRhpw/UEyeymZDBAI/AAAAAAAAAPo/sQgRynAxmLc/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}


        .sosmed-kananbloggerc{ background:url('http://4.bp.blogspot.com/-udMDlRqH1mA/UEyexorOOMI/AAAAAAAAAPg/xlYmVRZR5Gc/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('http://2.bp.blogspot.com/-cb-8UxmdvCY/UEye3s5ckoI/AAAAAAAAAQI/2UsOUiBl7OY/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

        .sosmed-kanantwitterc{background:url('http://4.bp.blogspot.com/-TtvqyHndUXc/UEye2FTtlVI/AAAAAAAAAQA/3de7K8XwcWE/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('http://2.bp.blogspot.com/-kX-wO_55wpo/UEye0R9pSdI/AAAAAAAAAP4/GYLd2emZvyc/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

        .sosmed-kananfacebookc{background:url('http://3.bp.blogspot.com/-xAafaK_rors/UEyezhSNU4I/AAAAAAAAAPw/ceimgukhoT8/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='http://3.bp.blogspot.com/-N67uPytUphw/UEyoTwSDa9I/AAAAAAAAAQc/yQjj5R6pBuI/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='http://1.bp.blogspot.com/-82LWv3XyPKQ/UEypI664imI/AAAAAAAAAQk/CBSAuHp_lqA/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='http://3.bp.blogspot.com/-eOpgXkqE7cw/UEyqFjfr6dI/AAAAAAAAAQs/A2JlJ2fios0/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

        Baca Juga
        Related Post

        Post a Comment

        0 Comments
        * Please Don't Spam Here. All the Comments are Reviewed by Admin.

        Top Post Ad

        Below Post Ad