السلام عليكم ورحمة الله وبركاته
اليوم سيقدم لكم فريق عمل هوم بلوجر
" سلايد شو تلقائي إحترافي بتقنية 3D Gallery لمدونات بلوجر "
طبعاً السلايد شو إحرافي بمعنى الكلمة ، يعرض أحدث المشاركات في مدونتك .
- طريقة التركيب :
1- إدخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم : ]]></b:skin>
3- ضع الكود التالي فوقه .
/*!
* Automatic 3D Gallery by homeblog7
* http://www.homeblog7.blogspot.com/
*/
.dg-container {
width:100%;
height:450px;
position:relative;
}
.dg-wrapper {
width:481px;
height:316px;
margin:0 auto;
position:relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
}
.dg-wrapper a {
display:block;
position:absolute;
left:0;
top:0;
background:transparent url('http://lh5.googleusercontent.com/-4pQoBU5e0lg/UqUzJIM7jMI/AAAAAAAAIak/NkYdYXHow-M/s1600/browser.png') no-repeat 0 0;
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
background-size:100% 100%;
-webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
-moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
box-shadow:0 10px 20px rgba(0,0,0,.3);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.dg-wrapper a.dg-transition {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dg-wrapper a img {
display:block;
margin:0;
padding:41px 0 0 1px;
border:none;
outline:none;
}
.dg-wrapper a .dg-caption {
font:italic normal 16px/50px Georgia,"URW Bookman L",Serif;
text-align:center;
width:100%;
height:50px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.5);
color:#333;
display:none;
position:absolute;
bottom:-55px;
}
.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
width:58px;
position:absolute;
z-index:1000;
bottom:40px;
left:50%;
margin-left:-29px;
}
.dg-container .dg-nav span {
text-indent:-9000px;
float:left;
cursor:pointer;
width:24px;
height:25px;
opacity:0.8;
background:transparent url('http://lh5.googleusercontent.com/-g4AHuT29Ntw/UqUy2w8chxI/AAAAAAAAIaY/wPyJEQtryjo/s1600/arrows.png') no-repeat 0 0;
}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
background-position:100% 0;
margin-left:10px;
}
.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}
4- بعد ذلك إذهب إلى تخطيط | ثم أختر إضافة إداة : HTML/JavaScript
5- اللصق الكود التالي في صندوق الأداة .
<section id="dg-container" class="dg-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var gallery_config = {
url: 'http://www.homeblog7.blogspot.com',
numPost: 6,
labelName: null,
monthArray: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
newTabLink: false,
containerId: 'dg-container',
slider: {
itemWidth: 480,
itemHeight: 260,
prevText: '<',
nextText: '>',
current: 0,
autoplay: false,
interval: 2000
}
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>
- التعديلات :
- عدّل ماهو باللون الأحمر برابط مدونتك .
شكرا على سلايد اخي
ردحذف