Anda di sini : Home / Tutorial Blog / Cara Memasang Tabbed Vertikal Sosial Media Pada Blog

Cara Memasang Tabbed Vertikal Sosial Media Pada Blog

Cara Memasang Tabbed Vertikal Sosial Media Pada Blog - Sebelumnya saya ingin menjelaskan sedikit mengenai widget sederhana terbaru ini. Widget tersebut dilengkapi dengan empat tab yang berbeda yakni dintaranya Facebook, Twitter, RSS, dan tidak ketinggalan Google Plus tentunya.

Sedikit berbeda dengan widget sosial media pada umumnya, widget ini di desain se'sederhana mungkin. Akan sangat cocok jika dipasang diblog anda yang memiliki tampilan modis dan professional. Secara umum widget ini fleksibel dalam artian bisa diterima oleh model blog anda karena tampilan widgetnya yang jauh dari kata ribet dan tetap terlihat keren. Buat pengunjung anda saling berbagi melalui widget sosial media di blog anda.

Cara Memasang Tabbed Vertikal Sosial Media Pada Blog

1. Login ke Dasbor Blogger anda.

2. Masuk ke Laman Tata Letak anda.

3. Tambahkan Widget "Add Gadget".

4. Letakkan Kode berikut di dalamnya.

<style>
            .fixedmenu {
                background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja1q8QsxwqU9wyZnfV2usWzkkXZbrH2YZemtjGbVxELLj0o0tYe2haEVO9_Kc5xuEH-MC0wA0guvHvoEQKvBAhN1e4yU3aY4FrhoFoUkebK7KpxOPcMJfkOPja5BD9c1JnSkHiCum44Us/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/AVvXsEhAloRj9l4dxn7JXYUoOHO2QJqrTUwn5ZaRZr3-SEJtbnN-Nzkv8IjbSsO__hS8XvadQf9ZBhIZwMRbzdljij-xFlBVwnGnoT3Lu0eRGXybuDhkzPKrCpkh8zt7w-puU3b52W5amPGz3bQ/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/AVvXsEih-qXFnPQWPWdHr75pC-GgCKB2hgqhbpyA_tl4JggEI7aJrCnsfY4ANA2pRJ8N5umrLOWMj8BaMQzUvkWmFyiO9vgLIblHGlLp8Pa5XKsmW-Y2DywYGk5KuDy9OKq0QTdscOijDjX2BR4/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/AVvXsEg-XZ399ADgg97zuCE_zh8LeocIi9sp4ei1nB-VqVrES8hXaiRt9Cs31iOQuSL5R_mzeH079SkS4s_QaBduxJPMloPpCwqwXt7fgU8xi0rovllrMziGuo9BfrQzIiZJLoLAHHZtU4Ch8HE/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/AVvXsEh4aMKb9M4MorNFOtS-orEUHWN3BcrJfjCbv6Odse38JhZDmyuPysY8sL4i299cuYCkECC7K5HRxN5bbF66xQTRCqITrF-uIAA1EqBo3nxEnsAZQX0L7lPUAbmDcyIeJhBr-yzJrZi2LVg/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/AVvXsEiEHPqEku7g4qTE87C_yCKq4Q9AGXqq0UIa9v3kvLL51TahPz68uNJJzHPCfnClDMZkJ_cPnSt1W7x0oxnee6TkrHQINTQiwP5mVySp_kfCUf14FpuAb2_8HrsN4ZmXHfir81x4w-ceimA/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/AVvXsEhi6I6W_b5qZz4laa4-oK3IJ5ORcXz0LFauZ_9DoiI2zuh0uJuYJD9JDBBpAwktZ_cJCowDEyN0HuJTWg4baWIDpQy-yR58ntE8FA1pWGSyMLmnsu2jXuk8h2a7AvaOI3DDvspVvQ1crdw/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/AVvXsEgmO_6WQKn5p7Tt10-fNdu_EQrs9dXNt41BsN_EMZP8rSwDnRGvKj-JAdVVRu_humNifDHQh4-7naFMaebfs3A17ME7xrJYnazuVhyt5CXoBSIDvOwzkI21UPBibYzK9DiWLZEejWRmrdE/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='fixedmenu'' onmouseover='this.className='fixedmenu1''>
            <div class='fixedmenu_1'>
                <a href='https://www.facebook.com/MargopB' target='_blank'>
                    <img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZrZry9bjF1hRYMRSVHnoHIAsOuwjSj5z_xr4CvO0IF2Qoo_djzwd8I6rKQ7gnpQPAr_ql2gijuHPVxFT7uHKT-42fz6SiUkEcYTVmO2ZrnhIFt3BLoPz5M6qjwPCK0eWkroaiU_LMg8/s1600/facebook-hover1.png' title='Like us on Facebook' />
                </a>
                <br/>
            </div>
</div>
<div class='fixedmenutw' onmouseout='this.className='fixedmenutw'' onmouseover='this.className='fixedmenutw1''>
            <div class='fixedmenutw_1'>
                <a href='https://twitter.com/Nauvalgunawan1' target='_blank'>
                    <img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCNFLWETNBpGqH2k7bqz8LUVXfNa72wmeZJPwo2nBmsfwRc1xK7Nhm6KaLnKz-Y9vvoFykTptz6z-SNaJw_32ScL9JFSkfyu4V0jzHlvtlUBQm8-HUr7UHPqlHg-2bYuKrtVhvs247dY/s1600/twitter_hover1.png' title='Follow us on Twitter' />
                </a>
                <br/>
            </div>
</div>
<div class='fixedmenufb' onmouseout='this.className='fixedmenufb'' onmouseover='this.className='fixedmenufb1''>
            <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/AVvXsEiyNbxlahOYji9do-tpu8sXXzEjzAxU4YZkY7tofKwjyur0LzHH2Nge_gTHY6zJvDblDcmnmwdyXbDIoIzb1zEJbQFzLP0DVKn9mvyl3LSk4g4LXZoBAALi5G9nfLp73zozoZ5XR2WDVr0/s1600/Gplus_hover1.png' title='Recommend us on Google Plus' />
                </a>
                <br/>
            </div>
</div>
<div class='fixedmenurss' onmouseout='this.className='fixedmenurss'' onmouseover='this.className='fixedmenurss1''>
            <div class='fixedmenurss_1'>
                <a href='http://feeds.feedburner.com/margopblog' target=' _blank '><img alt='Subscribe me on RSS ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvA60qV5KSRySoQDAjmjYrBxkHXXZ8wxVCo5DnhTafhpYe4PwoYu1Jr2nk2muqdkLozEh8c7mboc3FyMsqwg3Jz1AkK4-eYBSEMCrZAdY5fkdTSMHHn6IYUq4TuYhgis1cO4o78Z4Jk4I/s1600/RSS-hover1.png ' title='Subscribe me '/></a><br/>
</div>
</div>

5. Simpan Setelan Tata Letak dan Lihat Hasilnya.

Note:

Ganti setiap alamat sosial media dengan url anda sendiri.

Jika ada kendala silahkan sampaikan pada kolom komentar mudah-mudahan saya bisa membantu.

"SEMOGA BERMANFAAT"

Unknown

Penulis blog ini merupakan seorang mahasiswa berstatus jomblo yang mengisi kekosongan dengan kegiatan blogging (blogger jomblo). Saya berharap semua konten yang ada di blog ini bisa bermanfaat untuk kita semua.

Apa tanggapan Anda untuk "Cara Memasang Tabbed Vertikal Sosial Media Pada Blog"

Post a Comment

Beri komentar Anda di blog ini dengan cerdas dan etika yang baik :)

Subscribe to: Post Comments (Atom)