کد استایل نظرات فلت و زیبا
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش

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

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

پیش نمایش 1

چنان چه پیش نمایش 1 کار نکرد از پیش نمایش 2 استفاده کنید

پیش نمایش2

نکات رو حتما بخونین و رعایت کنید

1-کد شماره 3 که مربوط به جاوا اسکریپت این نظرات میباشد حتما بعد از کد شماره 1 و 2 باشد که مربوط به html و css میباشند

2- باید المنت های سرتیتر پست و نویسنده مطلب رو پیدا کنید توی مطالب ارسالی و به اونها آیدی های زیر رو اضافه کنید

برای سرتیتر = title-comment

برای نویسنده پست = avatar-type

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

کد شماره 1 : css های زیر در بین دو تگ قرار بگیره:

کد:
<style>

#comment_vg{

width: 470px;

height: 185px;

direction: rtl;

text-align: right;

background-color: #eaeaea;

border-radius: 3px;

font-family: b yekan;

font-size: 13px;

margin-top: 10px;

padding-top: 1px;

}

#comment_vg_one{

background-color: #8f44ad;

width: 280px;

padding: 3px;

color: #fff;

direction: rtl;

text-align: right;

position: relative;

direction: rtl;

margin-top: 5px;

}

#comment_vg_one:before { content: " ";

position: absolute;

width: 0px;

height: 0px;

left: 235px;

top: 100%;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-top: 5px solid #8f44ad;

}

#avatar_author{ width:100px; height:100px; float:right; margin:5px; background-color:#000;}

#avaatar_typer{ margin:5px; float:left; background-color:#0e76a9;

direction:rtl; width:100px; height:65px; color:#fff; text-align:center;

padding-top:35px;}

#pv_vg_comment{

width: 280px;

padding: 3px;

color: #fff;

background-color: #0e76a9;

text-align: left;

direction: rtl;

position: relative;

margin-top: 15px;

}

.comment_types{

height: 100px;

overflow-y: scroll;

overflow-x: hidden;

width: 250px;

color: #000;

direction: rtl;

text-align: right;

}

.comment_types div{ text-align:left; margin-top:7px;}

#pv_vg_comment:before { content: " ";

position: absolute;

width: 0px;

height: 0px;

left: 50px;

bottom: 100%;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid #0e76a9;

}

</style>

کد شماره 2 : html زیر در مکانی که قصد نمایش دارید جای گذاری بشه

:

کد:
<RB:Comment_Display_Block>

<center>

<RB:Comment_Display_Loop>

<div id="comment_vg">

<div id="comment_vg_one">

نظر<a style="text-decoration:none; color:#fff" href="

[Comment_Web]" title="ارسال شده در : [Comment_Date]...

[Comment_Time]"> [Comment_Author]</a>درباره پست "<span

id="title-comment"></span>"

</div>

<div id="avatar_author"><img src=" [Comment_Gavator]" height="100" width="100" /></div>

<div id="avaatar_typer"> <span id="avatar-type"></span></div>

<center>

<div class="comment_types"> [Comment_Content]</div>

</center>

<div align="left" dir="ltr">

<div id="pv_vg_comment">پاسخ

<span id="avatar-type"></span>

به

[Comment_Author]

</div>

</div>

</div>

</RB:Comment_Display_Loop>

</center>

<RB:Comment_Display_Block>

کد شماره 3 : java script زیر هم در آخر همه کدهای بالا

:

کد:
<script>

document.getElementById("title-comment").innerHTML = document.getElementById("post-title_vg").innerHTML;

document.getElementById("avatar-type").innerHTML = document.getElementById("author-title_vg").innerHTML

</script>

امضاي کاربر :
نسخه گرافیک آپدیت شد

تشکر شده:

17 کاربر از manotoweb به خاطر اين مطلب مفيد تشکر کرده اند: mygod / whatyouknow / mahdio77 / alismart / daygraph / karim / alizadearbatan / edvard / helpmaster / sgraph / zero / shayan-d / sangila / relax / mattin / mrarsh / dominar /

پاسخ ها

عالیه

امضاي کاربر :


حـــــــــرفــــــهـــــــــــــــــــای دلـــــمـ را کســــــــــــــــــــــیــ نمیــــفهمــــــــــــد... فقــــــــــــط روزی مورچـــــــــــــــهـ هـــــــــــــا خواهنــــــــــد فهمیــــــــــــــــد... روزیـــ کهـ در زیر خــــــــــــــــــــــاکـــ گلـــــویـــــــــمـ را بـــــهـ تـــــــــــــــاراج میـــــــــــــبرنــــــد!

تشکر شده:

1 کاربر از mygod به خاطر اين مطلب مفيد تشکر کرده اند: whatyouknow /

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

امضاي کاربر :

برای ارتباط با ای دی @SirsLamy در تلگرام پ.م بدید ...

دستت درد نکنه

دست طراحشم درد نکنه :دی

امضاي کاربر :

تشکر شده:

1 کاربر از livegraph به خاطر اين مطلب مفيد تشکر کرده اند: daygraph /


براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !