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