Installing Auto Slideshow CoinSlider in Blogger

Coinslider is made with jQuery slideshow that has an interesting transition effects. Transition effects that exist in this slideshow are swirl, rain, straight. Because the effect is not so much that this slideshow only has the size (12KB).
Looking at the structure of HTML to create this slideshow is not too complicated. So I tried to make it in the version autoslideshow (combined with feed bloggers). Well for those of you who want to install a blog you can follow the steps presented below. While interested in the manual version can be read diwebsitenya workshop.rs.

Displays the Add a Gadget on Blog Post

If your blog has not performed button / writing add gadgets on top of Blog Posts follow these steps to display it:

On the dashboard select Templates and then click the Edit HTML

Then find the code <b: section class = 'main' id = 'main' showaddelement = "no"> and replace fox showaddelement be yes so it becomes like this <b: section class = 'main' id = 'main' showaddelement = 'yes'>

NB: To facilitate the search press Ctrl + F on your keyboard and write a <b: section class = 'main' id = 'main' showaddelement = "no">.

click Save

Add gadgets HTML and script Slideshow CoinSlider

On the dashboard select the Layout / Layout and then click on the Add a Gadget on Blog Post Area

After that, scroll down to find the HTML / JavaScript and click the add button there right corner

Then Enter the following code:

<style scoped="" type="text/css">

#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}.coin-slider{overflow:hidden;zoom:1;position:relative}.coin-slider a{text-decoration:none;outline:none;border:none}.cs-buttons{font-size:0;padding:10px;float:left}.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}.cs-active{background-color:#B8C4CF;color:#FFFFFF}.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}.cs-title strong{display:block;font-size:120%}.cs-title p{margin:0}.cs-title cite{font-size:90%}.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>var AutoCoinConfig = { url_blog: "http://mkr-site.blogspot.com", MaxPost: 7, cmtext: "Komentar", MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", NoCmtext : "Belum Ada Komentar", imageSize :500, SumChars : 100, tagName:false, width: 500, height: 250, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: '', navigation: true, links : true, hoverPause: true, prevText: 'prev', nextText: 'next'};</script><script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script>

  On line 17 is a jQuery script link library. If there is an existing template, please delete the code. Since the installation of more than one jQuery Library can make an error
click Save.

Gadget wrap HTML with Conditional Tags

 If the above step is finished now wrapping stage gadget with conditional tags to organize wherever this slideshow want displayed.
For example, a gadget that just want to be displayed in the front yard / porch as follows
On the dashboard select the template and click the Edit HTML and check on the Expand Widget Templates
Then find the code <b: section class = 'main' id = 'main' showaddelement = 'yes'>, having previously been added HTML widget it will show the type of HTML widget with id HTMLxx (xx: number of HTML widget).
For example, the HTML widget with id HTML5 will I add tags conditional only on the front page / homepage
Then it will be like this:

<b:widget id='HTML5' locked='false' title='' type='HTML'>

<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/></b:if></b:includable></b:widget>

Click Save.