Top 5 html Codes - that make Your Blogger website look professional
We follow up today,
Custom reading bar html code for Blogger
Custom WebKit scrollable label html code for Blogger
Custom news ticker widget html code for Blogger
Custom preloader effect html code for Blogger
Let's get started,
#1.Custom internal link builder html code for Blogger
Best way to increase your views of each post. Follow these steps,
Search </head> and Paste CSS code Above it.
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Multi Related Post */
.gourabdesignmultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.gourabdesignmultiRelated:hover{background-color:#222}
.gourabdesignmultiRelated .content{padding:12px 15px}
.gourabdesignmultiRelated .content .text{margin-right:5px}
.gourabdesignmultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.gourabdesignmultiRelated .content a:hover{text-decoration:underline}
.gourabdesignmultiRelated .icon{height:auto;min-width:55px;background:#f44336 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s}
</style>
</b:if>Now search this <data:post.body/>(near to the open div of articleBody tag) code and paste below under it, then save it.
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<,a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'gourabdesignmultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
</b:if>
<script type='text/javascript'>
//< * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.gourabdesignmultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>#2.Custom reading bar html code for Blogger
Copy the below javascript and paste it above the closing body tag </body>
<script>window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("myBar").style.width = scrolled + "%";}</script>
STEP 2
After that copy the below CSS and paste it above the ]]></b:skin>
.progress-container{
width:100%;
position:fixed;
z-index:99
}
.progress-bar{
height:5px;
background:#F86152;
}
STEP 3
Paste the HTML code just below the <body> tag (In some template this tag would be adjoined with class or schema, so search for only <body )
<div class='progress-container'><div class='progress-bar' id='myBar'/></div>
#3.Custom WebKit scrollable label html code for Blogger
paste the following code, before ]]></b:skin>
.secondary-menu{
position:relative;
float:left;
width:100%;
height:38px;
background-color: white;
}
.secondary-menu .container{
position:relative;
margin:0 auto;
padding:0
}
#secondary-menu.widget,#secondary-menu.widget > .widget-title{
display:none
}
#navbar-Menu .show-menu{
display: block
}
.navbar-Menu,.navbar-Menu .widget{
position:relative;
float:left;
width:100%;
margin:0
}
#navbar-Menu ul{
position:relative;
float:left;
width:100%;
height:38px;
display:flex;
overflow:hidden;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
z-index:1;
margin:0
}
#navbar-Menu ul li{
flex-shrink:0
}
#navbar-Menu ul li a{
display:block;
font-size:14px;
color: black;
font-weight:400;
line-height:38px;
margin:0 25px 0 0
}
.rtl #navbar-Menu ul li a{
margin:0 0 0 25px
}
#navbar-Menu ul li:last-child a{
margin:0 15px 0 0
}
.rtl #navbar-Menu ul li:last-child a{
margin:0 0 0 15px
}
#navbar-Menu ul li a:hover{
color:red
}
.secondary-menu.widget:before, .secondary-menu.widget:after{
content:'';
position:absolute;
top:0;
left:-15px;
width:15px;
height:38px;
background: white;
z-index:5;
margin:0
}
rtl.secondary-menu.widget:before{
left:0
}
.secondary-menu.widget:after{
left:unset;
right:0;
background:blue;
}
rtl.secondary-menu.widget:after{
right:-15px;
}
.loader{
position:relative;
height:100%;
overflow:hidden;
display:block;
margin:0
}
.loader:after{
content:'';
position:absolute;
top:50%;
left:50%;
width:28px;
height:28px;
margin:-20px 0 0 -16px;
border:2px solid var(--main-color);
border-right-color:var(--border-color);
border-radius:100%;
animation:spinner .65s infinite linear;
transform-origin:center;
}
@-webkit-keyframes spinner {
0%{-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
to{-webkit-transform:rotate(1turn);
transform:rotate(1turn);
}
}
@keyframes spinner {
0%{-webkit-transform:rotate(0deg);
transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);
transform:rotate(1turn);
}
}
@media (max-width: $){
#header-wrapper .container,.secondary-menu
.navbar-Menu.widget:before{
left:0
}
.rtl.navbar-Menu.widget:after{
right:0
}
#navbar-Menu ul{
animation-name:slideToLeft;
-webkit-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
padding:0 15px
}
.rtl #navbar-Menu ul{
animation-name:slideToRight
}
If you have a html knowledge simple paste where your lebel will see in the website, unless simply paste In above ]]></b:template-skin>
body#layout .secondary-menu{
float:left;
width:100%;
margin: auto
height:auto
}
body#layout #navbar-Menu{
height:auto
}
Paste the following code where you want to see in the html in body section
<div class='secondary-menu'>
<div class='container row'>
<b:section class='navbar-Menu' id='navbar-Menu' maxwidgets='1' name='navbar Menu' showaddelement='yes'>
<b:widget id='LinkList78' locked='true' title='Link list' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-5'>https://www.indbeginners.com</b:widget-setting>
<b:widget-setting name='link-6'>https://www.indbeginners.com</b:widget-setting>
<b:widget-setting name='link-3'>https://www.indbeginners.com</b:widget-setting>
<b:widget-setting name='link-4'>https://www.indbeginners.com</b:widget-setting>
<b:widget-setting name='text-1'>PITCH REPORT</b:widget-setting>
<b:widget-setting name='text-0'>NEWS</b:widget-setting>
<b:widget-setting name='text-3'>IPL</b:widget-setting>
<b:widget-setting name='text-2'>INTERNATIONAL</b:widget-setting>
<b:widget-setting name='text-5'>ISL</b:widget-setting>
<b:widget-setting name='text-4'>BBL</b:widget-setting>
<b:widget-setting name='text-6'>T-10</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>https://www.indbeginners.com</b:widget-setting>
<b:widget-setting name='link-2'>https://www.indbeginners.com</b:widget-setting>
<b:widget-setting name='link-0'>https://www.indbeginners.com</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul id='navbar-Menu-nav' role='menubar'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='clearfix'/>
#4.Custom news ticker widget html code for Blogger
Simply paste the following code near to the <body>
<div id="content">
<div class='ticker-wrap'>
<div id='ticker'>
</div></div></div>
<style>
/* CSS News Ticker */
.ticker-wrap {
display: block;
text-align: center;
margin: 0 20px 20px 20px;
padding: 2px;
background: #fefefe;
border: 1px solid rgba(0, 0, 0, 0.1);
border-left: 5px solid #3598db
}
.ticker-wrap>span {
display: inline-block;
background: #fefefe;
padding: 0;
font: 700 13px 'roboto', sans-serif;
}
.ticker-wrap>span>a {
color: #222;
text-decoration: none
}
#ticker {
height: 45px;
overflow: hidden;
background: #fefefe;
text-align: left
}
#ticker ul {
padding: 0;
margin: 0;
list-style: none
}
#ticker ul li {
height: 45px;
white-space: nowrap
}
#ticker ul li img {
float: left;
width: 35px;
height: 35px;
margin: 5px 7px 5px 5px
}
#ticker ul li h3 {
margin: 0;
font: 700 16px 'roboto', sans-serif
}
#ticker ul li h3 a {
color: #333;
text-decoration: none;
line-height: 25px!important
}
#ticker ul li .tickermeta {
font: 400 13px 'roboto', sans-serif;
line-height: 20px!important;
color: #999
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script>
//<![CDATA[
function getauthor(t) {
for (var e = 0; e < t.length; e++) var i = t[e].name.$t;
return i
}
function getmeta(t) {
var e = [];
e[1] = "Jan", e[2] = "Feb", e[3] = "Mar", e[4] = "Apr", e[5] = "May", e[6] = "Jun", e[7] = "Jul", e[8] = "Aug", e[9] = "Sep", e[10] = "Oct", e[11] = "Nov", e[12] = "Dec";
var i = t.substring(0, 4),
a = t.substring(5, 7),
n = t.substring(8, 10),
r = e[parseInt(a, 10)] + " " + n + " " + i;
return r
}
function softwebtutsTicker(t) {
var e = document.querySelector("#ticker"),
i = t.feed.entry,
a = "<ul id='ticket-wrapper-inner'>";
if (i) {
for (var n = 0; n < i.length; n++) {
for (var r = i[n], s = 0; s < r.link.length; s++)
if ("alternate" == r.link[s].rel) {
var l = r.link[s].href;
break
}
try {
var o = '<img src="' + r.media$thumbnail.url + '"/>'
} catch (t) {
var o = ""
}
var u = r.title.$t,
c = getauthor(r.author),
d = getmeta(r.published.$t);
a += "<li>" + o + '<h3><a href="' + l + '">' + u + '</a></h3><div class="tickermeta"><span>' + c + "</span> - <span>" + d + "</span></div></li>"
}
a += "</ul>", e.innerHTML = a
}
$("#ticker").vTicker()
}! function(t) {
var e = {
speed: 700,
pause: 4e3,
showItems: 1,
mousePause: !0,
height: 0,
animate: !0,
margin: 0,
padding: 0,
startPaused: !1
},
i = {
moveUp: function(t, e) {
i.animate(t, e, "up")
},
moveDown: function(t, e) {
i.animate(t, e, "down")
},
animate: function(e, i, a) {
var n = e.itemHeight,
r = e.options,
s = e.element,
l = s.children("ul"),
o = "up" === a ? "li:first" : "li:last";
s.trigger("vticker.beforeTick");
var u = l.children(o).clone(!0);
if (0 < r.height && (n = l.children("li:first").height()), n += r.margin + 2 * r.padding, "down" === a && l.css("top", "-" + n + "px").prepend(u), i && i.animate) {
if (e.animating) return;
e.animating = !0, l.animate("up" === a ? {
top: "-=" + n + "px"
} : {
top: 0
}, r.speed, function() {
t(l).children(o).remove(), t(l).css("top", "0px"), e.animating = !1, s.trigger("vticker.afterTick")
})
} else l.children(o).remove(), l.css("top", "0px"), s.trigger("vticker.afterTick");
"up" === a && u.appendTo(l)
},
nextUsePause: function() {
var e = t(this).data("state"),
i = e.options;
e.isPaused || 2 > e.itemCount || a.next.call(this, {
animate: i.animate
})
},
startInterval: function() {
var e = t(this).data("state"),
a = this;
e.intervalId = setInterval(function() {
i.nextUsePause.call(a)
}, e.options.pause)
},
stopInterval: function() {
var e = t(this).data("state");
e && (e.intervalId && clearInterval(e.intervalId), e.intervalId = void 0)
},
restartInterval: function() {
i.stopInterval.call(this), i.startInterval.call(this)
}
},
a = {
init: function(n) {
a.stop.call(this);
var r = jQuery.extend({}, e);
n = t.extend(r, n);
var r = t(this),
s = {
itemCount: r.children("ul").children("li").length,
itemHeight: 0,
itemMargin: 0,
element: r,
animating: !1,
options: n,
isPaused: n.startPaused ? !0 : !1,
pausedByCode: !1
};
t(this).data("state", s), r.css({
overflow: "hidden",
position: "relative"
}).children("ul").css({
position: "absolute",
margin: 0,
padding: 0
}).children("li").css({
margin: n.margin,
padding: n.padding
}), isNaN(n.height) || 0 === n.height ? (r.children("ul").children("li").each(function() {
var e = t(this);
e.height() > s.itemHeight && (s.itemHeight = e.height())
}), r.children("ul").children("li").each(function() {
t(this).height(s.itemHeight)
}), r.height((s.itemHeight + (n.margin + 2 * n.padding)) * n.showItems + n.margin)) : r.height(n.height);
var l = this;
n.startPaused || i.startInterval.call(l), n.mousePause && r.bind("mouseenter", function() {
!0 !== s.isPaused && (s.pausedByCode = !0, i.stopInterval.call(l), a.pause.call(l, !0))
}).bind("mouseleave", function() {
(!0 !== s.isPaused || s.pausedByCode) && (s.pausedByCode = !1, a.pause.call(l, !1), i.startInterval.call(l))
})
},
pause: function(e) {
var i = t(this).data("state");
if (i) {
if (2 > i.itemCount) return !1;
i.isPaused = e, i = i.element, e ? (t(this).addClass("paused"), i.trigger("vticker.pause")) : (t(this).removeClass("paused"), i.trigger("vticker.resume"))
}
},
next: function(e) {
var a = t(this).data("state");
if (a) {
if (a.animating || 2 > a.itemCount) return !1;
i.restartInterval.call(this), i.moveUp(a, e)
}
},
prev: function(e) {
var a = t(this).data("state");
if (a) {
if (a.animating || 2 > a.itemCount) return !1;
i.restartInterval.call(this), i.moveDown(a, e)
}
},
stop: function() {
t(this).data("state") && i.stopInterval.call(this)
},
remove: function() {
var e = t(this).data("state");
e && (i.stopInterval.call(this), e = e.element, e.unbind(), e.remove())
}
};
t.fn.vTicker = function(e) {
return a[e] ? a[e].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof e && e ? void t.error("Method " + e + " does not exist on jQuery.vTicker") : a.init.apply(this, arguments)
}
}(jQuery);
//]]>
</script><script src='https://indbeginners.com/feeds/posts/summary?alt=json&callback=softwebtutsTicker'></script>
#5.Custom preloader effect html code for Blogger
Simply paste following css code in above
</head>
/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif') no-repeat 50% 50%;padding:1em 1.2em;display:none}
Paste the following code in above </body> tag
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
------------------------------------------------------------------------------------------------
If want to change the preloader effect simple replace link in the css code (http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif)
Check here for more preloader effect.
If you are facing any problems please leave in the comments section. I Here to help you. If you like this post, please share your friends and follow up our blog.
Comments