21:34
Merbin Joe
Blogger Read More Button
Blogger display latest post in home page with short description only, if any one willing to open read full content then you need to press the "Read More" button, after only user can view the full page content. Some one want to change the text and/or the style of the button. It is very easy to change the step is
Step 1:
After login and enter your post Click template and Edit HTML.
Step 2:
After clicking the "Edit HTML" you will see like below image.
Step 3:
Press Ctrl + F and find the word "jump-link".
the code is shown below
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Step 4:
If you want to change the text "Read More" to your text, just replace the "<data:post.jumpText/>" to your text like below.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Open Page</a>
</div>
</b:if>
Change the Read More button style in blogger
Step 1:
You can change the style of the button by apply some style to button. Add a class name "allinworldreadmore" to the <a> tag and remove the "jump-link" class..
<b:if cond='data:post.hasJumpLink'>
<div class='allinworldreadmore'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Open Page</a>
</div>
</b:if>
Step 2:
Find the name using </head>.
Step 3:
Just add the following code above the </head> tag.
<style>
.allinworldreadmore a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none !important;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 2em;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.allinworldreadmore a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
Preview
Advertisement
14:15
Merbin Joe
Blogger home page image
In blogger home page display latest post and every post having description and first image of the blogger post, like below
You can change the image (In default it take first image of the posting), after writing your blogger decide which image you want to show. After the description just add that image (you can compress it through software or paint 200 px recommended ) and go to Compose to HTML
Find image added code, you can find the code like below by your uploaded image name.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s1600/3D+Animated+Download+Button.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s320/3D+Animated%2BDownload%2BButton.gif" /></a>
just added before and after the <div> tag like below
<div style="display:none;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s1600/3D+Animated+Download+Button.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s320/3D+Animated+Download+Button.gif" /></a>
</div>
Advertisement
13:32
Merbin Joe
Solve Loading problem in blogger home page
If your blogger post have more image and more post on blogger home page then it will reduce your speed of your blogger loading time. You have best solution here.The main reason is if you set to show 6 post on your home page then like below
If you set like above , the 6 posts are loading in the home page, 6 posts are loading in a single page(all post images too) then how the speed is increased? We have a solution with 6 posts and single image for home page timeline.
Steps to increase the loading speed
If your post have more and/or high sized images, then you can use "Insert jump break" before the description with a image.
After write your description and add a image put the "Jump Break", like below
Reduce No of image loading
Left side mention image having, 7 images and simple description. If you didn't used "jump break", the 7 images and description were loaded in the home page of the blogger and first image only will display side of the post in home page.
Reduce size of the page
If not used "Jump break", totally 7 image size is 1827 KB (1.8 MB) will load, if you used "jump break" only 40KB loaded in the home page.
Advertisement
20:39
Merbin Joe
Steps to put adsense code to blogger
Blogger allow us to modify the default or downloaded theme and post related settings, some one want to put the ads between post or other place in this situation, just copy the ad code from the adsense and paste it to the above converter and get the converted code and paste it to blogger.Note : -
Adsense Code Converter is here
Step 1:
&Adsense Code Convertero alt="Adsense Code Converter"the "My ads" and choose the code you want. and select the given code.
Asynchronous Code : This type code is mainly for HTML 5. HTML 5 doesn't required type attribute.
Synchronous Code : This type of ad code does't not support by DFP.
19:36
Merbin Joe
Google adsense code converter
Google adsense provide two types of code type (Asynchronous and Synchronous), these codes are written inside of <script> and </script> code. In some place we can able to use this directly without converting correct format. It is perfect for converting any type of javascript code like (adsense, Chitika, Adbirte, jucyads, yllix or etc...). They only you can put it to XHTML entities for xml Blogger.In adsence copy the Synchronous Code Only
16:47
Merbin Joe
AngularJS Filter
AngularJS filter is used to added in directive and expressions the help of pipe symbol.Types of AngularJS Filters
lowercase - This is used to convert the string to lowercase.
uppercase - This is used to convert the string to uppercase.
filter - Filter is used to separate a subset of some items from the array
currency - Change the number to currency format
Lowercase
This will convert all the text to Lowercase Character.
<div ng-app="">
Type the Lowercase text : <input type="text" ng-model="value1"><br>
<br>
You Typed: {{value1}}
<br>
LowerCase :{{value1 | lowercase}}
</div>
Type the Lowercase text : <input type="text" ng-model="value1"><br>
<br>
You Typed: {{value1}}
<br>
LowerCase :{{value1 | lowercase}}
</div>
Uppercase
This will convert all the text to Uppercase Character.
<div ng-app="">
Type the UpperCase text : <input type="text" ng-model="value1"><br>
<br>
You Typed: {{value1}}
<br>
UpperCase Text is :{{value1 | uppercase}}
</div>
Type the UpperCase text : <input type="text" ng-model="value1"><br>
<br>
You Typed: {{value1}}
<br>
UpperCase Text is :{{value1 | uppercase}}
</div>
Filter
Example: Another Example Input Filter Example
-----
-----
<div ng-repeat="x in names | orderBy:'name'">
{{ x.name}}
</div>
-----
-----
-----
<div ng-repeat="x in names | orderBy:'name'">
{{ x.name}}
</div>
-----
-----
currency
Currency is used to put the $ symbol before the numberExample: Another Example
-----
-----
<div ng-app="">
Enter Cost: <input type="number" ng-model="cost">
<p>Total = {{ (cost) | currency }}</p>
</div>
-----
-----
-----
<div ng-app="">
Enter Cost: <input type="number" ng-model="cost">
<p>Total = {{ (cost) | currency }}</p>
</div>
-----
-----
Example Program:- (Editor)
Output:-
Advertisement
00:53
Merbin Joe
The following 3D button is fully created using css code, and four steps of animation it shown like very natural animated 3D button. You can able to change the "Download" name to your own words, no need to copy to your editor (notepad,notepad++,etc..). Just change the code and simply press "Submit Changes" button to see the difference.
23:42
Merbin Joe
Before you start the bootstrap you should know basic knowledge of following:
Bootstrap is the free collection tools for creating web applicatioons and web pages.
Bootstrap contain CSS and HTML design templates for html elements.
Bootstrap also having optional JavaScript file, for doing action.
Bootstrap is the opensource so everyone can modified and use freely.
Many examples available in GitHub website, you can download it and customize you want.
Mobile-first approach: Bootstrap contain separate style for mobiles from Bootstrap 3
Easy to get started: If have basic knowledge of HTML and CSS anyone can get started with Bootstrap
Responsive Web design: Bootstrap will automatically adjust the scree size to desktops,mobile phones and tablets.
Before adding bootstrap to your pages, you should include the following tags
"width=device-width" this will set the page to follow the screen-width.
"initial-scale=1" it will set the initial zoom level when the page is loaded first by browser.
Downloading Bootstrap from internet:-
you can download the full source from the www.getbootstrap.com website.
If you don't like to download bootstrap and host yourself then you can include directly from the following link.
Advantage of include the Bootstrap from CDN:-
If the user already visited the CDN included bootstrap, the next time the file will be loaded from cache, which leads to faster loading time.
HTML
(jQuery/JavaScript)
CSS
(jQuery/JavaScript)
CSS
Bootstrap is the free collection tools for creating web applicatioons and web pages.
Bootstrap contain CSS and HTML design templates for html elements.
Bootstrap also having optional JavaScript file, for doing action.
Bootstrap is the opensource so everyone can modified and use freely.
Many examples available in GitHub website, you can download it and customize you want.
Why need Bootstrap?
Browser support: Bootstrap support all popular browser like chrome,firefox,IE and etc...Mobile-first approach: Bootstrap contain separate style for mobiles from Bootstrap 3
Easy to get started: If have basic knowledge of HTML and CSS anyone can get started with Bootstrap
Responsive Web design: Bootstrap will automatically adjust the scree size to desktops,mobile phones and tablets.
Before adding bootstrap to your pages, you should include the following tags
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
-----------
-----------
-----------
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
-----------
-----------
-----------
"width=device-width" this will set the page to follow the screen-width.
"initial-scale=1" it will set the initial zoom level when the page is loaded first by browser.
Downloading Bootstrap from internet:-
you can download the full source from the www.getbootstrap.com website.
If you don't like to download bootstrap and host yourself then you can include directly from the following link.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Advantage of include the Bootstrap from CDN:-
If the user already visited the CDN included bootstrap, the next time the file will be loaded from cache, which leads to faster loading time.
23:14
Merbin Joe
Best jBox jQuery ToolTip
jBox jQuery plugin is used to show the style tool tips, the tool tips is given from the title attribute. This tool tips can display various position like (Right, Left, Top and Bottom) of the div or other HTML element.We should need to integrate the following two .js file, you can use the both link through the following direct link or download and integrate it with your program.
Tooltip below to the right
You can display the Tooltip below to the right using the following jQuery code.
$('.DemoTooltipBelow').jBox('Tooltip', {
position: {
x: 'right',
y: 'bottom'
}
});
---------
---------
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
position: {
x: 'right',
y: 'bottom'
}
});
---------
---------
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
Tooltip with the pointer moved to the right
You can display the Tooltip with the pointer moved to the right using the following jQuery code.
$('.DemoTooltipPointer').jBox('Tooltip', {
pointer: 'right:15' // The pointer is moved to the right with a 15 pixel offset
});
---------
---------
<span class="DemoTooltipPointer" title="My pointer is moved to the right">Pointer moved</span>
pointer: 'right:15' // The pointer is moved to the right with a 15 pixel offset
});
---------
---------
<span class="DemoTooltipPointer" title="My pointer is moved to the right">Pointer moved</span>
Tooltip at a different target
You can display the Tooltip at a different target using the following jQuery code.
$('.DemoTooltipTarget').jBox('Tooltip', {
target: jQuery('.DemoTooltipBelow')
});
---------
---------
<span class="DemoTooltipTarget" title="I'm over here">Different target</span>
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
target: jQuery('.DemoTooltipBelow')
});
---------
---------
<span class="DemoTooltipTarget" title="I'm over here">Different target</span>
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>
Tooltip with an offset
You can display the Tooltip with an offset using the following jQuery code.
$('.DemoTooltipOffset').jBox('Tooltip', {
offset: {
x: 30,
y: -5
}
});
---------
---------
<span class="DemoTooltipOffset" title="I have an offset">Offset</span>
offset: {
x: 30,
y: -5
}
});
---------
---------
<span class="DemoTooltipOffset" title="I have an offset">Offset</span>
Tooltip to the left
You can display the Tooltip to the left using the following jQuery code.
$('.DemoTooltipLeft').jBox('Tooltip', {
position: {
x: 'left',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipLeft" title="To the left">To the left</span>
position: {
x: 'left',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipLeft" title="To the left">To the left</span>
Tooltip to the right
You can display the Tooltip to the right using the following jQuery code.
$('.DemoTooltipRight').jBox('Tooltip', {
position: {
x: 'right',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipRight" title="To the right">To the right</span>
position: {
x: 'right',
y: 'center'
},
outside: 'x' // Horizontal Tooltips need to change their outside position
});
---------
---------
<span class="DemoTooltipRight" title="To the right">To the right</span>
Mouse following tooltips have the type "Mouse" instead of "Tooltip"
You can display the Mouse following tooltips have the type "Mouse" instead of "Tooltip" using the following jQuery code.
$('.DemoTooltipMouse').jBox('Mouse', {
content: 'I will follow you'
});
---------
---------
<span class="DemoTooltipMouse">Following your mouse pointer</span>
content: 'I will follow you'
});
---------
---------
<span class="DemoTooltipMouse">Following your mouse pointer</span>
Example Program:- (Editor)
Output:-
Advertisement
22:50
Merbin Joe
Disable skype from autostart
If we install the Skype on our system, it will start automatically start when on the system, and it will place on the task bar automatically without user permission. We need to close it every time Right Click=> Quit Skype. It is very bore to do.We can disable it on windows start up, if we do this it won't start on windows start up but you can use Skype to when you want to call or chat time.
Subscribe to:
Posts (Atom)
Labels
- javascript
- JQuery
- javascript Beginner
- materializecss
- HTML
- Tips
- Animation Program
- css
- AngularJS
- blogger
- Application
- Game
- RGraph
- SQL
- Php
- .net
- Other
- Tools
- Article
- Android
- Button
- Software
- puzzle
- asp.net
- Theme
- telerik
- Flash
- Cordova
- Website
- c#
- Java
- College
- Hardware
- Maths
- Physicsjs
- Chrome Extension
- DOS
- Naturals
- SQLite
- xml
- Batch
- CarRace
- Image
- MVC
- Networking
- Typing
- WebView
- Xara 3D