THEBOEGIS: CSS
THEBOEGIS

Free Software & Template Full Tutorial.

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Wednesday, January 15, 2020

Here's How to Install the CSS Minifier Tool on Blogger Static Pages

CSS Minify / Minifer is a tool or tool that has a function to clean up CSS code sets or Cascading Style Sheets. In addition, this tool can also compress CSS scripts to be smaller and lighter when used.

Better, this tool is used by Bloggers to load their blogs lighter.

Speaking of CSS Minify Tools, on this occasion the author will give a brief tutorial on How to Easily Create Responsive Minifer CSS Pages on Blogger. If you are interested in being invited, you can see in the following tutorial.

Here's How to Create a Responsive Color Picker Page on Blogger

Color Picker in English which means 'color picker'. As the name implies, Color Picker is a tool or tool that has a function to choose colors and will be displayed in detail. Like the color of HEX and RGB. This tool is usually often encountered in some photo editing software and applications.

In addition, this tool is also often used by graphic designers and blog template designers who are nothing but choosing unique and beautiful colors.

Talking about the Color Picker Tool, in this article the author will give a short tutorial on How to Create a Responsive Color Picker Page on Blogger. If you are interested in making it, you can look at the following tutorial.

Friday, December 13, 2019

How To Install Recent Comment Disqus + Back To Top

How To Install Recent Comment Disqus + Back To Top. surely you already know with this style that many have used. and especially the template users commenting on disqus ... one of them is the famous blog Arlina Design uses Recent Comment Disqus + Back To Top

Step 1
First As usual Login to Blogger> click Themes> Click Edit Theme. after you enter the editing template Search</head> or &lt;/head&gt;&lt;!--<head/>--&gt;for faster Press Ctrl + F on your computer keyboard
After meeting Place the Code below right above the Code</head> or &lt;/head&gt;&lt;!--<head/>--&gt;

Monday, December 2, 2019

How to Change the Look of the First Image to Beautiful or Make a First Image

Hi all !! I am crazy about making articles, even though I have discussed many articles, and copying articles this time. I am currently posting gas2 .
Okey, this time I will discuss Tutorial:  How to Change the First Image to Be Beautiful or Make First Image , this tutorial has been discussed with one of Bogger's masters, Ms  Rhinokage Rio admin from  Idblanter.com , I re-discussed because there were many requests from 2 Blogger friends to make the First Image Tutorial, even though it was clearly discussed at Idblanter.com

First Image There are 2 versions of the first version of the Invert Pro Template  made by  arlinadzgn.com and the second is First Image from Idblanter.com
- Ok ... straight on its making

Saturday, October 13, 2018

How to Make a Sitemap with the Timeline Style

This time Wiendhy Stres will discuss and explain how the ways or steps you can follow and do in How to Make a Sitemap with the Timeline Style .
The creation of a sitemap aims to simplify visitor navigation in tracing posts in a blog. In addition, the sitemap also allows search engine crawler robots to explore blogs. Blogs will be judged to be more structured if they have a special sitemap page.

How to Make a Sitemap with the Timeline Style

Okay, just go ahead and follow the steps below 

Open your Blogger page , click the Theme menu , click the Edit HTML button and add this code before </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.namina-sitemap{position:relative;margin:30px auto}
.namina-toc-wrap{display:inline-block;width:100%}
.namina-toc-wrap .namina-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
.namina-toc::before{background:#333;bottom:0;content:&quot;&quot;;left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
.namina-toc{margin:0;padding:30px 20px;position:relative}
.namina-sitemap ul.namina-toc{margin:0;padding:30px 0;list-style-type:none}
.namina-toc li{list-style:none;margin:0;padding:0;position:relative}
.namina-toc &gt; li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
.namina-toc &gt; li .namina-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:22%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
.namina-toc &gt; li .namina-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:&quot;&quot;;height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
.namina-toc &gt; li .namina-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
.namina-toc &gt; li .namina-post a{color:#333;font-weight:700}
.namina-toc &gt; li:last-child .namina-post{margin:0 0 0 23%}
.namina-toc &gt; li .namina-post a:hover{color:#999}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="namina-sitemap"></div>');$(".post-body .namina-sitemap").text(t);var r=$(".namina-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".namina-sitemap").html(i);$(".namina-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="namina-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="namina-icon"></div><span class="namina-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="namina-toc-wrap"><div class="namina-cat">'+t+'</div>'+i+"</div>")}})})}})}});
/*]]>*/
</script>
</b:if>

When finished, click the Save theme button.

Then select the Page menu then click the new Page button

After that, click the HTML button then add the caller code below in HTML


[sitemap]

Then click Publish and see the results


Now that's from Wiendhy Stres about how to make a sitemap with the timeline style . Sorry if there are deficiencies and hopefully useful for you.







Sunday, September 16, 2018

Replacing Post Summary on the Minima Template

Replacing Post Summary on the Minima Template
Changing Post Summary to Minima Template - A few days ago there was a blogger friend asking about how to add posts in post summary template new minima colored.

Okay, just follow the application method:

First log in to Blogger> Template> Click Edit HTML

Search and delete the code below
:

/* CSS Read More */
a.adreadmore {position:absolute;display:inline-block;bottom:20px;background:#fff;color:#666;padding:5px 10px;font-family:'Open Sans';font-size:12px;font-weight:400;border-radius:2px;border:1px solid #e9e9e9;transition:all .1s;}
a.adreadmore:hover,a.adreadmore:active {text-decoration:none;background:#f9f9f9;color:#444;}
a.adreadmore:after {content:'\f0da';font-family:Fontawesome;font-weight:normal;text-align:center;margin-left:5px;display:inline-block;line-height:10px;transition:all .1s;}

Then find the code below

<div>
<data:post.snippet/>
</div>
<a class='adreadmore' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> Read More </a>

Delete and replace the above code with this code

<div>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
</div>

Next add the script below just before the closing tag </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
snippet_count = 160;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}
//]]>
</script>
</b:if>
</b:if>

Save the template.

To increase or decrease the number of posts in a post summary, please edit this code in the script above

snippet_count = 160;

The above method, you can apply to all the templates that I share here and do not rule out the possibility that you can apply to other templates.

After applying the above code, you can:
  • Save space on the main page of the blog
  • The appearance of the blog becomes more neat and interactive
  • Add an anchor link to the title keyword
And you are advised to:
  • Add a jump break to each post after the first paragraph
  • Change the blog site feed settings to prevent it from auto post blogs

So about How to Change Post Summary on Minima Template, if there are difficulties you can ask via the comments column. thank you

Saturday, September 15, 2018

How to Remove Attribution on Blogger

How to Remove Attribution on Blogger
How to Remove Attribution on Blogger - Most templates provided by third parties no longer include blogger attribution. However, if we still use the default template from blogger then the template will automatically be installed with blogger attribution that cannot be manually removed.

The problem arises when there are bloggers who still want to use the default blogger template but also want to delete the blogger attribution on the template for several reasons.

Example display of blogger attribution

Although it cannot be deleted manually, we can still delete blogger attributions to the default template by adding code to hide this attribution widget via editing the HTML template directly.

To hide posts empowered by Blogger with the CSS code, it's easy, please follow these steps:

1. Login to blogger
2. Save the code below just before ]]></b:skin>


#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

3. Save the template.

How to Optimize Images for SEO Automatically

How to Optimize Images for SEO Automatically
How to Optimize Images for SEO Automatically - This is done so that the images on your blog page are automatically indexed by search engines like google so you are not bothered by adding them manually (adding a description to <img alt="description of the image" height="125" scr="/image.png" width="125" /> when posting a picture).

This method can be said to be troublesome. With this automatic method, each image has the same description as the image title. Therefore, you must provide the appropriate name for each image that will be posted.

Why do you have Image Optimization to Automatically SEO?

Because the image on the blog page is one of the media that can be used for traffic on search engines because some internet users like to search or just browse to see pictures.

Here's how to install an automatic SEO code in the image

Look for the code </body> in your blog template, then copy and paste the code below just above the code </body>


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/
javascript'>
//<![CDATA[
$(document).ready(function() {
$('
img').each(function(){
var $img = $(this);
var filename = $img.attr('
src')
$img.attr('
title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='
text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('
#scroll').height() / 2;
$('
#scroll')
.css('
top', distance)
.text('
(' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('
#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

Next save the template.

Every blog image that you install in an article will automatically have an SEO friendly code.

May be useful.
Notification
This is just an example, you can fill it later with your own note.
Done