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.
menu costumize pada sidebar
 
2. Jika sudah di klik, langkah selanjutnya yaitu masuk ke dalam edit HTML pada bagian atas menu.

Masuk menu edit html
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><!-- End Dribbl  e Link -->
                    {/block:IfDribbbleUsername}
                   
                    {block:IfFacebookUsername}
                    <a href="http://facebook.com/{text:Facebook Username}" title="Facebook">
                        <img src="http://3.bp.blogspot.com/-uDMDiw5URw0/Ury0ZXhv1hI/AAAAAAAAQ6M/Xm3dayTHLXE/s1600/facebook-icon.png"/>
                    </a><!-- End Facebook Link -->
                    {/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><!-- End Flickr Link -->
                    {/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><!-- End Forrst Link -->
                    {/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><!-- End Foursquare -->
                    {/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><!-- End GitHub Link -->
                    {/block:IfGitHubUsername}
                   
                    {block:IfGooglePlusUsernumber}
                    <a href="https://plus.google.com/u/1/{text:GooglePlus Usernumber}" title="Google Plus">
                        <img src="http://2.bp.blogspot.com/-H65k0g9UQtg/Ury0Zk7XcDI/AAAAAAAAQ6Q/oPkUJyG-eLY/s1600/googleplus-icon.png" alt="GooglePlus Icon"/>
                    </a><!-- End Google Plus Link -->
                    {/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><!-- End Last fm Link -->
                    {/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><!-- End LetterBoxd Link -->
                    {/block:IfLetterBoxdUsername}
                   
                    {block:IfTwitterUsername}
                    <a href="http://twitter.com/{text:Twitter Username}" title="Twitter">
                        <img src="http://1.bp.blogspot.com/-0URsSAeveA8/Ury0ZiDHjOI/AAAAAAAAQ6Y/nvhUohCdT8c/s1600/twitter-icon.png" alt="Twitter Icon"/>
                    </a><!-- End Twitter Link -->
                    {/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><!-- End Vimeo Link -->
                    {/block:IfVimeoUsername}
                                       
                    <!-- {block:IfYouTubeUsername}
                    <a href="http://youtube.com/user/{text:YouTube Username}" title="YouTube">
                        <img src="http://static.tumblr.com/ubkenek/c1Gluz2id/youtube-icon.png" alt="YouTube Icon"/>
                    </a>
                    {/block:IfYouTubeUsername} -->
                   
                </div><!-- End Social Links -->

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>

        <meta name="text:Dribbble Username" content=""/>
    <meta name="text:Facebook Username" content=""/>
    <meta name="text:Flickr Username" content=""/>
    <meta name="text:Forrst Username" content=""/>
    <meta name="text:Foursquare Username" content=""/>
    <meta name="text:GitHub Username" content=""/>
    <meta name="text:GooglePlus Username" content=""/>
    <meta name="text:Lastfm Username" content=""/>
    <meta name="text:LetterBox Username" content=""/>
    <meta name="text:Twitter Username" content=""/>
    <meta name="text:Vimeo Username" content=""/>
    <meta name="text:YouTube Username" content=""/>

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
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
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

Post a Comment

  1. cara mau nambahin instagram gimana?

    ReplyDelete
    Replies
    1. iya nanti saya buatkan kl pas santaia aja tapi. soalnya dulu instagram belum setenar sekarang jadi gak pernah terpintas buat optimasi di instagram :)

      Delete
  2. Replies
    1. ntar coba saya buatkan kl pas lagi sedikit senggang :D

      Delete

 
Top