Ads By Google info
webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp

कैसे बनाये Blogspot डेमो iframe ...

Posted : | Posted By: Piush Trivedi | Labels: , 13 Comments
Posted by: Piush



Pin It

जी हां ब्लागस्पाट डेमो पेज ... डेमो पेज का अधिकांश उपयोग ब्लॉगर templete sites पर ब्लॉग templete का live preview दिखाने के लिए किया जाता है ... मगर हर कोई अपनी सुविधा अनुसार इसका उपयोग कर सकता है ... इस टूलबार का अपने ब्लॉग पर उपयोग करने से पहले देखे की इस demo iframe में अपनी साईट का url कैसे डाले , और कैसे live preview देखे ॥ नीचे आदरणीय रतनसिंह शेखावत जी के ब्लॉग ज्ञान दर्पण को iframe टूलबार में दिखाया गया है =D7 नीचे live डेमो बटन पर क्लिक करे । और live डेमो देखे ... :)



ध्यान दे वापस पीछे आने के लिए iframe टूलबार में ठीक नीचे Go Back बटन पर क्लिक करे

Live Demo

टूलबार को अपने ब्लॉग पर कैसे लगाये

  • नीचे बताये गए पुरे कोड को कॉपी कर एक notepad फाइल में डाल ले व इसे myiframetoolbar.html नाम से सेव करले ।



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title> Hindi4Tech Live Demo </title>

<meta content='index,follow' name='robots'/>
<meta content='en' name='language'/>

<link href='https://googledrive.com/host/0B9BypLLMMzvORHdVbmdlRTRTbnc' rel='shortcut icon'/>
<style type="text/css">
*{margin:0;padding:0;}

body{background:transparant; color:#333;font-family:arial;font-size:12px}
a{color:#333;text-decoration:none}
a:hover{color:#FF6600}
a img{border:0}
tr.bar{top:0;width:100%}
tr.bar td {background: #fff ;}
#bartop{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x; width:100%;height:0px; border-bottom:0px solid #CDCDCD;margin:0; padding:0}
#bartop ul{}
#bartop ul li{list-style:none;float:left}
#iframe{overflow:hidden;}/*this is to remove the scroll when not needed*/#iframe, iframe{width:100%;height:100%;}
#mainnav{ height:46px; position:fixed; top:0px; left:0px; right:0px; z-index:9999; background-image:url(http://lh3.ggpht.com/_dKIQkAGa2xA/S09eoQxunEI/AAAAAAAAAx4/Wz07cM_CsNQ/mainnav.png); background-repeat:repeat-x; background-position:center left}
#menu{width:870px; margin:0 auto; padding:0 auto}
#searchbot{float:right; margin:-6px -438px 0 0px; padding:0}
#nav ul{ height:25px; list-style:none; margin:8px 38px 0 0; padding:0; width:390px; float:right}
#nav ul li{ display:inline; float:right; margin:0px 2px}
#nav a{ text-indent:-9999px; float:right; padding:0; text-decoration:none; cursor:pointer; background-image:url(https://googledrive.com/host/0B9BypLLMMzvOWGxmRENSZjR0NFE); background-repeat:no-repeat; height:28px; width:72px}
#nav-equipe{background-position:0 0; *position:relative; *top:-112px; *left:-310px}
#nav-equipe:hover, #nav-equipe.hover{background-position:0 -28px}
#nav-freebies{background-position:-78px 0; *position:relative; *top:-84px; *left:-232px}
#nav-freebies:hover, #nav-freebies.hover{background-position:-78px -28px}
#nav-servico{background-position:-156px 0; *position:relative; *top:-56px; *left:-156px}
#nav-servico:hover, #nav-servico.hover{background-position:-156px -28px}
#nav-portfolio{background-position:-234px 0; *position:relative; *top:-28px; *left:-78px}
#nav-portfolio:hover, #nav-portfolio.hover{background-position:-234px -28px}
#nav-contato{background-position:-312px 0}
#nav-contato:hover, #nav-contato.hover{background-position:-312px -28px}
#navlogo ul{ height:20px; list-style:none; margin:4px 0 0 0; margin-top /*\**/:-14px\9; *margin-top:4px; padding:0; width:110px; float:left}
#navlogo ul li{ display:inline; margin:0px 2px}
#navlogo a{ text-indent:-9999px; float:left; padding:0; text-decoration:none; cursor:pointer; background-image:url(https://googledrive.com/host/0B9BypLLMMzvOQlNiWndEeGowajA); background-repeat:no-repeat; height:20px; width:110px}
#logo-logo{background-position:0 0}
#logo-logo:hover, #logo-logo.hover{background-position:0 -90px}
.bot{margin:0px 0 0; padding:0; list-style:none}
.bot li{padding:0; margin:0 2px; float:right; position:relative; text-align:center}
.bot .link{padding:14px 10px; display:block; color:#000; width:34px; height:28px; text-indent:-9999px; text-decoration:none; font-weight:bold; background-image:url(http://lh4.ggpht.com/_dKIQkAGa2xA/S1CMxf7isWI/AAAAAAAAAyw/lFEsQg1NRnE/searchicon.png); background-repeat:no-repeat; background-position:center center; cursor:pointer}
.bot li em{background:url(images/hover.png) no-repeat; width:135px; height:28px; position:absolute; top:-20px; top /*\**/:-15px\9; *top:-10px; left:-200px; text-align:center; padding:20px 0px 10px; font-style:normal; z-index:2; display:none}

@media screen and undefined-webkit-min-device-pixel-ratio:0){ .bot li em{top:-19px}
}
fieldset.search{border:none; width:135px; margin:5px 0 0 0; background:transparent}
.search input, .search button{border:none; float:left}
.search input.box{color:#908e8e; font-size:1.1em; font-weight:normal; font-family:Trebuchet MS,sans-serif; width:135px; height:29px; padding:8px 5px 0 10px; margin-right:5px; margin-left:5px; background-image:url(http://lh4.ggpht.com/_dKIQkAGa2xA/S1Jt5iA7VlI/AAAAAAAAA0I/1L2-kgtMqq8/searchfield.png); background-repeat:no-repeat; background-position:center center; background-color:transparent}
.search input.box:focus{background-color:transparent; background-image:url(http://lh3.ggpht.com/_dKIQkAGa2xA/S1Lk9_MVIbI/AAAAAAAAA0Q/UA--3xIiHl0/searchfieldfocus.png); background-repeat:no-repeat; background-position:center center; color:#b4b4b4; outline:none}
.search button.btn{display:none}

#links
{
height: 25px;
}

#close
{

width: 16px;
height: 16px;
margin:18px 0 0 0;
position: absolute;
right: 5px;
background: url(http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png) transparent no-repeat;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B9BypLLMMzvOQi1KMnM0b2RvMms' type='text/javascript'></script>
<script type='text/javascript'>

$(function() {

$("#explore-nav li a").click(function() {

// Figure out current list via CSS class
var curList = $("#explore-nav li a.current").attr("rel");

// List moving to
var $newList = $(this);

// Set outer wrapper height to height of current inner list
var curListHeight = $("#all-list-wrap").height();
$("#all-list-wrap").height(curListHeight);

// Remove highlighting - Add to just-clicked tab
$("#explore-nav li a").removeClass("current");
$newList.addClass("current");

// Figure out ID of new list
var listID = $newList.attr("rel");

if (listID != curList) {

// Fade out current list
$("#"+curList).fadeOut(300, function() {

// Fade in new list on callback
$("#"+listID).fadeIn();

// Adjust outer wrapper to fit new list snuggly
var newHeight = $("#"+listID).height();
$("#all-list-wrap").animate({
height: newHeight
});

});

}

// Don't behave like a regular link
return false;
});

});
</script>
<script type='text/javascript'>

$("#explore-nav2 li a").click(function() {

// Figure out current list via CSS class
var curList = $("#explore-nav2 li a.current2").attr("rel");

// List moving to
var $newList = $(this);

// Set outer wrapper height to height of current inner list
var curListHeight = $("#all-list-wrap2").height();
$("#all-list-wrap2").height(curListHeight);

// Remove highlighting - Add to just-clicked tab
$("#explore-nav2 li a").removeClass("current2");
$newList.addClass("current2");

// Figure out ID of new list
var listID = $newList.attr("rel");

if (listID != curList) {

// Fade out current list
$("#"+curList).fadeOut(300, function() {

// Fade in new list on callback
$("#"+listID).fadeIn();

// Adjust outer wrapper to fit new list snuggly
var newHeight = $("#"+listID).height();
$("#all-list-wrap2").animate({
height: newHeight
});

});

}

// Don't behave like a regular link
return false;
});

});
</script>
<script type='text/javascript'>
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#mainnav').stop().animate({'opacity':'0.2'},400);
else
$('#mainnav').stop().animate({'opacity':'1'},400);
});

$('#mainnav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#mainnav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#mainnav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
<script src='https://googledrive.com/host/0B9BypLLMMzvON3E0bFc2cjFvaW8' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){

$("#nav a").blend();
$("#navlogo a").blend();
$("#navredes a").blend();
$("#blogger-icon").blend();
});
</script>
<script type='text/javascript'>
$(document).ready(function(){

$(".bot .link").click(function() {
$(this).next("em").animate({opacity: "toggle", left: "-157"}, "slow")


});


});
</script>
<script src="https://googledrive.com/host/0B9BypLLMMzvOYW5sNnI4ZmphV1k" type="text/javascript" ></script>
</head>
<body>

<div style='background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x;font-weight:bold; border:1px solid #CDCDCD; display:scroll;position: fixed; bottom:0px;left:0px;padding:5px 7px 4px 2px; -moz-border-radius:0px 6px 0 0; -khtml-border-radius:0px 6px 0 0; -webkit-border-radius:0px 6px 0 0; border-radius:0px 6px 0 0'>
<a href="javascript:history.go(-1);" title="GO BACK">&#9668; GO BACK</a>



</div>


<table cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr class="bar" height="25px">
<td class="c11">

<div id="bartop">


<div id='mainnav'>
<div id='menu'>
<div id='navlogo'>
<ul>
<li><a href='http://hindi4tech.blogspot.com' id='logo-logo'>Home</a></li>
</ul>
</div>
<div id='nav'>
<ul>
<li><a href='http://hindi4tech.blogspot.com/2010/08/celebreating-40-years-of-journey-c.html' id='nav-contato'>Contact</a></li>
<li><a href='http://www.contactify.com/11eed' id='nav-portfolio'>Portfolio</a></li>
<li><a href='http://hindi4tech.blogspot.com/2011/09/blog-sitemap.html' id='nav-servico'>Services</a></li>
<li><a href='http://hindi4tech.blogspot.com/2009/09/something-about-me.html' id='nav-freebies'>About</a></li>

<li><a href='http://hindi4tech.blogspot.com' id='nav-equipe'>Blog</a></li>
</ul>
</div>
<div id='searchbot'>
<ul class='bot'>
<li class='bot'>
<span class='link'>Search</span>
<em><div id='search-wrapper'>
<a class='search'><form action='/search' id='searchform' method='get'>
<fieldset class='search'>
<input class='box' id='s' name='q' onblur='if(this.value==&quot;&quot;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&quot;&quot;;' type='text' value='Search...' vinput=''/>
<button class='btn' title='Submit Search'>Search</button>
</fieldset>
</form>

</a></div></em>
</li>
</ul>
<div id='links'>
<a id='arrow' href='javascript:void(0);'</a></div>

<a id='close' href='javascript:void(0);'</a></div>
</div>
</div>
</div>
<div style="border-bottom:1px solid #fff;"/>

</td>
</tr>

<tr>
<td>
<div id='iframe'><iframe src='' /></div>
</td>
</tr>

</table>



<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
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>


</body>

</html>

ध्यान दे :- लाल रंग में बताये गए लिंक व को को बदलना न भूले :)

अब इस फाइल को अपनी सुविधा अनुसार होस्ट करले ध्यान दे की बताई गयी फाइल .html फॉर्मेट में है , अतः इसे होस्ट करने से पहले यह जाँच ले की आप इसे जहाँ होस्ट कर रहे है , वो .html format सपोर्ट करता है या नहीं... नीचे .html फाइल को मुफ्त होस्ट करने हेतु एक बेहतर विकल्प dropbox के बारे में बताया गया है ॥ ध्यान दे की dropbox कुछेक चुनिन्दा ऐसी मुफ्त होस्टिंग service में से एक है जो लगभग सभी फाइल format को सपोर्ट करता है , जिनमे कुछ .mp3, .mp4, .swf, .html, .dmg आदि है , अतः dropbox पर फाइल होस्ट करने के लिए नीचे प्रक्रिया देखे ...
  • सबसे पहले अपने dropbox खाते में लोगिन करे यहाँ जाये dropbox.com
  • यहाँ फाइल अपलोड करने के लिए नीचे बताये अनुसार विकल्प पर क्लिक करे

  • फाइल अपलोड हो जाने पर नीचे बताये अनुसार पब्लिक लिंक कॉपी करले

  • ये पब्लिक लिंक आपको कुछ इस तरह मिलेगा

  • इस प्रकार आपको अपनी iframe टूलबार का लिंक प्राप्त हो गया होगा...
  • अब प्राप्त इस लिंक के ठीक बाद ?iframe=YOUR DEMO PAGE URL कोड को रख दे
  • अब आपका पूरा लिंक url कुछ इस तरह से दिखाई देगा....

https://googledrive.com/host/0B9BypLLMMzvOS1pIZ0lva1Exblk?iframe=YOUR DEMO PAGE URL

ध्यान दे की YOUR DEMO PAGE URL को अपना डेमो पेज url से बदलना न भूले .///

अब आप जहा भी डेमो पेज लिंक रखना चाहते है वहा नीचे बताये अनुसार लिंक का प्रयोग करे ... :-bd
<a href="https://googledrive.com/host/0B9BypLLMMzvOS1pIZ0lva1Exblk?iframe=Any site Or Demo Page URL">View Demo</a>


Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

Post A Comment Blogger Disqus

13 comments:

  1. sir, इससे क्या लाभ होता है.

    ReplyDelete
    Replies
    1. NAvjyot Ji First Thanks For Comment :) .. Labh Kya Hai ?? Is Sambandh Me Sirf Itna Kahna Chahunga Ki .. Iframe Toolbar Ka Upyog Anya Blog Ka Demo Dekhtey Samay.. Punah Blog Par Vapas Aane Hetu Kiya Jata Hai .. Nivedan Ki Pahle Live DEmo Avashay Dekhey..///
      Asha Karta Hun Aapko Apney Sawal Ka Jawab Mil Gaya Hoga :)

      Delete
  2. पियूष जी, मैंने डेमो देख लिया और समझ भी लिया.
    इससे आप अपने ब्लॉग में किसी दुसरे ब्लॉग या वेबसाइट को दिखा सकते है.
    और एक उपर पट्टी से बनी होती है जिसमे home बटन पर क्लिक करते ही अपने ब्लॉग पर वापिस आ सकते है.
    बहुत ही अच्छी जानकारी है, जानकारी देने के धन्यवाद.

    ReplyDelete
  3. dropbox की प्रोसेसिंग बहुत स्लो है | वैसे आपने जो तरीका बताया वो बहुत कॉम्प्लीकेटेड है | वैसे आप इस लिंक पर देखें कि मैंने चर्चा मंच ब्लॉग को अपने ब्लॉग पर दिखाया है | ये सब बहुत ही छोटी सी स्क्रिप्ट से होता है |

    टिप्स हिंदी में

    ReplyDelete
    Replies
    1. वनीत जी कमेन्ट के लिए शुक्रिया :) जी आपने कहा dropbox की प्रोसेसिंग बहुत स्लो है वनीत जी बताना चाहूँगा आप अगर गूगल कोड को इस्तेमाल करते है तो इसे वहा भी अपलोड कर सकते है .या आप इसे ब्लॉगर template में रखना चाहे तो वो भी संभव है॥ इसके लिए बस आपको एक अलग ब्लॉग registerd करना होगा और बताया गया पूरा कोड आप ब्लॉग templete में सहेज कर ब्लॉग पर भी iframe तैयार कर सकते है ॥ आपके द्वारा बताये गए चर्चा मंच लिंक को देखा ... इस जानकारी के लिए आपका आभार :)

      Delete
  4. Data entry
    I wanted to thank you for this great read!! I definitely enjoyed every little bit of it, I have you bookmarked to check out all the new stuff you post.

    ReplyDelete



  5. I Like your blog,will sharing this with my friends, excellent work.
    cheap business electricity

    ReplyDelete
  6. Latest SEO Tips,Tricks and Techniques

    Www.Seoweek.blogspot.Com

    ReplyDelete
  7. Thanks for give the beautiful knowledge about blog toolbar Nice Article. https://www.miditech.co.in/

    ReplyDelete
    Replies
    1. Thanks For Comment & Visiting Hindi4Tech.... I M Now Visiting Ur Blog:- :>)

      Delete
  8. nice post ! thanks for sharing such useful content. i must tell you guys, this is worth visiting our page too.. for relevant information and SEO / SMO works and services. :- http://www.siliconithub.com/web-promotion/professional-internet-marketing.html

    ReplyDelete
  9. Apki blog Slow open hoti hai
    Aur ha aap Jankari achhi share karte hai
    www.jankariweb.in

    ReplyDelete

Post A Comment

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
और दिखाए


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए ऊपर बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech


Top Commen tor Ask A Question Follow