استایل زیبای CSS3 برای فیدبرنر

سلام دوستان خسته نباشید امروز در خدمتتون هستیم با یک کد CSS3 بسیاز زیبا برای فید برنر سایتتون.اگر پست قبلی بنده در خصوص آموزش ایجاد خبرنامه ی Feedburner رو مطالعه کرده باشید میدونید که کدی که فیدبرنر گوگل به ما تحویل میده خیلی ساده و بی آلایش است که ما قصد داریم با استفاده از زبان CSS یک استایل زیبا و جذاب تر به اون بدیم.که این عمل باعث جلب توجه بازدیدکنندگان شما میشه ( همونطور که میدونید زیبایی نقش بسیار موثری در موفقیت وبسایت ها رو داراست پس سعی کنید ...


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






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





برای شروع این قطعه کد رو در زیره تگ <Head> قالبتون قرار بدین.
از این قطعه کد برای فرارخونی فونت یکان در وبلاگ یا وبسایت استفاده میشه.
<link rel="stylesheet" href="http://ifont.ir/apicode/38">



حالا میبایستی که کد های CSS زیر رو به فایل استایل قالبتون اضافه کنید.
#F3D{ margin:25px auto; background:url(http://www.samenblog.com/uploads/l/line/195722.jpg); height:100px; width:610px;padding:3px; } #F3D2{ width:100%; height:100%; background:#fff; } #F3D2 > form > input[type=text] { float:left; margin:25px; color:#3c3c3c; font-family:'b yekan',tahoma; font-weight:normal; font-size: 18px; border-radius: 0; background-color: #fbfbfb; padding: 7px 54px 7px 7px; margin-bottom: 10px; width:325px; border: 1px solid #cacaca; } #F3D2 > form > input[type=text]:focus{ background: #fff; box-shadow: 0; border: 1px solid #3498db; color: #3498db; outline: none; } .email2{ background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); background-size: 30px 30px; background-position: 11px 5px; background-repeat: no-repeat; } .email2:focus{ float:left; background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); background-size: 30px 30px; background-position:11px 5px; background-repeat: no-repeat; } #F3D2 > form > input[type=submit]{ font-family: 'b yekan', Arial, Helvetica, sans-serif; float:left; width: 100px; border: #fbfbfb solid 1px; cursor:pointer; background-color: #ed90a5; color:white; font-size:13px; padding-top:11px; padding-bottom:11px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; margin:23px 10px; font-weight:normal; } #F3D2 > form > input[type=submit]:hover{ background-color:#91c4e1; color: #333; } .ease { background-color: #fbfbfb; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease; } .#F3D2 > form > input[type=submit]:hover .ease{ width:100%; background-color:white; }




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

<!--timan98.ir--> <div id="F3D"> <div id="F3D2"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=timan98ir', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input placeholder="ایمیل خود را وارد کنید" class="email2" type="text" style="width:200px" name="email"/> <!-- کد های فید برنر خودتون رو جایگذین کدهای زیر کنید --> <input type="hidden" value="timan98ir" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <!-- کد های فید برنر خودتون رو جایگذین کدهای بالا کنید --> <input type="submit" class="ease" value="عضویت" /> <img src="http://www.samenblog.com/uploads/l/line/195247.png" alt="emailsubscript" style="float:right; padding:10px"> </form></div></div> <!--timan98.ir-->


توجه داشته باشید که :

در کد بالا دو  Input با مقدار تایپ Hidden قرار دارد که شما باید مقدار input های خودتون رو جایگذین این دو input کنید.


<input type="hidden" value="timan98ir" name="uri"/> <input type="hidden" name="loc" value="en_US"/>


برای بدست آوردن این دو مقدار : وارد فید خودتون بشید. قسمت Email subscriptions.






و در قسمت راست صفحه شما میتونید دو کد input که با مقدار hidden مشخص شده رو پیدا و اون هارا جایگذین کد های قبلی کنید.



وردپرسی های :


ترجیها بهتره این کد رو توی فایل Single.php جایگذاری کنند.چون زمانی که کاربر به ادامه مطلب مراجعه میکنه و بعد از خوندن مطلب این BOX رو میبینه و احتمال اینکه بعد از خوندن مطلب مفید شما به عضویت خبرنامتون در بیاد خیلی بیشتره (پس سعی کنید همیشه جامع و مفید بنویسد).


وبلاگ نویسنان هم میتونن این کد رو در ادامه ی مطلبشون قرار بدن و فقط باید یکمی با کد های html آشنایی داشته باشن.

برای مثال ما پر امکانات تریین سیستم وبلاگدهی ایرانی (سیستم وبلاگ دهی ثامن بلاگ)رو مثال میزنیم.
-برای اینکه کد فید برنر در ادامه مطلب وبلاگ های این سیستم قرار بگیره ما میبایستی تگ های html که در بالا نوشتیم رو در بین دو تگ باز و بسته ی <Continue> </Continue> قرار بدیم . تا زمانی که کاربر به ادامه مطلب ما رجوع میکنه شاهد این کد باشه.البته جایگذاری درست و دقیق کد فید هم مهمه ...