If you are using default Blogspot templates ,you can use Template Designer to set special fonts for header and text .But this function is not available if you are using a custom template . So how can we embed special fonts to blog ?
As you may know ,Template Designer in Blogspot use Google font for applying special fonts to blog .In this post ,I will show you how to use Google Font for styling text in blog without Template Designer ,just need some lines of code .
You can see demo here ( my template Simplex Newspro )
2,When move your mouse over the font ,you will see the text "Click here to embed...." .Click on this text .A new page appear . Click on Use this font tab
3,You will see two lines :
The first line is something like this :
<link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'>
xxxxx is the font name . Copy this line and paste right before <b:skin><
After that ,add the font-family attribute to element I want to apply new font in CSS section
That's all .Save template and new font will be appeared .
In this post ,I just want to show you how to use Google font to embed new fonts to blog . It's very easy if you are familliar with CSS ,work with CSS or customize templates before . If you are a newbie and don't know where to insert font-family attributes to applied new font for an element,you can make a comment . I can help if possible .
As you may know ,Template Designer in Blogspot use Google font for applying special fonts to blog .In this post ,I will show you how to use Google Font for styling text in blog without Template Designer ,just need some lines of code .
You can see demo here ( my template Simplex Newspro )
Here are steps :
1,Go to this site ,and select the font you like .2,When move your mouse over the font ,you will see the text "Click here to embed...." .Click on this text .A new page appear . Click on Use this font tab
3,You will see two lines :
The first line is something like this :
<link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'>
xxxxx is the font name . Copy this line and paste right before <b:skin><
In comments of my previous post "Using Jquery to make an one-time subscription pop-up" ,YellOblog said that he want the pop-up appear after an amount of time and the pop-up is always at the center of viewport .Thanks YellOblog for the suggestion . Here is the complete code for your request :
Live Demo
To make a Subscription Pop-up ,you can read my post "Using Jquery to make an one-time subscription pop-up" and follow steps from 1 to 3 .
For the step 4 - Jquery code ,replace the code in the post "Using Jquery to make an one-time subscription pop-up"
with this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$("#popupContact").css({
"position": "absolute",
"top": toppos,
"left": leftpos
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//load popup
setTimeout("loadPopup()",5000);
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
pay attention to this line setTimeout("loadPopup()",5000);
5000 is the delay time in millisecond . You can set another value if you want .
That's all . I hope this update can fill your requests and make the subscription pop-up more profesional. You can check it out yourself and see the result .
Live Demo
To make a Subscription Pop-up ,you can read my post "Using Jquery to make an one-time subscription pop-up" and follow steps from 1 to 3 .
For the step 4 - Jquery code ,replace the code in the post "Using Jquery to make an one-time subscription pop-up"
with this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$("#popupContact").css({
"position": "absolute",
"top": toppos,
"left": leftpos
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//load popup
setTimeout("loadPopup()",5000);
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
pay attention to this line setTimeout("loadPopup()",5000);
5000 is the delay time in millisecond . You can set another value if you want .
That's all . I hope this update can fill your requests and make the subscription pop-up more profesional. You can check it out yourself and see the result .
Here is the renewed version of my template SimplexNewsportal . It's a good template for magazine and newsportal . I tried my best to make it easier to install and use .
There are two file for this template ,one with Disqus comment system and the other not .I added images folder to template package ,so if you want ,you can host images yourself
There are two file for this template ,one with Disqus comment system and the other not .I added images folder to template package ,so if you want ,you can host images yourself
In my blog ,DJ Remix Town asked me for how to auto applied Lightbox effect to all images uploaded ,do not need to edit HTML and add rel="lightbox" manually. And now I have the answer for this question :
The magic is on the second step ,find and replace this code
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>
with this
<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>
The difference between them is this line $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
This line mean Lightbox effect will be applied to all <a ...> tag which has an <img> tag inside ,and the href attribute of a tag is a link to image file (with the extension : gif,bmp,jpeg,png,jpg)
From now ,you can upload and insert images to your post using uploader in post editor window and don't care for the rest . Lightbox effect will be applied to all images .
How to do this ?
First ,you need to read this post and follow all my instruction for install jquery lightbox to blog .The magic is on the second step ,find and replace this code
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>
with this
<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>
The difference between them is this line $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
This line mean Lightbox effect will be applied to all <a ...> tag which has an <img> tag inside ,and the href attribute of a tag is a link to image file (with the extension : gif,bmp,jpeg,png,jpg)
From now ,you can upload and insert images to your post using uploader in post editor window and don't care for the rest . Lightbox effect will be applied to all images .
