Search Blog

Scrolling Text For Notification Message

Scrolling text is a good way to convey important message to viewers.If you have any notification or latest news that you want to share with your view then this trick may help you get your viewers attention.

animated text notification
 The first one is very simple with white background and second has
blue can text and change color of background.

  simple scrolling text message simple scrolling text message simple scrolling text message


you can replace simple scrolling text message with your text ans save it.

Note: you can add scrolling text in html of post or add html/javascript gadget and paste above code and save it.  
{ Read More }

Simple Blogger Post Slider With Carousel Effect

Post slider is a awesome way to impress your can place this slider below can add link in this post can add feature post or popular post,You can add link of your choice its totally customize widget to add any link for slider in  have no need to edit your template, just add this widget in gadget of html/javascript by going layout of blogger.this slider become in action when you mover your cursor over slider image and if you click on image it will redirect to link of post you added.when you move cursor toward right slider post move to show more post behind while moving toward left it show more post same wise.

feature post slider for blogger

In below image you can see slider boarder is blue but we can change it.i will describe customization of slider and can change url link to image and when you hover your mouse you can see title of post.It can also be change.while if you want to add more post in slider then you have to do few more step, i will also describe how to add as many post as you want in slider.

How to add feature post slider

Login to blogger account go to layout

Add gadget of Html/javascript 

Paste below code there.

<style>    #BloggerSpiceCarouselSlider {      height:130px;      background-color:#ffffff;      border:2px solid #3399ff;      position:relative;      margin:50px 50px;      overflow:auto;    }        #BloggerSpiceCarouselSlider:before,    #BloggerSpiceCarouselSlider:after {      content:"";      display:block;      position:absolute;      top:0;      bottom:0;      left:-4px;      width:4px;      height:100%;      box-shadow:0 0 4px black;      z-index:10;    }    #BloggerSpiceCarouselSlider:after {      left:auto;      right:-4px;    }/* CarouselSlider by  */    #BloggerSpiceCarouselSlider .container {      position:absolute;      top:0;      left:0;      margin:5px 0 0 5px;      width:300%;      height:120px;    }    #BloggerSpiceCarouselSlider figure {      display:block;      background-color:white;      float:left;      width:150px;      height:120px;      margin:0 5px 0 0;      position:relative;      overflow:hidden;    }    #BloggerSpiceCarouselSlider figcaption {      display:block;      position:absolute;      right:0;      bottom:-50px;      left:0;      background-color:black;      font:italic normal 11px Arial,Sans-Serif;      color:white;      padding:4px 10px;      text-align:left;      opacity:.8;    }    #BloggerSpiceCarouselSlider figure img {      display:block;      border:none;      margin:0 0;    }    </style>    <div id="BloggerSpiceCarouselSlider">        <div class="container">            <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>            <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>            <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>      <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>            <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>            <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>      <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>            <figure>                <a href="#" title="Title for Caption2">                    <img alt="" src="" />                </a>            </figure>            <figure>                <a href="#" title="Title for Caption">                    <img alt="" src="" />                </a>            </figure>        </div>    </div>
    <script type='text/javascript' src=''></script>    <script type='text/javascript'>//<![CDATA[    (function($) {        var config = {            itemMargins: 5 // Distance between the thumbnails        };        var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),            $container = $thumbnailScroller.find('.container'),            $item = $container.find('figure'),            item_length = $item.length,            item_width = $item.outerWidth(),            item_margin = config.itemMargins,            total_width = (item_width + item_margin) * item_length,            $window = $(window);        $thumbnailScroller.css('overflow', 'hidden');        $container.css('width', total_width);        // Auto caption builder & hover effect        $item.each(function(cap) {            if ($(this).children().attr('title')) {                cap = $(this).children().attr('title');                $(this).children().removeAttr('title');                $(this).append('<figcaption>' + cap + '</figcaption>');            }        }).hover(function() {            $(this).find('figcaption').stop().animate({                bottom: 0            }, 200);        }, function() {            $(this).find('figcaption').stop().animate({                bottom: -50            }, 200);        });        $window.on("resize", function() {            var o_l = $thumbnailScroller.offset().left,                t_w = $thumbnailScroller.width(),                c_w = total_width;            $thumbnailScroller.on("mousemove", function(e) {                if ($(this).width() < $container.width()) {                    $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));                }            });        }).trigger("resize");    })(jQuery);    //]]>    </script>

Place the gadget below header and do not forget to save arrangements.

How to change image and links in slider

You will find many section like this in above code highlighted in red color.

                <a href="#" title="Title for Caption">
                    <img alt="" src="image url" />

Change # with link of your post link

Replace Title for Caption with your post title, use small title for post.

Upload your image on blogger or any where on internet.copy your image url and replace it with image url in slider.

Remember use image of 150px width x 120px height

Save gadget after every change.Enjoy beautiful post slider in blogger.I have tested this slider widget, it is working fine but if you have any problem in installing feel free to ask me.Also hit like if you think this post is helpful.
{ Read More }

Add Live Recent Visitors Details In Blogger

If you want to track your live visitors information and other details like which post they visit , the time of visit and can know all detail on your visitors and also make your visitors tell about this.This is live recent traffic feed widget.In blogger yo have to add it manually while direct installation option is also available to add live traffic feed in recent traffic feed also tell the time of visit,live recent visits help to increase your page views.before adding it let me tell yo about this widget.

live recent visitors

Live traffic feed

you can customize live visitors can select how many visitors will be show like ten or more you can customize the widget can change the widget of live recent widget according to your blog can change color background,color of text color of link border color and other can view in above image the sample of live traffic recent visitor details.

adding live recent visitors information is very simple.As very template is different and every person has different choice live traffic widget allow to customize widget to their choice.This is very popular and all over the world blogger using this widget you may have seen it on some one other recent visitors details help to increase your blog exposure to your visitors.It also tell visitors what other people viewing on your blog and if they like it they can click on link and visit the post hence this way live traffic feed increase your blog visits.

How to add live recent visit feed

Adding live recent visitors feed take only few minutes to add in blogger.

1 First you have to customize feed about according to your requirement.

2 For customization go to below link

custom widget

3 The above image is the view of customization.After selecting option for customization click go.Make sure you have select blogger blog in option.

you will be redirected to new page.copy that generated code.

4 Now login to blogger account go to layout add gadget of HTML/Javascript  and paste that code there and save it.

you can share your experience of live recent visitors information.Although every person has its own view.i would like to read your comments.
{ Read More }

Add Contact Us Form ON Specific Page In Blogger

Adding contact page is very beneficial because people can contact you directly via.It is the way of communication with blogger and visitors.some blogger do not like contact form because they think comments is enough to talk with viewer while some bloggers think adding separate contact us form in top navigation bar is good for conversation because this is the private conservation with viewer and blogger.some people ask how to add contact us form on specific page like static page.we add other pages like  home button so if you want to add contact form on specific page then you may need little bit effort.

contact us on specific page

why to add contact us on specific page

If you are trying to add contact us form on sidebar instead on specific page then you  need few simple add can official contact us form from layout add gadget.It is your choice either you want to add contact form on specific page of on sidebar.Mostly contact us form can be seen in top navigation menu at static page.mostly blogger add on specific page because contact us can easily seen from top.

add stylish contact form in blogger

How to contact us form on certain page

1 First login to blogger account

2 Go to layout add gadget and click on  more gadget

3 Add contact us gadget in your blog.

4 Now go template and find this code by pressing ctrl+f


5 paste the below code before ]]></b:skin>

div#ContactForm1 {  display: none !important;}

visit your blog now you can see your contact us form disappear.

If it is still not disappear then go to template and click customize > go to advanced > click add css and paste above code there and click apply to blog.

6 Go to pages add new page. write title if want your write.

7 Now go to Html of post, as you can see in below image

editing html of page

8 Paste the blow code there.

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><style>.twist_blogger_cntct_form_wrap {  margin: 0 auto;  max-width: 840px;  padding: 0 10px;  position: relative;  background-color: #FDFDFD;}.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {  content: '';  display: table;  clear: both;}/*----Change Contact Form Background Color Here----*/div#twist_blogger_cntct_form {  padding: 20px 20px 10px 20px;  background: #009fff;  border-radius: 2px;  margin: 20px auto 20px;  color: #FFF;  font-size: 16px;  max-width: 260px;}input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {  padding: 5px;  box-shadow: none!Important;  min-width: 186px;  max-width: 260px;  width: 100%;  border: 0 !important;  line-height: 1em;  min-height: 31px;  background: #FCFCFC;  margin-bottom: 15px;}/**** Submit button style ****/.contact-form-button-submit {  background: #009fff;  font-size: 20px;  letter-spacing: 2px;  cursor: pointer;  outline: none!important;  color: #FFFFFF;  border: 2px solid rgba(255,255,255,1);  border-radius: 50px;  min-width: 186px;  max-width: 260px;  width: 100%;  text-transform: uppercase;  height: 46px;  margin-top: 10px!important;  transition: all 300ms ease-;  -webkit-transition: all 300ms ease-in-out;  -moz-transition: all 300ms ease-in-out;}/**** Submit button on mouse hover ****//**** widget by ****/.contact-form-button-submit:hover {  border: 2px solid;  color: #FFFFFF;  background: #24a7f6!important;}/**** Submit button on Focus ****/.contact-form-button-submit:focus, .contact-form-button-submit.focus {  border-color: #FFFFFF;  box-shadow: none !important;}/**** Error message and Success Message ****/.contact-form-error-message-with-border .contact-form-success-message {  background: #f9edbe;  border: 1px solid #f0c36d;  bottom: 0;  box-shadow: 0 2px 4px rgba(0,0,0,.2);  color: #666;  font-size: 12px;  font-weight: bold;  padding-bottom: 10px;  line-height: 19px;  margin-left: 0;  opacity: 1;  position: static;  text-align: center;}</style>
<br /><div class="twist_blogger_cntct_form_wrap"><div id="twist_blogger_cntct_form"><form name="contact-form">Your Name<br /><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br /><br />Your Email*<br /><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br /><br />Your Message*<br /><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br /><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br /><div style="max-width: 260px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form><br /></div></div></div>

9 Use this setting for contact page.

10 click on compose and click publish.

11 Go to  layout and edit page menu widget

Then new pop up appear click add external page

12 Write title contact us.copy the url of page you made recently.paste the link in the option and save it. Make sure check box is selected because template show only selected pages.

Now visit your blog and your process is finished.Enjoy colorful contact form in specific page.

How to check your messages

I also want to tell you how this work and how you can check message sent by people via contact form.when people want to contact you they go the page.they have to provide their name email and there message at the last.when they press send button then message take some time to be delivered.To check your contact messages go to inbox of gmail account.when you go inbox you can see top categories primary message, social and promotional.Messages sent by contact form can be read easily in primary.

I have check, this contact form is working fine.If you want to

confirm you can send message via contact form.Do not use current blogger email for sending message via contact form then you can check your email.To reply contact message you have to reply to mail from your gmail account.
{ Read More }

IconIconIconFollow Me on Pinterest