زمان جاری : شنبه 25 آذر 1396 - 6:23 بعد از ظهر
نام کاربری : پسورد : یا عضویت | رمز عبور ر فراموش کردم




تابلو اعلانات
elanat

تعداد بازدید 340
wonder-land آفلاین



ارسال‌ها : 34
عضویت: 27 /8 /1393
محل زندگی: karaj
سن: 18
تشکرها : 7
تشکر شده : 3
حالت من :
مرورگر من :
آموزش live icon کردن قالب


برای شروع کد های زیر را در بخش head قالب خود قرار دهید.


کد:

<script
type="text/javascript"
src="http://up.sibgraph.ir/up/admin-sibgraph/sibgraph/post/aban93/6/jquery-1.9.1.min.js"></script>
<script
type="text/javascript"
src="http://up.sibgraph.ir/up/admin-sibgraph/sibgraph/post/aban93/6/liveicon.js"></script>
<script
type="text/javascript"
src="http://up.sibgraph.ir/up/admin-sibgraph/sibgraph/post/aban93/6/raphael-min.js"></script>
اکنون کد زیر را جایگزین قسمت های اول هر قسمت که مانند کد زیر هستند نمایید.
کدی که باید جایگزین شود :(کد 1)
کد:
<span class="livicon" data-n="notebook" data-s="26" data-c="#ff9600" data-hc="false">
کدی که بایت کد بالا را به جای آن جایگزین نمایید:(کد 2)
کد:
<i class="icon-anchor">
در کد 2 قسمت { "=i class"} ثابت بوده و ادامه آن برای هر قسمت تغییر می کند.
در کد 1 قسمت { notebook } متغیر بوده و برای هر آیکون متفاوت می باشد که در آخر این پست سرزمین عجایب می توانید بعضی از آن ها را مشاهده نمایید.
در کد 1 قسمت { "data-s="26 } اندازه هر آیکون را مشخص می کند.
قسمت { "data-s="#ff9600 } رنگ آیکون می باشد.
برای زنده کردن آیکون ها کد 1 را در تمام قسمت هایی که مانند کد 2 هستند جایگزین نمایید و سپس با توجه به شکل آیکونی که می خواهید قسمت notebook را تغییر دهید.
نمونه کد سایت:
کد:
<RB:Blog_Archive_Block>
<aside class="block col-lg-12 col-sm-4 col-6">
<h5><i class="icon-anchor"></i>آرشیو</h5>
<div class="block-content">
<ul>
<RB:Blog_Archive_Loop>

که بعد از تغییر مانند کد زیر می شود:
کد:
<RB:Blog_Archive_Block>
<aside class="block col-lg-12 col-sm-4 col-6">
<span class="livicon" data-n="notebook" data-s="26" data-c="#ff9600" data-hc="false">آرشیو</h5>
<div class="block-content">
<ul>
<RB:Blog_Archive_Loop>
لیست بعضی از مهم ترین آیکون های زنده:
کد:
<span class="livicon" data-n="balance" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="notebook" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="code" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="sky-dish" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="user" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="ink" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="mail" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="rocket" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="new-window" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="bell" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="disconnect" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="ollapse-down" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="expand-left" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="battery" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="servers" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="home" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="credit-card" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="gears" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="key" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="location" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="concrete5" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="xing" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="stumbleupon-alt" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="screen-full" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="angle-double-up" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="spinner-one" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="tasks" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="warning-alt" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="pen" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="refresh" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="more" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="eye-open" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="calendar" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="edit" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="comments" data-s="26" data-c="#ff9600" data-hc="false">
<span class="livicon" data-n="responsive-menu" data-s="26" data-c="#ff9600" data-hc="false">


برای بدست آوردن کد بقیه آیکون ها به لینک زیر رفته و کلماتی که بین دو " " می باشند را جایگزین کلمات کدهای بالا نمایید.
کلیک کنید
اگر مشکلی داشتید بیان نمایید.
دستانی که کمک می کنند برتر از دستانی هستند که دعا می کنند


یکشنبه 17 اسفند 1393 - 19:13
وب کاربر ارسال پیام نقل قول تشکر گزارش
تشکر شده:
تشکر شده: 1 کاربر از wonder-land به خاطر این مطلب مفید تشکر کرده اند: admin1 -
goudarzi2016 آفلاین



ارسال‌ها : 2
عضویت: 16 /8 /1395
پاسخ 1 : آموزش live icon کردن قالب
عالی بود
یکشنبه 16 آبان 1395 - 20:49
وب کاربر ارسال پیام نقل قول تشکر گزارش
almasheliya آفلاین



ارسال‌ها : 1
عضویت: 28 /1 /1396
پاسخ 2 : آموزش live icon کردن قالب
مرسی بسیار مفید و عالی
دوشنبه 28 فروردین 1396 - 13:50
وب کاربر ارسال پیام نقل قول تشکر گزارش





برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.



کپی برداری از مطالب این انجمن فقط با درج لینک منبع مجاز می باشد. | طراح قالب: Moisrex