قوالب بلوجر معربة

سلايد شو احترافي بلوجر 2014

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>

<script src="http://dl.dropboxusercontent.com/s/d2ki5h01tgnpezq/n17-content-slider-04.js" type="text/javascript"></script>

<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>

<style type="text/css">

#myslides{

background:#2c3133;

}

.stepcarousel{

position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/

width: 95%; /*Width of Carousel Viewer itself*/

height: 165px; /*Height should enough to fit largest content&#39;s height*/

margin: 0px 14px 5px 14px;

background:#2c3133;

}

.stepcarousel .belt{

position: absolute; /*leave this value alone*/

left: 0;

top: 0;

}

.stepcarousel .panel{

float: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 10px 17px ; /*margin around each panel*/

width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

background:#202325;

height:140px;

border:1px solid #393f42;

}

.stepcarousel .panel p{

text-align: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{

text-align: left; /*leave this value alone*/

height:20px;

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 2px 5px ; /*margin around each panel*/

font-size:16px;

font-weight:bold;

text-align:center;

font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}

.stepcarousel .panel img{

float: left; /*leave this value alone*/

background:#040404; /*clip content that go outside dimensions of holding panel DIV*/

margin: 10px 10px 10px 10px; /*margin around each panel*/

padding:0px 0px;

}

</style>

<div id="myslides">

<script type="text/javascript">

stepcarousel.setup({

galleryid: 'mygallery', //id of carousel DIV

beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs

panelclass: 'panel', //class of panel DIVs each holding content

panelbehavior: {speed:500, wraparound:true, persist:true},

defaultbuttons: {enable: true, moveby: 2, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyeGvYFWLc6JfW4nAd_9y3tfpPg7d5eMGW7oTgQF1zMhiIJnPZQkte-Wbo4rEGobnj446JQMVi5PXMZjhiaJIxFz0H_NKT8QlSvz4FAxpf-xQaJYnVrp29dFQ8BCbZYDWmzljJdi_9Qv2u/', -14, 60], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4b7I5taEOyjyBIoevmYcBC6AwOTCfYszQWqD92pAnPPD_lF1sP2JTBnzKLEGdLMTwt8n2yCG_etsfTckSC_6uiWHSCJg46iqOCZsFXVqC3B9SHTmXNaZgHG0RoPRMYMk7uxRUHLRia9B4/', 0, 60]},

statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels

contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']

})

</script>

<div id="mygallery" class="stepcarousel">

<div class="belt">

<div class="panel">

<a href="#" target="_blank" title="This is featured post 1 title">

<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7piwuVasikPOIeWVF3I8pPfQlouaVOLn2H505qQsPtg0AcFnW0mEMv0hyphenhyphen6zh1HNqhOyuuCdbXiH0pvSm9OCcwSzm3moIb8HFjYz0rM4Ytn_hRGtI9YE0vKXmLVn2K2jTKtZ9NaVWAPTC/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="120"/>

</a>

</div>

<div class="panel">

<a href="#" target="_blank" title="This is featured post 2 title">

<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX76qF8dk_2AGeuwLEnjy9wxkRlvDQCvMlcHAoV1Em_RTbxurKba4RFRlhrz-kkwFGOsoJWJZqN3vItQqiPP-UVBq38tL7mSdKphPChLGHLM_nocFVlLjpMMzlDkL3ZV5w4M7twsaaDzHP/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="120"/>

</a>

</div>

<div class="panel">

<a href="#" target="_blank" title="This is featured post 3 title">

<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsyQXZPd3E1zs_YuLE5b0tANm1F1Rcww4YNeOnT_Mbe18-lFdjxXEeD93f9tYXli7wszRe6CB7H3zs2yypluWAe1TYm57rsbWIi233Wm-OydW6FZdxveRQnnRIEfurYjJludq5igC3MLf/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="120"/>

</a>

</div>

<div class="panel">

<a href="#" target="_blank" title="This is featured post 4 title">

<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueusQCkVtdIe-zyFKyjZAGObenOkvyL0ZP_37b3tDgPIIvmhpJw6j3n7bI5jVOXb2jLL4BLrjP_RqfpQYkR0nHG3snrGYmVVeVJjO0AwvGUHe5k6INliPo3HgaLM8oPnLhLADXZNsTVVl/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="120"/>

</a>

</div>

<div class="panel">

<a href="#" title="This is featured post 5 title">

<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRvGcc4kCmrMPmu5i2bzrLxsJWINR6ExoE9CraR8GCP6uVKZXkEVI6Bt_EOXB7ZZAGduNwh2DlAk7AiCnAokpTObrZaCpsS0o2QWPcyKwzOVEcDJChOSxEFAiguzWRddZNnY3wo9nHdIo/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="120"/>

</a>

</div>

</div>

</div>

</div>

<div class="clear"></div>