Pasang Mashable Social Box Pada Sidebar Blog

Ditulis oleh

Mashable (Mashable Inc.) adalah satu laman blog yang popular masa kini. Ia dibangunkan oleh Pete Cashmore seorang rakyat Scotland pada Julai, 2005. Mashable mengfokuskan mengenai berita sosial media tetapi ia juga merangkumi berita dan pembangunan mobile, hiburan, video online, perniagaan, teknologi, meme dan gajet. Bermula sebagai sebuah laman blog dan kemudiannya menjadi satu syarikat yang berpengkalan di Bandar New York, Amerika Syarikat. Kini Mashable sudah mempunyai kira-kira 50 orang pekerja dibawahnya. Kejayaan Mashable ini dapat dilihat apabila mampu membeli Blippr.

Mengenai plugin/widget yang aku ingin perkenalkan untuk artikel kali ini adalah diinspirasikan dari social widget pada laman blog Mashable. Pertama aku mengetahui mengenai plugin ini apabila aku membaca satu entri dari AriffShah mengenai tutorial yang ditulisnya diterbitkan secara rasmi di WP Tuts.

Ini adalah tutorial yang ditulis oleh AriffShah. Create a “Mashable-Inspired” Sidebar Social Widget for WordPress

Kemudian aku menjumpai satu laman blog yang telah membuat plugin untuk Mashable Social ini. Laman tersebut adalah InspiredMagz. Plugin yang dibuat ini memang bagus kerana korang tidak perlu mengubah code pada blog. Tetapi, selepas beberapa hari aku terbaca pada sebuah blog mengatakan plugin tersebut mempunyai pautan tersembunyi (Hidden Link). Disana juga mengatakan mengenai keburukan pautan tersembunyi seperti pautan tersembunyi tersebut diambil secara negatif oleh Google Spider dan laman blog korang akan dipenalti dan mungkin hasil carian untuk blog akan berada pada bahagian akhir carian. Jika korang tidak bernasib baik, mungkin juga mendapat Sandbox dari Google.

Untuk tutorial kali ini aku memilih untuk menggunakan plugin sahaja. Jangan risau, plugin ini telah pun di re-code dan dibersihkan dari pautan tersembunyi tersebut. Jika korang pengguna Blogspot/Blogger, ada juga code yang disediakan untuk korang.

Mashable Social Widget Untuk WordPress

1. Pertama sekali korang perlulah memuat turun plugin Easy Mashable Social Box ini.

Muat Turun Easy Mashable Social Box via Dropbox

2. Muat naik plugin ke blog korang dan aktifkannya.

3. Pergi ke bahagian Appearance > Widgets. Dan drag masuk widget Easy Mashable Social Box ini ke bahagian widget yang korang mahu ia kelihatan.

4. Masukkan maklumat yang diperlukan. Korang boleh menukar kelebaran, tinggi dan warna widget tersebut mengikut pilihan diri.

5. Klik pada butang Save, dan lihat hasilnya.

 

Mashable Social Widget Untuk Blogspot/Blogger

Klik demo untuk lihat Mashable Social Widget yang telah dipasang pada Blogspot. Demo

1. Log masuk akaun Blogger korang dan pergi ke bahagian Layout.

2. Klik pada Add a Gadget > pilih HTML/Javascript.

3. Salin code dibawah dan masukkan ke dalam kotak.

4. Tukarkan segala maklumat dibawah kepada maklumat diri korang.

Untuk mendapatkan line tersebut, sila rujuk code yang diberi pada langkah 3.

[bullets type=”black”]
  • Pada line 201. Tukarkan kepada URL Google Plus korang. Contoh : https://plus.google.com/XXXXXXXXXXX
  • Pada line 210. Tukarkan kepada URL Facebook Fan Page. Contoh : http://facebook.com/XXXXXX
  • Pada line 218. Tukarkan Twitter ID Piratz kepada ID korang.
  • Pada line 223. Tukarkan RSS Feed ID (mrpiratz) kepada RSS Feed korang. Contoh ID : http://feeds.feedburner.com/mrpiratz
  • Pada line 234. Tukarkan RSS Feed ID (mrpiratz) kepada RSS Feed korang. Sama seperti line 223.
  • Pada line 240. Tukarkan kepada URL profail Google Plus korang. Sama seperti line 201.
  • [/bullets] 5. Klik butang Save dan lihat hasilnya.

    Korang juga boleh edit code tersebut pada Notepad ataupun mana-mana aplikasi yang korang suka.

    Berjaya jugak aku selesaikan artikel tutorial kali nie. Dah lama tak tulis entri tutorial macam nie. Lepas nie aku nak try berjinak-jinak dengan video tutorial la. Haha. Itu pun kalau aku rajin nak rakam la. Kepada yang mempunyai masalah menggunakan plugin ini, boleh komen dibawah ye. Sekian.

    Ye saya tahu ramai dah pakai plugin/widget nie. Biasala. Aku kan slowpoke skit. Ini adalah entri berjadual ye.

    Komen

    • hurm . . nice tuto . .

      Mr.Sepet Feb 2, 2012 8:47 pm Reply
    • sbb tu aku mmg akan sikitkan guna plugin & aku akan check coding dlu.

      SuhairiDotCom Feb 3, 2012 2:08 am Reply
    • Nice entry indeed!!

      btw i just voted for you for Worlds Bloggers And Social Media Awards 2012.. All the best ya… =)

      This comment has been edited by Piratz.

      mak dara Feb 3, 2012 11:49 am Reply
    • macam mana nak upload plug in ke blog wordpress?

      koochipunk Feb 5, 2012 2:02 pm Reply
      • ko pakai wordpress.com ke? aku rasa, tuk wordpress.com tak boleh.. selfhost je boleh…

        Mr Piratz Feb 5, 2012 10:20 pm Reply
    • aku buat kat blogger x kluar la yg G+ punya…naper eh?

      zerous Feb 6, 2012 9:46 pm Reply
      • cuba letak coding ni sebelum
        http://pastebin.com/2egxMYEf

        Mr Piratz Feb 7, 2012 4:28 am Reply
      • ops.. sebelum –> <head>

        Mr Piratz Feb 7, 2012 12:32 pm Reply
        • masih x bleh la…error

          Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: The reference to entity “loc” must end with the ‘;’ delimiter.

          Error 500

          zerous Feb 7, 2012 2:39 pm Reply
    • salam mr.piratz..ini boleh dipasang di platform Joomla x? thanks

      Mr. Osem Feb 10, 2012 3:15 pm Reply
      • rasanya untuk joomla kena recoded balik…. css boleh guna..

        Mr Piratz Feb 10, 2012 3:23 pm Reply
    • macam mana nak selesaikan masalah macam kat blog saya ni..ada pasang plugin ni tapi view dia jadi kurang menarik..

      iqbalhakimi Mar 27, 2012 5:02 pm Reply
      • aku rasa ada yang tak match tue.. antara plugin tue ngan theme tak ngam…

        Mr Piratz Mar 27, 2012 6:52 pm Reply
    • kalau kita masukkan e-mail kat sebelah ‘subscribe’ kaler kuning tu, kenapa dia pegi ke “My Blogger Tricks” feed ? memang camtu ke ? tgk kat bawah ni..

      Email Subscription Request
      Thank you for your request.
      Enter Your Email here..
      Your email address:
      …will receive a verification message once you submit this form. FeedBurner activates your subscription to “My Blogger Tricks” once you respond to this verification message.

      pipoq Mar 28, 2012 3:33 pm Reply
      • Hm.. kena tukar coding feed tue ke feed ko…

        Mr Piratz Mar 28, 2012 6:56 pm Reply
    • ooo..maaf..dah jumpa masalahnya..

      pada baris ke 225

      tukarkan value=”tntbystc” <–tntbystc dengan feed sendiri..

      kan ? atau memang sengaja dibiarkan camtu untuk kredit pada laman MBT tu ?

      pipoq Mar 28, 2012 3:40 pm Reply
      • takdela.. aku tak nampak…

        Mr Piratz Mar 28, 2012 6:57 pm Reply
        • ada tu ko tengok bebetul kat baris 225 –> ..

          tntbystc tu owner MBT punya feed..

          just nak bagitau je kot ko terlepas pandang kat kod tu atau memang sengaja untuk kredit bagi kat MBT..

          pipoq Mar 29, 2012 10:08 am Reply
          • nanti kalau aku tak berapa bz aku betulkan.. thanks for the info…

            Mr Piratz Mar 29, 2012 1:44 pm Reply
    • Kat mana setting untuk besarkan kotak g+ yang atas sekali tu ye? Kotak lain boleh diubah, cuma kotak yg tu je tak boleh. Saya nak besarkan sehingga 350pix

      Cikgu Hairul Mar 28, 2012 4:18 pm Reply
    • makasih gan, sangat simple dan elegan

      Bacaan Unik Aneh Menarik May 7, 2012 11:43 am Reply
    • bro nk tanye ni sy org baru kat blog wordpress. plugin kat dashboard sy x de… ke kena upgrade dulu.

      Imran May 31, 2012 9:44 am Reply
    • bro nk tanye ni sy org baru kat blog wordpress. plugin kat dashboard sy x de… ke kena upgrade dulu.

      Imran May 31, 2012 9:46 am Reply
      • dari aku tengok, ko pakai wordpress.com… so mustahil nak install plugin… aku tak berapa sure.. nanti aku check balik…

        Mr Piratz May 31, 2012 12:35 pm Reply
    • tq. rasa mcm nak pakai jgk la.

      Oh! budu Aug 9, 2012 7:17 am Reply
    • macam menarik pula, ingin juga nak cuba

      lewisdotmy Nov 7, 2012 2:47 pm Reply
    • Nice! But why cannot enter widget “Title” text?

      LiewCF Dec 18, 2012 6:37 pm Reply
    • Thank you, dah lama cari widget ni

      Noridah May 23, 2013 4:51 pm Reply
    • tq sebab saya dah guna script ni dan edit sikit mana yang saya tak gunakan

      Noridah May 26, 2013 1:07 pm Reply

    Leave a Comment

    Your email address will not be published. Required fields are marked *