In this post i will explain, how to add
circle image gallery with pan style.This
will give a nice look to your blog.Im
using css3 for this gallery.It include
nice hover style. you can try to add it to
your blog. Earlier image effect post are
here. Check demo below.

Demo




1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3.Find this code  by using Ctrl+F  ]]></b:skin>

4.  Paste below code Before ]]></b:skin> code

/*GALLERY-Bloggertrix.com*/
.gallery {
    width: 800px;
    margin: 50px auto;}
ul {
    list-style: none;}
.gallery li {
    height: 100px;
    width: 100px;
    margin: 15px;
    float: left;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;}
.gallery li img {
    margin: -100px 0px 0px 0px;
    z-index: -1;
    -webkit-transition: margin 1.5s ease;
    -moz-transition: margin 1.5s ease;
    -o-transition: margin 1.5s ease;
    -ms-transition: margin 1.5s ease;
    transition: margin 1.5s ease;
}
.gallery li:hover img {
    margin-left: -150px;
    margin-top: -150px;
    cursor: pointer;
}
.gallery li p {
    width: 100px;
    padding: 20px;
    position: relative;
    left: 15%;
    top: 110%;
    z-index: 1;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font: bold 18px/1 Helvetica, Verdana, sans-serif;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    transition: top 0.5s ease;
}
.gallery li:hover p {
    top: 75%;
    margin:-55px 0 0 -35px;}

5. Go to blogger  Design > Page Element.

6. Click Add Gadget and select 'HTML/Javascript

7.Paste below code.

<div class="gallery">
        <ul>
            <li><p>Swing</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilircCyeDZcPUZKKqHrkjAYA-wV6NYEdY4ggeV3MWmapyl1T-SASyG0e8h02kVtCDvGkuywwLbz_ixReJc1QBCwEn283AiIi-Ev8DVCVBmNB2yRBzPJ_C2Q2YMA85zl4LOMDnlguL8Ads/s1600/bloggertrix-image1.jpg" /></li>
            <li><p>Surf</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObEtP3LWEwi_3K7yynzsmajKM3pty6j-XMv7-zH1CppwJmkjk7bVR3tdjXtv11qID4uq79Cf83kju8G7HVi03S4gjDokrKt62x848ISxH-ILkV5xKagMUFfiDfAj_0vqxH74jnnLjJEk/s1600/bloggertrix-image2.jpg" /></li>
            <li><p>Pedal</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJGOjuB1AEpWEZhCfEs606TkOsyJhyphenhyphenoWiCJhU-ZO6jN9hzRi2BgabmQCfVcuWp6UqaQAxcQtI-Y6YgMhr-STNppRnR6stv3eKxrhZ3KUiejVdJ3RFTzSbsh1sTdK9hJtEijk4kszX4yM/s1600/bloggertrix-image3.jpg" /></li>
            <li><p>Thrash</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47wwOAVvyVrTGhM5WwuKyh00_HOtEM329Tsghd7Bp8IMHeMcLF9bQpoKJntKHOFdPAhziGinfjHYssUEICy54_dDQjZL04zxyp0qq_FlIT5htoKwMjHNIquWP3P2TPO9PPxMC0Ntietw/s1600/bloggertrix-image4.jpg" /></li>
            <li><p>Ride</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHE8yZ9-t7NrhdZM8096dlJYh-6wvH3uoFWaREQ9d-0CRV_-7urbtty0an9aso2x_Xg7-3d0IwmMKejWz3wkCIguwZK4DTH_RdOi-Bo9D4D0T379_BO8tScm8ZhIxeJB0qRagC4w9m2sg/s1600/bloggertrix-image5.jpg" /></li>
            <li><p>Kick</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhPCMzkBWqsDrx_J2UM6iQA_8UWH9dufWDl4QoJ1MIadLvpcmaSOVqFlMkbqJwEPFRIXxB1kb3rCbukCOh5ydCgfs3vDPm8QAD1Vsbpz1OkboI_Lqs1-cAzawN5AQYREHPGME8DL-xpU/s1600/bloggertrix-image6.jpg" /></li>
            <li><p>Dive</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJRIhcqJ_WivH35a-yyju-i1NRLPsYSwq2Ofq-5o3BugW2wC82cxxJNhEF0OuNoTffTnmAeTCLViVCL6lUfIkWMJtCZErzlpV9ek9AahqQNuHxkUEUr37OA68WMjp3AwiaGwwzydGh_g/s1600/bloggertrix-image7.jpg" /></li>
        </ul>
</div>

8. Now save your template. You are done.

Related Blogger Tips

• The 3 Key Steps to Increasing Web Traffic
• 7 Reasons Why You CAN’T Make Money Blogging
• Blogger Tip: Importing Your Blog
• Add Multi-Colored Popular Posts to Blogger
• Stylish Animated Blogger Recent Posts Widget to Blogger
• Red Color Glossy CSS Menu Bar For Blogger
• Stylish Lite Blue CSS Menu Bar For Blogger
• Amazing CSS Image Circle Hover Effect For Blogger
• How To Add Pop Up Email Subscription Form For Blogger Using Jquery
• How To Add Cool Jquery Featured Post Slider to Blogger
• Add Animated CSS Image Labels For Blogger
• How To Add Animate Scrolling Text on Your Browser Title Bar
• How To Add Animated Flash Clock To Your Blogger Blog
• Animated Circle Gallery with Pan Style For Blogger
• How to add Unique Style Social Sharing Box For Blogger
• Awesome CSS3 Image Circle Hover Effect For Blogger
• 3 reasons why many bloggers get frustrated and what to do against it
• Changing Title Meta Tag can hurt Google Rankings
• Top 5 Ways To Create Conversions with Hangouts On Air
• Add Facebook Recommendations Bar To Blogger