most commented posts widget

Most excited bloggers who want to add new things in their blog. For those bloggers, today I bring the most commented posts widget. This a widget which show highest number of commented post on your blog's sidebar with pretty CSS3 effects which make this widget more attractive for visitors. The principal of this widget is same as popular posts widget which rise the most viewed posts. If you are interested in this widget and want add immediately in your blog, then it is very easy to add in blogger, simply follow the below steps

How to Add Top Commented Posts Widget for Blogger

• Click on below Get Codes and copy all codes from appearing pop up window
• Login your blogger account
• Go layout section and add new gadget 
• Select html/JavaScript 
• And paste the copied codes in it.

Get Codes

Customization

Now you need to do some little customization in these coding

Replace  URL "thebloggerguide.com" with your blog's URL

Replace this "10" with how many post titles you wish to display in the list.

Save gadget. Done

Now view your blog, I hope the most commented posts widget will be worked on you blog.

Read more

среда, 24 июня 2015 г.

How To Add jQuery Related Posts Widget for Blogger

>>> Related Posts Widget For Blogger / Blogspot with jQuery








How To Add jQuery Related Posts Widget for Blogger

Typical Usage #1

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.


Now find (CTRL+F) this code in the template:

And immediately after it, paste this code:

And now click Save Template




Typical Usage #2

To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.

How to Install Related Posts Widget related links at the side column


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..



Step 1:



If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save

 

Read more

понедельник, 22 июня 2015 г.

How To Add Seperator In Blog Posts In Blogger

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

.post

this is the cs part that controls your post layout and style, it must contains few css properties like the following.

.post {
margin: 0 0 40px 0;
width: 90%
}

Now we want to add the separator css properties between the opening and closing tags, { and }

Here is the separator css properties :

background: url(Separator-Image-Url);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

padding-bottom:2.5em;

And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,
2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.
Now your final code should looks Like The following one.

.post{

margin: 0 0 40px 0;

width: 90%;

background: url(http://www.imagehost.com/separator.jpg);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

padding-bottom:2.5em;

}

Free Separator Images

Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SvCO4OELAGb5PLsa7YmsW9Q8SRwbbJeQkO352V8RfNl7BdScvweWjn8PpLrA71ho_yOjogBqgJoDirSkrZ-LayPiUcvLvDmRAxTDh7KiVU4LZ4ayV5DVEVn6q0RspNhbY88vZ1b_e8wA/s1600/barsnake.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbaR0xU9MfTm1VlEEi2iCNAtAjsZcHOiH7-whH603l8Hp7gGCOlkZANtigpvI8oH-oaB5lhG1_sorCbjyQcDVtXPP29NADOmiUiUoCSWfPYDOHAw_uOTynK5yHp9Uoga77bh-fsfBaVGNH/s1600/bar54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPHmLf7HWNEuYDdl5qu4DAo5XwEyUZ_LqqX2HVOrbBaKXoO5cNc9ZkfnMpQDnTSvX3xwtrXr6l_1QuNaLACA9DO5sY7Zsk8bhTi00H5WK8d7D-QIA-mWPsmJshTKmcBTbU-bYfl7nWBTVg/s1600/bar48.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmsqLtXTa2d9pqb4P6RlZdvVQ8J-PqiJir0Xsg5DcCs4-4KWAWCXHiGecVxQCw3ALdLdGJVxg5Yx5JbFh4a1Nr_0KZvEHjQKocuBeixd3mpb57YgwhxYoKIbM3qHdIbw4waBeuc2aynj5/s1600/bar47.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3I_MlvuXinAZVkbXiUxahFkT1L0dKHfHK3BFYP8M0PtmZhWlQK6tGyXnaZc7dl-qcmArtXXisy5ibETLetNe2bcabExBX14n3ohfCAQda8G2qPD_BGZDFmiV7WYJAbBAEt9XGjXrf_UQ9/s1600/astarl7s.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsU7-aWOA-etwPCfu82bOP6xihiUQTyg9NlAT7ySF-u7YP8ksAs5EcaYS15uTl7_OXxiRY1NPq1rjuKIyYJlv52OCJUGchSyXICbDRh94LZqfeNiGQ94xX8iYlTbKeXaV52TJviAuPM406/s1600/dividers_129.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWL9M7hrL25hDjT_jq0_i0MgKYAhKle9zZWVfj5FpJLUHVPmzC_ynikK8GpW9iRqyfaRR7yEL8b4P_o2nXh6Oko3dd48P97FnHugo3B9iy1jOh6I4HP-JCwMk9DQ9IjUITUlYoQ5EFuT8-/s1600/dividers_96.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVXaEo508FDZTmMNEnkpADBsbUpxDAIUXm83LdT6NB3XDuaZioshgPNFcDncehBBmPJpHrqNdqK07wcReswDMr1K43x9ju9kCgXju7iKSllKpldjr6xXQkWomQhnAxEoYDjnX6Pr4sQn_l/s1600/clipart-heart-border.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLEYr_fFflR5-pyxHkLx0SjyyrbLM5pwvQqQ8l8eevL_M2GLCWODTarukBIgjYaDxwMRoSASvIPUW3GL7nhyphenhyphen19uZhyfnxmDk0Yz4xvgzZ0IWZVdDCe2hyphenhyphenIkHchUO0Zz0_xlDn7ZlPLKPtB/s1600/chain.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrNPBInQuHuCyvvtquVHlvqJ5SqMNYLrjDQ6r5t9M3IAc4rDFu1ziON5QQbcryHekAKfB15SHaCfYNI3YWebuCjFM7Iwy26ZyF7XeIhhGdMl6ppXJwF2WP6td1j8AypahxpoJApjIY-La/s1600/bloodrose.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoJr-NLjuhKjMhpnd1yMR7D8z1dhX_S7z-lWs9zEcpIHIfMHWCqZZulmHgFARRkX8BLAc1xNcWpXwgVg4H66ItkC-7sJ9cLYQPc49K-pQTr0a-usZE14aN39QBcWNPG3ckTFDCGPHltz23/s1600/stonebar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMEK-GlbVnccjlhfAf0Y6FnRVFhuuqOKwc1O4AyFRnWREq03ONn1LC-RE4OZcfzjvY3eXV-ynYH4PNTtKSN2d7c78RYAtKiOzVxPLUNGEcdKU-OdWBD_rqFC9SWEctIyzXCugdtG0UJlU/s1600/resfiles_sdfp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNoAtg5vHOu8_Qc2saBhJoIMfL_UkpPTfVtvXE9X5bS2EhmkqGHsoRd02H6uf_tzHU5mYgo8NGMHgo1qoBZBd39aB8HhJzKbBcAt_o8Js-nDYmk1Wym68Y2NKFIKVFjotymHPiiCwdcmMn/s1600/resfileszcp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCxFqUhuOVqr54agtx0XWlJfSkazEazk3hHWA-mTKgkyrVrF9gOjNCwtV1JJ2wKexf0pVG9II2nTOKDbuh9DPVVRuHRdHeHuNr3e1wFnSIhAhEDCHJKeUaw3THlXO-vzyCQSwkxEvT91m/s1600/resfiles_output.php.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5QLHpVOcpXdbMCkoCRAyOL1A8hFAl7taU9gcyXwntQdCqEfusBmokV8bTMbSmFa8SCbktcdugbYSg915aft9HTTxw605NaaO_snhYjHPzbszlcb78TfBfPNNOZupJOriAm4tqP8ioNPS/s1600/pumpkin-border-hth.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqPA3oZFivyrhNwS-MeG5OasJ2hnapAgDTCg_Npfd-5Q7SHAsj5pWyHow6MljECDlnbY5act5Xu6iEfvKEHtiW3vPG9mrLfL2o2TR_VxwqJ6v60ZhCpO66AmYi-z7MzoejKKYB7NFCIxF/s1600/irish-border4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSC77a-27aInQ_9JXUmKHEYW1Gf1ZcNHP4J0chT0tWdtvOtKMzNICzsWY-PICDgP_KQDQoF3NQpmZmsDwyq5QeMC7v2kC-5zqTEUr284b8tw2_V0CIBl86wN-DVZZOpQwv3pLvxclxV5G7/s1600/ivy.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz6XVLc_-Z0Awk126naXc6CWvr7YYxz9HreBmnhYYuFdOeTPqPiF61NDG-9k68oKoMoEEw0xLdQVuIXG7Ks679Ncu-W7Fi4epKvCFUH12deL17_m0mC6NYcyOJdmh-TIe9he0n7TK53jVO/s1600/irish-border1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlZQbEn2GCr5oYQ4eNwyTRuthlK_aJ4RxvtbbKMqCMw9gpCNICjFrJ2bQMmX7aUEOGE-mlsNw5o1XeEcvD8KG0EKywTkUxyttoF4OKAFY_LcXgySy_vuhlaDZPPbabkDbuciRtfrevLUA/s1600/frog54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2NJw7NkWJJ9L4Vq-HBE2dsEW5giuI_q8dFySp_22GcAWBlR_vmGUwgmbyP70BogA_qmS7iPNscQ2i7ikgpM1162np6Jr0gTlEWAUUMtUoIDdSS1Qzj05FSPFdWVsrEC2ovCTRgdc3as5W/s1600/flowerbar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMGeAJvQUzykietgv1_W3QFd-Q27T1L8BRQXnjBgOyeMuMQPwb-PF7KEBBp7LkjPK6qKVC9XWW4pXidCPAkXADUkdzivMNpMi6hBdEerfb7gOFSATlEkQBDND0aSnGqP3IFpaqPXphhCA/s1600/drawing-separator.gif

Need More Separator Images

Ok, here are 3 links to great sites contains hundreds of free separators and page dividers.

• leehansen.com


• clipartandcrafts.com


• bigoo.ws

Read more

How to Create Show or Hide Links for Posts on Blogger

1. Login to Blogger, Chose "Layout --> Template --> Edit HTML

2. Click "Download Full Templates" link to back up your template.

3. Check on the "Expand Template Wdiget" Check Box.

4. Copy the code below and paste above this code


10. So, the full code will like this :

 


expr:id='"post-" + data:post.id'>

[+/-] Show Full Post...

[+/-] Hide Full Post...

11. Save Your Editing.

12. Go to menu "Setting --> Formatting"

13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box






14. Save your setting.

15 If you want to post an articel place your part articel above this code . Then the remain or full post put between this code  and this 

Happy Blogging>>>>>

Read more

Recent Posts with Thumbnails Widget for Blogger

UPDATE:  I updated some of my posts, this post I update Recent Posts with Thumbnails Widget for Blogger / Blogspot........

STEP #1

Log in to Blogger, go to Layout ->Add a Gadget of HTML/JavaScript type. 

Then add this code in to it:

Blogspot Tutorial

Explanation:

(Edit the values to fit your blog)







tablewidth - Width of the widget



cellspacing - Space between cells (default one is good)



borderColor - Border color (add the background color of your template to perfectly blend it in the template)



thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)



fntsize - Font size of the title



acolor - Color of the titleaBold - you want bold titles? (true or false)



numposts - How many posts you want to show?



home_page : http://24work.blogspot.com/ (change this to your blog url)







And now click Save

 

Read more

Recent Posts Widget for Blogger

UPDATE:  I updated some of my posts, this post I update Recent Posts Widget for Blogger / Blogspot with Summary And Read More........

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type. 

Then add this code in to it:

Recent Posts Widget by Blogger Widgets

And now click Save

 

Read more