Welcome! If you like our Blog so please Follow this blog and also +1 this blog here---->
Showing posts with label Wordpress. Show all posts
Showing posts with label Wordpress. Show all posts

Sunday, 28 October 2012

Create a Video and Image WordPress Slider with SlideDeck

How to Create a Video and Image WordPress Slider with SlideDeck
Let’s face it, content sliders are awesome – when done right they conserve precious screen real-estate, their interactivity helps keep your visitors engaged and especially for bloggers, they can help keep your most valuable posts in front of new visitors to your site. There are tons of slider plugins out there for WordPress, but the catch is that many of them are difficult to use, and even more difficult to get looking good in your site design.
That all changed when we tried SlideDeck 2, a new WordPress content slider plugin. This powerful plugin created by digital-telepathy makes it super-simple to create awesome sliders in minutes, without a single line of code required. SlideDeck 2 sets itself apart from the crowd by enabling you to mix together content from different places around the web (like Flickr, YouTube, etc.), and present it on the page as a gorgeous content slider. In addition to the WordPress plugin, there’s also a JavaScript developers’ kit – we use it in our Free WordPress Blog Setup page. We’ve been having a ball with the plugin, so we decided to put together this quick guide to show you how to make a dynamic WordPress content slider using SlideDeck 2. 

Creating a Dynamic Source SlideDeck

We’re going to show you how to create a Dynamic Source SlideDeck that mixes together video and images from a YouTube and Flickr account. Begin by clicking on “Manage” to go to the main dashboard. This screen lets you create new SlideDecks as well as allowing you to sort/preview your existing SlideDecks.
SlideDeck Manage Screen Small
In the Dynamic Source section, click on the blue “Create SlideDeck” button. A menu window will pop up, asking you to choose your first Content Source – you’ll be able to select additional sources on the next screen, so pick one and you’ll get taken to the Dynamic Source Editor. We’re going to choose YouTube, to get a sweet video gallery going
SlideDeck Dynamic Source - Youtube
Once you land on the Dynamic Source Editor, you’ll see that YouTube has been selected as our first Content Source. Start by naming your SlideDeck, then give the YouTube icon a click, and you’ll get a nice menu tab showing all the configuration options available for this source. Enter a username (it can be yours or someone else’s) and hit ‘Apply’ to pull in the most recent videos from that user’s channel – if the user you referenced has other playlists, you can specify that you want to pull in videos from that list in the dropdown menu.
SlideDeck Youtube Flyout
SlideDeck Youtube Flyout with Dropdown
Now you get to see one of SlideDeck 2’s coolest features – the live preview window. This area of the screen lets you see your slider in real-time as you make changes to it, instead of having to refresh your post in a separate browser window. You’ll see the slider here update before your very eyes to show the latest few videos in the playlist. You can even interact with the slider in the preview area – go on, give it a try!
SlideDeck Preview Loading
SlideDeck Preview Loading Complete
So that was our first Content Source – easy right? Now, we’ll add a second to give the slider some variety. Click the Add Source button in the header area of the Editor screen, and you will see the same Content Sources modal window. This time, select Flickr as the source.
SlideDeck Dynamic Content Source - Flickr
Similarly to YouTube, you can click on the Flickr icon in the header to configure the Content Source. Since Flickr requires a users’ ID number (again, yours or someone else’s) to pull in images, you’ll need to get that number – SlideDeck 2 makes it easy to figure this out, though, by linking to this handy little tool.
Get your Flickr ID
Grab the user’s ID number and paste it into the “User/Group ID” field, and choose whether you want to filter the images you display using any tags that are associated with your photos. Click “Apply” to add Images and captions from the Flickr account into your slider, and take a quick look through it.
SlideDeck Flickr Flyout Settings
Do you see both videos and images in there yet? If not, you may be merging content from a source that hasn’t been updated in a while, which causes it to get ‘crowded out’ by your more recently-updated sources. In this instance, you may want to try randomizing the order of the slides, as this will sometimes help – or you can begin posting more frequently to your other sources ;)

Configuring the Lens

Congratulations, you’ve created your first SlideDeck! Now, you could simply go ahead and save this SlideDeck, then publish it to your page – but considering all the customization options available to you, it’s probably best to utilize them. SlideDeck offers a ton of options for customizing the Lens, to make your slider look nice on the page. Scroll down to just below the Live Preview area to view the Options panel, and see what’s there.
If you haven’t noticed, there are a lot of options available, so we won’t go through them all. However we’ve grouped them together into six simple categories:
Lenses – This panel lets you choose the overall Lens that your SlideDeck uses. Applying a different Lens can completely change how your content looks on the page, so pick one that looks the closest to your overall site
SlideDeck Option Lenses
Setup – This group contains general settings, like the dimensions of your SlideDeck, number of slides, etc.
SlideDeck Options Setup
Appearance – Lets you adjust things like fonts and colors
SlideDeck Options Appearance
Content – Use this panel to control how the content appears in your SlideDeck – options like title length, show/hide excerpts and others live here
SlideDeck Options Content
Navigation – Adjust and configure the navigational elements of the SlideDecks, like arrow style, navigation type, and more
SlideDeck Options Navigation
Playback – Controls how your SlideDeck behaves
SlideDeck Options Playback

Saving & Publishing Your SlideDeck

Now that you’ve created your SlideDeck, added your Content Sources, and configured your Lens, there is only one step left: showing it to the world! Hit the “Save SlideDeck” button at the bottom of the editor screen to save your new SlideDeck. The page will refresh, and you’ll be presented with a few options.
Publish SlideDeck
From here, there are three methods for sharing your SlideDecks with your website visitors:
  1. Embedding it into an existing page or post
  2. Embedding it into a new page or post
  3. Using a shortcode to embed it in your page templates
All three of these methods make use of the SlideDeck shortcode – a simple little tag that represents the SlideDeck you created. It looks like this:
[slidedeck=Your SlideDeck's ID number]
That’s all there is to it! While writing your post or page content, simply click on the little purple SlideDeck icon up next to the “Insert Media” icon above the WordPress content editing window.
Insert SlideDeck
Clicking this icon will bring up the SlideDeck selector menu – from here you can easily specify which SlideDeck(s) you want to embed in your content. Click “Insert”, and your SlideDeck’s shortcode will appear in your post!

Enhanced by Zemanta

How to Create Really Cool Wordpress Date Button

How to Create Really Cool Wordpress Date Button
When making your blog stand out, one thing that bloggers often ignore is the date button. Something as simple as a customized date button can really make a difference in your blog’s design. Therefore in this article we will show you how you can create a customized date button for WordPress.
Custom Date Button for WordPress
We will start out from the image shown in the left, and will make it look like the one in the right.
You can use the image that we are using above if you so desire for your use, or create your own one.
First thing you need to do is open your style.css file and add something like below:
background: url(images/datebg.gif) no-repeat;
height: 173px;
width: 173px;
Now you may style it however you like, and you can also change the name of the class. Then you would need to open your index.php and single.php. And add the following code where your template fits.
<div class="datebg">
<div class="month"><?php the_time(’M’) ?></div>
<div class="day"><?php the_time(’d’) ?></div>
Make sure you change the styling to fit your needs. Now you should have a customized date image. You can also refer to WordPress Codex for more information.

How to highlight author comments in WordPress

How to highlight author comments in WordPress

A while ago I was looking around for how to make my own comments a different color on my blog. Most of the advice was along the lines of “Add code to check if the commenter’s email is the same as the email address of the blog’s author.” Can you spot the flaw in that logic? If a commenter knows the email address of the blog author, she could use the blog owner’s email address in her comment and get her own comment highlighted. Worse yet, someone could try to discover the blog owner’s email address by trying lots of email addresses until they saw their comments change to a different color.

 The trick is simple: instead of checking the author’s email address, check their user id to see if it’s the user id of the blog owner. Pretty smart. After that, it was a simple matter of
1. Changing my theme to add an “authcomment” style
I edited style.css and near the bottom added these lines:
.authcomment {
background-color: #B3FFCC !important;
2. Editing my comments.php file to add a little code
My comments.php file had a line that looked like this:
<li class=”<?php echo $oddcomment; ?>” id=”comment…
and I changed it to more or less look like this:
<li class=”<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = “authcomment”;
echo $oddcomment;
?>” id=”comment…
That’s about it. 

Sunday, 21 October 2012

Top 10 Premium Wordpress Templates Download

Today i am here to give you some Wordpress Premium Templates. So, lets check these template below to download your template.

1. inFocus Premium and Professional Wordpress Template

inFocus - Powerful Professional WordPress Theme - ThemeForest Item for Sale
Infocus Wordpress Template

Some Key Features

Live Preview 


Download Here

2. Lulu – Responsive Theme by ThemeForest

Lulu WordPress Theme Free Download by ThemeForest.
Lulu -- Responsive WordPress Theme 
Lulu is a fully responsive, minimalist, awesome WordPress theme, with 4 custom post types, responsive flex slider, filterable portfolio/gallery, built-in contact form, and on and on. If you’re looking for a classy responsive theme, Lulu is patiently awaiting your arrival…

           Live Preview                                  Download Here

3. Alyeska Responsive WordPress Theme

Alyeska Wordpress Theme
Elegance. Flexibility. Awesomeness. These are the words that instantly come to mind when trying describe this amazing WordPress theme. This is the theme that’s going to get you or your client’s site up and running in no time. With all of the possible combinations of layout options, you’re sure to end up with a unique, elegant website that you can be proud of. Nothing has been held back with this one. It has all the professional touches you’d require in a WordPress theme along all the personal ones, as well – I’ve even named this theme after the mountain I grew up shredding as a kid in Alaska. It’s professional. It’s personal It’s the best. This is Alyeska.

              Live Preview                                  Download Here

4. XO – Responsive Creative Theme by ThemeForest

XO WordPress Theme Download
XO Responsive Creative Theme
XO is a SUPER responsive WordPress theme, that boasts an awesome clean look and beautiful media support.

             Live Preview                                  Download Here

5. Super Skeleton WP – Responsive Theme
Super Skeleton WP WordPress Theme
Super Skeleton WP Theme
Super Skeleton is more than a WordPress theme, it’s a comprehensive HTML5 framework and it includes a full templating system as well; SuperSkeleton is well organized. Take what you love, leave what you don’t, customize the rest. It’s completely in your hands – turn it into the next big thing, or just as your little personal projects, it’s up to you.

             Live Preview                                  Download Here

6. Propulsion – responsive business & eCommerce
Propulsion business & eCommerce WordPress
Propulsion -- Responsive Business & eCommerce WP Theme
Propulsion is a responsive WordPress Theme (try resizing your browser), suited for users who want to create a business, portfolio or eCommerce site. The Theme is built on top of the fabulous woocommerce shop plugin as well as the bbPress Forum plugin. It comes with a plethora of options so you can modify layout, styling, colors and fonts directly from within the backend. 3 Slideshows, 21 predefined skins (which are easy to modify from your backend), font and color options as well as dynamic template builder will help you create the Website you need in no time.
SEO (Search engine optimization)
The theme is built with SEO best practices in mind. It uses semantical valid HTML code and CSS so search engines can index the content of your site with ease. Important content is always placed before unimportent in your source code (eg: Blog Post content before Sidebar), Headlines are wrapped in heading tags (h1, h2, h3 etc) to signalise their importance to search engines. The site also uses heavy internal site linking, which is also of vital for search engines (related posts, primary and secondary navigation menus, footer navigation, etc) With this Wordpress Template you are well equipped to get a high google ranking and attract visitors to sell them your fabulous products ;)

                                  Live Preview                                  Download Here

7. Qualeb – Responsive Theme by Mojo Themes
Qualeb - Responsive WordPress Theme
Qualeb WP Theme
Qualeb is a fully responsive (Try resizing your browser) Business, Portfolio and Agency WP Theme that will adapt to any screen size all the way down to mobile. You can now show off your work in an elegant and professional manner, without penalizing mobile and tablet users. Everything in the theme is responsive, even the slider (touch swipe enabled), the tabs, and the embedded videos!

Live Preview                                  Download Here

8. Reaction WP : Responsive, Rugged, Bold
Reaction WP WordPress Theme
Reaction WP Theme
Reaction WP is more than a WordPress theme, it’s a comprehensive HTML5 framework and it includes a full templating System as well; A collection of several incredibly powerful scripts and CSS structures that’s been tied together into a kit that’s perfect as a jumping off point of your next project.

Live Preview                                  Download Here

9. Modulo – Responsive Business Theme
Modulo WordPress Theme Free Download by ThemeForest.
Modulo WP Theme
Modulo is a nice looking responsive solution for your business website. It is 100% flexible, ultra clean and modern theme with cool features.

Live Preview                                  Download Here

10. Simflex – Minimalist Blogging Theme 
Simflex - Blogging WordPress Theme Free Download by ThemeForest.
Simflex -- Responsive Wordpress Theme
Simflex is a simple & flexible portfolio/blog theme, suitable to create an online presence with style, with more than 8 background options, 2 content layouts and a responsive style, simflex is a very flexible and customizable theme.

Live Preview                                  Download Here