Tutorial Accordion Tab Menu - Part II

Hola semua
Masih ingat lagi tak Tutorial Accordion Tab Menu ??
Kalau lupa sila klik SINI


 Sekarang saya nak tunjuk untuk combine tab menu dengan Google Friend Connect & Google+
TAHUKAH ANDA
 Google Friend Connect telah dimansuhkan pada 1 Mac 2012 dan gantikan dengan Google+. Namun GFC masih boleh diguna di blog cuma kita dah tak boleh dapatkan coding GFC dari google


So, kat mana nak dapatkan code Google Friend Connect & Google+ ??
Mai sini rapat2, saya nak tunjukkan


CARANYA : 
(Sila klik gambar untuk tumbesaran)
klik kanan kat blog (sape yg dah diablekan tu, sila adjust balik ye)
Tekan ctrl + U

Tekan ctrl + F dan taip "google.friendconnect

Sama juga caranya untuk cari code Google+

Ok, sekarang saya bagi contoh code yg nak di copy 
(kerana tak cukup satu simbol pun dah tak jadi tau)

AMARAN : JANGAN COPY CODE DI BAWAH. INI CONTOH SAHAJA
ANDA PERLU COPY CODE DARI BLOG ANDA
Sila paste code ini di notepad dahulu ye, kejap lagi baru nak guna
Untuk Code Google Friend Connect

<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;
               
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });
       
        gadgets.rpc.register('requestSignOut', function(siteId) {
         
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">
   
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
                     
          holder.postFeed = "http://www.blogger.com/feeds/6165310675050014706/posts/default";
                 
          holder.commentFeed = "http://www.blogger.com/feeds/6165310675050014706/comments/default";
         
          holder.currentBlogUrl = "http://www.dikbee.com/";
          holder.currentBlogId = "6165310675050014706";
       
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });

    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<div id="div-1envdgjr1nfi5" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "180";
    skin['TITLE'] = "Bee's Follower";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#333333";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#333333";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 100% Verdana, Arial, Sans-serif;";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-1envdgjr1nfi5",
     height: 180,
    
     site: "04370031594577728234",
    
     locale: 'en' },
     skin);
  </script>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=6165310675050014706&widgetType=Followers&widgetId=Followers1&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("Followers1"));' target='configFollowers1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>

Untuk Code Google+

<div class='g-plus' data-action='followers' data-height='200' data-href='https://plus.google.com/105855486291434039110' data-source='blogger:blog:followers' data-width='228'></div>
<script type='text/javascript'>
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>


Code dah ada so boleh la kita combine kat dalam accordian  tab menu

<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
Isi code 1
</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body"> 
 Isi code2
 </div>

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Isi code 3
</div>


Saya nasihatkan, urutan kedudukan biar Google Friend Connect dahulu,
kemudian baru Google+ & yang lain2
 kerana bila saya letak Google Friend Connect di bawah, x jadi

Oh ye, kalau x nak buat accordian tab
code ni juga boleh diletakkan kat mana2 bahagian blog
Just paste kat dalam add HTML jer

Ok la...dah panjang lebar dah tuto ni...
takut ada pulak yang muntah darah baca
tak pun pening lalat..
huhu
Kalau ada sesiapa nak tanya @ nak tambah ilmu, sila komen



p/s : harap2 menjadi la yek..




Post a Comment

21 Comments

  1. mencik sbb disable right click hahaha

    mls gile nk betulkn T.T

    ReplyDelete
  2. ok terbaik tutorial ni...nasib tak muntah...hihi

    ReplyDelete
  3. kat atas tu tak ckp mcm mna nk view page source...tekan Ctrl-U

    GFC dimansuhkan utk platform lain spt wordpress,etc. tapi utk patfrm blogger, masih boleh pakai.

    tp rasanya, tak lama lg GFC dimansuhkan trus mmandang G+ makin rmai yg gna

    ReplyDelete
  4. @Iffah Afeefah ada cara utk awk..cikgu kopi pasta kata just tekan ctrl U...so x yah betulkan... :)

    ReplyDelete
  5. @kopi pasta ok, sy betulkan.

    GFC mmg boleh pakai tp cara nak dptkan coding tu yg dimansuhkan.

    Ada apa2 lagi tak yg sy tertinggal?? :)

    ReplyDelete
  6. terbaik dikbee... ingat takde org perasan menda ni selama ni... good coz remain

    ReplyDelete
  7. @potia casadelarossa thanks...sy mmg suka mencuba.. tu yg boleh jumpa byk benda..x byk tuto yg ajar cara nak amik code dari view page source....apa2 pun, byk benda lg yg sy nak belajar. so, sharing is caring...

    ReplyDelete
  8. aduhh, rambang mata dgn koding2 ni.. mau kena attend class la kita cmni nak belaja koding ni semua..
    Kita faham tuto awak, cuma bila masuk bab2 koding ni terus pecah kepala.. hehehe, anyway thanks..

    ReplyDelete
  9. @baby comel hahaha...sy pun tak tau coding sgt.. cuma tau copy & paste, pastu adjust sket2..tp sbb semangat nak cantikkan blog, tu yg tabahkan jugak mata nengok semua coding tu.. hihi

    ReplyDelete
  10. tutorial berguna ni dikbi...memang cantik klu pakai code Google Friend Connect tu...nampak lebih kemas :D

    ReplyDelete
  11. hehe , ala , macam malas je :P hehehe


    lama CP tak isnggah sini , CP ade tegur dikbi kat twitter , follow ler CP balek ek :P

    ReplyDelete
  12. cantik blog ni..tq sharing tutor tu yea..rajin nti leh cuba..

    ReplyDelete
  13. @Ayie Abas haah.. Lgpun xde la widget kita berjela-jela

    ReplyDelete
  14. @cweet pinky takpe..blog CP dah comei dah..... :)

    ReplyDelete
  15. @cweet pinky ada tegur akk ye kat twitter. Act akk kurang bertwitter

    ReplyDelete
  16. dikbiii.. tenkiuu sgt ajar kan nii ! walaupn xbape nk jadi lg. sbb pening men ngn koding ni.. haha

    ReplyDelete
  17. @Mar Haini Abdul Rahim yang ni part II tau..cer ikut perlahan2 yg part I. pastikan xde tertinggal sebarang code.. takut x jadi...

    ReplyDelete
  18. Because the admin of this web site is working, no doubt very quickly it will be famous, due to its
    feature contents.

    ReplyDelete
  19. It's an awesome post in favor of all the internet people; they will get advantage from it I am sure.

    ReplyDelete