Blogger Tips And Tricks 2012

Blinking Read More Buttons For Blogger- With a Tiny Arrow!

Animated Read More Buttons

Source: http://www.mybloggertricks.com/2009/09/blinking-read-more-buttons-for.html

Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style!

You can use the same method always to get Image URLs for your uploaded images. Get rid of Photobucket!

After you get the image URL simply use the popping code shared below,

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

Copy-paste this image code in your blogger editor and make the following changes,

------> Replace Add Image URL Here with the image location that you just copied.

------> You can also change the size of the display image. The Display image is the smaller image which on mouse hover expands to the original size. Change 100px to any size you want.

------> Replace Image Description here with a little description about the image. This text will appear below the expanded/popped up image. If you don’t want to add any description simply delete the bolded green text.

That’s All! Apply the popping code to see things popping up :>

On Mouse Hover Image Opacity Effect

Now Lets add the fading effect to your images. This one is pretty easy!

Follow the same steps for getting the image URL as guided above.
Once you have copied the Image Location, use the following code to add fading effect to your image,

<a class="Fadein" href="Add Image URL Here"/><img src="Add Image URL Here" width="" height="" border="0px" /></a>

Simply replace the bolded red text with the Image location that you copied.
By default the original image size will appear because I have mentioned no image dimensions. If you want to give a particular size to the image then give the proper dimensions to width="" and height="" e.g:- width="500px" height="600px"

That’s All! I hope everything was clear.

You can follow the same procedure for adding these two effects to images in your sidebar. You just need the Image URL and that’s it! bye

Source: http://www.mybloggertricks.com/2009/09/learn-how-to-add-image-pop-up-and.html

Stylized Page Navigation Widget For Blogger|Blogspot blogs – MBT Church Theme Style!

Inside the HTML/JavaScript Widget paste the code below,

<style type="text/CSS">

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>

<script type="text/JavaScript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

If you are using a domain other than .blogspot.com or .com, then kindly change the bolded red text .com with your domain extension. For Example if your domain ends with .info or .biz than replace .com with .info or .biz . But if you are a BlogSpot user than leave the code unchanged.

Once you have pasted the code inside the widget, simply drag your HTML/Javascript widget to the area just below your posts and drop it there, as shown in the picture below,

Page-Navigation-Widget-For- blogspot blogs

That’s All!

Hope you enjoyed it. Let me know if anything is unclear.

Source: http://www.mybloggertricks.com/2009/09/stylized-page-navigation-widget-for.html

Remarkably Beautiful Social Bookmarking Icons and Buttons! The Largest Collection Ever!!

3. Aquaticus Social Icon by Quake9

Aquaticus Social-192

4. Cute Heart Social Icons by www.smashingmagazine.com

Cute Heart Icons

5. Cubic Social Icons with Logos at top by www.webfruits.it

maxiconeblog3_lp

6. Twitter Boys with Attitude by monkeyworks

Right Click and then select Save Image As/Save Link As To Download the Twitter Boys below,

twitter3

7. The Leaves Fall: A Social Icon Set By www.smashingmagazine.com

the leaves fall

8. some Glassy Social Icons by vikiworks.com

socialbookmark

9. 33 Feed Icons by www.zeusboxstudio.com

zeus

10. Twitter Icons by www.vincentabry.com

To download or view Tweet Icons other than the ones given below Click Here

Right Click and then select Save Image As/Save Link As To Download the Twitter Icons below,

11. Cute Animal Feed Icons by www.smashingmagazine.com

Feed me animals

13. RSS Buttons by iris-design.info

Right Click and then select Save Image As/Save Link As To Download the buttons below,

14. Animated RSS Feed Icons by abdussamad.com

Right Click and then select Save Image As/Save Link As To Download the Icons below,

15. Beautiful Social balls by www.zeusboxstudio.com

16. Cheers Icon set by www.smashingmagazine.com

cheers

17. Metallic Steel Social Icons by Webtreats.mysitemyway.com

35__620x620_iconsetc-social-media-icons

18. Now Finally Some Jumbo size RSS Feed Icons by 0at.org

To Download Several other Feed Icons like the ones below, Click Here!

Right Click and then select Save Image As/Save Link As To Download the Icons below,

154218d4 Thanks God! The Post ended at last. I am really tired at the moment, will meet you after taking some rest. But you guys do let me know whether TNT by STC’s this post on Social Bookmarking Icons was useful or not.

Source: http://www.mybloggertricks.com/2009/05/remarkably-beautiful-social-bookmarking.html

Contact Mohammad Mustafa Ahmedzai

The Contact Form has been shifted to this page » Contact Mohammad

Source: http://www.mybloggertricks.com/2009/03/contact-me.html