Demo and Download Button For Blogger | Material Design

Demo and Download button | Material Design - Hello Guys Today I am gonna show you how to add Demo and Download button with material design on blogger.


We all know by default we cant use buttons in our posts since no blogger template provides such features except templates provided by SoraTemplates. They provide some good features in their template either it is free or premium.

Download Button | why ?

Why it has important role in blogs ??  Why we need to add these buttons to our blogs ??

We are providing informations through our blog, so sometimes we need to give any links or files accordance with the information we shared. so that time we put images to cover the link

Since they are images they will increase the loading speed of our blog. it will make a bad impact on our SEO since google gives very importance to the loading speed of the website.





So if we can add the html buttons to our blog instead of the images, then that will save us from the slow loading speed of our blog caused by using the unoptimized images.

I already shared a post How To add Animated download button in HTML. And this is an improved version of that post. Here we added hover effects on click and material design to our download button.

In this post, we are adding material design demo and download buttons

Demo and Download Button | Material Design

As we know, now Material Design has become a trend as a web interface or user interface both on mobile and desktop devices on a website page. This web interface is also welcomed by users and website developers because it has a lot of useful features and a more attractive appearance.

So we will provide here simple download button with animation effects and materials Design.

How to Add the Download Button Code

First open Blogger > Go to Themes > Click Edit HTML >

Add CSS code below Above the code ]]></bskin> or </style>

#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Then add this jQuery code above the </body>

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>

</script>

Then save the template

Now for the calling code, add the HTML code in the post where you need this demo and download button. (not in compose)

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

Replace the # with your download link

Conclusion

Now we have added a material design Demo and Download Button on our Blog post.
If you have any doubts regarding this article please mention it in the comment section.

How to install blogger template

how to install blogger template | Blogger is a blog publishing platform provided by Google. And we already discussed How To Create a blog on Blogger. we know by default, blogger provided templates are very boring. But we can change the default templates.

So here is a tutorial on How To Install A Template On Blogger Blog.

How to install blogger template

There are many websites provides free templates and premium templates for Blogger blogs. We can use them to customize our Blogger blogs. To use such templates you need to download the theme file from their websites. The downloaded file will be in zip format so we need to extract it. then you can see a .xml file in the theme folder, that is the file which we need to upload on our blog.
 



We can't remove footer credits from the free blogger templates. To remove footer credit we need to buy a premium theme.

But there is no problem, we can use free templates by giving proper credits to them. So read my article how to install blogger template and change your default theme , get a premium look

Download  a template from any one of these sites,

#1  Templatesyard

#2  Themexpose

#3  Gooyaabitemplates

      

#4  Btemplates

  

#5  soratemplates

.

Install The Template

Now we have the template file so we are going to upload it in your blog

Go to your blogger dashboard and click on themes.

you can see a Backup/Restore Button on the top right side, click on the button then a box like this will appear. Here you can see two options Download theme and Backup/restore.

 
You can take a backup of your existing template by clicking the Download theme button.

To upload your theme click browse and select the .xml file from the unzipped template folder and click the upload button.

After the successful installation, you will get a message uploaded successfully. Then click on the view blog button in the top left area to see your new blog

The documentation for the templates also available, look into the unzipped folder for the documentation file.

Customize the theme as you like with the help of the documentation.

If you have any doubts regarding this article How to install blogger template on your blogger blog please mention it in the comment box,

Was this post helpful? If so, would you consider sharing it with others who might appreciate it as well? Thanks!

How to start your own blog in 2019 | blogger.com

Whether you ’re passionate about blogging, or want to start a blog or website, but still looking at the sky and worrying about your programming skill, then you are at the right place. This guide will solve all your worries and help you start a blog in 2019.  Who told you that you can’t start a blog/website without any programming knowledge. I‘ll show you how to do that.

What is Blogger

Blogger is a free blogging platform Provided by Google. It was developed by Pyra labs but in 2003 Google has bought the service. The blogs are hosted by Google and generally, it can be accessed from a subdomain  of " blogspot.com " and also by connecting a custom domain purchased by the user
using DNS facilities to direct the domain to Google's servers.

How can you earn money from blogging

Google provides its own advertising services to monetize your blog known as Adsense. If your blog has unique content and good traffic you can apply for Adsense.

Create your first blog

To create your first blog on blogger, just go to Blogger.com and sign in using your Google account.

If you don’t have a Google (Gmail) account, then signup for one, then go to blogger.com

For a first time user, you can see a welcome page like below. You need to enter a name here for your blogger profile.

then click continue to blogger, now you will reach blogger dashboard, from here you can create your first blog

click new blog from the left side of your dashboard and click create new blog.

now you have to type a name and address for your blog. the address will be shown as yourname.blogspot.com. You can change it later when you buy a custom domain.

pick the right name for your blog. Avoid using your personal name as the domain name, because, if you use some generic name for your domain, you can brand it later with a custom domain. After that select a template (you can change it anytime), and click on “Create Blog”.

Now you have created your first blog, and you can see it by typing the address (yourname.blogspot.com).

but you are not done yet!

There are a few settings that you need to do on your new blog to make it easy to use

Now you will be at the Blogger dashboard where you can see your blog’s backend.

From here you can go to “Settings” and make changes to improve your blog's visibility. Here is a screenshot of what you should be seeing:

Now you have a blog, you can start writing posts for your blog from “posts“ > “new post“. 

But before writing your first post, we recommend that you create at least an “About” page describing who you are and what your blog is about.

 Add Pages

A page saying about you and your blog is a very important factor on your blog. It will help new peoples understand about you and your blog, provide the correct information on your about page.
And a contact us page on your blog to help the readers contact you.

To create a page go to  Pages and click on new page, and type your information

Also add a disclaimer, and privacy policy, terms of use, pages. It will help you for Adsense approval in the future

Change Theme

Now you have a blog, but I know you're not satisfied with the boring looking of your blog. But don't worry you can change your theme and make it a professional looking blog. There are many websites providing free templates for blogger blogs, you can download files from respective sites and upload on your blog. I have listed some of them below, visit those sites and download your theme.

Since the templates are free they don't allow you to remove footer credits so you need to purchase one if you want to remove footer credit.

You can use the templates by giving them proper credits.

#1   Templatesyard  
#2   Gooyabi Templates  
#3   Sora Templates 
#4   Themexpose

The theme file you downloaded will be in zip format, so you need to extract it. Then you can see a .xml file in the theme folder. this is the file you need to upload.

To change your theme go to Theme => Backup /Restore, then a box like below appears. Click on Browse and find theme folder and select the file (.xml)

Click upload | Your new theme will be uploaded soon

After uploading the theme you need to customize it, look in the theme folder for the documentation file, and customize your them with the help of it,

if it's very hard for you, then contact me, I will do it for you.

Was this post helpful? If so, would you consider sharing it with others who might appreciate it as well? Thanks!

Also, read

∎   Free blogger template without footer credit
∎   How to add simple Buttons in your blog posts
∎   How to remove date from blogger permalink
∎   Remove "Showing posts with label...." on blogger blog

How to improve the performance of Chrome with many tabs

Improve Chrome Performance | It's no wonder that Google Chrome works slowly when we open too many tabs at a time. Today we will show you how to make it faster.

Internet evolves at the speed of light, an aspect that can be positive; however, it also causes things to become obsolete too quickly. This is the case of programs and websites, which go from world fame to absolute oblivion. In this sense, Internet Explorer has been dethroned, whose position is currently occupied by Google Chrome, the king of browsers.

As we know that most users use Google Chrome, today at Techfint we will show you a way to make it work faster. If you are one of those who opens 20 tabs at once, you will find it tremendously useful.

How to make Google Chrome go faster

Those of us who work with the Internet every day open a multitude of tabs in Google Chrome. Obviously, when there are two or three, nothing happens; but, when we exceed a dozen, our computer may start to slow down. This situation can negatively affect our work, since productivity is reduced.

The solution is found in the Chrome Web Store itself. We are talking about OneTab , an interesting extension that will save up to 95% of the memory used in the PC. This free extension has already been downloaded by almost 2 million users and has an average rating of 4.6 out of 5; a figure that reveals how useful it is.

How does OneTab work?

First, we 'll need to download OneTab from the Chrome extension store. Once installed, your icon will appear in the upper right corner of the browser, along with other extensions.

When you feel that the computer behaves worse due to the large number of open tabs, click on the OneTab icon. Once this action is done, all your open tabs will be closed; but do not worry!

OneTab will open a single tab in which all the tabs we have just closed will accumulate. All of them accompanied by their corresponding hyperlink. To return to any of them, just click on its title.

Thus, OneTab works as a tab organizer capable of ridding our computer of a 95% memory load. It is also possible to open all the tabs or delete them from the interface of the extension.

In the same way, we can order the tabs to our liking, we just have to drag with the mouse. Another interesting option is to create a web page from the list of tabs. Thus, we can share them easily with other people if necessary.

This Bluetooth chip does not need a battery: it works with the energy it takes from the air

Wiliot has developed a Bluetooth chip that does not need a battery to work, capturing radio waves and converting them to energy.

One of the most common tricks to save battery on your smartphone is to turn off the Bluetooth connection if you are not using it; After all, the chip that manages that wireless communication needs energy. But what if it was not like that? What if we could implement Bluetooth anywhere without even adding a battery?


That is the idea that startup Wiliot wants to make reality; and has already taken giant steps in that direction, thanks in large part to the multi-million dollar investment that companies like Samsung or Amazon have made. The result is a functional prototype, a Bluetooth chip that does not need a battery

The Bluetooth chip that does not need a battery

Of course, then, how do you get the electric power necessary to function? The idea behind the project is that it does not take more energy, if we can just take the one that is already in the environment of any home or office. We refer to the radio waves that surround us, coming from Wi-Fi routers, Bluetooth devices or the telephone signal of our smartphone.

Actually, we are in two different parts. The key piece in a new chip, developed by Wiliot, is able to convert the radio waves it captures into electrical energy . An energy that then passes to an ARM processor with Bluetooth, which is the one that makes the connection and manages the sensors that connect it.





In this way, in a very small space we can add a Bluetooth connection to almost anything. It will be especially useful for Internet of Things devices, which will not need as much battery to operate. Its own creators imagine new utilities. As chips that store the user manual and that are always accessible even if we have run out of battery; or sensors that detect the temperature of a product and send a warning

The first units of Wiliot will be launched in 2019, facing a massive launch in 2020.

Microsoft to separate cortana from search bar in windows 10 Build 18317

The search for Windows without Cortana will be implemented in future versions of Windows 10, a grateful change for many users.

The good thing that Windows no longer follows a fixed schedule of updates is that the system is always improving, responding to criticism from users. Before we had to wait for the "Service Packs" to get news; Now, Windows 10 receives improvements almost every six months.

The latest modification that Microsoft has announced is a good example of this; affects one of the most used functions of an operating system, the search. Normally, when we want to find a file, it's because we really need it; We do not want distractions or having to dodge functions we do not want. And yet, that's just what Microsoft did when it implemented Cortana.

The search for Windows without Cortana, finally

The personal assistant of Microsoft comes installed by default in Windows 10; and occupies the same position as the system search. That implies that, every time we want to look for a file, we also "wake up" Cortana; something more than a nuisance, since it can also affect performance.

Most people just want to use the search; especially on the desk, where personal assistants have not been able to take off, as in smartphones. That's why Microsoft has decided to separate the search for Cortana; from the next versions of Windows 10, will be two separate functions and will be developed independently.





The latter is also important, because it will allow Microsoft to focus on the strengths of each functionality. It will allow developers to implement new features in Cortana, and improve Windows search without fear of "stepping on" each other.

Moreover, as you may recall, Microsoft is developing a new universal search engine ; will be the same for all its products, from Office 365 to Bing, passing, of course, by Windows 10. This division will improve the Windows search with new features.

But the first result is that in future versions of Windows, Cortana will appear as an independent icon in the bar. For the time being, the change has been applied to Windows Insider users, the Windows 10 trial version, and has not yet a definite release date.

The biggest data leak in history: 773 Million Email Addresses And 21 Million Passwords Exposed

In our blog we have already pointed out some security measurements to keep your data safe in the internet. we have recommended some basic safety practices in our article What you should know about Personal Privacy on the Internet . How not to use the same password in all the sites we use, or use measures such as two-step authentication. But sometimes that is not enough. If an attacker gets directly into the database of the web we use, we probably can not do much about it.

The biggest data breach in the history

Now repeat that, billions of times. In particular, 2,692,818,238 times. That is the number of records that has the "Collection # 1", the database that has just been released on the Internet by unknown sources; and that stores an absurd amount of email addresses and passwords.

We are facing the biggest data leak in history; they are so many data, that they occupy nothing less than 87 GB of storage by themselves. This has been revealed by security expert Troy Hunt, who has had the daunting task of reviewing the database; and check to what extent we should fear for our safety. Hunt received the database anonymously through a MEGA account, the file sharing service; Although it has already been deleted from the original account, it is inevitable that it is already being shared throughout the network.





The numbers in Collection # 1 are a little dizzy. The database is composed of 2,692,818,238 entries, although in reality, we are facing a kind of Frankenstein monster. The data comes from thousands of leaks from different sites and services; The creators of this database have gathered the "booty" of these attacks in one place.

This brings us to the second number: in the database, there are more than one billion unique combinations of mail and password; therefore, more than one billion entries are repeated, probably because users have used the same password in different sites attacked.

Hundreds of millions of filtered email addresses and passwords

The only positive thing is that some of these data can not be used, or at least not easily; in some cases, the hackers that obtained the data initially sabotaged or encrypted them, and even in some entries only compressed files are saved.

Once the initial cleanup was done, Troy Hunt discovered more than 770 million unique email addresses . This is the largest amount of emails leaked at one time. With such a quantity, it is very likely that if you read these words, this leak has affected you. The other important fact is that more than 21 million unique passwords have been found; This really reveals the extent to which we repeat the password in different services.

Of course, there is a margin of error for all these figures. These hackers are not precisely characterized by being clean and tidy, and there are many entries with rare characters, and even traps in the form of SQL strings (in case someone tried to add this database to your system). Some passwords are also "hashed", have been passed by algorithms that are the first line of defense in a service; however, that does not mean that they have been properly encrypted, and it is usually possible to obtain the contents of a hash.

How to know if our data has been filtered

This database is already being shared in hacking forums, as well as in Dark Web sites. Taking into account the figures we are talking about, it is very likely that you are affected. Fortunately, there is a sure way to know it.

And is that Troy Hunt is also responsible for Have I Been Pwned , one of the best security websites and we have already recommended other times. This web is very simple, we just have to enter our email address, and the web will tell us if it appears not only in the list of Collection # 1, but also in other leaks of recent years.

In addition, we can also use Pwned Passwords to buy if our password is being shared. This does not always work, since it is possible that the password has been stored encrypted or "hasheada"; but it is important to check it also.

If our mail appears in the database, a warning will appear and we will receive some advice. The most important thing is to change the password of all the sites we use ; or use applications or services to generate new, more secure passwords. It is a long and tedious process, but the magnitude of the filtration is such that there are not many alternatives at the moment.

Also read ;

∎    What you should know about Personal Privacy on the Internet
∎    Best 5 Alternatives to Google based on Privacy
∎    Privacy Badger | Best Anti tracking extension
∎    Big data leak | Google shuts down google plus

How to Highlight Links in Blogger Posts

Change link color in blogger post | The links we given in the blog posts have a crucial role in blog seo.when we put links of related articles in a post, it will make the people spend more time on our blog,this will helps to reduce the bounce rate of the blog, and also in terms of ranking.

For a new blogger, this is a big deal if he uses blogger blog, Most of the free templates doesn't have a code to highlight the links, but some of the templates highlight links when we mouse over it. but it doesn't make any sense if a reader can't see the link when he reaches an article. Who's going to check your article top to bottom for links..Change link color in blogger post

But by a simple method, we can do it manually. First, you need to identify your problem

Understand the problem

1. Links are highlighting when you mouse over it
2. Links never highlighting

Probably your theme may be customized to highlight the links when a reader mouses over it, or at the moment when it is clicked, or it may not be customized to highlight links. Change link color in blogger post

Warning! Take a backup of your theme Before making any changes. Change link color in blogger post

Understand the codes

With CSS codes, we can style the links in a different way


/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

a: link - a normal unvisited link

a: visited -   a link user has visited 

a: hover  -  a link when the user mouses over it

a: active  - a link the moment clicked 

Fixing the problem

The links are highlighting only when a user mouses over it.

This is because your theme is customized to only highlight links when a user moves the mouse over it. Change link color in blogger post

maybe the code to highlight the link already there, but by default, the color would be $maincolor (default color of your fonts)

we need to check does it have the code or the color code is different from the font color of your blog. Change link color in blogger post

Go to themes > edit HTML  and press ctrl+f  inside the editor, type a: visited or a: hover and search it. you can see a: hover at many places so look carefully and identify the code section. most of the time the first a: hover or a: visited be the code we need to edit.

Change link color in blogger post

If it has only this code

a:hover{
color:#ff00000;
}

Then add this code just above it

a:link{
color:colorcode;
}

If you found the a: visited code like this

a:visited {
color:$maincolor;
}

Just change the $maincolor and replace your color code. Change link color in blogger post

If you can't find none of the above codes then just copy & paste the code given below,  just above the ]]></b:skin> code

The CSS code

a:link {
color: #;
}
a:visited {
color: #;
}
a:hover{
color: #;
}code-box

Replace # with the color code you like and save. Don't do anything more if you have no idea about coding. Change link color in blogger post

Now open your any post and check whether it works.

• note > If the above code, not works try these code

.post-body a {
color:#;
}
.post-body a:link {
color:#;
}
.post-body a:visited {
color:#;
}
.post-body a:hover {
color:#;
}code-box

Now save your theme by clicking the save button. Change link color in blogger post

you can delete a: hover code if you don't want to change link colour when a user mouse over it.

If you don't know how to add CSS then do it this way

Go to Theme > customization > Advanced > Add CSS.

Paste the CSS codes here and click apply to the blog. Change link color in blogger post

That's all, now you have made it

Conclusion 

In this tutorial, we discussed how to highlight links in blogger posts. I hope you found this tutorial useful. If so, would you consider sharing it with others who might appreciate it as well?

Change link color in blogger post

If you have any doubt regarding this post please comment below

Also read 

∎  How to change default permalink format on blogger like Wordpress

∎  How to add Buttons in blogger post

∎  How to remove ' Showing posts with label... Show all posts '