چگونگی لینک دار کردن دکمه ادامه مطلب

J

jamshimi

کاربر عضو
سلام دوستان

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

ممنون میشم راهنمایی فرمایید که کد زیر رو باید چطور ویرایش کرد؟ استایل مورد نظر که می خوام لینک دار بشه class="readmore" می باشد. باتشکر وعذر خواهی بابت اینکه اگه جای درستی پست دادم

کد: 
a href="<more></more>"><a class="readmore"></a>
 
MahdiY

MahdiY

راهبر انجمن
تمامی پرسش و و پاسخ ها در انجمن پرسش و و پاسخ قرار می گیرند

کدی که قرار دادید مطمئنید درسته ؟

 
J

jamshimi

کاربر عضو
MahdiY گفت:
تمامی پرسش و و پاسخ ها در انجمن پرسش و و پاسخ قرار می گیرند

کدی که قرار دادید مطمئنید درسته ؟
کلیک کنید تا گسترش یابد...
سلام

راستش بخوای به طور دقیق مطمئن نیستم اما من می خوام قسمت ادامه مطلب که خیلی ساده هست و به صورت نوشته هست را یه استایل بهش بدم که در اون استایل یه دکمه هست و باید لینک دار بشه تگ ادامه مطلب بلاگ اسکای هم به صورت زیر هست

<more></more>
و کلاسی هم که می خوام فراخوانی و لینک دار بشه اینکه

class="readmore"ممنون میشم کد نهایی رو برام بزارید

 
آخرین ویرایش توسط مدیر:
soltaneghalbha

soltaneghalbha

کاربر عضو
سلام

این رو تست کن

<more> <p class="readmore"><a href="@href">ادامه مطلب </a></p> </more>و به کلاس readmore برو و استایل بده بهش

این هم یه استایل آماده :

کد: 
p.readmore {width:150px;background:none;margin-top:20px}	p.readmore a {		text-decoration:none;		display:inline-block;		font-size:1em;              border:1px solid #9EAE64;               background-color:#D4CDB0; 		background-image: url(../images/readmore.png) no-repeat -50px 10px !important;		border-radius:5px;		padding:3px 15px 2px;		color:#75755C !important;		-moz-transition: all .8s ease-out;		-o-transition: all .8s ease-out;		-webkit-transition: all .8s ease-out;		transition: all .8s ease-out;		background-position:1px 10px;                margin-right:5px;                  margin-top:0;                text-shadow:none;}				p.readmore a:hover {			padding-left:30px;color:#9C6A79 !important;                        font-weight:bold !important;			background:#EDDBC7 url(../images/readmore.png) no-repeat 3px 10px !important;}							p.readmore a:focus {			background-color:#2E3516}
 
آخرین ویرایش توسط مدیر:
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
سلام

این رو تست کن

<more> <p class="readmore"><a href="@href">ادامه مطلب </a></p> </more>و به کلاس readmore برو و استایل بده بهش

این هم یه استایل آماده :

p.readmore {width:150px;background:none;margin-top:20px} p.readmore a { text-decoration:none; display:inline-block; font-size:1em; border:1px solid #9EAE64; background-color:#D4CDB0; background-image: url(../images/readmore.png) no-repeat -50px 10px !important; border-radius:5px; padding:3px 15px 2px; color:#75755C !important; -moz-transition: all .8s ease-out; -o-transition: all .8s ease-out; -webkit-transition: all .8s ease-out; transition: all .8s ease-out; background-position:1px 10px; margin-right:5px; margin-top:0; text-shadow:none;} p.readmore a:hover { padding-left:30px;color:#9C6A79 !important; font-weight:bold !important; background:#EDDBC7 url(../images/readmore.png) no-repeat 3px 10px !important;} p.readmore a:focus { background-color:#2E3516}
کلیک کنید تا گسترش یابد...
با سلام

ممنون از شما

ببینید من الان در فایل استایلم این بخش رو دارم

.readmore {float:right;width:110px;height:30px;margin: 0 10px 0 0 ;background:url(
لینک ها تنها برای اعضای سایت قابل نمایش است.
) no-repeat right;-moz-transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;}.readmore:hover {background:url(
لینک ها تنها برای اعضای سایت قابل نمایش است.
) no-repeat left;}.readmore a {width:110px;height:30px;}کدی که شما دادید باز هم نوشته ادامه مطلب میاد من میخوام دکمه ای که در استایل هست بیاد و لینک دار بشه ممنون میشم کد رو برام اصلاح کنید
 
soltaneghalbha

soltaneghalbha

کاربر عضو
بفرمایید

کد :

<more><a href="@href"><button class="readmore"> </button> </a> </more>استایل :

کد: 
.readmore {float:right;width:110px;height:30px;margin: 0 10px 0 0 ;background:url([URL="http://s6.picofile.com/file/8234012492/more.png"]http://s6.picofile.com/file/8234012492/more.png[/URL]) no-repeat right;-moz-transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;}.readmore:hover {background:url([URL="http://s6.picofile.com/file/8234012492/more.png"]http://s6.picofile.com/file/8234012492/more.png[/URL]) no-repeat left;}.readmore a {width:110px;height:30px;}
 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
بفرمایید

کد :

<more><a href="@href"><button class="readmore"> </button> </a> </more>استایل :

.readmore {float:right;width:110px;height:30px;margin: 0 10px 0 0 ;background:url(
لینک ها تنها برای اعضای سایت قابل نمایش است.
) no-repeat right;-moz-transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;}.readmore:hover {background:url(
لینک ها تنها برای اعضای سایت قابل نمایش است.
) no-repeat left;}.readmore a {width:110px;height:30px;}
کلیک کنید تا گسترش یابد...
با سلام وعرض ادب فراوان بابت محبتی که در حق بنده حقیر می فرمایید .آرزوی بنده سلامتی دوستان گلی مثل شماست

من کد رو به این صورت قرار دادم منتهی 3 مشکل وجود دارد

1-.وقتی موس روی دکمه میاد تغییر شکل به حالت دست نمیده

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

h5e1jhwomj8jlhy4a2xn.png


g24zyepzsux2o5bfpslb.png


در حالی که من می خوام درست مثل این باشه من با فوتوشاپ درست کردم

4ag4gvgm0d58dmcyb5re.png


من کد رو به این صورت قرار میدم بخشی که مربوط به پست هست

@content<more><a href="@href"><button class="readmore"> </button> </a> </more>                          باز هم از لظف شما کمال تشکر دارم

 
آخرین ویرایش توسط مدیر:
soltaneghalbha

soltaneghalbha

کاربر عضو
برای تغییر حالت ؛ که بنده تست کردم ، جواب میده

شما اگه امکان داره قالب رو روی وبلاگتون نصب کنید و آدرسش رو قرار بدید ، تا آنلاین بررسی بشه

 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
برای تغییر حالت ؛ که بنده تست کردم ، جواب میده

شما اگه امکان داره قالب رو روی وبلاگتون نصب کنید و آدرسش رو قرار بدید ، تا آنلاین بررسی بشه
کلیک کنید تا گسترش یابد...
با سلام و ادب
راستش امکان قرار دادن قالب و آدرس برام وجود ندارد اما نمیدونم چرا برای من تغییر شکل نمیده و دکمه یه بریدگی در پایین پست ها ایجاد می کند
این بخشی از کده
کد: 
@content<more><a href="@href"><button class="readmore"> </button> </a> </more>                            <sharing>                            <br><br>

 
soltaneghalbha

soltaneghalbha

کاربر عضو
اگه تغییر شکل نمیده و بریدگی ایجاد میکنه ، میتونه مشکل از نحوه ی استایل دهی دیگر عناصر باشه

بزارید استاید بزرگوار بیان مشکل رو حل کنن

 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
اگه تغییر شکل نمیده و بریدگی ایجاد میکنه ، میتونه مشکل از نحوه ی استایل دهی دیگر عناصر باشه

بزارید استاید بزرگوار بیان مشکل رو حل کنن
کلیک کنید تا گسترش یابد...
سلام ودرود فراوان

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

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

ممنون میشم کد استایل و کد ادامه متنش رو برام قرار بدین

باتشکر فراوان

 
soltaneghalbha

soltaneghalbha

کاربر عضو
سلام

برای اینکه وقتی ماوس بره روش و تغییر رنگ ، متن یا چیز دیگه ای بده ، باید از خاصیت hover استفاده کنید

که این سایت مجموعه ای از این خاصیت رو داره :
لینک ها تنها برای اعضای سایت قابل نمایش است.


 پک دکمه ای هم که دادی باید hover اونها رو به دلخواه تغییر بدی

 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
سلام

برای اینکه وقتی ماوس بره روش و تغییر رنگ ، متن یا چیز دیگه ای بده ، باید از خاصیت hover استفاده کنید

که این سایت مجموعه ای از این خاصیت رو داره :
لینک ها تنها برای اعضای سایت قابل نمایش است.


 پک دکمه ای هم که دادی باید hover اونها رو به دلخواه تغییر بدی
کلیک کنید تا گسترش یابد...
ممنون از شما

راستش من خیلی حرفه ای نیستم

منظورم این بود که چطور از اون پک دکمه درادامه مطلب استفاده کنم حالا اگه تغییر رنگ هم وقتی موس بره روش نده هم باز هم راضیم مهم اینه که نحوه فراخوانی اون بلد نیستم و همینطور کدوم قسمت ها از استایل اون پک باید در استایل قالبم کپی کنم؟ خیلی عذر می خوام که مزاحم میشم 

 
soltaneghalbha

soltaneghalbha

کاربر عضو
خب دوست عزیز برای استایل دادن دکمه ها

فایل css:

.button { display: inline-block; font-weight: bold; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); font-size: 12px; line-height: 20px; padding: 5px 12px; -webkit-border-radius: 1px; border-radius: 1px; position: relative; margin: 0 10px 10px 0;}.button:after { position: absolute; display: block; content: ""; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}.button:active { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.02) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.02) !important;}.button:active:after { -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;}.black-button:hover { -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #7c8184; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #7c8184; background-color: #676b6d; background-image: -webkit-gradient(linear, left top, left bottom, from(#676b6d), to(#484a4c)); background-image: -webkit-linear-gradient(top, #676b6d, #484a4c); background-image: -moz-linear-gradient(top, #676b6d, #484a4c); background-image: -o-linear-gradient(top, #676b6d, #484a4c); background-image: -ms-linear-gradient(top, #676b6d, #484a4c); background-image: linear-gradient(top, #676b6d, #484a4c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#676b6d', EndColorStr='#484a4c');}.black-button { -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #6f7476; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #6f7476;}.black-button,.black-button:active { background-color: #5c6062; background-image: -webkit-gradient(linear, left top, left bottom, from(#5c6062), to(#434547)); background-image: -webkit-linear-gradient(top, #5c6062, #434547); background-image: -moz-linear-gradient(top, #5c6062, #434547); background-image: -o-linear-gradient(top, #5c6062, #434547); background-image: -ms-linear-gradient(top, #5c6062, #434547); background-image: linear-gradient(top, #5c6062, #434547); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5c6062', EndColorStr='#434547');}.black-button:after { background-color: #37383a; background-image: -webkit-gradient(linear, left top, left bottom, from(#37383a), to(#252627)); background-image: -webkit-linear-gradient(top, #37383a, #252627); background-image: -moz-linear-gradient(top, #37383a, #252627); background-image: -o-linear-gradient(top, #37383a, #252627); background-image: -ms-linear-gradient(top, #37383a, #252627); background-image: linear-gradient(top, #37383a, #252627); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#37383a', EndColorStr='#252627');}.black-button:active:after { background-color: #323435; background-image: -webkit-gradient(linear, left top, left bottom, from(#323435), to(#292b2b)); background-image: -webkit-linear-gradient(top, #323435, #292b2b); background-image: -moz-linear-gradient(top, #323435, #292b2b); background-image: -o-linear-gradient(top, #323435, #292b2b); background-image: -ms-linear-gradient(top, #323435, #292b2b); background-image: linear-gradient(top, #323435, #292b2b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#323435', EndColorStr='#292b2b');}این هم برای فراخوانیش :

<more><a href="@href"><a class="button black-button" href="#">ادامه مطلب</a></more>برای استفاده از بقیه ی دکمه ها :

اگه به فایل index.html همون فایلی که گذاشتی رجوع کنی کدهای دکمه هارو مشاهده می کنی :

<div class="page-center"> <a class="button black-button" href="#">ادامه مطلب</a> <a class="button grey-button" href="#">ادامه مطلب</a> <a class="button plum-button" href="#">ادامه مطلب</a> <a class="button purple-button" href="#">ادامه مطلب</a> <a class="button blue-button" href="#">ادامه مطلب</a> <a class="button azure-button" href="#">ادامه مطلب</a> <a class="button pink-button" href="#">ادامه مطلب</a> <a class="button red-button" href="#">ادامه مطلب</a> <a class="button orange-button" href="#">ادامه مطلب</a> <a class="button green-button" href="#">ادامه مطلب</a></div>اگه به فایل style.css موجود تو پوشه css بری ، استایل ها رو می بینی ، من این استایل رو انتخاب کرده بودم : black-button ؛ شما هم که هر کدوم رو میخوای فقط کافیه استایلش رو کپی کنی

مثلا این رو میخوای : grey-button میری تو استایل ها این رو جست و جو میکنی :grey-button هر چی فایل با همین اسم پیدا شد کپی می کنی (انشاءالله که متوجه شده باشی ، چون نمیدونم چی گفتم!)

 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
خب دوست عزیز برای استایل دادن دکمه ها

فایل css:

.button { display: inline-block; font-weight: bold; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); font-size: 12px; line-height: 20px; padding: 5px 12px; -webkit-border-radius: 1px; border-radius: 1px; position: relative; margin: 0 10px 10px 0;}.button:after { position: absolute; display: block; content: ""; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}.button:active { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.02) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.02) !important;}.button:active:after { -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;}.black-button:hover { -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #7c8184; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #7c8184; background-color: #676b6d; background-image: -webkit-gradient(linear, left top, left bottom, from(#676b6d), to(#484a4c)); background-image: -webkit-linear-gradient(top, #676b6d, #484a4c); background-image: -moz-linear-gradient(top, #676b6d, #484a4c); background-image: -o-linear-gradient(top, #676b6d, #484a4c); background-image: -ms-linear-gradient(top, #676b6d, #484a4c); background-image: linear-gradient(top, #676b6d, #484a4c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#676b6d', EndColorStr='#484a4c');}.black-button { -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #6f7476; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #6f7476;}.black-button,.black-button:active { background-color: #5c6062; background-image: -webkit-gradient(linear, left top, left bottom, from(#5c6062), to(#434547)); background-image: -webkit-linear-gradient(top, #5c6062, #434547); background-image: -moz-linear-gradient(top, #5c6062, #434547); background-image: -o-linear-gradient(top, #5c6062, #434547); background-image: -ms-linear-gradient(top, #5c6062, #434547); background-image: linear-gradient(top, #5c6062, #434547); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5c6062', EndColorStr='#434547');}.black-button:after { background-color: #37383a; background-image: -webkit-gradient(linear, left top, left bottom, from(#37383a), to(#252627)); background-image: -webkit-linear-gradient(top, #37383a, #252627); background-image: -moz-linear-gradient(top, #37383a, #252627); background-image: -o-linear-gradient(top, #37383a, #252627); background-image: -ms-linear-gradient(top, #37383a, #252627); background-image: linear-gradient(top, #37383a, #252627); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#37383a', EndColorStr='#252627');}.black-button:active:after { background-color: #323435; background-image: -webkit-gradient(linear, left top, left bottom, from(#323435), to(#292b2b)); background-image: -webkit-linear-gradient(top, #323435, #292b2b); background-image: -moz-linear-gradient(top, #323435, #292b2b); background-image: -o-linear-gradient(top, #323435, #292b2b); background-image: -ms-linear-gradient(top, #323435, #292b2b); background-image: linear-gradient(top, #323435, #292b2b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#323435', EndColorStr='#292b2b');}این هم برای فراخوانیش :

<more><a href="@href"><a class="button black-button" href="#">ادامه مطلب</a></more>برای استفاده از بقیه ی دکمه ها :

اگه به فایل index.html همون فایلی که گذاشتی رجوع کنی کدهای دکمه هارو مشاهده می کنی :

<div class="page-center"> <a class="button black-button" href="#">ادامه مطلب</a> <a class="button grey-button" href="#">ادامه مطلب</a> <a class="button plum-button" href="#">ادامه مطلب</a> <a class="button purple-button" href="#">ادامه مطلب</a> <a class="button blue-button" href="#">ادامه مطلب</a> <a class="button azure-button" href="#">ادامه مطلب</a> <a class="button pink-button" href="#">ادامه مطلب</a> <a class="button red-button" href="#">ادامه مطلب</a> <a class="button orange-button" href="#">ادامه مطلب</a> <a class="button green-button" href="#">ادامه مطلب</a></div>اگه به فایل style.css موجود تو پوشه css بری ، استایل ها رو می بینی ، من این استایل رو انتخاب کرده بودم : black-button ؛ شما هم که هر کدوم رو میخوای فقط کافیه استایلش رو کپی کنی

مثلا این رو میخوای : grey-button میری تو استایل ها این رو جست و جو میکنی :grey-button هر چی فایل با همین اسم پیدا شد کپی می کنی (انشاءالله که متوجه شده باشی ، چون نمیدونم چی گفتم!)
کلیک کنید تا گسترش یابد...
دوست گرانقدرم بینهایت ازت ممنونم خیلی زحمت دادم الان درست شد واقعا ممنونم منو بنده خودت قرار دادی 

حالا اگه بخوام یه افکت به این دکمه بدم باید چیکار کنم از همون افکت هایی که در این سایت 
لینک ها تنها برای اعضای سایت قابل نمایش است.
بهم معرفی کردید می خوام یکی از افکت های Background Transitions بهش اضافه کنم.ممنون میشم کدی که باید در استایل قرار بدم رو در اختیار قرار بدین

باز هم یه دنیا ازت ممنونم

همین طور بر طبق شکل زیر

8u7hfbgxz9azvcqbamlg.png


برچسب ها زیر دکمه ادامه مطلب هم ظاهر میشن اما هیچ استایلی ندارند می خوام یه استایلی داشته باشند یعنی هر کدوم در یه کادری با رنگ مثلا آبی قرار بگیرند و اون قسمتی هم که با رنگ قرمز مشخص کردم یه همچین عکسی قرار بگیره

it0251adj3akos6ucspv.png


این هم کد برچسب ها که درست زیر اون دکمه ادامه مطلب قرار میگیره

<tag><div style="margin: 10px 0px;">برچسب‌ها: <many><a href="@href">@name</a><separator>، </separator></many></div></tag>صمیمانه سپاسگذارم از محبت شما دوست گرانقدرم

 
soltaneghalbha

soltaneghalbha

کاربر عضو
این هم مثل همونه دوست عزیز فرقی نمیکنه

شما بعد از دانلود فایل ، فایل index.html رو باز می کنی و اونجا کلاس سی اس اسی که به دکمه ها داده شده معلومه ، مثل همون میری تو فایل استایل هر چی همنام بود کپی میکنی و قرار میدی

تو این صفحه هم آموزش داده که چطور استفاده کنی و هم دانلود :
لینک ها تنها برای اعضای سایت قابل نمایش است.


برای ادامه مطلب که میخوای استایل بگیره

استایلش دقیقا همون استایل دکمه ی ادامه مطلب هست :

<tag><div style="margin: 10px 0px;"><img src="http://8pic.ir/images/it0251adj3akos6ucspv.png"/> <many><a class="button black-button" href="@href">@name</a><separator>، </separator></many></div></tag>که اون کلاسی که بزرگترش کردم ؛ میتونی هر کردوم از استایل های دکمه های ادامه مطلب رو بهش بدی

اینم یه نمونه که خودت میتونی بهش استایل بدی :

کد: 
<div style="margin: 10px 0px;"><img src="http://8pic.ir/images/it0251adj3akos6ucspv.png"/> <many><a href="@href" style="background-color:#E4ECF2;border-radius:6px;padding:5px">@name</a><separator>، </separator></many></div>
 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
این هم مثل همونه دوست عزیز فرقی نمیکنه

شما بعد از دانلود فایل ، فایل index.html رو باز می کنی و اونجا کلاس سی اس اسی که به دکمه ها داده شده معلومه ، مثل همون میری تو فایل استایل هر چی همنام بود کپی میکنی و قرار میدی

تو این صفحه هم آموزش داده که چطور استفاده کنی و هم دانلود :
لینک ها تنها برای اعضای سایت قابل نمایش است.


برای ادامه مطلب که میخوای استایل بگیره

استایلش دقیقا همون استایل دکمه ی ادامه مطلب هست :

<tag><div style="margin: 10px 0px;"><img src="http://8pic.ir/images/it0251adj3akos6ucspv.png"/> <many><a class="button black-button" href="@href">@name</a><separator>، </separator></many></div></tag>که اون کلاسی که بزرگترش کردم ؛ میتونی هر کردوم از استایل های دکمه های ادامه مطلب رو بهش بدی

اینم یه نمونه که خودت میتونی بهش استایل بدی :

<div style="margin: 10px 0px;"><img src="http://8pic.ir/images/it0251adj3akos6ucspv.png"/> <many><a href="@href" style="background-color:#E4ECF2;border-radius:6px;padding:5px">@name</a><separator>، </separator></many></div>
کلیک کنید تا گسترش یابد...
سلام و عرض ادب فراوان

مشکل تگ ها به طور کامل رفغ شد از لطف شما ممنونم اما هر کاری کردم نتونستم افکت های Background Transitions رو اعمال کنم اگه ممکنه افکت shuter in horizental  رو با توجه به این کدی که برای دکمه گذاشتم برام بزارید

باز هم ممنون

کد: 
.button {display: inline-block;font-weight: bold;color: #fff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);font-size: 12px;line-height: 20px;padding: 5px 12px;-webkit-border-radius: 1px;border-radius: 1px;position: relative;margin: 0 10px 10px 0;}.button:after {position: absolute;display: block;content: "";top: -1px;left: -1px;right: -1px;bottom: -1px;z-index: -1;-webkit-border-radius: 2px;border-radius: 2px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}.button:active {-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.02) !important;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.02) !important;}.button:active:after {-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;}green-button:hover {-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #9aceb3;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #9aceb3;background-color: #82c3a1;background-image: -webkit-gradient(linear, left top, left bottom, from(#82c3a1), to(#5aa874));background-image: -webkit-linear-gradient(top, #82c3a1, #5aa874);background-image: -moz-linear-gradient(top, #82c3a1, #5aa874);background-image: -o-linear-gradient(top, #82c3a1, #5aa874);background-image: -ms-linear-gradient(top, #82c3a1, #5aa874);background-image: linear-gradient(top, #82c3a1, #5aa874);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#82c3a1', EndColorStr='#5aa874');}.green-button {text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #AE35DE;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #AE35DE;}.green-button,.green-button:active {background-color: #AE35DE;background-image: -webkit-gradient(linear, left top, left bottom, from(#AE35DE), to(#AE35DE));background-image: -webkit-linear-gradient(top, #AE35DE, #AE35DE);background-image: -moz-linear-gradient(top, #AE35DE, #AE35DE);background-image: -o-linear-gradient(top, #AE35DE, #AE35DE);background-image: -ms-linear-gradient(top, #AE35DE, #AE35DE);background-image: linear-gradient(top, #AE35DE, #AE35DE);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#AE35DE', EndColorStr='#AE35DE');}.green-button:after {background-color: #449e65;background-image: -webkit-gradient(linear, left top, left bottom, from(#449e65), to(#2e703b));background-image: -webkit-linear-gradient(top, #449e65, #2e703b);background-image: -moz-linear-gradient(top, #449e65, #2e703b);background-image: -o-linear-gradient(top, #449e65, #2e703b);background-image: -ms-linear-gradient(top, #449e65, #2e703b);background-image: linear-gradient(top, #449e65, #2e703b);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#449e65', EndColorStr='#2e703b');}.green-button:active:after {background-color: #3e9256;background-image: -webkit-gradient(linear, left top, left bottom, from(#3e9256), to(#347b42));background-image: -webkit-linear-gradient(top, #3e9256, #347b42);background-image: -moz-linear-gradient(top, #3e9256, #347b42);background-image: -o-linear-gradient(top, #3e9256, #347b42);background-image: -ms-linear-gradient(top, #3e9256, #347b42);background-image: linear-gradient(top, #3e9256, #347b42);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#3e9256', EndColorStr='#347b42');}
 
soltaneghalbha

soltaneghalbha

کاربر عضو
سلام ، بفرما

استایل :

/* Shutter In Horizontal */.hvr-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}.hvr-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { color: white;}.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { -webkit-transform: scaleX(0); transform: .button {display: inline-block;font-weight: bold;color: #fff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);font-size: 12px;line-height: 20px;padding: 5px 12px;-webkit-border-radius: 1px;border-radius: 1px;position: relative;margin: 0 10px 10px 0;}کد :

<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a> :53:

 
J

jamshimi

کاربر عضو
soltaneghalbha گفت:
سلام ، بفرما

استایل :

/* Shutter In Horizontal */.hvr-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}.hvr-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { color: white;}.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { -webkit-transform: scaleX(0); transform: .button {display: inline-block;font-weight: bold;color: #fff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);font-size: 12px;line-height: 20px;padding: 5px 12px;-webkit-border-radius: 1px;border-radius: 1px;position: relative;margin: 0 10px 10px 0;}کد :

<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a> :53:
کلیک کنید تا گسترش یابد...
سلام

دوست و استاد گرانقدرم بینهایت از وقتی که برای پاسخگویی به سوالات بنده میزارید ممنونم

خیلی عذر می خوام که مزاحم میشم

این کد رو در فایل استایل قالبم رو کپی کنم حالا این کدی هست که شما استاد عزیز برای ادامه مطلب در اختیارم قرار دادی

<a href="@href"><a class="button green-button" href="@href">ادامه مطلب</a>این کد رو باید چطور استفاده کنم؟

<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>باز هم سپاسگذارم

 
آخرین ویرایش توسط مدیر:
شما برای پاسخ‌دادن باید به انجمن ورود کنید.
بالا