Hướng dẫn post bài tương tác

[Ultimate]

1. Tương tác / Roleplay
Giống như các game roleplay khác, bạn được phép nhập vai và điều khiển nhân vật của bạn để giao tiếp, nói chuyện, với những người chơi khác (player) hoặc nhân vật do GM điều khiển (Npc). Nhưng do hoạt động trên nền tảng diễn đàn nên có thể coi các bài tương tác được viết dưới dạng post và các player sẽ thay phiên nhau post bài lên 1 topic, được gọi là một địa điểm.

2. Chi tiết bên trong 1 topic
Ví dụ 1 topic có link như sau: https://fanacia.top/threads/lau-dai-rosenkreuz.402/
Các bạn kéo xuống dưới cùng sẽ thấy 1 khu vực để trả lời bài.

Trong đó:
1 là khu vực để bạn gõ nội dung bài viết của đoạn tương tác.
2 là để xem trước nội dung trước khi gửi bài (post bài)
3 là để post bài và đăng lên diễn đàn (forum)
4 là để chuyển dạng post bài sang BBcode

Ngoài ra còn nhiều tính năng khác các bạn có thể tự khám phá ở phía trên.

2. Nền tảng forum:
Điều đầu tiên: Đừng ngần ngại post bài bất kể dù có BBcode đẹp hay không. Tất cả các post tương tác đều quan trọng là nội dung. Việc sử dụng BBcode chỉ là trang trí cho bài viết, giúp nó đẹp và tường minh hơn.

Thường đầu post của 1 bài viết, bạn có thể chèn hình nhân vật của những nhân vật khác mà bạn muốn nói chuyện, như vậy là một cách giúp bạn nhập vai nhân vật được dễ dàng hơn.

• Có một số BBcode cơ bản mà các bạn có thể nắm được như sau:

[img][link hình ảnh][/img]

Giúp chèn hình vào post. Nên sử dụng link hình imgur.

[szimg=250|][link hình ảnh][/szimg]

Giúp chèn hình vào post và giảm tỉ lệ width (bề ngang) của hình còn 250px

[B][chữ muốn được bôi đậm][/B]

Giúp bôi đậm một đoạn chữ

[I][chữ muốn được bôi đậm][/I]

Giúp in nghiêng một đoạn chữ...

Chi tiết bạn có thể xem ở link bên dưới:

BB codes

The list of BB codes you can use to spice up the look of your messages. This page shows a list of all BB codes that are available.

xenforo.com

Dưới đây là một số mẫu tương tác và code của tương tác, các bạn có thể copy.

 

[Ultimate]

BBcode cho kiểu 1:

Flavia Dohaeris

Erika Aoi

INFORMATION

Trường học Imperia [2024.04.13]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna lacus, ultrices sit amet mattis et, mollis et eros. Nunc placerat tellus et dictum scelerisque. Pellentesque venenatis facilisis urna finibus dictum. Vivamus imperdiet mi neque, vitae tempus nunc iaculis ac. Quisque consectetur justo nisl, ut varius urna dignissim at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus facilisis feugiat dolor, ut aliquet lacus dictum id. Proin quis ultrices ligula. Suspendisse porttitor auctor justo, quis placerat diam pharetra a.

Aenean nec pharetra nulla. Nullam gravida dignissim odio. Cras nec lacinia ante, eu auctor dolor. Sed non molestie turpis. Sed tempus risus id ligula venenatis fringilla sit amet eu metus. Nullam euismod at turpis in ultrices. Aliquam ut odio sit amet leo ornare scelerisque et vitae orci. Aliquam erat volutpat. Nulla tincidunt facilisis lacus. Mauris ornare tincidunt orci ullamcorper pellentesque. Sed blandit auctor ex, eget ultrices nisi pulvinar vel. Nam arcu mauris, ornare faucibus vestibulum eget, ultrices quis orci.

Nulla rutrum ipsum at lectus aliquet mollis. Vivamus quis tellus nunc. Maecenas felis neque, scelerisque sit amet aliquet non, consequat malesuada sapien. Cras ante enim, rutrum id porta eget, aliquet vitae tellus. Maecenas nec vestibulum lorem, sed rutrum erat. Fusce luctus lacus in arcu vehicula, sed interdum lacus vehicula. Nulla et risus placerat, commodo purus a, dapibus ante. Proin sed blandit sapien, a suscipit nisi. Sed finibus, nulla sit amet accumsan tempor, justo mi imperdiet lectus, quis egestas odio augue a felis.

Hướng dẫn sử dụng:

• Phần bôi đỏ: Link hình nhân vật của bạn và người mà bạn đang nói chuyện. Bạn có thể up hình nhân vật lên một trang thứ 3 (ví dụ như imgur.com) rồi sau đó copy link của hình ảnh để paste vào. Bạn cũng có thể tìm thấy link ở database nhân vật.
• Phân bôi xanh da trời: Tên nhân vật của bạn và người mà bạn tương tác, chỉ cần sửa lại tên
• Phần xanh lá: Nếu bạn muốn thêm một nhân vật, copy nguyên dòng màu xanh lá rồi paste thêm 1 dòng nữa
• Phần xanh tím than: Ghi ngày, địa điểm v.v...
• Phần màu cam: Nội dung của bài viết mà bạn muốn roleplay

[div=wrapperBg||url('https://i.redd.it/uwzwkfuuuwd61.jpg')][div=flexContainer||][div=tipWrapper||]
[div=tipContainer||][div=charTip||][div=tipImg||url('https://i.imgur.com/Zf38KbW.png')][/div]Flavia Dohaeris[/div][/div]
[nobr][/nobr]
[div=tipContainer||][div=charTip||][div=tipImg||url('https://i.imgur.com/nUMFqoQ.png')][/div]Erika Aoi[/div][/div]
[/div]
[div=container||][div=infoWrapper||][div=infoTitle||]INFORMATION[/div][div=infoLine||][/div][div=infoText||]Trường học Imperia [2024.04.13][/div][/div]
[div=content||]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna lacus, ultrices sit amet mattis et, mollis et eros. Nunc placerat tellus et dictum scelerisque. Pellentesque venenatis facilisis urna finibus dictum. Vivamus imperdiet mi neque, vitae tempus nunc iaculis ac. Quisque consectetur justo nisl, ut varius urna dignissim at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus facilisis feugiat dolor, ut aliquet lacus dictum id. Proin quis ultrices ligula. Suspendisse porttitor auctor justo, quis placerat diam pharetra a.

Aenean nec pharetra nulla. Nullam gravida dignissim odio. Cras nec lacinia ante, eu auctor dolor. Sed non molestie turpis. Sed tempus risus id ligula venenatis fringilla sit amet eu metus. Nullam euismod at turpis in ultrices. Aliquam ut odio sit amet leo ornare scelerisque et vitae orci. Aliquam erat volutpat. Nulla tincidunt facilisis lacus. Mauris ornare tincidunt orci ullamcorper pellentesque. Sed blandit auctor ex, eget ultrices nisi pulvinar vel. Nam arcu mauris, ornare faucibus vestibulum eget, ultrices quis orci.

Nulla rutrum ipsum at lectus aliquet mollis. Vivamus quis tellus nunc. Maecenas felis neque, scelerisque sit amet aliquet non, consequat malesuada sapien. Cras ante enim, rutrum id porta eget, aliquet vitae tellus. Maecenas nec vestibulum lorem, sed rutrum erat. Fusce luctus lacus in arcu vehicula, sed interdum lacus vehicula. Nulla et risus placerat, commodo purus a, dapibus ante. Proin sed blandit sapien, a suscipit nisi. Sed finibus, nulla sit amet accumsan tempor, justo mi imperdiet lectus, quis egestas odio augue a felis.[/div][div=footer||][/div][/div][/div][/div]

[style]
.wrapperBg {
padding-top: 120px;
padding-bottom: 120px;
background-color: rgba(28, 31, 36,0.8) !important;
background-blend-mode: darken !important;
background-size: auto 100% !important;
background-position: center !important;
}
.flexContainer {
display: flex;
flex-direction: column;
}
.container {
width: 80%;
max-width: 1600px;
padding-top: 120px;
margin: auto;
border-radius: 3px;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
background: url(https://grainy-gradients.vercel.app/noise.svg);
background-color: #e8eaed;
box-shadow: inset 0px 0px 50px rgba(0,0,0,.2), inset 0px 0px 50px rgba(0,0,0,.2);
}
.tipWrapper {
display: flex;
flex-direction: row;
justify-content: start;
width: 80%;
margin: auto;
transform: translateX(5%);
margin-bottom: -80px;
}
.suspect {
position: absolute;
top: 0;
left: 0;
transform: translateX(-20%);
color: #042cdb;
font-family: Bebas Neue, sans-serif;
letter-spacing: 2px;
font-size: 24px;
z-index: 1;
}
.tipContainer {
background-color: #fcfcfc;
transform: rotate(3deg);
padding: 12px;
position: relative;
transition: 0.25s;
}
.tipContainer:nth-child(2n) {
transform: rotate(-3deg) translateY(-2%);
}
.tipContainer:hover {
box-shadow: 10px 10px 0px #042cdb;
transform: rotate(8deg) translateY(-5%);
}
.tipContainer:nth-child(2n):hover {
transform: rotate(-8deg) translateY(-2%);
}
.charTip {
display: flex;
flex-direction: column;
align-items: center;
}
.tipImg {
background-size: 120px 120px !important;
width:120px;
height: 120px;
filter: grayscale(100%);
margin-bottom: 4px;
transition: 0.25s;
}
.tipImg:hover {
filter: none;
}
.content {
width: 80%;
max-width: 1024px;
margin: auto;
}
.infoWrapper {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 40px;
}
.infoTitle {
font-family: Bebas Neue, sans-serif;
letter-spacing: 2px;
font-size: 16px;
text-align: left;
background-color: #0223b3;
color: #fcfcfc;
letter-spacing: 2px;
line-height: 100%;
padding: 4px;
display: inline-block;
}
.infoLine {
flex: 1;
height: 1px;
background-color: #0223b3;
}
.infoText {
margin: 0 24px 0 8px;
color: #0223b3;
font-family: Josefin Sans, sans-serif;
letter-spacing: 1px;
}
.footer {
margin: auto;
margin-top: 80px;
margin-bottom: 40px;
width: 100px;
height: 25px;
border-radius: 40px;
background-color: #4f4e52;
box-shadow: inset 0px 0px 15px rgba(0,0,0,.5), inset 0px 0px 15px rgba(0,0,0,.5);
}
@media screen and (max-width: 600px) {
.container{
width: 90%;
}
.converWrapper {
flex-direction: column;
justify-content: center;
}
.content {
width: 90%;
}
.tipContainerNoRotate {
padding: 8px;
position: relative;
transition: 0.25s;
display: inline-block;
margin-right: 20px;
align-self: flex-start;
margin: auto;
}
[/style]

[gfont]family=Bebas+Neue&display=swap[/gfont]
[gfont]family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap[/gfont]

 

[Ultimate]

BBcode kiểu 2:

Flavia Dohaeris

Erika Aoi

Lớp học trường Imperia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna lacus, ultrices sit amet mattis et, mollis et eros. Nunc placerat tellus et dictum scelerisque. Pellentesque venenatis facilisis urna finibus dictum. Vivamus imperdiet mi neque, vitae tempus nunc iaculis ac. Quisque consectetur justo nisl, ut varius urna dignissim at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus facilisis feugiat dolor, ut aliquet lacus dictum id. Proin quis ultrices ligula. Suspendisse porttitor auctor justo, quis placerat diam pharetra a.

Aenean nec pharetra nulla. Nullam gravida dignissim odio. Cras nec lacinia ante, eu auctor dolor. Sed non molestie turpis. Sed tempus risus id ligula venenatis fringilla sit amet eu metus. Nullam euismod at turpis in ultrices. Aliquam ut odio sit amet leo ornare scelerisque et vitae orci. Aliquam erat volutpat. Nulla tincidunt facilisis lacus. Mauris ornare tincidunt orci ullamcorper pellentesque. Sed blandit auctor ex, eget ultrices nisi pulvinar vel. Nam arcu mauris, ornare faucibus vestibulum eget, ultrices quis orci.

Nulla rutrum ipsum at lectus aliquet mollis. Vivamus quis tellus nunc. Maecenas felis neque, scelerisque sit amet aliquet non, consequat malesuada sapien. Cras ante enim, rutrum id porta eget, aliquet vitae tellus. Maecenas nec vestibulum lorem, sed rutrum erat. Fusce luctus lacus in arcu vehicula, sed interdum lacus vehicula. Nulla et risus placerat, commodo purus a, dapibus ante. Proin sed blandit sapien, a suscipit nisi. Sed finibus, nulla sit amet accumsan tempor, justo mi imperdiet lectus, quis egestas odio augue a felis.

Giải thích:

• Phần đỏ: Link hình nhân vật của bạn và người mà bạn đang nói chuyện. Bạn có thể up hình nhân vật lên một trang thứ 3 (ví dụ như imgur.com) rồi sau đó copy link của hình ảnh để paste vào. Bạn cũng có thể tìm thấy link ở database nhân vật.
• Phân xanh da trời: Thay vì phải resize hình bằng photoshop, bạn có thể sử dụng code szimg=120|120 thay vì img như hình để
• Phần xanh lá: Nếu bạn muốn thêm một nhân vật, copy nguyên dòng màu xanh lá rồi paste thêm 1 dòng nữa
• Phần màu cam: Nội dung của bài viết mà bạn muốn roleplay.

[div=npctt1||][div=bg1||][div=tips1||]
[box=;display: inline-block;width:122px;margin:5px;text-align:center||||][box=; border: 1px #3f3f3f solid;||||][szimg=120|120|]https://i.imgur.com/Zf38KbW.png[/szimg][/box]Flavia Dohaeris[/box]
[box=;display: inline-block;width:122px;margin:5px;text-align:center||||][box=; border: 1px #3f3f3f solid;||||][szimg=120|120]https://i.imgur.com/Z9AlGqm.jpeg[/szimg][/box]Eizu Fujiito[/box]

[/div]
[div=date||]Lớp học trường Imperia[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna lacus, ultrices sit amet mattis et, mollis et eros. Nunc placerat tellus et dictum scelerisque. Pellentesque venenatis facilisis urna finibus dictum. Vivamus imperdiet mi neque, vitae tempus nunc iaculis ac. Quisque consectetur justo nisl, ut varius urna dignissim at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus facilisis feugiat dolor, ut aliquet lacus dictum id. Proin quis ultrices ligula. Suspendisse porttitor auctor justo, quis placerat diam pharetra a.

Aenean nec pharetra nulla. Nullam gravida dignissim odio. Cras nec lacinia ante, eu auctor dolor. Sed non molestie turpis. Sed tempus risus id ligula venenatis fringilla sit amet eu metus. Nullam euismod at turpis in ultrices. Aliquam ut odio sit amet leo ornare scelerisque et vitae orci. Aliquam erat volutpat. Nulla tincidunt facilisis lacus. Mauris ornare tincidunt orci ullamcorper pellentesque. Sed blandit auctor ex, eget ultrices nisi pulvinar vel. Nam arcu mauris, ornare faucibus vestibulum eget, ultrices quis orci.

Nulla rutrum ipsum at lectus aliquet mollis. Vivamus quis tellus nunc. Maecenas felis neque, scelerisque sit amet aliquet non, consequat malesuada sapien. Cras ante enim, rutrum id porta eget, aliquet vitae tellus. Maecenas nec vestibulum lorem, sed rutrum erat. Fusce luctus lacus in arcu vehicula, sed interdum lacus vehicula. Nulla et risus placerat, commodo purus a, dapibus ante. Proin sed blandit sapien, a suscipit nisi. Sed finibus, nulla sit amet accumsan tempor, justo mi imperdiet lectus, quis egestas odio augue a felis.

[/div][/div]

[style]

.npctt1 {background-color:#fff;background-image:linear-gradient(135deg,rgba(233,233,233,.75) 12.5%,#fff 12.5%,#fff 50%,rgba(233,233,233,.75) 50%,rgba(233,233,233,.75) 62.5%,#fff 62.5%,#fff 100%);background-size:8px 8px;background-attachment:fixed;padding:30px}.bg1{background:#fff;border:1px solid #e9e9e9;box-sizing:border-box;padding:20px 90px 50px;}.tips1 {display: flex;flex-wrap:wrap;padding:5px;border-bottom:2px solid #efefef}.date {border-top:1px solid #efefef;border-bottom:1px solid #efefef;padding:10px;text-align:center;background-image:linear-gradient(135deg,rgba(233,233,233,.75) 12.5%,#fff 12.5%,#fff 50%,rgba(233,233,233,.75) 50%,rgba(233,233,233,.75) 62.5%,#fff 62.5%,#fff 100%);background-size:8px 8px;background-attachment:fixed;font-weight:bold;margin:auto;}@media (max-width: 650px) {.npctt1 {padding:15px !important}.bg1 {padding:10px 10px 30px !important;}.tips {justify-content:center}}

[/style]

 

[Ultimate]

BBcode kiểu 3 (kiểu đơn giản nhất):

Flavia Dohaeris

Erika Aoi

Địa điểm: Lớp học trường Imperia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna lacus, ultrices sit amet mattis et, mollis et eros. Nunc placerat tellus et dictum scelerisque. Pellentesque venenatis facilisis urna finibus dictum. Vivamus imperdiet mi neque, vitae tempus nunc iaculis ac. Quisque consectetur justo nisl, ut varius urna dignissim at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus facilisis feugiat dolor, ut aliquet lacus dictum id. Proin quis ultrices ligula. Suspendisse porttitor auctor justo, quis placerat diam pharetra a.

Aenean nec pharetra nulla. Nullam gravida dignissim odio. Cras nec lacinia ante, eu auctor dolor. Sed non molestie turpis. Sed tempus risus id ligula venenatis fringilla sit amet eu metus. Nullam euismod at turpis in ultrices. Aliquam ut odio sit amet leo ornare scelerisque et vitae orci. Aliquam erat volutpat. Nulla tincidunt facilisis lacus. Mauris ornare tincidunt orci ullamcorper pellentesque. Sed blandit auctor ex, eget ultrices nisi pulvinar vel. Nam arcu mauris, ornare faucibus vestibulum eget, ultrices quis orci.

Nulla rutrum ipsum at lectus aliquet mollis. Vivamus quis tellus nunc. Maecenas felis neque, scelerisque sit amet aliquet non, consequat malesuada sapien. Cras ante enim, rutrum id porta eget, aliquet vitae tellus. Maecenas nec vestibulum lorem, sed rutrum erat. Fusce luctus lacus in arcu vehicula, sed interdum lacus vehicula. Nulla et risus placerat, commodo purus a, dapibus ante. Proin sed blandit sapien, a suscipit nisi. Sed finibus, nulla sit amet accumsan tempor, justo mi imperdiet lectus, quis egestas odio augue a felis.

Giải thích:

[box=;display: inline-block;width:122px;margin:5px;text-align:center||||][box=; border: 1px #3f3f3f solid;||||][szimg=120|120|]https://i.imgur.com/Zf38KbW.png[/szimg][/box]Flavia Dohaeris[/box] [box=;display: inline-block;width:122px;margin:5px;text-align:center||||][box=; border: 1px #3f3f3f solid;||||][szimg=120|120]https://i.imgur.com/Z9AlGqm.jpeg[/szimg][/box]Eizu Fujiito[/box]

Địa điểm: Lớp học trường Imperia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna lacus, ultrices sit amet mattis et, mollis et eros. Nunc placerat tellus et dictum scelerisque. Pellentesque venenatis facilisis urna finibus dictum. Vivamus imperdiet mi neque, vitae tempus nunc iaculis ac. Quisque consectetur justo nisl, ut varius urna dignissim at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus facilisis feugiat dolor, ut aliquet lacus dictum id. Proin quis ultrices ligula. Suspendisse porttitor auctor justo, quis placerat diam pharetra a.

Aenean nec pharetra nulla. Nullam gravida dignissim odio. Cras nec lacinia ante, eu auctor dolor. Sed non molestie turpis. Sed tempus risus id ligula venenatis fringilla sit amet eu metus. Nullam euismod at turpis in ultrices. Aliquam ut odio sit amet leo ornare scelerisque et vitae orci. Aliquam erat volutpat. Nulla tincidunt facilisis lacus. Mauris ornare tincidunt orci ullamcorper pellentesque. Sed blandit auctor ex, eget ultrices nisi pulvinar vel. Nam arcu mauris, ornare faucibus vestibulum eget, ultrices quis orci.

Nulla rutrum ipsum at lectus aliquet mollis. Vivamus quis tellus nunc. Maecenas felis neque, scelerisque sit amet aliquet non, consequat malesuada sapien. Cras ante enim, rutrum id porta eget, aliquet vitae tellus. Maecenas nec vestibulum lorem, sed rutrum erat. Fusce luctus lacus in arcu vehicula, sed interdum lacus vehicula. Nulla et risus placerat, commodo purus a, dapibus ante. Proin sed blandit sapien, a suscipit nisi. Sed finibus, nulla sit amet accumsan tempor, justo mi imperdiet lectus, quis egestas odio augue a felis.