Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Change and Use Fonts in Blogger

7:27 PM Unknown

1. Removing The Existing Font

  • Go To Blogger >>  Template >> Backup Your Template
  • Click Edit HTML and Search For The Following Code
fonts.googleapis.com
  • Mostly, This will be available below <head> of the templates.
  • After finding the above code, you'll see it in the html <link> tag like the image below. 
  • Just remove that html link tagline.
  • Save Template.

2. Installing New Font in Your Blog

  • Go to Google Fonts and find the best font that you want to use.
  • After choosing font, click on "Quick use" button, shown in the image below.
  • Tick mark all the styles
  • Scroll down and copy the html link tag code.
  • Go To Blogger >> Template >> Edit HTML
  • Search For <head>
  • Paste The Code Below It and Save Template.
  • If it gives error, try adding / before > at the end, after that ending will be like />.
  • Okay, now font is installed and lets call it in our template.
  • Come back to Google font page and scroll down more.
  • There, you'll see the block like below.
  • Copy that code and Go To Blogger >> Edit HTML
  • Search for body { or body{
  • There you'll see font-famiy:bla-bla-bla;
  • Remove that font-family property till semicolon and paste the new one there.
  • Save Template.
  • If the font is not working properly now than add the following code above ]]></b:skin>
body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}
  •  Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
  • Save Template 
  • You're Done!
  • Welcome New font!
Read More

Horizontal Menu and Navigation Bar

5:11 PM Unknown



Horizontal Link Lists

1. Apply to all link lists and label lists

If you want all the link lists and label lists in your sidebar to be displayed horizontally, go to Template -> Edit HTML and scroll to where you see this and insert the code (shown in red):-

.sidebar ul {
display:inline;
}

.sidebar li{
display:inline;
}


In some templates, you may insert the code here:-

.sidebar ul li {
display:inline;
}



2. Apply to one specific list

Instead of having a style that applies to all the lists, you may want to have only one of the link lists appear horizontally. First, you need to create that list by going to Template -> Page Elements -> Add a Page Element. Choose “Link List”, add your items and save.

Now is the tricky part. You would have to locate that particular segment of the code where this list appears and find out the widget ID for that list.

For discussion purposes, let us assume that we want the link list titled “My Blogs” in our left sidebar to be displayed horizontally. We go to Template -> Edit HTML, and check the box that says “Expand Widget Templates.”

Next, we searched (Ctrl-F) for “My Blogs” and found this section:-

<b:widget id='LinkList2' locked='false' title='My Blogs' type='LinkList'>


From here, we know that this link list has been assigned an ID LinkList2. To define a style, we went to the /* Sidebar Content */ portion of our template and included this code (Note: the code can be inserted into any part of the <head> section but for ease of reference we have inserted it here):-

/* Sidebar Content */

#LinkList2 li{
display:inline;
}


This is what we got:-



Only this list is displayed horizontally. The other lists are not affected. If you want this style for the labels, do the same. Locate the widget ID which is likely to be id='Label1' or id='Label2' and then insert the code:-

/* Sidebar Content */

#Label1 li{
display:inline;
}


Text Link Menu Navigation Bars


1. Simple Navigation Bar

We want a row of text links pointing users to certain important parts of the Blog. The links blend into the Header and will look like this:-

Horizontal Menu Navigation Bar

In Template ->Edit HTML, insert this style definition under /* Header */:-

/* Header */

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}


Other than the display:inline style, the other variables can be changed. You can have a larger or smaller font. The margin and padding set the space in between the words and can be changed. If you want a border around the word, set the border value to at least 1px.

Scroll further down the template and check if you see this:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>


If the number of maxwidgets is set to “1”, change it to “3”. If the showaddelement is “no”, change it to “yes”.

Save the template. We shall now create the list. Go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The link list code you can add is as follows:-

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page">Home</a></li>
<li><a href="URL of Music page">Music</a></li>
<li><a href="URL of Books page">Books</a></li>
<li><a href="URL of Links page">Hot Links</a></li>
<li><a href="URL of Profile page">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>


Insert the relevant words and URL links into the above example. If you want to link to a label, click the label in your sidebar to obtain the URL for insertion into the code (shown in blue). The URL should look like this:-

<li><a href="http://tips-for-new-bloggers.blogspot.com/search/label/Three%20Columns">Three Column Templates</a></li>


This link widget can be moved about. Try placing it below the Header and then above the Blog posts to see the difference in the layout. Preview the template and save it if you like the new horizontal navigation bar position.

2. Adding Link and Hover Effects

We have now a simple horizontal navigation list. Let us make it visually attractive and distinguish these links from the other links in your Blog. This is done by introducing the hover and rollover effects. For example, in addition to the above code we added into the template, we can have these as well:-

/* Header */

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#newnavbar li a{
color:#dfffed;
}

#newnavbar li a:visited {
color: #57E964;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

The resulting navigation bar will be this:-

Horizontal Menu Navigation Bar

3. Menu Bar below Header


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>


Change the showaddelement from “no” to “yes”. In Template -> Page Elements, you should be able to see an additional slot between the Header and the Blog posts where you can insert Page Elements.

Image Link Menu Navigation Bars

1. Simple Navigation Bar


The modification to the template is similar to that of text links. In Template ->Edit HTML, insert this style definition:-

/* Header */

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}


The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.

To add the horizontal row of navigation image links, go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The image link list code you can add is as follows:-

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Links page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>


The portions of the code in blue are the addresses where you want the users to be directed to. The parts in red are where your images are hosted on an image server.

This is how the neat horizontal picture navigation bar can look:-

Horizontal Menu Navigation Bar

2. Adding Link and Hover Effects

We can throw in some effects into the picture links. Just to give you an example, we added this hover links code in addition to the above:-

/* Header */

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#newnavbar li a img{
height:30px;
width:30px;
}

#newnavbar li a:hover img{
height:40px;
width:40px;
background: #ffff66;
}

#newnavbar li a:visited img{
height:40px;
width:40px;
background: #6D7B8D;
}


What we had done was to fix the navigation bar image link size at 30px by 30px. There is no border around the image. When the mouse cursor hovers over the image link, the image is enlarged to 40px by 40px with a yellow background. Any visited links will have a grey background behind the image.

Horizontal Menu Navigation Bar

While this looks interesting to have, do note that any change in image size also affects the surrounding text alignment. You can reverse it. Change the hover and image sizes to smaller values so that the images 'shrink' when the mouse hovers over them.
Read More

How I Discover Blogger Blog Delete Function?

12:11 AM Unknown
Once you read this all completely, click on Delete This Blog orange color button.
delete blogger blogs
  • Now you will get back to Blogger dashboard automatically and you can see deleted blog in deleted blogs section from left sidebar.

The good thing is that as I mentioned earlier that you can reinstate your blog anytime in the period of 90 days by just one click on Undelete button.

Now your blog has been removed and nobody can visit it even not you until you undelete it. The visitors will get a straight message that this blog has been removed and the address is also not available for new blogs.

Your blog has been deleted and is not accessible for anyone but still your blog will remain in search engines on its search terms if it is indexed. Even search engines like Google, Yahoo,etc. also save your blog pages temporarily as cache to reduce their server loads and speed issues,etc. So, in case you have stuck in some kind of serious or legal issues or you have something personal stuff on blog and people can access it via Google Cache. Then you must need to follow some necessary steps to remove your site from serp and its cache to.
Read More

How To Change HyperLink Color In Blogger

12:10 AM Unknown
t is much easy to change hyperlink color in blogger default templates because in these templates only a single color scheme is used for all links. To make changes in them go to Blogger > Template > Customise > Advance > Add CSS.

Now after that paste the following piece of code in Add CSS box.

a:link { color: #ff0000 !important; }
a:visited { color: #0000ff !important; }
a:hover { color: #38761d !important; }
a:active { color: #ff9900 !important; }
And then tap on Apply to blog button to save changes.

In case you are not familiar with html color codes or facing any difficulties then you can simply replace color code (for example #ff0000) with the name of desired color. Checkout following piece of code to get an idea of what I'm saying,
a:link { color: red !important; }
a:visited { color: blue !important; }
a:hover { color: green !important; }
a:active { color: orange !important; }


How to Change Color of Specific HyperLink


.post-body a {
color: red !important;
}

To add hover effect you need add another line,
.post-body a:hover {
color: green !important;
}
You can get the exact Class or ID of that specific location in Chrome by doing right click. Look at below screenshot for further detail.

change link color blogger blogspot

In the same way try to find the ID or Class of footer section, sidebars, specific widgets, etc. But one thing you should need to remember, use '.' to mention class and '#' symbol to specify ID.



For your ease here are some common Classes and ID's most commonly used in Blogger / Blogspot default templates.

.post-body (to change color of all links inside post body)
.post-title (to change post title color)
.sidebar (to change all links color within sidebar)
.footer-outer (to change all footer links color)
Read More

How To Change Your Display Name in Blogger

11:37 PM Mr. Alex


There is no rocket science behind changing the display name because Google provides a built-in option for changing the display names. Therefore, in order to change your display name or author name form Blogger Platform just login to your Blogger Account. 
Now on the Blogger Dashboard on the Top right corner of the screen, there will be an option just Select Blogger profile >> Edit Profile. We have attached a screenshot below so everyone can easily understand what we are trying to say. 
Now From here you can edit your profile as much as you like. Under the “Identity” category there will be three options such that, Username, Email Address, and Display Name. Out of these three only two are editable such that, “Display Name” and “Email Address”.
Now it is up to a person what he wants to change, either edit the “Display Name” or the email address. After customizing your profile, scroll down to bottom of the page and just save the profile by pressing “Save Profile” button. 
Read More

Warning: Don’t Copy!

11:26 PM Mr. Alex




(1) The purpose and character of the use, including whether such use is of a commercial nature or is for nonprofit educational purposes.
In other words, are you trying to earn money or enhance your own reputation by quoting this text? That’s a danger sign! Also, did you make it clear that you are NOT the original author?
(2) The nature of the copyrighted work.
Creative work is more strongly protected than just plain information. If you are quoting a song or poem, be extra careful!
(3) The amount and substantiality of the portion used in relation to the copyrighted work as a whole.
Use a tiny amount in comparison with the original, and don’t use the most important lines or most significant section. (This was the problem in that court case I mentioned.)
(4) The effect of the use upon the potential market for or value of the copyrighted work.
This is the most important principle. Your quotation must never steal market value from the original author. Be generous with links, and make sure your readers know where they can find or buy the original song or poem.
Read More

Standard ASCII set, HTML

11:16 PM Mr. Alex



ASCII
HTML HTML
Dec Hex Symbol Number Name
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47		 20
21
22
23
24
25
26
27
28
29
2A
2B
2C
2D
2E
2F
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/		 &#32;
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#39;
&#40;
&#41;
&#42;
&#43;
&#44;
&#45;
&#46;
&#47;

&quot;



&amp;








 space
exclamation point
double quotes
number sign
dollar sign
percent sign
ampersand
single quote
opening parenthesis
closing parenthesis
asterisk
plus sign
comma
minus sign - hyphen
period
slash

ASCII
HTML HTML
Dec Hex Symbol Number Name
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63		 30
31
32
33
34
35
36
37
38
39
3A
3B
3C
3D
3E
3F		 0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?		 &#48;
&#49;
&#50;
&#51;
&#52;
&#53;
&#54;
&#55;
&#56;
&#57;
&#58;
&#59;
&#60;
&#61;
&#62;
&#63;











&lt;

&gt;		 zero
one
two
three
four
five
six
seven
eight
nine
colon
semicolon
less than sign
equal sign
greater than sign
question mark

ASCII
HTML HTML
Dec Hex Symbol Number Name
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79		 40
41
42
43
44
45
46
47
48
49
4A
4B
4C
4D
4E
4F		 @
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O		 &#64;
&#65;
&#66;
&#67;
&#68;
&#69;
&#70;
&#71;
&#72;
&#73;
&#74;
&#75;
&#76;
&#77;
&#78;
&#79;














at symbol

ASCII
HTML HTML
Dec Hex Symbol Number Name
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95		 50
51
52
53
54
55
56
57
58
59
5A
5B
5C
5D
5E
5F		 P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_		 &#80;
&#81;
&#82;
&#83;
&#84;
&#85;
&#86;
&#87;
&#88;
&#89;
&#90;
&#91;
&#92;
&#93;
&#94;
&#95;

























opening bracket
backslash
closing bracket
caret - circumflex
underscore

ASCII
HTML HTML
Dec Hex Symbol Number Name
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111		 60
61
62
63
64
65
66
67
68
69
6A
6B
6C
6D
6E
6F		 `
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o		 &#96;
&#97;
&#98;
&#99;
&#100;
&#101;
&#102;
&#103;
&#104;
&#105;
&#106;
&#107;
&#108;
&#109;
&#110;
&#111;














grave accent

ASCII
HTML HTML
Dec Hex Symbol Number Name
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127		 70
71
72
73
74
75
76
77
78
79
7A
7B
7C
7D
7E
7F		 p
q
r
s
t
u
v
w
x
y
z
{
|
}
~		 &#112;
&#113;
&#114;
&#115;
&#116;
&#117;
&#118;
&#119;
&#120;
&#121;
&#122;
&#123;
&#124;
&#125;
&#126;

























opening brace
vertical bar
closing brace
equivalency sign - tilde
(not defined in HTML 4 standard)

ASCII
HTML HTML
Dec Hex Symbol Number Name
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143		 80
81
82
83
84
85
86
87
88
89
8A
8B
8C
8D
8E
8F












































(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)

ASCII
HTML HTML
Dec Hex Symbol Number Name
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159		 90
91
92
93
94
95
96
97
98
99
9A
9B
9C
9D
9E
9F












































(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)

ASCII
HTML HTML
Dec Hex Symbol Number Name
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175		 A0
A1
A2
A3
A4
A5
A6
A7
A8
A9
AA
AB
AC
AD
AE
AF
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯		 &#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;		 &nbsp;
&iexcl;
&cent;
&pound;
&curren;
&yen;
&brvbar;
&sect;
&uml;
&copy;
&ordf;
&laquo;
&not;
&shy;
&reg;
&macr;		 non-breaking space
inverted exclamation mark
cent sign
pound sign
currency sign
yen sign
broken vertical bar
section sign
spacing diaeresis - umlaut
copyright sign
feminine ordinal indicator
left double angle quotes
not sign
soft hyphen
registered trade mark sign
spacing macron - overline

ASCII
HTML HTML
Dec Hex Symbol Number Name
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191		 B0
B1
B2
B3
B4
B5
B6
B7
B8
B9
BA
BB
BC
BD
BE
BF		 °
±
²
³
´
µ

·
¸
¹
º
»
¼
½
¾
¿		 &#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;		 &deg;
&plusmn;
&sup2;
&sup3;
&acute;
&micro;
&para;
&middot;
&cedil;
&sup1;
&ordm;
&raquo;
&frac14;
&frac12;
&frac34;
&iquest;		 degree sign
plus-or-minus sign
superscript two - squared
superscript three - cubed
acute accent - spacing acute
micro sign
pilcrow sign - paragraph sign
middle dot - Georgian comma
spacing cedilla
superscript one
masculine ordinal indicator
right double angle quotes
fraction one quarter
fraction one half
fraction three quarters
inverted question mark

ASCII
HTML HTML
Dec Hex Symbol Number Name
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207		 C0
C1
C2
C3
C4
C5
C6
C7
C8
C9
CA
CB
CC
CD
CE
CF		 À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï		 &#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;		 &Agrave;
&Aacute;
&Acirc;
&Atilde;
&Auml;
&Aring;
&AElig;
&Ccedil;
&Egrave;
&Eacute;
&Ecirc;
&Euml;
&Igrave;
&Iacute;
&Icirc;
&Iuml;		 latin capital letter A with grave
latin capital letter A with acute
latin capital letter A with circumflex
latin capital letter A with tilde
latin capital letter A with diaeresis
latin capital letter A with ring above
latin capital letter AE
latin capital letter C with cedilla
latin capital letter E with grave
latin capital letter E with acute
latin capital letter E with circumflex
latin capital letter E with diaeresis
latin capital letter I with grave
latin capital letter I with acute
latin capital letter I with circumflex
latin capital letter I with diaeresis

ASCII
HTML HTML
Dec Hex Symbol Number Name
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223		 D0
D1
D2
D3
D4
D5
D6
D7
D8
D9
DA
DB
DC
DD
DE
DF		 Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß		 &#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;		 &ETH;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Ouml;
&times;
&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;		 latin capital letter ETH
latin capital letter N with tilde
latin capital letter O with grave
latin capital letter O with acute
latin capital letter O with circumflex
latin capital letter O with tilde
latin capital letter O with diaeresis
multiplication sign
latin capital letter O with slash
latin capital letter U with grave
latin capital letter U with acute
latin capital letter U with circumflex
latin capital letter U with diaeresis
latin capital letter Y with acute
latin capital letter THORN
latin small letter sharp s - ess-zed

ASCII
HTML HTML
Dec Hex Symbol Number Name
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239		 E0
E1
E2
E3
E4
E5
E6
E7
E8
E9
EA
EB
EC
ED
EE
EF		 à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï		 &#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;		 &agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;
&ecirc;
&euml;
&igrave;
&iacute;
&icirc;
&iuml;		 latin small letter a with grave
latin small letter a with acute
latin small letter a with circumflex
latin small letter a with tilde
latin small letter a with diaeresis
latin small letter a with ring above
latin small letter ae
latin small letter c with cedilla
latin small letter e with grave
latin small letter e with acute
latin small letter e with circumflex
latin small letter e with diaeresis
latin small letter i with grave
latin small letter i with acute
latin small letter i with circumflex
latin small letter i with diaeresis

ASCII
HTML HTML
Dec Hex Symbol Number Name
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255		 F0
F1
F2
F3
F4
F5
F6
F7
F8
F9
FA
FB
FC
FD
FE
FF		 ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ		 &#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;		 &eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;
&divide;
&oslash;
&ugrave;
&uacute;
&ucirc;
&uuml;
&yacute;
&thorn;
&yuml;		 latin small letter eth
latin small letter n with tilde
latin small letter o with grave
latin small letter o with acute
latin small letter o with circumflex
latin small letter o with tilde
latin small letter o with diaeresis
division sign
latin small letter o with slash
latin small letter u with grave
latin small letter u with acute
latin small letter u with circumflex
latin small letter u with diaeresis
latin small letter y with acute
latin small letter thorn
latin small letter y with diaeresis

 HTML 4.01, ISO 10646, ISO 8879, Latin extended A and B,
 Browser support: Internet Explorer > 4, Netscape > 4



HTML HTML
Dec Hex Symbol Number Name
338
339
352
353
376
402		 152
153
160
161
178
192		 Œ
œ
Š
š
Ÿ
ƒ		 &#338;
&#339;
&#352;
&#353;
&#376;
&#402;




latin capital letter OE
latin small letter oe
latin capital letter S with caron
latin small letter s with caron
latin capital letter Y with diaeresis
latin small f with hook - function



HTML HTML
Dec Hex Symbol Number Name
8211
8212
8216
8217
8218
8220
8221
8222
8224
8225
8226
8230
8240
8364
8482		 2013
2014
2018
2019
201A
201C
201D
201E
2020
2021
2022
2026
2030
20AC
2122		 –
—
‘
’
‚
“
”
„
†
‡
•
…
‰
€
™		 &#8211;
&#8212;
&#8216;
&#8217;
&#8218;
&#8220;
&#8221;
&#8222;
&#8224;
&#8225;
&#8226;
&#8230;
&#8240;
&#8364;
&#8482;












&euro;		 en dash
em dash
left single quotation mark
right single quotation mark
single low-9 quotation mark
left double quotation mark
right double quotation mark
double low-9 quotation mark
dagger
double dagger
bullet
horizontal ellipsis
per thousand sign
euro sign
trade mark sign
Read More

How to control Post Label :)

11:56 PM Mr. Alex
In a recent post i showed you how to have your blogs labels displayed in a drop down menu.A comment from APF in that post remarked "I'd prefer to see a drop-down that honors the limit (in my case, 1) number of posts per screen I've set for blogger in general".What APF is referring to here is he has set his blog to display one post per page, so on the home page of his blog there will be only one post.Then the Older Posts, Newer Posts links are there for people to navigate through other posts.You can set the number of posts per page on your blog in your settings under formatting.This works fine on the home page and with the older, newer links but when someone clicks a label the limit is not applied, in this post i will show you how to fix that.

So APF wants only 1 post to be shown when someone selects a label, by default all posts will be shown.This is a bit of a mess, you can end up with 20 full posts loading or even crashing if you have large posts with no jump break.On Spice Up Your Blog i have 12 posts per page and i want the same on my labels page here is how it's done.



Take a look at the default link for the label Gadgets here on SUYB, if you click it you will get a big list of posts with that label  :

http://www.spiceupyourblog.com/search/label/Gadgets

Now in this link i have set it for only 2 posts to be shown with the older, newer links to see more :

http://www.spiceupyourblog.com/search/label/Gadgets?max-results=2

The actual number i have applied is 12, the same as the home page  which you will see every time you select a label.So lets see how you can set a limit to any number of posts you choose.


Set Fixed Amount Of Posts Displayed On Labels Pages


Step 1. In your Blogger Dashboard click Design > Edit Html > Tick the Expand Widget Templates box.

Design Edit Html Widget Templates

Step 2. Find the following code in your blogs html - it will be in your template a few times :
(Click Ctrl and F for a search bar to help find the code - More Info)

expr:href='data:label.url'

Step 3. Replace them all with the following code :

expr:href='data:label.url + "?max-results=6"'

Important - Highlighted is the number of posts displayed, it's set as 6.Replace the number 6 with the number of posts you want displayed.

Linking Directly To Labels


So that will set a number of posts to be displayed in the links automatically generated.By automatically generated i mean labels in a labels gadget in your sidebar or above/below your posts.What if you are adding manually adding labels links to a post, menu or elsewhere ?

Simply add ?max-results=6 to the end of the URL, changing 6 to the number you want.

So this :

http://www.yourawesomeblog.com/search/label/awesome

Becomes This

http://www.yourawesomeblog.com/search/label/awesome?max-results=6

That's it your labels pages now have a fixed number of posts displayed.
Read More

How to change your blog icon in Blogger

11:54 PM Mr. Alex
 
How to change your blog icon in Blogger
 by Toshi (foreignprophecies.blogspot.com)It's simple, just follow these simple steps below!First, choose a
.png
file (of any size) that you deem nice enough to put as a blog icon.Then, upload the
.png
tohttp://html-kit.com/favicon/-/selpic-2/and download the resulting file in
.ico
 format.After downloading the
.ico
file to your computer, upload it tohttp://picpanda.com/orhttp://imageboo.com/, and obtain a direct link for the file after it is uploaded into the website's storage.Log into your Blogger account and select: Dashboard>Layout>Edit HTML.You will see a window with all the HTML mumble-jumbles you do not understand. Fret not, you only needto find the code right at the top, that should look like this:

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
 After the line of code:
<title><data:blog.pageTitle/></title>
 on the next line, type:
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
 Make sure not to simply copy this exactly, but actually put your icon’s URL in, instead of the words ‘URLof your icon’.
By Alex
Read More

Change the Width of Your Blog - Make the Blog Wider

6:05 PM Mr. Alex
This can be quite important feature, if you care about it....Changing the width of your Blogger Blog will gain you some extra space (to place more gadgets, pics, ads...), or it will make your Post section wider (meaning: larger pictures, wider paragraphs), you can also add a third column, if you want.....


CURRENT SITUATION (What's out there?)
There's a thousands of templates out there...you have Blogger default templates + Dozens of other sites that provide a free Blogger Templates...
All right, you knew that....but here's another thing you should consider:
There are 2 kinds of templates (layouts) you can use:

► FLUID width or STRETCH templates - template that resizes to fit any computer monitor. It stretches corresponding to the monitor resolution.
Advantage is obvious, and a big disadvantage is DESIGN. It's quite restraining when it comes to this. Of course, it depends what you like. For a professional looking template, it's great....But for a personal one, it can be a bit dull.....

► FIXED WIDTH templates - they have a fixed width, regardless of monitor resolution....They are ideal for designing and customizing, but, the width part can sometimes be a real pain in the....:]
...Why? Because:
- people have different Monitor (screen) sizes,
- and they use different resolutions on them...
...the final result is: Blog appears different in each combination!

Read more about Monitor sizes and resolution, and how to change the resolution...

◄Imagine lying down in the grass with your nose pressed deep into the thatch. Your field of vision would not be very large, and all you would see are a few big blades of grass, some grains of dirt, and maybe an ant or two. This is a 14-inch 640 x 480 monitor. Now, get up on your hands and knees, and your field of vision will improve considerably: you'll see a lot more grass. This is a 15-inch 800 x 640 monitor. For a 1280 x 1024 perspective (on a 19-inch monitor), stand up and look at the ground. Some monitors can handle higher resolutions such as 1600 x 1200 or even 1920 x 1440—somewhat akin to a view from up in a tree...►

SHOULD I CHANGE THE WIDTH OF MY BLOG?
Well, it depends. If you already have a wide template, or you're using Stretch (fluid) layout, there's no need of doing this...

Resolution friendly means that your Blog doesn't exceed the width of 750px. Why 750? Because statistics tells us that lots of people are still using a 800x600 px resolution. And if you make your Blog wider than 750, these group of people will have to scroll left-right on your page....which is quite irritating. And you can lose those visitors....

But, there's also a saying, and it goes like this:
Lie ► A Bigger Lie ► Statistics.

If you surf a bit, and pay attention to web pages width, you'll notice that lots of web sites (even popular ones), are way over the 750 px!
So, it's really up to you....

LET'S CHANGE THAT WIDTH ALREADY.....
The only problem here will be the identification of the CSS style in your template (Layout). This is the part in the code section that defines styling, including width of elements.
There's so many different templates around, and it's a different story for each one...

But don't worry....there's a pattern. A backbone. A Layout constitution. A certain way of organizing (naming) elements. It's basically the same thing, under the different name.....
For this example, we'll take a default Blogger template ► Minima. Let's do it.
1. First thing is identification. Go to: LAYOUT ► EDIT HTML, and find the parts that defines the width of the Main section, Post sections, Sidebar, Header Section and Footer.
For Minima, we have this situation:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
..................................

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
..................................

#main-wrapper {
width: 410px;
float: $startSide;
..................................

#sidebar-wrapper {
width: 220px; float: $endSide;
..................................

#footer {
width:660px;
clear:both;
...in Minima (and lots of other templates) elements are categorized by these names:
► header-wrapper is Header
► outer-wrapper is our Main section, other elements are wrapped inside of it..
► main-wrapper represents Post Section
► sidebar-wrapper stands for Sidebar
► footer is Footer :]

...this means that our header-wrapper is 660px wide, outer-wrapper width (Post section + Sidebar+ margins) is also 660px, and footer 660 px.

2. Let's change the width:
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
......................................................................
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
.......................................................................

#main-wrapper {
width: 500px;
float: $startSide;
........................................................................

#sidebar-wrapper {
width: 220px;
float: $endSide;
........................................................................

#footer {
width:750px;
clear:both;
...I've decided to make my Post section (main-wrapper) wider. In order to do this, I have to increase my outer-wrapper. Now, here's the RULE:
◄ If you want to increase the width of your Posts section or Sidebar, you HAVE to increase your Main section width (outer-wrapper) for the same value! ►
◄ 500px + 220px + margins = 750px ►

In this example, I've increased my Post section (main-wrapper) for 90px, so I've changed 410px into 500px. I did the same for the Main section (outer-wrapper), changed 660px into 750px....I've left the Sidebar the same width, 220px.
I've also changed the width for my header-wrapper and footer....into 750px. Note that this is not necessary, but better do it...for the sake of symmetry in your Layout...

That's about it. Remember, when you're changing the width of your (custom) Blogger template, certain elements will be (can be) under different name....Do not let it confuse you! You know how the elements are organized inside of it....and in the end, its a 5 minutes job...some simple mathematics + patience.....

If you need any help, ask.....
Read More

how to change adjust width blogger

7:08 AM Mr. Alex
his tutorial is dedicated to my blogger fellows who don't know how to change the width of blog in Custom
blogger template. You can easily learn about how to change the width of different sections in Blogger. This tutorial is for those blogger who are stick with custom blogger template. If you want to adjust the width of blogger having Default blogger template then Must see this tutorial. Now increase or decrease the width of sidebar for new and awesome blogger widgets to get fit in it.
If you are using default blogger template then go for this post

You will Learn: 
How to change the width of Header wrapper
How to change the width of Main Wrapper
How to change the width of outer wrapper
How to change the width of sidebar
How to change the width of footer
How to change the width of Post section

Lets Begin:

The main subject of this post is related with the word "width" so we have to only mess with the width CSS property for the all codes given below

Note1:  These all "width" property are related with each other and all should be in specific ratio to each other.. For example
If the width of outer wrapper is 800px and the width of main-wrapper and sidebar-wrapper are 550px and  300px respectively then (If you know Mathematics then The below explanation will be easy) By the way don't worry the step below are simple :)



  • Main-wrapper (550px) + Sidebar- Wrapper (300px) =  850px  which is greater then Outer wrapper (800px)

In the above case the sidebar may be pushed below by the main wrapper or they may overlap each other.

Conclusion:

  • Mean the the width of Main-wrapper (550px) + Sidebar- Wrapper should be less then Outer wrapper


Example:
How to Adjust the width in blogger
#header-wrapper {
width:770px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
--------------
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
}
--------------
#main-wrapper {
width: 550px;
}
---------------
#sidebar-wrapper {
width: 240px;
}
---------------
#footer {
width:770px;
{

How to change the width of Outer wrapper 

Outer wrapper hold the whole blog.

#outer-wrapper {
width: 650px;margin:0 auto;
padding:10px;
}

How to change the width of Header wrapper 

Header wrappers hold your header, Picture or logo and title etc.
#header-wrapper {
width:640px;margin:0 auto 10px;
border:1px solid $bordercolor;
} 
 If the outer wrapper is 800px or 700px then the header wrapper should be less then outer wrapper
e.g:
if Outer wrapper is 800px
then the header wrapper should be 780px

 Changing the width of Main Wrapper

Main-wrapper exist of post area.

#main-wrapper {
width:420px;}

 Changing the width of Sidebar Wrapper


Sidebar wrapper exist of Widget, ads etc.

If the width of  the outer-wrapper is 800px
and the width of main-wrapper is 550px
then the width of the sidebar should be 240px;

because if the width of the main wrapper and sidebar wrapper becomes greater then 800px then the main wrapper will push the side bare downward

#sidebar-wrapper {
width: 210px;}

adjust the width of sidebar by changing the value of 210px;

 Changing the width of  footer

We recommend you to keep the width of footer and header the same. Further your choice.

#footer {
width:640px;
}

 Changing the width of  your post

Find the code below in template editor

.post {
or
#post {

.post {
background: transparent;
float: left;
width: 510px;font-family: 'Arimo', sans-serif;
}
and adjust its width.
Hope it solved your problem. And if you have any confusion then Please comment below to let me help you.
Read More
Subscribe to: Posts (Atom)

Popular Posts