Relatad post for Blogspot

Discussion in 'Blogger' started by Rivaiblog, Feb 8, 2014.

  1. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    Relatad post for Blogspot- tutorial Relatad post for Blogspot atau cara membuat Relatad post di blogspot dengan SEO Friendly. Tampilan related post seo friendly juga menarik, disamping code yang ringan ada satu rahasia yang terkandung didalam related post seo friendly yaitu memiliki sistem Breadcrumb dari www.data-vocabulary.org yang telah saya padukan sehingga related post seo friendly ini memiliki struktur yang SEO Friendly dan lihat hasilnya di google structured data testing tool ( Richsnippets ). Nah bila anda sudah memahaminya dan ingin melihat hasil tampilannya silahkan klik link demo dibawah kemudian lihat bagian bawah postingan yang bertuliskan ( Related Post )dan bila anda tertarik memasangnya silahkan simak tutorial dibawah ini..

    Klik DEMO

    Install code CSS related post seo friendly

    1. Login ke dashboard anda
    2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
    3. Cari code
      Code:
      ]]></b:skin>
      
      [/b]
    4. Copy Code CSS dibawah ini, pastekan diatas code
      Code:
      ]]></b:skin>
      
      &nbsp;tadi atau bila template blog anda memakai
      Code:
      </style>
      
      silahkan pastekan kode CSSnya tepat diatas
      Code:
      </style>
      
      template anda. Edit code tersebut dan save template anda.

    Code:
    /*****************************************
    Name : related post seo friendly
    By : Rivai Silaban | Ide Blogspot | Blog Design
    Update : Sabtu 08 February 2014
    *****************************************/
    .breadcrumbs-label {padding :0;margin : 0;font-size : 11px;font-weight : normal;}
    .breadcrumbs-label a{font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #A81365;text-decoration: none;}
    .breadcrumbs-label a:hover{color: #0000FF;}
    .breadcrumbs-label .titles {color: #0000ff;}
    #ibrelated-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #ibrelated-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
    #ibrelated-posts .widget h2, #ibrelated-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
    #ibrelated-posts a { text-decoration : none; }
    #ibrelated-posts a:hover { text-decoration : none; }
    #ibrelated-posts ul { border : medium none; margin : 10px; padding : 0; }
    #ibrelated-posts ul li { display : block; background : url("http://3.bp.blogspot.com/-o_Brno4grYw/UvYD2IP-4oI/AAAAAAAACO0/wM9saeeAB0Q/s1600/ideblogspotrss.gif") no-repeat 0 6px; 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; }
    /* related post seo friendly */
    

    Untuk memasang code HTMLnya silahkan cari code
    Code:
    <data:post.body/>
    
    setelah ketemu copy code dibawah ini dan pastekan tepat dibawah code
    Code:
    <data:post.body/>
    
    , bila anda ingin mengganti related post blog anda yang lama silahkan ganti dengan code dibawah ini..
    Code:
    
    <b:if cond='data:blog.pageType == "item"'><div id='related-posts'><script src='http://yourjavascript.com/2942361424/relatedpost.js' type='text/javascript'/> <div><b>Related Posts : </b></div><div><div class='breadcrumbs-label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='title'> Home </span> </a> </span> » <b:loop values='data:post.labels' var='label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:label.url + "?&amp;max-results=10"' expr:title='data:label.name' itemprop='url'> <span itemprop='title'> <data:label.name/> </span> </a> </span> <b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span class='titles'> <data:post.title/> </span> </div><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3"' type='text/javascript'/></b:if></b:loop> </div><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if> <div style='clear: both;'/>
    
    

    Silahkan anda tanyakan bila ada yang perlu ditanyakan, semoga bermanfaat, salam blogger..
    Sumber : http://www.ideblogspot.com/2014/02/related-post-seo-friendly.html
     
  2. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    Lumayan nih mas related

    Lumayan nih mas related postnya, simple dan ringan *bagus*
     
  3. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    650
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    lumayan keren, coba dsini

    lumayan keren, coba dsini http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html

    lebih lengkap *bagus*
     
  4. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    thx gan...

    thx atas pendapatnya gan memang lebih ringan gan,
     
  5. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    cayun wrote:

    iya memang agan DTE sudah pernah membuat suatu software scriptnya editornya, tapi pernah saya coba hasil render Scriptnya masih sedikit berat gan, dan untuk menghasilkan tampilan related post yang lebih beda harus berpikir lagi gan, makanya sebenarnya software aplikasi seperti itu pemakainya terbatas, tidak semua gan harus kudu mahir pengkodean lagi untuk memodifikasinya, kalo newbie seperti saya wah harus satu bulanan untuk membuat suatu tampilan yang menarik itupun kalo ada waktu heheh , untuk software creator script online gratis memang suah banyak gan tapi, hasil akhirnya yang puyeng mikirinnya gimana tampilannya ...

    thx atas sharenya... dan mengingatkan gan....
    makasih banyak..
     
  6. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,245
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Apakah ada cara lain selain

    Apakah ada cara lain selain javascript?
    Saya pingin nya sih tanpa javascript.
     
  7. KBlogger

    KBlogger New Member

    Joined:
    Mar 7, 2014
    Messages:
    68
    Likes Received:
    0
    Trophy Points:
    6
    Bookmark dulu,

    udah punya related pos mas, hehehe *cinta*
     
  8. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    oh...

    okelah terimakasih atas kunjungannya...
     
Loading...

Share This Page