Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...
Seo Master present to you: This Blogger hack will show you how to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts and besides this, it could as well improve the look and feel of your blog.

Note: This works with the previous blogger commenting system, so if you want to add this hack, you should remove first the Blogger threaded comments. Learn here How to remove Blogger threaded comments

UPDATE! Now you can add comment bubble in your threaded comments too. Read this tutorial:
How to Add Numbered Comments In Threaded Comments
blogger blogspot, tricks

How to add numbered comments on our Blogger/Blogspot blog
how to blog, blogspot blogger

Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)


 Step 2. Select "Expand Widget Template" (make a backup)

    Step 3. Now find (CTRL+F) the following code in your template:

    <b:loop values='data:post.comments' var='comment'>

    Step 4. Immediately above/before it, paste this code:

    <script type='text/javascript'>var CommentsCounter=0;</script>

    Step 5. Find this code:

    <data:commentPostedByMsg/>

    Step 6. And immediately below/after it, copy and paste this:

    <!--comments-count-starts-->
    <span class='comments-number'>
    <a expr:href='data:comment.url' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </span>
    <!--comments-count-stops-->

    Step 7. Find (CTRL+F) this tag in the template:

    </head>

    Step 8. Paste this code just above/before it:

    <!-- comments-count-starts-->
    <style type="text/css">
    .comments-number a:link, .comments-number a:visited {
    color: black !important;
    text-decoration: none !important;
    background: url(http://www.matrixar.com/-zrPssaxSG2E/T47v-XB1EWI/AAAAAAAAB8E/uUz8RiJnW2U/s1600/comment+bubble+1.png) no-repeat;
    width: 50px; /*image-width size*/
    height: 48px; /*image-height size*/
    float: right;
    display: block;
    margin-right: 5px;
    margin-top: -15px; /*comments-counter position*/
    text-align: center;
    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
    font-size: 15px;
    font-weight: normal;
    }
    .comments-number a:hover, .comments-number a:active {
    color: #1BA0E1 !important;
    text-decoration: none !important;
    }
    </style>
    <!-- comments-count-stops-http://www.matrixar.com-->

    Note:
    • To change the comment bubble, replace the red text from above with your own address
    • To change the color of the numbers, replace the blue text with the hex value of your color

    Comment Bubbles 

    To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":


    how to blogblogger blogspotblogspot blogger, how to blogwidget blogger blogspotblogs, how to blogblogspot or blogger, how to blogtutorials, how tocomments, how to, blogspot bloggernew comment, how to blogblog design, bloggerblogger.com


    IMPORTANT: You could use any image instead of the one linked in the code above (STEP 8) but after that, you should modify the size values (width and height), so that the numbers inside the bubble to be correctly adjusted.

    Step 9. Save the template... and enjoy your comments :]

    You might also be interested in this tutorial from the same category:
    How to Add a Comment Bubble to Blogger Post Titles.


    2013, By: Seo Master

    seo How to number comments in Blogger/BlogSpot 2013

    Seo Master present to you:
    Time to boost your blog page-views,here is incredible hack via which you can show the related posts to blog article below every Blog post,along with beautiful thumbnails.The data for related posts are fetched from Blog Labels and different posts.Applying this hack will help you to host your visitors with great luxury,as a result he will remain long time on your blog seeing different interesting related articles. 
    related-posts-widget-for-blogger
    Live Demo

    How To Add Related Posts Widget With Thumbnails To Blogger


    • Go To Blogger Dashboard
    • Click On template and Then Click On edit HTML
    • Now Search for </head> Tag
    • Now Copy the below script and paste it above </head> Tag
    <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;http://www.matrixar.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;; var maxresults=4; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
    Note :-
    - If you want to change the Default Picture to your own or any other picture,then simply replace the Green URL With your Own image URL.
    -For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
    -If you want to display this widget also in Home Page then remove the Blue script from the above script

    • Now Search for The below Script (Note The Below mentioned Code is 2 times in magazine style Blogger Templates so do paste the below Code after each.)
    <div class='post-footer'>

    • Now Copy the below script and paste it  above <div class='post-footer'>
    <!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.matrixar.com'><img alt='Blogger Tricks' src='http://www.matrixar.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->
    Note:-
    -For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
    -If you want to display this widget also in Home Page then remove the Blue script from the above script.

    • Now just hit save template and that's it

    So What's Up

    Adding Related Posts Widget With Thumbnails To Blogger will help you to boost your Blog page-views,actually this post is originally written by HelpLogger,So Script Credit Goes to HelpLogger.If you have any question related this article,must pass comments.Stay Blessed,Happy Blogging.



    2013, By: Seo Master

    seo How To Add Related Posts Widget With Thumbnails To Blogger 2013

    Seo Master present to you:

    Bubblis is a word puzzle game developed OnGame Creative. The main goal of the game is to build words using letters filled in the bubbles. The game is available on iOS and Android. 
    The iOS version of this game needs 195 MB of free space while the Android versions needs only 15MB of free space. The game is having good graphics.



    The characters Bleeb and Bloob also form part of game. Bleeb is an ally who at the beginning indicates with luminous circles where letters can be placed. Bleeb also provides wings to slow down falling letters, allowing for more time to finish the rounds. On the other hand, the evil Bloob stalls game progress using bubbles filled with: vapor, smoke, ink, bombs, mines, or resonance. These characters make the more interesting and special.


    It is available in 44 languages distributed among 154 countries. The languages include:
    English, Simplified Chinese, Japanese, Spanish, German, French, Portuguese, Russian, Arabic, Korean, Italian, Traditional Chinese, Dutch, Turkish, Polish, Malay, Thai, Swedish, Indonesian, Norwegian, Greek, Tagalog, Catalan, Czech, Hebrew, Danish, Finnish, Romanian, Hungarian, Vietnamese, Slovak, Hindi, Bulgarian, Afrikaans, Croatian, Lithuanian, Slovenian, Latvian, Estonian, Macedonian, Maltese, Armenian, Euskera and Galician.

    Requirements For iOS: Compatible with iPhone 3GS, iPhone 4, iPhone 4S, iPod touch (3rd generation), iPod touch (4th generation) and iPad. Requires iOS 4.0 or later.

    Requirements For Android: Android 2.2 and up

    2013, By: Seo Master

    seo Play with words: Bubblis 2013

    Powered by Blogger.
    Design by Dev Nasser