Saturday, January 11, 2025

BLOGGER YOUTUBE AD HTML CODE:

 <div class="videoWrapper">

    <!-- Copy & Pasted from YouTube -->

    <iframe width="560" height="349" src="PASTE YOUTUBE EMBEDDED CODE URL" frameborder="0" allowfullscreen></iframe>

</div>

<style>

.videoWrapper {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.videoWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

Read more »
at No comments:
Labels:

Friday, January 10, 2025

How To Add Scrolling Image In Blogger

 <style>

div.scroll-container {

  background-color: #333;

  overflow: auto;

  white-space: nowrap;

  padding: 10px;

}


div.scroll-container img {

  padding: 10px;

}

</style>

<h2>Image Gallery With Horizontal Scroll</h2>


<div class="scroll-container">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEe5AltizoKfjrpUwKF7j-lwio0f3kCCA4oAD_xm24Z_PdfdQBmC6bGs7JhUiGqT5pD1DfzrAakQRvZHinzIFCD96-XG1BUKHQ96HzVyFayashKFPgSIYK7kLsWV8cThlyEICN0Q7hpk_Yqarq-oOmZPXdfXpI1ViCuRu5W4wu8Vp8Y6imhsgUSyFHXw/s1600/photo_2024-12-21_10-16-51.jpg" width="200" height="200" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn5QEdMqot2nAaJKMfcRzlL9PBlMrzXjffcD4hBXYZUXPmLONBRot9jerLl3g7i_GtoDOYSNVlL11DrRI0NycVzLAiWhHWkL1Q02tIHfUKuWsy-bkOb2fZBicimOVPJSXa0PKZw_vbZ_QKGInMOFTF57uCvUIiq-EbsCfXGKWLc9RW0iIJNrmL6DahuTo/s1600/676a6748302ba_1735026504.jpg" width="200" height="200" />

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCu6jlca1_QphwHEH5flcPRVkNEvSQhr9TXculA63Fvu4-nurxj_deG5b34uUOibZhPgEiqVUITaML153G2TCQpawIRtZucT58i5IWUvXtqJhxgQ30osU5xZdK7lgkCEdH-qutobwvl1tBRe3JVVAjM9An7wYqTu5r2nK_8uzalLrvB26Mh05gqLR78mo/s1600/photo_2024-12-16_14-33-03.jpg" width="200" height="200" />

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLDLmmZHM4XfHkXzB0KiytT0Y3DyxXcpvX58j4goHiy-Ns4kg4gI__BXUfcdKUvbTDvQwjFNh3_MJJrrZA6OCZzua5QuGljubVXSI25MLs6Z8rW9JVfWsY55K0KOuoOowmlJ9VTQKUJJ7o5-QXU-2EM3HccYG_z6L8RhllDBGCRpzlIugrGuzkGGk5CA/s1600/photo_2024-12-16_14-31-11.jpg" width="200" height="200" />

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEkC_pKRJ1b2evnx7Dpg0ErIrugPoJxhnEYT2G-ec8C0qptlxPg91OhXewEe0D0aikb47jq4DqefqwWSUmSClZevWhgUhqwK0LSHACv7gP7Xb065nt02iHhW2IZw51JhZGGfAhF490XyZCGCHXsbr1MRJl4QzU65w_Yk_xwaiIQCembs_YnUwZaRVW1c/s1600/photo_2024-12-16_14-31-23.jpg" width="200" height="200" />

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5B-VaZwHRldSLcAH9xsz1EjyhQIWXPe6JQCeZLJg3Jy7uQqYX0j8Fr7ATsxKDFMld_tor0o6tW7-VWCXOCcxQX_iEfRFIKDAaQp6CXtD1Bmk9_u0jv6pYraeD7-uIwpmIwLB5_bO0UgIwbeszKXFYrvgOaeEQo0StS1NhLsPl37_Cs4wDgErtQSfKbrM/s1600/673dd2185f187_1732104728.jpg" width="200" height="200" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5V_d1jG-9d8Z4_bdVjDMLab_gJIOKRHeE9NyjI8WgwC9dumx2rp8J9i3QqMUYvzGnr-nmuEqBmgApSrSRVJURYUR7KjhUdE7pJBE_HvV70sjdyvodXioup45arcxyOrC0bWok-DWpZpPCeFz4_nnPBfA5NnIcV0pp0zXYdXCIgHEITS0hL8KbC35nIlY/s1600/676a6763ac2d0_1735026531.jpg" width="200" height="200" />

</div>

at No comments:
Labels:

Thursday, December 19, 2024

How To Add Auto Image Slider In Blogger Homepage

Code:

 <style>

#slider{

width: 900px;

height: 350px;

border: 5px solid white;

box-shadow: 0px 0px 5px #dd00ae; /* Over all Box colour */

overflow: hidden;

margin: 0 auto;

padding: 0px;

}


figure{

/*width: 3615px;*/

width: 1850px;

height: 350px;

margin: 0px;

padding: 0px;

position: relative;

animation: pdslider 20s linear infinite;

}


@keyframes pdslider{

0%{left: 0; top: 0;}

23%{left: 0; top: 0;}

25%{left: -905px; top: 0;}

48%{left: -905px; top: 0;}

50%{left: -905px; top: -295px;}

73%{left: -905px; top: -295px;}

75%{left: 0; top: -295px;}

98%{left: 0; top: -295px;}

100%{left: 0; top: 0;}

}


.bglayer{

width: 370px;

height: 120px;

background: rgba(65,167,222,0.3);

padding: 15px;

position:relative;

animation: bglayer 20s linear infinite;

z-index: 1000;

border-radius: 10px;

}


@keyframes bglayer{

0%{left: 20px; top: 0; visibility:hidden;}

2%{left: 20px; top: -220px; visibility:visible;}

23%{left: 20px; top: -220px; visibility:visible;}

25%{left: 20px; top: -500px; visibility:hidden;}

27%{left: 20px; top: -220px; visibility:visible;}

48%{left: 20px; top: -220px; visibility:visible;}

50%{left: -500px; top: -500; visibility:hidden;}

52%{left: 20px; top: -220px; visibility:visible;}

73%{left: 20px; top: -220px; visibility:visible;}

75%{left: 500px; top: -500px; visibility:hidden;}

77%{left: 20px; top: -220px; visibility:visible;}

98%{left: 20px; top: -220px; visibility:visible;}

100%{left: 20px; top: 0; visibility:hidden;}


}


.bglayer h1{

color: #e90000;

position:relative;

text-shadow:0px -5px 5px #ffffff; /*Text Colour & Shadow*/

z-index: 1000;

}


.bglayer h1.one{

animation: header1 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


.bglayer h1.two{

animation: header2 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


.bglayer h1.three{

animation: header3 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


.bglayer h1.four{

animation: header4 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


@keyframes header1{

0%{left: 20px; top: 0; opacity:0;}

2%{left: 20px; top: -500px; opacity:1;}

4%{left: 20px; top: 0px;; opacity:1;}

23%{left: 20px; top: 0px; opacity:1;}

24%{opacity:0;}

100%{left: 20px; top: 0; opacity:0;}


}


@keyframes header2{

0%{left: 20px; top: 0; opacity:0;}


25%{left: -20px; top: 500px; opacity:0;}

27%{left: -200px; top: 0px; opacity:0;}

29%{left: 20px; top: 0px; opacity:1;}

48%{left: 20px; top: 0px; opacity:1;}

49%{opacity:0;}

100%{left: 20px; top: 0; opacity:0;}

}


@keyframes header3{

0%{left: 20px; top: 0; opacity:0;}

50%{left: 500px; top: 500px; opacity:0;}

52%{left: 20px; top: 200px; opacity:1;}

54%{left: 20px; top: 0px; opacity:1;}

73%{left: 20px; top: 0px; opacity:1;}

74%{opacity:0;}

100%{left: 20px; top: 0; opacity:0;}


}


@keyframes header4{

0%{left: 20px; top: 0; opacity:0;}

75%{left: 500px; top: -500; opacity:0;}

77%{left: 1000px; top: 0px; opacity:1;}

79%{left: 20px; top: 0px; opacity:1;}

98%{left: 20px; top: 0px; opacity:1;}

99%{opacity: 0;}

100%{left: 20px; top: 0; opacity:0;}


}


.bglayer p{

color: #000be9;

position:relative;

margin: 0;

padding: 0;

text-shadow:0px -5px 5px #ffffff;

font-weight:bold;

font-size: 16px;

font-family: Arial, Helvetica, sans-serif;

z-index: 1000;

}


.bglayer p.one{

animation: paragraph1 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


.bglayer p.two{

animation: paragraph2 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


.bglayer p.three{

animation: paragraph3 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


.bglayer p.four{

animation: paragraph4 20s linear infinite;

position: absolute;

top: 0;

left: 0;

}


@keyframes paragraph1{

0%{left: 20px; top: 0; opacity:0;}

2%{left: 20px; top: -500px; opacity:0;}

4%{left: 1000px; top: 70px; opacity:0;}

6%{left: 20px; top: 70px;; opacity:1;}

23%{left: 20px; top: 70px; opacity:1;}

24%{opacity:0;}

100%{left: 20px; top: 0; opacity:0;}


}


@keyframes paragraph2{

0%{left: 20px; top: 0; opacity:0;}


25%{left: -20px; top: 500px; opacity:0;}

27%{left: 20px; top: -5000px; opacity:0;}

29%{left: 20px; top: -500px; opacity:0;}

31%{left: 20px; top: 70px; opacity:1;}

48%{left: 20px; top: 70px; opacity:1;}

49%{opacity:0;}

100%{left: 20px; top: 0; opacity:0;}

}


@keyframes paragraph3{

0%{left: 20px; top: 0; opacity:0;}

50%{left: 500px; top: 500px; opacity:0;}

52%{left: 20px; top: 200px; opacity:0;}

54%{left: -1000px; top: 70px; opacity:0;}

56%{left: 20px; top: 70px; opacity:1;}

73%{left: 20px; top: 70px; opacity:1;}

74%{opacity:0;}

100%{left: 20px; top: 0; opacity:0;}


}


@keyframes paragraph4{

0%{left: 20px; top: 0; opacity:0;}

75%{left: 500px; top: -500; opacity:0;}

77%{left: 1000px; top: 0px; opacity:0;}

79%{left: 1000px; top: 500px; opacity:0;}

81%{left: 20px; top: 70px; opacity:1;}

98%{left: 20px; top: 70px; opacity:1;}

99%{opacity: 0;}

100%{left: 20px; top: 70px; opacity:0;}


}


</style>




<div id="slider">

            <figure>

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />

                               

            </figure>

            <div class="bglayer">

             <h1 class="one"> Welcome !! </h1>

                <h1 class="two"> APR Goat Farm </h1>

                <h1 class="three"> Salem Black Goat </h1>

                <h1 class="four"> Mechari Semmari Goat </h1>

                

                <p class="one"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126 </p>

                <p class="two"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126 </p>

                <p class="three"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126. </p>

                <p class="four"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126. </p>

            </div>

        </div>

at No comments:
Labels:
Subscribe to: Posts (Atom)

How to give coding at the end of the post in blog

  Add Code Automatically at End of Every Post (Template Edit) If you want a code block to appear in every post , do this: Go to Blogger ...