read another way
Tutorials like this actually has been pretty stale . When I was new to the world of bloggers tutorial like this has a lot to discuss . But of course what I will share here is in accordance with his own experience and experiment results , so maybe there will be a difference with tutorials ever before .
Tutorial template modification this time I use the default template blogger named Simple as material for example . Template buddy may wear different so maybe there will be some different code to that in this tutorial .
1 . Modification Title SEO Friendly
As already discussed in the previous post , the first thing that is most important in a template is the Title tag . To modify the Title tag on blogger template to make it more SEO friendly is like this :
Find the following code in your template :
<title> <data:blog.pageTitle/> < / title>
After that, remove and replace with code SEO friendly title tag style Mas Sugeng below :
< ! - SEO Title Tag - >
<b:if cond='data:blog.url == data:blog.homepageUrl'> <title> <data:blog.title/> < / title> < / b : if>
<b:if cond='data:blog.pageType == "item"'> <title> <data:blog.pageName/> | <data:blog.title/> < / title> < / b : if>
<b:if cond='data:blog.pageType == "archive"'> <title> Archive for <data:blog.pageName/> < / title> < / b : if>
<b:if cond='data:blog.pageType == "static_page"'> <title> <data:blog.pageName/> < / title> < / b : if>
<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.searchLabel'> <title> <data:blog.title/> - < Data : the blog . pagename / > < / title> < / b : if> < / b : if>
<b:if cond='data:blog.pageType == "error_page"'> <title> Page Not Found < / title> < / b : if>
<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.url != data:blog.homepageUrl'> <title> < Data : blog.pageTitle / > - All Post < / title> < / b : if> < / b : if>
Note : if my friend uses templates instead of blogger , it is usually the structure of the title tag in your template has been modified , so it's better to be left alone .
2 . Modification Meta Tag SEO Friendly
Here I will not give too much explanation of the modified code , because it's all I have explained in my previous post , especially the problem of meta tags . So just to modify the meta tags to make it more SEO friendly , please pal copy / copy the following code :
< ! - SEO Meta Tags - >
<b:if cond='data:blog.homepageUrl == data:blog.url'> <meta expr:content='data:blog.title' name='keywords'/> < / b : if>
<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' name='keywords'/> < / b : if>
<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.searchLabel'> <meta content='noindex,nofollow' name='robots'/> < / b : if> < / b : if>
<b:if cond='data:blog.pageType == "archive"'> <meta content='noindex,nofollow' name='robots'/> < / b : if>
<b:if cond='data:blog.isMobile'> <meta content='noindex,nofollow' name='robots'/> < / b : if>
After that paste the code below <head> code in your template .
3 . Heading Tag Dynamically
Furthermore, you need to do is modify Tah buddy Heading that dynamic . Dynamic kamsudnya how Masbro ? please read my previous post for clarification .
Find this code in your template :
<b:widget id='Header1' locked='true' SEO title='Simple (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
< ! -
Show image as background to text . You can not really calculate the width
reliably in JS Because margins are not taken into account by any of
clientWidth , offsetWidth or scrollWidth , so we do not force a minimum
width if the user is using shrink to fit .
This results in a margin - width 's worth of pixels being cropped . if the
the user is not using shrink to fit then we expand the header .
- >
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
< h1 class = ' title ' style = ' background: transparent ; border-width : 0px " >
<b:include name='title'/>
< / h1 >
< / div >
<b:include name='description'/>
< / div >
<b:else/>
< div expr : style = ' " background-image : url ( \ " " + Data : sourceUrl + " \ " ) ; " + " Background-position : " + Data : backgroundPositionStyleStr + ' ; " + Data : widthStyleStr + " min -height : " + Data : height + " _height " + Data : height + ' background-repeat : no-repeat ; " ' id = ' header - inner ' >
<div class='titlewrapper' style='background: transparent'>
< h1 class = ' title ' style = ' background: transparent ; border-width : 0px " >
<b:include name='title'/>
< / h1 >
< / div >
<b:include name='description'/>
< / div >
< / b : if>
<b:else/>
< ! - Show the image only - >
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
< img expr : alt = ' the data : title ' expr : height = ' Data : height' expr : id = ' Data : widget.instanceId + " _headerimg " ' expr : src = ' Data : sourceUrl ' expr : width = ' Data : width' style = ' display: block ' / >
< / a>
< ! - Show the description - >
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
< / b : if>
< / div >
< / b : if>
<b:else/>
< ! - No header image - >
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
< / h1 >
< / div >
<b:include name='description'/>
< / div >
< / b : if>
< / b : includable >
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'> <span> <data:description/> < / span > < / p >
< / div >
< / b : includable >
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'> <data:title/> < / a>
< / b : if>
< / b : includable >
< / b : widget >
The very long code is the code for the header part sob , where menampilakan title and description . Before looking for the code silakn buddy buddy code I noticed a red mark above , the code will vary according to your blog title .
If my friend had found the code, please remove it all and replace with which I have modified below :
<b:widget id='Header1' locked='true' SEO title='Simple (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
< ! -
Show image as background to text . You can not really calculate the width
reliably in JS Because margins are not taken into account by any of
clientWidth , offsetWidth or scrollWidth , so we do not force a minimum
width if the user is using shrink to fit .
This results in a margin - width 's worth of pixels being cropped . if the
the user is not using shrink to fit then we expand the header .
- >
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
< h1 class = ' title ' style = ' background: transparent ; border-width : 0px " >
<b:include name='title'/>
< / h1 >
< / div >
<b:include name='description'/>
< / div >
<b:else/>
< div expr : style = ' " background-image : url ( \ " " + Data : sourceUrl + " \ " ) ; " + " Background-position : " + Data : backgroundPositionStyleStr + " ; " + Data : widthStyleStr + " min -height : " + Data : height + " _height " + Data : height + ' background-repeat : no-repeat ; " ' id = ' header - inner ' >
<div class='titlewrapper' style='background: transparent'>
< h1 class = ' title ' style = ' background: transparent ; border-width : 0px " >
<b:include name='title'/>
< / h1 >
< / div >
<b:include name='description'/>
< / div >
< / b : if>
<b:else/>
< ! - Show the image only - >
<div id='header-inner'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0 0 0;height:0px;'> <b:include 0;padding:0 name='title'/> < / h1 >
< / b : if>
< / b : if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
< img expr : alt = ' the data : title ' expr : height = ' Data : height' expr : id = ' Data : widget.instanceId + " _headerimg " ' expr : src = ' Data : sourceUrl ' expr : width = ' Data : width' style = ' display: block ' / >
< / a>
< ! - Show the description - >
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0 0 0;height:0px;'> <b:include 0;padding:0 name='title'/> < / h1 >
< / b : if>
< / b : if>
< / b : if>
< / div >
< / b : if>
<b:else/>
< ! - No header image - >
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title'> <b:include name='title'/> < / p >
<b:else/>
<h1 class='title'> <b:include name='title'/> < / h1 >
< / b : if>
<b:else/>
<p class='title'> <b:include name='title'/> < / p >
< / b : if>
<b:include name='description'/>
< / div >
< / div >
< / b : if>
< / b : includable >
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'> <span> <data:description/> < / span > < / p >
< / div >
< / b : includable >
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'> <data:title/> < / a>
< / b : if>
< / b : includable >
< / b : widget >
Still not finished , the next step is to edit on the post title . How to find the code below in your template :
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/> < / a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'> <data:post.title/> < / a>
<b:else/>
<data:post.title/>
< / b : if>
<b:else/>
<data:post.title/>
< / b : if>
< / b : if>
< / H3 >
< / b : if>
Remove all the code and replace it with this :
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/> < / a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'> <data:post.title/> < / a>
<b:else/>
<data:post.title/>
< / b : if>
<b:else/>
<data:post.title/>
< / b : if>
< / b : if>
< / h1 >
<b:else/>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/> < / a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'> <data:post.title/> < / a>
<b:else/>
<data:post.title/>
< / b : if>
<b:else/>
<data:post.title/>
< / b : if>
< / b : if>
< / h2 >
< / b : if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/> < / a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'> <data:post.title/> < / a>
<b:else/>
<data:post.title/>
< / b : if>
<b:else/>
<data:post.title/>
< / b : if>
< / b : if>
< / h1 >
< / b : if>
< / b : if>
Is it finished ? ? ? ? yet ! ! !
Actually until this step is enough to make a heading tag structure in your blog to be dynamic , but maybe there will be a rarity that will mate see on your blog , that is the title of the blog into a small visible . The solution please my friend find this code :
. Header h1 {
font : $ ( header.font ) ;
color: $ ( header.text.color ) ;
text-shadow : $ ( header.shadow.offset.left ) $ ( header.shadow.offset.top ) $ ( header.shadow.spread ) RGBA ( 0 , 0 , 0 , .2 ) ;
}
. Header h1 a {
color: $ ( header.text.color ) ;
}
. Header h1.title , . P.title { Header
font : $ ( header.font ) ;
color: $ ( header.text.color ) ;
text-shadow : $ ( header.shadow.offset.left ) $ ( header.shadow.offset.top ) $ ( header.shadow.spread ) RGBA ( 0 , 0 , 0 , .2 ) ;
}
. H1.title header a, . P.title a { Header
color: $ ( header.text.color ) ;
}
I am sure my friend will not find the code if you do not use Simple template from blogger , so I can only congratulate spinning fun .
4 . Installing breadcrumb
Find the code below :
<b:includable id='main' var='top'>
Delete the code and replace with the following :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='nofollow'> Home < / a> < / span > » <span> < Data : blog.pageName / > < / span >
< / div >
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'> <a expr:href='data:blog.homepageUrl' itemprop='url'> < itemprop span = ' title ' > Home < / span > < / a> < / span > » <b:loop values='data:post.labels' var='label'> < span itemscope = '' ItemType = ' http :/ / data-vocabulary.org/Breadcrumb ' > <a expr : href = ' Data : label.url + " ? & max - results = 8 " ' itemprop = ' url ' > <span itemprop='title'> <data:label.name/> < / span > < / a> < / span > < b: if cond = ' Data : label.isLast ! = " true " ' > » < / b : if> < / b : loop > » <span> <data:post.title/> < / span >
< / div >
<b:else/>
<div class='breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='nofollow'> Home < / a> < / span > » <span> Uncategories < / span > » < span > <data:post.title/> < / span > < / div >
< / b : if>
< / b : loop >
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='nofollow'> Home < / a> < / span > » <span> Archive for < Data : the blog . pagename / > < / span >
< / div >
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='nofollow'> Home < / a> < / span > » <span> < Data : blog.pageName / > < / span >
< / div >
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span> <a expr:href='data:blog.homepageUrl' rel='nofollow'> Home < / a> < / span > » <span> All posts < / span >
<b:else/>
<span> <a expr:href='data:blog.homepageUrl' rel='nofollow'> Home < / a> < / span > » <span> <data:blog.pageName/> < / span >
< / b : if>
< / div >
< / b : if>
< / b : if>
< / b : if>
< / b : if>
< / b : if>
< / b : if>
< / b : includable >
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
After the live little buddy add the CSS so it looks not too plain . Copy / copy the CSS code below :
. breadcrumbs {
font-size : 11px ;
color: # 666 ;
padding : 10px 0px ;
margin : 0px 10px 20px ;
border-bottom : 1px solid # ddd ;
}
And put it on top of the code :
] ] > < / b : skin>
Huft .. !
I think all the above is enough to make your blog template to be more handsome than ever . I know for my friend who does not familiar with the code berurusuan definitely above tutorial will only make the headache . So the only solution is to simply download ready-made templates .
Simple SEO , template modification a la Mas Sugeng . Download Click Here . Demo Click Here .
Please be my friend download Simple template which I modified via the link above . This template has been auto readmore I add to make it look more tidy .
read another way
%5B1%5D.jpg)
0 komentar:
Post a Comment
Komentarlah Dengan kata-kata yang sopan