J Query Multi Tab Widget for Blogger

Hi Friends Today is learn one imposrtent trick,Yesterday one of my friends asked me how to add a gadget with multi tabs in to a blogger blog. Multi tab widget is a great tool to save your blog space. You can add your content inside those tabs without wasting your blogger space unnecessarily.

Following is a screenshot of this gadget;

Ok Well, let me explain how to do this;

1. First sign in to your Blogger account

2. Then Go to your DASHBOARD >> DESIGN >> EDIT HTML

3. Now expand your widget template

4. Search for the following code by pressing CTRL + F on your key board

</head>

5. Now copy the following code and paste it just above the code you searched on step 4.

<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
  var Tabtampil = document.getElementById(TPID);
  var TTs = Tabtampil.firstChild;
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
  var TT = TTs.firstChild;
  var i   = 0;
  do
  {
    if (TT.tagName == "A")
    {
      i++;
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
      TT.className = (i == id) ? "Active" : "";
      TT.blur();
    }
  }
  while (TT = TT.nextSibling);
  var Halamans = Tabtampil.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
document.write('');}
//]]>
</script>

6 . Now Save Template

7 . Then go back to your DASHBOARD >> DESIGN >> ADD A GADGET

8 . Now select HTML/JAVA Script from pop up window

9 . Copy the following code and paste it inside the HTML/JAVA Script

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Tab 2 content goes here

</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

10 . Save your gadget.

11 . That’s all. Now go to your DASHBOARD >> DESIGN

12 . You will see the new gadget. Add whatever gadgets you want inside that particular tab.

Well, now you know how to add a multiple tab gadget to your blogger blog. Share this with your friends and enjoy it.

Auto Read More&Jump Read More Option in Blogger

On Blogger you have one option to add a jump break to your posts, so the posts will be displayed with just a short summery on the home page and a link to read the full post will be below.The jump break has a number of great advantages, if you display full posts on your home page it will severely slow down the load time, Also With the jump break in place visitors that land on your home page will see a selection of your posts without the need to scroll.It's also more professional looking and as visitors have to click through to the full post it increases page views.

In this Blogger Tip i have a script that will automatically turn your posts into read more summary's on your blogs home page with a few added extras.Here are some of the features of an auto Read More along with a live demo :

- Your posts will automatically be displayed as short summary's with a read more link.

- An image from the post will be re sized into a thumbnail and displayed beside the summery.

- You can choose how much text is displayed in the summery.

- You can choose the size of the thumbnail.

- All Previous posts will also have the jump break so you don't need to go through your archive adding it.

Add Auto Read More post Summery's in ur blog

STEP 1 : In ur Blogger Dashboard click Design > Edit HTML > Tick Expand Widget Template Box

 STEP 2 : Find the followin peace of code in ur blogger html : ( Click CTRL and F for search bar to help find the code )

</head>

And Copy The Below Code paste Directle above / Before </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

Important

and here is Importent Steps The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summery.If the post does not have an image just a text summery will be displayed.

summary_ noimg= 430; --> The length of the summery if the post does not have a thumbnail.
summary_img = 340; --> The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; --> The height in pixels of the thumbnail.
null_thumb_width = 120; --> The width in pixels of the thumbnail.


STEP 4. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

<data:post.body/>

STEP : 5 : Replace <data:post.body/> With below code

<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <div style='clear: both;'/> <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span> </b:if> </b:if>

Note - You can change the text in red from Read More to "Continue Reading", "Read Full Post" or anything you like.

Note 1. You should try to have the first image in your posts as close to square as possible so they work well when used as thumbnails on your home page.Images that are for example rectangle in shape will appear distorted when they are re sized.I use a version of this script on this blog and always add an image at the top of the posts that are close to square, then size then wont make a big impact on the appearance.Remember it's the first image in each post that is used as a thumbnail.

Step 6. Save Your Template.

Facebook websetting Best Quality Video & Audio Calling

Facebook video calling is a great functionality added to FB and it is still under development. Zukerberg joined hands with Skype network to avail its users with not just a chat option anymore but real face-to-face video chat. I already mentioned in a post how to set up a video chat in Facebook and today we will be focusing more on how to improve the video and audio quality. If you are a user of Skype then you will find the tips extremely easy.

Install a Webcam

Facebook webcam settingsFirst you need a quality webcam which is a must. Choose a webcam that may make video calls in Hi-Definition i.e. 1280 x 720 pixel resolution at up to 30 frames per second. Put up some money and get a high resolution camera. It would cost less than $50. I would recommend that you buy one from Skype itself. See the varieties by clicking here. A good webcam will have a built-in microphone so you wont need to wear a bulky headphone to talk.

After you have purchased a camera simply do this:

1 . Run the webcam software CD before plugging the webcam into USB cord..

2 . Plug in webcam when prompted.

3 . Now follow the easy instructions provided by software

4 . Right click on webcam icon in system tray.

5 . Click on "Check for updates".

6 . Download and install updates.

7 . Reboot computer.

8 . You are done!

Your webcam is now installed and you can now take pictures with it and make videos on your computer but first we will need to download and install Skype video calling application for things to work. Now jump to next step

Facebook Settings For Best HD Display and Audio Quality

The video settings are the same as that for Skype. We will adjust our webcam to give best results in Skype. If it gives quality result on a Skype video call so will it on Facebook because both platforms use the same software.

1 . Install Skype. If you already have it then skip this step.

2 . In the upper right of the Skype window, click on Tools > Options > Video Settings. Click "Enable Skype video" and "Start my video automatically when I call". Use the dropdown box to select your specific webcam model.

3 . Click "Save".

Now to make a Skype video call do this:

1 . Click on a contact.

2 . Turn on your speakers.

3 . Click on green button to initiate a call. Both ends will hear a ringing.

4 . Accept the call and start the conversation

5 . During the call ask your friend if your video is clear and voice sounds clear. If you he says yes then Bingo and if he said that the results are not so good then adjust your webcam audio volume and brightness control option. Play around the webcam options like contrast, zoom, brightness until and unless you hear a YES from your buddy.

6 . Finally you are now all ready to make a clear, quality video call on Facebook.

You have successfully purchased and installed a camera and you also adjusted the best HD video settings. Now you must log into your Facebook account and confidently make a video call by following the easy steps mentioned on this tutorial:

How to start and set up a video call?

I just hope this little help proves useful for most of you and you may enjoy the new FB fun. Stay safe and take care. Peace! :>

More Trick www.mybloggertricks.com

Facebook Video Calling : How to Set up Video Calling in Facebook

Good News For Facebooks Lovers ,Facebook has finally started filling up the missing blanks on their social network as an answer to Google Plus Project. Together with Skype, Facebook has launched its first ever Video Calling option on there website. Facebook Users can now not only chat but they can now see their loved ones smile, wink and say lol face to face! So far there are no latency issues and video calling loads faster and works without pauses or any other pros. You don't need to install any software or application to make this function work. Below you will find some useful Facebook video calling tips.

How do I set up video calling?

To start a video call with a friend you will first need to complete a quick, one-time setup:

1 . To call a friend, click the video icon at the top of your chat window.

2 . Simply click the “Set Up” button and follow the easy instructions for how to set up video calling on your favorite browser.

3 . Once installed successfully the video call will start automatically or you can ring back your friend by clicking the video call button at the top right corner of your friends profile

How do I start a video call with a friend?

After the one-time set up you are now ready to make your first call:

1 . Visit your friend’s profile and click the “Call” button in the top right corner. You can also click the video icon at the top of the chat window.

2 . When your friend answers, be patient and wait for sometime till both your web cams are inter connected.

3 . If your friend is unavailable or offline, you can leave a video message. That's indeed more like Yahoo's Voice service.

For all these steps to correctly work you must make sure that both your webcam and microphone are connected to the right slots and are in a running condition. You can still use video calling even if you don't have a webcam. You will be able to talk to and see your friend but your friend will be able to hear your voice only.

UPDATE : Please also read Facebook Video settings for best quality color display by setting up webcam

Source From MY Bloggertrick.com Thanks to my blogger tricks