Phần 3 - Hướng dẫn rip skin và cách bố trí xenportal

Tiếp tục phần 3 nhé các bạn, phần này mình sẽ hướng dẫn:
- Cách rip tin cho 1 block đơn giản nhất;
- Cách tạo các tin sử dụng xen:if trong temp recentnews

1>. Cách rip tin cho 1 block đơn giản nhất:

Phần này mình sẽ hướng dẫn các bạn cách rip 1 block cho xenportal 1 cách đơn giản nhất! Trước tiên cần xác định site để rip, ở đây mình chọn site http://2sao.vn để làm ví dụ nhé:



Phần đánh dấu là phần mình sẽ rip nhé! Mình thường dùng chrome để làm các dùng các trình duyệt khác thì tìm hiểu cách mở soure web nhé!

- Trước tiên cần xác định block trên có đoạn html là gì bằng cách click phải vào ngay block đó và kiểm tra phần tử, kiếm đoạn code chứa toàn bộ block đó để chép về bằn cách click phải vào code đó và chọn Copy As Html (lưu ý phải chép toàn bộ và đủ code đó về nếu không sẽ ảnh hưởng đến vỡ khung, ...)



Các bạn làm giống trong hình nhé! Sau đó muôn đoạn này hiển thị ở recentnews nào thì chép về về temp của recent ấy, ví dụ mình chọn là recentnews. Vào ACP >> style >>> chọn style đang dùng >>> EWRblock_RecentNews >>>> copy đoạn code mới chép được về sẽ được kết quả như sau:



Nhìn hình trên ta thấy tin đã hiện lên song chưa đẹp và chưa tự cập nhật được do chưa có css và code của xenforo (Các bạn mới bắt đầu tập Rip thì hãy chép đoạn html lên trên đoạn code có sẵn của temp này để cả 2 cùng hiện, sau đó thay thế code sẽ đơn giản cho các bạn hơn)

Tiếp tục chúng ta sẽ rip css về code, các CSS sẽ được lưu cùng temp css của EWRblock_RecentNews, đó là EWRblock_RecentNews.css.



Các bạn nhìn hình thấy phần tôi đánh dấu cho các bạn, phần id trong Css sẽ được gọi là "#" phần class sẽ được gọi là "." . nhìn khung bên phải ta thấy các CSS bên trong được chứa bởi khối là class hay id, ví dụ:

Ở ví dụ này ta thấy class category300 sẽ có các định dạng CSS là: (mình diễn giải theo thứ tự nhé)
- rộng 326px;
- vị trí bên trái của temp;
- Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi;
- nền màu trắng;
- Khoảng cách của khối với bên ngoài theo thứ tự là top right bottom left;
- khối có khoảng cách với khối khác bên dưới là 0px;

Ok, ở đây các bạn chỉ xem cho hiểu thôi, chứ tạm thời chưa đụng chạm vào nó nhé! Chúng ta chỉ lấy css và copy paste vào temp thôi, chúng ta bắt đầu copy + paste lần lượt các thẻ bao quanh của block này cho đến khi hết thì thôi (chỉ copy css của các thẻ trong block này). 1 vấn đề nữa là đối với các file hình của site rip chỉ nằm trên site của họ, các bạn chịu khó copy và paste url của họ vào theo đúng css nhé!

Kết quả sau khi hoàn tất CSS nhé!



Ok để chèn code xenforo của vào html này để hiện tin của mình và tự cập nhật, các bạn chịu khó xem lại phần 1 cách hướng dẫn ý nghĩa của temp recentnews nhé!

Các bạn lưu ý nơi nào sẽ thay hình, title, imd, text và link thì thay thế cho chính xác và bao ngoài phải có <xen:foreach loop="$RecentNews" value="$news"> và kết thúc là </xen:foreach>.

Ở đây chúng ta chỉ chèn code vào tin đầu tiên để nó hiển thị chứ kg đặt toàn bộ các tin. Mình ví dụ là chỉ chèn ở thẻ có class là noibat300, code như sau:

Mã:

<div id="Content_Box300_11_category300" class="category300">
<div class="header300">
<a id="cat1000" href="/p0c1000/Sao.vnn"><img src="http://2sao.vn/Images/blank.gif"></a>
</div>
<xen:foreach loop="$RecentNews" value="$news">
<div class="noibat300"><h3><a href="/p0c1000n20130506090722716/can-lo-lo-mac-vay-khoet-sau-tan-ron.vnn" class="title_home" title="Can Lộ Lộ mặc váy khoét sâu tận rốn">Can Lộ Lộ mặc váy khoét sâu tận rốn</a></h3><a title="Can Lộ Lộ mặc váy khoét sâu tận rốn" href="/p0c1000n20130506090722716/can-lo-lo-mac-vay-khoet-sau-tan-ron.vnn"><img src="http://2sao.vietnamnetjsc.vn/ThumbImages/2013/05/06/09/06/060513loava_120.jpg" onerror="LoadImage(this,'http://imgthumb.2sao.vietnamnet.vn/GetThumbNail.ashx?ImgFilePath=http%3a%2f%2f2sao.vietnamnetjsc.vn%2f2013%2f05%2f06%2f09%2f06%2f060513loava.jpg&amp;width=120')" title="Can Lộ Lộ mặc váy khoét sâu tận rốn" alt="Can Lộ Lộ mặc váy khoét sâu tận rốn" border="0"></a><p>(2Sao) - Can Lộ Lộ luôn luôn xứng danh 'mỹ nhân thích khoe da thịt'.</p></div>
</xen:foreach>

Code cuối cùng của tôi, các bạn có thể so sánh nhé:

Mã:

<div id="Content_Box300_11_category300" class="category300">
<div class="header300">
<a id="cat1000" href="/p0c1000/Sao.vnn"><img src="http://2sao.vn/Images/blank.gif"></a>
</div>
<xen:foreach loop="$RecentNews" value="$news">
<div class="noibat300"><h3><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></h3>
<xen:if hascontent="true">
           
                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" width="120" height="90"/></a>
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="120" height="90" /></a>
                                </div>
                            <xen:elseif is="{$news.image}" />
                                <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" width="120" height="90" /></a>
                            <xen:else />
                                <xen:avatar user="$news" size="m" itemprop="photo" />
                            </xen:if>
                            </xen:contentcheck>
                       
                </xen:if>
<p>{xen:raw $news.messageHtml}</p></div>
</xen:foreach>
<div class="xemtiep300" style="margin-bottom:10px; padding-top:0px;"><a id="Content_XT1_lnkXemtiep" href="#"><span>» Xem tiếp</span></a></div>

Hình kết quả:



Done! phần này mình chỉ hướng dẫn các bạn cách lấy về, còn khi đem về gắn vào skin còn phải tùy skin của mỗi người để chỉnh width, padding. margin cho phù hợp nhé! Các tin này sẽ thể hiện như thế cho đến hết tùy theo option các tin trong block mà các bạn đã chọn.

2>. Cách tạo các tin sử dụng xen:if trong temp recentnews:

Phần này mình sẽ hướng dẫn các bạn cách làm các tin hoàn toàn giống như 2sao.vn trong 1 block như thế!



Nhìn hình nhé! Bây giờ mình sẽ hướng dẫn các bạn cách làm 2 tin đầu thì giống ở trên, các tin còn lại sẽ hiển thị theo dạng text như trong hình.

Đoạn code chúng ta dùng thể hiện như vậy:

Mã:

<xen:foreach loop="$RecentNews" value="$news" i="$i">
<xen:if is="{$i} < 3"> 

Đoạn này có nghĩa là 2 tin đầu sẽ hiển thị theo dạng ..., các tin còn lại sẽ hiển thị theo ... Các bạn có thể thay thế số 3 bằng số bất kỳ nếu muốn hiển thị thêm hoặc ít hơn
Chúng ta sẽ thay thế đoạn code này cho

Mã:

<xen:foreach loop="$RecentNews" value="$news">

và nhớ thêm </xen:if> vào trước </xen:foreach>

Sau đó chúng ta xem code html của đoạn bài viết đó, có thể xem phần tử như cách trên và dán đoạn code ấy vào, có dạng như sau:

Mã:

<ul class="tieptheo300">
<li><a href="/p0c1000n20130506090722716/can-lo-lo-mac-vay-khoet-sau-tan-ron.vnn" title="Can Lộ Lộ mặc váy khoét sâu tận rốn">Can Lộ Lộ mặc váy khoét sâu tận rốn</a></li>
[COLOR=#ff0000]<li><a href="/p0c1000n20130506092329325/pham-bang-bang-deo-mat-na-ra-duong-huynh-dich-beo-mum-mim.vnn" title="Phạm Băng Băng đeo mặt nạ ra đường, Huỳnh Dịch béo mũm mĩm">Phạm Băng Băng đeo mặt nạ ra đường, Huỳnh Dịch béo mũm mĩm</a></li>[/COLOR]
[COLOR=#ff0000]<li><a href="/p0c1000n20130503131744911/trai-xinh-gai-dep-han-nao-sinh-vao-thang-5.vnn" title="Trai xinh, gái đẹp Hàn nào sinh vào tháng 5?">Trai xinh, gái đẹp Hàn nào sinh vào tháng 5?</a></li>[/COLOR]
  </ul>

Ở đây chúng ta sẽ xoát bớt phần màu đỏ, chỉ để lại 1 tin duy nhất và thay code vào theo đúng cách ở phần 1, có dạng như sau:

Mã:

<ul class="tieptheo300">
<li><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></li>
  </ul>

Và đặt code <xen:else /> trước đoạn này nhé! Done, xem thành quả:



Tổng hợp code lại cho các bạn tham khảo và so sánh nhé!

Mã:

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />
 
<div id="Content_Box300_11_category300" class="category300">
<div class="header300">
<a id="cat1000" href="/p0c1000/Sao.vnn"><img src="http://2sao.vn/Images/blank.gif"></a>
</div>
<xen:foreach loop="$RecentNews" value="$news" i="$i">
<xen:if is="{$i} < 3">
<div class="noibat300"><h3><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></h3>
<xen:if hascontent="true">
 
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" width="120" height="90"/></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="120" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" width="120" height="90" /></a>
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck>
 
</xen:if>
<p>{xen:raw $news.messageHtml}</p>
<xen:else />
<ul class="tieptheo300">
<li><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></li>
  </ul>
 
</div>
</xen:if>
</xen:foreach>
<div class="xemtiep300" style="margin-bottom:10px; padding-top:0px;"><a id="Content_XT1_lnkXemtiep" href="#"><span>» Xem tiếp</span></a></div>

Đối với các block cần thể hiện tương tự ta chỉ cần chép code của block này và dán vào block khác, thêm số sau RecentNews của code dưới cho đúng với temp của bạn, ví dụ recentnews1 thì thêm 1, recentnews10 thì thêm số 10

Mã:

<xen:foreach loop="$[COLOR=#ff0000]RecentNews[/COLOR]" value="$news" i="$i"> 

Ok bài hướng dẫn đến đây là hết! Chúc các bạn thành công! Đây là cách rip đơn giản nhất cho các bạn chưa biết làm, sau này khi thuần thục các bạn có thể thay thế trực tiếp vào code mặc định và chỉnh css trên các class mặc định luôn nhé!

 

Thank for share..mấy nay tìm hiểu trên diễn đàn được biết bác rất Pro về khoản này.Bây h đọc bài share này thật bổ ích lưu bookmark lại để ngâm cứu

 

Like mạnh ^^

 

rất chi tiết và xúc tích thanks bác nhé
vọc thôi

 

Bác ơi

PHP:

<div class="xemtiep300" style="margin-bottom:10px; padding-top:0px;"><a id="Content_XT1_lnkXemtiep" href="{xen:link forums, $news}"><span>» Xem tiếp</span></a></div>

Phải nằm trong vòng lặp thì {xen:link forums, $news} mới có tác dụng .

 

Thx Lil. Quên mất cái này! chổ đó ý mình là tự để link tới node đó thôi, chứ kg muốn lặp lại trong từng tin. Đã chỉnh sửa!

 

Bài viết rất hay! Trong bài hướng dẫn có nêu hình ảnh như "Các bạn làm giống trong hình nhé! " mà sao trong thấy đính kèm trên bài viết!

 

cái này khi chuyền domain, BQT làm nhẹ data xóa bớt att rồi! Thông cảm!

 

Giơ tay ủng hộ nttruong

 

Cho mình hỏi, mình thấy trong phần layout, có cái nút Install layout. Click vào thì có đường dẫn để install, mình muốn viết cách viết layout thay đổi cho cái đó luôn nhưng không biết làm sao, bạn có thể làm một bài về cái đó được không?

 

đào mộ tí... anh em cho hỏi cái ý này là sao mình ko hiểu lần đầu tập rip

chúng ta bắt đầu copy + paste lần lượt các thẻ bao quanh của block này cho đến khi hết thì thôi (chỉ copy css của các thẻ trong block này). 1 vấn đề nữa là đối với các file hình của site rip chỉ nằm trên site của họ, các bạn chịu khó copy và paste url của họ vào theo đúng css nhé!

 

Rất bổ ích cảm ơn nhé

 

hic sau 1 hồi chỉnh sửa giờ nhìn các xenporta thấy sao ấy, lệc lạc tùm lum , muốn làm hình bên trái và hiển thị 1 phần text mà mò hoài chẳng biết .
Bác nào giúp em với Link em http://vanchuyenvn.com/portal/