New Stylish Artikel yang berkaitan

Related post widget adalah widget yang membantu pembaca anda tahu tentang blog anda .Nik telah menyertai bookmark widget sosial dengan related post widget berkaitan. Ini akan membantu anda untuk meningkatkan sosial popularity.

Bagaimana Untuk Tambah Related Post Widget

1. Untuk melakukan ini, pergi ke "Design-> Edit HTML"

2. Pertama, kita akan menambah bahagian CSS untuk widget ini. Cari baris berikut dalam template anda.


]]></b:skin>

3. Salin kod berikut dan paste di atas kode yang anda cari tadi.

<!--start related posts css Info-->
#btnt-rp { -moz-background-inline-policy:continuous; background: none repeat scroll 0 0 #F2F2F2; border: 1px solid #CCCCCC; float:left; font-family:arial; font-size:12.2px; margin:0 0 40px ; padding:14px 0 12px 25px; width:550px; height: 220px; display: inline; }
#btnt-rp h3 { color:#000000; font-size:13px; margin-bottom:3px; margin-top:4px; font-weight:bold; }
.hidden { display:none;}
.social-bookmarks { float:left; display: inline; margin:0 20px 0 0; padding-left:0; padding-top:0; text-align:left; width:40%; border-right: 1px solid #CCCCCC; }
  ul.blogtipsntricks-social { list-style:none; margin:0;display:inline-block; }
   ul.blogtipsntricks-social li { display:inline; float:left; padding:5px; background-repeat:no-repeat; }
   ul.blogtipsntricks-social li a { display:block; width:48px; height:48px; position:relative; text-decoration:none; }
   ul.blogtipsntricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
   ul.blogtipsntricks-social li.blogtipsntricks-facebook { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-facebook.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-twitter { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-twitter.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-googlebuzz { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-stumbleupon { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-stumbleupon.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-digg { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-digg.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-delicious { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-delicious.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-linkedin { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-linkedin.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-reddit { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-reddit.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-technorati { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-technorati.png"); }
   #blogtipsntricks-cssanime:hover li { opacity:0.2; }
   #blogtipsntricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
   #blogtipsntricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
   #blogtipsntricks-cssanime li:hover { opacity:1; }
   #blogtipsntricks-cssanime li:hover a strong { opacity:1; top:-10px; }
.related-posts { float:left; margin:0; padding-left:0px; padding-top:0; text-align:left; width:48%; }
  ul#related-posts{ font-family:Helvetica,Arial,sans-serif !important; font-size:10px !important; list-style: none !important; padding: 0 !important; text-transform: none !important; }
  ul#related-posts li{ float: left !important; height: auto !important; margin:5px 5px !important; padding: 2px 1px 4px !important; }
*html ul#related-posts li{ margin:0 13px !important; }
  ul#related-posts li a { -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; border: 2px solid #FFFFFF !important; display: block !important; height: 72px !important; position: relative !important; width: 72px !important; }
  ul#related-posts li a { color: #474C51 !important; text-decoration: none !important; text-shadow: 0 1px 0 #FFFFFF !important; }
  ul#related-posts li .overlay { height: 66px !important; line-height: 14px !important; padding:6px 0 0 6px !important; position: absolute !important; width: 66px !important; z-index: 10 !important; }
  ul#related-posts li a:hover .overlay { background: #fff !important; display: block !important; opacity:0.9 !important; }
  ul#related-posts li img { bottom: 0 !important; padding:0px !important; }
  ul#related-posts li a:hover { -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; }
<!--end related posts css.Info-->

4. Sekarang, mencari menggunakan "CTRL + F" bagi kode berikut:

<div class='post-footer-line post-footer-line-3'/>

5. Salin kod berikut dan paste di atas kodee yang anda cari tadi.

<!--start related posts code Info -->
<b:if cond='data:blog.pageType == "item"'>
<div id='btnt-rp'>
 <div class='social-bookmarks'>
  <h3>What's Next?</h3>
   <ul class='blogtipsntricks-social' id='blogtipsntricks-cssanime'>
  <li class='blogtipsntricks-facebook'>
    <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
 </li>
  <li class='blogtipsntricks-twitter'>
    <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
 </li>
  <li class='blogtipsntricks-googlebuzz'>
    <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
 </li>
  <li class='blogtipsntricks-stumbleupon'>
    <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
 </li>
  <li class='blogtipsntricks-digg'>
    <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
 </li>
  <li class='blogtipsntricks-delicious'>
    <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
 </li>
  <li class='blogtipsntricks-linkedin'>
    <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
 </li>
   <li class='blogtipsntricks-reddit'>
    <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
 </li>
   <li class='blogtipsntricks-technorati'>
    <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
 </li>
 </ul>
</div>
<div class='related-posts'>
  <h3>Other Recommended Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQd2zqBzT_MblEFoYO4qLYjZYVigJ_rX7jN8taElzwOgT7b5c9Dh5WShZyPZrvlEgsWrEDRhjcAuRsG8AGOLzvVK2K6yhJn46BQHKRgrZkWfozeCT7ZBNxiOp9c2vzkw4Qv9wW460axUO/";
var maxresults=6;
</script>
<script src='https://sites.google.com/site/jeritanblog/javascript/related_post_with_hover.txt.js' type='text/javascript'/>
        <b:loop values='data:post.labels' var='label'>
             <b:if cond='data:label.isLast != "true"'>
        </b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</div>
</b:if>
<!--end related posts code Info-->

6. Itu sahaja !!! Save template anda. Lihat widget di post anda.

Nota: Anda perlu melihat halaman post untuk melihat widget. Iaitu, klik pada mana-mana post dalam blog anda untuk melihat keputusan akhir. Anda tidak jumpa widget di halaman home page anda.