In this tutorial I am going to explain how to add random,rotating images for your blogger header background.When after you adding this feature to your blogger blog,header image of your blog will rotate/change in each page refresh.Before doing this trick you must create header images for your blog.In this tutorial I am going to show how to rotate 5 header images.
1.Log in to your dashboard--> Design- -> Edit HTML
2.Scroll down to where you see <body> tag.
3.Now copy below code and paste it just after the <body> tag.
1.Log in to your dashboard--> Design- -> Edit HTML
2.Scroll down to where you see <body> tag.
3.Now copy below code and paste it just after the <body> tag.
<script type='text/javascript'> var HeaderImage= new Array() HeaderImage[0]="URL-OF-HEADER-IMAGE-1" HeaderImage[1]="URL-OF-HEADER-IMAGE-2" HeaderImage[2]="URL-OF-HEADER-IMAGE-3" HeaderImage[3]="URL-OF-HEADER-IMAGE-4" HeaderImage[4]="URL-OF-HEADER-IMAGE-5" var random=Math.round(4*Math.random()); document.write("<style>"); document.write("#header-wrapper {"); document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;'); document.write(" }"); document.write("</style>"); </script>
NOTE : Replace "URL-OF-HEADER-IMAGE-X" with your image URLs. If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section). You can add different number of images than 5.But remember to change "4*Math.random()" according to the number of images you add.For example,when you want to add 8 different images for your blog header background, then code should be change as "7*Math.random()".Look at the example below:
<script type='text/javascript'> var HeaderImage= new Array() HeaderImage[0]="URL-OF-HEADER-IMAGE-1" HeaderImage[1]="URL-OF-HEADER-IMAGE-2" HeaderImage[2]="URL-OF-HEADER-IMAGE-3" HeaderImage[3]="URL-OF-HEADER-IMAGE-4" HeaderImage[4]="URL-OF-HEADER-IMAGE-5" HeaderImage[4]="URL-OF-HEADER-IMAGE-6" HeaderImage[4]="URL-OF-HEADER-IMAGE-7" HeaderImage[4]="URL-OF-HEADER-IMAGE-8" var random=Math.round(7*Math.random()); document.write("<style>"); document.write("#header-wrapper {"); document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;'); document.write(" }"); document.write("</style>"); </script>
4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.
http://bit.ly/4w36zA
2 التعليقات:
Unlock your trading potential with WinProFX, a platform designed to empower traders with the tools, technology, and support needed to succeed in today's dynamic financial markets. Whether you are a beginner exploring trading opportunities or an experienced investor seeking advanced market insights, WinProFX offers a user-friendly trading environment, real-time market analysis, and access to a wide range of financial instruments. With a focus on innovation, security, and customer satisfaction, WinProFX helps traders make informed decisions, manage risks effectively, and pursue their financial goals with greater confidence. Experience a smarter way to trade and take the next step toward achieving your trading ambitions with WinProFX.
A **Forex Trading Platform** is the foundation of a successful trading experience, providing traders with the tools and technology needed to navigate the global currency markets with confidence. Whether you're a beginner or a professional trader, a reliable platform offers real-time market data, advanced charting tools, fast trade execution, and secure account management. With access to multiple currency pairs, technical indicators, and risk management features, a powerful forex trading platform helps you analyze market trends, execute trades efficiently, and make informed investment decisions anytime, anywhere.
Contact us Address — 1st Floor, The Sotheby Building, Rodney Bay, Gros-Islet, SAINT Lucia P.O Box 838, Castries, Saint Lucia Phone no — +97144471894 Website — https://winprofx.org/
إرسال تعليق