نبدأ
اليوم أقدم لكم أداة أو أضافة بلوجر هذية من مدونة افتخر , الاضافة هي عباره عن سلايد (slider) المشاركة الجديدة فى قائمة المدونة الجانبية المعروفة ب (السايد بار) بعد الضعط على الموضوع, الإضافة جيدة ومثيرة للإنتباه.
للمعاينة مباشرة هنا : فى قائمة الجانبية
طريقة التركيب :
1~ قالب
2~ تحرير HTML.
3~ ابحت عن :
]]></b:skin>
ولصق هذه الشفرة او هذا الكود فوقه يعني اعلاه
/* Slider */.sompret-wrapper {float:right;
position: relative;}.sompret { overflow: hidden; position: relative; width:300px; height:400px;}.image_reel
{ position: absolute; top: 0; left: 0; }.image_reel img {overflow:
hidden;float: left;width:300px; height:auto;}.paging
{background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align:
right;z-index: 100; }.paging a { text-indent:-9999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGDrgaSNbzPsrVr8ORdgxeeO_n4Nhzd12_MNKvI9nsymnmb5cEcM-YuRzKDPAz3rbruZ6U3BwQY5DODUp_cDAMTJqxn_1DEZAluwEvwItl44aMJPyxPp-gqWPi2BhcyiTJ7fEFu5pEho/s1600/slider_item.png)
no-repeat center; width:10px; height:10px; display:inline-block;margin:3px;
border:none; outline:none; }.paging a.active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAZGLDF4t3L4P3GS1tZngcI9AIWFU8V1bh_NfiwCAuB1P7gKINK9J08MUabeMYvuZ35c1qfmAtAp4V9GHcAX2dF1f1O9_OjOy5IpcfrX2hVViIwMm0_IS2s-LIqY2y0s4hVGOmV3T37A/s1600/slider_item_active.png)
no-repeat center; border:none; outline:none;}.paging a:hover {font-weight:
bold; border:none; outline:none;}.crott { width:280px; display:
none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWf5Kf9FR5Bb84PSKBO0i4r7wScYYn_gYEaz-qUgKlOPqNwavrkC33jI67X8omolLfdjoM7Y302vI4f6CGUQjPApmYCcpd0ak8p4AIlF5MNkAVqWVck0d9q03bJT9xkQ8FE7A8rtAnlgkr/s1600/uj-opacity-40.png);padding:5px
10px; }.crott a{color: #fff;font: 16px Oswald }.crott p{color: #fff;font:
12px Arial;}
|
يمكنك تعديل حجم الطول والعرض باللون الأحمر بما يتناسب مع مدونتك
4- ابحث عن الكود التالى :
</head>
ولصق هذه الشفرة او هذا الكود فوقه يعني اعلاه
<script
src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging
a:first").addClass("active");
//Get size of images, how many there are, then
determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel
img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' :
imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID =
$active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition =
triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging
a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add
active class (the $active is declared in the rotateSwitch function)
$(".crott").stop(true,true).slideUp('slow');
$(".crott").eq( $('.paging
a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".image_reel").animate({
left:
-image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging
a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){
//Set timer - this will repeat itself every 3 seconds
$active =
$('.paging a.active').next();
if ( $active.length
=== 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger
the paging and slider function
}, 10000); //Timer speed in
milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging
a").click(function() {
$active = $(this);
//Activate the clicked paging
//Reset Timer
clearInterval(play);
//Stop the rotation
rotate(); //Trigger
rotation immediately
rotateSwitch(); // Resume
rotation
return false; //Prevent
browser jump to link anchor
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4P2MXTaZPhs2sQd9sxwnSNZKFrsHmZJjqcBCqg3_Ku9ruuJn4RDQXFWogVSQRGZDJUiIPsXRCXwm6Qj6buh0bch3CQ2fI_f5HeTtaTgYWWlSmv9Q4gkNSxd5pja6r3sjEFgo07jNgL-o/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 8;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] =
s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts1(json) {
j = (showRandomImg) ?
Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length)
break;
for (var k = 0; k <
entry.link.length; k++) {
if (entry.link[k].rel ==
'alternate') {
posturl =
entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++)
{
if (entry.link[k].rel ==
'replies' && entry.link[k].type == 'text/html') {
pcm =
entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry)
{
var postcontent =
entry.content.$t;}
else
if ("summary" in entry)
{
var postcontent =
entry.summary.$t;}
else var postcontent =
"";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!=""))
img[i] = d;
//cmtext = (text != 'no') ? '<i><font
color="'+acolor+'">('+pcm+' '+text+')</font></i>' :
'';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 =
["January","February","March","April","May","June","July","August","September","October","November","December"];
var day =
postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = m+ ' ' + day + ' ' + y ;
var trtd = '<div
class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'...
</p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ?
Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1 ; i++)
{
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length)
break;
for (var k = 0; k <
entry.link.length; k++) {
if (entry.link[k].rel ==
'alternate') {
posturl =
entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++)
{
if (entry.link[k].rel ==
'replies' && entry.link[k].type == 'text/html') {
pcm =
entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry)
{
var postcontent =
entry.content.$t;}
else
if ("summary" in entry)
{
var postcontent =
entry.summary.$t;}
else var postcontent =
"";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!=""))
img[i] = d;
//cmtext = (text != 'no') ? '<i><font
color="'+acolor+'">('+pcm+' '+text+')</font></i>' :
'';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 =
["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day =
postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<a
href="'+posturl+'"><img
src="'+img[i]+'"/></a>';
document.write(trtd);
j++;
}
}
//]]>
</script> |
يمكنك تعديل عدد المشاركات التى تود ان تظهر فى السلايدر باللون الأحمر
5- ابحث عن الكود التالى :
<div id='sidebar-wrapper'>
ولصق هذه الشفرة او هذا الكود فوقه يعني اعلاه
<b:if cond='data:blog.pageType ==
"item"'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script
src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script
src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
<a href='#' rel='7'/>
<a href='#' rel='8'/>
</div>
</div></b:if> |
:
.png)
