It is an interesting thing to show random messages or pictures or ads in the Website. you may love to show different messages on the same page when user visit same page again. That may be your picture, which have different pose on every refresh. Even that can be a blogger gadgets, on every refresh on the same page you can make to get random gadgets. This type of Randoming will make different look on your pages. Let see how to make random elements
Code:
<div id="Randomme" style="display: none;">
......
</div>
<div id="Randomme" style="display: none;">
......
</div>
<div id="Randomme" style="display: none;">
......
</div>
<script language="JavaScript">
Randomme[Math.round(Math.random()*(Randomme.length-1))].style.display="block";
</script>
This is the Basic syntax for the random contents. Note that highlighted dots are the space for your contents. That can be a HTML. Below is the unit content and you can add n number of contents that you wish.so final output will be any one from these whole content in random pick.
<div id="Randomme" style="display: none;">
......
</div>
How to add?
First select your contents(Pictures or Message with HTML format) and fill the above syntax.
you can add it directly to your Blog template where you need this effect
For Blogspot site, you can also add this codes in Template-> add Gadget-> HTML/JavaScript
Applied Examples:
Below is the code which display below effect
<div id="Randomme" style="display: none;">
I use <a href="http://google.com">Google</a>
</div>
<div id="Randomme" style="display: none;">
I like to blog about webdesign and Cartoons/Paintings
</div>
<div id="Randomme" style="display: none;">
Thanks for visiting My blog. Please Visit me again</br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-EpBssLpmc1-t99Nja3QenpSgkiVM2OFK5YU1cp0F2J4OhOzD6jOPOFbbTkJG_2ahAtrlZd0ICt_9n0dlAtSVL71X7XMaPzWza6Rt4jzPjhL4eU5-1pA1EI2-rifxTzsCByRXu84ysU/s1600/Macrolayer.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="89" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-EpBssLpmc1-t99Nja3QenpSgkiVM2OFK5YU1cp0F2J4OhOzD6jOPOFbbTkJG_2ahAtrlZd0ICt_9n0dlAtSVL71X7XMaPzWza6Rt4jzPjhL4eU5-1pA1EI2-rifxTzsCByRXu84ysU/s320/Macrolayer.jpg" /></a>
</div>
<div id="Randomme" style="display: none;">
If you are the new blogger read me <a href="http://macrolayer.blogspot.com/2011/10/five-steps-for-new-bloggers.html">5 Tips for you</a>
</div>
<div id="Randomme" style="display: none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguYx0-piz4ofkeiIIaLk7OZfIy4UoTHyUVX3HmVKSnGmBfku9943HznnPwULbadK_ZtAiA75cbz04qI7tGbsWzA9y5lX76mt-iAyJ7UR2RQNYLVTrFv1jPw5y-ghzsTclVKTyJvXbzX9g/s1600/0GetHer.gif" /></div>
<div id="Randomme" style="display: none;">
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108072841148840858643" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>
<g:plus href="https://plus.google.com/108072841148840858643" width="300" height="131" theme="light"></g:plus></div>
<script language="JavaScript">
Randomme[Math.round(Math.random()*(Randomme.length-1))].style.display="block";
</script>
Demo:
Refresh this page to see the difference.
〈img id="myimage" onclick="if (document.getElementById('myimage').src=='http://www.w3schools.com/dhtml/bulboff.gif'){document.getElementById('myimage').src='http://www.w3schools.com/dhtml/bulbon.gif';}else{document.getElementById('myimage').src='http://www.w3schools.com/dhtml/bulboff.gif';}" border="0" src="http://www.w3schools.com/dhtml/bulboff.gif" width="100" height="180" /〉
ReplyDeleteThanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now operating on, and I have been at the look out for such info. outdoor gadgets
ReplyDelete