Personally, I hate sliders / slide shows. They almost always stretch the original image so much that it looks faded and terrible. Also, with sliders you basically have to add an image to each post. If not you get a big - "No image available" or similar showing up in the slider, and it looks ugly. Now don't get me wrong, the functions / display of the slider can all be changed if you want to spend the time editing the code, but who has time for that. And, to be honest, I just prefer to remove the slider all together.
How to remove the slider from a Blogger template
Some templates will have a slightly different slider code. However, if you follow this guide in a general sense, and understand the HTML may be different but mostly the same, you should be able to remove any slider from any Blogger template. As long as you start and end (deleting the code) in the right places there shouldn't be any problems.
OK, first add the templates XML file / HTML code to the "Edit HTML" window in Blogspot. Once that is done open up the search facility of your browser. I'm using Firefox, so I'll click the "Edit" tab (in the browser) and then click "find". Make sure your on the "Edit HTML" window, then type "slider" into the browser search / find box. You may have to scroll down quite a bit in order to find the correct code to remove the slider. See below for a code example.
Note: Some templates, like the one I'm using as an example, mark their codes with a start and end. Such as <!-- featured post slider started -->. This is great as it makes our lives that little bit easier when taking the HTML out, because all you then need to do is remove everything in between the start and end. Job done. Be aware though, not all templates have this, so here is a code as an example of what you need to remove. Ignore the <!-- featured post slider started --> and <!-- featured post slider end --> if the template you are working with does not have them and just take out everything else.
<!-- featured post slider started -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'/>
<li data-slide-to='1' data-target='#myCarousel'/>
<li data-slide-to='2' data-target='#myCarousel'/>
</ol>
<div class='carousel-inner'>
<div class='item active'>
<a href='ENTER-SLIDE-1-LINK-HERE'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPCmpL_S6lV3BPHvDxDcD6ukTVeJtZ7-1d2qp2pRz4Ptn6fb5gMnwGs79QHvpU57wPgxx-BSVNEt6eJEeHUdO66id5zOVyaQx3Mwc0qy6lhfVA6hXgcmrrA60nddp7kDRLQifBSh2xu8/s320/slide1.jpg'/>
</a>
<div class='carousel-caption'>
<p>Enter Slide 1 Title Here.</p>
</div>
</div>
<div class='item'>
<a href='ENTER-SLIDE-2-LINK-HERE'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMlASH7tM9M19f4qusKNCa8tuQPIUxXimXOw9rr24nKWgfZ45P37A6LBvaEMwBS3D1MFFc3-eRzBGNWpX0lZF9WX9HmW6uiotaTzHP1OHf686YaKUunYfkJd206YW253enkoCLC1_Ssjs/s1600/slide2.jpg'/>
</a>
<div class='carousel-caption'>
<p>Enter Slide 2 Title Here.</p>
</div>
</div>
<div class='item'>
<a href='ENTER-SLIDE-3-LINK-HERE'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKab8admG_Pe69DlW93OtZRnMGUSFbWnr_R188YrHhV6vLUM_nYokh1lDAGLgDB47C17S2T-k2uZd4kjIguZofiqNzM84oeBcsiAj0P4sRbk9mQSRTJyqdJuOna4yaHd5pBA4DLZHUZ0o/s1600/slide3.jpg'/>
</a>
<div class='carousel-caption'>
<p>Enter Slide 3 Title Here.</p>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='#myCarousel'><span class='glyphicon glyphicon-chevron-left'><img alt='First slide' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7aDFUX4JpbcVVbPxxuYKiB27T_252A8Oy1mfjNGDBmEoNaUZSTx6GsR13f8fmBR-sOfhxgId4R7nQVFB35IcWEodxWM_du4VSAw56zdYDP0AidGwLcq-YRfYCfapK0DBoBQrtx09sirC/s1600/previous-arrow.png"/></span></a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'><span class='glyphicon glyphicon-chevron-right'><img alt='Next' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OuB3YUECSdlB6WG1XnPAFNKsR2BAU4sVmhvr6Bmwp9vubgEWZGnnYS3XTKsVU6sCrrf4O2BWpJVdaQ43paw_HQ7z4ON2GUPcZ5xgtvpJVVvafDPHxdgeHmbAJgLtCq34-SN6i2NhyOMS/s1600/next-arrow.png"/></span></a>
</div>
</b:if>
</b:if>
<!-- featured post slider end -->
Take that ^ code out (or similar depending on the template) and then press preview. The slider should now have disappeared. If everything looks good and you are ready to proceed press "save theme". And that's it, the slider is now gone and you can start posting some content on your blog. As long as you take out the correct amount of "B" and "Div" tags (opening and closing tags: Example: </div> - </b:if>) you will be fine. If you make a mistake Blogger will give you an error message at the top of the edit window. Either that or when you press preview you will see that something isn't right with the layout of the theme.
For both issues there is nothing to worry about. Just press either the "Back" tab, or "Revert changes" tab that are on the Edit HTML blogger page (above the code). Blogspot will give you various notifications (depending on what tab you click) on if you want to "discard the unsaved changes" - "unsaved changes will be lost". Press OK and just start the removal process again.
Quick tip. If you look to the left when in the Edit HTML window you will see numbers that get higher the further you scroll down the code. When you find the slider code make a note of the number so that if you make a mistake you can just scroll straight down to the number and start again. Makes things that bit easier. Hope this helped you out. Until the next time.
No comments:
Post a Comment