Cara memasang Breadcrumbs Valid AMP diBlogger

Unknown, 31 Oktober 2016

TIPS CODE SHARE - Breadcrumbs ialah menu struktur tempat post seperti Beranda > Label/Kategori > Judul Postingan. Hal ini berguna juga untuk pengunjung yang dapat mengakses tempat maupun postingan-postingan yang bersangkutan dengan postingan tersebut.

Lalu bagaimana dengan Template Blogger berjenis AMP ? bisa saja ko sob, simak berikut ini.

/*CSS MATERIAL ICONS*/
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:local('Material Icons'),local(MaterialIcons-Regular),url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format("woff"),url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format("woff2"),url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format("truetype")}
.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:inherit;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:middle;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:liga}
/*CSS BREADCRUMBS*/
.breadcrumbs{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;padding:15px;border-bottom:1px solid rgba(0,0,0,0.14);font-weight:700;}
.breadcrumbs a{color:#000;margin:0 2px;line-height:normal;}
.breadcrumbs .breadhome a{margin:0 5px 0 0}
.breadcrumbs .breadlabel:last-child{margin:0 0 0 4px}
.breadcrumbs a:hover{color:#138be6;}

Letakan kode tersebut diatas </style> atau dibawah <style amp-custom='amp-custom'>.

<b:include data='posts' name='breadcrumb'/>
Letakan dibawah <b:includable id='main' var='top'>.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url and data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' id='breadcrumbs'>
<div id='bread-crumbs'>
<span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Beranda'><span itemprop='title'><i class='material-icons'>&#59530;</i> Beranda&amp;nbsp;</span></a></span>&amp;nbsp;<i class='material-icons'>&#58133;</i>
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=15&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> <i class='material-icons'>&#58133;</i> </b:if></span>
</b:loop>
 <i class='material-icons'>&#58133;</i> <span><data:post.title/></span>
</div></div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Letakan kode tersebut seperti gambar berikut ini.

Jika anda belum paham, silahkan berkomentar sob dengan senang hati saya membantu anda kok ^_^.

Cara memasang Breadcrumbs Valid AMP diBlogger AMP HTML

Cara memasang Breadcrumbs Valid AMP diBlogger
AMP HTML