Membuat Social Media Button pada Tumblr

Sebelumnya sudah ada yang tau tumblr apa belum? Kalau belum tau, tumblr itu blog yang beberapa bulan lalu di akuisisi Yahoo untuk menyaingi blogger milik google. Kalau dilihat dari segi fitur share, menurut saya pribadi tumblr lebih bagus daripada blogger, karena ada fitur reblognya. Jadi kalau dijelaskan sedikit mengenai fitur reblog ini yaitu mirip retweet punya twitter, cuma bedanya yang di reblog adalah postingan blog kita oleh orang lain (kalau di twitter yang di retweet status kita), dan coba bayangkan jika orang yang melakukan reblog postingan kita ternyata memiliki PR yang tinggi di tumblr, berarti otomatis kita bakal kecipratan juga karena postingan kita seperti di bookmark di blog tumblr mereka.

Akan tetapi ada beberapa kelemahan tumblr, yaitu tampilannya ribet banget terutama buat yang ingin costumize template. Hal ini dikarenakan pada tumblr tidak ada tampilan layout seperti pada blogger yang tinggal kita drag & drop jika ingin merubah posisi widget, sedangkan tumblr untuk mengatur layout kita harus masuk ke menu edit html untuk melakukan oprek kanan-kiri agar tampilannya sesuai dengan yang kita inginkan, dan yang pasti pada tumblr ini tidak ada yang namanya widget yang bisa di drag and drop seperti pada blogger.

Jika pada blogger, kita ingin menambahkan social button seperti facebook, twitter atau g+ kita tinggal menambahkan widget edit/htm dan paste codenya dan selesai, tombol sosial share pun langsung jadi. Sedangkan pada tumblr minimal kita harus memutar otak sedikit sambil membayangkan tampilannya dikarenakan kita kudu obok-obok html dulu.

Kebetulan pada postingan kali ini saya ingin share cara membuat social button lengkap dengan Appearance Menu pada dashboard (ini yang saya suka dari tumblr yang tidak dimiliki blogger, yaitu kita bisa membuat menu sendiri di dashboard sesuai keperluan kita). Ok! langsung saja kita mulai tutorialnya.

Membuat social button pada body

1. Masuk dashboard tumblr, kemudian klik menu costumize pada sidebar.

2. Jika sudah di klik, langkah selanjutnya yaitu masuk ke dalam edit HTML pada bagian atas menu.

3. Cari kode <body> (gunakan ctrl+f) kemudian silahkan letakan kode html social button berikut dibawahnya.

<div id="SocialLinks">

                    {block:IfDribbbleUsername}
                    <a href="http://dribbble.com/{text:Dribbble Username}" title="Dribbble">
                        <img src="http://static.tumblr.com/ubkenek/pvyluyuim/dribbble-icon.png" alt="Dribble Icon"/>
                    </a>
                    {/block:IfDribbbleUsername}

                    {block:IfFacebookUsername}
                    <a href="http://facebook.com/{text:Facebook Username}" title="Facebook">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnl1aRo2nUs6JqshQR4Q4Gj5iZ4e7L3PoemtS4FrEvkkI-hXyptXqKkVndVDdJD6iAz5tDwim5j8uwNXumnREQNk-EHIz3ZPoxcXkX8zk7sPWwIazCyi9qM2Zlxirj417DqJbWWh5Eipc/s1600/facebook-icon.png"/>
                    </a>
                    {/block:IfFacebookUsername}

                    {block:IfFlickrUsername}
                    <a href="http://flickr.com/{text:Flickr Username}" title="Flickr">
                        <img src="http://static.tumblr.com/ubkenek/SAAluyut9/flickr-icon.png" alt="Flickr Icon"/>
                    </a>
                    {/block:IfFlickrUsername}

                    {block:IfForrstUsername}
                    <a href="http://forrst.com/people/{text:Forrst Username}" title="Forrst">
                        <img src="http://static.tumblr.com/ubkenek/rfoluyuxn/forrst-icon.png" alt="Forrst Icon"/>
                    </a>
                    {/block:IfForrstUsername}

                    {block:IfFoursquareUsername}
                    <a href="https://foursquare.com/{text:Foursquare Username}" title="Foursquare">
                        <img src="http://static.tumblr.com/ubkenek/S3Zluyv00/foursquare-icon.png" alt="Foursquare Icon"/>
                    </a>
                    {/block:IfFoursquareUsername}

                    {block:IfGitHubUsername}
                    <a href="https://github.com/{text:GitHub Username}" title="GitHub">
                        <img src="http://static.tumblr.com/ubkenek/Qv0luyv55/github-icon.png" alt="GitHub"/>
                    </a>
                    {/block:IfGitHubUsername}

                    {block:IfGooglePlusUsernumber}
                    <a href="https://plus.google.com/u/1/{text:GooglePlus Usernumber}" title="Google Plus">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4elYHFaAVUkjIMgICVLd8XNyj5Rq499gHiR5uDtf55oFcTjJ6KU3p7p6LEsTQRIPFbyIH5TNnK0bVEbhyphenhyphenmOZ69IxtHhyphenhyphenFGwlEG-OXHE7mByBC6_jnreGxPGn778cXY4wRq5B2-z2HJfY/s1600/googleplus-icon.png" alt="GooglePlus Icon"/>
                    </a>
                    {/block:IfGooglePlusUsernumber}

                    {block:IfLastfmUsername}
                    <a href="http://last.fm/user/{text:Lastfm Username}" title="Last fm">
                        <img src="http://static.tumblr.com/ubkenek/NMcluyvdm/lastfm-icon.png" alt="Last fm Icon"/>
                    </a>
                    {/block:IfLastfmUsername}

                    {block:IfLetterBoxdUsername}
                    <a href="http://letterboxd.com/{text:LetterBoxd Username}" title="LetterBoxd">
                        <img src="http://static.tumblr.com/ubkenek/7JJluywko/letterboxd-icon.png" alt="LetterBoxd Icon"/>
                    </a>
                    {/block:IfLetterBoxdUsername}

                    {block:IfTwitterUsername}
                    <a href="http://twitter.com/{text:Twitter Username}" title="Twitter">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jbH5RohokowOSSinLAbhU1zq8e0GjG0HIoIAZd6yYm4rMiLljUiPnhnFqFyx3b66zRtLsth-CL002zUc-hRLMBXD4VxD7ZY0vebo6T2CbAdv7XvhkzJ_Dl9nMbcVtzDl6OfIQ1XICds/s1600/twitter-icon.png" alt="Twitter Icon"/>
                    </a>
                    {/block:IfTwitterUsername}

                    {block:IfVimeoUsername}
                    <a href="http://vimeo.com/{text:Vimeo Username}" title="Vimeo">
                        <img src="http://static.tumblr.com/ubkenek/szjluyw9v/vimeo-icon.png" alt="Vimeo Icon"/>
                    </a>
                    {/block:IfVimeoUsername}

                    

                </div>

Sampai disini social button sudah terpasang, sekarang kita lanjutkan ke langkah berikutnya.

Mengatur posisi sosial button

4. Masih pada edit HTML, silahkan cari kode berikut <style type="text/css">

5. Kemudian copy paste code berikut tepat dibawah code <style type="text/css"> untuk mengatur posisi social button yang kita buat:

#SocialLinks {width: 140px; float: left; clear: both;}
#SocialLinks a {float: left; clear: none; margin: 5px 5px 0 0;}
#SocialLinks a:hover {opacity: 0.5;}

Kebetulan posisi ini saya buat pada sidebar sebelah kiri pada tampilan web, jadi jika ingin mengubah posisinya ke kanan silahkan ganti perintah float: left menjadi float: right.

Menampilkan pada Appearance

Masih pada edit HTML, sekarang kita beralih pada <head> untuk membuat menu Appearance pada dashboard kita agar bisa menampilkan social button yang kita buat diatas.

6. Cari kode <head> kemudian silahkan copy & paste kode berikut dan letakan dibawah <head>

Kemudian silahkan save dan keluar dari menu edit HTML. Jika pemasangannya sudah benar mengikuti langkah-langkah diatas, maka pada tampilan costumize akan muncul tampilan menu Appearance seperti berikut:

Tampilan menu appearance social button pada dashboard tumblr yang kita buat

Pada menu Appearance social button yang kita buat tadi pada dashboard tumblr, silahkan diisi username teman-teman sesuai sosial media yang dimiliki. Perlu diperhatikan bahwa yang di input pada menu ini bukan link, melainkan username kita pada social media. Misalnya pada gambar diatas untuk sosial media twitter saya isikan username saya.

Jika sudah diisi, selanjutnya silahkan lihat halaman tumblr blog teman-teman maka akan muncul penampakan social button seperti ini:

Tampilan Social Button pada halama Tumblr Blog

Kira-kira itu saja tutorial membuat social button sederhana lengkap dengan menu Appearance pada dashboard tumblr, untuk demonya silahkan mampir-mampir ke tumbleblog saya di www.wphoet.tumblr.com

Irmawan Hadi Saputra

Search This Blog

Membuat Social Media Button pada Tumblr

Comments

Post a Comment