எல்லாமே உக்காந்த யெடெத்துலேயே கிடச்சா ரொம்ப சௌகரியந்தான். இது வலை மேயலுக்கும் பொருந்தும். கூகுளுக்கு இது நன்றாக தெரியும். அதனால் தான், தனது முடிவுகளில் வரும் வீடியோக்களை அதே இடத்திலேயே பார்க்குமாறு அமைத்தது. அதன் Source Code (www.google.com/extern_js/f/CgJlbhgDGAc/6TK0G_vpOxU.js) -ஐ பார்த்து எதாவது Copy-Paste செய்யலாம் என்று, அதை பார்த்தால் தலை தான் சுற்றுகிறது.
ஒரு முடிவோடு களத்தில் இறங்கி, இன்னொரு தளத்திலிருந்த இந்த JavaScript Code -ஐ எடுத்து, வீடியோவை காட்டுமாறு மாற்றினேன்.

இதோ செயல் விளக்கம்.
உங்கள் Template-ஐ திறந்து Head->Style பகுதியினுள் இதை ஒட்டவும்.
/* Plus Box styles start here. */
.PlusBox_floatL {float:left;}
.PlusBox_CL {clear:both;margin:0px;padding:0px;}
.PlusBox_link {cursor:pointer; font-weight:700; text-decoration:underline; color:blue;}
.PlusBox_plus {float:left;background:url('http://www.google.com/mb/plus_sm.gif') no-repeat;width:14px;height:14px;cursor:pointer; margin-left:0px; margin-right:4; margin-top:3; margin-bottom:0;}
.PlusBox_minus {float:left;background:url('http://www.google.com/mb/minus_sm.gif') no-repeat;width:14px;height:14px;cursor:pointer; margin-left:0px; margin-right:4; margin-top:3; margin-bottom:0;}
/* Plus Box styles end here. */
Head பகுதியினுள் இதை ஒட்டவும். இந்த Script-ல் சில
HTML Entities வருவதால் இதை CDATAவினுள் தான் ஒட்டியாக வேண்டும்.
<script language='javascript' type='text/javascript'>
//<![CDATA[
/* Plus Box script starts here */
function PlusBox_Show(holderId, action){
if (document.getElementById(holderId)==null)
return;
var videoGroup = document.getElementById(holderId).getAttribute("videoGroup");
var videoId = document.getElementById(holderId).getAttribute("videoId");
var videoCount = document.getElementById(holderId).getAttribute("videoCount");
for (var i=1;i<=videoCount;i++){
if (i==videoId)
{
PlusBox_Insert(holderId, action);
}
else if (action == "expand")
{
if (document.getElementById(videoGroup+ "_" + i)==null)
continue;
var placeHolder = document.getElementById(videoGroup+ "_" + i).getAttribute("placeHolder"); // Get the place holder's id
var plusboxStatus = document.getElementById(placeHolder).getAttribute("plusboxStatus");
if (plusboxStatus == "expand")
PlusBox_Insert(placeHolder, "collapse");
}
}
}
function PlusBox_Insert(holderId, action) {
if (document.getElementById(holderId)==null)
return;
var videoGroup = document.getElementById(holderId).getAttribute("videoGroup");
var videoId = document.getElementById(holderId).getAttribute("videoId");
var videoCount = document.getElementById(holderId).getAttribute("videoCount");
var txtShow = document.getElementById(holderId).getAttribute("txtShow");
var txtHide = document.getElementById(holderId).getAttribute("txtHide");
var youTubeId = document.getElementById(holderId).getAttribute("youTubeId");
var videoWidth = document.getElementById(holderId).getAttribute("videoWidth");
var videoHeight = document.getElementById(holderId).getAttribute("videoHeight");
if (action == "expand")
{
// Show the embedded video
var inner =
"<div style=\"width:260px;margin-left:2px;\" class=\"PlusBox_floatL\">" + "\n" +
"<div id=\"" + videoGroup + "_B_" + videoId + "\" onclick=\"PlusBox_Show('" + holderId + "', 'collapse')\" class=\"PlusBox_minus\"></div>" + "\n" +
"<div class=\"PlusBox_floatL\">" + "\n" +
"<font color=\"#0000FF\">" + "\n" +
"<a id=\"" + videoGroup + "_F_" + videoId + "\" onclick=\"PlusBox_Show('" + holderId + "', 'collapse')\" class=\"PlusBox_link\" txtShow=\"" + txtShow +"\" txtHide=\"" + txtHide + "\">" + txtShow + "</a>" + "\n" +
"</font>" + "\n" +
"</div>" + "\n" +
"<div style=\"width:75px;margin-top:6px;margin-left:4px;\" class=\"PlusBox_floatL\"></div>" + "\n" +
"</div>" + "\n" +
"<div class=\"PlusBox_CL\"></div>" + "\n" +
"<!-- YouTube Plus Box Video starts here -->" + "\n" +
"<div id=\"" + videoGroup + "_" + videoId + "\" placeHolder = \"" + holderId + "\" style=\"display:block; margin:5 0 0 20px;\">" + "\n" +
"<!-- Video Embed starts here -->" + "\n" +
"<object width=\"" + videoWidth +"\" height=\"" + videoHeight + "\">" + "\n" +
"<param name=\"movie\" value=\"http://www.youtube.com/v/" + youTubeId +"\"></param>" + "\n" +
"<param name=\"wmode\" value=\"transparent\"></param>" + "\n" +
"<embed src=\"http://www.youtube.com/v/" + youTubeId +"\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\""+ videoWidth + "\" height=\"" + videoHeight +"\"></embed>" + "\n" +
"</object>" + "\n" +
"<!-- Video Embed ends here -->" + "\n" +
"</div>" + "\n" +
"<!-- YouTube Plus Box Video ends here -->";
document.getElementById(holderId).innerHTML = inner;
document.getElementById(holderId).setAttribute("plusboxStatus", "expand");
} else {
// Revert to the collapsed text link
//var txtShow = document.getElementById(holderId).innerText;
var colpasedHtml = "";
colpasedHtml += "<div style=\"width:260px;margin-left:2px;\" class=\"PlusBox_floatL\">";
colpasedHtml += "<div onclick=\"PlusBox_Show('" + holderId + "', 'expand')\" class=\"PlusBox_plus\"></div>";
colpasedHtml += "<div class=\"PlusBox_floatL\">";
colpasedHtml += "<a onclick=\"PlusBox_Show('" + holderId + "', 'expand')\" class=\"PlusBox_link\">" + txtShow + "</a>";
colpasedHtml += "</div>";
colpasedHtml += "<div style=\"width:75px;margin-top:6px;margin-left:4px;\" class=\"PlusBox_floatL\"></div>";
colpasedHtml += "</div>";
colpasedHtml += "<div class=\"PlusBox_CL\"></div>";
document.getElementById(holderId).innerHTML = colpasedHtml;
document.getElementById(holderId).setAttribute("plusboxStatus", "collapse");
}
}
/*Plus Box script ends here*/
//]]>
</script>
பின்னர் பதிக்கும் போது இக்கோடில் உள்ள கோடிட்ட இடங்களை நிரப்பவும்.
<div id="UNIQUE_PLACEHOLDER_ID" plusboxStatus="collapse" videoGroup="GROUP_NAME" videoId="VIDEO_NUM" videoCount="VIDEO_TOTALCOUNT" txtShow="SHOW_VIDEO_CAPTION" txtHide="HIDE_VIDEO_CAPTION" youTubeId="YOUTUBE_ID" videoWidth="425" videoHeight="350">
<div style="width:260px;margin-left:2px;" class="PlusBox_floatL">
<div onclick="PlusBox_Show('UNIQUE_PLACEHOLDER_ID', 'expand')" class="PlusBox_plus"></div>
<div class="PlusBox_floatL">
<a onclick="PlusBox_Show('UNIQUE_PLACEHOLDER_ID', 'expand')" class="PlusBox_link">SHOW_VIDEO_CAPTION</a>
</div>
<div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div>
</div>
<div class="PlusBox_CL"></div>
</div>
UNIQUE_PLACEHOLDER_ID - ஒரு யுனிக் பெயரை இடவும்.
GROUP_NAME - ஒன்றுக்கு மேற்பட்ட வீடியோக்களை இணைக்க வல்லதொரு பெயரை இடவும். இவ்வாறு இணைக்கப் பட்ட வீடியோக்களுள் ஒன்றை விரித்தால் அந்த இணையிலுள்ள மற்ற விடியோக்கள் சுருங்கும்.
VIDEO_NUM - இந்த இணையில் இந்த விடியோவின் எண் (1, 2, 3...)
VIDEO_TOTALCOUNT - இந்த இணையில் உள்ள மொத்த விடியோக்களின் எண்ணிக்கை
SHOW_VIDEO_CAPTION - விடியோவின் சுருங்கிய நிலையில் காட்டப் பட வேண்டிய தலைப்பு
HIDE_VIDEO_CAPTION - விடியோவின் விரிந்த நிலையில் காட்டப் பட வேண்டிய தலைப்பு
YOUTUBE_ID - விடியோவின் யூடியூப் ஐ.டி.
பிறகு உங்கள் கோடை ஒரே வரியில் வருமாறு செய்யவும். கடைசியில் உங்கள் கோட் இப்படித் தான் தோன்ற வேண்டும்.
<div id="GibbsSixes" plusboxStatus="collapse" videoGroup="cricketquotes" videoId="1" videoCount="3" txtShow="Watch Gibbs 6 X 6" txtHide="Hide Video" youTubeId="IZwOXPnJfLo" videoWidth="425" videoHeight="350"><div style="width:260px;margin-left:2px;" class="PlusBox_floatL"> <div onclick="PlusBox_Show('GibbsSixes', 'expand')" class="PlusBox_plus"></div><div class="PlusBox_floatL"><a onclick="PlusBox_Show('GibbsSixes', 'expand')" class="PlusBox_link">Watch Gibbs 6 X 6</a></div><div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div></div><div class="PlusBox_CL"></div></div>
<div id="McGrathSledging" plusboxStatus="collapse" videoGroup="cricketquotes" videoId="2" videoCount="3" txtShow="Watch Macgrath-Sarwan spat" txtHide="Hide Video" youTubeId="-IsVsLh-yGs" videoWidth="425" videoHeight="350"><div style="width:260px;margin-left:2px;" class="PlusBox_floatL"><div onclick="PlusBox_Show('McGrathSledging', 'expand')" class="PlusBox_plus"></div><div class="PlusBox_floatL"><a onclick="PlusBox_Show('McGrathSledging', 'expand')" class="PlusBox_link">Watch Macgrath-Sarwan spat</a></div><div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div></div><div class="PlusBox_CL"></div></div>
<div id="WarneBall" plusboxStatus="collapse" videoGroup="cricketquotes" videoId="3" videoCount="3" txtShow="Watch Ball of the Century" txtHide="Hide Video" youTubeId="66I1YDOKcGI" videoWidth="425" videoHeight="350"><div style="width:260px;margin-left:2px;" class="PlusBox_floatL"> <div onclick="PlusBox_Show('WarneBall', 'expand')" class="PlusBox_plus"></div><div class="PlusBox_floatL"><a onclick="PlusBox_Show('WarneBall', 'expand')" class="PlusBox_link">Watch Ball of the Century</a></div><div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div></div><div class="PlusBox_CL"></div></div>
இந்த எடுத்துக்காட்டு என்னுடைய முந்தய
பதிவிலிருந்து எடுத்தது.
Related links:-