Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts
Monday, June 26, 2017
Customize Blogger Blogspot Background With Your Own Images
Customize Blogger Blogspot Background With Your Own Images
Village City - Island Sim Latest v1.5.0 Apk + Mod Apk (Unlimited Money) is a Simulation Game. Download Lastest version of Village City - Island Sim for Android From AllApkApps
Apk Name: Village City - Island Sim
Version: 1.5.0
Requirements: 4.0 and up
Updated: November 24, 2016
File Size: ...
Click Here to Download Village City - Island Sim v1.5.0 Apk + Mod (Unlimited Money)
Available link for download
Friday, May 19, 2017
Creating Image Sexy Lightbox for Blogger
Creating Image Sexy Lightbox for Blogger
Perhaps if you have thought, if an article that consist with a lots of pictures, certainly make your blog take a long time for loading relatively by user. If all images shown with full-size, certainly you can think of what happened. Creating Image Lightbox is a solution of the problem, but existing lightbox on the default blog gives the impression that is less attractive to the user to view an image in full size. Therefore, we will make a lightbox that gives the impression that more interesting is what I call Image Sexy Lightbox.
You can try to click the image above, thats the image effect that I call image sexy lightbox. To create a image sexy lightbox, you need css and js scripts. By adjusting that scripts you can make similar effect like the image above. Here I will show you how to implement image sexy lightbox into your blog article.
1. Inserting js and css scripts of image sexy lightbox, where the script will be loaded when the user click on the thumbnail image (small size image) that contained in the blog article, then display it in a certain size and can be enlarged according with full resolution of the image.
js and css external link script code to make effect image sexy lightbox
<link href=http://project-marsawa.googlecode.com/svn/trunk/lightboxv1.css rel=stylesheet type=text/css/> <link href=http://project-marsawa.googlecode.com/svn/trunk/lightboxie6v1.css rel=stylesheet type=text/css/> <script src=http://project-marsawa.googlecode.com/svn/trunk/jquery.lightbox.js type=text/javascript/> <script src=http://project-marsawa.googlecode.com/svn/trunk/imagenvideo.js type=text/javascript/>
On the dashboard blog, click on template and click edit html. Insert the scripts above must be put on the head part of html template. On the head part of html template there are much scripts css at the part that called skin and style of html template and any js (javascript) script at the last of head part. Put the scripts code above at the bottom of the style, above of js script. Usually the template blog have use “jquery.min.js”, you can press Ctrl+F inside html template, and just type “min.js” for more clearly lets take a look the picture below!
The Script code that I will be added has any link into the script code that i put on google code project as my own. The Advantage of placing the script code on google code, Ive discussed at another article. Here I suggest you to move the scripts code of google code project as your own. For more details lets see the video. After you move js and css script code as your own google code, changes the link as marked by green color with the link of your project script code. If you want to be fast, just put these scripts above without changing at the bottom of "jquery.min.js" script on html template.
2. Add the new style of image tag so that image sexy lightbox can be displayed on the image that you want. Go to to post articles and choose the image that you want to be added image sexy lightbox effect, surely you must edit on the html code of the article.
In the image tag there is code like this : imageanchor="1"
Add the new class lightbox to the image tag : title="Image Description" class="lightbox"
So the tag image style to be : title="Image Description" class="lightbox" imageanchor="1"
Add the new class lightbox to the image tag : title="Image Description" class="lightbox"
So the tag image style to be : title="Image Description" class="lightbox" imageanchor="1"
Do this right on each images that you will be given the effect of image sexy lightbox. To be more efficient in the process, if you have many images that you want to give the effect, just copy all of the html code of your article and then take it into notpad++, there is any automatic conversion tool to add a new style of image tag on every images that you wish. Or maybe you have another way is up to you.
3. Look at the picture above! disactivate the default lighbox that blogger have. Go to the dashboard of your blog, click on settings and choose Posts and comments. At Showcase images with Lightbox select No. This is because you dont need a default lightbox by blogger any more. For more details lets see the article video! Good Luck!
Available link for download
Sunday, February 26, 2017
Create Album with Image Slider on Blogger
Create Album with Image Slider on Blogger
Ok, for those of you blogger fans, on this time I will give you my notes on the applying of jquery cycle and easing to make an Album Image Slider on your blog. Image slider that I have made using with scroll horizontal for the images. Album Image slider it looks good we apply to the content post on your blog that much images or image gallery. You can combine it with the image sexy lightbox evolution to the images that will scroll horizontally. I have been applied on the post that titled as The Soul of Balinese Carvings at the last pictures!
In order to make an Album using Image Slider we are going to add any two links of jquery and define jquery function slider using class or id css that related with the images list that will given the image slider effect. The Album of image slider actually just display the image from images list that that will display horizontal scroll animation one by one. Ok we shall practice in the content that uses gallery images. If you are not sure or not confidence to apply something new on the template script, backup your template code at first.
1. Go to your blogger dashboard, click on Template>Edit HTML. On the script code of your template, your template must be used jquery.min.js link on the head section. Inside the script templates, press Ctrl+F on your keyboard, and type just "min.js". Add jquery.cycle.all.js and jquery.easing.js together with function plugin for image slider, just put below of jquery.min.js link, Lets See the picture below!
Script Code is added as follows:
<script src=http://agratitudesign-template.googlecode.com/svn/trunk/jquery.cycle.all.js type=text/javascript/> <script src=http://agratitudesign-template.googlecode.com/svn/trunk/jquery.easing.1.3.js type=text/javascript/>
And define the function animation slider, #art-slide is the css id that used in the image style list that we will make.
<script type=text/javascript> $(document).ready(function(){ $(#art-slide).cycle({ fx: scrollLeft, easing: easeOutBack, delay: -4000 }); }); </script> All Script that mentioned above placed into the head of the template, as shown like the right picture above, you can parse the function plugin code at first. But a long as my experience, the template blog will directly parse the function code that we added automatically.
2. Defining the css id that we used in the function code in this case i use #art-slide. Find the place for its location, I was just placed at the end of the skin template. Ctrl+F on the script of your templates and type ]]></b:skin>.
I define it as follows:#art-slide { width: 66%; height: 300px; left : 0px; margin: 0 auto; overflow:hidden; } #art-slide img { padding: 15px; border: 1px solid rgb(204, 204, 204); background-color: rgb(238, 238, 238); } #art-slide li:before { content: none !important; } Description :
- width: 66% : determine the width of the slider movement on the post content blog
- height: 300px : slightly larger than the image that will be used as a border to make beautify of the image slider
- overflow: hidden : in order not to fall apart during the loading process
- # art-slide li: before : to eliminate the bullet list style, define it according to the character your template. May be like this # art-slide ul{list-style:none !important;} depending on how you defined your bullet style on your template.
3. If you are using such a image sexy lightbox evolution in the post content images on your blog, just grab the code on the <a>...</a>, collect the images code that you have, adjust the size image that you, and something another not required then put inside <ul> and <li> tag. So that the code that will inserted to the content post will be like this:
<ul id="art-slide"> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBYPGNWR8YS9FESjanBkB9UPe67A8M-d_wqddqxlf4wParExoms4Kn_PUBnz6Hat0cxlDwtg_w3dREeAV83nOzA80PUwND9eCokT1Zsd4t-FIVrM3i2bm87fXsHSh4Zb5mWmTUciznxk/s1600/Balinese+Frame-1.jpg" imageanchor="1" title="Balinese Motif Carving as Frame-Download 1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBYPGNWR8YS9FESjanBkB9UPe67A8M-d_wqddqxlf4wParExoms4Kn_PUBnz6Hat0cxlDwtg_w3dREeAV83nOzA80PUwND9eCokT1Zsd4t-FIVrM3i2bm87fXsHSh4Zb5mWmTUciznxk/s320/Balinese+Frame-1.jpg" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFpkAhBF1H1TO04RVPoaTR8WeYu1_2Gq2uK_2aXmfRvhEY8Hkw3o7V6ih4jGAfyUOIzMhx47ZZC_l0GS-gNF68Z1K8NCyBBfFvyevX0Wdckp621T-AO0KGPZtNp7YT1pV426RYAZ-Zg0/s1600/Balinese+Frame-2.jpg" imageanchor="1" title="Balinese Motif Carving as Frame-Download 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFpkAhBF1H1TO04RVPoaTR8WeYu1_2Gq2uK_2aXmfRvhEY8Hkw3o7V6ih4jGAfyUOIzMhx47ZZC_l0GS-gNF68Z1K8NCyBBfFvyevX0Wdckp621T-AO0KGPZtNp7YT1pV426RYAZ-Zg0/s320/Balinese+Frame-2.jpg" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaAcBUxyY419qC7DH5zTAaF7ZAgT08IhAzdp2gnTnuriY1IOmwW846_CJ0ALZ8EjW3ua3ka9t14j1quG7KNqzDYQuAueuhUOAd9EHLrA_KYCe8q9fij68YGBBGi6j-Q_IV3jsSrqzsY4/s1600/Balinese+Frame-3.jpg" imageanchor="1" title="Balinese Motif Carving-Download 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaAcBUxyY419qC7DH5zTAaF7ZAgT08IhAzdp2gnTnuriY1IOmwW846_CJ0ALZ8EjW3ua3ka9t14j1quG7KNqzDYQuAueuhUOAd9EHLrA_KYCe8q9fij68YGBBGi6j-Q_IV3jsSrqzsY4/s320/Balinese+Frame-3.jpg" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn1TYsr8bVWmY4SfWEItSrk6ry5IB_3-u9Y_m1lYfyrI21Rg0SAaHNt7VXmZ5NXPCbd1DR2jZY-OebHvBfaPjocZFMWmRypumdk6jRp2bSvJk-TNTRBb67vBPUwmgc04W1mWWRccHdJB8/s1600/Balinese+Frame+4.jpg" imageanchor="1" title="Balinese Frame-Download 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn1TYsr8bVWmY4SfWEItSrk6ry5IB_3-u9Y_m1lYfyrI21Rg0SAaHNt7VXmZ5NXPCbd1DR2jZY-OebHvBfaPjocZFMWmRypumdk6jRp2bSvJk-TNTRBb67vBPUwmgc04W1mWWRccHdJB8/s320/Balinese+Frame+4.jpg" /></a></li> <li>....</li> </ul>
The code above is under the rule of <ul id="art-slide">, while the images still use image lightbox evolution style. S320 is the image size that has a width: 320 pixels and will be proportional to the height. For more clearly and easier to understanding, lets see the article video!
Available link for download
Subscribe to:
Posts (Atom)