Hide Content Using Toggle Effect In Blogger

hide content through toggle effect
Recently, I made a post on how to make a content spoiler in blogger and many of it have benefited. Although, some of it got confused on its application but at the end they have  arrived at a better result. Today, I am thinking to publish an article on hiding the  blog content using a different code on that previous post.  Take a look at the live below:

Lorem ipsum dolor sit amet, cum wisi virtute eu, sit illum molestie ne.
Pro ad tollit dictas, ad quo erat eloquentiam, te quis indoctum quo.
Quo no quas legendos prodesset, in ponderum percipitur eam, vim inermis cotidieque ea.
Vis ei labores offendit iracundia, sed ea tantas delenit verterem. In nec delectus pericula.

Duo ex menandri recusabo elaboraret, enim luptatum mei id.
Ius velit dicam consectetuer eu, his tollit nonumes dignissim ne.
Labore commodo expetendis mei at. Dico accusam pri te.

Quaestio consequat cu vel, nec ei tota dolorem definitiones.
Ex cum luptatum convenire, ius ne labores postulant, in alii cibo vivendo quo.
Tation fuisset eu qui. Ut nec altera quodsi audire.
Cum te partem gloriatur, ut his civibus interpretaris, alii nostrum consequuntur in sed.
An quo lorem causae.

Et audiam tritani mea. Integre inimicus qui in, te pri latine prodesset.
Usu audire vocibus lucilius ad, has affert nusquam recusabo id.
At agam putant civibus qui, sed te graecis forensibus, dicta omnium appellantur ius an.
Ei rebum fabulas quo, ius dicit luptatum ut.
Et mucius possit vix, has id eirmod explicari referrentur, vis melius sensibus interpretaris .

Cu mel platonem necessitatibus, in nam appetere torquatos adversarium, cum cu dicta repudiare .
Minim platonem splendide mel te, pro sale doming ei.
Sed cu ferri liber oportere. Tale illud scripserit no usu.
Cu eos diam assueverit comprehensam, ea vix oporteat nominati.

Hiding Content Using Toggle Effect


Go to Blogger Dashboard
Click Post or New Post
Switch your Blogger Post Editor's Page in HTML Mode
Copy and Paste the code below:
Note: If you want to use this effect in most of your posts, you can simply copy the code within the style attributes only and paste it to your Blogger's template above the code ]]></b:skin>

<style>label.code-button { background: #3498db; background-image: -webkit-linear-gradient(top, #168eca, #ddd); background-image: -moz-linear-gradient(top, #168eca, #ddd); background-image: -ms-linear-gradient(top, #168eca, #ddd); background-image: -o-linear-gradient(top, #168eca, #ddd); background-image: linear-gradient(to bottom, #ddd, #2980b9); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; font-family: Arial; color: #ffffff; font-size: 12px; padding: 5px 5px 5px 5px; text-decoration: none;}
.checked-selector1, .checked-selector2, .checked-selector3, .checked-selector4 { max-height: 0; max-width: 0; opacity: 0; overflow: hidden; white-space:nowrap;-webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease; -o-transition:all 1.5s ease; transition:all 1.5s ease; }
input[type=checkbox]:checked ~ .checked-selector1, input[type=checkbox]:checked ~ .checked-selector2, input[type=checkbox]:checked ~ .checked-selector3, input[type=checkbox]:checked ~ .checked-selector4 { max-height: 100%; max-width: 100%; opacity: 1;}
input[type=checkbox] { height: 0; width: 0; opacity: 0; }
</style>

<br />
<center>
<label class="code-button" for="toggle-hidden1">Click to see the code</label></center>
<input id="toggle-hidden1" type="checkbox" />

<br />
<div class="checked-selector1">
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here
</div>


Save your work and you're done!

Note:
If you have more than one content to hide, you can use the div class below respectively:
<div class=".checked-selector2">
 <div class=".checked-selector3">
 <div class=".checked-selector4 ">

Thanks for the time and God Bless Folks!!!

Top 5 Free Camtasia Studio Alternatives

In this article, I'll highlight the main 5 free Camtasia Studio choices that can help you to create enlightening instructional features and exhibitions for your next  awesome undertaking. I'll additionally walk you through how to utilize every one of them, so you can start exploiting these free screencast devices immediately.

Recommended:
Top Video Uploading Sites And Make Money On It
Top Most Popular File Sharing Websites

Free Camtasia Studio Alternatives


Camtasia Studio is one of my most loved instruments. It issues you the capacity to make screen recordings, to alter and alter your substance, and to incorporate it into your undertakings. Then again, despite the fact that it does offer a mixture of capacities and highlights, it will last just for one month since it is just a trial variant. The uplifting news is that there are various free Camtasia Studio options that can give any eLearning proficient the chance to catch screen pictures and create fantastic screen recordings.

Thus, now is the ideal time to make first class excercises, walkthroughs, and screencast features with these free Camtasia Studio options.

1. Windows Movie Maker


You can import photos and videos from many different kinds of cameras and devices to your PC using Movie Maker. When you import photos and videos, they are copied from the camera or device to your PC. After that, you can use them in your movies in Movie Maker, and they'll appear in Photo Gallery too.

Here are some devices that you might import photos or videos from:

A digital camera or phone that's connected to your PC with a USB cable

A Secure Digital (SD), mini SD or CompactFlash storage card that's in a card reader

A data CD or DVD

A video camera that records to an internal hard drive or flash storage card

A videotape that's in a digital video (DV) camera or High‑Definition Video (HDV) camera

If you have a webcam built into your PC or connected to your PC with a USB cable, you can record live video from a webcam and add it to Movie Maker.

2. CamStudio


This product is extraordinary for excercises. It permits you to record all screen and sound action on your PC (Windows framework) and is preferably suited for demos. CamStudio is free for your own and business ventures. You can make industry-standard AVI feature documents and utilizing its implicit SWF Producer you can transform these AVIs into data transmission cordial Streaming Flash features (SWFs). Download the CamStudio and get help making your first screen catch or feature by going to CamStudio bolster discussion or FAQ.


3. EZVid



Issues you the capacity to record and alter screen catches, and also transfer your excercise, demo, or feature specifically to YouTube. You can record a feature up to 45 minutes long, and highlights voice combination and slideshow creation instruments. Note that this system is accessible for Windows working frameworks and you must have DirectX 9.0 or higher. Visit EZVid to download the system and begin recording screen catches or making superb how-to features for your crowd.

4. FFsplit



Stacked with a mixture of valuable highlights, this free screencast instrument permits you to catch and record astounding features for your deliverables. Download the product free of charge and afterward stream live feature or record demos and excercises. Note that you will need to utilize a free FFmpeg project to encode and stream features made through Ffsplit. There is likewise a group discussion on the FFsplit site where you can get tips and counsel from different clients.


5. Fraps



Lives up to expectations with Windows and is perfect for catching gaming screencasts, and additionally whatever other applications that use OpenGL or DirectX design. It's additionally intended for benchmark screen catches and constant feature. Just download Fraps and begin making features or amazing screen shots. Best of all, the system naturally spares the catches for you, which implies that you won't need to waste time sticking them into an altering program each time you need to make a screen picture.

Hope  this post had helped you make videos more memorable!

How To Add Page/Jump Break In Blogger

Most of the blogs have applied a read more link to show a small summary of each post on the homepage rather than showing the whole post content. This has been the another way and the simple way of not displaying the whole content on the homepage or archive page. Blogger offers a feature called 'After the Jump' which makes your large posts appear in the form of small post summary with a read more link that leads you to the full view of the post. In this article, we will show you how to add a page break in Blogger.
add page break in blogger
Also Read: How To Create Magazine Style With Post Summaries And Thumbnails On Blogger

How to Add page break/jump break in Blogger?


Blogger  Dashboard >> Edit a Post >>.
Now you have to decide where you want  to place the jump break in the content and place the mouse cursor at that location. (Please see the image below)
add jump break in blogger

Once you have successfully placed your cursor on a location, click the Insert Jump Break toolbar icon in the toolbar.

Now you’ll notice a gray bar separating your content. This is the exact place where your post summary would look alike.
add post summary in blogger

Once you have successfully placed the jump break, you are good to publish or Update your posts and that’s it.
Also Read: How to add show-hide effect or content spoiler in Blogger

Final Words:


On some other way, we hope this tutorial  have helped you in learning how to add page break/jump break in blogger.
Questions regarding this post is acceptable. Thanks and GOD Bless!!!

Add Facebook Popup Like Box in Blogger


Facebook has turned into the main online networking administration on the Internet playing host to more than 1.3 billion clients; of those, 800 million login to their dashboard bolsters at any rate once a day. On account of the limitless number of dynamic clients on administrations like Facebook, getting new perusers as a blogger or substance supplier has ended up less demanding than at any other time in recent memory.




With a specific end goal to create a powerful advanced battle, you totally must exploit social networking by doing things like coordinating Facebook on Blogger. Email advertising can be valuable, yet it accompanies confinements that could restrain your blog's potential. Maybe the most huge issue is that messages don't accompany a face or identity like Facebook does.

Also Read: Add Facebook Pop Like Box With Timer In Blogger


Add Numbered Page Navigation Widget In Blogger

Have you seen "Older Posts" and "Newer Posts" navigation links in your homepage and archive pages? You have this kind of links to access your pages since Blogger doesn't have any built-in function on page numbering.Here's an excercise on the best way to include numbered page route utilizing Javascript to a Blogger/ blogspot blog.

add  numbered page navigation in blogger


 You can choose any of the 7 separate styles that I have specified beneath. In this tweak, I will show you  the best way to include numbered page navigation using Javascript to a Blogger/ Blogspot blog. You can choose any of the 7 separate styles that I have specified beneath.


Advantage of Using Page Numbered Navigation:


Page numbered Navigation  could help our website guests to explore faster (bounce starting with one page then onto the next page or click on a particular page) and know the total number of posts distributed.


Adding Numbered Page Navigation to Blogger


We will divide this tutorial into two steps.
Adding The CSS.
Adding The Script.

Now let's see how to add the CSS style for  your page navigation.

1. Adding The CSS


Go to Blogger Dashboard > Template > click on the Edit HTML button
Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.
Type or paste the following tag inside the search box and hit Enter to find it:
]]></b:skin>
Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1


numbered page navigation style 1
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Style 2:


numbered page navigation style 2
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:


numbered page navigation style 3
 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4:


numbered page navigation style 4
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5


numbered page navigation style 5
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6


numbered page navigation style 6
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7


numbered page navigation style 7
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Note: if you want to hide the "First" and "Last" buttons add this line below the CSS code:
.firstpage, .lastpage {display: none;}

2. Adding The Script


Now find (CTRL + F) this tag:
</body>
UPDATED! Working version for more than 500 posts:

Add the following script just above it:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://bloggingtipsandtrix.googlecode.com/svn/new-page-navigation.js"/>
</b:if>
</b:if>

Configuration

After installing, you might want to change these default settings:
perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}
perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.

numPages: how many pages will be shown in the page navigation (6)

To replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.

Labels fix:


By default, Blogger will show 20 posts on label pages. To make this widget appear on label pages, we will have to cut down this down to the value that we gave for the perPage variable.

Find each occurrence of the following code snippet:
expr:href='data:label.url'
Replace it with this one below:
expr:href='data:label.url + "?&amp;max-results=7"'
Here 7 is the number of posts to be displayed per page.
Click on the Save Template button and that's it! Enjoy!
Reference:helplogger

Flash Animated Label Cloud Widget For Blogger

add animated  label cloud
Hello there! I was thinking to change the way I presented my labels and finally found  a way to make it. This is called flash animated label cloud  for blogger and this is awesome compared to show blogger  labels in alternatively. This widget works on  Word Press, and now it is available for Blogspot blog.

In this widget, we access label tags randomly by your mouse hover in flash mode to see the animation begin, the labels are animated around a sphere.  And the beauty of this widget is you can customize very easily.

 Have a glance of  my sidebar to see the live demo!

Flash Animated Label Cloud Widget For Blogger 


Go to Blogger Dashboard >> Lay-out
Click the Add a Gadget button
Select HTML/Javascript button
Inside the box, paste the code below
<script type="text/javascript">
/*<![CDATA[*/
var bloggingtipsandtrixFlashLabelSettings = {
    blogurl        : "http://codes2tipsandtricks.blogspot.com/",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 250,
    height         : 300,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="https://bloggingtipsandtrix.googlecode.com/svn/flash-label-cloud.js"></script>

You can customize the above code only those highlighted one like the blog URL (replace it with your blog url), color of the text, background color, size of the text, speed, width and its height.

Click Save and you're done!