Visual Basic Dot Net Code: blogger

Showing posts with label blogger_design. Show all posts

Wednesday, 1 May 2013

Awesome 3D flipping menu for blogger

Hi guys to I’m going show how to add flip (3D) menu for blogger as I tell menu previously I posted many of them checkout and this one 3D flipping and this will supports only chrome and safari browser I assume all using chrome and other browsers just rotates and show reverse of them to add this one to your blog or website also possible steps to follow

Adding menu

Demo

1. Login to blogger account

2. Click layout

3. Click on Add a Gadget

4. Scroll down and find HTML/JavaScript

5. Leave title blank and Copy and paste the below code in content

6. Click on save to save your work

7. Replace http://vbdotnetcod.blogspot.com as your links

Code:

Tuesday, 5 March 2013

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Hi, today I’m going share about jQuery and CSS3 menu bar for blogger, I’m shared more different menu bars, drop down, vertical drop down, with CSS3 and its more effective to your blog. I told that I’m using jQuery and CSS3 this is first time with using JQuery in menu bar and it is so nice. There are six effective colors to match your blog color

How to add this menu to blogger For understanding easily I’m divided the tutorials and they are below

Step1: Adding scripts
Step2: Adding style
Step3: Adding the menu

1. Adding scripts

1. Go to Blogger Dashboard >Template

2. Click on Edit HTML

3. Hit Proceed
4. Find the below code in your template
To find the code Press CTRL+F and type this code
5. Add below code just above it (if you already add Jquery library for your blog then ignore the jQuery file script).

2. Adding styles

1. Now find the Below code

2. Add below CSS code before the code(tag)

.lavalamp {
 position: relative;
 border: 1px solid #d6d6d6;
 background: #fff;
 padding: 15px;
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 border-radius : 10px;
 -moz-border-radius : 10px;
 -webkit-border-radius : 10px;
 height: 18px;
 font-family: calibri; 
 } 
 .magenta { 
 background : rgb(190,64,120);
 border: 1px solid #841144; 
 } 
.cyan { background : rgb(64,181,197); 
 border: 1px solid #2f8893; 
 } 
 .yellow { 
 background : rgb(255,199,79);
 border: 1px solid #c08c1f;
 } .orange { background : rgb(255,133,64); 
 border: 1px solid #c04f11; }
 .dark { background : rgb(89,89,89);

border: 1px solid #272727; 
 } 
 .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a {
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40); 
 }
 .lavalamp a {
 text-decoration: none; 
 color: #262626; 
 line-height: 20px;
 } 
 .lavalamp ul { 
 margin: 0;
 padding: 0;
 z-index: 300; 
 position: absolute; 
 } 
 .lavalamp ul li { 
 list-style: none;
 float:left;
 text-align: center; 
 } 
 .lavalamp ul li a { 
 padding: 0 20px;
 text-align: center;
 } 
 .floatr {
 position: absolute; 
 top: 10px;
 z-index: 50;
 width: 70px;
 height: 30px; 
 border-radius : 8px; 
 background : rgba(0,0,0,.20);
 -webkit-transition: all .4s ease-in-out; 
}

3. Now save your template In style there are two methods for adding, one shown above and the other one is add from customize menu to add style like this type follow these steps
1. Go to Blogger template and click on customize
2. Click on Advanced and scroll down click Add CSS
3. Paste the code in that window and save it

3. Adding menu

1. Now come to page layout (above the template option)
2. Click on Add a Gadget(below the header )4
3. choose the HTML/JavaScript
4. Copy and paste the below code inside it

5. Save your JavaScript file
• Replace # with the links
• Replace home, blog, contacts etc. with your link text which you want to appear on the menu bar
• If you want change the background color of the menu then replace

one with below code line

Wednesday, 20 February 2013

How to design cloud labels in blogger/BlogSpot

Today I’m going to show how to design cloud labels in blogger/BlogSpot and as I told design a cloud label in blogger is simple and more effective in view and there are two ways to add this one to your blog one is through html editor other one is adding from customize option, both options under template menu. I prefer for adding CSS - CSS3 is customize menu there you won’t get confuse to find and tag or any things directly copy and paste CSS code there, in this tutorials I’m going to show both methods to design cloud labels

First Method:

Adding through “HTML Editor”

Step 1: Login to BLOGGER account and click this

Step 2: Now select option Template and click

Step 3: In that click “Edit HTML” and click proceed

Step 4: Now find by press the combination of this “CTRL+F” and type “]]></b:skin>”

Step 5: Copy and paste the code above the tag “]]></b:skin>”

Second Method:

Adding through customize option

First two steps are same as the above after that

Step 3: Click “customize”

Step 4: Copy and paste the code

In the CSS code change the value for color and size of font and padding value last margins makes different look for you wish

Sunday, 17 February 2013

CSS3 Advanced Menu bar with social widget and search bar

Today I’m going show how to advanced menu bar with social widget (contains menu share buttons and search bar) for your blogger blog. As you see the menu bar tutorials like this buttons this totally different and easy look rich effects. If you want this menu bar in your blog follow these steps to add

Step1:

Step2:

Now select the “Layout” from the options and click

Step3:

Click Add Gadget and click on “HTML/JavaScript”

Step4:

Paste the below code empty the title bar

}
/*set image height and width*/
#head img {
 width: 40px;
 height: 40px;
}
#header_img {
 width: 600px;
 padding: 2.5px;
 background-color: #666;
}
#head #header_img {
 left: 430px;
 position: absolute;
 top: -8px;
}
#head #header_img li {
 list-style: none;
 margin: 5px;
 float: left; 
 
}
/*add induall colors for each element on hover*/
li:nth-child(1) img:hover {
 background-color: #395793;
 border-radius: 100%; 
}
li:nth-child(2) img:hover {
 background-color: #2FA2ED;
 border-radius: 100%; 
}
li:nth-child(3) img:hover {
 background-color: #DA2713;
 border-radius: 100%; 
}
li:nth-child(4) img:hover {
 background-color: #DC572E;
 border-radius: 100%; 
}
</style>
<div id="head">
<nav id="tabs">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Windows</li>
</a>
<a href="#">
<li>Mac</li>
</a>
<a href="#">
<li>Mobile</li>
</a>
</ul>
</nav>
<ul id="header_img">
<li><img class="social" src="https://lh5.googleusercontent.com/-X6qeExoPErU/UNgSAAaY_tI/AAAAAAAABwg/XKz4udSujBM/s64/facebook.png" /></li>
<li><img class="social" src="https://lh3.googleusercontent.com/-9rDdQ-P1SZo/UNgSG1c3ToI/AAAAAAAABxc/xJ_5HnLH94U/s64/twitter.png" /></li>
<li><img class="social" src="https://lh5.googleusercontent.com/-UL6PaOsAlM0/UNgSA6PJz4I/AAAAAAAABws/mkytqGaY5xI/s64/goole%252B.png" /></li>
<li><img class="social" src="https://lh4.googleusercontent.com/-Q3GMcqsrjdE/UNgSFwG8NSI/AAAAAAAABxU/jxBiKAu2Zt8/s64/rss1.png" /></li>
<form action="/search">
<input id="search" type="search" placeholder="Search some onion.."   />
<input id="btn" type="submit" value="Go">
</form>
</ul>
</div>

Step5:

Change the values and color values as you wishing and now click save your “HTML/JavaScript”.

Then the awesome advanced menu bar appears in your blog

Friday, 15 February 2013

windows phone ui type social share buttons for your blogger

Today I’m going to show to how to add Rss feed bar with social sharing buttons. This is just like windows phone incons widget. Your visitors can subscribe and share and rss news from this widget. It will help to get pageviews for your blogger and check it from demo link below. This will awsome for your blog and website also

All you need is follow this steps and it makes perfect widget

Step1:

Step2:

Now select “layout” like below

Step3:

Click Add Gadget and “HTML/JavaScript”

Step4:

Paste below one of below code.

Step5:

For social medi icons, you can chage the URLs as your link.

Replace VBDOTNETCOD with your feedburner ID

Step6:

Now save your “HTML/JavaScript”

windows phone type share buttons with subscribe button

Today I’m going to show to how to add Rss feed bar with subscribe box all in one place. This is just like windows phone incons widget. Your visitors can subscribe and share and rss news from this widget. It will help to get pageviews for your blogger and check it from demo link below. This will awsome for your blog and website also

All you need is follow this steps and it makes perfect widget

Step1:

Step2:

Now select “layout” like below

Step3:

Click Add Gadget and “HTML/JavaScript”

Step4:

Paste below one of below code.

<style>

#socialbox{
border:1px solid #ddd;
font-family: segoe ui light;
padding: 5px;
width: 330px;
}
#share_icons_facebook {
    background-color: #3A5894;
 transition: all .5s;
 -o-transition: all .5s;
 -moz-transition: all .5s;
 -webkit-transition: all .5s;
}
#share_icons_facebook:hover {
 background-color: #3A5894;
 border-radius: 64px;
 opacity: .7;
}
#share_icons_twitter {
    background-color: #39A7ED;
 transition: all .5s;
 -o-transition: all .5s;
 -moz-transition: all .5s;
 -webkit-transition: all .5s;
}
#share_icons_twitter:hover {
 background-color: #39A7ED;
 border-radius: 64px;
}
#share_icons_pintrest {
    background-color: #D21313;
 transition: all .5s;
 -o-transition: all .5s;
 -moz-transition: all .5s;
 -webkit-transition: all .5s;
}
#share_icons_pintrest:hover {
 background-color: #D21313;
 border-radius: 64px;
}
#share_icons_g {
    background-color: #1B1B1B;
 transition: all .5s;
 -o-transition: all .5s;
 -moz-transition: all .5s;
 -webkit-transition: all .5s;
}
#share_icons_g:hover {
 background-color: #1B1B1B;
 border-radius: 64px;
}
#share_icons_rss {
    background-color: #F58125;
 transition: all .5s;
 -o-transition: all .5s;
 -moz-transition: all .5s;
 -webkit-transition: all .5s;
}
#share_icons_rss:hover {
 background-color: #F58125;
 border-radius: 64px;
}
.emailtext {
    
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 7px;
    width: 120px;
 outline: none;
 width: 320px;
}
.ebutton {    
    color: #fff;
    background: none;
 border:none;
    padding: 7px 20px;
 background-color: red;
    
}

</style>
<br />
<div id="socialbox">
<table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody>
<tr><td>
<a href="http://facebook.com/VBDOTNETCOD" rel="nofollow" target="_blank"> <img id="share_icons_facebook" src="https://lh5.googleusercontent.com/-X6qeExoPErU/UNgSAAaY_tI/AAAAAAAABwg/XKz4udSujBM/s64/facebook.png" /></a></td><td>
<a href="http://twitter.com/VBDOTNETCOD" rel="nofollow" target="_blank"><img id="share_icons_twitter" src="https://lh3.googleusercontent.com/-9rDdQ-P1SZo/UNgSG1c3ToI/AAAAAAAABxc/xJ_5HnLH94U/s64/twitter.png" /></a></td><td>
<a href="http://pinterest.com/VBDOTNETCOD" rel="nofollow" target="_blank"><img id="share_icons_pintrest" src="https://lh6.googleusercontent.com/-RjHJUJhiWFo/UNgSF4yW3lI/AAAAAAAABxM/_EJ_S3xvQZM/s64/pintrest.png" /></a></td><td>
<a href="https://plus.google.com/u/0/112997195363402486134" rel="nofollow" target="_blank"><img id="share_icons_g" src="https://lh5.googleusercontent.com/-UL6PaOsAlM0/UNgSA6PJz4I/AAAAAAAABws/mkytqGaY5xI/s64/goole%252B.png" /></a></td><td>
<a href="http://feeds.feedburner.com/VBDOTNETCOD" rel="nofollow" target="_blank"><img id="share_icons_rss" src="https://lh4.googleusercontent.com/-Q3GMcqsrjdE/UNgSFwG8NSI/AAAAAAAABxU/jxBiKAu2Zt8/s64/rss1.png" /></a><a href="http://bloggertrix.com/"></a></td></tr>
</tbody></table>
<div>
<center>
<b>Get Newest Articles By EMAILS </b></center>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="VBDOTNETCOD" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="ebutton" title="" type="submit" value="Subscribe" />
</form>
</div>

Step5:

For social medi icons, you can chage the URLs as your link.

Replace VBDOTNETCOD with your feedburner ID

Step6:

Now save your “HTML/JavaScript”

Tuesday, 12 February 2013

how to add syntax highlighter for blogger vlog

Today I’m going show how to add syntax highlight for your blogger, it’s simple to add syntax highlighter. Syntax highlight is rich if add to your blogger blog, its changes the way your blog look and make your blog nice and clean
Its has different supporting languages and scripting languages etc.
All you need is go to their official site or copy and paste JavaScript code, one thing should you remind when you posting any code that code must be within these tags

And these tags are basic tags to highlight, if you use this tags its changes the font size and font its look some none effective, the syntax highlight is more color full and nice
For example for html code should be highlight then tags should be like this
Ex1:

Ex2:

To add syntax highlighter for your blogger blog
Step1:
Login to Blogger account
Step2:
Go to template and click Edit html
Step3:
Now click proceed button
Step4:
Find this tag using Ctrl+F body tag ending
Step5:
Paste the below code before the end body tag

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>

Step6:
Now Click on save template
Step7:
Whenever you syntax highlighter in your post just write code between this two tags

for different code blocks name check here http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Friday, 8 February 2013

Css3 Smooth Slideout Menu Bar For Blogger

In this tutorial im gonna explain how to add Css3 slide-out menu ba r for your blog. This is also act like jquery menu bar. This menu will useful who try to add more pages for your blog.Im using Css3 and HTML for creating this widget.

Step1:

Go to blogger and login

Step2:

Go to blogger and click Layout

Step3:

Click Add Gadget and select 'HTML/Javascript

copy and Paste below code.



Navigation
        
            
Homecustom description here


Tutorialscustom description here


Supportcustom description here


Aboutcustom description here


Backcustom description here

Step4:

Replace # with your links.

Now save your HTML/Javascript'.

You are done...

Vertical Hover Effect Css3 Menu Bar For Blogger

In this tutorial i'm gonna explain how to add vertical hover effect CSS3 menu bar for your blog. You can
change your color as your like. Im using juts Css3 and HTML for these menu bar. In this tutorial You
can get my all

Step1: Go to blogger and login

Step2: Go to blogger and click Layout

Step3: Click Add Gadget and select 'HTML/Javascript

Step4: Copy and paste the code

ul li {
background:#000;
list-style: none;
height: 40px;
float:left;
padding: 10px;
}
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #ddd;
padding:0px;
color: #fff;
font-family: segoe ui light;
font-size:18px;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
}
li:nth-child(1) a {
border-color: #AC193D;
}
li:nth-child(2) a {
border-color: #643EBF;
}
li:nth-child(3) a {
border-color: #8C0095;
}
li:nth-child(4) a {
border-color: #2E8DEF;
}
li:nth-child(5) a {
border-color: #008299;
}
li:nth-child(1) a:hover {
border-bottom: 35px solid #AC193D;
height: 9px;
}
li:nth-child(2) a:hover {
border-bottom: 35px solid #643EBF;
height: 9px;
}
li:nth-child(3) a:hover {
border-bottom: 35px solid #8C0095;
height: 9px;
}
li:nth-child(4) a:hover {
border-bottom: 35px solid #2E8DEF;
height: 9px;
}
li:nth-child(5) a:hover {
border-bottom: 35px solid #008299;
height: 9px;
}
</style>
<ul id="nav">
<li class="home"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Home</a></li>
<li class="tutorials"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Tutorials</a></li>
<li class="about"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Coding</a></li>
<li class="news"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">WordPress</a></li>
<li class="contact"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Contact</a></li>
</ul>
<span style="font-size: 12.0pt; line-height: 115%;">Step5:<o:p></o:p></span>

<span style="font-size: 12.0pt; line-height: 115%;">Replace #
with your links.<o:p></o:p></span>

<span style="font-size: 12.0pt; line-height: 115%;">And Now save
your HTML/Javascript'.<o:p></o:p></span>

Step5:
Save Your "HTML/Javascript"

Visual Basic Dot Net Code

Pages

Wednesday, 1 May 2013

Awesome 3D flipping menu for blogger

Tuesday, 5 March 2013

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Wednesday, 20 February 2013

How to design cloud labels in blogger/BlogSpot

Sunday, 17 February 2013

CSS3 Advanced Menu bar with social widget and search bar

Friday, 15 February 2013

windows phone ui type social share buttons for your blogger

windows phone type share buttons with subscribe button

Tuesday, 12 February 2013

how to add syntax highlighter for blogger vlog

Friday, 8 February 2013

Css3 Smooth Slideout Menu Bar For Blogger

Vertical Hover Effect Css3 Menu Bar For Blogger

Labels

Popular Posts

My Blog List

Blog Archive

My Favorite

Total Pageviews