GIÁO HỘI MENNONITE VIỆT NAM: THỦ THUẬT BLOGGER ENGLISH

Blogger Font Size Control ( Changing ) J-Query Widget

Report Error

3,093 views

As a blogger, I know that various readers with a different screen sizes and habits are reading my site, So the font size should suitable every single reader, no matter his screen size, or his favorite size,
Today I’m presenting one of the most widgets I’ve ever customized for blogger.
I enjoyed making it, and i think you’ll enjoy using it, This widget will allows your readers to change the font size of your blogger posts as they want, bigger or smaller, in an easy,simple and fast way without refreshing the page or any thing using the j-query. So let’s see how to Add it.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

1. Adding The CSS And Java.

After Being logged in to your blogger account, Please go to ( Dashboard >> Design >> Edit Html )
and find the following code,

</head>

Exactly before it, Add the following code,

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());

});
  </script>

<style type='text/css'>
  div.slider {
  width: 97%; 
  height: 26px;  
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipdt6agNwMfr4N9yqJgSvZpYdCsm3sdF8icM-MpvLaq5vkW5qO6i1JkMrbHMffeHPW_t5kLlHzUgqIeIL7ff5lSbnK5Qjlabi_sUWC2VU6uMCrgW-Y6bgv-Er9K_HBmwFKdgjz-iQeByY/) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-AvqpAKW4iOdjRnzSC4JeE6g-XHLfQJE9j1WwUj83v2ydGMMlGgAcKx4UxLlYASTwg_5PYp6Wken-ERVS48XsvNFhU3fgk4S_YicjAlz0Wi55J50H0icjV2GWcAEZlIXkF2fmZ9fsGQ/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

And move to the next step.

2. Add the Widget Code To The Posts Area.

At the same page in step 1, Try to find the following code or a similar one to it,

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

And you’ll have to add simple code before and after it, So it will be like the following,

<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>

So All you have to do in this step is to add only the blue lines before and after the code.
Now click Save Template and go to step 3.

3. Adding The Widget For Your Template.

The great thing about this widget is that it fits any blogger template, and you can put it any where on your blog,
All you have to do is to go to, ( Dashboard >> Design )
And any where, click Add A Gadget button, and choose ( Javascript / Html )
and in the content area, paste the next code,

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.allblogtools.com/" title="Blogger Templates" target="_blank">AllBlogTools.com</a> | 
<a href="http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

And Click Save
Now your widget is ready on your blog and you can test it.

Demo, Files And Credits.

To see this widget in a live demo, Click here
This widget contains 2 images and 1 jave file, in case you needed this files to host it on your own server, you can download it from here. Download ( 83 hits )
This Script originally made by CiudadBlogger.com

Report Error

3,093 views

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

1. Adding The CSS And Java.

After Being logged in to your blogger account, Please go to ( Dashboard >> Design >> Edit Html )
and find the following code,

</head>

Exactly before it, Add the following code,

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());

});
  </script>

<style type='text/css'>
  div.slider {
  width: 97%; 
  height: 26px;  
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipdt6agNwMfr4N9yqJgSvZpYdCsm3sdF8icM-MpvLaq5vkW5qO6i1JkMrbHMffeHPW_t5kLlHzUgqIeIL7ff5lSbnK5Qjlabi_sUWC2VU6uMCrgW-Y6bgv-Er9K_HBmwFKdgjz-iQeByY/) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-AvqpAKW4iOdjRnzSC4JeE6g-XHLfQJE9j1WwUj83v2ydGMMlGgAcKx4UxLlYASTwg_5PYp6Wken-ERVS48XsvNFhU3fgk4S_YicjAlz0Wi55J50H0icjV2GWcAEZlIXkF2fmZ9fsGQ/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

And move to the next step.

2. Add the Widget Code To The Posts Area.

At the same page in step 1, Try to find the following code or a similar one to it,

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

And you’ll have to add simple code before and after it, So it will be like the following,

<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>

So All you have to do in this step is to add only the blue lines before and after the code.
Now click Save Template and go to step 3.

3. Adding The Widget For Your Template.

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.allblogtools.com/" title="Blogger Templates" target="_blank">AllBlogTools.com</a> | 
<a href="http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

And Click Save
Now your widget is ready on your blog and you can test it.

Demo, Files And Credits.

To see this widget in a live demo, Click here
This widget contains 2 images and 1 jave file, in case you needed this files to host it on your own server, you can download it from here. Download ( 83 hits )
This Script originally made by CiudadBlogger.com

Few day ago, face book announced and amazing new button as usual, This time it’s made specially for who loves sharing in private ,
This button features are amazing and it’s completely different from the “facebook like button”
This button allows you visitors (if they logged in FB accounts) to send your blog posts to their facebook friends, there is no need to mention how important is this and facebook for marketing your blog as we all know that facebook already sending blogs thousands of visitors every day. First of all, lets see a demo button on a blogspot blog.

Now lets learn how to do it, and i’ll list the tutorial steps to make it easy and not to make you loos your self into the details and customization,
Don’t worry, the button it self can be added only in 1 step, but for the advanced users, you can apply the additional steps.

1 ) Facebook send button code.
2 ) Facebook send button + Like button code.
3 ) Where to put the button code.
4 ) Customize it’s style ( dark or light )
5 ) Advanced customizations.

1 ) Facebook send button code.

Here is the new send button code if you want to add it alone to your blogger blog.

<!--Facebook Send button Start AllBlogTools.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>
<!--Facebook Send button End AllBlogTools.com  -->

2 ) Facebook send button + Like button code.

And this is the code that you will use if you want to add like + send buttons together.

<!-- Facebook Like+Send button Start AllBlogTools.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button End AllBlogTools.com -->

3 ) Where to put the button code.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

After you decide which code you’ll use, it’s the time to choose where you’ll put it on your blog.
Actually there are two options for you to put your button at, Below the post title, Or After the post body.
Now go to your blogger account, Navigate to, Dashboard >> Design >> Edit Html .
Click on expand template widgets
And now follow the next step.
To place the code below your post title, at the top of your post,
Please find the next code in your template,

<div class='post-header-line-1'>

<div class='post-header-line-1'/>

And paste the code after it,

Now if you want to put your button below or after your post body, Please find the following code,

<div class='post-footer'>

<data:post.body/>

And paste the code After it.

Now click Save Template
And you are done, now go to your blog to preview your new button,
Or if you want to customize your button, or see some advanced features, please continue reading this detailed blogger tutorial.

4 ) Customize it’s style ( dark or light ).

Now if your blog template, don’t look good with the light button, Just change this code in the above codes,

colorscheme='light'

to the following code

colorscheme='dark'

5 ) Advanced customizations.

Now What it you want to make the button only appear inside your posts and not on your blog pages / archives / labels pages,
put the following codes above and after the button codes.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
The_Button_Code_Here
</b:if>

The following customizations for (Send + like) code. so if you piked the send only button skip this part.

How to change (like) to (recommend).
Find the following part in the button code.

action='like'

To the following

action='recommend'

hide Who liked the post and show only the number of likes.
Just find the following part at the button code.

layout='standard'

And change it to

layout='button_count'

And that’s it,
I wish i covered most of this new button customizations, and for sure if there any updates, i’ll post it here.

---

dailyvideo

Tổng số lượt xem trang

BÀI MỚI

NHẬN XÉT MỚI

MEDIA

TIN TỨC

...

THÔNG TIN CẦN BIẾT