Translate

▼ categorias

Newsletter/Seguir por e-mail/ ▼ receba arqblog... grátis em seu email:

saiba como instalar slider para o Blogger

Kwicks Slider for Blogger

Kwicks Slider
Trước giờ chưa viết bài nào về jQuery Slider và cũng có một số bạn hỏi cách làm một Slider ở trang chủ nên trong bài này Noct sẽ giới thiệu một Slider khá ấn tượng, đó là Kwicks Slider.

Loại Slider này thường thấy ở Wordpress, nhưng có thể đây là lần đầu tiên bạn thấy nó trên Blogger. Nội dung trên Slider thường là các bài đăng mà bạn tâm đắc, như vậy sẽ thu hút thêm 1 lượng traffic cho blog của bạn và góp phần xây dựng Sitelinks theo ý muốn.


 
 
Như thường lệ, chèn đoạn CSS sau phía trên </b:skin>

#slider{height:300px;margin:auto;padding:20px 0;width:900px;position:relative}
#slider h2{display:none}
.kwicks_container{width:900px;margin:0 auto}
#top .kwicks{list-style:none;position:relative;margin:0;padding:0;width:900px;height:300px;z-index:2}
#top .kwicks li{display:block}
.kwicks li{display:block;float:left;overflow:hidden;padding:0;cursor:pointer;width:180px;height:300px;z-index:2}
.kwicks li a{outline:none;display:block;z-index:100;cursor:pointer;text-decoration:none;color:#FFF}
li#kwick{-moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333}
.kwicks a:hover,.kwicks #active{color:#f1f1f1}
.slider{background:#222;filter:alpha(opacity=80);opacity:0.8;-moz-opacity:0.8}
.slider{width:570px;position:absolute;display:block;bottom:0;left:0;z-index:2;padding:5px 15px;font-size:12px;line-height:1em;cursor:pointer}
.sliderheading{display:block;font-size:15px;margin:10px 0}

Lưu lại, tiếp tục tìm đến đoạn sau:

<div id='content-wrapper'>

 
Chèn phía trên nó:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://noctland.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://noctland.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML90' locked='true' title='Slider' type='HTML'/>
</b:section>
</b:if>

Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới trên blog của bạn, hãy quay lại Phần tử trang và tiếp tục chèn vào tiện ích này đoạn sau:

<div class="kwicks_container">
<ul class="kwicks">

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 1</span></span>
<img width="600" height="300" src="https://lh6.googleusercontent.com/-V6TdXvxi-1g/TeCSSwaS9vI/AAAAAAAAAzs/wmwS6qCWjqA/1.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 2</span></span>
<img width="600" height="300" src="https://lh5.googleusercontent.com/-gGcmlMvrrsI/TeCSTRabN6I/AAAAAAAAAzw/HyAPyENI2W0/2.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 3</span></span>
<img width="600" height="300" src="https://lh3.googleusercontent.com/-QqxebYnx5O8/TeCSTfxVLSI/AAAAAAAAAz0/l7TQmx7Co5w/3.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 4</span></span>
<img width="600" height="300" src="https://lh4.googleusercontent.com/-3E16LON7nOg/TeCSTtY5CKI/AAAAAAAAAz4/_tvs2kkVpUs/4.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 5</span></span>
<img width="600" height="300" src="https://lh6.googleusercontent.com/-Z-bjOVeHCjs/TeCST2yCAnI/AAAAAAAAAz8/smT343ed0EA/5.jpg"/></a></li>

</ul></div>

Các dòng tô màu bạn có thể sửa lại cho phù hợp, kích thước ảnh theo mặc định là 600x300. Hy vọng bạn sẽ thích Slider này. 
 

fonte:


traduzido:

Kwicks Slider para o Blogger



Kwicks Slider
Antes, não escrever sobre jQuery Slider e também algumas de vocês perguntaram como fazer um controle deslizante na página inicial assim neste NOCT irá introduzir umSlider é bastante impressionante, é Slider kwicks .

Tipo Slider é comumente encontrada em Wordpress , mas esta poderia ser a primeira vez que vi na Blogger.O conteúdo do Slider é geralmente os lugares que você concordo plenamente, por isso vai atrair um tráfego de qualidade para o seu blog e contribuir para a construção Sitelinks
 vontade. Como de costume, insira o CSS acima </ b : skin>deslizante # {height: 300px; margin: auto; padding: 20px 0; width: 900px; position: relative}# deslizante h2 {display: none}kwicks_container {width: 900px; margin: 0 auto}.# top. kwicks {list-style: none; position: relative; margin: 0; padding: 0; width: 900px; height: 300px; z-index: 2}# top kwicks li {display: block}.kwicks.li0 10px # 333;-webkit-box-shadow: 10px 0 0 # 333; box-shadow: 10px 0 0 # 333}.. kwicks a: hover, kwicks0}Guardar, continue com o seguinte:<div id='content-wrapper'>Inserir acima dela:<b:if cond='data:blog.url == data:blog.homepageUrl'>script < src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type = "text / javascript '/>http://noctland.googlecode <script src = ' texto .com/files/jquery.easing.1.3.js 'type =' / javascript '/>tipo <script src = 'http://noctland.googlecode.com/files/jquery.kwicks-1.5.1.js' 'text / javascript "= /><b:section id='slider' maxwidgets='1' showaddelement='no'><b: widget id = 'HTML90 "fechado title =' true 'type =' Slider '=' HTML '/></ b: section></ b: if>O código acima irá adicionar um HTML / Javascript para o
 
seu novo blog, volte para o elemento superior e continuar 
 
inserir este adicionar o seguinte parágrafo:<div class="kwicks_container"><ul class="kwicks"><li id="kwick"><a href = "URL"><span class="slider"><span class="sliderheading">Título Mensagem 1</ span> </ span><img width = "600" height = "300"id = "kwick"><a href = "URL"><span class="slider"><span class="sliderheading">Mensagem Título 2</ span> </ span><img width = "600" height = "300"id = "kwick"><a href = "URL"><span class="slider"><span class="sliderheading">Mensagem Título 3</ span> </ span><img width = "600" height = "300"id = "kwick"><a href = "URL"><span class="slider"><span class="sliderheading">Mensagem Título 4</ span> </ span><img width = "600" height = "300"id = "kwick"><a href = "URL"><span class="slider"><span class="sliderheading">Mensagem Título 5</ span> </ span><img width = "600" height = "300"pintura de linha você pode editar em conformidade, o tamanho da imagem padrão é600x300 . Espero que tenham gostado Slider isso. 
























































2 comentários:

  1. Oi, minha querida amiga Edilene!!!
    Outra bela dica minha amiga, sempre dividindo seu conhecimentos com todos, maravilha!!! Quem divide, acaba multiplicando!!!
    Tenha uma semana maravilhosa e abençoada!!!
    Cheia de muita luz!!!
    Beijos e muita paz!!!

    ResponderExcluir
  2. Saudações!
    Amiga EDLINE:
    Maravilha o seu Post!
    E o melhor, com direito a tradução, só não instalará tão importante ferramenta quem não desejar.
    Valeu a pena conferir!
    Parabéns por mais um excelente Post!
    Abraços,
    LISON.

    ResponderExcluir

Mensagem do formulário de comentário:

http://www.quora.com/Edilene-Brand%C3%A3o-da-Silva/Postshttp://instagram.com/edilenebrandaodasilva LinkedInTwitter Facebookstumbleupon Google Plus RSS Feed Email KDVChttp://newsle.com/edilenebrandosilvaPageRank

top blog's




add