ه‍.ش. ۱۳۹۲ فروردین ۲۴, شنبه

ایجاد قفسه مطالب مرتبط در بلاگر

شاید در هنگام گردش در بلاگر در بعضی از وبلاگ ها در زیر بعضی از پستها مشاهده کرده باشید که وبلاگ چندین مطلب شبیه به مطلب اصلی و یا مرتبط و یا مطالب دیگر را به شما پیشنهاد می دهد و علاقه مند باشید این ابزار را روی وبلاگ خود پیاده کنید.
سایت linkwithin سایتی است که امکان استفاده از این پلتفورم را به شما می دهد.این ابزار فوق العاده علاوه بر شناسایی مطالب مرتبط با تگ ها و درج آنها زیر پستهای شما به بازدید کنندگان از سایت شما این امکان را می دهد که از مطالب بیشتری از وبلاگ شما استفاده کنند.بعد از وارد شدن به سایت از طریق قسمت سمت راست می توانید این ابزار را روی وبلاگ خود نصب کنید
در قسمت ایمیل میل خود در قسمت Blog Link آدرس واقعی بلاگ خود در قسمت Platform نوع سرویس خود مثلا بلاگر را انتخاب نمایید اگر سرویس مورد استفاده شما مثلا میهن بلاگ بود گزینه other را انتخاب کنید و در قسمت Width تعداد قفسه های مطالب مرتبطی که دوست دارید در زیر هر پست نمایش داده شود را انتخاب کنید بهترین گزینه عدد 5 است(بعدا قابل تغیر نیست)سپس اگر بک گراند وبلاگ شما تیره و مشکی است گزینه My blog has light text on a dark background را تیک بزنید و Get Widget را بزنید حال اگر پلتفورم وبلاگ شما به جز بلاگر و ورد پرس باشد این وبلاگ کدی به شما ارائه می دهد که با وارد شدن به سیستم وبلاگ خود از قسمت ویرایش مطلب می توانید این کد را درج نمایید(این کد بروی برخی از سرورهای ایرانی اجرا می شود ولی ظاهر مناسبی به وبلاگ نمی دهد)حال اگر پلتفورم وبلاگ شما بلاگر است(بلاگر بهترین گزینه برای پیاده کردن این کد است )صفحه جدیدی به صورت زیر باز می شود:
بعد از کلیک کردن بروی Install Widget صفحه جدیدی باز می شود که به صورت زیر است در صفحه جدید نیز با کلیک بروی دکمه آبی ابزار روی قالب شما بصورت اتوماتیک نصب می شود و از قسمت الکو می توانید آن را ببینید ویرایش و یا حذف کنید.
یک نکته در مورد این ابزار این ابزار بعد از مدتی از نصب بصورت بهینه قابل نصب است و مطالب مرتبط را کنار هم می چیند و همزمان با آپدیت وبلاگ شما نیز بعد از گذشت مدتی مطالب جدید را نیز به قفسه های خود اضافه می کند ولی تنظیمات این ابزار متاسفانه غیرقابل برگشت هستند و اگر شما آدرس وبلاگ خود مخصوصا روی بلاگر را عوض کنید پلتفورم خاصیت خود را از دست می دهد و در وبلاگ جدید نیز به هیچ وجه قابل نصب نخواهد بود زیرا این پلتفورم بر اساس یک ID که بلاگر برای هر وبلاگ ارائه می دهد و با تغیر آدرس وبلاگ نیز تغیر نمی کند کار می کند این نکته و تعداد قفسه ها را هنگام نصب در نظر داشته باشید

آموزش ایجاد اسلاید شو برای بلاگر

شاید در سایت های مختلفی گشته اید و مشاهده کرده اید که این سایتها تعدادی از مطالب خود را بصورت اسلاید شو با تصویر در بالا و قسمت هایی از وبلاگ خود به نمایش می گذارند و مایل بوده اید این طرح را روی وبلاگ خود در بلاگ و یا سایر سیستم ها پیاده کنید.در سایتهای مختلف سرویس های مختلفی از ایجاد اسلاید شو ارائه می شود که گاهی نیز بروی بعضی از سایتها به خوبی پیاده نمی شود در این پست به معرفی یکی از این کد ها برای ایجاد اسلاید شو می پردازیم.که در دو وبلاگ دیگر ما در این صفحه و در این صفحه پیاده شده است.
برای استفاده از این کد ابتدا کد را از کادر زیر کپی کنید.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
 s3Slider

 Developped By: Boban Karišik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
 Version: 1.0

 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
برای افزایش سرعت عوض شدن اسلاید ها عدد 4000 کد را به کمتر از 4000 و برای کاهش سرعت اسلاید شو عدد 4000 را به بیشتر از آن تغیر دهید همچنین کادر اسلاید شو خود را نیز می توانید با توجه به وبلاگ خود از طریق اعدادی که زیر تگ style type="text/css در کدها قید شده است عوض کنید سعی کنید بقیه قسمت های کد را دستکاری نکنید.سپس وارد قسمت ویرایش کدهای خود در سرویس مورد نظر خود شوید مثلا در بلاگر به این صورت:
حال در پنجره زیر که باز شده کد خود را قبل از تگ <head> کپی کرده و دگمه ذخیره الگو را بزنید.
سپس از قسمت ویرایش الگو وارد قسمت چیدمان شوید و افزودن یک ابزار را اتتخاب کنید.
حال در پنجره باز شده ابزار مشخص شده را انتخاب کنید و کدی که در کادر زیر قرار گرفته را پس از تغیرات در آن وارد نمایید و در صفحه جدید ریخته و سیو نمایید.
کدر را از این قسمت کپی کنید
<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>

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


  • <li class="s3sliderImage"><a href="آدرس لینک شما"><img style="width:550px;height:200px;" src="آدرس تصویر" /><span>Crysis :توضیحات و عنوان لینک Version</span></a></li>
    همچنین طول و عرض تصویر خود را نیز می توانید با اعداد مقابل height و width تغیر دهید و با اندازه کادر خود تطبیق دهید.همچنین اگر می خواهید تصاویر بیشتر قرار دهید کدهای قید شده در بالا را زیر کدهای قبلی یک بار دیگر کپی کنید و مطابق دستور دوباره آنها را تغیر دهید.
  • ایمیل یک بار مصرف!

    شاید در گردش از سایتهای مختلف متوجه شده ای که برخی از سایتها برای مشاهده مطالب لینک ها و گاهی دانلود از شما عضویت می خواهند شاید هم گاهی خواسته اید که در یک سایت عضو شوید تا ببینید این سایت امکانات و ارزش عضویت را دارد یا خیر؟اما بخاطر اینکه دوست ندارید از ایمل شخصی خود(بخاطر سو استفاده ها اسپم ها ایمیل های تبلیغاتی و ..)استفاده کنید در اینجا سایتی وجود دارد که به شما یک سرویس ایمیل یک بار مصرف ارائه می دهد که می توانید با یک ایمیل یک بار مصرف در سایت عضو شده و عضویت در این سایت را تجربه کنید.برای ورود به این سایت از این پیوند استفاده کنید و بعد از ورود در کادر مشخص شده یک نام وارد نمایید و سپس دگمه SET TEMPORARY MAIL را بزنید.
    تمام شد میل شما ایجاد شده و برای 24 ساعت قابل استفاده است تنها کافی است یک بار صفحه را Refresh کرده و در سایت هایی که می خواهید بطور آزمایشی در آنها عضو شوید ثبت نام کنید ایمیل آدرس شما نیز بصورتی که ثبت کرده اید در کادر مشاهده می شود و قابل کپی برداری است.یک نکته از این ایمیل برای ثبت نام در سایت های معتبر مثل بالاترین و. .. استفاده نکنید زیرا به محض اینکه معلوم شود ایمیل جعلی است اکانت شما تعلیق خواهد شد همچنین اگر در سایتی بطور آزمایشی ثبت نام می کنید سعی کنید اگر بعدا خواستید در سایت بمانید از اسامی رند استفاده نکنید تا با انقضا میل اسم یوز مورد علاقه شما نیز نسوزد و یا اگر خواستید در سایتی بمانید در طی 24 ساعت اول سایتهایی که قابلیت تغیر میل را دارند میل اصلی خود را وارد نمایید.
    همچنین سایت دیگری نیز وجود دارد که به محض ورود شما بصورت اتوماتیک یک ایمیل ده دقیقه ای ایجاد می کند که مانند سرویس بالاست اما با مدت زمان اندک تری در صورتی که به زمان بیشتری نیز نیاز داشتید سایت به شما اجاز استفاده بیشتر از ده دقیقه را نیز می دهد.
    برای جلوگیری از خرابکاری تحدید و فحاشی در اینترنت هیچکدام از این سایتها امکان ارسال میل را ندارند و فقط می توانند به منظور امتحان عضویت در سایتهای مختلف میل دریافت کنند اگر به قصد ارسال ایمیل می خواهید وارد این سایتها شوید این نکات را در نظر داشته باشید.