Add a Fixed Slideshow with Large Images on the HomePage in Blogger

Add a Fixed Slideshow with Large Images on the HomePage in Blogger

Go to download


Add a Fixed Slideshow with Large Images on the HomePage in Blogger

Add a Fixed Slideshow with Large Images on the HomePage in Blogger. As I mentioned previously, the slide show, we will install it to appear on the home page of the Blogger blog only and through a set of stages, as the tool consists of a set of codes, which are HTML, CSS and JavaScript, and it is preferable to watch the video in which we will explain how to install the tool in boring detail, because the templates Blogger sizes vary, so there are some variables that must be controlled manually to install the tool correctly on any blogger template, how it was.

Installing JavaScript code for the slide show

The JavaScript code for Slide Show depends in particular on the jQuery library, which must be available in your blog. This library is a script and most of the time it is found in all blogger templates, but if it is not present, the slide show will not work, so all you have to do is search In the blogger template on this library, write the name jQuery. If you find the script here, you will not face a problem, but if you do not find it, add it above </head> Through the Google Hosted Libraries link , select the latest version.

For JavaScript codes for a slide show, you can put them anywhere, provided that the HTML slide show and the jQuery library are above it, and it is preferable to put these codes above </body> directly to avoid any problems.

  <!-- Fixed Slideshow By --><script type='text/javascript'>
var imurl, modeposts = "recent",
    hmounths = ["by7amian", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "november", "December"];
imurl = "recent" == modeposts ? "/feeds/posts/summary/?start-index=1&max-results=5&orderby=published&alt=json-in-script" : "/feeds/posts/summary/-/" + modeposts + "?start-index=1&max-results=5&orderby=published&alt=json-in-script", $.ajax({
    type: "get",
    url: imurl,
    dataType: "jsonp",
    success: function(s) {
        var a = s.feed.entry,
            e = s.feed.entry[0].author[0].name.$t,
            t = s.feed.entry[0].published.$t.substring(0, 10).split("-"),
            r = t[2] + " " + hmounths[parseInt(t[1])] + " " + t[0];
        for (let s = 0; s < a.length; s++) {
            var n, p, l = a[s].link.length - 1,
                i = a[s].link[l].title,
                m = a[s].link[l].href;
            n = 1 == a[s].hasOwnProperty("media$thumbnail") ? a[s].media$thumbnail.url : "", 0 == s ? (p = '<div class="auti"><span class="hm hm-user-circle"></span><span>' + e + '</span><span class="hm hm-clock"></span><span>' + r + "</span></div>", n = n.replace("s72-c", "s600")) : (p = "", n = n.replace("s72-c", "s300"));
            var h = '<div class="hmps hmp' + (s + 1) + '"><a class="htumb" href="' + m + '"><img src="' + n + '" alt="' + i + '"></a><div class="hminfo"><h3><a href="' + m + '">' + i + "</a></h3>" + p + "</div></div>";

Installing CSS codes for the slideShow

As we know, CSS code must be placed in the middle of a tag<stye> ... </style>Then put it in Head, but blogger templates have a place for placing CSS code, so you can put CSS code for a slide show above </b:skin> or ]]></b:skin>directly.

<!-- Fixed Slideshow By -->
#hm-slider *{box-sizing:border-box;}
#hm-slider{width:100%;height:auto;overflow:hidden;padding:10px;background-color:#fff;border-radius:5px;margin:5px 0;direction:rtl;transition:all 300ms;}
.htumb img{display:block;width:100%;height:100%;object-fit:cover;}
#hm-slider .hmps.hmp1{position:relative;width:55%;height:400px;left:auto;right:22.5%;float:right;padding:0 10px;}
#hm-slider .hmps.hmp2,#hm-slider .hmps.hmp4{right:-55%;padding-left:20px;left:auto;float:right;width:22.5%;}
#hm-slider .hmps.hmp3,#hm-slider .hmps.hmp5{padding-right:20px;width:22.5%;float:left;}
#hm-slider .hmps.hmp2,#hm-slider .hmps.hmp3{margin-bottom:10px;}
#hm-slider .hmps:not(.hmp1){height:200px;}
#hm-slider .hmps{overflow:hidden;position:relative;}
#hm-slider .hmps:not(.hmp1) .htumb{display:block;width:100%;height:140px;overflow:hidden;border-radius:5px;position:relative;border:solid 1px #ddd;}
#hm-slider .hmps:not(.hmp1) .htumb:before{position:absolute;display:inline-block;background:linear-gradient(0deg,#000000aa,transparent);content:"";top:0;left:0;width:100%;height:100%;opacity:0;transition:300ms;}
#hm-slider .hmps:not(.hmp1) .htumb:hover::before{opacity:1;}
#hm-slider .hmps.hmp1 .htumb{display:block;border-radius:5px;overflow:hidden;height:100%;width:100%;}
#hm-slider .hmps:not(.hmp1) .hminfo h3{font-size:14px;margin:5px 0;font-weight:lighter;line-height:1.6;}
#hm-slider .hmps:not(.hmp1) .hminfo h3 a{text-decoration:none;color:#000;transition:250ms;}
#hm-slider .hmps.hmp1 .hminfo{position:relative;background:#ffffffee;min-height:100px;top:-110px;margin:0 35px;padding:15px 10px;text-align:center;box-shadow:0 0 8px #fff;border-radius:2px;}
#hm-slider .hmps.hmp1 .hminfo h3{font-size:16px;font-weight:bold;line-height:1.7;margin:0;}
#hm-slider .hmps.hmp1 .hminfo h3 a{color:#000;text-decoration:none;}
#hm-slider .hmps:not(.hmp1) .hminfo h3 a:hover{color:#3f51b5;}
#hm-slider .hmps.hmp1 .auti .hm-user-circle{display:inline-block;background:no-repeat center url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='user-circle' role='img' xmlns='' viewBox='0 0 496 512' class='svg-inline--fa fa-user-circle fa-w-16 fa-2x'%3E%3Cpath fill='rgb(0,128,128)' d='M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z' class=''%3E%3C/path%3E%3C/svg%3E");width:14px;height:14px;margin:0 0 0 5px;vertical-align:middle;}
#hm-slider .hmps.hmp1 .auti .hm-clock{display:inline-block;background:no-repeat center url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='clock' role='img' xmlns='' viewBox='0 0 512 512' class='svg-inline--fa fa-clock fa-w-16 fa-2x'%3E%3Cpath fill='rgb(0,128,128)' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z' class=''%3E%3C/path%3E%3C/svg%3E");width:14px;height:14px;margin:0 5px;vertical-align:middle;}
@media screen and (max-width:800px){#hm-slider .hmps.hmp1{width:100%;right:unset;left:unset;float:none;padding:0;}#hm-slider .hmps.hmp2,#hm-slider .hmps.hmp4{width:calc(50% - 5px);float:right;right:unset;left:unset;margin:10px 0;padding:0;height:auto;}#hm-slider .hmps.hmp3,#hm-slider .hmps.hmp5{width:calc(50% - 5px);float:left;right:unset;left:unset;margin:10px 0;padding:0;height:auto;}}

Install HTML codes for the slide show

Now we have reached the stage that needs focus, where the placement of the HTML code for the slide show must be in a very appropriate place and exactly on the main page.

You must watch a video explaining how to install the slide extension to be able to change the display and location of the widget according to your blogger's template.

<!-- Fixed Slideshow By -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style="width:100%;display:flex;justify-content:center;">
<div style="width:100%;max-width:1100px;">
<div id="hm-slider"></div>

Add an animated slideshow to your blogger blog

You may have entered this post with the aim of getting an animated slideshow instead of a taped slideshow, so if you want to install an animated slideshow on your blog, you can do so through the topic of adding an animated slideshow in your blogger blog. The importance of the animated slide show is that it contributes to attracting visitor's attention to the topics of the blog through the automatic movement of the topics. It also has several other advantages, represented in the possibility of moving topics using the mouse, as it is responsive to tablets and smart phones.

image quote pre code