Persian Blogger Planet

اضافه شدن استایلهاو رنگهای جدید به نوار ابزار بلاگر

2009-11-01T14:15:00Z

گوگل نوار ابزار بلاگر را با اضافه نمودن چندین استایل بروز نمود . این استایلهای زیباسس که به نوار ابزار بلاگر افزوده شده است ، حالت Transparent یا شفاف میباشد . برای دسترسی و استفاده این استایلها در وبلاگ خود ، وارد بخش مدیریت وبلاگر خود در بلاگر شده و از از آنجا به بخش Layout بروید و سپس از زبانه Page Elements از بخش Navbar بر روی Edit کلیک کنید . سپس در پنجره باز شده یکی از حالتهای مختلف را انتخاب کنید .

قالب فارسی و زیبای FreshCitrus

2009-10-25T12:47:00Z

دموی فارسی / ~~دانلود قالب~~ / توضیحات بیشتر

سازگاری با : اپرا ، فایرفاکس ، گوگل کروم

» دانلود نسخه اصلاح شده قالب بهمراه تاریخ انتشار مطالب «

قالب بلاگر ساده و دو رنگ سفیدک

2009-10-21T14:54:00Z

دموی فارسی / دانلود قالب / اطلاعات بیشتر

سازگاری با تمامی مرورگرها
دارای قابلیت تغییر رنگها و فونتهای بخشهای مختلف قالب از بخش Font and Colors

رفع ایراد برهم خوردگی وبلاگهای بلاگر در اثر استفاده از افزونه پیش فرض " ادامه مطلب " بلاگر

2009-10-19T13:54:00Z

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

قبل از هر موردی برای استفاده از ابزار پیش فرض ادامه مطلب بلاگر باید کدهای زیر را به قالب خود اضافه کنید :
وارد بخش Layout شده و از آنجا Edit HTML شوید . سپس تیک گزینه Expand Widget Templates را قرار دهید . سپس در قالب بدنبال کد زیر بگردید :


<data:post.body/>

حال کدهای زیر را باعبارت بالا جایگزین نمائید :


<span>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'> 
<div class='jump-link'> 
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
</div> 
</b:if>
</span>

تا اینجای کار این ابزار در وبلاگ شما فعال شده است .
اما روش کار با این افزونه بدین صورت است که شما کل مطلبی که میخواهید منتشر کنید را در ادیتور وبلاگ بلاگر خود نوشته و در قسمتی از متن که میخواهید نوشته ادامه مطلب ظاهر شود یک کلیک کرده و سپس از نوار ابزار ادیتور بلاگر افزونه Insert Jump Beak را انتخاب میکنید .

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

یکی از روشهای موجود در اینترنت برای حل این ایراد افزونه پیش فرض بلاگر این است که ، مطلبی که میخواهیدبا استفاده از افزونه بلاگر منتشر کنید راباز کرده و وارد بخش Edit HTML شوید. سپس در ابتدای مطالب و انتهای مطلب مانند تصویر زیر کدهای مربوطه را قرار دهید :.

این کد دقیقا در ابتدای ادیتور قرار دهید:.


<span id="fullpost">

و این کد را در انتهای ادیتور قرار دهید :.


</span>

منظور از نوشته بالا اینست که در هر کدی که در بخش Edit HTML قرار دارد ، عبارت " div " آن را به " span " تغییر دهید . تا آنجایی که من متوجه شدم بعد از استفاده از این ابزار بلاگر ،در صورت وجود دستور div در بدنه مطلب ، تداخل این ابزار با این دستور باعث برهم خوردن قالب وبلاگ میشود . به همین دلیل باید عبارتهای div را به span تغییر داد .

» مطالب این وبلاگ با استفاده از روش بهینه شده فوق منتشر شده اند .

پ.ن :اگر بعد از استفاده از روشهای بالا مشکل بر هم خوردن قالب وبلاگ شما برطرف نشد ٰ این روش را امتحان کنید
پ.ن : توصیه من به شما این است که اگر میخواهید گرفتار این مشکلات نشوید از روش " ب " این اموزش استفاده کنید

قالب فارسی بلاگر بسیاز زیبا و ساده Superior

2009-10-17T14:57:00Z

دموی فارسی / دانلود قالب / اطلاعات بیشتر

سازگاری با تمامی مرورگرها

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

2009-10-16T13:32:00Z

یک خبر خوشحال کننده .دوابزار جدید توسط گوگل به ابزراهای ادیتور بلاگر افزوده شد .

1- اگر با برنامه WORD کار کرده باشید حتما این دو ابزار را در این برنامه دیده اید . بله بالاخره گوگل ابزارهای RTL و LTR را بصورت پیش فرض به بلاگر اضافه کرد . بدین ترتیب با اضافه شدن این ابزارها میتوان از اضافه کردن کدهای اضافی به قالبهای بلاگر بمنظور فارسی سازی قالبهای بلاگر کاست .

بدین منظور برای نوشتن مطالب از سمت راست به چپ از ابزار RTL و برای نوشتن از سمت چپ به راست از ابزار LTR استفاده کنید .

2- ابزار دومی که از سوی گوگل به بلاگر افزوده شده است ، اضافه شدن دستور X-Large به ابزراهای مدیریت تصاویر برای بزگنمائی بیشتر تصاویریست که شما در مطالب خود منتشر میکنید .

Cypher قالب بسیار زیبای

2009-10-12T15:52:00Z

دموی فارسی / دانلود قالب / توضیحات بیشتر
سازگاری : با تمامی مروگر ها

قالب ساده و زیبای بلاگر Several

2009-10-06T15:07:00Z

دموی فارسی / دانلود قالب / توضیحات بیشتر
» سازگاری با : مرورگر های فایرفاکس و کروم

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

2009-10-06T02:54:00Z

یکی از مشکلاتی که سیستم بلاگر دارد ، این است که اگر بخواهیم در یک وبلاگ که دارای مطالب منتشر شده زیادی است ، افزونه آخرین مطالب منتشر شده را به آن اضافه کنیم ، اینکار را نمیتوان بوسیله افزونه های پیش فرض بلاگر انجام داد و باید از کدهای دیگری بدین منظور استفاده کرد .
چند روش ساده برای این تکنیک وجود دارد که با هم مرور میکنیم :

1- یکی از روشها استفاده از افزونه Feed بلاگر است که فقط توانایی نمایش 5 مطلب آخر را دارد . برای استفاده از این تکنیک ابتدا وارد بخش Layout و سپس Page Elements شده و از انجا با انتخاب قسمت Add a Gadget و از پنجره باز شده افزونه Feed را انتخاب کنید و سپس در کادر مخصوص از لینک زیر استفاده کنید :

http://blogname.blogspot.com/feeds/posts/default
http://blogname.blogspot.com/rss.xml
http://blogname.blogspot.com/atom.xml

یکی از لینکهای بالا را در کادر مخصوص قرار دهید و به جای متن قرمز رنگ نام وبلاگ خود را بنویسید و بر روی دکمه Continue کلیک کنید . سپس در پنجره باز شده بر روی Save کلیک کنید تا تغییرات ذخیره گردد . همانطور که از تصاویر زیر ملاحظه میکنید این افزونه محدود به نمایش 5 مطالب آخر است و توانایی نمایش بیشتر از آن را ندارد .

2- یکی دیگر از روشهای نمایش آخرین مطالب منتشر شده در وبلاگ استفاده از کدهای اماده است و مزیت آن نسبت به روش قبل نمایش تعداد دلخواه از مطالب منتشر شده است که خودتان تعیین میکنید . برای استفاده از این روش وارد بخش Layout و سپس Page Elements شده و از انجا با انتخاب قسمت Add a Gadget و از پنجره باز شده افزونه HTML/JavaScript را انتخاب کنید و سپس در کادر مخصوص کدهای زیر را کپی - پیست نمائید :

<script style="" src="http://mojtaba.sotoudeh.googlepages.com/recentpostswidgetv1.js">
</script>
<script style="">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 20;</script>
<script src="http://yourblogname.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>

ودر نهایت تغییرات را ذخیره کنید . { نتیجه نهایی }
- در کدهای بالا به جای yourblogname نام وبلاگ خود را بنویسید .
- برای نمایش تعداد مطالب آخر متشر شده در وبلاگ خود عدد " 10 " را با عدد دلخواه خود تعویض نمائید .
- برای نمایش تاریخ مطالب منتشر شده ، کلمه false را در قسمت showpostdate به true تغییر دهید .
- اگر که میخواهید خلاصه مطالب را هم نمایش دهید ، از قسمت shoepostsummary ، false را به true تبدیل کنید .

3- نمایش آخرین مطالب منتشر شده بصورت تصویری و بهمراه نظرات داده شده و تاریخ انتشار:{ ببینید }
برای استفاده این روش در وبلاگ خود ابتدا وارد بخش Layout و سپس Page Elements شده و از انجا با انتخاب قسمت Add a Gadget و از پنجره باز شده افزونه HTML/JavaScript را انتخاب کنید و سپس در کادر مخصوص کدهای زیر را کپی - پیست نمائید :


<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";

showRandomImg = true;

tablewidth = 400;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 118;
imgheight = 100;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = " دیدگاه ";

showPostDate = false;

summaryPost = 150;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";

numposts = 7;

home_page = "http://Yourblogname.blogspot.com/";

</script>
<script src="http://mojtaba.sotoudeh.googlepages.com/recentposts_thumb.js" type="text/javascript">
</script>

- عدد 400 بیانگر عرض ستون سایدبار شماست و با توجه به سایدبار وبلاگ خود این عدد را تغییر دهید
- به جای عدد 7 ، تعداد مطالبی که میخواهید نمایش داده شود را مشخص کنید
- به جای عبارت Yourblogname ، نام وبلاگ خود در بلاگر را بنویسید{ http://yourblogname.blogspot.com }
- 5 لینک سبز رنگ اول کد ، بدین منظور است که اگر نوشته شما فاقد تصویری باشد ، یکی از این لینکها تصویری به جای پیش نمایش مطالب فاقد تصویر نمایش داده میشود . { دیدن نتیجه نهایی }

4- یک روش دیگر هم است که برای تازه کارها پیچیده است و اون ترکیب فید وبلاگ از طریق سایت فیدبرنر و دریافت خروجی کد اسکریپ از قسمت Buzz Boost از بخش Publicize سایت فیدبرنر است . که باید کد دریافتی رو در افزونه HTML/Javascript قرار بدید .
نمونه استفاده شده این کد زا میتوانید در ستونهای " باغ بان باشی " و " آخرین خبرهای منتشر شده "در این سایت ببینید .

قالب فارسی بلاگر بسیار زیبای " امپرایز "

2009-10-01T10:22:00Z

دموی فارسی / دانلود قالب / توضیحات تکمیلی

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

2009-09-30T03:19:00Z

اگر مطلب قبلی که درباره اضافه کردن تکنیک " مطالب مرتبط با مطالب منتشر شده " که از نوع تصویری بود را از اینجا خوانده باشید ، { این تصویر }

قول دادم که آموزش نوع دوم همین تکنیک که از نوع متنی بود را برای شما قرار بدم
برای اضافه کردن این تکنیک به قالبهای خود مراحل زیر را انجام دهید :

1- وارد بخش layout و سپس قسمت Edit HTML از بخش مدیریت وبلاگ خود شوید . از آنجا تیک گزینه Expand Widget Template را قرار دهید .

2- کد زیر را در قالب پیدا کنید :


</head>

3- کدهای زیر را قبل از کدبالا قرار دهید:


<style>
#related-posts {
 float : right;
 width : 440px;
margin-top:20px;
margin-right : 5px;
margin-bottom:20px;
 font : 11px tahoma;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://4.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/GbYNm2feyIQ/rss.png) no-repeat scroll right center;
border-bottom:1px dotted #CCCCCC;
display:block;
line-height:2em;
margin:0 0 5px;
 padding:0 25px 1px 0;
font-family:tahoma;
}
</style>
<script src='http://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>

4- حال خط کد زیر را در بین کدهای قالب خود پبداکنید :


<data:post.body/>

5- حال کدهای زیر را بعد از خط کدهای بالا قرار دهید :


<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

پ.ن : به نوشته های قرمز رنگ توجه کنید

پ.ن 2 : خیلی از دوستان در پیداکردن کد موجود در بخش 4 مشکل دارند به تصویر زیر نگاه کنید و همه کدهای موجود در بخش 5 را انتخاب کرده و بعد از کد انتخاب شده در تصویر زیر " کپی - پیست " نمائید :.

تصویر قبل از تغییرات{ کلیک کنید }

تصویر بعد از تغییرات { کلیک کنید }

اضافه نمودن تکنیک " نوشته های مرتبط با مطلب منتشر شده " با پیش نمایش تصویری به وبلاگ

2009-09-27T14:48:00Z

از ویژگیهای سیستم بلاگر میتوان به سفارشی سازی وبلاگهای تحت این سیستم اشاره کرد. از این سو یکی از ترفندهای پر طرفدار در بین کاربران بلاگر که به وبلاگهای خود اضافه میکنند ، قابلیت " نمایش مطالب مرتبط با مطلب منتشر شده " بصورت متنی و تصویری است . پیش نمایشی از این ترفند در حالت متنی را میتوانید در اینجا مشاهده کنید . تصویر زیر نمایی از این ترفند است :

اما روش تصویری این ترفند چند روزیست که توسط سایتهای بلاگر منتشر شده که شما میتوانید با انجام مراحل زیر این قابلیت را به وبلاگهای خود اضافه کنید .... { دیدن آموزش کامل }

نتیجه نهایی بصورت زیر خواهد بود :

» دیدن آموزش کامل روش تصویری

قراردادن آیکنهای شناور توئیتر در بلاگر

2009-09-26T21:01:00Z

یکی از امکانات جالب توجه بلاگر نسبت به دیگر سیستمها اینست که میتوان با اضافه کردن کدهایی به قالب های بلاگر آن را سفارشی نمود . یکی از این دست کدها اضافه کردن حساب کاربری توئیتر به بلاگر بصورت شناور است .
برای این کار مراحل زیر را انجام دهید :
1- وارد بخش layout از مدیریت وبلاگ خود شوید و از زبانه Edit Html برروی تیک گزینه Expand Widget Template کلیک نمائید .
2- در قالب خود بدنبال کد زیر بگردید :


</body>

3- کدهای زیر را قبل از کد بالا کپی - پیست نمائید :


<a class='floating' href='http://twitter.com/baghbanbashi' target='_blank' title='Follow me on Twitter'><img border='0' float='right' src='http://i248.photobucket.com/albums/gg180/blogtemplate20/badge/genie.png'/></a>

4- حال کد زیر را در قالب خود پیدا کنید :


</head>

5- حال کدهای زیر را قبل از خط کدبالا کپی - پیست کنید :


.floating {position: fixed; right: 3px; bottom: 0px; top: auto;background: transparent;}
.floating img{background: transparent;}

پ.ن : در کدبالا اگرکلمه Right را به Left تغییر دهید مکان توئیتر از راست به چپ تغییر خواهد کرد .( جهت تغییرمکان آیکن در وبلاگ )
6- در قسمت 3 به جای لینک تصویر میتوانید از لینک های تصاویر زیر استفاده کنید :

» دانلود کلیه آیکنها در یک فایل فشرده - سری اول
» تصویر با کیفیت از لوگوهای توئیتر
» دانلود سری 2
» دانلود سری 3 - { تصویری باکیفیت از این سری آیکنها }
» دانلود سری 4
» دانلود سری 5
» دانلود سری 6

» دیدن و دانلود بیش از 100 نوع آیکن و تصویر نماد توئیتر در اندازه ها و کیفیتهای گوناگون

» منبع

Streamline قالب بلاگر فارسی بسیار زیبای

2009-09-24T10:14:00Z

دیدن درنمای کامل

دموی فارسی | دانلود قالب | درباره قالب

Fusion قالب بلاگر بسیار زیبا و اکتیو

2009-09-21T13:25:00Z

دموی فارسی | دانلود قالب | درباره قالب

SoulVision قالب بلاگر بسیار زیبای

2009-09-19T15:56:00Z

» نام قالب :SoulVision
» مترجم: مجتبی ستوده
» دموی فارسی قالب
» دانلود قالب
پ.ن : بعد از دانلود فایل را از حالت فشرده خارج کنید و اول طبق فایل راهنما عمل کنید و سپس قالب وبلاگ را تغییر دهید
» منبع

قالب فارسی خبرنگار برای کاربران بلاگر

2009-09-18T07:19:00Z

» نام قالب :خبرنگار
» مترجم: مجتبی ستوده
» دموی فارسی قالب
» دانلود قالب
» منبع

پ.ن : تغییرات زیر را درقالب اعمال کنید :


#header h1, #header h1 a, #header a, .blogname h1, .title h1, #header, #banner {
direction:rtl;
text-align:right;
margin-top:20px;
}

h1.title {
font-size:30px;
font-weight:normal;
font-family: Arial;
width:900px;
padding:0px 0 50px 0;
}

قالب فارسی فتوپلاس 2

2009-09-15T16:48:00Z

» نام قالب :فتوپلاس 2
» مترجم: مجتبی ستوده
» دموی فارسی قالب
» دانلود قالب
» منبع

پ.ن : طریقه انتشار تصویر در این قالب باید به طریقه زیر باشد :


<div class="separator" style="clear: both; text-align: center;">
<img alt="Me" height="128" longdesc="URL_FULLSIZE_IMAGE.jpg" src="URL_SHORT_IMAGE.jpg" width="187" /></div>

بلاگر و ادامه‌ی مطلب، آیا راه نجاتی هست؟

2009-09-14T03:18:00Z

عرض کنم خدمت شما که قدیم‌ترها، برای اینکه در بلاگر چیزی به نام مثلا “ادامه‌ی مطلب” داشته باشیم باید خون جگر می‌خوردیم و با عملیات ژانگولر فراوان و یکی دو تا اسکریپت و دستکاری در متن، رسما خودمان ایجادش می‌کردیم و در ویرایش‌گر خود بلاگر هم چیزی مثل ویرایش‌گر ام‌تی یا وردپرس وجود نداشت.
اما همین تازگی‌ها، خیلی پنهانی و موذیانه اضافه‌اش کرده‌اند، آن هم به همان طرز معیوب و زشت همیشگی.
روش کار:
اول اینکه در برگه‌ی “تنظیمات” و زیربرگه‌ی “اصلی” و در پایین صفحه، “ویرایش‌گر به روز شده” را انتخاب کنید که یادشان رفته آن دکمه‌های زیبای RTL و LTR را هم درش تعبیه کنند. ویژگی‌های ویرایش‌گر جدید را هم اینجا بببنید.
و بعد، اگر از پوسته‌های پیش‌فرض بلاگر استفاده می‌کنید نباید مشکلی وجود داشته باشد. اگر هست، دوباره باید پوسته را انتخاب کنید. منتها اگر نگران عوض شدن بعضی چیزها هستید یا از پوسته‌های پیش‌فرض بلاگر استفاده نمی‌کنید این راهنما را بخوانید.
خلاصه‌اش اینکه در “چیدمان” بزنید روی “ویرایش HTML” و بعد از زدن تیک “گسترش الگو”، اِلمان زیر را پیدا کنید.
<data:post.body/>
حالا در زیر این اِلمان، کدهای زیر را اضافه کنید.

<b:if cond='data:post.hasJumpLink'>      
<div class='jump-link'>       
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>       
</div>       
</b:if >

چه اتفاقی می‌افتد؟
دقیقا در هنگام نوشتن متن در ویرایش‌گر بلاگر، وقتی بزنید روی دکمه‌ی “درج وقفه پرش”، ویرایش‌گر بلاگر دو تکه خواهد شد، چیزی مثل تصویر زیر.
حالا اگر بزنید روی “ویرایش HTML” می‌بینید که ادامه‌ی متن به بعد از more منتقل شده.

» توضیح بی‌ربط: این یادداشت با استفاده از لایو- نوشته شده است.
» توضیح باربط: اگر نگران از دست رفتن دکمه‌ی RTL هستید و مثلا از مرورگر فایرفاکس برای نوشتن در ویرایش‌گر پیش‌فرض بلاگر استفاده می‌کنید –که برای اینکار خاص بهتر است از آن استفاده کنید- راست‌کلیک کنید و Switch Text Direction را انتخاب کنید.
» توضیح ذی‌ربط: اگر واژه‌هایی مثل “درج وقفه پرش” و “چیدمان” برای شما مفهومی ندارد و در داشبورد بلاگرتان چنین چیزهایی نمی‌بینید، لطف کنید زبان “پارسی” را در داشبورد انتخاب کنید خب. قبل‌تر در بلاگر فارسی درباره‌اش نوشته‌ایم: اضافه شدن سه زبان جدید و سمت و سوی جدید بلاگر
» در مورد ادامه‌ی مطلب هم در بلاگر فارسی یادداشتی نوشته شده.

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

2009-09-12T17:25:00Z

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

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

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 در کد بالا لینک تصویر دلخواه خود را قرار دهید . تصویر زیر راببینید:

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

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