Cara mudah membuat Related Post di bawah Postingan blogger




Cara mudah membuat Related Post di bawah Postingan blogger
Cara mudah membuat Related Post di bawah Postingan blogger

Selamat pagi para blogger, jumpa lagi dengan saya yang selalu update berbagai macam Artikel. Nah untuk pada pagi ini saya akan menjelaskan sedikit tentang cara membuat Related Post yang letaknya di bawah postingan atau di bawah artikel kalian..


Saya rasa jika penjelasan saya ini berguna lanjutkan untuk membaca dan memperaktekan langkah-untuk pembuatannya. Jika Related sudah terdapat pada bagian blog anda,  diabaikan saja,  ini hanya untuk yang belum memiliki Related Post di bloh mereka. Nah untuk mempersingkat waktu langsung saja ke tahap langkah-langkah pembuatannya..
  • Style Related Post Polosan


Langkah-langkah @


1. Anda harus  Buka akun blogger terlebih dahulu

2. Kemudian anda pilih saja Elemen Template/layout. Dan Pilit Edit HTML, jangan lupa centang Expand Template Widget << cara edit html.

3. Selanjutnya anda bisa mencari kode </head> (cara mudah Gunakan Ctrl+F agar mudah di temukan code yang bewarna merah tersebut), jika sudah anda temukan codenya, anda copykan code di bawah ini yang bewarna hijau kemudian anda Paste di atas code  </head> paham kan­čśü

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. Selanjutnya anda cari lagi kode berikut ini <data:post.body/> hNah jika sudah jumpa codenya yang bewarna biru tersebut di dalam halaman HTML nya maka anda langkah selanjutnya (copy) code di bawah ini yang bewarna hijau tepat di bawah Code <data:post.body/> dan langsung saja di pastekan.
<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Sampai tahap ini anda sudah berhasil menerapakan code tersebut di dalam halaman HTML anda. Jika anda membaca penjelasan artikel ini dengan benar.

6. Dan jangan lupa klik simpan/save dan anda bisa lihat hasilnya sudah muncul atau belum Real Postnya.

Keterangan
Pada saat mencari Code <data:post.body/> mungkin akan terdapat lebih dari satu, dan jika terdapat hanya 2 code saja, coba letakan di urutan nomor 2 code yang bewarna hijau di atas code warna biru, nah jika tidak berhasil anda bisa menerapkannya satu persatu codenya sampai berhasil..
  • Style  Related Post dengan Thumbnail 
[​IMG] 
Style kedua ini tampil lebih cantik dengan tampilan gambar kecilt humbnail untuk menarik perhatian pembaca untuk mengklik artikel terkait yang anda miliki. Berikut cara pemasangannya:

Langkah-langkah @

1. Login ke Dashboard Blog Anda
2. Pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Tekan CTRL+F dan anda cari kode <data:post.body/>
6. kemudian Copy-paste script dibawah ini dibawah kode <data:post.body/> (ini biasanya kode tersebut ada terdapat lebih dari 2, silahkan pilih kode yang terakhir atau coba satu per satu)
Code:
<!-- Related Posts with Thumbnails Code Start-->
<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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
7. klik Save/simpan template tersebut.
  • Style  Related Post dengan Thumbnail 
[​IMG]
Style yang ini memiliki design/tampilannya yang menarik perhatian pengunjung, dan berisi animasi CSS, ketika pada saat anda mengarahkan kursor anda ke Related Post, maka tampilan related post akan memperlihatkan animasi yang menarik (gambar thumbnail menjadi berputar).

Langkah-langkah @

1. Anda Login ke Dashboard Blog Anda
2. Kemudian Pilih menu Template--> Edit HTML
3. Tekan CTRL + F dan anda cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>
Code:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbs-and-summaries.js" />

5. Copy-paste script dibawah ini diatas kode </head>
Code:
<style>
.relatedsumposts {
  float: left;
  padding: 0px 10px;
  overflow: hidden;
  text-align: center;
/* width and height of the related posts area */
  width: 120px;
  height: 200px;
  border-right: 1px solid #E5E5E5;
  display: inline-block;
}

.relatedsumposts:hover {
  background-color: #F7F7F7;
}

.relatedsumposts img:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

.relatedsumposts a {
/* link properties */
  color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}

.relatedsumposts img {
/* thumbnail properties */
  margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
  border: 1px solid #fff;
-webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
}

.relatedsumposts h6 {
/* title properties */
  display: table-cell;
  height: 3em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
/* summary properties */
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}

#relatedpostssum {
  background: #F3F3F3;
  height: 200px; /* related posts container */
  padding: 5px;
  width: 100%;
}

.relatedpoststitle {
  font-size: 19px;
  font-weight: bold;
  border-top: 3px solid #FB8227;
  color: #777;
  display: inline-block;
  padding: 5px 10px;
  width: 190px;
  float: left;
  margin: 0px -200px 0px 20px;
  transform: rotate(90deg);
  transform-origin: left top 0;
  -ms-transform: rotate(90deg); 
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:left top 0; 
  font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
6. Anda Tekan CTRL +F dan cari kode <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> Atau  <a expr:href='data:label.url' rel='tag'><data:label.name/> (kadang terjadi perbedaan tanda titik (.) atau koma (,) Jadi disarankan untuk mencari kode kedua)
7. Setelah anda mendapatkan kode <a expr:href='data:label.url' rel='tag'><data:label.name/>, copy-paste script dibawah ini tepat dibawah baris kode tersebut
Code:
<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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
8. Apabila anda sudah menyelesaikan langkah-langkah nomor 6 dan 7, pastikan script yang dihasilkan sama persis dengan script dibawah ini:
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>
9. Tekan CTRL+ F dan cari kode </b:includable>
10. Tepat diatas kode </b:includable>, tambahkan script berikut ini:
Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

[​IMG]

11. klik Simpan Template.
  • Style  Related Post 
[​IMG] 
 Tampilannya seperti ini cukup enak dilihat dan cukup untuk mempercantik blog anda. Berikut tutorialnya:

Langkah-langkah @

1. Login ke Dashboard Blog Anda
2. Pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>

Code:
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
5. Sekali lagi, copy-paste script dibawah ini diatas kode </head>
Code:
<style>
.related-post{margin:2em auto 0;font-size:13px;background:#fff;border-radius:4px} .related-post h4{margin-bottom: 15px !important; font-size:14px;margin:0 0 .5em;background:#9dcb63;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase} .related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#8db857;color:#fff;border-radius:4px 0 0 0;top:0;left:0;padding:8px 20px;position:absolute} ul.related-post-style-1{padding-left:0!important;margin-top:-12px} .related-post-style-1 li{list-style:none;padding:15px 20px;border-top:1px solid #eceef5} .related-post-style-1 li a{color:#79798d;text-decoration:none} .related-post-style-1 li a:hover{color:#33aea5;text-decoration:none} .related-post-style-1 li:before{content:"\f08e";font-family:fontAwesome;color:#c7cbd4;font-style:normal;top:0;left:0;margin-right:13px}
</style>
6. Anda tekan CTRL+F dan cari kode <data:post.body/>
7. kemudian anda Copy-paste script dibawah ini dibawah kode <data:post.body/> (mungkin akan ada lebih dari 1 kode <data:post.body/>, silahkan copy-paste script dibawah ini tepat dibawah kode <data:post.body/> jika tidak berhasil anda bisa coba  satu per satu) sampai berhasil.
Code:
<!-- Related Post Widget Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div id='related-post' class='related-post'/>   <script type='text/javascript'>   var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;, numPosts: 5, titleLength: &quot;auto&quot;, containerId: &quot;related-post&quot;, newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script>   <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/> </b:if> <!-- Related Post Widget End -->
8. Simpan Template.
  • Style Related Post Thumbnail
[​IMG]
Blog blog yang didalamnya banyak berisi gambar cocok bagi kamu yang mempunyai blog download anime, streaming, Dengan tampilan 6 Tumbnail dengan ukuran yang cukup menarik perhatian para pembaca, Berikut cara pengmasangannya:

Langkah-langkah @

1. Masuk ke Dashboard Blog Anda
2. kemudian pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Dana Copy-paste script dibawah ini tepat diatas kode </head>
<style>
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px!important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
</style>
5. Keterangan: Kode berwarna hijau menunjukan lebar dan tinggi tumbnail per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
6. Sekali lagi, letakan script dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

7. Keterangan:  Jika ada script sejenis/mirip, anda dapat melewati langkah ke-5 ini.
Ketetrangan: Jika ada script sejenis/mirip, anda dapat melewati langkah ke-5 ini.
8. Sekali lagi, letakan script dibawah ini tepat diatas kode </head>
<style>
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px!important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
</style>
Keterangan: Kode berwarna merah menunjukan lebar dan tinggi tumbnail per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
9. Anda tekan CTRL+F dan cari kode <data:post.body/>
10. Copy-paste kode dibawah ini tepat dibawah kode <data:post.body/>
<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=999&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>

11. Simpan save/ simpan templatenya.

Baik lah sampai disini dulu penjelasannya, jika terdapat kesalahan jangan lupa beri masukan dan komentar,  saya hanya seorang blogger biasa..saya akhiri terimakasih banyak sudah berkunjung di blog jelek ini..­čśŐ

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

ditunggu kunjungan balik nya ya gan
https://laborblogku.blogspot.com

Balas

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect