سرزمین عجایب

با استفاده از این آموزش سرزمین عجایب می توانید قالب خود را لیو آیکون (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">


 

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

کلیک کنید

 

اگر مشکلی داشتید در قسمت نظرات یا انجمن سایت بیان نمایید.