[Hỏi đáp] Thêm 4 button: tường nhà, bạn bè, bài viết, chặn vào mục thông tin người viết

  • Kou94
    Hiện tại mình muốn thêm 4 button: tường nhà, bạn bè, bài viết, chặn vào mục thông tin người viết như của phutu.vn

    DEMO:

    Rất mong bạn nào biết phần này có thể hỗ trợ giúp mình Very Happy tk vì đã ghé thăm topic

  • Giựt
    Demo :



    Code:
    http://blogitforum.forumvi.com/t1-topic?tt=1

    Cách làm :

    Vào viewtopic tìm đoạn sau :

    Code:
    {postrow.displayed.POSTER_AVATAR}

    Thay đoạn trên thành :

    Code:
    <span class="ava_pt"><span><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center">{postrow.displayed.POSTER_AVATAR}</td></tr></tbody></table></span></span>
    <div class="profile">
      <div class="poster-info" style="display:none">
        <div>
          <span class="poster-name">                            
                                    {postrow.displayed.POSTER_NAME}                          
                        </span>
          <span class="poster-connect">                            
                                    {postrow.displayed.ONLINE_IMG}
                        </span>
          <span class="poster-rank">
                                    {postrow.displayed.RANK_IMAGE}        
                        </span>
        </div>
      </div>
      <div style="height:40px;width:100%;overflow:hidden" class="poster-field">
        <!-- BEGIN profile_field -->
        <p>{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</p>
        <!-- END profile_field -->
      </div><span class="profile11"> <div class="zzPoster-name" style="display:none">
                              </div> <span class="poster-link"><a target="_blank" href="/profile.forum?mode=viewprofile&u=[POSTER_NAME]&page_profil=messages">Tường</a>                          
          <a target="_blank" href="/spa/[POSTER_NAME]">Bài viết</a>                          
          <a target="_blank" href="/profile?friend=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Kết bạn</a>              
          <a target="_blank" href="/profile?foe=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Chặn</a>                        
          </span> </span><span style="background-image: url(http://i.imgur.com/U09NXkO.png);background-repeat:no-repeat;width:21px;height:11px;display:inline-block;float:left;margin-bottom:-7px;margin-top:7px"></span></div>

    Thêm vào cuối view_topic code :

    Code:
    <script type="text/javascript">
            $(".poster-info .label:contains('Status')").parent().addClass("status");
            $(".poster-link a").attr("href", function () {
              return this.href.replace("[POSTER_NAME]", encodeURI($(this).closest(".poster-info").find(".poster-name strong").text()));
            });
            </script>

    Vào css thêm :

    Code:
    /*Drop-rip by Giựt*/
    .profile {
        width: 290px;
        height: 97px;
        position: absolute;
        margin-left: -1px;
        background: url(http://i.imgur.com/IdTTHEE.png);
        border: 1px solid rgb(189, 190, 189);
        margin-top: -200px;
        z-index: 1;
        text-align: left;
        padding: 5px 10px 0px 20px;
        box-shadow: 0 0 2px rgb(231, 231, 231);
        display: none;
    }
    .profile span {
      font-weight: bold
    }

    .profile div {
      width: 135px;
      display: inline-block;
      color: #31414a;
      font: 11px Tahoma;
      margin: 2px 0px
    }

    .pun .profile .label {
      display: inline-block;
      width: 75px;
    }

    .profile div:nth-of-type(5) {
      display: none
    }

    .profile11 {
      width: 300px;
      display: inline-block;
      float: right;
      margin-top: 15px;
      padding-top: 5px;
      border-top: 1px dashed #d4d4d4
    }

    .poster-link a {
      float: left;
      display: inline-block;
      margin-right: 2px;
      font: bold 12px Arial;
      padding: 5px 5px 5px 25px;
      background-repeat: no-repeat;
      background-position: 5px center
    }
    .poster-field p{line-height:20px;color:#999;width:160px;display:inline-block}
    .poster-link a:hover {
      background-color: rgb(239, 239, 247)
    }

    .poster-link a:nth-of-type(1) {
      background-image: url(http://i48.servimg.com/u/f48/16/58/89/73/profil10.png)
    }

    .poster-link a:nth-of-type(2) {
      background-image: url(http://i48.servimg.com/u/f48/16/58/89/73/total_10.gif)
    }

    .poster-link a:nth-of-type(3) {
      background-image: url(http://i48.servimg.com/u/f48/16/58/89/73/friend10.png)
    }

    .poster-link a:nth-of-type(4) {
      background-image: url(http://i57.servimg.com/u/f57/17/05/17/70/button10.png)
    }

    .profile:hover,
    .ava_pt:hover+.profile {
      display: inline-block!Important
    }

    Hiện tại mình chỉ rip cho phiên bản punbb Smile còn các phiên bản kia mình chưa test :)

  • Kou94
    Nếu mình chỉ cần 4 nút đó thôi thì lấy đoạn
    Code:
    <span class="poster-link"><a target="_blank" href="/profile.forum?mode=viewprofile&u=[POSTER_NAME]&page_profil=messages">Tường</a>                         
          <a target="_blank" href="/spa/[POSTER_NAME]">Bài viết</a>                         
          <a target="_blank" href="/profile?friend=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Kết bạn</a>             
          <a target="_blank" href="/profile?foe=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Chặn</a>                       
          </span> </span><span style="background-image: url(http://i.imgur.com/U09NXkO.png);background-repeat:no-repeat;width:21px;height:11px;display:inline-block;float:left;margin-bottom:-7px;margin-top:7px"></span>

    Với cái js chèn cuối viewtopic đúng ko nhỉ?

  • Giựt
    @Kou94 đã viết:Nếu mình chỉ cần 4 nút đó thôi thì lấy đoạn
    Code:
    <span class="poster-link"><a target="_blank" href="/profile.forum?mode=viewprofile&u=[POSTER_NAME]&page_profil=messages">Tường</a>                          
          <a target="_blank" href="/spa/[POSTER_NAME]">Bài viết</a>                          
          <a target="_blank" href="/profile?friend=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Kết bạn</a>              
          <a target="_blank" href="/profile?foe=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Chặn</a>                        
          </span> </span><span style="background-image: url(http://i.imgur.com/U09NXkO.png);background-repeat:no-repeat;width:21px;height:11px;display:inline-block;float:left;margin-bottom:-7px;margin-top:7px"></span>

    Với cái js chèn cuối viewtopic đúng ko nhỉ?

    Bạn lấy đoạn :
    Code:
    <span class="poster-link"><a target="_blank" href="/profile.forum?mode=viewprofile&u=[POSTER_NAME]&page_profil=messages">Tường</a>                          
          <a target="_blank" href="/spa/[POSTER_NAME]">Bài viết</a>                          
          <a target="_blank" href="/profile?friend=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Kết bạn</a>              
          <a target="_blank" href="/profile?foe=[POSTER_NAME]&mode=editprofile&page_profil=friendsfoes">Chặn</a>                        
          </span> </span>

    Và thêm đoạn js chèn cuối viewtopic :)

  • Kou94
  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
114
Points :
169
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
114
Points :
169
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
114
Points :
169
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết