السبت، 30 يونيو 2012
كود أخر الموضوعات بشكل جميل ومتحرك
بسم الله الرحمن الرحيم
للمعاينة http://3rab4tech.blogspot.com
الأن تركيب الأضافه
أذهب الى التخطيط
ثم أضافه أداة Html
ثم أضف الكود التالى
<script type='text/javascript'>
jQuery.noConflict();
</script>
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://glitter-text.googlecode.com/files/recentpostticker.js" ></script>
<script style='text/javascript' src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
jQuery(document).ready(function($) {$('#sai').vTicker({
speed: 450,
pause: 2000,
showItems: 10,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'down'
});});
</script>
<div id="sai">
<script src='http://3rab4tech.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
تعديل الأضافه
1- var numposts = 5 عدد المواضيع
2- speed: 450 سرعة الحركة
3- pause: 2000 مدة توقف الشريط
وشكرا
كود الأشتراك فى قناة اليوتيوب لمدونتك أو موقعك
بسم الله الرحمن الرحيم
حصريا كود الأشتراك فى قناة اليوتيوب على موقعك او مدونتك
أدخل الى التخطيط
ثم أضافه أداة Html
وضع هذا الكود
<iframe src="http://www.youtube.com/subscribe_widget?p=ProtectHacker"
style="Yellow: hidden; height: 105px; width: 280px; border: 0;"
scrolling="no" frameborder="0"></iframe>
اللون الأحمر هو أسم قناتك على اليوتيوب
كيفية انشاء او وضع موضوعات ذات صلة أسفل الموضوعات
بسم الله الرحمن الرحيم
طبعا أداة موضوعات ذات صلة أداة مهمة جدا ولا غنى عنها فى أى مدونة
فهى تجعل الزائر فى مدونتك أفضل وقت ممكن وهذا لا يغنى عن كون المحتوى هو المحور الأساسى لنجاح اى مدونة ولكن هذه الأداة تخفض ترتيبك فى أليكسا و رؤية جوجل لمدونتك وارشفة مواضيعك
فى البداية
أدخل الى تصميم
ثم تحرير HTML
ثم متابعة ثم توسيع القالب
الأن أضغط Ctrl +F او F3
ثم البحث عن هذا الكود
</head>
ثم ضع هذا الكود فوقه مباشرة
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-right:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: arial;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWrQu1TwPb3qEuf7fapW8C3crAcJ81XWRyMD2iVZCzmtW6YGy7BFQpYsnU21YWYeVeDOaUR-kiOnYRmU0MdlUXNRC1ECtJ80d4BpS1zuNWncvS4HOYvLrH2i10MHJc5nYDqpgFQnBdOo/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:right;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
ثم قم بالبحث عن هذا الكود
<div class='post-footer-line post-footer-line-1'/>
ثم ضع هذا الكود تحته مباشرة
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=7;
var relatedpoststitle="موضوعات ذات صلة";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
ثم قم بحفظ القالب
يمكنك تغيير ما هو باللون الأحمر لما يناسبك
maxresults=7 هو عدد الموضوعات الظاهرة
يمكنك تغيير ما هو باللون الأحمر لما يناسبك
maxresults=7 هو عدد الموضوعات الظاهرة