ساخت کدباکس زیبا با قابلیت نمایش دمو

ساخت کدباکس زیبا با قابلیت نمایش دمو این کد به شما کمک میکند تا کدهای جاوا اچ تی ام ای و سی اس اس خود را در یک باکس زیبا در نوشته های خود نمایش دهید.قسمت جالب این کد اینه که شما میتوانید دموی کد خودتونو با یک کلیک به کاربرانتون نشون بدین.

فقط کافیه یک بار این کد رو تست کنید و یا دمو کد رو ببینید

ساخت کدباکس زیبا با قابلیت نمایش دمو
عکس از کد

دمو کد

کد دوقسمتی میباشد قسمت اول که ثابت بوده ان را در هد قالب خود قرار دهید و قسمت دوم متغیر بوده و برای اضافه کردن کد نیازی به اضافه کردن کد شماره ۱ در هد قالب نیست.

خب قسمت ۱ کد

<link rel="stylesheet" type="text/css" media="screen" href="http://dl.codebazan.ir/uploads/1457217377.css">

خب بعد از قرار دادن کد فوق در هد قالب نوبت به کد شماره ۲ میرسه که در نوشته های خود میتوانید از ان استفاده نمایید.

<div class="code-preview-style"><div class="title" dir='rtl'>کد:<br></div><div class="body" dir="ltr"><code class="test">test codebazan code bax</code><br>

<center><button class="input" onclick="window.open('https://codebazan.ir/Tools/Tools%20preview/#$1$<----mahale gharar giri demo ---->$1$$');">دمو کد فوق</button></center></div>
<div style='display:none'><h1><a title="codebazan" href="https://codebazan.ir">codebazan</a></h1></div>

در ضمن شما میتوانید کد شماره ۱ و ۲ را بصورت یکجا در یک قسمت قرار دهید.مثلا در صفحات جداگانه سایت خود و …

برای تست کد فوق میتوانید از ابزار پیش نمایش کدبازان استفاده نمایید

2 Comments

  1. عجب کدیه واقعا ممنون من یه چیزی بگم
    من یه روزی یه دکمه خواستم دکمه خروج از سایت بعد سایت شمارو دیدم و با سایتتون اشنا شدم
    از اون روزه که من تو سایتتون متولد شدم

    رضا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *