Cara membuat NIVO SLIDER pada blogspot

STEP 1 : Letakan coding CSS dibawah ini, diatas </b:skin>

• Pilih "Template" ~> "Edit HTML"
• Tekan Ctrl+F lalu ketikkan "</b:skin>"
• Letak coding yang ada dalam kotak dibawah ini, tepat diatas tulisan "</b:skin>"
• Lalu SAVE.

 /*  
 * jQuery Nivo Slider v2.5.1  
 * http://nivo.dev7studios.com  
 *  
 * Copyright 2011, Gilbert Pellegrom  
 * Free to use and abuse under the MIT license.  
 * http://www.opensource.org/licenses/mit-license.php  
 *  
 * March 2010  
 */  
   
 #slider-wrapper {  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZDYNMiOfwz9ZE1S2TZxn9bn0BqfAkROnBK0InwUS6IQm329nuty4XyD5VBO9J21I8QyoD5AFHhJI5BGpluw2FwZj1acxEOM3BmxmmPwpSYgNcZ6jxiu_OKIkknYY56qDmLzIxeaQZLwE/s1600/slider.png) no-repeat;  
 width:998px;  
 height:392px;  
 margin:0 auto;  
 padding-top:74px;  
 margin-top:50px;  
 }  
 #slider {  
 position:relative;  
 width:618px;  
 height:246px;  
 margin-left:190px;  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_PEIa4aV_PtY-cfbuiAJE6ALNw3rBqSvAxxHW4jAN_enaQD7NzSFxsozUCDYpmAexW-kOpVw3go2WeubButrzjrD4bzHCJK3-ELg9ZlkH7yUeruC2mT-CvMQHq4e6x5vvff6cwweiB2E/s1600/loading.gif) no-repeat 50% 50%;  
 }  
 #slider img {  
 position:absolute;  
 top:0px;  
 left:0px;  
 display:none;  
 }  
 #slider a {  
 border:0;  
 display:block;  
 }  
 .nivo-controlNav {  
 position:absolute;  
 left:260px;  
 bottom:-42px;  
 }  
 .nivo-controlNav a {  
 display:block;  
 width:22px;  
 height:22px;  
 background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYsI67esPY5QNtsoVgvMmh39UUVDzIQRbrs49g-gp7Tw0xocyXbG4_nSQecs7Vr3S48bNWT6JnPreq6JJf3L6BobaQU-dEZWM-u3SBXQV9Sn0-272XS5xsNBlivsI0XA-Rb3geKpnp6ow/s1600/bullets.png) no-repeat;  
 text-indent:-9999px;  
 border:0;  
 margin-right:3px;  
 float:left;  
 }  
 .nivo-controlNav a.active {  
 background-position:0 -22px;  
 }  
 .nivo-directionNav a {  
 display:block;  
 width:30px;  
 height:30px;  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9QL_p2LXA8dioKWy47-MGsTlEdHyHJUxfSgT0uFWEgHAdn7u7vuv-_AFEFO3G5Ues7T1mztJ9dzICQs1oEdh7uL4JLVXLGWmfupAjaZy0oJ-TsdHyQ_tjjGXm6-7aLuRy4g0nxfKP8c/s1600/arrows.png) no-repeat;  
 text-indent:-9999px;  
 border:0;  
 }  
 a.nivo-nextNav {  
 background-position:-30px 0;  
 right:15px;  
 }  
 a.nivo-prevNav {  
 left:15px;  
 }  
 .nivo-caption {  
 text-shadow:none;  
 font-family: Helvetica, Arial, sans-serif;  
 }  
 .nivo-caption a {  
 color:#efe9d1;  
 text-decoration:underline;  
 }  
 /* The Nivo Slider styles */  
 .nivoSlider {  
 position:relative;  
 }  
 .nivoSlider img {  
 position:absolute;  
 top:0px;  
 left:0px;  
 }  
 /* If an image is wrapped in a link */  
 .nivoSlider a.nivo-imageLink {  
 position:absolute;  
 top:0px;  
 left:0px;  
 width:100%;  
 height:100%;  
 border:0;  
 padding:0;  
 margin:0;  
 z-index:6;  
 display:none;  
 }  
 /* The slices and boxes in the Slider */  
 .nivo-slice {  
 display:block;  
 position:absolute;  
 z-index:5;  
 height:100%;  
 }  
 .nivo-box {  
 display:block;  
 position:absolute;  
 z-index:5;  
 }  
 /* Caption styles */  
 .nivo-caption {  
 position:absolute;  
 left:0px;  
 bottom:0px;  
 background:#000;  
 color:#fff;  
 opacity:0.8; /* Overridden by captionOpacity setting */  
 width:100%;  
 z-index:8;  
 }  
 .nivo-caption p {  
 padding:5px;  
 margin:0;  
 }  
 .nivo-caption a {  
 display:inline !important;  
 }  
 .nivo-html-caption {  
 display:none;  
 }  
 /* Direction nav styles (e.g. Next & Prev) */  
 .nivo-directionNav a {  
 position:absolute;  
 top:45%;  
 z-index:9;  
 cursor:pointer;  
 }  
 .nivo-prevNav {  
 left:0px;  
 }  
 .nivo-nextNav {  
 right:0px;  
 }  
 .nivo-directionNav a {  
 display:block;  
 width:30px;  
 height:30px;  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9QL_p2LXA8dioKWy47-MGsTlEdHyHJUxfSgT0uFWEgHAdn7u7vuv-_AFEFO3G5Ues7T1mztJ9dzICQs1oEdh7uL4JLVXLGWmfupAjaZy0oJ-TsdHyQ_tjjGXm6-7aLuRy4g0nxfKP8c/s1600/arrows.png) no-repeat;  
 text-indent:-9999px;  
 border:0;  
 }  
 a.nivo-nextNav {  
 background-position:-30px 0;  
 right:15px;  
 }  
 a.nivo-prevNav {  
 left:15px;  
 }  
 /* Control nav styles (e.g. 1,2,3…) */  
 .nivo-controlNav a {  
 position:relative;  
 z-index:9;  
 cursor:pointer;  
 }  
 .nivo-controlNav a.active {  
 font-weight:bold;  
 }  
 .nivo-controlNav a {  
 display:block;  
 width:22px;  
 height:22px;  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYsI67esPY5QNtsoVgvMmh39UUVDzIQRbrs49g-gp7Tw0xocyXbG4_nSQecs7Vr3S48bNWT6JnPreq6JJf3L6BobaQU-dEZWM-u3SBXQV9Sn0-272XS5xsNBlivsI0XA-Rb3geKpnp6ow/s1600/bullets.png) no-repeat;  
 text-indent:-9999px;  
 border:0;  
 margin-right:3px;  
 float:left;  
 }  

STEP 2 : Letakan coding JavaScript dibawah ini, diatas </head>

• Pilih "Template" ~> "Edit HTML"
• Tekan Ctrl+F lalu ketikkan "</head>"
• Letak coding yang ada dalam kotak dibawah ini, tepat diatas tulisan "</head>"
• Lalu SAVE.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>  
 <script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>  
 <script type='text/javascript'>  
 $(window).load(function() {  
 $(&#39;#slider&#39;).nivoSlider();  
 });  
 </script>  

STEP 3 : Cara memanggil Nivo Slider

• Pilih "Page Element" atau "Tata letak"
• Pilih "Add A Gadget" atau "Tambah Gadget"
• Masukan coding dibawah ini, kedalam kolom "HTML/JavaScript"
• Lalu Save dan lihat hasilnya ^^

 <div id="slider">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgidV217KX2LN6JLVymU_dXE4D66GqjUhMblkIbQJxAR2QI-L0D5TZxQLt58N2Y_1KuxkPNVqSXUbWaVdmdf-9t7j-MD2qDHsmvarpKzTy-A0I4vZGw621QwRpfW89XKFx9m9QzIOpRjQQ/s1600/toystory.jpg" alt="" />  
 <a href="http://dev7studios.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-_PQnzk4k2m8tRi5JAHnf08PDqTxmFGdoYTdG4oZ-zOjRT7AuyZywb7EMlwqG5PsGNCv7Bkgc0pfJdTpcsu0gqwH2wjDwU0J2jBrnbrtf1mcncS6rQpqFyXBZzvLDWzVdECR_u4Y0Ag/s1600/up.jpg" alt="" title="#htmlcaption" /></a>  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8J8gKz9BaMRnP012XkbpQ9XNgQJRPR9Ifl3BceaG6b2nqr7-GKqB6FteECrX644kuw2qHzBSs1SsEtzX2BAMy9DbuhfSKP0FMJCtNeFw9Ex5PaKRqvJuv6LwTTMmMl87rbbQOsqo1AZc/s1600/walle.jpg" alt="" title="This is an example of a caption" />  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7RYnEDS3sj9JAaDNY34y26288spjZVWBuxbjoJn_UCNP4nNLD5rcp34YaB7e6NCxjYO34phxH3jQFdn64VgbrWQUyrmhC-HekOv8ez7D7jHF-3I_S5mqsX2rFf4-R42bWc-JraEDoAI/s1600/nemo.jpg" alt="" />  
 </div>  
 <div id="htmlcaption" class="nivo-html-caption">  
 <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.  
 </div>  

Informasi bermanfaat ini Saya dapatkan dari :
http://bloggerbin.com/add-nivo-slider-in-bloggerblogspot/