آموزش تکمیلی اضافه نمودن قابلیت " ادامه مطلب " به وبلاگهای بلاگر

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

ادامه آموزش : سفارشی کردن و شخصی سازی تکنیک " ادامه مطلب " در بلاگر :

1- درابتدا بعد از اضافه کردن این تکنیک به وبلاگ خود شاهد تصویر زیر در .بلاگ خود خواهید بود :

 2- برای زیباتر کردن این متنی که دربالا تصویربالا نمایش داده شده است ابتدا وارد بخش Layout  سپس Edit HTML از مدیریت وبلاگ خود شوید . سپس تیک گزینه Expand Widget ... را قرار دهید . سپس کد زیررا در قالب خود پیدا کنید :


]]></b:skin>


حالا کدهای css زیر را قبل از کد پیدا شده بالا قرار دهید :


.jump-link a {
background: #ffb68f;
padding: 3px;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}


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

3- برای قراردادن تصویر به جای متن در این تکنیک کافیست که به جای کدهایی که در این آموزش به انها اشاره شد ، کدهای زیر را قرار دهید :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="url of image" border="0" alt="Alternative text" /></a>
</div>
</b:if >


به جای عبارت url of image در کد بالا لینک تصویر دلخواه خود را قرار دهید . تصویر زیر راببینید:

توجه توجه !   چون این تکنیک جدیدا از سوی گوگل به بلاگر افزوده شده است ، در مواقعی مشاهده شده که با اضافه کردن این تکنیک به وبلاگ خود ، وبلاگ شما بعد از دومین پستی که با این تکنیک منتشر میکنید  از نظر کد نویسی دچار مشکل خواهد شد .  ( بنابراین توصیه میشود که از روش دومی که اینجا توضییح داده شد استفاده کنید .
پ.ن : پیشنهاد من روش دوم است . 

» منبع : خودم و اینجا