top of page

Post

You can embed your own posts or unique posts by others in your blog.
And please see the terms and conditions below.

Add a blue check mark to the following code

Add a gold check mark to the following code

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {

        }
        .loox-post {
            border: 1px solid #ddd;
            border-radius: 10px; /* 角を丸くする */
            padding: 16px;
            max-width: 500px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
            position: relative; /* 相対位置指定 */
            background-color: #fff; /* 背景色を白に設定 */
        }
        .loox-logo {
            position: absolute; /* 絶対位置指定 */
            top: 5px; /* 上からの位置 */
            right: 5px; /* 右からの位置 */
            width: 54px; /* ロゴの幅 */
            height: 54px; /* ロゴの高さ */
        }
        .loox-post-header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 10px;
        }
        .loox-post-avatar {
            width: 40px; /* アイコンの幅を調整 */
            height: 40px; /* アイコンの高さを調整 */
            border-radius: 50%;
            margin-right: 10px;
            cursor: pointer;
        }
        .loox-post-username {
            font-weight: bold;
            font-size: 1em; /* フォントサイズを少し小さく */
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            display: flex; /* フレックスボックスに変更して横並びに表示 */
            align-items: center; /* 垂直方向の中央揃え */
            margin-bottom: 2px; /* ユーザー名と@メンションの間隔を設定 */
        }
        .loox-checkmark {
            width: 15px; /* チェックマークの幅を調整 */
            height: 15px; /* チェックマークの高さを調整 */
            margin-left: 5px; /* ユーザー名とチェックマークの間隔を設定 */
        }
        .loox-logo-small {
            width: 15px; /* ロゴの幅を調整 */
            height: 15px; /* ロゴの高さを調整 */
            margin-left: 5px; /* チェックマークとロゴの間隔を設定 */
        }
        .loox-post-mention {
            font-size: 0.8em; /* @メンションのサイズを小さくする */
            color: #888; /* @メンションの色を灰色にする */
            margin-left: 5px; /* @メンションとFollowボタンの間隔を設定 */
        }
        .loox-post-content {
            font-size: 1.1em;
            line-height: 1.5;
            text-align: left;
            margin-bottom: 10px; /* ポストテキストとボタンの間の距離を設定 */
            cursor: pointer;
            text-decoration: none; /* 下線を削除 */
            color: inherit; /* テキストの色を継承 */
        }
        .loox-post-actions {
            display: flex;
            align-items: center;
            justify-content: flex-start; /* 左寄せに修正 */
            margin-top: 10px;
        }
        .loox-post-action {
            display: flex;
            align-items: center;
            cursor: pointer;
            text-decoration: none; /* 下線を削除 */
            color: inherit; /* テキストの色を継承 */
            margin-right: 20px; /* ボタン間の距離を設定 */
        }
        .loox-post-action-icon {
            width: 25px; /* アイコンのサイズを指定 */
            height: 25px;
            margin-right: 5px;
        }
        .loox-post-action-icon-like {
            background-image: url('https://img.icons8.com/ios-filled/50/FF0000/like.png'); /* いいねボタンのアイコンのURL */
            background-size: cover;
        }
        .loox-post-action-icon-reply {
            background-image: url('https://img.icons8.com/ios-filled/50/000000/speech-bubble-with-dots.png'); /* 返信ボタンのアイコンのURL */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="loox-post">
        <a href="
https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-logo">
            <img src="https://static.wixstatic.com/media/b3eff1_7780fba1f31944fbab571083fb273b35~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/b3eff1_7780fba1f31944fbab571083fb273b35~mv2.png" alt="LOOX Logo">
        </a>
        <div class="loox-post-header">
            <a href="
https://looxteam.wixsite.com/loox/ac/loox/user" target="_blank">
                <img class="loox-post-avatar" src="
https://static.wixstatic.com/media/1bf8c6_a2fd1a3accb74a03bce162aee239e3f5%7Emv2.png/v1/fill/w_206,h_206,al_c,lg_1,q_85,enc_auto/1bf8c6_a2fd1a3accb74a03bce162aee239e3f5%257Emv2.png" alt="User Avatar">
            </a>
            <div>
                <a href="
https://looxteam.wixsite.com/loox/ac/loox/user" target="_blank" class="loox-post-username">
                   
LOOX
                    <img class="loox-checkmark" src="https://static.wixstatic.com/media/b3eff1_056ae929ff264778bad3c5ef53dedd09~mv2.png/v1/fill/w_479,h_479,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/b3eff1_056ae929ff264778bad3c5ef53dedd09~mv2.png" alt="Gold Check Mark">
                </a>
                <span class="loox-post-mention">
@LOOX</span>
            </div>
        </div>
        <a href="
https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-post-content">Get what's happening now at LOOX!</a>
        <div class="loox-post-actions">
            <a href="
https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-post-action">
                <span class="loox-post-action-icon loox-post-action-icon-like"></span> Like
            </a>
            <a href="
https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-post-action">
                <span class="loox-post-action-icon loox-post-action-icon-reply"></span> Reply
            </a>
        </div>
    </div>
</body>
</html>

 

Step 1

Copy code

 

Step 2

Read the description on the left side of the code
Change all the
green codes.

 

rules

 

This code is not open source.Please do not use this code outside of LOOX!

preview

 
bottom of page