Files

Here the files html



Go to template -->click on customize-->click on advance-->add CSS
Copy the html code under and paste in CSS blogger CSS box and click on save. 

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
#blog-pager {
display:none;
}?

remove home

#blog-pager {
display:none;
}


 -----------------------------------------------------------------------------------------------

go to template-->click edit html-->find </head>
copy the text until to remove attribution "blogger" and paste
just before </head>


<style>

#Attribution1 {

display: none;

}

</style>
-----------------------------------------------------------------------------------------------

1. Replace the meta content by this code under.



<meta content='width=device-width, initial-scale=1.0,minimu-
                   scale=1.0,maximum-scale=1.0' name='viewport' />



-----------------------------------------------------------------------------------------------


2. Creating images of posts be responsive. 
Please find the below code.


.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}


2. Then please replace the above code with the code below:


.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}


-----------------------------------------------------------------------------------------------


3. Find code bellow:</head>

Then place to this code:

 4. The last step, place the following code above the 


<style type='text/css'>
@media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, 
.region-inner {
width: 100%!important;min-width:100%!important;padding:0!important}
header-inner {
 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;margin-right: 0!important;}
}

</style>



5. Save

-----------------------------------------------------------

to make your video responsive in blogger:
 replace your coding of your html video with below;


<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><br />
<div class="embed-container">
<center>
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/dbl9H-JjIQc?rel==0&amp;autoplay=1;controls=0&amp;showinfo=0"></iframe></center>
</div>
<div style="text-align: center;">
<br /></div>
-----------------------------------------------------------

Your done !!!