Showing posts with label HTML Highlighter. Show all posts

Create A Simple JQuery Image Slideshow For Your Blog


Image slideshow can give a glance of the site featured contents in your blog. With featured contents appear at the first time visitors open your homepage, Clicks on your featured posts will be increased because people will have a chance to see them before the other posts.

Please do the following steps to create this slideshow :

1. Inserting CSS and scripts using the template's HTML editor. 

  • Go to Dashboard > Template. 
  • Click Edit HTML > Proceed. 
  • Use Ctrl + F to search for this code :
]]></b:skin>
  • Copy and paste the below codes BEFORE it : 
/* Start Slider Code From http://www.digita7seven.blogspot.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.digita7seven.blogspot.com/ */
  •   Now use Ctrl + F again to search for this code : 
</head>
  • Copy and paste the below codes BEFORE it :
<!-- Start Slider Code From http://www.digita7seven.blogspot.com/ -->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.digita7seven.blogspot.com/ -->
* Want to animate your blockquote like this? Create one using the codes from this post : Create Blockquote With Animated Mouse Hover Effect

  • To remove the number button, Change this code to FALSE : &#39;showMarkers&#39; : true, 
  • To remove the next/prev button, Change this code to FALSE : &#39;showControls&#39; : true, 
  • Save your template.

2. Go to LAYOUT - Click ADD A GADGET - Choose HTML/Java Script widget.

Copy paste the below codes into the HTML/Java Script widget box :

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
</ul>
</div>

    • Replace the above marked with red and Save your widget. 


Also from Amazon :   
      1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
      When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.

      Becoming A Blogger: How to Start a Blog This Afternoon and Make Money From Home For Years to Come (Make Money Online)
      Some bloggers make small, part-time incomes that supplement their full-time job. Others are making blogging their sole pursuit and earning a huge income each month. Blogging can be a big thing or a small thing depending upon how much time and energy you invest into your new venture.

      Other Great Stuffs : 

      Celebrity Blogging
      Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!

      If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
      Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!

      Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
      How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29

      1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !

      Read books on your computer or other mobile devices with FREE Kindle Reading Apps.

      How To Insert HTML Codes In Blogger Posts

      You can not show HTML codes in your blogger posts because Google has an auto XML parser that will translate all HTML codes to another form.

      If you want to put the codes in your posts for tutorial purpose, You can try this option :


      Online HTML highlighter


      1. Postable

       
        • Go to Postable 
        • Paste your HMTL codes into the box and click "Make It Friendly".
        • Copy the codes after being converted by postable.
        • Go to your NEW POST editor (You dont have to click the HTML tab to put these HTML codes from postable, Just paste it directly into the new post box).
              2. Hilite.me
            Hilite.me generates your HTML codes to make the codes readable in a post.


                    • Go to Hilite.me   
                    • Paste your HTML codes into the SOURCE CODE box. 
                    • Click the "Highlight" Button.
                    • Copy the generated HTML codes from HTML box.
                    • Go to your NEW POST editor and click the HTML tab instead of the COMPOSE tab.


                                   3. Simplecode
                                  This is a similar HTML highlighter with above mentioned. 

                                   
                                        • Go to Simplecode
                                        • Paste your HTML codes into the "Enter Markup" box. 
                                        • Click the "Process" button.
                                        • Copy the generated code from "Cut n' Paste" box.
                                        • Go to your NEW POST editor and click the HTML tab instead of the COMPOSE tab.

                                             


                                            • Put the generated code from Simplecode into the NEW POST box. 

                                              Also from Amazon :   
                                                  1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
                                                  When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.

                                                  Other Great Stuffs : 

                                                  Celebrity Blogging
                                                  Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!

                                                  If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
                                                  Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!

                                                  Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
                                                  How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29

                                                  1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !

                                                  Related link : How To Make A Custom Block Quote In Your Blog



                                                  ?max-results=10">');

                                                  ?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");