Cara Membuat Fixed Social Media Sidebar untuk Blogger

Dalam tutorial ini Tempat Blogging akan menjelaskan Cara Membuat Fixed Social Media Sidebar untuk Blogger. Dengan menggunakan media sosial ini sidebar Anda dapat menghubungkan sosial media Anda profil Facebook, Twitter Google plus dan RSS. Periksa demo dari link di bawah ini. Jika Anda ingin melihat Widget Social Media lainnya, klik link ini.

Demo

1. Login ke blogger.com.
2. Masuk ke bagian Layout / Design.
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style>
            .fixedmenu {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExv8brXWKItwzHru0m6DSE50zf0swaXsVcc0cSjE0PyeQst-00evoXVR_55Ntt-rsIXK0TjldZn2J0JJXnjZrXc07EyXephk7Nm148-i7pkihqjx2eaKG45lY9W5TO6f7-udnuIW9ArE/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/AVvXsEgslQW0yLwuiwFsVWw401JXwuNu7rq-JTIv8IRvOmSfK8-i1o0hpgfwA0SCI9JKwcef0kKYiUzsIbLsaFZxP-8QYxeQ1u0cgk_VG_RjzemIFlyxiQbMjTc-gjvVWGRYwGWpR1WlL_iOwpY/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/AVvXsEiqxLOUU7Ykv8WZnU_XYRKsJ7KYso2fYQAFPeTq2cAgqK4DLl6fMtK_qr_Cjps0vfD7CKpkTnAGXROrXSrw9-ZdSLZjMgUTgg8XDlguUsPIpGdkwm2zMabWGp-nxPRhlNB5qDhAf48j_ns/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/AVvXsEirzCPER5odl-unqQ9-3sxxQU0g7LzP8ChpsbH_BDpzY5BaoddTTCykEpOMUqh9r7ca2vFpfusVoBPB8i81Mr7gaBRqqBm-3fcEeK_cggoJQu1bc51uNJWtRfH7b2bVN0mvLXw6QqFAXBE/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/AVvXsEhXSmYJjuIXxJWa74IgnICBePtkP2qUHMKOXoRUw-KrLi8L8nXwovNU-hRBi251CHKpV94YRdrzJNzP7EFMKEMaW7k3FEaUPErXTyiu56Xuv4W4soDBI4uD0Ct5KNzXUpS5CdEG7n8DuDo/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/AVvXsEhKJea1dMBV0R1DIZCELUJ7EWS3vx1INKtRfkhDYrqQq__8003dcrB6xIesXwPzNe4Uc8_MjQB7zfZ0CTQEpmYMmLZc5505wfYeWVHm2OW1jmRSkjS7QplvBVVG_qAUfJqcDrSNrLoffXI/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/AVvXsEhTVeD4g0BgQVWo1PiqeH3RFtwvQoIzWF3NJT1S0PTgqubyqWlHV-jHqc1bSJ1MxPS5pZHmGTjHujylwiZTeAP0TczFzQqh0OFF1gdfgrSb9KD3HsZbldmvuBmlJo9AqMh90hrcxLqS_Mg/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/AVvXsEgAAVy4TQ58T7qM16u6lEpG4dqMU1kMGU-1mJZ5MPRHRZYkZK1g9IoXerpkyWMf5WkndSIfD5dsKdMx-OR0NZjdn4qYpSytG7yNI66kaadEwJ5BFhVNdE8hztohBVgoEN9GBpFsp32rnHI/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='https://www.facebook.com/TempatBlogging' target='_blank'>
                    <img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguz-6sp3L3-3n8A2JWz0scj9LZ01EwhOU1C4WPAzRm9Y-2F0psTBdKW4wu9UccuJe6n2Sr_xSTzZ__vLbbvBdpAzy5Io66r2gTvNxnOrVRjr5XHnSDrHZ6R_Ye6TOjtYi4VZoO0CSNS8o/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='https://twitter.com/TempatBlogging' target='_blank'>
                    <img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS42sBIBzUDUFPm8sqsQokvI5WYxZwWnJiXcFp55GKhb1_FeQuWw5mA_9CLWxDan0ygr1pzFzrY8DtTD9gGTMsv2ovbaOqRMa0yW8w6wGJkyYhtqRYLBaP9jDS-fUHjHRVPlBxYXm573c/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' target='_blank'>
                    <img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLeH8eKPVY40INaqBN-Y2s5-i7DsxhDML-l8BPOoJZv7QDlSqiYj0tJNU5NnqvA6Fq1CBG1VMlU_TB3Y5r6KZq6GkmIcs4JQLtbjlgH1BzeNuBxCyX9lykF3QAXsrqCra6hTaDMrYJI0s/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='http://feeds.feedburner.com/TempatBlogging' target=' _blank '><img alt='Subscribe me on RSS ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmojwb6RIS2gGvUxesSkd9WypBUXmzvdLrYplidG0OC97e10e6O_uj0pAxA4V8zJ0_aAEQsgAz8xWdSpAb8p8uAZj2cSV7NWlit7LBnaDthSPEIx5YrK5VeHO1LKtGyEN2Jv5WM_n8Fo/s1600/RSS-hover1.png ' title='Subscribe me '/></a><br/>
</div></div>

Note:
Ganti TempatBlogging dengan nama pengguna Facebook Anda
Ganti TempatBlogging dengan Nama Twitter Anda
Ganti ID dengan ID Google Plus Anda
Ganti TempatBlogging dengan Feedburner ID 

    6. Sekarang menyimpan HTML / Javascript .

Nah Selesaikan, sekian dulu untuk Tutorial kali ini yang membahas tentang Cara Membuat Fixed Social Media Sidebar untuk Blogger. Bila Ada yang perlu di tanyakan silakan berkomentar.. Trims

Share this post