tutorial Membuat Related Post ( link within)

tutorial Membuat Related Post-Ini adalah salah satu cara agar page view dalam blog Anda dapat meningkat. Selain, usaha dalam membuat daftar isi. Nah, dengan membuat relateed post atau ada juga yang menulis "you might also like", atau artikel terkait, ada juga yang menulis "Anda mungkin Menyukai Ini".

Banyak cara yang dapat dilakukan memang untuk membuat yang seperti di atas. Tapi, setelah saya mencari dan memperaktekkan satu-satu tip blog yang ada di internet terkait pemasangan related post, maka saya temukan yang termudah. Nah, di sini saya ingin share mengenai "Membuat Related Post" dengan cara menggunakan widget Link Within.

Bagaimana caranya? Yuk, simak dan praktekkan tutorial blog berikut :

1. Seperti biasa masuk ke blog Anda (Log in dulu).

2. Kemudian klik link berikut : http://www.linkwithin.com/learn?ref=widget

3. Setelah Anda, mengklik link di atas, maka Anda akan di bawa pada halaman seperti berikut :

4. Isikan dengan alamat e-mail Anda, kemudian link blog Anda, platform (pilih: Blogger atau yang lainnya), pilih berapa tampilan linkwithin atau related post yang ingin ditampilkan. Kemudian klik Get Widget.

5. Setelah itu, Anda akan dibawa pada halaman yang seperti gambar berikut, kemudian klin Install Widget.

6. Setelah Anda meng-klik Install Widget Anda akan diarahkan ke bagian Template Blog Anda. Nah,           tugas Anda selanjutnya, sesuaikan letak Widget di atas. Baiknya dan pada umumnya di bagian                bawah Post.

7. Setelah selesai, klik Simpan Untuk mengekseskusi.

Nah, itulah tadi tutorial blog bagaimana cara membuat related post dengan menggunakan widget. Semoga informasi ini dapat bermanfaat. See you pada postingan selanjutnya.

Read More

cara membuat related post bergerak

berikut ini cara membuat related post bergerak :

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

</head>

lalu copy dan pastekan kode di bawah ini tepat di atas kode </head> :

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3_BEvV7LUb9EnsvaHD95oQqMSlHXiVMVV5k-viNgWXUOweJnYRq2dN5tK6UCCvNY2pCafx22P-frv7AGAwU-lnqPNndoH71n2Zv0A3SD_guP-PaIZsvZvegZx_cGbIE_wqmUngBHhNY/s1600/bt.png) no-repeat top;}.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3_BEvV7LUb9EnsvaHD95oQqMSlHXiVMVV5k-viNgWXUOweJnYRq2dN5tK6UCCvNY2pCafx22P-frv7AGAwU-lnqPNndoH71n2Zv0A3SD_guP-PaIZsvZvegZx_cGbIE_wqmUngBHhNY/s1600/bt.png) no-repeat bottom;}</style><script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglF1bx-sj47zsx8wtV9rLW7OakactyeMZqOAfCw_H2y6FmprT5ee8iKBIlO4jmpGrLCTps4MwDhZv420aMz7bjbTil5Ty1CSd2g7NqIxL1Kr87rQFy1SPy2rqEfb7fklrZA9DcKD54sJY/s1600/noimage.jpg';</script><script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script></b:if>

selanjutnya cari kode seperti di bawah ini :

<div class='post-footer-line post-footer-line-1'>

atau :

<p class='post-footer-line post-footer-line-1'>

tambahkan kode di bawah ini tepat di bawah  kode tersebut :

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop><h3>Related Posts</h3><marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=10;var relatedpoststitle=&quot;&quot;;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></marquee></div><div style='clear:both'/></b:if>

lalu Simpan dan Anda sudah selesai. Anda dapat mengatur jumlah maksimum posting terkait hingga 20 tulisan, hanya membuat mengubah nomor berwarna merah (10) dan menyesuaikan dengan cara yang Anda suka.

Read More

Membuat Scroll Pada Blog Archive (Arsip Blog)

Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.
Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.

8. Simpan jika sudah selesai. 

Read More