<a href='#'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02EMNhg0JxeaZXgudfoioVWsqsk8XgeYlabO6YusE-03maw_9g-3TBIDgMJIdjbS5XxnQ-TVz4DwjW-s8dPGltYrPkrqPXaDh9wr1qVKFBcVRRgw9-r8ze7yhj_q-Lqczpk2D2tiQfMtN/s468/banner.jpg'/></a>To edit the menu bar, go to Edit Html and search for this code -
<div id='menu'>You have to replace '#' with the relevant category links, add the categories, under 'sub-menu' you can add your sub-categories etc. Moving on to the featured content slider, this is the code you have to look for in Edit Html -
<ul class='menu' id='menu-header'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Pages</a>
<ul class='sub-menu'>
<li><a href='#'>Page With Left Sidebar</a></li>
<li><a href='#'>Page With Right Sidebar</a></li>
<li><a href='#'>Full Width Page</a></li>
</ul>
</li>
<div class='slider' id='slideshow' style='width: 950px; height: 450px;'>You have to add the post title between '<h2> ......</h2>' replace the jpg link with your image url, and add post description between '<p>.....</p>', repeat the steps in all the slides, except in case of a video slide, this is the code you have to look for in Edit Html, its below the above code -
<div class='slide' style='width: 950px; height: 450px;'>
<div class='caption-overlay caption-bottomright caption-dark'>
<h2>Nunc arcu ipsum</h2></div>
<img class='slider-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuGbYzbcJvoeSkjP6keZGB9uKF8NJs-bE7BewxjA7ReaMgvAv7rbUbsAMDTtsb34DuZOt7EL8TI3LU8a8JJvuGCyVtonc4nhXti0gk6xxO4Rx1CbHKdESESP21b1nOX4ohrKWG40UhZo/s1600/1.jpg' style='width: 950px; height: 450px;'/>
</div>
<div class='slide' style='width: 950px; height: 450px;'>
<div class='caption-frame caption-right caption-light' style='width: 275px; height: 408px;'>
<h2>Faucibus felis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec consectetur nibh. Nulla facilisi. Vestibulum non ullamcorper arcu. Mauris pellentesque consequat justo, eget pellentesque odio ullamcorper eu. Ut neque ligula, mollis quis hendrerit ac, ullamcorper et augue. Vivamus auctor faucibus felis in porta. Sed ac lorem ligula, et auctor sapien.</p></div>
<img class='slider-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMqFu7NOyGZds651K9TigFgPzKBAn2DuQkQbL-ggm34ciBcYHkQiKfhyzyNjxeOnrgCwrUlWevggbgv9mTf2n5GXUu83nNONRu1slRQWYY21lznpcpFVEmTHJi5CwgdvlwEp7-CkTTxrQ/s633/2.jpg'/>
</div>
<div class='slide-video' style='width: 950px; height: 450px;'>Add your YouTube video link (marked in bold), replace the image link (in bold), and save the changes.
<div id='fadeslider-video-2305'/>
<script>
jwplayer("fadeslider-video-2305").setup({
file: "http://www.youtube.com/watch?v=L9szn1QQfas&hd=1",
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AdXI5ZrWh2Jol4vx0ny0TqrXvtUGW1H7q8WCVWbaAIHUox7JHx_35WicXb0j9ocj4SRk3L1JPPj2whyphenhyphena11Oz-JAHWplPAVNt-cCyLfV9uytkW9NUoQzLFikV9XnJlwJsE1x787HRV9Y/s1600/6.jpg",
Keep the image size 950 px x 450 px if you want to put up a full-width image without description and post title, if you want to add a description and post title then keep the image size 633px × 450px. Below the main slider is thumbnail version of the same slider, you have to upload the thumbnail images for the same. You have to find the below code, simply replace the image urls (in bold) in each slide, thumbnail size must be 109 px x 54 px -
<span class='slider-button'>The latest posts neatly displays in summarised format with labels, date and comments. The page navigation widget at the bottom of the main column has to be configured, search for the below code, and change the number of posts -
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuGbYzbcJvoeSkjP6keZGB9uKF8NJs-bE7BewxjA7ReaMgvAv7rbUbsAMDTtsb34DuZOt7EL8TI3LU8a8JJvuGCyVtonc4nhXti0gk6xxO4Rx1CbHKdESESP21b1nOX4ohrKWG40UhZo/s109-p/1.jpg' style='width: 109px; height: 54px;'/>
</span>
<span class='slider-button'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMqFu7NOyGZds651K9TigFgPzKBAn2DuQkQbL-ggm34ciBcYHkQiKfhyzyNjxeOnrgCwrUlWevggbgv9mTf2n5GXUu83nNONRu1slRQWYY21lznpcpFVEmTHJi5CwgdvlwEp7-CkTTxrQ/s109-p/2.jpg' style='width: 109px; height: 54px;'/>
</span>
var pages=4, (Number of posts in each page)The social media widget is above the footer, you can add your profile links, RSS and mail id in the below code -
num=2, (Number of buttons will display)
<div id='social'>The footer can be modified from Layout-edit Page Elements and show different blogger widgets.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOboRPjgkYUEnxeDEa83U-5Q8R42og8qB5tg7gAsWPX8Q3RIm35qop0I7SZOlgTpw1W2h4pIdtiWECt9geU5H6XNUf2MwamFB5AsY5LeL9p6SGv2AlRb-5_WAWAJt30kE4P5ypKHpGTdY/s32/rss.png'/></a>
<a href='mailto:#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHXeQ11LfDLojZ1gzzidswEUx8F9pRY7tncnzSLCH2m3J6_Pj_raHSN1xoIElKBrXKW58OepsuTlWsLc0opYhiqf_BmyZWgjWL9_D3va8wIArtD7p8Wq2Z5mgfeE-9uzjkxXIbsfH7UDE/s32/gmail.png'/></a>
<a href='https://twitter.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZcvsIYy6ocgJFpa2Sy7gzJmaSolQuybgou3JTaqxSyzRyOvlwKmu5xOH6qJtBxFrcKJk0ygM2cPttCl-qeI8ERJBV5XdnUorRFv2RgIGpaMq2lg2jE6zlh_9Bjh05CrIxTgrfsAcTEk/s32/twitter.png'/></a>
<a href='http://www.facebook.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgokiSn0DolsuOn_KYlDAenjfAmf233f2xcbfm_a5vnLdGIRo4PoRQKFPmn7Ki_-I0hCwPAs4ALn3_evzR05Wy4m091XgFLUzZcTebjDrtB_2y2cc_NHwCVSzZN_QJYL3WM2PwzUu7E4m8/s32/facebook.png'/></a>
<a href='http://www.flickr.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4NXoKlfdWE4dKFmFfR2dy7_SVJbEEGtZykjyu0BAqYXAEh9ceC9ly6G8LlbEeYLFHokyu9OtCLYcImgLdukiLe8VtUl-9PAq4MmNQJ6Tpp_Z0m0ZM3uR_UlzmVbJtLZTllLsAb76IjjM/s32/flickr-2.png'/></a>
<a href='http://vimeo.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2VDM9GDx8BhaAKGHa7LsE3erbNmqhbr_GqywxAWSsqvmKVpXcxzcPUspOz29PuHSoFOG5xqKvOfPTd7JBppTO7KK05FMM8Qew5ByF5G9yNoj_V_XYCVQFX_pcWunSK8foYek3k3xezVo/s32/vimeo.png'/></a>
</div>
Download Tarnished Blogger Template
Share this Blogger Template:
0 Response to "Tarnished Blogger Template"
Post a Comment