Platform : Blogger/BlogSpot
Release Date : 21 June, 2013
Category : Technology, Blogging
Layout : Two Column
Author : www.bloggeryard.com
License : Creative Commons Attribution
we're back with a special gift. It have best seo services, We're releasing a simple (little bit stylish) template which is named as Tech Shadow for all the blogger users. This is a multipurpose and responsive blogger template. I am sure that you all readers will love it. And we'll post some more and new blogger templates.
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 Free Blogger Templates:
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'><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRm_VGbCKoiiEq-Lm0AJ0zBdylJUnqfIwgyX9xOaUGBIDuxbdYyopD7l1UuIeNOYZBW3SLHPjjikwC0JneKGjM6Y7luzIIOgPtKVo6_A0CiirA9aEkcm__ganjBM6Ce_cgMsOFZv9Q265K/s1600/facebook_64.png' title='Facebook'/></a></li>
<li><a href='https://twitter.com/BloggerYard'><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcIDZosYOwK5cexXLTu9de7fpf01fcv9y0oEi_6-V-veMu3vDGAuPekf3SDpjYSLziMJP-myeNPr1aH6VuYhXf6NWiPoGZ6TqIhBW5CMyWp1iV3UQWUaeOluoNQCTaiRwDd0URBCjow0S6/s1600/twitter_64.png' title='Twitter'/></a></li>
<li><a href='https://plus.google.com/101996924620264617682/'><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii0jM3rUXhDR8_cIRTxYaBhqt2HWGXM3TaS4NzH1W1hNyEWhCYXubfgAR_3Gyo7IXIbBSQUlFP0m64xvtS0rrVLyB1OEOMFSIeRNRcp8hkMxf81jmOKGVGFJznkdqRZ8Mzgu9RLc4hDUi_/s1600/google-plus_64.png' title='Google +'/></a></li>
<li><a href='http://feeds.feedburner.com/BloggerYard'><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwC7Ii23bwfhOWzBJK5etjvbyF2_83odMpJf7S4vBye1RKuR3Gerx4-zNOe_ChI9aZUp6J0GQu9_cQMsyIffaMe0WywUg6Pk4WKfK2FKqOX0QjRGlRO3RH0ySJuyQcuwOWlvp-RJuDM0FJ/s1600/rss_64.png' title='Rss'/></a></li>
<li><a href='http://pinterest.com/yaqoobhisbani/'><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwzewE2hxQYiW8KM5QhdrxORmIWJUhjyrxL3DDRam_Ltzy7lZIOhmHWDc1E101SmCxOSUKTAx38pQOzfxOxzn0aKJhmRDTuGGv6YmImlL6M41cconqsuSE32VPwls2s7dc5O2cpWHgRlmT/s1600/pinterest_64.png' title='Pinterest'/></a></li>
</ul> </div>
</div>
<!-- Top Subsbox By Www.BloggerYard.Com End -->
- Replace The Highlighted Links With Yours IDs.
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%2FBloggerYard&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/BloggerYard' 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!
Last Words
So friends, This was our Tech Shadow Free Blogger Templates with great seo service. And after this we'll share more blogger templates I hope you'll like this template and use this in your blog. If you need for any help about customizing this template then leave your comments below. Take care. HappyDo You Like This Post ?