JavaScript Image Slider For Blogger

Image Slider by bloggingtipsandtrix.blogspot.com

CSS JavaScript Rocks.

Horizontal Menu With Sub-Tabs In Two Columns For Blogger

• Tab By BTT 1
• Tab 2 Title Here
• Tab 3 Title Here
  • Sub Tab 3.1
  • Sub Tab 3.2
  • Sub Tab 3.3
  • Sub Tab 3.4
  • Sub Tab 3.5
  • Sub Tab 3.6
• Tab 4 Title Here
  • Sub Tab 4.1
  • Sub Tab 4.2
  • Sub Tab 4.3
  • Sub Tab 4.4
  • Sub Tab 4.5
  • Sub Tab 4.6
• Tab 5 Title Here
  • Sub Tab 5.1
  • Sub Tab 5.2
  • Sub Tab 5.3
  • Sub Tab 5.4
  • Sub Tab 5.5
  • Sub Tab 5.6
  • Sub Tab 5.7
  • Sub Tab 5.8
• Tab 6 Title Here

How to Add multi Hover effects on images using Css

hover right hover top hover left hover bottom

How to Animate Moz (Normal) Border In Blogger Sidebar

Please see the hover effect of your mouse in the sidebar

Go back to the original tutorial "how to customize sidebar using animated borders" here.
Go back to the original tutorial "how to show or hide css effect in blogger" here.

How to Customize Blockquote with Hover Effect- The Heart Shape!

You will find as you look back upon your life, that the moments when you have really lived, are the moments when you have done things in the spirit of love.

- Henry Drummond

Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.

- Martin Luther King Jr., A Testament of Hope: The Essential Writings and Speeches

Copyrighted Blockquote with Gradient Yellow Image at the Left Side and Small Solid Borders

.post blockquote {
font: 18px normal verdana, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjO19o3LyFw6R60zU5moZvnywxMhDHTrT_gr_LWKpBVIcipVr4VaawSKHpwck5bTYpuCCHr2VEXuZ-mFyLZqUEjkw6ERDFFetgFxj2qMhYoZ83ALlL9tfxIkmyJeb3pxUah8eWst3QDmOn/s1600/blocquote+yellow.png);
background-position:;
background-repeat:repeat-y;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jty0GttenU1IpJYp6iXuhwGtwbhT9-cu9r5KA6YV33i22oEAZrtJc3oiWKBHiDQeAtJ16rpvmTY4xCN6lnNapKZj8GFYhcP3DqJJ06lOUbKd-sP8sYhvHBjcth2TcLrKykcxKviMHIh4/s1600/blockquote+4.png) no-repeat bottom center;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Black Scanned Blockquote For your Blog

.post blockquote {
margin : 0 20px;
padding: 20px 20px 50px 20px;
background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdumnaWGLr7ITGd4BtGSQLnEpkoe0uLrcEcVKbsKXnBymaR39744bjem457AXvbaf9OlK5qOeEoHQXkOXXfR2OkvAoHu9i8FqjP_jQhtThcuIxRd9l1lk8qgD71XTFeRn4Th9lLxWkEpGz/s1600/Scanned+black+blockquote.png) no-repeat center bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border-top: 2px solid #ddd;
border-left: 2px solid #ddd;
border-right:2px solid #ddd;
border-bottom: 2px solid #ddd;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With Ridge Border Styles

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vebaYsGmnMAOCP-FJncGnJ_aBHZP3kwf3DoUvRDwi0JmEhSAair9bSXs_4m9JqPBeQD0oddkjU94VHjBpYs8c6pRwkRKToh-0XRbrOtwLzvuR10Sy1ltGoWgxjt0V0S7ki4uiQQd7cEA/s1600/blockquote.png) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1em Vivaldi, serif;
border-right : 3px ridge #FF8000;
border-bottom : 3px ridge #FF8000;
border-top : 3px ridge #FF8000;
border-left : 3px ridge #FF8000;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Putting Different Mouse Hover Effects on Images

---

Zoom

---

---

Left Side

---

---

Vertical

---

---

Tilt

---

---

Morph

---

---

Focus

---

---

Blur

---

---

Brightness

---

---

Opacity

---

---

Invert

---

---

Sepia

---

---

Contrast

---

Stylistic Copyrighted Codes In Blogger

.post blockquote {
margin : 0 20px;
padding: 20px 20px 50px 20px;
background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHspVLDuAaxvEQuNR80-AIvw8UjTnlPkeZKhwQlf9YJhyphenhyphen4OTD-8HpHHYaPbiha29WOtMHyGezb_yviJrezLUqBt9RTc6Pkactw-ZBVyhAZOpfXTZ2R1aBACSiDQXmoUMZ9vcbdiFtSbkA2/s1600/Copyrighted+blue+blockquote.png) no-repeat center bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border-top: 2px solid #158aee;
border-left: 2px solid #158aee;
border-right:2px solid #158aee;
border-bottom: 2px solid #158aee;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Angular Professional Post Blockquote

blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQckNtMuQjIWsYl8RTf8QiiH_m9Wh5blwRAjzpWX2bRBZQ19oWT4aqrFF9hyphenhyphen2FePoMpSEBbUfaFEG0S6QQOv9wocK16SHLtSbG8fXrqFeO0_oHCLokrsT7yfkZd7VyxQwqGhPCDVQZsQ52/s120/blockqute+3.png) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000;
border: 3px dotted #DDD;
} blockquote p {
margin: 0;
padding-top:1px;
}

Copyrighted Blockquotes

blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2tU_kiWremAmUE2mdYZXzN4WriExiIy7Z7q9B76K6jHmcUe_ggXiWrp7JMQ4xNtcehJmnD33XZwfYhJT7fsjlLVx9acZOPFvRp93rwixFW5MoQA1XRieE6zRt8hhBUUNWXc1Iwo6ZsFX/s1600/blockqutte+4.png) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Creating A Drop Down Menu To Blogger/Blogspot

• Home
• About
• Contact
• Templates
  • Hacks
  • Downloads
  • Advertise

Back to original tutorial here.

Sliding Recent Post Widget

Back to the original tutorial here.

Auto Scrolling Recent Post Widget In Blogger

Go back to the original tutorial here.

Adding a Spoiler or Show- Hide Effect in Blogger

Join the author  in his belief that "blogging unlike death is a destination with a return trip, one can go through it and come back  to tell people the essence of success".

 Above all, the author will offer this work of art to God Almighty who has given the wisdom to continue this mission.

Blogging tips and trix is always here to help you!

Back to Original Tutorial Here.

Putting a Cool Multi Column Footer Widget In Blogger

Please see the footer below this post.
1. Go back to  footer tutorial on putting multi column footer here.]
2. To the Customize Labels here.

Adding Colorful Vertical Menu Tabs In Blogger

Vertical Tab #1

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #2

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #3

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #4

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #5

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #6

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #7

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #8

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #9

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #10

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #11

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #12

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #13

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #14

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #15

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #16

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #17

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #18

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Vertical Tab #19

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

• Link 1
• Link 2
• Link 3
• Link 4
• Link5

Go back to the original tutorial here.

Customize Sidebar Using Animated Border

Please see the sidebar and hover your mouse on it.

Go back to original tutorial here.

Customize Post Title In Blogger- Increase Traffic

Please see the Post Title above.

Go back to the original tutorial here.