How To Give A Label Signs A New Post In Blogspot

This next article we will discuss how to give a new post label, this label will appear automatically on our page, so we do not have to bother to install and remove the label. as an example consider the following screenshot
 

 

Okay guys, let's try to create a new post for blogspot label, the first step is insert the css code right above ]]></ b:skin> Or </style>

     .newer-post {
    margin: 50px auto;
    width: auto;
    height: auto;
    background-color: none;
    position: relative;
    }
     
    .newer-post2 {
    font: bold 20px Sans-Serif;
    text-align: center;
    transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -25px;
    top: 7px;
    width: 160px;
    background-color: blue;
    color: #fff;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    }
     
    .newer-post3 {
    width: 86px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -4px;
    right: -4px;
    } 

if you paste the CSS code has been like in the above command, now find code faster <b:include data='post' name='post'/> use the Ctrl + F, If you have found replace the code with the code below

     <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <div class='newer-post'>
    <div class='newer-post2'><div class='newer-post3'>NEW</div></div>
    <div class='first-post'>
    <b:include data='post' name='post'/>
    </div></div>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if> 

After all are finished click save and see the results on the template you ^ _ ^


Source : The-Anarchyta

How To Create A Loading Effect On Blogger

If you want to create the effect of loading on the blog as the blog that I use, in fact in the SEO rules loading effect on the blog does not provide added value (remember in terms of SEO) but loading the blog has another function that is busting saturation point visitors who come to visit bhlog we.

Due to the nature of this widget in the form of images .gif, therefore we also have to prepare well for the smooth image of our website at the end of this tutorial I will give some examples of loading images with the format .Gif is not too large and would make loading a blog.

Preview 

okay immediately we will begin, first make sure that your blog is the jquery suport. If not copy and insert the following script before the </ head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

if you already have it then ignore it

The next step copy and paste the CSS code just above the code]]> </ b: skin> or </ style>

 #page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DBdZo_mhRDE_2R9YBwgaSjxEuKejWMuedhloOjjilR49mqCGkT-C5Zk-VxW7Km4c0_I4QvU0ycKMGbkagrC9jqqSKmxylQfdMDpuGnYooodnbT1Md83E_l4ojZ14MPsg-KTAwau9xpc/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
} 

I note the yellow block, that's where the image url will we can change.

 

 <script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script> 

Now you just save the template to see the results finished ^ _ ^

 Sample Image Loading Blog