Cara Membuat Sosial Media Widget Floating Keren

Wah capek juga ngutak-atik blog ini, atur sana sini, optimasi seo onpage dan akhirnya jadilah blog ini seperti sekarang yang sobat lihat. Ini merupakan artikel perdana dari blog Estehmen. sebenarnya saya bingung mau posting apa untuk artikel perdana, tapi setelah mikir agak lama dikit saya pun memutuskan untuk memberikan sebuah tutorial membuat sosial media widget floating keren.

Untuk contohnya bisa sobat lihat sendiri di blog saya ini, (tuh diseblah kanan!), sekalian di follow dong, hehehe... udah deh gak usah basa-basi lagi langsung aja tak kasi tau caranya :

Cara Membuat Sosial Media Widget Floating Keren

1. Masuk ke dashbor Blogger sobat.

2. Pilih Tata Letak

3. Terus klik Tambahkan Widget

4. Pilih HTML/JavaScript, lalu isikan kode dibawah ini :

<style>
            .fixedmenu {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjajjKpDFbBaD22TNAOvXhN8xFAfVZqaSTVqkvXonX3qiPTBremOBE1kOasM-YrHvcSPFx9hJ4IZi9EkLYeWGNbZJO3VcnjxTrdiTyOS7Rcij-AlwKV_sd6SE4RLvjVBa6w5u7GMCrrEoA/s1600/facebook.png');
                background-repeat:no-repeat;
                width:43px;
                height:43px;
                position:fixed;
                right:0px;
                top:160px;
                z-index:1000;
            }
            .fixedmenu1 {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim4inntvUOUaW8DEdAQoS4Tp99xjtFhEisBM8jqhpbYmBzlChjyIwhds_XtFuyuBmkOnAf3psl7VbXXMHe3fcpf9hAlItsn_EVz5Yq5yMSbX_kxQXntunrDEA451XSrZx3UKYogVrCiOk/s1600/facebook-hover.png');
                background-repeat:no-repeat;
                width:150px;
                height:43px;
                position:fixed;
                right:0px;
                top:160px;
                z-index:1100;
            }
            .fixedmenu_1 {
                margin:0px 0 0 43px
            }
            .fixedmenutw {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7q8P4qTmXU2DNsxsenkwAol_AtQegXjKVx40Ky1rkEtq9pI9GiqG9eQpkiJYdptBi_GppxbJNo3GG-gGwxwnIGhasgR8WdmfSXoRWWEn37a9s4xUWEm3DHpHlFFXl4LsgI23awYXJWZE/s1600/twitter.png');
                background-repeat:no-repeat;
                width:43px;
                height:43px;
                position:fixed;
                right:0px;
                top:205px;
                z-index:1000;
            }
            .fixedmenutw1 {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yNplTWKf4MOMY-5xiScX0ksnaN-7QZdlZXIpwVDut8wH0nGaB8_Pk2eCMcy7FX7QVamWeC2tIP5MMDtUgbck1XLEa8iH-0zf6G7N6TKylMAaZYoQVGq3Oo4M2iH_-ZK11Dh3dRMPRXk/s1600/twitter_hover.png');
                background-repeat:no-repeat;
                width:150px;
                height:43px;
                position:fixed;
                right:0px;
                top:205px;
                z-index:1100;
            }
            .fixedmenutw_1 {
                margin:0px 0 0 43px
            }
            .fixedmenufb {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqy8UsOJ0zJuUllJTwUEFWcCvfAl5is5HKyXBQdd-F7zoyo_45u4MQkIri9Fgw2oww1l4L3oINUo28ZI4OqHsgbR83T2EZ_bbbCqSmJDJxcz28QUTbiBN55wPOjU80jl2MOmud8sxq9E/s1600/Gplus.png');
                background-repeat:no-repeat;
                width:43px;
                height:43px;
                position:fixed;
                right:0px;
                top:250px;
                z-index:1000;
            }
            .fixedmenufb1 {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdK1bpi0AfVXu35HpN-EHah9z_Dz8QM2QPmgAnkirq8lBBg7wpXeLav-gWg1KZB6tmH_N5vPUvmTrAv9OeovvsT-dT5VHfVEZHIEyIeGDdBkw1tAWCslG_6Xdw5Za8Rxs7S5AiGSJExI/s1600/Gplus_hover.png');
                background-repeat:no-repeat;
                width:150px;
                height:43px;
                position:fixed;
                right:0px;
                top:250px;
                z-index:1100;
            }
            .fixedmenufb_1 {
                margin:0px 0 0 43px
            }
            .fixedmenurss {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyXilKuNqUPx94JkZzuVdg7SJEUyv8VKw6oKb-OqZRpZ_Gn5Jy5ehMqI-JmUcYSpuE1v4bU6kadKLKUTflViR68cQZz2_7xgunhnEwSkdrBQOSxpe5AHCAb_0hFPVPA3FFBJH2-YFdh1s/s1600/rss.png');
                background-repeat:no-repeat;
                width:43px;
                height:43px;
                position:fixed;
                right:0px;
                top:295px;
                z-index:1000;
            }
            .fixedmenurss1 {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjQC2pzL0YiDJQB_dxGSslDQkoZYE44bcJb79PP-zJLhTiiSZAW2u229xjxsc9XCrKD0zsIqBcAGxvMeD0KWJ_l8RdwSZkKXFgR0FILg6vQ64dNZ-IBRcGrrTES2c0l6njO0gxPeDDt4/s1600/RSS-hover.png');
                background-repeat:no-repeat;
                width:150px;
                height:43px;
                position:fixed;
                right:0px;
                top:295px;
                z-index:1100;
            }
            .fixedmenurss_1 {
                margin:0px 0 0 43px
            }
        </style>
<div class='fixedmenu' onmouseout='this.className=&apos;fixedmenu&apos;' onmouseover='this.className=&apos;fixedmenu1&apos;'>
            <div class='fixedmenu_1'>
                <a href='LINK FACEBOOK SOBAT' target='_blank'>
                    <img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXsWZ1yk9O2yOahdDFSGG399z0xx6MoKpt0hAmbsvoETU2UnF2KKiKECccFROH9BBswRNjpzZEnpJhcE36k3j6NON3obGY3skUtbhdvZYjNwKwv-H7pk7EzSIaQo6GVEiVDalYHqi3MM/s1600/facebook-hover1.png' title='Like us on Facebook' />
                </a>
                <br/>
            </div>
        </div>
        <div class='fixedmenutw' onmouseout='this.className=&apos;fixedmenutw&apos;' onmouseover='this.className=&apos;fixedmenutw1&apos;'>
            <div class='fixedmenutw_1'>
                <a href='LINK TWITTER SOBAT' target='_blank'>
                    <img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqBHeSRBgLLMm0AuhdmncbEVDqWRwVLYaC006DVz67io6lLgCpT09T1M_1-5Xvr6FlLuK-bblE1lr7bucJqu-ZX3WKWNTyw507cDRjOTCyuqajkJo9rK0TTtogWE0BbOoWZ-NIUiuvvc/s1600/twitter_hover1.png' title='Follow us on Twitter' />
                </a>
                <br/>
            </div>
        </div>
        <div class='fixedmenufb' onmouseout='this.className=&apos;fixedmenufb&apos;' onmouseover='this.className=&apos;fixedmenufb1&apos;'>
            <div class='fixedmenufb_1'>
                <a href='https://plus.google.com/ID GOOGLE PLUS SOBAT' target='_blank'>
                    <img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrqUBy5w8CFp26a9mKARMq4vqAoPGNPco0sdJqBv-KyuvDEtjVwxcx-fWtYwzRtP8h9wfk-E3Sn9hYZ1Kvls5SRR0Xycwj9SuRtWuWI-3M4a77n5T9cuNX7TnrAWD9r_0XQzsgHG8xoU/s1600/Gplus_hover1.png' title='Recommend us on Google Plus' />
                </a>
                <br/>
            </div>
        </div>
        <div class='fixedmenurss' onmouseout='this.className=&apos;fixedmenurss&apos;' onmouseover='this.className=&apos;fixedmenurss1&apos;'>
            <div class='fixedmenurss_1'>
                <a href='LINK RSS SOBAT' target=' _blank '><img alt='Subscribe me on RSS ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimp6sj0Ko30MutW_sbVMdYnH9IgHNRuhN0fR8_xixmn4k04ek10BmOVKnv7ZxgdfOiaAINDSbZXaPrkXASAd3RVIvsfVLREamhgrs5WeDbDIHVK0gBXK-jjzX0NYXYhx_9wiXK7K0WKz0/s1600/RSS-hover1.png ' title='Subscribe me '/></a><br/>
</div></div>

Keterangan : Ganti Link RSS, Twitter, Facebook, dan Google Plus sobat pada kode di atas

Setelah itu klik Save dan lihat hasilnya di blog sobat.