Showing posts with label Blogger tricks and gadgets. Show all posts
Showing posts with label Blogger tricks and gadgets. Show all posts

Link nudging effect for blogger labels

It's good to be different and for the same reason try adding some effects to your blog, here is one of the effects [labels link nudging effect for blogger]


  • Login to blogger dashboard
  • Now go to settings-->template-->edit HTML-->Proceed
  • And find the following piece of code
           </head>
  • And add the following code just before/above it
          <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'    type='text/javascript'></script>
          <script type='text/javascript'>
           var dur = 400; // Duration Of Animation in Milli Seconds
           $(document).ready(function() {
           $('a.linknudge, .Label ul li a').hover(function() {
                    $(this).animate({
                    paddingLeft: '25px'
                    }, dur);
                 }, function() {
                $(this).animate({
                 paddingLeft: 0
                  }, dur);
                        });
                }); // end of Jquery Script
            </script>
  • Save the template
  • You can neglect the code in pink color if your template already contains it.
  • You can do experiment with "var dur =400;" and "padding left:'25px', give suitable values to match your requirement.

Customizing the new blogger threaded comments with admin comments highlited.

You can add some css effects to the new blogger threaded comments,to do so 
  • login to you blogger dashboard
  • select template-->edit HTML-->proceed.
  • And find the following piece of code
        ]]></b:skin>
  • Add the below given code just before/above it.
  • Save the template.
  • Scrollbox Make sure all the code is selected:
/*Blogger Threaded Comments Styles From http://www.free4uzione.blogspot.in*/ #comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#1e05d8} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvqiy23BYgsXvfWxzb9e8T1Jaoq2fRgkPbCF0fy_drkSC6soEZTwIdzksvgWDoMsXt9ykiv2UxoT_Up2oFcOsi5L9mfjcGSfF83alYUGDEfDtPUNY6Hr2dupe0gUjiKF5Lv5bmUlRDyo8/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%} /*Blogger Threaded Comments Styles From http://www.free4uzione.blogspot.in */


Example : Before adding css


Aafter adding css

        
Now you can play with the color codes mentioned in the code to get your favorite colors


Blogger new threaded comments

Sine blogger had started many changes took place and now blogger recently introduced the new threaded style comments.
How to activate the new threaded style comments :

  • Login to blogger dashboard 
  • And from Settings-->Posts and Comments--> Comment location and select Embedded            
  • Save the template 


  • Now  go to Settings-->other-->Allow blog feed-->select Custom and--Per-post comment feed  to  full
    
  •   Thats it the new blogger threaded comments should work 
Even then if the new threaded comments style is not working let's do some code work.
  • Select template-->edit HTML--> Proceed--> Expand Widgets Templates      
  • Now find each occurrence the following piece of code 
           <b:include data='post' name='comments'/>  
  • And replace every occurrence with the following 
          <b:if cond='data:post.showThreadedComments'>
          <b:include data='post' name='threaded_comments'/>
          <b:else/>
          <b:include data='post' name='comments'/>
          </b:if>

Now save the template , and your blog will now have threaded comments.


You can customize [add css] to get some special effects as shown in demo like [admin comments highlighted] go to tutorial : http://free4uzione.blogspot.in/2012/06/customizing-new-blogger-threaded.html
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Free4uZione - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger