Learn Web Design

Posts

Show Today's Date & Current Time As Simple Text On Your Blog

Here’s a simple JavaScript to show the current date anywhere in the blog. You can place this code either in any HTML/JavaScript widget, or anywhere else in the template as per you wish. The output will be like this:
Today is Wednesday, August 2.
And the required code, to be added is this:

<script language=”Javascript”>
<!–
var dayName = new Array (“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”)
var monName = new Array (“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”)
var now = new Date
document.write(“Today is ” + dayName[now.getDay()] + “, ” + monName[now.getMonth()] + ” “+now.getDate() +”.”)
//–>
</script> There’s an even simpler code, to display date(like this):
2/7/117
Here’s the code for that:
<script language=”Javascript”>
<!–
var now = new Date
document.write(now.getDate() + “/” + now.getMonth() + “/” + now.getYear())
//–>
</script>

HTML Code Editor for blogger blog Post - Blogspot, Wordpress

Guys, In this post share HTML Code editor code for blogger and website post. Fol owing the instraction below . [How To Add JS-Kit Rating To Your Blogger blog]

How To Create Online HTML Editor ?
Goto Blogger blogClick on New post optionSelect HTML mode then paste the below code

CODE:

<html>
<head>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    
    <script src="script.js"></script>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <h1></h1>
    <div id="main">
      <textarea id="txt1" style="width: 400px; height: 330px;">Client Side HTML Editor</textarea>
      <br>
      <input id="button1" onclick="var html = $('#txt1').…

How To add JavaScript Progress Bar in website

<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}

#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
}

#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
<div id="myBar">
<div id="label">10%</div>
</div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
&…

How To Make A Button In Blogger

Today, in this post i am going to share you the method of making a button in blogger this is very important for those blogger that place videos on blog and want a download button on blogger it is very simple to make

1) Now first of all go toy our blogger dashboard click on new post and then HTML
2) Now paste this code in HTML window and then click on compose

<button>seomethodes</button>
3) IF you want put a link in button then paste this link in HTML

<a href="http://seomethodes.blogspot.com" target="blank"><button>seomethodes</button></a> Finnaly Publish It !

Output Demo

Test Buttons

How To Add JS-Kit Rating To Your Blogger blog

Today in this tutorial i am going to explain you how to add JS-Kit rating to blogger. with this kit you and your visitors can easily know that whats post of your blog have more votes and most famous. and post that unlike by most people.
1) First of all go to your blogger dashboard click on template and then edit html
2) Click on explain widget template
3) Use Ctrl+F and find <data:post.body/>

4) Copy the code given below and paste this code just after it <data:post.body/>

Code 1
<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div> <div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div>
Output
Code 2 <div style="float:left; margin-right:3px;"></div><div …

How to Add Beautiful CSS Buttons for Your Blogger Blog

How to add this buttons to your blog
These buttons are very easy to use. Now I would like to divide the instalation of this widgets into two parts, that's CSS part as well as HTML part. At first we can add the CSS code. Please follow the below steps.

Go to Blogger Dashboard > TemplateBackup your Template before making any changes to your blogClick on Edit HTMLTick Expand Widget TemplatesPress Ctrl + F and search the code shown below ▼

? 1 ]]></b:skin>
Now add the below ▼ code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)
.button { -moz-border-radius:5px5px5px5px; -webkit-border-radius:5px5px5px5px; border-radius:5px5px5px5px; -moz-box-shadow:01px3pxrgba(0, 0, 0, 0.25); -webkit-box-shadow:01px3pxrgba(0, 0, 0, 0.25); box-shadow:01px3pxrgba(0, 0, 0, 0.25); background:scroll00#222222; border-bottom:1pxsolidrgba(0, 0, 0, 0.25); color:#FFFFFF!important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px19px9px; position:relative…