Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Wednesday 21 August 2013

Static Like us on Facebook Pop Out Widget for Blogger

Static like us on facebook pop out widget for blogger/blogspot. This widget is jQuery based widget with nice and smooth Pop out effect. It will help you to convert your blog visitors into members by liking your Facebook fan page. Most of visitors are read your article and go away, they don’t care about your fan page likes or any type of social sharing. even also they don’t look at your sidebar widgets, so here’s another pop out widget which will show up from bottom by sliding when your reader scroll down the page then automatically they will attention on the pop out widget and definitely they will “Hit” on the like button. This is another and simple way to increasing Facebook likes. so, if you interested to add this widget to your blog just follow the simple steps below.

Preview : - 


How to add this widget to blogger?

  • As usual Go to Blogger –> Layout –> Add a gadget

  • Choose HTML/Javascript from the list
    Copy and paste below code into it.
<script type="text/javascript" src="https://googledrive.com/host/0B45rKXymUivTWTV5aHpVVlV5enM"></script><script type="text/javascript">function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}; r(function(){new ConversionsBox("Enjoy this page? Like us on Facebook!)","http://www.facebook.com/pages/Skgtricks/565233286861061");});</script>
Note : – Replace above red colored line with Facebook fan page URL on which you want to get likes.
Finally save the widget and you have done!!
If You have Any Problem regarding this widget. Please comment it.
Continue Reading...

Thursday 15 August 2013

Facebook Popout Likebox widget Generator


Hello, here’s Facebook jquery pop up for facebook like box widget for bloggers (or) any website. actually i got idea to create this widget by Harish @ Way2blogging.org Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.

How To Install This Widget To Blogger?

First you need to have a jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  • Customize the Settings as you need
  • Click on Generate button and add widget to your Blog
Please insert a Valid Facebook Page URL. Don’t insert your Personal Facebook Profile URL.

Facebook Popout Likebox widget Generator by Skgtricks

Settings
:
: px
: px
:
: px
:
:
:
:

Application / Buttons
Generated Code


Copyright © All Rights Reserved byShivam garg @ Skgtricks

Drop your comments and questions below…

Continue Reading...

Thursday 8 August 2013

Form generator for "Add to Blogger" button by Skgtricks

addtoblogger-button

If you are a widget or module designer then one should utilize the widget API provided by blogger.Using this API you can provide the users with widgets of their interest with a one shot of a click to install to the new blogger layout without letting them mess with the XML code of the their template.

"Add to Blogger" button form code generator by Skgtricks

Settings




Continue Reading...

Thursday 25 July 2013

30 Vertical Menu

We head forward to a beautiful collection of some of the best looking vertical navigation menus that will put to anyone’s blog or website! I have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>



Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly: From your Blogger Dashboard, go to Template (make a backup < see the screenshot)
Backup your template

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,
  1. Go To Blogger > Layout > Edit HTML
All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!
    2.   Paste the CSS code for your selected Menu just above ]]></b:skin>     3.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.
  • If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
  • If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>
Note :- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!
    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,
<li><a href="#2" >Link 2</a></li> <li><a href="#3" >Link 3</a></li> <li><a href="#4" >Link 4</a></li> <li><a href="#5" >Link 5</a></li>
Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,
<li><a href="#" >Link</a></li>
For Live Demo of Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>
See Demos With our SkgTricks HTML Editor!

Navigation Menu #1

  
CSS CODE:
HTML CODE:

Navigation Menu #2

CSS Code:
HTML Code:

Navigation Menu #3

CSS Code: 
HTML Code:

Navigation Menu #4

CSS Code: 
HTML Code: 

Navigation Menu #5

CSS Code: 
HTML Code: 

Navigation Menu #6

Navigation Menu 6 CSS Code: 
HTML Code: 

Navigation Menu #7

Navigation Menu 7 CSS Code: 
HTML Code: 

Navigation Menu #8

Navigation Menu 8 CSS Code: 
HTML Code: 

Navigation Menu #9

Navigation Menu 9 CSS Code: 
HTML Code:

Navigation Menu #10

Navigation Menu 10 CSS Code:
HTML Code:

Navigation Menu #11

Navigation Menu 11 CSS Code:
HTML Code:

Navigation Menu #12

Navigation-Menu-With-No-image-used CSS Code:
HTML Code:

Navigation Menu #13

CSS Menu Tabs 13 CSS Code:
HTML Code:

Navigation Menu #14

CSS Menu Tabs 14 CSS Code:
HTML Code:

Navigation Menu #15

CSS Menu Tabs 15 CSS Code:
HTML Code:

Navigation Menu #16

CSS Menu Tabs 16 CSS Code:
HTML Code:

Navigation Menu #17

CSS Menu Tabs 17 CSS Code:
HTML Code:

Navigation Menu #18

CSS Menu Tabs 18 CSS Code:
HTML Code:

Navigation Menu #19

CSS Menu Tabs 19 CSS Code:
HTML Code:

Navigation Menu #20

CSS Menu Tabs 20 CSS Code:
HTML Code:

Navigation Menu #21

CSS Menu Tabs 21 CSS Code:
HTML Code:

Navigation Menu #22

CSS Menu Tabs 22
CSS Code:
HTML Code:

Navigation Menu #23

CSS Menu Tabs 24 CSS Code:
HTML Code:

Navigation Menu #24

 CSS Menu Tabs 25 CSS Code:
HTML Code:

Navigation Menu #25

CSS Menu Tabs 26 CSS Code:
HTML Code:
That’s All! Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :>

Continue Reading...

Saturday 6 July 2013

Add New Beautiful Blue Vertical Menu to Blogger



Posts RSS

The following drop down menu is made with the CSS, this is the Blue Vertical beautiful and Stylist menu for Blogger. You can also use this vertical menu in any Html Page of that your wish.

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:


How to add the Blue Vertical Menu to Blogger Blogs :-


Follow my below simple steps to add it your blogger Blog :-

  • Login to Blogger  >> Click on drop down menu >>then select "Template".
  • Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
  • Now find this tag    ]]></b:skin> by using CTRL +
  • Paste below code Just above ]]></b:skin> tag  and Save the Template.

ul#SkgtricksMENU,ul#SkgtricksMENU ul{
margin:0;list-style:none;padding:0;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
ul#SkgtricksMENU ul{
display:none;position:absolute;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;padding:0 0px 0px;}
ul#SkgtricksMENU li:hover>*{
display:block;}
ul#SkgtricksMENU li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#SkgtricksMENU li:hover{
z-index:1;}
ul#SkgtricksMENU{
font-size:0;z-index:999;position:relative;display:block;float:right;padding:0 0px 0px;}
ul#SkgtricksMENU>li{
margin:3px 0 0;}
ul#SkgtricksMENU a:active, ul#SkgtricksMENU a:focus{
outline-style:none;}
ul#SkgtricksMENU a{
display:block;vertical-align:middle;text-align:center;;text-decoration:none;font:14px Trebuchet MS;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
ul#SkgtricksMENU ul li{
float:none;margin:3px 0 0;}
ul#SkgtricksMENU ul a{
text-align:center;;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#FFF;text-decoration:none;}
ul#SkgtricksMENU li:hover>a,ul#SkgtricksMENU li a.pressed{
background-color:#00aaff;border-color:#424542;border-style:solid;color:#000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA8fEDx90S8AAABXSURBVBjTxY1BDoAgDASHRV/vhwHRemtSAsabl8l0t2kxs0NAF3AKqAJKtLLKasyaj82PdgGXgFuACZCA7Ngc+8S2uDfYAEXkybehTT6mFd7bDyDav3gA6ogaOZY0Sc8AAAAASUVORK5CYII=");text-decoration:none;}
ul#SkgtricksMENU span{
display:block;overflow:visible;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAFCAYAAADWkcYlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsaEPhJNTwAAABfSURBVHja7dqxDQAxDAMxOfvv7G9iIAt80pAjqDtA1d3ZOkmqqgIAAAD8qneQT4evM86TiHMAAAC4YMJ8Qn2JcwAAAHgf6esI8zYNAAAA3HPe3OfiLtIBAADgUZwnyQeivhwKKt7BhQAAAABJRU5ErkJggg==");background-position:left center;background-repeat:no-repeat;}
ul#SkgtricksMENU ul li:hover>a,ul#SkgtricksMENU ul li a.pressed{
color:#000;text-decoration:none;}
ul#SkgtricksMENU li.topfirst>a{
border-width:0;}
ul#SkgtricksMENU li.subfirst>a{
border-width:0;}



MENU CODE


Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

Login to Blogger  >> Click on drop down >> Now select "Layout"
Now you will see "Add a Gadget" button click any of them

  • A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
  • Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.



<ul id="SkgTricksMENU" class="topmenu">
<li class="topfirst"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li class="topmenu"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<ul>
<li class="subfirst"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
</ul></li>
<li class="topmenu"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>




Customization

- replace the text in blue and Green with your links and titles.
- if you need more tabs, then add a line like this just above 


Now all done if have any question or Problem according to this Menu then Comment below
Continue Reading...

Contact Form

Name

Email *

Message *