Sharing2informations: BLOG-WEBSITE

30 jQuery Efek Gambar Sliders Responsive

Shring2iformations 0 BLOG-WEBSITE, OTHERS TUTORIAL 1/05/2016 03:00:00 PM

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: red;"><b>Jika Anda tertarik untuk menambahkan atas slider gambar kelas jQuery di website baru atau mapan Anda maka di sini Anda akan menemukan plugin slider yang tepat yang akan membantu Anda untuk melakukan itu dengan baik.</b></span> Cukup meskipun jQuery telah menyederhanakan cara JavaScript digunakan untuk bekerja pada browser kita masih membutuhkan slider image untuk mempercepat desain web dan pengembangan pekerjaan sehari-hari. Kita dapat memodifikasi beberapa plugin ini untuk membuat slider baru yang jauh lebih efisien untuk website Anda.<br />
<br />
Entah cara Anda hanya perlu menambahkan beberapa keterangan, gambar dan membuat catatan dari beberapa efek transisi yang datang dengan slider untuk memulai langsung. Ada dokumentasi rinci untuk plugin ini sehingga menambahkan efek transisi baru bukanlah masalah besar. Perubahan acara pemicu berdasarkan jika Anda adalah seorang programmer canggih jQuery.<br />
<br />
Tren yang berkembang terbaru seperti desain responsif benar-benar pilihan yang sangat penting sebagian dari kita melihat ke dalam sementara menerapkan plugin atau script pada HTML atau php website kami. Semua slider gambar jQuery ini Ulasan sepenuhnya responsif dan saya harus memeriksa setiap satu dari mereka sendiri. Silakan berbagi slider baru Anda telah menemukan baru-baru ini dengan kami juga. Semuanya ditemukan pada tahun 2014 telah disertakan di sini.<br />
<br />
<span style="color: red;"><b>30 jQuery Efek Gambar Sliders Responsive :</b></span><br />
<br />
<h3>
<span style="color: red;">jQuery GRIDDER</span> </h3>
<h3>
A jquery plugin to which pops or shows a slide with detailed 
description of the image on click. The idea has been taken from Google 
images preview.
</h3>
<ul>
<li>Responsive jquery image slider</li>
<li>Slidein description</li>
<li>Smooth Scrolling</li>
</ul>
<a class="all-button black-button external" href="http://www.oriongunning.com/demo/gridder/" rel="nofollow" target="_blank">
Demo</a> | <a class="all-button black-button external" href="https://github.com/oriongunning/gridder" rel="nofollow" target="_blank">
Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIQZHVhnuxBlS3-sPWDjpI1qE-GucGkIyoEmNoBvva0hRIfqK7m72JqWdeAwtvc5nPwhxg9o9EYrBq0CCUlR2iZ7eWTteq7Umx9sGLX9YIQRWMpGwgX9zBEXgk_-7TH5TV5QZs8rxWkw/s1600/gridder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIQZHVhnuxBlS3-sPWDjpI1qE-GucGkIyoEmNoBvva0hRIfqK7m72JqWdeAwtvc5nPwhxg9o9EYrBq0CCUlR2iZ7eWTteq7Umx9sGLX9YIQRWMpGwgX9zBEXgk_-7TH5TV5QZs8rxWkw/s640/gridder.jpg" width="640" /></a></div>
<br />
<br />
<h3>
</h3>
<h3>
<span style="color: red;"><div class="separator" style="clear: both; text-align: center;">
</div>
</span></h3>
<h3>
<span style="color: red;">Useful.Gallery.js: Pinboard Gallery</span></h3>
Using css3 animations and ajax loading, this plugin displays a unique
 pinboard style gallery which allows multiple options to show images, 
descriptions etc.<br />
<ul>
<li>Touch support</li>
<li>Responsive Design</li>
<li>Display Text or images or both</li>
<li>Thumbnail preview</li>
</ul>
<a class="all-button black-button external" href="http://www.woollymittens.nl/useful/default.php?url=useful-gallery#1" rel="nofollow" target="_blank">
Demo</a> | <a class="all-button black-button external" href="https://github.com/WoollyMittens/useful-gallery" rel="nofollow" target="_blank">
Download</a><br />
<img alt="Pinboard Gallery using jquery plugin" class="aligncenter size-full wp-image-8681" height="458" src="http://designscrazed.org/wp-content/uploads/2015/06/pinboard.jpg" width="455" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Expandable Image Gallery</span></h3>
A beautiful gallery plugin which expands on click to showcase a full 
page preview. A great tool to include in your eCommerce product pages.<br />
<ul>
<li>Full screen preview</li>
<li>Major Browser support</li>
<li>Responsive design</li>
<li>Fluid animation</li>
</ul>
<a class="all-button black-button external" href="http://codyhouse.co/demo/expandable-image-gallery/index.html" rel="nofollow" target="_blank">
Demo</a> | <a class="all-button black-button external" href="http://codyhouse.co/download/479" rel="nofollow" target="_blank">
Download</a><br />
<img alt="Expandable Image Gallery plugin" class="aligncenter size-full wp-image-8682" height="247" src="http://designscrazed.org/wp-content/uploads/2015/06/expandable-image-gallery.jpg" width="590" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Jssor Responsive Slider</span></h3>
Recently came across this fully functionally jquery slider and it 
does its work well. There are limitless slider opportunities which can 
be unlocked with this open source slider plugin.<br />
<ul>
<li>Responsive Slider Design</li>
<li>Over 15 Slider options</li>
<li>More than 15 image transition effects</li>
<li>Touch Support</li>
<li>Image gallery, carousel, full width support</li>
<li>Vertical , Banner rotater, listing slider.</li>
<li>Video support</li>
</ul>
<a class="all-button black-button" href="http://designscrazed.org/go/jssor-slider/">
Demo</a>| <a class="all-button black-button external" href="https://github.com/jssor/slider.js" rel="nofollow" target="_blank">
Download</a><br />
<img alt="jssor" class="aligncenter size-full wp-image-5169" height="310" src="http://designscrazed.org/wp-content/uploads/2013/12/jssor.jpg" width="583" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">PgwSlider – Responsive slider for jQuery / Zepto</span></h3>
A single purpose and minimal image slider which is made for just 
showcasing image slides and nothing more. It is minimal because the 
jquery code is around 2.5KB making it loading time to a new level.<br />
<ul>
<li>Responsive Layout</li>
<li>SEO Compliant</li>
<li>All browser support</li>
<li>Simple fade transition</li>
<li>2.5 KB zipped</li>
</ul>
<a class="all-button black-button external" href="http://pgwjs.com/pgwslider/" rel="nofollow" target="_blank">
Demo</a>| <a class="all-button black-button external" href="https://github.com/Pagawa/PgwSlider" rel="nofollow" target="_blank">
Download</a><br />
<img alt="pageslider" class="aligncenter size-full wp-image-5170" height="312" src="http://designscrazed.org/wp-content/uploads/2014/04/pageslider.jpg" width="590" /><br />
<br />
<h3>
<span style="color: red;">Jquery Vertical News Slider</span></h3>
A jquery slider which is responsive and useful for news based 
websites with slides automated on the left and images displayed on the 
right.<br />
<ul>
<li>Responsive</li>
<li>Vertical News switches</li>
<li>Perfect head</li>
</ul>
<a class="all-button black-button external" href="http://www.impressivewebs.com/demo-files/vertical-news-slider/" rel="nofollow" target="_blank">
Demo</a>| <a class="all-button black-button external" href="https://github.com/impressivewebs/vertical-news-slider" rel="nofollow" target="_blank">
Download</a><br />
<img alt="newslider" class="aligncenter size-full wp-image-5171" height="389" src="http://designscrazed.org/wp-content/uploads/2014/04/newslider.jpg" width="533" /><br />
<br />
<h3>
<span style="color: red;">Wallop Slider</span></h3>
This slider has no jquery but i like to introduce it you people since
 it is minimal in nature and best options for faster page loads. Let me 
know if you like this one.<br />
<ul>
<li>Responsive slider layout</li>
<li>Simple design</li>
<li>Slide transition</li>
<li>Minimal JavaScript code</li>
<li>3KB minified</li>
</ul>
<a class="all-button black-button external" href="http://www.pedroduarte.me/wallop-slider/" rel="nofollow" target="_blank">
Demo</a>| <a class="all-button black-button external" href="https://github.com/peduarte/wallop-slider" rel="nofollow" target="_blank">
Download</a><br />
<img alt="wallop slider" class="aligncenter size-full wp-image-5172" height="548" src="http://designscrazed.org/wp-content/uploads/2014/04/wallop-slider.jpg" width="541" /><br />
<br />
<h3>
<span style="color: red;">Flat-style Polaroid gallery</span></h3>
A scattered style gallery with responsive design and flat looks will 
interest many of us. This gallery is better suited for tablets and 
bigger displays.<br />
<ul>
<li>Responsive Slider</li>
<li>Flat Design</li>
<li>Shuffle transition</li>
<li>Full source code available</li>
</ul>
<a class="all-button black-button external" href="http://tympanus.net/Development/ScatteredPolaroidsGallery/" rel="nofollow" target="_blank">
Demo</a>| <a class="all-button black-button external" href="http://tympanus.net/codrops/2014/01/28/scattered-polaroids-gallery/" rel="nofollow" target="_blank">
Download</a><br />
<img alt="Scattered Polaroids Gallery" class="aligncenter size-full wp-image-5173" height="319" src="http://designscrazed.org/wp-content/uploads/2014/04/Scattered-Polaroids-Gallery.jpg" width="589" /><br />
<br />
<h3>
 </h3>
<h3>
<span style="color: red;">A-Slider</span></h3>
<ul>
<li> Responsive slider</li>
<li>Audio support</li>
<li>CSS3 transitions (fade)</li>
<li>Set audio on each slide</li>
<li>Slide any content, not just images</li>
<li>No dependencies except jQuery;</li>
<li>Works well with Twitter Bootstrap if required</li>
</ul>
<a class="all-button black-button external" href="http://varunnaik.github.com/A-Slider" rel="nofollow" target="_blank">
Demo</a>| <a class="all-button black-button external" href="https://github.com/varunnaik/A-Slider" rel="nofollow" target="_blank">
Download</a><br />
<img alt="a-slider" class="aligncenter size-full wp-image-5174" height="372" src="http://designscrazed.org/wp-content/uploads/2014/04/a-slider.jpg" width="489" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">HiSlider – HTML5, jQuery & WordPress Image Slider Gallery</span></h3>
Hi Slider introduced a <b>free jQuery slider </b>plugin for personal use to create fancy image sliders with fantastic image transitions.<br />
<ul>
<li>Responsive Slider</li>
<li>No Coding for you</li>
<li>Multiple Fascinating Templates & Skins</li>
<li>Awesome Transition Effects</li>
<li>Multiple Platforms</li>
<li>Publish to Website, WordPress, Joomla, Drupal</li>
<li>Multi-Media:Images, YouTube Videos & Vimeo Videos</li>
<li>Flexible Custom Options</li>
<li>Useful Action Types</li>
<li>Unlimited Output</li>
</ul>
<a class="all-button black-button external" href="http://www.hislider.com/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://www.hislider.com/download.html" rel="nofollow" target="_blank">
Download</a><br />
<img alt="jQuery Image Slider Gallery " class="aligncenter size-full wp-image-3439" height="290" src="http://designscrazed.org/wp-content/uploads/2013/12/hislider.jpg" width="589" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Wow Slider</span></h3>
WOW Slider is a responsive jQuery image slider with amazing visual 
effects 
(Domino,Page, Rotate, Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken
 Burns, Stack,Stack vertical, Basic linear, Cube and Seven) and tons of 
professionally made templates. WOW Slider is packed with a 
point-and-click wizard to create fantastic sliders in a matter of 
seconds without coding and image editing. Wordpress slider 
plugin and Joomla slider module are available also.<br />
<ul>
<li>Fully Responsive</li>
<li>All browser, all devices support</li>
<li>Touch Swipe support</li>
<li>Easy wordpress setup</li>
<li>Highly Customizable</li>
<li>SEO Ready</li>
</ul>
<a class="all-button black-button external" href="http://wowslider.com/demo.html" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://wowslider.com/index.html" rel="nofollow" target="_blank">
Download</a> <img alt="HTML jquery content sliders " class="aligncenter size-full wp-image-3422" height="215" src="http://designscrazed.org/wp-content/uploads/2013/12/wow-slider.jpg" width="590" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Nivo Slider – Free jQuery Plugin</span></h3>
<div>
The Nivo Slider is world renowned as the most beautiful and easy to 
use image slider on the market. There is literally no better way to make
 your website look totally stunning. The Nivo Slider jQuery plugin is 
free to download and released under the MIT license.<br />
<ul>
<li>Requires jQuery v1.7+</li>
<li>Beautiful Transition Effects</li>
<li>Simple and Flexible Setup</li>
<li>Small, Semantic & Responsive</li>
<li>Free to Use & Abuse</li>
<li>Powerful & Simple Slider Creation</li>
<li>Multiple Slider Types</li>
<li>Automatic Image Cropping</li>
</ul>
<a class="all-button black-button external" href="http://demo.dev7studios.com/nivo-slider/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://dev7studios.com/plugins/nivo-slider/" rel="nofollow" target="_blank">
Download</a> <img alt="nivo jquery slider" class="aligncenter size-full wp-image-3423" height="378" src="http://designscrazed.org/wp-content/uploads/2013/12/nivo-jquery-slider.jpg" width="590" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Simple multi-item jQuery slider + Tutorial</span></h3>
The idea was inspired by the Apple product slider where several 
little items fly in with a bouncing animation. We wanted to translate 
this concept to a modern-looking alternative for a minimal online store 
design where the items represent different categories. Categories as 
use-case fit quite well because of the limited nature of this type of 
slider.<br />
<ul>
<li>Responsive layout</li>
<li>Minimal Design</li>
<li>Fade and slide effects</li>
</ul>
<a class="all-button black-button external" href="http://tympanus.net/Tutorials/ItemSlider/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/" rel="nofollow" target="_blank">
Download</a> <img alt="minimal jquery slider" class="aligncenter size-full wp-image-3424" height="368" src="http://designscrazed.org/wp-content/uploads/2013/12/minimal-jquery-slider.jpg" width="590" /><br />
<h3>
<span style="color: red;">Full width jQuery image slider</span></h3>
A very simple 100% width slider that scales down to mobile. This 
slider has a 100% width layout and it is responsive. It operates with 
CSS transitions and the image is wrapped with an anchor. The anchor can 
be replaced by a division if no linking is needed. With a max-width set 
to 100%, the image will size down for smaller screens.<br />
<ul>
<li>Responsive jQuery slider</li>
<li>Full width</li>
<li>Minimal Design</li>
</ul>
<a class="all-button black-button external" href="http://tympanus.net/Blueprints/FullWidthImageSlider/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://tympanus.net/codrops/2013/02/26/full-width-image-slider/" rel="nofollow" target="_blank">
Download</a> <img alt="full slider" class="aligncenter size-full wp-image-3425" height="397" src="http://designscrazed.org/wp-content/uploads/2013/12/full-slider.jpg" width="581" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Elastic Content Slider + Tutorial</span></h3>
A fluid content slider that will adjust in width and height depending
 on the size of its parent. This Blueprint is a simple jQuery content 
slider. It has a sliding area for content and a tab-like navigation at 
the bottom. The slider is fluid, meaning that it will adjust to the 
parent’s container width and height. A couple of media queries show how 
to minimalise the look by just leaving icons for the navigation when the
 screen is very small.<br />
<ul>
<li>Responsive Design</li>
<li>Click Through</li>
</ul>
<a class="all-button black-button external" href="http://tympanus.net/Blueprints/ElasticContentSlider/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://tympanus.net/codrops/2013/02/26/elastic-content-slider/" rel="nofollow" target="_blank">
Download</a> <img alt="Responsive Content Slider" class="aligncenter size-full wp-image-3426" height="442" src="http://designscrazed.org/wp-content/uploads/2013/12/elastic-slider.jpg" width="590" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Free 3D Stack Slider</span></h3>
An experimental image slider that flips through images in 3D. Two 
stacks resemble image piles where images will be lifted off from and 
rotated to the center for viewing.<br />
<ul>
<li>Responsive Design</li>
<li>Flip Transition</li>
<li>3D Effect</li>
</ul>
<a class="all-button black-button external" href="http://tympanus.net/Development/StackSlider/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://tympanus.net/codrops/2012/12/03/stackslider-a-fun-3d-image-slider/" rel="nofollow" target="_blank">
Download</a> <img alt="flips through images in 3D" class="aligncenter size-full wp-image-3427" height="323" src="http://designscrazed.org/wp-content/uploads/2013/12/stack-slider.jpg" width="589" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Fullscreen Slit Slider with jQuery and CSS3 + Tutorial</span></h3>
A tutorial on how to create a fullscreen slideshow with a twist: the 
idea is to slice open the current slide when navigating to the next or 
previous one. Using jQuery and CSS animations we can create unique slide
 transitions for the content elements.<br />
<ul>
<li>Responsive Design</li>
<li>Split Transition</li>
<li>Full Screen slider</li>
</ul>
<a class="all-button black-button external" href="http://tympanus.net/Tutorials/FullscreenSlitSlider/index.html" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/" rel="nofollow" target="_blank">
Download</a> <img alt="Fullscreen Slit Slider with jQuery and CSS3" class="aligncenter size-full wp-image-3428" height="315" src="http://designscrazed.org/wp-content/uploads/2013/12/SlitSlider.jpg" width="580" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Unislider – The super tiny jQuery Slider</span></h3>
No fancy effects or unnecessary markup, and it’s less than 3kb. Use 
any HTML in your slides, extend with CSS. You have full 
control. Everything to do with Unslider is hosted on GitHub.<br />
<ul>
<li>Cross-browser happy</li>
<li>Keyboard support</li>
<li>Adjusts for height</li>
<li>Yep, it’s responsive</li>
<li>Touch support</li>
</ul>
<a class="all-button black-button external" href="http://unslider.com/" rel="nofollow" target="_blank">
Demo | Download</a> <img alt=" super-tiny jQuery slider" class="aligncenter size-full wp-image-3429" height="330" src="http://designscrazed.org/wp-content/uploads/2013/12/unislider.jpg" width="586" /><br />
<h3>
<span style="color: red;">Minimal Responsive Slides</span></h3>
Simple & lightweight responsive slider plugin (in 
1kb). ResponsiveSlides.js is a tiny jQuery plugin that creates a 
responsive slider using elements inside a container. ResponsiveSLides.js
 works with wide range of browsers including all IE versions from IE6 
and up.<br />
<ul>
<li>Fully responsive</li>
<li>1kb minified and gzipped</li>
<li>CSS3 transitions with JavaScript fallback</li>
<li>Simple markup using unordered list</li>
<li>Settings for transition and timeout durations</li>
<li>Multiple slideshows supported</li>
<li>Automatic and manual fade</li>
</ul>
<a class="all-button black-button" href="http://designscrazed.org/go/responsive-slides/">
Demo</a>|<a class="all-button black-button" href="http://designscrazed.org/go/get-responsive-slides/">
Download</a><br />
<img alt="responsive slides" class="aligncenter size-full wp-image-3430" height="330" src="http://designscrazed.org/wp-content/uploads/2013/12/responsive-slides.jpg" width="560" /><br />
<h3>
<span style="color: red;">Camera | a free jQuery slideshow</span></h3>
Camera a free jQuery slideshow with many effects, transitions, 
adaptive layout, easy to customize, using canvas and mobile ready.<br />
<ul>
<li>Responsive Design</li>
<li>Captions</li>
<li>Add Videos</li>
<li>33 different icon colors</li>
</ul>
<a class="all-button black-button external" href="http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/basic.htm" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://www.pixedelic.com/plugins/camera/" rel="nofollow" target="_blank">
Download</a> <img alt="free jquery slider" class="aligncenter size-full wp-image-3431" height="341" src="http://designscrazed.org/wp-content/uploads/2013/12/camera-jquery-slider.jpg" width="595" /><br />
<h3>
<span style="color: red;">SlidesJS, a responsive slideshow jQuery plug-in</span></h3>
lidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with 
features like touch and CSS3 transitions. Give it a try above and check 
out the examples to help you get started adding SlidesJS to your 
project.<br />
<ul>
<li>Responsive Design</li>
<li>CSS3 transitions</li>
<li>Touch</li>
<li>Easy setup</li>
</ul>
<a class="all-button black-button external" href="http://www.slidesjs.com/#examples" rel="nofollow" target="_blank">
Demo | Download</a> <img alt="responsive slideshow plug-in for jQuery " class="aligncenter size-full wp-image-3432" height="365" src="http://designscrazed.org/wp-content/uploads/2013/12/slidejs.jpg" width="598" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">bx Jquery Slider</span></h3>
This is a free Responsive jQuery Content Slider.<br />
<ul>
<li>Fully responsive – will adapt to any device</li>
<li>Horizontal, vertical, and fade modes</li>
<li>Slides can contain images, video, or HTML content</li>
<li>Advanced touch / swipe support built-in</li>
<li>Uses CSS transitions for slide animation (native hardware acceleration!)</li>
<li>Full callback API and public methods</li>
<li>Small file size, fully themed, simple to implement</li>
</ul>
<a class="all-button black-button" href="http://designscrazed.org/go/bxslider-examples/">
Demo</a>|<a class="all-button black-button" href="http://designscrazed.org/go/bxslider/">
Download</a><br />
<img alt="The Responsive jQuery Content Slider" class="aligncenter size-full wp-image-3434" height="178" src="http://designscrazed.org/wp-content/uploads/2013/12/bxslider.jpg" width="595" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">FlexSlider 2</span></h3>
The best responsive slider.The slider was restructured for speed, better minification, and minimizing reflows / repaints.<br />
<a class="all-button black-button" href="http://designscrazed.org/free-responsive-jquery-image-sliders/">
Demo | Download</a>
<img alt="flexslider" class="aligncenter size-full wp-image-3435" height="376" src="http://designscrazed.org/wp-content/uploads/2013/12/flexslider.jpg" width="538" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Galleria – Responsive JavaScript Image Gallery</span></h3>
Galleria has been serving top-quality image galleries to millions of 
web sites during the last years. We couldn’t be happier with all the 
positive response we received.<br />
<ul>
<li>Free without restrictions</li>
<li>Fullscreen View</li>
<li>100% Responsive</li>
<li>No programming skills required</li>
<li>iPhone, iPad & touch support</li>
<li>Flickr, Vimeo, YouTube and more</li>
<li>One core, multiple themes</li>
</ul>
<a class="all-button black-button external" href="http://galleria.io/" rel="nofollow" target="_blank">
Demo | Download</a>
<img alt="JavaScript image gallery framework slider" class="aligncenter size-full wp-image-3436" height="305" src="http://designscrazed.org/wp-content/uploads/2013/12/galleria.jpg" width="598" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Blueberry – A simple, fluid, responsive jQuery image slider</span></h3>
Introducing a jQuery image slider written specifically for responsive
 web design. Blueberry is an experimental opensource jQuery image slider
 plugin which has been written specifically to work with 
fluid/responsive web layouts.<br />
<ul>
<li>Minimal Design</li>
<li>Responsive Layout</li>
<li>Fade Slide</li>
</ul>
<a class="all-button black-button external" href="http://marktyrrell.com/labs/blueberry/" rel="nofollow" target="_blank">
Demo | Download</a>
<img alt="free jQuery image slider plugin" class="aligncenter size-full wp-image-3437" height="308" src="http://designscrazed.org/wp-content/uploads/2013/12/blueberry-js-slider.jpg" width="554" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">jQuery popeye 2.1</span></h3>
An inline lightbox alternative with slideshow.The first popeye-box 
uses the standard options: it floats to the left and opens to the right,
 its navigation and caption show on mouseover.<br />
<ul>
<li>Responsive Design ? Its a tiny slider</li>
<li>Visible enough</li>
<li>Caption Support</li>
<li>Slideshow</li>
</ul>
<a class="all-button black-button external" href="http://dev.herr-schuessler.de/jquery/popeye/demo.html" rel="nofollow" target="_blank">
Demo | Download</a>
<img alt="popeye-box" class="aligncenter size-full wp-image-3438" height="277" src="http://designscrazed.org/wp-content/uploads/2013/12/popeye.jpg" width="570" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">FractionSlider: Free jQuery parallax Slider Plugin</span></h3>
Check out this awesome jQuery parallax slider plugin. Animate 
multiple element per slide with full control in every aspect of time and
 animation. FractionSlider is a jQuery plugin for image/text-sliders. It
 allows you to animate multiple elements per slide. You can set 
different animation methods like fade or transitions from a certain 
direction.<br />
<ul>
<li>Slide animations & responsive</li>
<li>Object animations</li>
<li>Steps</li>
<li>Background animations</li>
</ul>
<a class="all-button black-button external" href="http://jacksbox.de/fractiondemos/example_slides.html" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://jacksbox.de/stuff/jquery-fractionslider/" rel="nofollow" target="_blank">
Download</a><br />
<img alt="FractionSlider" class="aligncenter size-full wp-image-3440" height="355" src="http://designscrazed.org/wp-content/uploads/2013/12/fraction.jpg" width="591" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Free Responsive Image Slider + Tutorial</span></h3>
Today we will code a responsive image slider from the Impressionist 
UI. We will code it using the FlexSlider plugin for the functionality 
and style it using CSS3. I hope you will enjoy it and find it useful for
 your projects. Lets get started!<br />
<ul>
<li>Responsive Image Slider</li>
<li>Fade Effect</li>
<li>Left, right arrows</li>
<li>Green buttons</li>
</ul>
<a class="all-button black-button external" href="http://designmodo.com/demo/responsiveslider/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://designmodo.com/responsive-slider/" rel="nofollow" target="_blank">
Download</a><br />
<img alt="Responsive Image Slider in jQuery and CSS3" class="aligncenter size-full wp-image-3441" height="375" src="http://designscrazed.org/wp-content/uploads/2013/12/responsive-jquery.jpg" width="567" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Sequence – Free Responsive Slider with Advanced CSS3 Transitions</span></h3>
Comes with four cool themes but only modern slide is responsive as 
apple style and horizontal parallax slides are not fluid here.<br />
<ul>
<li>Three Great free Themes</li>
<li>Sliding Horizontal Parallax</li>
<li>Apple Style</li>
<li>Minimalist Modern Slide (Responsive slider skin)</li>
<li>Touch Support</li>
<li>Easily Modified</li>
<li>Cross Browser</li>
</ul>
<a class="all-button black-button external" href="http://www.sequencejs.com/themes/modern-slide-in/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://www.sequencejs.com/download/" rel="nofollow" target="_blank">
Download</a><br />
<img alt="Responsive minimal slider" class="aligncenter size-full wp-image-3442" height="526" src="http://designscrazed.org/wp-content/uploads/2013/12/Sequence.jpg" width="569" /><br />
<h3>
 </h3>
<h3>
<span style="color: red;">Swipe – Free responsive accurate touch slider</span></h3>
<ul>
<li>Responsive</li>
<li>Resistant Bounds</li>
<li>Scroll Prevention</li>
<li>Library Agnostic</li>
<li>IE7+ Compatible</li>
</ul>
<a class="all-button black-button external" href="http://swipejs.com/" rel="nofollow" target="_blank">
Demo</a>|<a class="all-button black-button external" href="http://github.com/bradbirdsall/Swipe" rel="nofollow" target="_blank">
Download</a><br />
<img alt="most accurate touch slider" class="aligncenter size-full wp-image-3443" height="423" src="http://designscrazed.org/wp-content/uploads/2013/12/swipe.jpg" width="646" /><br />
<br /></div>
<br /></div>

30 jQuery Efek Gambar Sliders Responsive

Jika Anda tertarik untuk menambahkan atas slider gambar kelas jQuery di website baru atau mapan Anda maka di sini Anda akan menemukan plugi...

Baca selengkapnya »

Cara Membuat Sitemap Seo Friendly Otomatis di Blogger

Shring2iformations 0 BLOG-WEBSITE, OTHERS TUTORIAL 1/05/2016 05:21:00 AM

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: red;"><b>Pembahasan pada artikel kali ini adalah mengenai Sitemap, sitemap atau yang biasa disebut daftar isi sangatlah penting untuk blog. </b></span>Sebelum membuat sitemap alangkah baiknya anda mengetahui lebih dalam pengertian Sitemap.<br />
<br />
<span style="color: red;"><b>Apa Itu Sitemap?</b></span><br />
Sitemap adalah daftar isi pada suatu blog, seperti halnya sebuah buku, blog juga memiliki daftar isi. Semua artikel yang pernah anda tulis akan muncul di Sitemap yang anda buat.<br />
<span style="color: red;"><b><br />Apa Fungsi Sitemap?</b></span><br />
Tidak berbeda dengan daftar isi, fungsi Sitemap adalah untuk memudahkan pengunjung mencari artikel yang mereka perlukan di blog kita. <br />
<br />
Cara membuat sitemap otomatis di blogger itu mudah. Salah satu keterbatasan blog adalah kurangnya ruang indeks atau sitemap (daftar isi) yang tidak dimiliki oleh situs untuk mempermudah para pembacanya mencari semua artikel yang mereka butuhkan.<br />
<br />
Sementara Arsip, Label, Random post dan Recent post hanya memberi artikel yang tidak semuanya bisa langsung di tampilkan blog, sehingga mereka kesulitan untuk menemukan artikel yang mereka sukai.<br />
<br />
Nah pada kesempatan kali ini buatblog.net ingin berbagi tentang bagaimana cara membuat sitemap otomatis di blogger 100% SEO friendly yang dapat menampilkan semua artikel yang di pisahkan dengan Label yang telah Anda publiskan.<br />
<br />
Sitemap ini juga akan menampilkan tanda "New" yang terdapat pada artikel baru Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyC7RzWahyphenhypheng3jFRNa0zUmdlx13c4YbyKJC82i8eOkjDW931LF1hXrqW5VIhVzjjcbXrQLfX3m5RSxUAab8EiJrPqzC5UhyphenhyphenqF2beKPNnGTc6Mg-3PdcouJQCyj4l9QZRGXeKOEXNzUyHo/s1600/cara-membuat-sitemap-otomatis-di-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="464" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyC7RzWahyphenhypheng3jFRNa0zUmdlx13c4YbyKJC82i8eOkjDW931LF1hXrqW5VIhVzjjcbXrQLfX3m5RSxUAab8EiJrPqzC5UhyphenhyphenqF2beKPNnGTc6Mg-3PdcouJQCyj4l9QZRGXeKOEXNzUyHo/s640/cara-membuat-sitemap-otomatis-di-blogger.png" width="640" /></a></div>
<br />
Gambar di atas contoh sitemapnya. <br />
<br />
<br />
<span style="color: red;"><b>Cara Membuat/Menambahkan Sitemap di Halaman Blogger</b></span><br />
<br />
Untuk dapat membuat sitemap di blogger Anda, silahkan ikuti tutorial berikut ini:<br />
<br />
Langkah Pertama: <span style="color: blue;"><b>Silahkan Login ke Dashboard Blogger dan pilih blog Anda.</b></span><br />
<br />
<span style="color: blue;"><b>Langkah ke Dua: Pilih Pages >> New Page dan akan tampil halaman kosong.</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNsOG2ix85ghjOIudqpvO9hiUmw8cNdThJj6AUARzPfba439M4WJqzI3KmaUx2jD_x-2a8qUTPKhJkhLMyQ393Q5prBjd8qhAEU4byH502bhctDLqS-6PdC501ZlK0cjh3825gyNla1c4/s1600/pilih-pages-lalu-pilih-new-page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNsOG2ix85ghjOIudqpvO9hiUmw8cNdThJj6AUARzPfba439M4WJqzI3KmaUx2jD_x-2a8qUTPKhJkhLMyQ393Q5prBjd8qhAEU4byH502bhctDLqS-6PdC501ZlK0cjh3825gyNla1c4/s640/pilih-pages-lalu-pilih-new-page.png" width="640" /></a></div>
<br />
<span style="color: blue;"><b> Langkah ke Tiga: Pada halaman kosong, pilih mode HTML lalu copy paste kode di bawah ini dan jangan lupa beri judul sitemap/daftar isi.</b></span><br />
<br />
<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript"></script><br />
<script 0="" 255="" color:="" rgb="" src="<span style="><b>http://www.sharing2informations.com</b></span>/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script><br />
<br />
<span style="color: blue;"><b>Silahkan Anda ganti Url</b></span> <span style="color: magenta;"><b>http://www.sharing2informations.com</b></span> <span style="color: blue;"><b>menjadi situs Anda.</b></span><br />
<br />
<span style="color: blue;"><b>Langkah ke Empat: Jika Anda tak ingin sitemap Anda di komentari, silahkan klik pada options di sisi kanan dan pilih don't allow,hide existing compose mode.</b></span><br />
<br />
<span style="color: blue;"><b>Langkah ke Lima: Klik publiskan</b></span><br />
<br />
<span style="color: blue;"><b>Langkah Ke Enam : Lihat Tampilan Sitemap yang telah anda Publish/bagikan tadi, kemudian Copy Url nya </b></span><br />
<br />
<span style="color: blue;"><b>Langkah ke Tujuh : Buka pengaturan Template, lalu edit HTML, kemudian pastekan Url site map anda di HTML template anda pada subdir/child menu nav seperti gambar berikut : </b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGcGomi8svoVKxyzNlvuQex-EtDGywG65HcothLI5RN2VM4U2cU6GPRGkSKQn63YMZZqRnun9WXWsc3UJDIxcDQhFc2hkVbrmSWi1XVnl471Xb4rp6IRubckQWT00-wzr30j5XbNVGHM/s1600/Blogger-+Sharing2informations+-+2016-01-05+05-27-29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGcGomi8svoVKxyzNlvuQex-EtDGywG65HcothLI5RN2VM4U2cU6GPRGkSKQn63YMZZqRnun9WXWsc3UJDIxcDQhFc2hkVbrmSWi1XVnl471Xb4rp6IRubckQWT00-wzr30j5XbNVGHM/s640/Blogger-+Sharing2informations+-+2016-01-05+05-27-29.png" width="640" /></a></div>
<span style="color: blue;"><b>Selesai sudah sitemap Anda sudah jadi dan tinggal Anda menampilkan sitemap Anda di menu, seperti milik saya di atas.</b></span></div>

Cara Membuat Sitemap Seo Friendly Otomatis di Blogger

Pembahasan pada artikel kali ini adalah mengenai Sitemap, sitemap atau yang biasa disebut daftar isi sangatlah penting untuk blog. Sebelum ...

Baca selengkapnya »

Cara Membuat Wadah Iklan 4 Banner 125x125 Di Blog/website

Unknown 0 BLOG-WEBSITE, OTHERS TUTORIAL 11/01/2015 03:50:00 PM

<div dir="ltr" style="text-align: left;" trbidi="on">
Wadah iklan banner 125x125 banyak sekali fungsinya dan kelebihannya bagi
 kalian yang mendesain blog untuk mencari receh dari internet. Tampilan 
yang biasa di gunakan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="629" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdI1ZTXOzPNX-U9wozXnoTBPrjkdouee4VGB4nPOx5a1BdEB5MKoOk9X3rH9NSX3FWg2EKczjWnfHY2BBPV_0RDJSuN8FWHHbqwh_t5BMaU_rOEmV2X9NY-r2Z_HOUo0U0Rvr2MUHtRre/s640/iklan+125x125+-+cerita+dewasa.png" width="640" /></div>
<h3>
Cara Membuat Wadah Iklan Banner 125x125 :</h3>
1. Masukan Kode CSS berikut, Tepatnya diatas <b>]]></b:skin></b><br />
<br />
<blockquote class="tr_bq">
#ilhamads {margin:0px;padding:0px;text-align:center}<br />
#ilhamads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 
5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 
2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px 
#ccc;}<br />
#ilhamaads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}</blockquote>
<br />
Save, dan kemudian.....<br />
<br />
2. Masukan Pada <b>add Gatged</b> >><b> HTML/JavaScript</b> kode dibawah ini :<br />
<br />
<blockquote class="tr_bq">
<div id="ilhamads"><br />
<a href="<span style="color: #3d85c6;">http://obachti-95.blogspot.com/2012/06/contact-me.html</span>" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmRzQGqKnWv_26yigHWp7yXCnCHHFxdSZDPqMkpieD1kGyI-Bf1f_XzzzR7yklsb4smDY2k9BN85AFMB_xTwyCR2Z_7sP3VpC09Xy38BdZwXvev1AM1WS4GaSo1FjhYlLel9tadxGSkbm/s128/95%20Ads.jpg</span>" /></a><br />
<a href="<span style="color: #3d85c6;">http://obachti-95.blogspot.com/2012/06/contact-me.html</span>" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmRzQGqKnWv_26yigHWp7yXCnCHHFxdSZDPqMkpieD1kGyI-Bf1f_XzzzR7yklsb4smDY2k9BN85AFMB_xTwyCR2Z_7sP3VpC09Xy38BdZwXvev1AM1WS4GaSo1FjhYlLel9tadxGSkbm/s128/95%20Ads.jpg</span>" /></a><br />
<a href="<span style="color: #3d85c6;">http://obachti-95.blogspot.com/2012/06/contact-me.html</span>" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmRzQGqKnWv_26yigHWp7yXCnCHHFxdSZDPqMkpieD1kGyI-Bf1f_XzzzR7yklsb4smDY2k9BN85AFMB_xTwyCR2Z_7sP3VpC09Xy38BdZwXvev1AM1WS4GaSo1FjhYlLel9tadxGSkbm/s128/95%20Ads.jpg</span>" /></a><br />
<a href="<span style="color: #3d85c6;">http://obachti-95.blogspot.com/2012/06/contact-me.html</span>" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmRzQGqKnWv_26yigHWp7yXCnCHHFxdSZDPqMkpieD1kGyI-Bf1f_XzzzR7yklsb4smDY2k9BN85AFMB_xTwyCR2Z_7sP3VpC09Xy38BdZwXvev1AM1WS4GaSo1FjhYlLel9tadxGSkbm/s128/95%20Ads.jpg</span>" /></a><br />
</div></blockquote>
<br />
<h3>
Keterangan:</h3>
<ul>
<li>Kode warna merah adalah Link untuk gambar. bisa kamu ganti jika kurang bagus menurut kamu.</li>
<li>Kode yang berwarna biru adalah Link gambar. Kemmana nantinya gambar 
tersebut akan tertuju saat ada yang mengklik. Jika kamu belum punya 
iklan sebaiknya Arahkan pada link dimana seorang bisa menghubungi kamu.</li>
<li>Kode diatas hanya untuk menampilkan 4 banner 125x125. Jika 4 gambar 
kamu rasa kurang, bisa tambahkan sendiri scripnya. Yaitu, dengan 
menambahkan script berikut diatas kode <b></div></b></li>
</ul>
<br />
<blockquote class="tr_bq">
<a href="<span style="color: #3d85c6;">http://obachti-95.blogspot.com/2012/06/contact-me.html</span>" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmRzQGqKnWv_26yigHWp7yXCnCHHFxdSZDPqMkpieD1kGyI-Bf1f_XzzzR7yklsb4smDY2k9BN85AFMB_xTwyCR2Z_7sP3VpC09Xy38BdZwXvev1AM1WS4GaSo1FjhYlLel9tadxGSkbm/s128/95%20Ads.jpg</span>" /></a> </blockquote>
<br />
<div class="catatan">
Script diatas menyediakan 1 ruang gambar, sebaiknya tambahkan dengan dengan jumlah genap agar tampilan lebih rapi.</div>
</div>

Cara Membuat Wadah Iklan 4 Banner 125x125 Di Blog/website

Wadah iklan banner 125x125 banyak sekali fungsinya dan kelebihannya bagi kalian yang mendesain blog untuk mencari receh dari internet. Tam...

Baca selengkapnya »

Top Menu

Menu

30 jQuery Efek Gambar Sliders Responsive

Cara Membuat Sitemap Seo Friendly Otomatis di Blogger

Cara Membuat Wadah Iklan 4 Banner 125x125 Di Blog/website

[BIG SLIDE][slider2][random][100]

[NEWS][combine][animated][100]

[SHARING2INFORMATIONS][horizontal][animated][50]

[MARI BERBAGI ILMU & PENGETAHUAN][RECENT][animated][100]

Tags

Archive

Popular