Let's start adding it
Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps:
1. Go to Dashboard - Template - Edit HTML - click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box
]]></b:skin>Note: you might need to click on the arrow next to it and after try to find ]]></b:skin> again.
3. Just above/before it, add the following code:
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}Note: you can adjust the size of gallery, changing the values in red (590 and 126).
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaFbvvfTB_VfMqZOtnPVBhmgDwrw0zpc9AQHbWruIb6xQNdhVVQxLWjf-_2mZBqp9nYUa8iLsVUorB2Dddkigx9Qx0gS5oiL6shdQ4qptmWOIEOzImM6PvKcUs1yZgxVpsnr26hMqeRS5F/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
4. Now search for the following piece of code:
</head>5. Just above/before it, add this code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>Next thing to do is to place the widget just above the blogger posts.
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigkHBpJmR8LdzRyAzo_gjX6xrQMdyD_lkNAhSD_beZK2IY0oFWGA-4D2X25lfAEoScUww9OarPmwSkdaz1XPuD5y5CjOottV0PCdMvrJaNr90U5liGKYHX7Lq9Ip_fbwvGIMjIbIarvUHz/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGPS6tOXKAbRB5ZkQ_YPAvHjNBTveJ6fg8Y7TSFWb7XKbywegqRE8nX9FD47IHinipymSLZAgPBX9M8H7ldyc5U7ht-zPmmrrPkaTp8belZJMbVEpjZ_ZtMwNZ2cdFXKrtUH92clcp_cn/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
6. Search for this code:
<b:section class='main' id='main' showaddelement='yes'>...or if you can'find it, search for this one:
<b:section class='main' id='main' showaddelement='no'>7. Just below it, add the following code:
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpRC8mydVy7lCTzZJDrH3d8-IFZS5anGyNOIUk7usnX2Hk1ucsnXB5hfJHFwDBqSZQs6B_RbiDazsBbxlJpE8b0sbxrxXI9l-oIa7kl1rP8CzeihW_aYuyVivLwGoMSOtD7PYrDbRCewp/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>
8. Preview and if everything is ok, Save the Template.
No comments:
Post a Comment