Name : Tech Shadow Platform : Blogger/BlogSpot Release Date : 21 June, 2013 Category : Technology, Blogging Layout : Two Column Author : www...
Platform : Blogger/BlogSpot
Release Date : 21 June, 2013
Category : Technology, Blogging
Layout : Two Column
Author : www.bloggeryard.com
License : Creative Commons Attribution
After the giving a fantastic giveaway which was BlogTapper. Com domain name now here we're back with a special gift. We're releasing a simple (little bit stylish) template which is named as Tech Shadow for all the blogger users. The winner of our previous giveaway can also use this template for his/her blog because this is a tech and blogging niche template.
UPDATE : Due to many requests on removing the footer credit link the footer of the template and in Socializer widget we've made this template totally premium. There is not any credit link in the template so enjoys the premium version. Just re-download the template from above button. Have a nice day!
Credits
This is the free of cost template for everyone but due to our hard efforts we had implemented a footer credit link but after a lot of requests we've made this template premium with no more links in it. So just re-download the template and enjoy it.
Tech Shadow Blogger Template
Tech Shadow is a stylish blogger template which is designed for technology and blogging niche blogs. This is having 2 columns. The header of this template is having two sections, on the left side we've placed the title of the blog and a little description or slogan space while on the right side we've implemented the ad banner section. We've also added the stylish menu on the bottom of the header. After header, it is having subscription section in which we've added an email subscription form with social icons. It also has three column footer widgets section with simple menu at the top of the footer.
Features
- SEO Friendly : SEO is the most important so this template is search engine friendly. You don't need to worry about the on-page search engine optimization.
- 468x60 Ad Section In Header : The first feature of this template is that it is having the ad space in the header by which you get more impressions and your earning will be double.
- Header Subscription Area : After header we've designed the subscription area which is having an email subscription form with social icons. This will help you in increasing fans.
- Auto Thumbnail Post on Home : This is also having an auto thumbnail script which will automatically create the thumbnail posts on homepage.
- Socializer Widget : We've also added our Socializer widget at the bottom of the every post. This will help you in socializing your content and increasing social followers.
- Related Posts : This widget is important for every blog so we've already added a related posts widget in this template below every post.
- Threaded Comments : Threaded commenting is important for every in order to make the great discussions with the readers that's why we've also enabled threaded comments on this template.
- Three Column Footer : In the last it has had three column footer area where you can add the about the author, recent comment and recent posts widget. It is also having the sub menu on the top of the footer with a cute back to top button.
Customization
If you've knowledge about HTML, XML, CSS then you can customize this template and completely make this design of your blog. This template needs some changes like re-placing social usernames, Feedburner username and little things. Simply follow the tutorials.
Edit The Navigation Menu
- Go To Blogger >> Template >> Edit HTML
- Find For <ul id='nav'>
- You Will See The Following Code There.
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a class='hsubs' href='#'>Menu 1</a>
<ul class='subs'>
<li><a href='#'>Submenu 1</a></li>
<li><a href='#'>Submenu 2</a></li>
<li><a href='#'>Submenu 3</a></li>
<li><a href='#'>Submenu 4</a></li>
<li><a href='#'>Submenu 5</a></li>
</ul>
</li>
<li><a class='hsubs' href='#'>Menu 2</a>
<ul class='subs'>
<li><a href='#'>Submenu 2-1</a></li>
<li><a href='#'>Submenu 2-2</a></li>
<li><a href='#'>Submenu 2-3</a></li>
<li><a href='#'>Submenu 2-4</a></li>
<li><a href='#'>Submenu 2-5</a></li>
<li><a href='#'>Submenu 2-6</a></li>
<li><a href='#'>Submenu 2-7</a></li>
<li><a href='#'>Submenu 2-8</a></li>
</ul>
</li>
<li><a class='hsubs' href='#'>Menu 3</a>
<ul class='subs'>
<li><a href='#'>Submenu 3-1</a></li>
<li><a href='#'>Submenu 3-2</a></li>
<li><a href='#'>Submenu 3-3</a></li>
<li><a href='#'>Submenu 3-4</a></li>
<li><a href='#'>Submenu 3-5</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='http://www.bloggeryard.com'>Download This Template</a></li>
<div id='lavalamp'/>
</ul>
- Replace Blue Highlighted Code With The Link
- Replace Yellow Highlighted Text With The Link Text.
Header Subscription Area
- Go To Blogger >> Template >> Edit HTML
- Find For <!-- Top Subsbox By Www.BloggerYard.Com Start -->
- After That You Will See The Code Like Below
<!-- Top Subsbox By Www.BloggerYard.Com Start -->
<div id='byard-topsubsbox'>
<div id='subscriptionsection'>
<div class='subsbox-heading'>Subscribe For Free Updates!</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
<input class='topsubsboxname' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/>
<input class='topsubsboxemail' name='email' onblur='if (this.value == '') {this.value = 'Your Email Address';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/>
<input class='topsubsboxbutton' type='submit' value='Sign Up!'/>
</form>
<p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>We'll not spam mate! We promise.</p>
</div>
<div class='socialicons'>
<div class='socialheading'>Become Our Fan on Social Sites!</div>
<ul>
<li><a href='https://www.facebook.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIbxThBRD_5ZLLikfH5wKGTsMe160v_eGp9VdocNwiQdsmeEVgDOuvhS11_7rb_bU-aTqhJIdC5Oo7MhIwgP1DQP_zYo-zrGqxQI4dSOFXUya77Cwi_evm2es-TURNTHmnNWjNXGzcPZ84/s1600/facebook_64.png' title='Facebook'/></a></li>
<li><a href='https://twitter.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTD0E5jH3scQeFiWXxOkwIWxRD8eLFxI7v3AjuzThtbltP7SDyHh7149i60DeFdRvN5x5Ysxis5VH63foMpgk30QAcHJzxmnszcQN6z1GcMhfu7w-KeD2DSGPTjL34RgdzI9Ja96Tf3RNf/s1600/twitter_64.png' title='Twitter'/></a></li>
<li><a href='https://plus.google.com/101996924620264617682/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAtRgDX21_i8py-RfyJDbO19qppbFgLHj3-XEdO3Ujvhi-gdLDwlifyqRN0OzLtOsMbP1hEA8AyZ1Mu01CV9e9SatO6dN_gZC5fua-GHAIlwtstJK1uc6FaXiYLmObUsAE60nLB5H-JWEv/s1600/google-plus_64.png' title='Google +'/></a></li>
<li><a href='http://feeds.feedburner.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtGk4EwI7nES5nP6CGotgCEX3s2rUvR309V8qE64tN1oCMibBYE_FReN8FjsTbRyB5bXjmhMSxqz48UPX48LAocz1JrbgvAnchWcA_7go61TCbnGORMxQrj54Sc466CfZ0teldTs8Om9M/s1600/rss_64.png' title='Rss'/></a></li>
<li><a href='http://pinterest.com/yaqoobhisbani/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeCxHj8dqnxJ-3xo9zNxBbBBTI54DKUtnWpMIpuUW-UeHCl0O4MUE59q5SrKBBWo1ZaM_sjYYJq49g6712Yd797aMdwHWNx4bZV2xTMdppQAd5rCX7U6GLZbFW26lft_PM1hCYh7ub3k7v/s1600/pinterest_64.png' title='Pinterest'/></a></li>
</ul> </div>
</div>
<!-- Top Subsbox By Www.BloggerYard.Com End -->
- Replace The Highlighted Links With Yours.
Socializer Widget
- Go To Blogger >> Template >> Edit HTML
- Find For <!--- Socializer Widget By Www.BloggerYard Start -->
- There You Will See The Following Code
<!--- Socializer Widget By Www.BloggerYard Start -->
<b:if cond='data:blog.pageType == "item"'>
<style>
#byard-socializer {
width:500px;
height:250px;
border:1px solid #ddd;
-moz-box-shadow:0 7px 9px rgba(50,50,50,0.75);
box-shadow:0 7px 9px rgba(50,50,50,0.75);
background:#f1f1f1;
transition:background .5s;
-webkit-transition:background .5s;
-moz-transition:background .5s;
overflow:hidden;
margin:10px;
}
#byard-socializer:hover {
background:#fff!important;
}
#byard-socializer-title {
text-align:center;
border:1px solid #2aa4cf;
font-size:20px;
background:#2aa4cf;
font-weight:2000;
font-family:oswald;
color:#fff;
padding:5px;
}
#sw-credits {font-size:13px;}
.likeonfb {padding-left:10px;}
</style>
<script src='https://bloggeryard.googlecode.com/svn/trunk/Socializer.js/' type='text/javascript'/>
<script type='text/javascript'>
var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
publisher: "
ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<center>
<div id='byard-socializer'>
<div id='byard-socializer-title'>
Please Give Us Your 1 Minute In Sharing This Post!
</div>
<div id='SocializeIt'>
<font class='heading'>SOCIALIZE IT →</font>
<div class='tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='like'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='plusone'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div id='followus'>
<font class='heading'>FOLLOW US →</font>
<div class='likeonfb'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fmhahnh786&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
</div>
<div class='followontwitter'>
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/mhahnh786' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div id='share'>
<font class='heading'>SHARE IT →</font>
<div class='sharing'>
<span class='st_facebook_large' displaytext='Facebook'/>
<span class='st_twitter_large' displaytext='Tweet'/>
<span class='st_googleplus_large' displaytext='Google +'/>
<span class='st_pinterest_large' displaytext='Pinterest'/>
<span class='st_linkedin_large' displaytext='LinkedIn'/>
<span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
<span class='st_email_large' displaytext='Email'/>
<span class='st_sharethis_large' displaytext='ShareThis'/>
</div>
</div>
<div id='sw-credits'>
Powered By: <a href='http://www.bloggeryard.com' id='swcreditx'>BloggerYard.Com</a>
</div>
</div>
</center>
</b:if>
<!--- Socializer Widget By Www.BloggerYard End -->
- Replace BloggerYard With Your FB Page Username Also Replace The Twitter Link With Yours.
Footer Menu
- Go To Blogger >> Template >> Edit HTML
- Find For <div id='footer-top-wrapper'>
- There You Will See The Code Like Below
<div id='footer-top-wrapper'>
<div id='footer-top'>
<ul id='footer-navigation'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Privacy Policy</a></li>
</ul>
<div id='backtotop'>
<p id='back-top'>
<a href='#'>Back to top</a>
</p>
</div>
</div></div>
- Replace Blue Highlighted Code With The Link
- Replace Yellow Highlighted Text With Your Link Text.
- Congratulations! You've Successfully Customized The Template!
COMMENTS