HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

How To Setup Tech Pro Blogger Template [TemplatesYard]


Tech Pro is a magazine blogger template for tech and mews blogs, loaded with tons of widgets it has the capability to match any wordpress site design professionally. Tech Pro is equipped with various of widgets which will help you to publish your blog more professionally. To make it easy for you we have published this detailed documentation, so that you can setup your blog correctly. You have made a good decision by choosing our template.
You can check the live demo or download the template through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.

Video Documentation

You can check this below video to understand the setup process much more easily, just click the below image to watch the video directly on YouTube, or click this link - How To Setup Jasmine Blogger Template - Way2Themes

Top Navigation

Access your blog Layout > click Edit link on Top Navigation widget.


Social Top Widget/Social Footer Widget

Access your blog Layout > click Edit link on Social Top widget.

Icons Available { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen}


Main Menu/ DropDown/ Multi DropDown

Access your blog Layout > click Edit link on Main Menu widget.
Normal Link : Features
Sub Link: _Sub Link 1.0 (before the link add "_") 1 underscore
Sub Link 2: __Sub Link 1.1 (before the link add "__") 2 underscore

Ticker News

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Ticker News Section, and then add one of the following

  • Recent Posts: <span data-type="recent" data-no="5"></span>
  • Label / Tag Ex: <span data-type="label" data-label="Sports" data-no="5"></span>


Slider Widget 


Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Posts Section, and then add one of the following.


  • Recent Posts<span data-type="ty-latest-slide" data-no="6"></span>
  • Label / Tag Ex<span data-type="ty-tag-slide" data-label="Sports"  data-no="6"></span>

Main Featured Post 


Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Posts Section, and then add one of the following.



  • Recent Posts<span data-type="tyard-recent"></span>
  • Label / Tag Ex<span data-type="tyard-label" data-label="Sports"></span>

Featured Summary


Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Posts Section, and then add one of the following.



  • tysum: <span data-type="tysum" data-label="Video" data-no="3"></span>

Content Featured Widgets

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Box Layout / Box Layout 2 / Gallery Section, and add the type of the desired box


Types : { tybox, tylist ,  tyleft , tyright , tygrid }

  • tybox:  <span data-type="tybox" data-label="Food" data-no="4"></span>
  • tylist: <span data-type="tylist" data-label="Technology"></span>


  • Column has two option one for left and other one for right.
  1. Column left: <span data-type="tyleft" data-label="News"></span>
  2. Column Right: <span data-type="tyright" data-label="Sports"></span>

  • tygrid: <span data-type="tygrid" data-label="Video" data-no="6"></span>


Custom Widgets

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Sidebar or Footer section, you must place the following codes highlighted in blue below.

  • Recent Post
Recent Posts: <span class="latestposts" data-no="5"></span>


  • Label Posts
Post Per Tag: <span class="tagpost" data-label="Break" data-no="5"></span>


  • Recent Comments
Recent Comments: <span class="latestcomments" data-no="5"></span>


After add, click save.

Social Counter

Go to Layout > Social Counter Area > Click on Edit > and follow this steps below.
On "New Site Name" fild1 field add Social Name [Social Counter].
And on "New Site URL" fild2 field add your Social Url.

  • Exemple: Only this Socials Supported !

facebook count=3.5k;
twitter count=1.7k;
gplus count=735;
youtube count=2.8k;
pinterest count=524;
dribbble count=7.3m;
instagram count=849;
rss count=286;
Example:

Comments System

Access your blog Layout > click Edit link on Comments System widget.
Add one of the following provisions
  • [blogger] for blogger comments
  • [facebook] for facebook comments
  • [disqus] for disqus comments

you can add one system, two or three as you like and with arrangement you want for example
[facebook]
[disqus]
[facebook][disqusss]
[blogger][facebook]
[facebook][blogger]
[disqus][facebook][blogger]
[blogger][disqus][facebook]

Disqus Shortname

Access your blog Layout > click Edit link on Disqus Shortname widget.
What you have to do is just add the shortname

Facebook Page Plugin:

<center><div class="fb-padding"><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.3&appId=1395743857335531";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/templatesyard" data-width="280" data-height="230" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div></div></center>
or you can follow this tutorial if above method won't work

Author Profile Details


Access your blog Layout > click Add a Gadget > HTML/JavaScript on Post Author Details section, you must place the codes in the blank space.


Author Social Widget

Go to your blogger dashboard > Layout > click Edit link on Author Social widget.

In the "New Site Name" field replace the word "facebook" with any social media website (twitter, youtube, google-plus, etc...).

Note: keep in mind that this template uses the "Font Awesome" service for the icons. 
Follow this link for the complete set of icons that this service provides: 

Footer Navigation

Access your blog Layout > click Edit link on Topnav widget.

it automatically picks pages and page links but in case it doesn't pick, please see the above image to add one, you can also add external links(Links from somewhere else).

Shortcodes

  • Full Width Post;
Go to Pages or Posts > New Page or Post
On the new page content/post content after adding the page/post title, add the [full_width] code in the page content area.
  • Left Sidebar;
Go to Pages or Posts > New Page or Post
On the new page content/post content after adding the page/post title, add the [left_sidebar] code in the page content area.
  • Right Sidebar;
Go to Pages or Posts > New Page or Post
On the new page content/post content after adding the page/post title, add the [right_sidebar] code in the page content area.
  • Sitemap Page;
Go to Pages > New Page
On the new page content after adding the page title and hiding the comments using options, add the [sitemap] code in the page content area.

Theme Option


Full Width Version(trure/false):

  • Add (true) to Boxed, to return the Full version just add (false)

PageNavi Results No:

  • Type your number for Page Navigation, Default is "8"

Fixed Sidebar (trure/false):

  • Add (true) to Fix the sidebar, to unfix just add (false)

Theme Colors

Access your blog Template > click Customize.
Here is where you can change the main color of the model, using your favorite colors.


Installation And Custom Services

We provide plenty of templates for free but if you want something unique for your blog then let us create a unique design for your blog, Just tell us your needs and we will convert your dream design into reality. We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle.

Only Premium Buyers will get the widget codes available in the demo.
If you are a premium version user and you are having any problem while setting up the template please contact us by going to this link (Contact Form).
How To Setup Tech Pro Blogger Template [TemplatesYard] How To Setup Tech Pro Blogger Template [TemplatesYard] Reviewed by TemplatesYard on November 18, 2017 Rating: 5

91 comments:

  1. How to add Random posts

    ReplyDelete
    Replies
    1. It only has random post button.

      Delete
    2. What about social share button it shows link

      Delete
    3. That is a post sharing link. Anyone can copy and paste it to social media profiles for easy sharing.

      Delete
  2. sir do u have a proper documentation > ? plz give me step by step . i m install already my theme and started to adding post

    ReplyDelete
    Replies
    1. This is the only documentation need, it has step by step guide to setup widgets.

      Delete
    2. Where do the photos in slider come from?

      Delete
  3. hello sir http://www.prishashah.com/ this is my domain in home page banner is not showing what to do now ?

    ReplyDelete
  4. How to Show Mega Menu, sir?

    thanks

    ReplyDelete
  5. so i add some pictures in my article and post it. but when i look the post, the pictures aren't showed but just blank space. do you know why ?

    ReplyDelete
    Replies
    1. I have the same problem, the post makes the first photo background of the post header and removes it from the post... Fix this please. Or add an option to change this setting.

      Delete
    2. It isn't an issue but a feature, you can see we have same in our demo.

      Delete
  6. in my blog slider widget is not working

    ReplyDelete
  7. Hi I would like to know how can I add more menu in "Main Menu" section ?
    My Blog : https://www.ahteestyle.com/

    ReplyDelete
  8. Hi I would like to know how to show slider by tag with more than 1 tag ?

    ReplyDelete
    Replies
    1. You can use the shortcode for recent posts to make it show post from various tags.

      Delete
  9. my Recent post covered ads. help
    www,sakurahitam,net

    ReplyDelete
  10. so, how to fix blurry slide-thumbnail? please help

    ReplyDelete
    Replies
    1. Upload the images in original size option. and then follow this.
      Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  11. Hi I would like to know which recommend size for slider picture?

    ReplyDelete
    Replies
    1. Upload higher resolution images with original size setting.

      Delete
  12. hi. when ı want to add to widget to be label in main fetured post area, 5 post shown. ı want to only 3 post.

    when ı usse no label, recent no problem only 3 post.

    how can ı do only 3 post in 1 label

    ReplyDelete
    Replies
    1. That widget is meant to show 5 posts, if you want to set it for 3 posts then you have to customize the js and css.

      Delete
  13. sir how to change my theme background color, it is showing in white background, in my blogger page there is option to change bg image, but it is not changing how to solve this problem?

    ReplyDelete
    Replies
    1. Due to limitations on white background is supportable.

      Delete
  14. Slider, Ticker, and other in my blog isn't working since I was applied this template

    ReplyDelete
  15. Good afternoon

    How can I change the image size in the article?

    ReplyDelete
  16. Hey how can I make the menu open in a new tab?

    ReplyDelete
    Replies
    1. Sorry we can't provide support on additional customization rather than solving issues or bugs, if you want to customize your template then buy our blog customization service.

      Delete
  17. I was going to buy this template, but i have a problem with it, when i post something it shows two boxes in which it is written responsive ads here. how to fix this?
    If i cant fix this I am not buying this

    ReplyDelete
    Replies
    1. Those are ad slots, either you can remove it or add your own ad codes.

      Delete
    2. how much for the template? i need to buy. will i get support for customization?

      Delete
    3. Template costs $10 and no support will be provided for customization.

      Delete
  18. Hi, how do I use all the Advertisements widgets?

    ReplyDelete
    Replies
    1. Add your code into html/javascript widget

      Delete
  19. Hi, how to add meta tags?

    ReplyDelete
    Replies
    1. We have already added it, you just have to customize it according to your site.

      Delete
  20. Hi. At the moment of putting the code of the sliding menu "recent publications" nothing appears. Please help me.

    ReplyDelete
  21. Hi, I'm having problems with Slider Widget, it's showing the image with a very low resolution, also the left and right columns are with low resolution, could you help me to solve this little problem?

    My website:
    https://arkademg.blogspot.com/

    ReplyDelete
    Replies
    1. Choose original size in settings while uploading images or simply click the image in post setting and choose original size option.

      Delete
    2. Didn't work. Apparently the code is converting the image to 72px72p and making it larger, so, it's 72x72 image stretched.

      Delete
  22. After installing the premium version of this template my site is showing some errors. Also my adblocker blocks some ads on my site but I have not pasted any ad code on my site. Please help me to fix those errors. My site is www.progadgets.review.
    i am facing the following errors:

    Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.success ((index):7441)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at x (jquery.min.js:4)
    at XMLHttpRequest.b (jquery.min.js:4)

    ReplyDelete
    Replies
    1. Just setup the template completely, following above documentation.

      Delete
  23. if I have more than one author, as I do for a different description for each one.

    ReplyDelete
    Replies
    1. It doesn't have multi author functionality.

      Delete
  24. Recent Post doesn't work. It's only show 2 post, when I click next there's no post. Can u help me pls...

    ReplyDelete
    Replies
    1. Remember one thing you have to keep the post count same in your blog settings and pagination widget.

      There is a limit of 1mb from blogger side, only 1mb of images or text you can show in home page and you are exceeding that limit and that is the reason rest of the post is going on next page, there is not any solution, but you can try page break after 1st paragraph in every post, may be this will help.

      Delete
  25. sir slider not working your template & how to remove post header what is problem??

    ReplyDelete
  26. how to increase related posts number

    ReplyDelete
  27. hello sir,

    I have an issue with "Main menu" - I have added blog address to each menu links (URL), but when i use to click on main menu items it first shows me Error 404 and after that it redirects me to specified blog post... why it is showing Error 404 while clicking on main menu items.

    Is there is another method to link main menu items to our blog post?

    please tell me..

    My Blog Address is: http://www.babanetworks.com

    Thanks in advance for solving my problems

    ReplyDelete
  28. Good morning, is it possible that the post image does not stand out and appear normally at the beginning of the news?

    ReplyDelete
    Replies
    1. Sorry we can't provide support on additional customization(Adding or Removing stuffs) rather than solving issues or bugs, if you want to customize your template then buy our blog customization service.

      Delete
  29. Ticker News not work properly, runing without animation
    www.pdmpurbalingga.com

    ReplyDelete
  30. how do I add labels that contain spaces to place in data-labels? I have placed but did not work

    ReplyDelete
  31. Please,
    My Homepage in Feautured is Blank

    https://3.bp.blogspot.com/-fsZUinboJX0/W9LNzEXXJkI/AAAAAAAAAG8/b39HUh3lV1IJHC1ya11n5qTCgiabQV_swCEwYBhgL/s1600/tech%2Bpro.jpg

    ReplyDelete
  32. if it's updated, the image above the article I suggest is displayed normally. It's not like now being cut off.

    ReplyDelete
  33. Hello, I want to buy this theme, but before I purchuse it, I test the free code here and "recent posts" doén't work, please help me...

    https://viet-project.blogspot.com/

    ReplyDelete
  34. Hello, I want to buy this theme. However, I'm wondering if it's possible to change which icons are shown when the user hover any post card in home screen, e.g. news icon, sports icon, video icon, etc., or how they actually work.

    Thanks in advance.

    ReplyDelete
    Replies
    1. Icons are related to blog category, you can sign any icon to any category fro layout.

      Delete
    2. Thanks for your reply. Just a last question: is it possible to use a dark background and white text? I want something to look like my actual layout at https://frenegeek.com

      Delete
    3. Can you provide a screenshot of that specific area.

      Delete
  35. My blog is www.heathpedia.com . In that the breaking news ids not moving. Earlier it used to move but now it just stays at one place.

    ReplyDelete
  36. When I use any embedded youtube video my post image gone to blur. What can I do?

    ReplyDelete
  37. The two ad slot above and below body post doesn't show my adsense ad

    ReplyDelete
    Replies
    1. Are you converting the ad code or directly implementing it.

      Delete
  38. how to use codebox, tables and alert boxes and download buttons

    ReplyDelete
    Replies
    1. You can follow this tutorial.
      http://www.sorabloggingtips.com/p/shortcodes-and-page-markups.html

      Delete
  39. Hello! I just want to know why it redirect to another page when I use anti ad blocker code? How can I solve this problem?

    ReplyDelete
  40. How do I edit the boxes that appear in posts as "responsive ads"? My template is the premium version

    ReplyDelete
  41. my contact form is not sending emails pleas help

    ReplyDelete
    Replies
    1. You have to install blogger's official contact form first.

      Delete
  42. JUst want to buy this template, how to change icon when user do hover, and how to use Label Icon CSS

    ReplyDelete
  43. Can you improve the mobile version of menu and sub menu views?

    ReplyDelete
    Replies
    1. if you want to customize your template then buy our blog customization service.

      Delete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.