Image Sliding Design CSS And HTML Code

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger,click Post or Page.

Step 3: On Blogger Post,click HTML View.

Step 4: Now Copy HTML CODE given below by, double click Code Box.

Step 5:You're successfully copy the code, Now paste the HTML On Blogger Post HTML view.

HTML CODE

 <!--[ IMG Slider By The ACT(kk) ]-->

<div class="galWrp">

<div class="zmImg"><img alt="#" src="https://blogger.googleusercontent.com/img/a/AVvXsEgL-n2b3xWxVa6I0qVt3Q4yQ4nuMTdRNJQgIaseyah5o-5iNgOqB3-sZy4H1fqsBvxxKyvm3F2wGIRuFzvkwnwWVkjTEU8gZGPtmXfWLGQuAUHutGeSmep_buUbJMx2Tmwk0fRw0C2zkNxzvlY9CjO4AEb2WBmnwt1AinnJ2jy96ltUHrSBU6HPi9XL=s120" /></div>

<div class="zmImg"><img alt="#" src="https://blogger.googleusercontent.com/img/a/AVvXsEgL-n2b3xWxVa6I0qVt3Q4yQ4nuMTdRNJQgIaseyah5o-5iNgOqB3-sZy4H1fqsBvxxKyvm3F2wGIRuFzvkwnwWVkjTEU8gZGPtmXfWLGQuAUHutGeSmep_buUbJMx2Tmwk0fRw0C2zkNxzvlY9CjO4AEb2WBmnwt1AinnJ2jy96ltUHrSBU6HPi9XL=s120" /></div>

<div class="zmImg"><img alt="#" src="#" /></div>

<div class="zmImg"><img alt="#" src="#" /></div>

<div class="zmImg"><img alt="#" src="#" /></div>

</div>

Reminder 🎗️!I will recommend you to subscribe our site to gett all kind of information and notified contents.

Step 6:After successfully paste the code, now copy the CSS code given below by double click CSS BOX.

Step 7:Similarly paste this CSS just below the HTML

Step 2: On Blogger,click Post or Page.

Replace!Before publishing edit or paste your photo link on the place of {#}href="#"and publish it.

<style>
  /*gallery img scroll by ACT(KK)*/

.galWrp{margin:25px 0;overflow-y:hidden;overflow-x:scroll;position:relative;white-space:nowrap;width:100%}.galWrp>*{display:inline-block;margin-right:5px}.galWrp>*:last-child{margin-right:0}.galWrp img{max-height:310px;max-width:unset;width:auto;border:1px solid #585759;}.galWrp.h250 img{max-height:250px}.galWrp.h200 img{max-height:200px}.galWrp.h150 img{max-height:150px}@media screen and (max-width:500px){.galWrp img{max-height:250px}}
  </style>

Why We Use Stylish Code

Stylish Code make our site looking so good and professional. HTML CODE just give a skeleton of a post or design but CSS completely make its physical structure. it's work a Architecture. Our site Published some readymade code which may useful for your blogging purposes. Any query then contact us through page

Rate This Article

Thanks for reading: Image Sliding Design CSS And HTML Code , Stay tune to get latest Blogging Tips.

Whatsapp Group

Image Sliding Design CSS And HTML Code

Why We Use Stylish Code

Post a Comment