Add 'MP3 player' to your Blogger blog

Sometime we need to insert MP3 sounds to our Blogger blogs, but there is no such option available on Blogger blog, so here we are going to show How to add MP3 player' to your Blogger blog very easily; Read on:

Add 'MP3 player' to your Blogger blog

 

1. Using SoundCloud (Add music player by single post)
SoundCloud is a global online audio distribution platform based in Berlin, Germany, that enables its users to upload, record, promote, and share their originally-created sounds, SoundCloud is an audio platform that lets you listen to what you love and share the sounds you create.

• Step 1: Go to SoundCloud, open an account and verify email, and login

• Step 2: Go to Upload option, Select choose file to upload, and upload your MP3

• Step 3: Go to Track list, select the song, Go to the track page

• Step 4: Click on share icon (shown below)

• Step 5: Select Embed, copy embed code (shown below)

• Step 6: Get back to Blogger, edit post, and select HTML

• Step 7: Now paste the copied code here and Switch to 'Compose' mode, Done now you have music player on your blog post.

2. Using Wikplayer (Add music player to Blog, universally)
Read how to add and generate here:



So don't forget to mention how it working on your blog :)

Add '3D Pressible Button' to your web project

CSS can be used to create an awesome "call to action" button, as in the case of our 3D pressible button here. It uses CSS2 pseudo element to add a lower 3D side to the link, and CSS3 shadows and transition to complete the look. To overcome a severe limitation of Google Chrome and Safari at the time of writing not supporting CSS3 transitions on pseudo elements, we use the "inherit" technique as described here, so the 3D side of the button is animated when the user presses down on the button.  Note that the default "depth" of the 3D effect is 12px. If you need to increase or decrease this value, change the "12px" value that occurs 3 times in the CSS. Let's see how it looks like and get the source code:

Add '3D Pressible Button' to your web project

See the Pen pressable by kShazzad (@kShazzad) on CodePen.

So what you think about this button, don't forget to mention :)

Add 'CSS3 Black Menu' to your website

Few days ago I've published Vertical text menu for websites for continue the series here I'm presenting Dashing CSS3 Black Menu with drop-down sub menu for your website. It is built with HTML, CSS and CSS3 effect transition, compatible with all major web browser and looks fabulous on any kind of website no matter their background is light or dark. Let's see how it looks like and get the source codes:

Add 'Dashing CSS3 Black Menu' to your website

See the Pen black by kShazzad (@kShazzad) on CodePen.

So what you think about this menu don't forget to mention. Check out other trending navigation menus 3 responsive navigation menu, Multipurpose navigation menu, Overlay style menu, CSS3 navigation menu style 1, CSS3 navigation menu style 2, Goodluck

Add 'Simple Neat' Search bar to your web project

I've published various kinds of search bar for Blogger and web sites, such as 6 Simple Search Bar, Dynamic width Search Bar, Black CSS3 Search Bar, Pulsating Search Bar and so on, for continue the series here I am publishing another Simple Neat search bar for your web project, which is constructed lightly with CSS, HTML, compatible with any any web browser and looks classy on any type of website, this search bar's design adapted from Apple.com. let's see how it looks like and get the source code:

Add 'Simple Neat' Search bar to your web project

See the Pen neat by kShazzad (@kShazzad) on CodePen.

So how it working on your web site don't forget to mention :)

Add "Image gallery with Caption" to your web project

Someday ago I published a tutorial about How to caption image with 4 popular CSS3 method, Here I present to you a full version of that tutorial, this is called "Image gallery with Caption", this widget is made with CSS3 elements and effects, it's easy to configure and light weighted so it will load quickly and looks slick on any types of web site, let's take a look at it shall we. Read on:

Add "Image gallery with Caption" to your web project

See the Pen Caption by kShazzad (@kShazzad) on CodePen.

So what you think about this widget don't forget to mention :)

Add 'Hexagon Shape' button to your web project

I've already published some of coolest button types on Crawlist, Like CSS3 Shake button, Blinking button, 3D button etc, Here I am sharing another cool button to your web project for your web project, it's called  'Hexagon Shape' button. The interested thing is this buttons were built with single element, made with CSS3 3D perspective element. These buttons are easy to use and supports all major web browsers. Let's take a look at them, shall we:

Add 'Hexagon Shape' button to your web project

So how this button working on your site don't forget to mention :)

Add "Accordion" widget to your web project

Accordion is a type of widget that Constructed with HTML, CSS and powered by jQuery, It is a tabbed style widget that has title tabs and within title tab you can put important text, codes, image elements folded and those elements can only be revealed by clicking on title tab. Here an awesome light weighted Accordion widget source code given, Read on:

Add "Accordion" widget to your web project

See the Pen accordion by kShazzad (@kShazzad) on CodePen.

 
How to configure:

• In <div class="accordion-item"> Item 1 place your title text

• In <div class="data"> replace dummy text with your text

• Don't call jquery.min.js twice

How this widget working on your web project don't forget to mention :)