Are you a blogger? If yes then you must have needed a
portfolio widget which is responsive as well as stylish therefore I made one
for you. Now a days we have been listening of mobile friendly websites or
responsive websites but on the internet more than 50% websites/blogs are
unresponsive so we need to make our blog’s mobile first. There are many portfolio
widgets but most of them are unresponsive so here is the perfect widget for
you.
LIVE DEMO
What are the advantages of using this widget?
The main advantage of this widget is responsive. This widget
will detect the user device width using media queries and will automatically
adjust itself.
Is it free?
Of course it is free for all the dear loyal readers but I kindly
request to not change the classes of the widget as they are only invisible
credits (Non Links).
Can i change the styles?
Yes you can change the style of widget according to you but
not changing the classes. I will also tell you how to customize the widget in
this post.
How does this widget work?
I always tell my readers that how I made the widget and how
it works just for you so that you can learn it. Other bloggers might not share the
working of their widget but I do so that my dear loyal readers are better at coding
then normal readers! Happy J
So let’s start-
Adding the class-
First we will add the class to our portfolio division which contains the images-
<div class='mbaportfolio'>Now we have added the div so we will add the main magic which is style-
<a href='#' title='Image '><img src='imageurl'/></a>
<a href='#' title='Image '><img src='imageurl'/></a>
<a href='#' title='Image '><img src='imageurl'/></a>
<a href='#' title='Image '><img src='imageurl'/></a>
</div>
<style>Note- For the working of media queries you need to add this code in your template-
@media (max-width:290px) {
.mbaportfolio img {width:95%!important;height:auto!important;}
}
.mbaportfolio img {width:300px;height:200px;margin-right:4px;opacity:0.8;margin-top:4px;}
.mbaportfolio img:hover {opacity:1; box-shadow:1px 1px 20px 1px black; }
</style>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>If you have already added this code then no need to add it.
The final code-
Now our final code will look like-
<!--MBA Portfolio-->
<style>
@media (max-width:290px) {
.mbaportfolio img {width:95%!important;height:auto!important;}
}
.mbaportfolio img {width:300px;height:200px;margin-right:4px;opacity:0.8;margin-top:4px;}
.mbaportfolio img:hover {opacity:1; box-shadow:1px 1px 20px 1px black; }
</style>
<div class='mbaportfolio'>
<a href='#' title='Image'><img src='imageurl'/></a>
<a href='#' title='Image'><img src='imageurl'/></a>
<a href='#' title='Image'><img src='imageurl'/></a>
<a href='#' title='Image'><img src='imageurl'/></a>
</div>
<!--Ends-->
Customization-
Change 300px with the width of image which you want , 200px with the height you want.
Change the # with your link URL in each image and imageurl with the image URL in each case
and to change title text change Image.
How's the widget?
Did you installed this widget? if yes then how is the widget looking and is it responsive ? Share your thoughts through comments and do share this widget with your friends.
it is awesome great work :
ReplyDeleteThank You For Your Kind Words , BTW Please Use Your Google+ Profile To Comment Here , So That We Can Mention You :D
Delete