Best Image Slider

Pure CSS3 (Boundary Style) Image Slider for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMhsAAebgh5Tkc63Tfo9I_WTpE0ndXw_oP99pJBnLiNuLbM23WmUDC-6euhSCDaVusvCMfPyPPPzPZn5xZPWPVXVJv2ID1W3_z9WJzjk3AfUknlRho4iHBhoPOQUImhXwHyOSlTCdjYA/s1600/bandicam+2015-07-05+21-24-47-440.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMhsAAebgh5Tkc63Tfo9I_WTpE0ndXw_oP99pJBnLiNuLbM23WmUDC-6euhSCDaVusvCMfPyPPPzPZn5xZPWPVXVJv2ID1W3_z9WJzjk3AfUknlRho4iHBhoPOQUImhXwHyOSlTCdjYA/s1600/bandicam+2015-07-05+21-24-47-440.jpg" /></a></div>
<br />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://bestimagesliderforblogger.blogspot.com/p/demo-anqular-featured-content-slider.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR-ZrqvTDRx76PRGX0DFhOnRWXXvrvaHRkTMiLFGEU2BlE-1mPzAATCh4QrRhi3IE38Z_zCn5jIU3GiJYYNKErKsd411b88k6vHufEX0DVsNcPSi9dCrFTTmcTMKq1sIM9GgZPXcC6Zs/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR-ZrqvTDRx76PRGX0DFhOnRWXXvrvaHRkTMiLFGEU2BlE-1mPzAATCh4QrRhi3IE38Z_zCn5jIU3GiJYYNKErKsd411b88k6vHufEX0DVsNcPSi9dCrFTTmcTMKq1sIM9GgZPXcC6Zs/s640/1.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Go to Template Tab >> Edit Template.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGolKXGvjbaFY_OMGaAg-UFujrBPnEMhdjloK9uLTOzGqYq0iCNa29C-FKYjHjGEAjPPs8ShBNB_3hquk1aV44qzmozTip2CTQSgFFVTrDDRa6CKXkVXb8gkhlxgXgGb64yk1DTsbx2XQ/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGolKXGvjbaFY_OMGaAg-UFujrBPnEMhdjloK9uLTOzGqYq0iCNa29C-FKYjHjGEAjPPs8ShBNB_3hquk1aV44qzmozTip2CTQSgFFVTrDDRa6CKXkVXb8gkhlxgXgGb64yk1DTsbx2XQ/s640/2.jpg" width="640" /></a></div>
<br />
 <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">3. Paste the Code (Below the Post) just above </head> Tag.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwuVa9iyx56xui8M1OPVFYv4f50gQeVWjVfQR5lvJiePiTDsQwYJJSskq_KPi_fmGWIFovhGH9kIK_ZPSyPbEqrdB4Fu-BuVB38xMkGvODTdGoBXWL0wNebQO6eWqVxkhXN9E_ppyb8I/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwuVa9iyx56xui8M1OPVFYv4f50gQeVWjVfQR5lvJiePiTDsQwYJJSskq_KPi_fmGWIFovhGH9kIK_ZPSyPbEqrdB4Fu-BuVB38xMkGvODTdGoBXWL0wNebQO6eWqVxkhXN9E_ppyb8I/s640/3.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">4. Now, Go to Layout Tab.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV2xpy9-_v3VyvcgBWVXZg_RO_-58VUJiHNLhPIw5w1AwCiLF-rY7MWpSiXBLI7XifgU6oMZGfgKtSU-V33Zn2wzyMiiXiQSvhyxpFawdFLmEOaGduSXzhncuzqoRGQviwgz00SB_-ew/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV2xpy9-_v3VyvcgBWVXZg_RO_-58VUJiHNLhPIw5w1AwCiLF-rY7MWpSiXBLI7XifgU6oMZGfgKtSU-V33Zn2wzyMiiXiQSvhyxpFawdFLmEOaGduSXzhncuzqoRGQviwgz00SB_-ew/s640/4.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">5. Add a Gadget >> HTML/Javascript.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IWrj3E98uD5_QOk7gFKVmC1eRSLxUiq02O9zLO6dKA4xbI819HEmmPgPz-LjzY1ut9kczngrVpv6QwIpw0UPuwdQIEpzoDSC-Nz5AVasHbs_DL853h4EfOlY91ZxSyJsUGZ_X33Nrl8/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IWrj3E98uD5_QOk7gFKVmC1eRSLxUiq02O9zLO6dKA4xbI819HEmmPgPz-LjzY1ut9kczngrVpv6QwIpw0UPuwdQIEpzoDSC-Nz5AVasHbs_DL853h4EfOlY91ZxSyJsUGZ_X33Nrl8/s640/5.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">6. Paste the Code in HTML/Javascript.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4iigWwT7wtgwjKgBzuQoRMdaBg_XARQHgD88Xt1zZqknAh8vpzsz4ufT8JQyMMfQhkP4M2mp-NdHkyuiPTCvwsxy8xqWAmQXzjPb2bBqd3PCXVoqulPAgkWIx5c-r3drG2yh2ZQU5Vk/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4iigWwT7wtgwjKgBzuQoRMdaBg_XARQHgD88Xt1zZqknAh8vpzsz4ufT8JQyMMfQhkP4M2mp-NdHkyuiPTCvwsxy8xqWAmQXzjPb2bBqd3PCXVoqulPAgkWIx5c-r3drG2yh2ZQU5Vk/s640/6.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="background-color: white; font-size: 12px; line-height: 19.2000007629395px;">YIPEEEE... You can see Your Blog Now...</span></span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<br />
<div style="clear: both; text-align: center;">
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzAP5Cx-8gAOY_VWbK822EYHZ9taQz6qlNdaVHUgO2T-KIvFEzAeVPsUCyZSGGrJOhCoVgduy-AvghQvreNGfG1zKgII4RHZ5adLcKwtKuZ4kuTqulwV4YD1Mkupvem3XsFka2gQNryc/s1600/output_m55ypa.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzAP5Cx-8gAOY_VWbK822EYHZ9taQz6qlNdaVHUgO2T-KIvFEzAeVPsUCyZSGGrJOhCoVgduy-AvghQvreNGfG1zKgII4RHZ5adLcKwtKuZ4kuTqulwV4YD1Mkupvem3XsFka2gQNryc/s640/output_m55ypa.gif" width="640" /></a></div>
<br /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<br />
<span style="background-color: white; color: #0000ee; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">                                                            </span><a class="button big green external_link" href="http://bestimagesliderforblogger.blogspot.com/p/demo-anqular-featured-content-slider.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; padding: 10px 20px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">See the Code</a></div>

Pure CSS3 (Boundary Style) Image Slider for Blogger

Live Demo 1. Go to Blogger Dashboard. 2. Go to Template Tab >> Edit Template. 3. Paste the Code (Below the Post) ju...

9:47 AM

Anqular Featured Content Slider for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQS_jtUZ-xFwkfIlavNd4PZChatZ2H3ze7_NxSeCFKuKisTxXKUY0Q1oa8smiRS9IfRiK3AqJLO00PDH1MPLELhYtvSUckujuPCVYSAxi9AhZLj0urASZetYgKwYK_MYEDCbZcaX1xmE8/s1600/bandicam+2015-07-05+21-09-15-049.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQS_jtUZ-xFwkfIlavNd4PZChatZ2H3ze7_NxSeCFKuKisTxXKUY0Q1oa8smiRS9IfRiK3AqJLO00PDH1MPLELhYtvSUckujuPCVYSAxi9AhZLj0urASZetYgKwYK_MYEDCbZcaX1xmE8/s400/bandicam+2015-07-05+21-09-15-049.jpg" width="400" /></a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://bestimagesliderforblogger.blogspot.com/p/demo-anqular-featured-content-slider.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR-ZrqvTDRx76PRGX0DFhOnRWXXvrvaHRkTMiLFGEU2BlE-1mPzAATCh4QrRhi3IE38Z_zCn5jIU3GiJYYNKErKsd411b88k6vHufEX0DVsNcPSi9dCrFTTmcTMKq1sIM9GgZPXcC6Zs/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR-ZrqvTDRx76PRGX0DFhOnRWXXvrvaHRkTMiLFGEU2BlE-1mPzAATCh4QrRhi3IE38Z_zCn5jIU3GiJYYNKErKsd411b88k6vHufEX0DVsNcPSi9dCrFTTmcTMKq1sIM9GgZPXcC6Zs/s640/1.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Go to Template Tab >> Edit Template.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGolKXGvjbaFY_OMGaAg-UFujrBPnEMhdjloK9uLTOzGqYq0iCNa29C-FKYjHjGEAjPPs8ShBNB_3hquk1aV44qzmozTip2CTQSgFFVTrDDRa6CKXkVXb8gkhlxgXgGb64yk1DTsbx2XQ/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGolKXGvjbaFY_OMGaAg-UFujrBPnEMhdjloK9uLTOzGqYq0iCNa29C-FKYjHjGEAjPPs8ShBNB_3hquk1aV44qzmozTip2CTQSgFFVTrDDRa6CKXkVXb8gkhlxgXgGb64yk1DTsbx2XQ/s640/2.jpg" width="640" /></a></div>
<br />
 <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">3. Paste the Code (Below the Post) just above </head> Tag.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwuVa9iyx56xui8M1OPVFYv4f50gQeVWjVfQR5lvJiePiTDsQwYJJSskq_KPi_fmGWIFovhGH9kIK_ZPSyPbEqrdB4Fu-BuVB38xMkGvODTdGoBXWL0wNebQO6eWqVxkhXN9E_ppyb8I/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwuVa9iyx56xui8M1OPVFYv4f50gQeVWjVfQR5lvJiePiTDsQwYJJSskq_KPi_fmGWIFovhGH9kIK_ZPSyPbEqrdB4Fu-BuVB38xMkGvODTdGoBXWL0wNebQO6eWqVxkhXN9E_ppyb8I/s640/3.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">4. Now, Go to Layout Tab.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV2xpy9-_v3VyvcgBWVXZg_RO_-58VUJiHNLhPIw5w1AwCiLF-rY7MWpSiXBLI7XifgU6oMZGfgKtSU-V33Zn2wzyMiiXiQSvhyxpFawdFLmEOaGduSXzhncuzqoRGQviwgz00SB_-ew/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV2xpy9-_v3VyvcgBWVXZg_RO_-58VUJiHNLhPIw5w1AwCiLF-rY7MWpSiXBLI7XifgU6oMZGfgKtSU-V33Zn2wzyMiiXiQSvhyxpFawdFLmEOaGduSXzhncuzqoRGQviwgz00SB_-ew/s640/4.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">5. Add a Gadget >> HTML/Javascript.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IWrj3E98uD5_QOk7gFKVmC1eRSLxUiq02O9zLO6dKA4xbI819HEmmPgPz-LjzY1ut9kczngrVpv6QwIpw0UPuwdQIEpzoDSC-Nz5AVasHbs_DL853h4EfOlY91ZxSyJsUGZ_X33Nrl8/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IWrj3E98uD5_QOk7gFKVmC1eRSLxUiq02O9zLO6dKA4xbI819HEmmPgPz-LjzY1ut9kczngrVpv6QwIpw0UPuwdQIEpzoDSC-Nz5AVasHbs_DL853h4EfOlY91ZxSyJsUGZ_X33Nrl8/s640/5.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">6. Paste the Code in HTML/Javascript.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4iigWwT7wtgwjKgBzuQoRMdaBg_XARQHgD88Xt1zZqknAh8vpzsz4ufT8JQyMMfQhkP4M2mp-NdHkyuiPTCvwsxy8xqWAmQXzjPb2bBqd3PCXVoqulPAgkWIx5c-r3drG2yh2ZQU5Vk/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4iigWwT7wtgwjKgBzuQoRMdaBg_XARQHgD88Xt1zZqknAh8vpzsz4ufT8JQyMMfQhkP4M2mp-NdHkyuiPTCvwsxy8xqWAmQXzjPb2bBqd3PCXVoqulPAgkWIx5c-r3drG2yh2ZQU5Vk/s640/6.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="background-color: white; font-size: 12px; line-height: 19.2000007629395px;">YIPEEEE... You can see Your Blog Now...</span></span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<br />
<div style="clear: both; text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzAP5Cx-8gAOY_VWbK822EYHZ9taQz6qlNdaVHUgO2T-KIvFEzAeVPsUCyZSGGrJOhCoVgduy-AvghQvreNGfG1zKgII4RHZ5adLcKwtKuZ4kuTqulwV4YD1Mkupvem3XsFka2gQNryc/s1600/output_m55ypa.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzAP5Cx-8gAOY_VWbK822EYHZ9taQz6qlNdaVHUgO2T-KIvFEzAeVPsUCyZSGGrJOhCoVgduy-AvghQvreNGfG1zKgII4RHZ5adLcKwtKuZ4kuTqulwV4YD1Mkupvem3XsFka2gQNryc/s640/output_m55ypa.gif" width="640" /></a></div>
<br /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<br />
<span style="background-color: white; color: #0000ee; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">                                                            </span><a class="button big green external_link" href="http://bestimagesliderforblogger.blogspot.com/p/demo-anqular-featured-content-slider.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; padding: 10px 20px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">See the Code</a></div>

Anqular Featured Content Slider for Blogger

Live Demo 1. Go to Blogger Dashboard. 2. Go to Template Tab >> Edit Template. 3. Paste the Code (Below the Post)...

8:36 AM

Absent jQuery Image Slider (WOW Slider) For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8YNL6ebC6vVpe85v5VWKsc3jK48AIejh716X57821goUHH4TkcVeHnhbmZ22s-WgVJQ2nCMiV8uuWtKAmxgweJ6ydYC5lXNnAmD2zDUlejyotbzOQUPkmaXTPIdpCBaJR0CbnjgsQ6F8/s1600/bandicam+2015-07-05+16-12-25-902.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8YNL6ebC6vVpe85v5VWKsc3jK48AIejh716X57821goUHH4TkcVeHnhbmZ22s-WgVJQ2nCMiV8uuWtKAmxgweJ6ydYC5lXNnAmD2zDUlejyotbzOQUPkmaXTPIdpCBaJR0CbnjgsQ6F8/s320/bandicam+2015-07-05+16-12-25-902.jpg" width="320" /></a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://bestimagesliderforblogger.blogspot.com/p/demo-absent-jquery-image-slider-for.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR-ZrqvTDRx76PRGX0DFhOnRWXXvrvaHRkTMiLFGEU2BlE-1mPzAATCh4QrRhi3IE38Z_zCn5jIU3GiJYYNKErKsd411b88k6vHufEX0DVsNcPSi9dCrFTTmcTMKq1sIM9GgZPXcC6Zs/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR-ZrqvTDRx76PRGX0DFhOnRWXXvrvaHRkTMiLFGEU2BlE-1mPzAATCh4QrRhi3IE38Z_zCn5jIU3GiJYYNKErKsd411b88k6vHufEX0DVsNcPSi9dCrFTTmcTMKq1sIM9GgZPXcC6Zs/s640/1.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Go to Template Tab >> Edit Template.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGolKXGvjbaFY_OMGaAg-UFujrBPnEMhdjloK9uLTOzGqYq0iCNa29C-FKYjHjGEAjPPs8ShBNB_3hquk1aV44qzmozTip2CTQSgFFVTrDDRa6CKXkVXb8gkhlxgXgGb64yk1DTsbx2XQ/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGolKXGvjbaFY_OMGaAg-UFujrBPnEMhdjloK9uLTOzGqYq0iCNa29C-FKYjHjGEAjPPs8ShBNB_3hquk1aV44qzmozTip2CTQSgFFVTrDDRa6CKXkVXb8gkhlxgXgGb64yk1DTsbx2XQ/s640/2.jpg" width="640" /></a></div>
<br />
 <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">3. Paste the Code (Below the Post) just above </head> Tag.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwuVa9iyx56xui8M1OPVFYv4f50gQeVWjVfQR5lvJiePiTDsQwYJJSskq_KPi_fmGWIFovhGH9kIK_ZPSyPbEqrdB4Fu-BuVB38xMkGvODTdGoBXWL0wNebQO6eWqVxkhXN9E_ppyb8I/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwuVa9iyx56xui8M1OPVFYv4f50gQeVWjVfQR5lvJiePiTDsQwYJJSskq_KPi_fmGWIFovhGH9kIK_ZPSyPbEqrdB4Fu-BuVB38xMkGvODTdGoBXWL0wNebQO6eWqVxkhXN9E_ppyb8I/s640/3.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">4. Now, Go to Layout Tab.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV2xpy9-_v3VyvcgBWVXZg_RO_-58VUJiHNLhPIw5w1AwCiLF-rY7MWpSiXBLI7XifgU6oMZGfgKtSU-V33Zn2wzyMiiXiQSvhyxpFawdFLmEOaGduSXzhncuzqoRGQviwgz00SB_-ew/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV2xpy9-_v3VyvcgBWVXZg_RO_-58VUJiHNLhPIw5w1AwCiLF-rY7MWpSiXBLI7XifgU6oMZGfgKtSU-V33Zn2wzyMiiXiQSvhyxpFawdFLmEOaGduSXzhncuzqoRGQviwgz00SB_-ew/s640/4.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">5. Add a Gadget >> HTML/Javascript.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IWrj3E98uD5_QOk7gFKVmC1eRSLxUiq02O9zLO6dKA4xbI819HEmmPgPz-LjzY1ut9kczngrVpv6QwIpw0UPuwdQIEpzoDSC-Nz5AVasHbs_DL853h4EfOlY91ZxSyJsUGZ_X33Nrl8/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IWrj3E98uD5_QOk7gFKVmC1eRSLxUiq02O9zLO6dKA4xbI819HEmmPgPz-LjzY1ut9kczngrVpv6QwIpw0UPuwdQIEpzoDSC-Nz5AVasHbs_DL853h4EfOlY91ZxSyJsUGZ_X33Nrl8/s640/5.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">6. Paste the Code in HTML/Javascript.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4iigWwT7wtgwjKgBzuQoRMdaBg_XARQHgD88Xt1zZqknAh8vpzsz4ufT8JQyMMfQhkP4M2mp-NdHkyuiPTCvwsxy8xqWAmQXzjPb2bBqd3PCXVoqulPAgkWIx5c-r3drG2yh2ZQU5Vk/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4iigWwT7wtgwjKgBzuQoRMdaBg_XARQHgD88Xt1zZqknAh8vpzsz4ufT8JQyMMfQhkP4M2mp-NdHkyuiPTCvwsxy8xqWAmQXzjPb2bBqd3PCXVoqulPAgkWIx5c-r3drG2yh2ZQU5Vk/s640/6.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="background-color: white; font-size: 12px; line-height: 19.2000007629395px;">YIPEEEE... You can see Your Blog Now...</span></span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span>
<br />
<div style="clear: both; text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzAP5Cx-8gAOY_VWbK822EYHZ9taQz6qlNdaVHUgO2T-KIvFEzAeVPsUCyZSGGrJOhCoVgduy-AvghQvreNGfG1zKgII4RHZ5adLcKwtKuZ4kuTqulwV4YD1Mkupvem3XsFka2gQNryc/s1600/output_m55ypa.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzAP5Cx-8gAOY_VWbK822EYHZ9taQz6qlNdaVHUgO2T-KIvFEzAeVPsUCyZSGGrJOhCoVgduy-AvghQvreNGfG1zKgII4RHZ5adLcKwtKuZ4kuTqulwV4YD1Mkupvem3XsFka2gQNryc/s640/output_m55ypa.gif" width="640" /></a></div>
<br /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<br />
<span style="background-color: white; color: #0000ee; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">                                                            </span><a class="button big green external_link" href="http://bestimagesliderforblogger.blogspot.com/p/demo-absent-jquery-image-slider-for.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; padding: 10px 20px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">See the Code</a></div>

Absent jQuery Image Slider (WOW Slider) For Blogger

Live Demo 1. Go to Blogger Dashboard. 2. Go to Template Tab >> Edit Template. 3. Paste the Code (Below the Post) j...

7:23 AM

jQuery Image Slider For Blogger / Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<img alt="jQuery Image Slider For Blogger / Blogspot" border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6B_YmbJw60uppzJlS8aHbUWwXMnHpsyGINo8tG2Y8Yjw6YeSQ7s6fm4LXeS5kNAntDunOfJell97ii9B_O5UjBkBtnB09d9PPkW42e9YKEAoxIViHnaOIjHfvyaTuEO0VgCn1-OLZUTM6/s1600/jQuery+Image+Slider+For+Blogger+Blogspot.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" width="500" /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/jquery-image-slider-for-blogger-blogspot.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Paste the following code in HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2p0vZfnUKv_mwsfiyy7q1B9QMXmN5twTYCdwxkdQ3K5cPquoFFe0ibg-2youlIwbkpWxaD87HyOEn0AXIZTN22IS5FN1TAcUynARAeQlFy-dkcwdZhsOGjo5gJkOKBmF72txMt-IYRCE/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.2000007629395px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/mbt-slider-0-01-jis.js" type="text/javascript"/></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/mbt-slider-0-02-jis.js" type="text/javascript"/></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/mbt-slider-0-03-jis.js" type="text/javascript"/></script><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
jQuery.noConflict();<br />
jQuery(function(){<br />
jQuery('ul.menu-primary').superfish({<br />
animation: {opacity:'show'},<br />
autoArrows: true,<br />
dropShadows: false,<br />
speed: 200,<br />
delay: 800<br />
});<br />
});<br />
<br />
jQuery(function(){<br />
jQuery('ul.menu-secondary').superfish({<br />
animation: {opacity:'show'},<br />
autoArrows: true,<br />
dropShadows: false,<br />
speed: 200,<br />
delay: 800<br />
});<br />
});<br />
<br />
jQuery(document).ready(function() {<br />
jQuery('.fp-slides').cycle({<br />
fx: 'fade',<br />
timeout: 4000,<br />
delay: 0,<br />
speed: 1000,<br />
next: '.fp-next',<br />
prev: '.fp-prev',<br />
pager: '.fp-pager',<br />
continuous: 0,<br />
sync: 1,<br />
pause: 1,<br />
pauseOnPagerHover: 1,<br />
cleartype: true,<br />
cleartypeNoBg: true<br />
});<br />
});<br />
<br />
/* ]]> */<br />
<br />
</script><br />
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><br />
<style type="text/css"><br />
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}<br />
.fp-slides{}<br />
.fp-post{padding:13px;}<br />
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}<br />
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}<br />
.fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}<br />
.fp-title a{color:#000;text-decoration:none;}<br />
.fp-title a:hover{color:#0080fF;text-decoration:none;}<br />
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}<br />
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}<br />
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}<br />
.fp-nav{width:590px;padding:0px 10px;height:14px;}<br />
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGaTl9MS2ScEVz-2taMuIlYdj0jfe00vcsXEzDxOjO4AsBJ7cSkhVsKzkcwwYiEQ5ECpR5Op0OO0n18Lz0Z955JDGPHVA0fq5iw0tikwXWcEFyNrip3HjhOknBLiUBnFkREZamCxsRfeA/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}<br />
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}<br />
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincDPiGCKjTqhBs5PmpNqDP2jQyq5xSVbAeezZSrg8BTsgz44Hw2LR_S1byRed2a7MhX5KZMAuL427TdADVmijhNZBUMDveU1ZyQLdUH6xC-8RWWH0Vc7-Z4FWoulMEgMuiUnSmQbc_h4/s1600/featured-prev-24work-1.png) top left no-repeat;}<br />
.fp-prev:hover{opacity:1;}<br />
.fp-prev:active{opacity:0.7;}<br />
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_aXkLGvSoyCY4zCOWmzhh2wi5p-RRsDXACvtAhXc-dgtDgamDL2zQ-rFt1Pxi3fV9Vev-reOyrFg1TmAgtctWzojo2emgTRMk1nwGrM8qKfS-tZAhDBia1GU3s_4Dn5cWKcepDDG1i4/s1600/featured-next-24work-1.png;) top left no-repeat}<br />
.fp-next:hover{opacity:1;}<br />
.fp-next:active{opacity:0.7;}<br />
</style><br />
<br />
<br />
<br />
<div class="featuredposts clearfix"><br />
<div class="fp-slides"><br />
<div class="fp-post"><br />
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGREd7uLne2yXSCM3u3nwYa5Vb27UY1EEpZcXasGbdDydJ18HSBLX7ZX7G49iApqVSgGdAPCnInsPPJ3lapSPaWoyI1yQ943hwez_iDQHyUl8Cf0IvtiRnBJQ7cwtfQ859Fo9x6TrmJoo/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="266"/></a></div><br />
<h3 class="fp-title"><a href='#' target='_blank'><b style="background-color: orange;">Title-of-Post</b></a></h3> <p> Slide Description [...] </p><br />
</div><br />
<br />
<div class="fp-post"><br />
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ89KH24n6mAdYgHkqs56XEg13NTZsWDXfBXTSB_7YB1Iowfog-iSYSlDTWgxZbeeMj5SUARtJq4-vjRQ3GrQfflAw9LDRHR254uB5kEMNK189WCdSVUsFjVHPM3QbnDANnjwYfjIAO9zm/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="266"/></a></div><br />
<h3 class="fp-title"><a href='#' target='_blank'><b style="background-color: orange;">Title-of-Post</b></a></h3> <p> Slide Description [...] </p><br />
</div><br />
<br />
<div class="fp-post"><br />
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewByYiKTcrnAQT1LrG2tAE0HTgwjMqM4QxTEwMZMUDPrydCdwpAyS-OXjRs2d_QHiiRFyC_YbqhyYyOuKTJpnN-YA6kzxmig_fHthn5V9dJYaXY0lXE6_eQ8orw7PPAui2AQpvie9Yq1E/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="266"/></a></div><br />
<h3 class="fp-title"><a href='#' target='_blank'><b style="background-color: orange;">Title-of-Post</b></a></h3> <p> Slide Description [...] </p><br />
</div><br />
<br />
<div class="fp-post"><br />
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KnF82hsNhBXi_8e8-7BHdxb9mGiEeCuG_l7OTDRzO71WLW8vQaL7KkqUoKXuLo3p_Ner4wwIq9Pqh_T-kMK5k7dxySKd4qu0C_3-f82rwKxI5eHlo9HJbyyoBuPUWDoi0v8hcBwYzO8l/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="266"/></a></div><br />
<h3 class="fp-title"><a href='#' target='_blank'><b style="background-color: orange;">Title-of-Post</b></a></h3> <p> Slide Description [...] </p><br />
</div><br />
<br />
<div class="fp-post"><br />
<div class="fp-thumbnail"><a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank"><img alt="How To Add Animated Flash Clock To Your Blogger Blog" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiBpPiasqgLZ2WyGbicWnsv8PQECWT05cI1z0pgwc6TSGoqXw4aYEqSdAlncVGwFcDk8fgVec2ZlVfMhuIZYB7WbFRNlQwgoo39iq5u6fOdPYOYSsRCUFRWpcUQzGlqNOs-dgtKSahdlC/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="266"/></a></div><br />
<h3 class="fp-title"><a href='#' target='_blank'><b style="background-color: orange;">Title-of-Post</b></a></h3> <p> Slide Description [...] </p><br />
</div><br />
<br />
</div><br />
<div class="fp-nav clearfix"><br />
<span class="fp-pager"></span><br />
<a class="fp-next" href="#fp-next"></a><br />
<a class="fp-prev" href="#fp-prev"></a><br />
<br />
</div><br />
</div></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" /></div>

jQuery Image Slider For Blogger / Blogspot

Live Demo 1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box. 2. Paste the followin...

7:31 AM

Shoutmeloud Featured Content Slider for Blogger Using jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<img alt="Shoutmeloud Featured Content Slider for Blogger Using jQuery" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDusnnx0Qjnma3D-bL_a4zorQJp-OjNPSP_U8XyAfQ_qa_jd0KPOPxNUaY2S1L84wzsWU07piJwEbYGF-7GqxiFHyEfPcEWMAF-YJ5m8Fxz0lIDVfKe6wseKLEfjjWvUh_w8psaBLXLlF/s1600/Shoutmeloud+Featured+Content+Slider+for+Blogger+Using+jQuery.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" width="500" /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/shoutmeloud-featured-content-slider-for-blogger.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Paste the following code in HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2p0vZfnUKv_mwsfiyy7q1B9QMXmN5twTYCdwxkdQ3K5cPquoFFe0ibg-2youlIwbkpWxaD87HyOEn0AXIZTN22IS5FN1TAcUynARAeQlFy-dkcwdZhsOGjo5gJkOKBmF72txMt-IYRCE/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.2000007629395px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;">
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/contentslider-n-b-l-t-r.js" type="text/javascript"></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-026.js" type="text/javascript"></script><br />
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><br />
<style type="text/css"><br />
.sliderwrapper{<br />
position: relative; /*leave as is*/<br />
overflow: hidden; /*leave as is*/<br />
border: 5px solid #333333;<br />
border-bottom-width: 5px;<br />
width: 565px; /*width of featured content slider*/<br />
height: 175px;<br />
margin-left:15px;<br />
}<br />
.sliderwrapper .contentdiv{<br />
visibility: hidden; /*leave as is*/<br />
position: absolute; /*leave as is*/<br />
left: 0; /*leave as is*/<br />
top: 0; /*leave as is*/<br />
padding: 5px;<br />
background: white;<br />
width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */<br />
height: 100%;<br />
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);<br />
-moz-opacity: 1;<br />
opacity: 1;<br />
margin-top:0px;<br />
}<br />
.pagination{<br />
width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/<br />
text-align: right;<br />
background-color: #333333;<br />
padding: 5px 10px;<br />
margin-top:-3px;<br />
height:30px;<br />
margin-left:15px;<br />
}<br />
.pagination a{<br />
padding: 0 5px;<br />
text-decoration: none;<br />
color: #000;<br />
background: #AAAAAA;<br />
}<br />
.pagination a:hover, .pagination a.selected{<br />
color: #000;<br />
background-color: #FFF;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<div class="sliderwrapper" id="slider1"><br />
<div class="contentdiv"><br />
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP71aXM_6QBiBIUV_3BinWxuUOujo7wkscxYziKiK8grh7e153qqeAMoncnHfTzV1adgpxMQ015ADWH686V3kr5MvQxKa55012DzWYorW3tuPiGJWug_-O1cSkuth1zOOMUUBqbsmgTXM1/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><br />
<h2><a href="#" target="_blank">Title-of-Post</a></h2><b style="background-color: magenta;">Slide Description [...]</b><br />
</div><br />
<div class="contentdiv"><br />
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEdNaiz60uZ1WFkC-DCWhkGycQnGo8u-9fTje30F6flOrGQd6bAP_6n7z8WIYSn_59DhGjnxnfdo5Te4ob9tV8-Ser4Rrt1RwtNq-x6tJZESXDzCE5ROjNO_JChag4eT7JxDeI2rbkIbg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><br />
<h2><a href="#" target="_blank">Title-of-Post</a></h2><b style="background-color: magenta;">Slide Description [...]</b><br />
</div><br />
<div class="contentdiv"><br />
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJyR41x2oovL6SukZX8JoUfG-44VPRieuTaPQ1-zExoCSMSgYnChlxeQ5lEcCab5JS3uMpUJJuky6I1OkqcvbRjjJ1qeIgbOl7PZUjSPOiB-Usw11NBOsrVXBwMsRZDUMogVZwk0JGt_a/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><br />
<h2><a href="#" target="_blank">Title-of-Post</a></h2><b style="background-color: magenta;">Slide Description [...]</b><br />
</div><br />
<div class="contentdiv"><br />
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinEdT5W_1cyCU7aNMCw0We7dl6XWxpKIPk68v2Id7wbDOGU1fGIlXl9KFNRPAOCsnkm5VSY0vFfllD5fTNKSJD_NH3FKJCTrbE-gV4MNp6GkQGvg_yU2SuWdUtM0OI5fKfNK4gCm_ABBC/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><br />
<h2><a href="#" target="_blank">Title-of-Post</a></h2><b style="background-color: magenta;">Slide Description [...]</b><br />
</div><br />
<div class="contentdiv"><br />
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsTs-0HojlBKg3DnQ8L8zK0L-kgLE-6mSNKH9sn473c108qKRRr3C7DIIBhkObrHvOxZNtC9nveLJxID7gbA9mHNsFdiRdNGwZ8VsmtsHT768kzib9IKAsOhO0W1q-EBChFINzbE7U6xz/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><br />
<h2><a href="#" target="_blank">Title-of-Post</a></h2><b style="background-color: magenta;">Slide Description [...]</b><br />
</div><br />
</div><br />
<div class="pagination" id="paginate-slider1"><br />
</div><br />
<script type="text/javascript"><br />
featuredcontentslider.init({<br />
id: "slider1", //id of main slider DIV<br />
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]<br />
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]<br />
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.<br />
enablefade: [true, 0.2], //[true/false, fadedegree]<br />
autorotate: [true, 3000], //[true/false, pausetime]<br />
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide<br />
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)<br />
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)<br />
}<br />
})<br />
</script></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" /></div>

Shoutmeloud Featured Content Slider for Blogger Using jQuery

Live Demo 1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box. 2. Paste the followin...

7:30 AM

How To Add Auto Featured Posts Using JQuery Slider To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<img alt="How To Add Auto Featured Posts Using JQuery Slider To Blogger" border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZhH70ZOEcLrcg86yiNgHvozp2VWNOHBIOArFexhOBhEuHun76qHOlNZ-PncmZ-ZYhg3ix6w8oVp3fyrUfVb5ubwiAJqNSK8CZUfuVsxLh0z4iVpMDhWWUJVVSFWWyIRdsQRtOr4kRtb2/s1600/How+To+Add+Auto+Featured+Posts+Using+JQuery+Slider+To+Blogger.jpg" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" width="500" /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/auto-featured-posts-using-jquery-slider-to-blogger.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Paste the following code in HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2p0vZfnUKv_mwsfiyy7q1B9QMXmN5twTYCdwxkdQ3K5cPquoFFe0ibg-2youlIwbkpWxaD87HyOEn0AXIZTN22IS5FN1TAcUynARAeQlFy-dkcwdZhsOGjo5gJkOKBmF72txMt-IYRCE/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.2000007629395px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/stepcarousel.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
stepcarousel.setup({<br />
galleryid: 'board_carusel', //id of carousel DIV<br />
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs<br />
panelclass: 'board_item', //class of panel DIVs each holding content<br />
autostep: {enable:true, moveby:1, pause:5000},<br />
panelbehavior: {speed:500, wraparound:false, persist:false},<br />
defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},<br />
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels<br />
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']<br />
})<br />
</script><br />
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><br />
<style type="text/css"><br />
/*board*/<br />
#board{<br />
width:977px;<br />
height:276px;<br />
overflow:hidden;<br />
margin:0 0 0 0px;<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3fXR5T-3-48CtNHavnV6P2UOXqZqxyqDE-Awyl14Ghx0DRdNmPbBAnmEtbPbw-e_FWJaxKJIzRHKNItYA5GLgKTF8tGhw7czfZTL2dmgsGd5vNj2Y3ZasLvsRv_-zgIRlbVLkx3KZn9K/s1600/bgr_board.png) no-repeat;<br />
}<br />
#board_left{<br />
float:left;<br />
padding:22px 0 0 27px;<br />
}<br />
#header_rss{<br />
float:right;<br />
padding:78px 80px 0 0;<br />
}<br />
#board_items{<br />
width:679px;<br />
padding:5px 0 0 0;<br />
}<br />
#board_body{<br />
width:647px;<br />
margin:0 0 0 15px;<br />
}<br />
#board_carusel{<br />
width:647px;<br />
height:131px;<br />
position:relative;<br />
}<br />
#board_carusel .belt{<br />
position: absolute; /*leave this value alone*/<br />
left: 0;<br />
top: 0;<br />
}<br />
.board_item{<br />
width:647px;<br />
height:173px;<br />
overflow:hidden;<br />
}<br />
#board_body h2{<br />
color:#000;<br />
font-family:Georgia, "Times New Roman", Times, serif;<br />
font-size:23px;<br />
font-weight:normal;<br />
margin:0 0 28px 0;<br />
}<br />
#board_body strong{<br />
font-size:12px;<br />
color:#000;<br />
line-height:18px;<br />
display:block;<br />
}<br />
#board_body p{<br />
font-size:12px;<br />
color:#000;<br />
line-height:18px;<br />
padding:0 0 10px 0;<br />
}<br />
#board_body p img{<br />
float:left;<br />
border:1px solid #83b2c4;<br />
margin:0 10px 0 0;<br />
width:161px;<br />
height:107px;<br />
}<br />
#board_body p a{<br />
color:#000;<br />
}<br />
#board_body p.more a{<br />
text-decoration:underline;<br />
}<br />
#board_body p.more a:hover{<br />
text-decoration:none;<br />
}<br />
#board_carusel_nav{<br />
width:100%;<br />
overflow:hidden;<br />
}<br />
#board_carusel_nav li{<br />
font-size:12px;<br />
font-family:Verdana, Geneva, sans-serif;<br />
float:left;<br />
}<br />
#board_carusel_nav a{<br />
display:block;<br />
float:left;<br />
background:#7ac2df;<br />
border-right:1px solid #85d7f7;<br />
width:33px;<br />
text-align:center;<br />
padding:7px 0 7px 0;<br />
}<br />
#board_carusel_nav a.selected, #board_carusel_nav a:hover{<br />
text-decoration:underline;<br />
font-weight:bold;<br />
background:#a7e2f9;<br />
border-right:1px solid #a7e2f9;<br />
}</style><br />
<br />
<br />
<div id="board"><br />
<div id="board_left"><br />
<div id="board_items"><br />
<div id="board_body"><br />
<h2>Featured Posts</h2><br />
<div id="board_carusel"><br />
<div class="belt"><br />
<div class="board_item"><br />
<br />
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP71aXM_6QBiBIUV_3BinWxuUOujo7wkscxYziKiK8grh7e153qqeAMoncnHfTzV1adgpxMQ015ADWH686V3kr5MvQxKa55012DzWYorW3tuPiGJWug_-O1cSkuth1zOOMUUBqbsmgTXM1/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="125"/><br />
<strong><a href="#" target="_blank"><b><span style="color: magenta;">Title-of-Post</span></b></a></strong><br />
Slide Description [...]</p><br />
<br />
</div><div class="board_item"><br />
<br />
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEdNaiz60uZ1WFkC-DCWhkGycQnGo8u-9fTje30F6flOrGQd6bAP_6n7z8WIYSn_59DhGjnxnfdo5Te4ob9tV8-Ser4Rrt1RwtNq-x6tJZESXDzCE5ROjNO_JChag4eT7JxDeI2rbkIbg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="125"/><br />
<strong><a href="#" target="_blank"><b><span style="color: magenta;">Title-of-Post</span></b></a></strong><br />
Slide Description [...]</p><br />
<br />
</div><div class="board_item"><br />
<br />
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJyR41x2oovL6SukZX8JoUfG-44VPRieuTaPQ1-zExoCSMSgYnChlxeQ5lEcCab5JS3uMpUJJuky6I1OkqcvbRjjJ1qeIgbOl7PZUjSPOiB-Usw11NBOsrVXBwMsRZDUMogVZwk0JGt_a/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="125"/><br />
<strong><a href="#" target="_blank"><b><span style="color: magenta;">Title-of-Pos</span></b>t</a></strong><br />
Slide Description [...]</p><br />
<br />
</div><div class="board_item"><br />
<br />
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinEdT5W_1cyCU7aNMCw0We7dl6XWxpKIPk68v2Id7wbDOGU1fGIlXl9KFNRPAOCsnkm5VSY0vFfllD5fTNKSJD_NH3FKJCTrbE-gV4MNp6GkQGvg_yU2SuWdUtM0OI5fKfNK4gCm_ABBC/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="125"/><br />
<strong><a href="#" target="_blank"><b><span style="color: magenta;">Title-of-Post</span></b></a></strong><br />
Slide Description [...]</p><br />
<br />
</div><div class="board_item"><br />
<br />
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsTs-0HojlBKg3DnQ8L8zK0L-kgLE-6mSNKH9sn473c108qKRRr3C7DIIBhkObrHvOxZNtC9nveLJxID7gbA9mHNsFdiRdNGwZ8VsmtsHT768kzib9IKAsOhO0W1q-EBChFINzbE7U6xz/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="125"/><br />
<strong><a href="#" target="_blank"><b><span style="color: magenta;">Title-of-Post</span></b></a></strong><br />
Slide Description [...]</p><br />
<br />
</div><br />
</div><br />
</div><br />
</div><br />
<ul id="board_carusel_nav"><br />
<li id="board_carusel_nav_1"><a class="selected" href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 1)">1</a></li><br />
<li id="board_carusel_nav_2"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 2)">2</a></li><br />
<li id="board_carusel_nav_3"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 3)">3</a></li><br />
<li id="board_carusel_nav_4"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 4)">4</a></li><br />
<li id="board_carusel_nav_5"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 5)">5</a></li><br />
</ul><br />
</div><br />
</div><br />
<div id="header_rss"><br />
<a href="http://24work.blogspot.com/feeds/posts/default" title="Rss"><img alt="Rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRA2xd43d5U8pXKwY0CSac-QiGR6Li-kCiGR33ZchZxdSESECd0Kvov-BiggnQSB8qEMMSEFTaHC0fgEj4DFK5BjZxoMeKAA9nRzcr811dNHmib3eRcyaIz-E1Yd8eHGYNhL2cdITFKsz1/s1600/button_rss.png"/></a><br />
</div><br />
</div></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" /></div>

How To Add Auto Featured Posts Using JQuery Slider To Blogger

Live Demo 1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box. 2. Paste the followin...

7:29 AM

Using jQuery Slider Featured Posts (glory)

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<img alt="Using jQuery Slider Featured Posts (glory)" border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8eyOmPmOwBkVE8-Fgaf4lA__0T3pV9MZlIa0s5jTr18lPoYTkBoe-U9ibcX8hPeyBFvhipTILcd9Z6qINNg0ZPK1C2uygufvqBUMJBwExiZqlacyWeCzl2Cz5mvAhcJz0lgcjBQObIdbr/s1600/Using+jQuery+Slider+Featured+Posts+(glory).png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" width="500" /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/using-jquery-slider-featured-posts-glory.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Paste the following code in HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2p0vZfnUKv_mwsfiyy7q1B9QMXmN5twTYCdwxkdQ3K5cPquoFFe0ibg-2youlIwbkpWxaD87HyOEn0AXIZTN22IS5FN1TAcUynARAeQlFy-dkcwdZhsOGjo5gJkOKBmF72txMt-IYRCE/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.2000007629395px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery.cycle.all-000-.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
//<![CDATA[<br />
sfHover = function() {<br />
var sfEls = document.getElementById("nav").getElementsByTagName("LI");<br />
for (var i=0; i<sfEls.length; i++) {<br />
sfEls[i].onmouseover=function() {<br />
this.className+=" hover";<br />
}<br />
sfEls[i].onmouseout=function() {<br />
this.className=this.className.replace(new RegExp(" hover\\b"), "");<br />
}<br />
}<br />
}<br />
if (window.attachEvent) window.attachEvent("onload", sfHover);<br />
//]]><br />
</script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$('#myslides').cycle({<br />
fx: 'fade',<br />
speed: 700,<br />
timeout: 3000,<br />
next: '#next',<br />
prev: '#prev'<br />
});<br />
});<br />
</script><br />
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><br />
<style type="text/css"><br />
/* featured fade */<br />
#wrapper-featured{<br />
padding:10px 0 ;<br />
width:650px;<br />
height: 326px;<br />
margin:0 ;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yV9_33GA2Ux4TiARv2PNzMiuy5RCy3CUJABupeqvpZ2q-YkDFqO0jJSRpDioo0AOj5lx-wje2mdHAzn8fpTjGsaE_yJFP0sHYO-RhNS22B92y4NJ1NEY9oWIa4BEBHy6MGbrLjzv0hAW/s1600/bg_featured.jpg) no-repeat;<br />
position:relative;<br />
}<br />
#wrapper-myslides {<br />
width:550px;<br />
height:210px;<br />
padding: 0 0 ;<br />
margin: 3px 0 0 10px;<br />
position:relative;<br />
float:left;<br />
}<br />
#myslides {<br />
width:550px;<br />
height:210px;<br />
padding: 0 0 50px;<br />
margin: 0 18px ;<br />
overflow:hidden;<br />
}<br />
.panel{<br />
width:550px;<br />
height:210px;<br />
}<br />
#myslides img.crop-foto {<br />
margin:8px 10px 10px 9px;<br />
border:1px solid #fff;<br />
display:block;<br />
position:absolute;<br />
right:3px;<br />
top:0;<br />
}<br />
.featured-entry {<br />
text-align:left;<br />
line-height:1.5em;<br />
font-style:italic;<br />
font-size:12px;<br />
font-family: georgia,Arial,Verdana, Helvetica, sans-serif;<br />
padding: 20px 10px 0;<br />
width:280px;<br />
color:#fff;<br />
position:absolute;<br />
top:0;<br />
left:0;<br />
}<br />
h3.featured-title {<br />
font-size:22px;<br />
text-align:left;<br />
font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;<br />
margin:10px 0 5px;<br />
padding:0 0 5px;<br />
font-weight:normal;<br />
line-height:1em;<br />
font-style:normal;<br />
}<br />
h3.featured-title a:link, h3.featured-title a:visited{<br />
color:#fff;<br />
}<br />
h3.featured-title a:hover {<br />
color:#b1e1ff;<br />
}<br />
#nav-slides a#prev {<br />
position:absolute;<br />
bottom:105px;<br />
left:135px;<br />
z-index:1;<br />
color:#800;<br />
width:14px;<br />
height:15px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnoT22mAJ7BsrGcmbeb5jmLnGRrx_Fx-_oNKCEOybanCHBvd2kJki4lxItBzTV_88EIvNEeh4NMLYtq760qKswXFBS_XBgueXawOoC2B-S_XWKx2N2EY46Tv-Kkk-18mVmlTzYeEs5I4O/s400/prev.jpg) no-repeat;<br />
}<br />
#nav-slides a#prev:hover{<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEXaDhvalNiR4W6Zg_NDl8BripsO4z0eSv1jrEBVXaWvZOCFLzY8Y0nHuFbFuV8v2G6OL9VFYJjUgTU9_bhreWIzgZK60S8_sVW03_gXixqf492ZcaKqJ1ljVv4PEquA1dMHRhcucMaSQ/s400/prev_hover.jpg) no-repeat;<br />
}<br />
#nav-slides a#next {<br />
position:absolute;<br />
bottom:105px;<br />
left:160px;<br />
z-index:1;<br />
color:#800;<br />
width:14px;<br />
height:15px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPQ4UzsXJ3oGmbFtiTuHkePJGvp7XtcymZsXwZ5zfu-UVeLwpPgyaw4gH-IylFPoK8Gm5NAEOeMRAH5Ubq42_DVZ6phvCqlLhOZPSihccvDkRkQ0e0U4noEdA1-8ZsWdxZz7Oz9ZkMcDi/s400/next.jpg) no-repeat;<br />
}<br />
#nav-slides a#next:hover{<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjoL8NOVGPrR4IvbuNLSnfLEwFZMLVmZTdcOKVawaBJD-crK0r7E5CWesvEESJqjLqt6Ungx5TfADO4US4dwRMdK7sUuFAO8qmKR4Hb72Wr4aI72ya0wwz5Vx24ua9isZc8ipzP82l3bn6/s400/next_hover.jpg) no-repeat;<br />
}<br />
</style><br />
<br />
<br />
<div id="wrapper-featured"><br />
<div id="wrapper-myslides"><br />
<div id="myslides"><br />
<div class="panel"><br />
<div class="image-frame"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post"><br />
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP71aXM_6QBiBIUV_3BinWxuUOujo7wkscxYziKiK8grh7e153qqeAMoncnHfTzV1adgpxMQ015ADWH686V3kr5MvQxKa55012DzWYorW3tuPiGJWug_-O1cSkuth1zOOMUUBqbsmgTXM1/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="205"/></a><br />
</div><br />
<div class="featured-entry"><br />
<h3 class="featured-title"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3><br />
<p>Slide 1 Description [...]</p><br />
</div><br />
</div><br />
<div class="panel"><br />
<div class="image-frame"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post"><br />
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEdNaiz60uZ1WFkC-DCWhkGycQnGo8u-9fTje30F6flOrGQd6bAP_6n7z8WIYSn_59DhGjnxnfdo5Te4ob9tV8-Ser4Rrt1RwtNq-x6tJZESXDzCE5ROjNO_JChag4eT7JxDeI2rbkIbg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width="205"/></a><br />
</div><br />
<div class="featured-entry"><br />
<h3 class="featured-title"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3><br />
<p>Slide 2 Description [...]</p><br />
</div><br />
</div><br />
<div class="panel"><br />
<div class="image-frame"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post"><br />
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJyR41x2oovL6SukZX8JoUfG-44VPRieuTaPQ1-zExoCSMSgYnChlxeQ5lEcCab5JS3uMpUJJuky6I1OkqcvbRjjJ1qeIgbOl7PZUjSPOiB-Usw11NBOsrVXBwMsRZDUMogVZwk0JGt_a/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width="205"/></a><br />
</div><br />
<div class="featured-entry"><br />
<h3 class="featured-title"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3><br />
<p>Slide 3 Description [...]</p><br />
</div><br />
</div><br />
<div class="panel"><br />
<div class="image-frame"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post"><br />
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinEdT5W_1cyCU7aNMCw0We7dl6XWxpKIPk68v2Id7wbDOGU1fGIlXl9KFNRPAOCsnkm5VSY0vFfllD5fTNKSJD_NH3FKJCTrbE-gV4MNp6GkQGvg_yU2SuWdUtM0OI5fKfNK4gCm_ABBC/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="205"/></a><br />
</div><br />
<div class="featured-entry"><br />
<h3 class="featured-title"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3><br />
<p>Slide 4 Description [...]</p><br />
<br />
</div><br />
</div><br />
<div class="panel"><br />
<div class="image-frame"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post"><br />
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsTs-0HojlBKg3DnQ8L8zK0L-kgLE-6mSNKH9sn473c108qKRRr3C7DIIBhkObrHvOxZNtC9nveLJxID7gbA9mHNsFdiRdNGwZ8VsmtsHT768kzib9IKAsOhO0W1q-EBChFINzbE7U6xz/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="205"/></a><br />
</div><br />
<div class="featured-entry"><br />
<h3 class="featured-title"><br />
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3><br />
<p>Slide 5 Description [...]</p><br />
</div><br />
</div><br />
</div><br />
</div><br />
<div id="nav-slides"><br />
<a href="#" id="prev"></a><br />
<a href="#" id="next"></a><br />
</div><br />
</div></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" /></div>

Using jQuery Slider Featured Posts (glory)

Live Demo 1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box. 2. Paste the followin...

7:27 AM

Awesome Automatic Content Slider for Blogger using jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<img alt="Awesome Automatic Content Slider for Blogger using jQuery" border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWD5rFPxIBBFg_IfJQKmT7AbtUh7zXqQj3sTeDGhOSciUMC4NeCDSQFLKgn7TX001YK38klaRTTKqzRe3-qYqBtu_0at78wsgXkzVV9WIozvmKyZyo8H1pBsRlb37sJhS2hNEJIpIcWt1/s1600/Awesome+Automatic+Content+Slider+for+Blogger+using+jQuery.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" width="496" /></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px; text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/awesome-automatic-content-slider-for-blogger-using-jquery.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurd-kjdxib6LlGXZKVPrgybcqMdXDSdxFV1QihpKr_k2QsPBtP_UyPUGqzYJMMOcIl73gM0XTSZnJBQzr628hIyUQLTu_3K5PB-v4DDViB2f4fxLLPhSc1bQcpxcM0sDYbEtIaiUxyEDS/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; font-stretch: normal; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">2. Paste the following code in HTML/Javascript Box.</span><br />
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" />
<br />
<div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2p0vZfnUKv_mwsfiyy7q1B9QMXmN5twTYCdwxkdQ3K5cPquoFFe0ibg-2youlIwbkpWxaD87HyOEn0AXIZTN22IS5FN1TAcUynARAeQlFy-dkcwdZhsOGjo5gJkOKBmF72txMt-IYRCE/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.2000007629395px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-easing-1.3.pack.js"></script><br />
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-easing-compatibility.1.2.pack.js"></script><br />
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/coda-slider.1.1.1.pack.js"></script><br />
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-025.js" type="text/javascript"></script><br />
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><br />
<style type="text/css"><br />
.floatLeft { float: left; margin-right: 10px;}<br />
.floatRight { float: right; }<br />
.clear { clear: both; }<br />
a { outline: none; }<br />
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaIZUju8lPslVI0S4zO2ds7zaljv8Pd-8P9Vm7Qp35_avldXTYflqdT1P_oiyKPxJ8QJu-U09EysiAUrqG_5krMfLxBEMfcfRJYRNP0d0ky7Zm8W-slBUY4my_1Yy1pAJindQ_wnIo7MSg/s1600/bg.png) top center; }<br />
ul { list-style: square inside; }<br />
a, a:visited { color: #729dff; text-decoration: none; }<br />
a:hover, a:active { color: white; }<br />
blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;}<br />
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }<br />
.stripViewer .panelContainer<br />
.panel ul { text-align: left; margin: 0 15px 0 30px; }<br />
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }<br />
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }<br />
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }<br />
.stripNavL, .stripNavR, .stripNav { display: none; }<br />
.nav-thumb { border: 1px solid black; margin-right: 5px; }<br />
#movers-row { margin: -43px 0 0 62px; }<br />
#movers-row div { width: 20%; float: left; }<br />
#movers-row div a.cross-link { float: right; }<br />
.photo-meta-data { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXk374wJL-PBMO7M0q2F5CvwSAE1nlnlprCI5v4LOJoyDCq1PpnwZkmpPW4KUYplGNZ_WMkI5skcVG2Kj8byGpa3NKDAE-xNaGUBqEMA_rqGevWyCGXY4H2_XBX76yS8faI2ssI6V0bQE/s1600/transpBlack.png); padding: 10px; height: 30px; margin-top: -50px; position: relative; z-index: 100; color: white; }<br />
.photo-meta-data span { font-size: 13px; }<br />
.cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 100; }<br />
.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjURrRE7BKDT5rUdCGbDKaFktsqzus86bDsVh6oZ1cdjLKZHQeZHsYBAdlvMnExyL8xbcRgmKs5lKOw-IXAuu7WpQ3u3bcVp3n3DQWCDwSLtD-eSjhC92QKXEpFgCuDrKjRZGbcQOezhfb_/s1600/icon-uparrowsmallwhite.png) top center no-repeat; }<br />
--------------------------------------------------------------------<br />
Awesome Automatic Content Sliders for Blogger using jQuery<br />
<br />
--------------------------------------------------------------------<br />
Featured Content Slider<br />
*/<br />
<br />
</style><br />
<br />
<br />
<br />
<div id="page-wrap"><br />
<br />
<div class="slider-wrap"><br />
<div id="main-photo-slider" class="csw"><br />
<div class="panelContainer"><br />
<br />
<div class="panel" title="Panel 1"><br />
<div class="wrapper"><br />
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP71aXM_6QBiBIUV_3BinWxuUOujo7wkscxYziKiK8grh7e153qqeAMoncnHfTzV1adgpxMQ015ADWH686V3kr5MvQxKa55012DzWYorW3tuPiGJWug_-O1cSkuth1zOOMUUBqbsmgTXM1/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="282"/><br />
<br />
<div class="photo-meta-data"><br />
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br /><br />
<br />
<span>TEXT-OF-THE-SLIDE</span><br />
</div><br />
</div><br />
</div><br />
<div class="panel" title="Panel 2"><br />
<div class="wrapper"><br />
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEdNaiz60uZ1WFkC-DCWhkGycQnGo8u-9fTje30F6flOrGQd6bAP_6n7z8WIYSn_59DhGjnxnfdo5Te4ob9tV8-Ser4Rrt1RwtNq-x6tJZESXDzCE5ROjNO_JChag4eT7JxDeI2rbkIbg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="282"/><br />
<br />
<div class="photo-meta-data"><br />
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br /><br />
<br />
<span>TEXT-OF-THE-SLIDE</span><br />
</div><br />
</div><br />
</div><br />
<div class="panel" title="Panel 3"><br />
<div class="wrapper"><br />
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJyR41x2oovL6SukZX8JoUfG-44VPRieuTaPQ1-zExoCSMSgYnChlxeQ5lEcCab5JS3uMpUJJuky6I1OkqcvbRjjJ1qeIgbOl7PZUjSPOiB-Usw11NBOsrVXBwMsRZDUMogVZwk0JGt_a/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="282"/><br />
<div class="photo-meta-data"><br />
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br /><br />
<br />
<span>TEXT-OF-THE-SLIDE</span><br />
</div><br />
</div><br />
</div><br />
<div class="panel" title="Panel 4"><br />
<div class="wrapper"><br />
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinEdT5W_1cyCU7aNMCw0We7dl6XWxpKIPk68v2Id7wbDOGU1fGIlXl9KFNRPAOCsnkm5VSY0vFfllD5fTNKSJD_NH3FKJCTrbE-gV4MNp6GkQGvg_yU2SuWdUtM0OI5fKfNK4gCm_ABBC/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="282"/><br />
<div class="photo-meta-data"><br />
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br /><br />
<br />
<span>TEXT-OF-THE-SLIDE</span><br />
</div><br />
</div><br />
</div><br />
<div class="panel" title="Panel 5"><br />
<div class="wrapper"><br />
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsTs-0HojlBKg3DnQ8L8zK0L-kgLE-6mSNKH9sn473c108qKRRr3C7DIIBhkObrHvOxZNtC9nveLJxID7gbA9mHNsFdiRdNGwZ8VsmtsHT768kzib9IKAsOhO0W1q-EBChFINzbE7U6xz/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="282"/><br />
<br />
<div class="photo-meta-data"><br />
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br /><br />
<br />
<span>TEXT-OF-THE-SLIDE</span><br />
</div><br />
</div><br />
</div><br />
<div class="panel" title="Panel 6"><br />
<div class="wrapper"><br />
<h1>About</h1><br />
<blockquote>24work is a blog about Professional Blogger Tutorials, Free Backlinks, Free templates, Resources, Tools, CSS, HTML Tutorials, Tips, Tricks, and General tutorials. Visit Us <a href="http://24work.blogspot.com/" target="_blank">http://24work.blogspot.com/</a></blockquote><br />
<p><em>Contact Info <a href="https://www.facebook.com/24work" target="_blank">https://www.facebook.com/24work</a><br /></em></p><br />
</div><br />
</div><br />
<br />
</div><br />
</div><br />
<br />
<a href="#1" class="cross-link active-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdHfGd0jyM0uPKIbjNmmCBysYUMPJtmg9rQIEl0KSm453jHldop2VtyY7_xqJKyGZyZJAiThj5xHQkS3gPbIIBBgNQJSzEslkvLDDbqp1VnlyrJK8SSA1_WYzHMVkbT0DXVbqIaJjD6IN/s1600/Change+Mouse+Cursor+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a><br />
<div id="movers-row"><br />
<div><a href="#2" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmd5vk31a3kO2otDViigiZeF6fofIf-bqjshCMopVAolra6U0jiCDlopZjXnLXhu3KMv6GkjycPLAHjKsf7rIqgmhY7vaU14EZfngUVXBBO4Je2wPo9Mj2m75ViRrj82d4sjbNsiubAGhg/s1600/Numbered+Page+Navigation.gif" class="nav-thumb" alt="temp-thumb" /></a></div><br />
<div><a href="#3" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4PagOzkC-NudEgI34S1lR-h2Ylz5DFHWrK6kZI2_D5BGeBclDk4pQosFQZv3HDoW7Bf3i6sdpCY-aXqssncPXwfeB21btOUPTbp1QdldLYSnsiuy0QbZUwT0U-2yDK3wOxLMsacZgEd-O/s1600/Snow+Cursor+Code+Generatort.gif" class="nav-thumb" alt="temp-thumb" /></a></div><br />
<div><a href="#4" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdsuK3PfJig3MBubAqX9NFKzTC-JGeJo20CXIqdoR9U7B95Iywwz0SFPy4p6-W7xDVi6iH91eyMNzZM5oSumPW_D5CLIR63tvfyQsgA_1o-6KCOJEjrQJdD4PyQQ5rcMxX4HGYEYAcdnk/s1600/Blogger+Falling+Object+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a></div><br />
<div><a href="#5" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVOEmRvOUfCNUxTgAO60UTiFXtUsNc43_kSPspVGjRQIS-I9OH4NBMWTugk2Kygo4aA1qiqrdQPggr1-YSuhBtu3tMb4mL3b25AsA-IH9yOQTeVHryj5UGChM2YUH3j7aUEkg-eFWr2w4/s1600/Animated+Flash+Clock.gif" class="nav-thumb" alt="temp-thumb" /></a></div><br />
<div><a href="#6" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiarNACbQQQYdIhyeKT_lzrnRQtkZ5SYyM8CfXRMDmr9pw39-VLGDCUaupVPeqNbSjJeOzvR1dLzlmvdVEUs3yKqGYtxUBJW0lslbhtUkw60WXHYLb-_xDIrE4tfAxLcgSSGnTS-S2S4jdS/s1600/no+pic.gif" class="nav-thumb" alt="temp-thumb" /></a></div><br />
</div><br />
<br />
</div><br />
<br />
</div></div>
<br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" /></div>

Awesome Automatic Content Slider for Blogger using jQuery

Live Demo 1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box. 2. Paste the followin...

7:26 AM