سلايد شو جديد وأنيق بتقنية جى كويرى لمدونات بلوجر

الرئيسية تطوير بلوجر كل سلايد شو جديد وأنيق بتقنية جى كويرى لمدونات بلوجر

تطوير بلوجركل

سلايد شو جديد وأنيق بتقنية جى كويرى لمدونات بلوجر

محمد عبد الوهاب 0

A+ A-

facebook twitter

بسم الله الرحمن الرحيم

والصلاة والسلام على المبعوث رحمة للعالمين وعلى آله وصحبه الطيبين الطاهرين أما بعد : -

اليوم سوف أعرض لكم سلايد شو ولا أروع جميل جداً و أنيق ويعمل بتقنية جى كويرى 

وهذه صورة الإضافة

و الآن نأتى لأكواد وضع السلايد شو ركز معى جيداً

1- نذهب إلى قالب المدونة ونضغط على علامة التوسيع

2- بواسطة Ctrl+f نقوم بالبحث عن الوسم التالى

]]></b:skin>

بعد ذلك نقوم بلصق الكود التالى أعلاه مباشرة

url(#featured{

width:336px;

padding-right:250px;

position:relative;

height:250px;

background:#fff;

border:5px solid #ccc;

}

#featured ul.ui-tabs-nav{

position:absolute;

top:0; left:336px;

list-style:none;

padding:0; margin:0;

width:250px;

}

#featured ul.ui-tabs-nav li{

padding:1px 0; padding-left:13px;

font-size:12px;

color:#666;

}

#featured ul.ui-tabs-nav li span{

font-size:11px; font-family:Verdana;

line-height:18px;

}

#featured .ui-tabs-panel{

width:336px; height:250px;

background:#999; position:relative;

overflow:hidden;

}

#featured .ui-tabs-hide{

display:none;

}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/

display:block;

height:60px;

color:#333;  background:#fff;

line-height:20px;

outline:none;

}

#featured li.ui-tabs-nav-item a:hover{

background:#f2f2f2;

}

#featured li.ui-tabs-selected{ /*Selected tab style*/

background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzEJlREuJB498NXxTHjerbg6eGigJRh4abPsqzC76RTh0VM_rsKSk7yLxkWrRufRdeCPDfoB5fmmES5QPOSnDKoV8uTpo7wEfTWuKT2IK9Kbd5DsTTir7trKCfWSbpGtPuXBEsUtBV1Y/s1600/selected-item.gif’) top left no-repeat;

}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{

background:#ccc;

}

#featured ul.ui-tabs-nav li img{

float:left; margin:2px 5px;

background:#fff;

padding:2px;

border:1px solid #eee;

}

#featured .ui-tabs-panel .info{

position:absolute;

top:180px; left:0;

height:70px; width: 400px;

background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfggcVkzLQ-8AWkn9UBoVvyeUJZQ56xk6NVu3Hdhyphenhyphen4kTzm-2MDrgucIKaYg3Mg3MnsWdAkFe4e7IyK7FY7xbZFrc5kuF6PFuR80PepYWfO90sDvV_oosWwDPSQ2j5DCUvAAiI7DJdZ30/s1600/transparent-bg.png’);

}

#featured .info h2{

font-size:18px; font-family:Georgia, serif;

color:#fff; padding:5px; margin:0;

overflow:hidden;

}

#featured .info p{

margin:0 5px;

font-family:Verdana; font-size:11px;

line-height:15px; color:#f0f0f0;

}

#featured .info a{

text-decoration:none;

color:#fff;

}

#featured .info a:hover{

text-decoration:underline;

}

.ui-tabs-nav-item img {

width:45px;

height:45px;

}

3-نقوم بالبحث عن الوسم التالى

</head>

ثم نقوم بلصق الكود التالى أعلاه مباشرة

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>

<script src=’http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>

$(document).ready(function(){

$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);

});

</script>

4- بعد حفظ القالب نتوجه إلى صفحة التخطيط 

<div id=”featured”>

<ul>

<li>

<a href=”#fragment-1″>

<img alt=”" src=”http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/

AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg” />

<span>15+ Excellent High Speed</span></a></li>

<li>

<a href=”#fragment-2″>

<img alt=”" src=”http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI

/AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg” />

<span>20 Beautiful Long Exposure</span></a></li>

<li>

<a href=”#fragment-3″><img alt=”" src=”http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/

AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg” /><span>35 Amazing Logo Designs</span></a></li>

<li id=”nav-fragment-4″>

<a href=”#fragment-4″>

<img alt=”" src=”http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/

AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg” />

<span>Create a Vintage</span></a></li>

</ul>

<!– First Content –>

<div id=”fragment-1″ style=”">

<img alt=”" src=”http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/

AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg” />

<div>

<h2><a href=”#fragment-1″>15+ Excellent High Speed</a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam….<a href=”#”>Read more</a></p>

</div>

</div>

<!– Second Content –>

<div id=”fragment-2″ style=”">

<img alt=”" src=”http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI/

AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg” />

<div>

<h2><a href=”#fragment-2″>20 Beautiful Long Exposure</a></h2>

<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit….<a href=”#”>Read more</a></p>

</div>

</div>

<!– Third Content –>

<div id=”fragment-3″ style=”">

<img alt=”" src=”http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/

AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg” />

<div>

<h2><a href=”#fragment-3″>35 Amazing Logo Designs</a></h2>

<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare….<a href=”#”>Read more</a></p>

</div>

</div>

<!– Fourth Content –>

<div id=”fragment-4″ style=”">

<img alt=”" src=”http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/

AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg” />

<div>

<h2><a href=”#fragment-4″>Create a Vintage</a></h2>

<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales….<a href=”#”>Read more</a></p>

</div></div></div>

5- نقوم بإختيار عنصر / آداة html ونلصق بداخلها الكود التالى

عدل الكود بما يناسب مدونتك 

ثم احفظ العنصر ومبروك عليك الإضافة

السلام عليكم 

الوسوم: تطوير بلوجر كل