Cara membuat Related Post Super Keren

Cara membuat Related Post Super Keren - Hallo Sob Jody Blog, artikel kali ini berjudul Cara membuat Related Post Super Keren, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara membuat Related Post Super Keren
link : Cara membuat Related Post Super Keren

lihat juga


Cara membuat Related Post Super Keren

Related Post
Related Post Super Keren memang seharusnya saya berikan pada judul postingan ini karena widget hasil kreasi Mas Taufik Nurrohman yang akan saya share pada postingan kali ini memang patut di pasang pada blog sobat,sebagai contoh demonya sudah saya praktekkan pada blog saya ini silahkan Review ,mengapa saya harus rekomendasikan Related Post ini,salah satunya adalah di buatnya menjadi lebih ringan saat loding dan tampilan tooltip yang lebih keren di banding dengan Related Post yang pernah saya Share sebelumnya silahkan Review Lagi Cara Membuat Related Post.

Hanya saran saja sebelum sobat membuat Related Post Super Keren yang akan saya posting ini lebih baik Dowload lengkap dulu template untuk menjaga jika terjadi kesalahan saat pemasangan kode .
Berikut Cara membuat Related Post Super Keren yang harus sobat ikuti secara lengkap:
  1. Gunakan Ctrl + F cari kode ]]></b:skin> pasang Css Kode berikut tepat di atas nya :
    .related-post{  margin:2em auto 0;   font:normal normal 12px/1.4 Arial,Sans-Serif}
    .related-post h4{ font-size:150%;  margin:0 0 .5em;color:yellow}
    .related-post a{color:orange}
    .related-post a:hover{color:olive}
    .related-post-style-6 li{position:relative}
    .related-post-style-6 .related-post-item-thumbnail{ width:50px;  height:50px;  max-width:none;  max-height:none;  background-color:#000;  border:1px solid olive;  padding:0;  float:left;  margin:0 10px 0 0}
    .related-post-style-6 .related-post-item-title{ display:block;  font-weight:bold}
    .related-post-style-6 .related-post-item-summary{ display:block;  overflow:hidden;  font-size:11px}
    .related-post-style-6 .related-post-item-tooltip{ position:absolute;  bottom:100%;  left:-10px;  z-index:999;  margin-bottom:10px;  border:1px solid olive;  background-color:#000;  padding:10px;  width:90%;  height:auto;  box-shadow:0 1px 3px rgba(0,0,0,.2);  display:none}
    .related-post-style-6 .related-post-item-tooltip:before,
    .related-post-style-6 .related-post-item-tooltip:after{ content:"";  display:block;  width:0;  height:0;  border:10px solid transparent;  border-top-color:olive;  position:absolute;  top:100%;  left:21px}
    .related-post-style-6 .related-post-item-tooltip:after{ border-top-color:#000;  border-width:9px;  margin-left:1px}
    .related-post-style-6 li:hover .related-post-item-tooltip{display:block}
  2. Untuk pemasangan kode XML nya silahkan pasang kode berikut tepat di atas kode
    <div class='post-footer'>
    berikut kode nya :
    </b:if>
        <!-- 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;Baca Juga Yang Ini&lt;/h4&gt;&quot;,
          numPosts: 5,
          summaryLength: 300,
          titleLength: &quot;auto&quot;,
          thumbnailSize: 50,
          noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
          containerId: &quot;related-post&quot;,
          newTabLink: false,
          moreText: &quot;Read More&quot;,
          widgetStyle: 6,
          callBack: function() {}
      };
      </script>
      <script type='text/javascript' src='http://fullblogdesign-demo.googlecode.com/svn/trunk/related-post.min.js'/>
    </b:if>
    <!-- Related Post Widget End -->
  3. Lakukan Preview dulu jika tidak ada kode yang Error silahkan Save Template
Semoga Cara membuat Related Post Super Keren yang saya share pada pertemuan kali ini bisa bermanfaat jika ada kesulitan dalam pemasangan kode silahkan bertanya pada form komentar


Sumber KOde :http://www.dte.web.id/


Demikianlah Artikel Cara membuat Related Post Super Keren

Sekian Cara membuat Related Post Super Keren, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara membuat Related Post Super Keren dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/07/cara-membuat-related-post-super-keren.html Semoga artikel ini bisa bermanfaat.