SYAMS-Info: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Uninstall or Completely remove mysql from ubuntu Bionic Mint 19

Completely remove mysql from ubuntu steb by step :

sudo apt-get remove --purge mysql*
sudo apt-get purge mysql*
sudo apt-get autoremove
sudo apt-get autoclean
sudo apt-get remove dbconfig-mysql
sudo apt-get dist-upgrade
sudo apt-get install mysql-server

CSS text shadows for your blog

Hi fellas, long time no see.
yeah, it,s my first time i touch my blog.
It has been 5 months i never updated my blog.
it's so long right?

Now i ll share a little bit about text shadow.

About Text Shadow

The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9, is zilch. However, using tools like Modernizr will help you pull off advanced CSS3 effects even in silly old IE.

Syntax

1.Standard

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

2.Quick and Dirty Letterpress

body {
    background: #222;
}

#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}Quick and Dirty Letterpress

3.Hard Shadow

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

4.Double Shadow

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

5.Down and Distant

text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);

6.Close and Heavy

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);

There are still many CSS text shadows that you can create.
Basically CSS text-shadows are simple to implement on basic form and you will find variety of different forms if you really put some work on them.

That's all for to day. mix and max your CSS text shadows and find more text effects on the source bellow.
:)

#source : http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

How to Add Social Media Buttons to Blogger Posts

Sometime we do not satisfied with the original Social Media Buttons on blogger.

We wanna mix the Original Social Media Buttons,

and hope our blog looks a bit different with others.

You know it is pretty simple.

How to Add Social Media Buttons to Blogger Posts?

1.

Go to Dashboard >> Design - Edit HTML >> Expand Widget Template

2.

Use (CTRL + F) to find this code:

<data:post.body/>

Button positioning :

1. To position the buttons at the bottom of post, place te code bellow <data:post.body/>

2. To position the buttons at the top of post, place te code above <data:post.body/>

Code :

<b:if cond='data:post.isFirstPost'>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

</b:if>

<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</div>

<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>

</div>

<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>

</div>

<b:if cond='data:blog.pageType == "item"'>

</div>

#pin-wrapper > a {background-image:none !important;}

</style>

</b:if>

</div>

3.

When done, save your template and exit.

Thanks for coming, and share this article if you find it useful.

source : http://www.digitalkonline.com/blog/how-to-add-social-media-buttons-to-blogger-posts/

How to Backup & Restore Blog Posts Using Blogger Import/Export Feature

Blogger has an awesome feature to download and save blog posts on your computer. Of course, you can later restore the posts as well. Additionally, you can also move your posts to some other blogging platform using the export feature or to some other Blogger blog. I'd highly recommend to regularly backup your posts. Check out the instructions to see how to do it.

1- Export or Backup Blog Posts to Your Computer

1. Chose Settings from the list of options. You can press the drop down arrow button to see more options.
2. In the Settings section, click Other from the left menu.
3. You'll see 3 options in Blog Tools. Click Export blog. A window will open where you'd have to click the Download Blog button.
4. An .XML file will be downloaded to your computer. Make sure to give it a proper name and keep it safe. This file will be used to restore your posts later.

2- Import or Restore Blog Posts From Your Computer

1. Chose Settings from the list of options. You can press the drop down arrow button to see more options.
2. In the Settings section, click Other from the left menu.
3. You'll see 3 options in Blog Tools. Click Import blog. A window will open where you'd have to browse the file on your computer & click the Import Blog button.
4. If you're importing posts from some other blog then make sure that Automatically publish all imported posts is not checked.
5Now your posts have been imported or restored.

How to dress up your popular post widget in blog with CSS

How to customize popular post on our blogger blog???

It looks not stylish so here we will see how to dress up this in simple steps.

This will change your fonts and colors and boarder also. And this will not effect on your page speed. Because we are using popular post given by the blogger itself. We are only styling our popular post widget using the cascaded style sheet.

1.

Go to Dashboard >> Design - Edit HTML >> Expand Widget Template

2.

Use (CTRL + F) to find this code:

]]></b:skin>

Now add below css code to above the code :

/*--- Careerandtricks.com Popular Posts --- */

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #dddddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;}.popular-posts ul li:hover {

border:1px solid #6BB5FF;

}.popular-posts ul li a:hover {

text-decoration:none;

}

Customization:

For the change of border color in static mode change #dddddd.
For the change of border color in mouse hover mode change #6BB5FF.

3.

When done, save your template and exit.

source : http://www.careerandtricks.com/2012/12/how-to-dress-up-your-popular-post.html

Blogger Auto Read More Hack : Improved With Many Control Options

Blogger Auto Read More Hack : Improved With Many Control Options

Hi! How is it day?

Now, i wanna share something that related with my wishing to create my blog looks simple and easy to read. I wanna my blog looks Auto Read More style.
Read more style is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.

And fortunately, i found some article that helps me to create my blog looks Auto Read More Improved With Many Control Options.

Read More Improved Control Options :

1. You can add default thumbnail image when your posts don't have any image.
2. You can turn off auto read more for some first posts.
3. Option to turn on/off read more for home page and labels page.

:) so, what do you say?? and this is it!!!

How To Add Auto Read More Hack To Blogger?

1.

Go to Blogger Dashboard >> Template (Download and backup your old template) >> Edit HTML>> Check Expand Widget Template checkbox

2.

Find this code :

</head>

and add the codes below just above it,

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvm4vE3pHPN_kXZaP5-NnLtdtXvTub51OGgfJWl3THgW3xY2rJfvxvy1dxDYV7thrfF4fvXB0alnZPnBeZjqCD1K4FGHaWTLLWsH_SrRYddCwTdo9UuBjsDY9lBiDlU64dCIYG_8SajKg/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script type="text/javascript" src="http://code.helperblogger.com/summary.min.js"></script>

You can easily customize above highlighted values :

showImage : true, If you don't want to show image thumbnail then simply replace true with false
imgFloat : 'left', If you want to float image at the right of summary then simply
replace left with right
imgWidth : 120, This is width of image
imgHeight : 90, This is height of image
defaultThumb : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvm4vE3pHPN_kXZaP5-NnLtdtXvTub51OGgfJWl3THgW3xY2rJfvxvy1dxDYV7thrfF4fvXB0alnZPnBeZjqCD1K4FGHaWTLLWsH_SrRYddCwTdo9UuBjsDY9lBiDlU64dCIYG_8SajKg/s1600/no-thumb.jpg', If you want to set your own default thumbnail then replace above image URL with yours.
words : 65, This is number of words when there is a thumbnail
wordsNoImg : 80, This is number of words when there is no thumbnail\
skip : 0, skip some first posts, don’t apply auto readmore for them. If this option is set
to 0 so that all posts are applied auto readmore.
showHome and showLabel : allow or not auto readmore for homepage and label page. true is allowed, false is not.

3.

After adjust it, find this code :

<data:post.body/>

and replace with :

<span expr:id='data:post.id'><data:post.body/></span>

<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<span style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

on standard template you should find 3 times "<data:post.body/>" code to the repeats , then replace all the codes till 3 times.

4.

When done, save the template.

Now you can view your blog with readmore style in every posts.
Enjoy blogging!

source : http://www.helperblogger.com/2012/06/blogger-auto-read-more-hack-improved.html

How To Add or Change Favicon on Blogger Blogspot

Favicon (Favorites Icon) is the small picture (usually 16px x 16px in size) you see beside some some site's name in your browser's address bar.

Having your own favicon with a nice graphical reminder of your site beside is a good way to get visitors attention again. Now Blogger users can add a custom favicon for their blogs from the Design > Page Elements tab, by clicking on the Edit link on the "Favicon" element above the navbar element.

"For many bloggers, having a custom favicon (the tiny image displayed in your browser’s window or tab) is the finishing touch that ties together the design and identity of a great looking blog. Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog. ~Blogger in Draft"

Steps adding your own favicon

1. Log in to your Blogger's Dashboard, go to the Design -> Page Elements.

2. Click on the "Edit" link on the "Favicon" setting above the navbar element.

3. A popup window will open where you can search for an image in your hard drive to replace the default favicon image. Click on "choose file" button and search for your favicon (it should have the .ico extension) - then click on "Save".

4. Now you should see your own favicon instead of blogger's default favicon.

Don't worry if it won't appear immediately. It may take some time until your new favicon will show in your Browser's tab or window.

If you want to add animated favicons to your Blogger blogs, then you should follow another method.

How to add an animated favicon in Blogger

1. Log in to your Blogger account > Design > Edit HTML > check the "Expand widget templates" box

2. Search (CTRL + F) for:

<b:skin>

3. And just above it, paste this code:

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

See the screenshot for more details

Note: replace your-favicon-links-goes-here with your favicon's link location
You can choose from here some cool favicons for your site/blog: http://www.favicon.cc/ (just download the favicon you like - upload it on tinypic or on a blogger's post, then copy the link address/direct link)

4. Save the Template.

Now your favicon should be alive. Just view your blog to see it in action (:

source : http://helplogger.blogspot.com/2012/04/how-to-add-or-change-favicon-on-blogger.html

Add Facebook Like/Fan Box to Blogger

Add Facebook Like/Fan Box to Blogger

Facebook Like/Fan Box is a great widget that allows the readers to subscribe your blog trough their Facebook account. Readers ll also receive your most blog update on their Facebook Page. This widget ll show the faces liker on the Like Box.

First if you wanna add Facebook Like/Fan Box to Blogger you need to create fan page on your facebook account. If you haven't created yet, follow this step to How to create a facebook fan page(#Helplogger.blogspot.com).

How to add Facebook Like/Fan Box to Blogger?

1.

Find your Facebook fan page on your facebook account, it should be on the top url address when you opened your Facebook fan page.
and this is mine "http://www.facebook.com/ilovemrobu"

2.

Go to this link : http://developers.facebook.com/docs/reference/plugins/like-box

3.

Set the properly :

If you ve done and got your desire looks of Facebook Fan Page >> Click the

"Get code" button.

4.

You'll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the "IFRAME" code.
Select it and copy the code generated for your box as it is shown in the example below:

5.

Go to Blogger Dashboard >> Design >> Page Elements >> click on the Add a Gadget link >> select HTML/JavaScript and paste the code in the HTML box.

click save and you re done!

enjoy blogging!

source : http://helplogger.blogspot.com/2012/03/how-to-add-facebook-like-box-to-blogger.html

Facemoods Emoticons on Blogger Comments

Facemoods Emoticons? Yes, sometime we wanna add this on our blog and make our blog looks cute! And now, i want to do this Facemoods Emoticons on my blog comments. If you wanna so in your Blogger comments too, then follow these steps:

DEMO

How to add Facemoods Emoticons on Blogger Comments ?

1.

Just like usual, Go to

Dashboard >> Design >>Edit HTML >> Expand Widget Template (make a backup)

2.

Search (CTRL + F) for this code :

For previous commenting system:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

For threaded comments :

<div class='post-footer-line post-footer-line-3'>

3.

Add the below code :
*For previous commenting system, add the code before
*For threaded comments, add the code after

<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDelYYe8_cydRC0532x9j9Kw-QTcP-BAdA5Eio4Pylqbw2d2QdeEbLWjCIrXIjhGPaafmpOpb7wJpz9lUFoppu8nPOktbbr_6ZsIRiofMvYVtwZfkx3L-RNnv7YDvif6Ug0-0GhdrhDUzA/s1600/helplogger.blogspot.com(1).gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZ7i7zYNUkEcNLdgcyQrGG1IX7RHIfL2F4yBs3ErAsjGZaxiI7lLn4ZgLJUrJCfVTz1E7ZSHv-sV8vVE2bod6CeqDgQlg49fh2T21j2Au75dHUfUTMiRAH4TV2v8wDl_pvS8UQQ4Q4Dck/s1600/helplogger.blogspot.com+(2).gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjZHaFQTtd9S_g5oDqAtZN4d6SNxRF25kk7X7wcVldezSzMopfOxos_uPEhrH0RO3_xKD3II3vtc4y03nX71B1HaLF4xjm9S2CYspTErdyH3duECCQkcPg4rZ2QnD3HzvtvsK8uYu25MO3/s1600/helplogger.blogspot.com(3).gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3xH1PhmFtmSf3ZOEppL6mWinT9N-govhogW1KhkQYM26uFRM2KBgk6nikXdgUvzHGdXbkGDapJddrD1cBuIh5VTs9pwNTXUnRckyE-bMcd6th3F3OzErHK7NlQ-Jwqw4fIc0QtLJTBUF/s1600/helplogger.blogspot.com(4).gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pru4wfdBd3k27MHrVutaTMggr-Yak0x7Ld_eCvLqHHWUMCkA34xe7rQCwCO6jvPgl0eGIw30jN3tLcnKvT1R8DJMaYWc3X9ww-7u89G8vaZQeYQ9hpKLi7Z6yvrc0x2cEvv0hBd4BwP1/s1600/helplogger.blogspot.com(5).gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtDBA6mP7ZSSAgtkIS7hE1e6nmwqtu5CXAhh0wegwAhDVitvH0WI7CCddLerT8YsbeEDkKgLXjcIPp_qo4OKrMLDU1sR4Vo_F11TbABvwu4_be5vcoWHkqwO7L0LO0eYV5qFyb5UFnAvj/s1600/helplogger.blogspot.com(6).gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZQM5r6elO7jQ5HngzRqBoutBnqLbfb_UZ9yKFLSM4Hb9ZDEXgke2nHI3gVNaBVteGJHEk4qFxs1vGBo7FX4Lk6z7w1jyDskhJCuh7toc2FBuBLIFV3IxKQwnPlbgpelnBoFvf4U0_2Ii/s1600/helplogger.blogspot.com(7).gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexXVdpASAfOJzEz1wqf0CA4cnO2tC1sNUzEQyU5UaEfFBuX24XeERjfuf82PaphOG5TDNswyLQjd9m3iP8g0c9AMwSGi3dLiHiiHY0yhOYxUikf5fN9LG5C2pRBQ6rslole4bvm7LVaL4/s1600/helplogger.blogspot.com(8).gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqz1vXuecx3JO76DDbBIkOZn2DLzZV9AjmNEUtc1daJ7-YjrudLLXeNEyI56jsgkHfEhLYjBHEqLZr7nb8cJhvRc0gD0RnYAxl6SmSG6ovRjnWxEjlBxYDI3dTU2bWIoUWA1dRWPktVo1f/s1600/helplogger.blogspot.com(9).gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWAJKG0XHwCQiOmN7bLxWEhKMl8hPfUESeSG3am41LwPFWsccoUEuJ-xzVT9NVi0vuArJhqZuHBFODdGTDdhdSmjk7JRGIdJ33PFXVznZE5159oqwAAcXOdsOm1edE4kt52ZcWYYGn6R2/s1600/helplogger.blogspot.com(10).gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrwTFzDNudnq-ZmsNxOmAZz4j8G2AK7peIDbO8QLOHgLe0dPy6ws9PoGymw7R-mj6ceX-peK3TRtrWUMM_G7TvzSAs3-LSdI5MQV0vKF_1fQ_it5O1efikF5aYnT_KHypEz_m8uSeewfl/s1600/helplogger.blogspot.com(11).gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmT46ayyPUl1kr5BaLkG6L3R25h2Yz_9-VGRWni-k-PcBe49iFyEyYoSLtgCbsVMHa_rlrRsdT1_iHXTTvYqx13uUCuSxc287f1f3n7oGghbXDnzrwwiRbyXe3e-TrfaGF-17KXvpirX9f/s1600/helplogger.blogspot.com(12).gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj28Qz1an5JA4IZ2hpgZsv2zd6dRC3tnGTsYubGU3bMd7UaO7hNePD_2AytV1OiInxFDAKLD-RaxnfY0aSrcY8ckHrqRmpf7WshT0jH7kIueQnPUsBY8y9DevllhWxvg8-M7h5If3SMtSzD/s1600/helplogger.blogspot.com(13).gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0hFI78EQtubVxQcMr9BuC4byW0S7oOLtaGNzGeUbm15Yw6HAkC2fCWii64D59qwSxukL0g3DQy-6nPzDCk9kyZH24w1K6u8RRSoFvPUIwMmnsNOFkNGUIra9TQlIPD4cazdTiu0QMy6Z/s1600/helplogger.blogspot.com(15).gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGLDyT8qLLfJjZrbolrmTBoiATx3KGDZ7_LI95mIoUSA-jzqpiUsEIdiTTWJcjNDFu32uYpbBfbEinJQUuhcZ-afoQ9nt31YpFJJuB142A9vcxLKOMwPyo9MEJMPsV-jeO8nLxCtU3tDd/s1600/helplogger.blogspot.com(16).gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_iAeH-CXY3aaOnexSVcWibVllnHItvw_Rja3fs3LqfAM2LgbfKqXboqgp7DPhUXR4M_eSadvXzhkGE6dt3sK9QsiuOz1rVP3xpZSipH0QGXwRmlWFSIDauD_NHhw5GDFcM_-wOod9mTX8/s1600/helplogger.blogspot.com(14).gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffPfbpVskQ-HLYJKzUuaDOg9XsUWDmSCfyU8XZ0_4YVn6fLd0IYQ7COfIP0pVG44rkwLCaAtx70uH4roOW2lT3vI08dQpavi3rrImG1FL2T7rnccR4wq3TrSo6u_VBGp6-rFktetPh6Gf/s1600/helplogger.blogspot.com(17).gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcZ_mWDEqajMai8jAgsnaVsb9zye-Y94eqk1dLW0nmByArkFDuEyPndHabrrvtyJZ3fcxmzcLxoOtuDUVMUj2oXXVOnSlM6yhOgkVu5EFbyu4_aMNoV-bFA03bv4CDF14yHeN709iKUlzg/s1600/helplogger.blogspot.com(18).gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4S22PFzMmsBGR55B8auZnvt6uGWTKgZPLbtD074cA3fxyl1_qhCOJ4JW_jkPmjHYY9p0x3er5fev8ZWxuRI6FDLTZ6CI7GFb-62z2tUMHOBlcztdOHiZtR3EhL6zVTAOGKbls9xhVuIp0/s1600/helplogger.blogspot.com(19).gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QeODZwZoSYbby_9bvRK8LPjOLxysdsngczCFI2ILDjEUhn4Fn9_bofMsh0uZknIqXaDY9525Nw6zeXX_BylT9Q8mBmkFLxjYR8Bs-h3GVMv6slpPpbzMMhzbXrLZrhBkdN1YnMlB_XIA/s1600/helplogger.blogspot.com(20).gif'/> :t <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

4.

Find this code :

</body>

And add the following code above it :

For previous commenting system:

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/>

For threaded comments:

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

5.

When done, save template and exit. :) Enjoy, your Facemoods Emoticons on Blogger Comments.

source : http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html

How to create drop caps on blogger (Big first latter)

How to create drop caps on blogger (Big first latter)

Actually, we can do something like Drop Caps Effect on our blog as possible.

Drop cap effect is a large first letter stretching down three or four lines with the text wrapped around. We often see this style in newspapers, literature, magazines and etc.
Now, I ll show you how to create drop caps Magazine effect in Post and Comment blogger.

Ok let's see,

How to create drop caps on blogger POST (Big first latter)?

Example :

Drop caps effect on blog post

Drop caps effect on blog comment

1.

Go to Dashboard >> Design - Edit HTML >> Expand Widget Template

2.

Use (CTRL + F) to find this code:

]]></b:skin>

Add above it with the following code:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Size : Change the letter size, (decrease/increase) the value.

Color : Adjust it with your desire color.

3.

Find for this code

<data:post.body/>

And add the red fragments you see below :

<div class='capital'><data:post.body/></div>

When done, save and exit.

!!!if this code is not working,

add one of the following codes below:

<p class="capital"><data:post.body/></p>

<span class="capital"><data:post.body/></span>

How to create drop caps on blogger COMMET (Big first latter)?

The steps is not so different with adding drop caps on blogger post.
Following the steps 1 & 2 and find this code :

<data:comment.body/>

add the red codes before and after

<p class="capital"><data:comment.body/></p>

Save template and done!
Just simple!

source : http://helplogger.blogspot.com/2012/06/how-to-create-drop-caps-big-first.html

Create A Rollover Image Effect (change image on mouseover)

Create A Rollover Image Effect (change image on mouseover)

First, i didn't know what it called? I just wanna make some effect when the cursor over to some image , it looks move or change with another image.
I read some articles on helplogger.blogspot.com and found "Create A Rollover Image Effect (change image on mouseover)" article.

So what is Rollover effect?

Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out.

Demo :

(Place your cursor over the image bellow to see Rollover effect.)

Create A Rollover Image Effect

1.

You have the following code :

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Change the color text as it follows :

Put your URL address here
URL ADDRESS = http://mr-obu.blogspot.com

The first image shown before you hovers over it
URL OF THE FIRST IMAGE GOES HERE=http://i1256.photobucket.com/albums/ii494/helplogger76/helploggerblogspotcomstickie3.png

The second image will appear after you hovers over it
URL OF THE SECOND IMAGE GOES HERE=http://i1256.photobucket.com/albums/ii494/helplogger76

Easy right?
Now, you can add the Rollover effect on your gadget or add it inside your post.
Enjoy Blogging!

source : http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html

How to change maximum number of posts in Blogger label page

Blogger has set of default 20 maximum blog posts (category page). This may suit or not suit by your preference.You may want to change the default maximum blog post becomes the number you may want to increase.

If you want to increase the default blog posts you ll have to edit the default template.

How to change maximum number of posts in Blogger label page?

1.

Now you got to open the template editor
Dashboard > Template > Edit HTML) and Expand Widget Templates

2.

Use "Ctrl+F" to find the following codes :

expr:href='data:label.url'

and replace with :

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

I used the number 150 because I want all posts to be displayed in the label page. You may use other numbers in place of 150)

Repeat this increases of "expr:href='data:label.url'"that you cand find, i guess it will be 3 repeats for the simple template, so then the above ll have to be repeated 3 times.

3.

When you ve done with this, save template and exit.

source : http://www.bloggertipsandtricks.com/2012/07/Howtochangemaximumnumberpostsbloggerlabelpage.html

Simple Recent Posts Widget for Blogger/Blogspot

Simple Recent Posts Widget for Blogger/Blogspot

A couple days a go i wanted my blog appears good and simple. I just thought that i changed the archives widget with recent posts wiget instead.

So then look what i found.

How to add Recent Posts Widget to Blogger?

What you can do with this widget:

    * display post titles only
    * change the number of posts
    * change the number of characters of the post snippet/excerpt
    * show the post dates

See the screenshot below:

1.

2.

Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

    <div id="hlrpsa">
    <script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
    </script>
    <script>
    var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
    </script>
    <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
    </script></div>
    <div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
    <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
    <noscript>Your browser does not support JavaScript!</noscript>
    <style type="text/css">
    #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHCWZFg3VQW7fOEK5lPzYUQdqMJjjK-4prtO-0wBUI88ZWEV6srmDs_BfTJ2v4EKTCaHusLuMtqpgPQII4DGANfwBa2YUcZkrAYAOQPjxO1jkBZtw3mPchTbSahgK2F8Kb_Mh5XIWRKOR/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
    #rpdr, #rpdr a {color:#808080;}
    #hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
    .hlrps a {font-weight:bold; }
    .hlrpssumm {}
    </style>

Option 2: Recent Posts Widget Showing Post Titles Only

    <div id="hlrpsb">
    <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
    <script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
    <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
    <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
    <style type=text/css>
    #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHCWZFg3VQW7fOEK5lPzYUQdqMJjjK-4prtO-0wBUI88ZWEV6srmDs_BfTJ2v4EKTCaHusLuMtqpgPQII4DGANfwBa2YUcZkrAYAOQPjxO1jkBZtw3mPchTbSahgK2F8Kb_Mh5XIWRKOR/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
    #rpdr, #rpdr a {color:#808080;}
    #hlrpsb { }
    .bbrecpost2 {
    padding-top:6px;
    padding-bottom:6px;
    border-bottom: 1px #cccccc dotted; }
    </style>

Here they're the options :

#Change 5 (option 1) and 10 (option 2) with the number of posts you want to show.

#Change false to true if you want the posts dates to appear.

#And change 100 (option 1) if you want more characters to be displayed.

#Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

3.

Save your widget and done! Enjoy!

source : http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html