Hellas Web Bloggers

Πώς να ανακαλύψετε το κλειδί των Windows χωρίς κάποιο λογισμικό

noreply@blogger.com (Anonymous) — Sat, 26 Apr 2014 09:18:00 +0000

Έχετε ξεχάσει που αποθηκεύσατε το κλειδί προϊόντος των Windows 8.1, Windοws 8 ή Windοws 7;. Βαριόσαστε να σκύψετε για να τον διαβάσετε από το αυτοκόλλητο των Windοws που είναι κολλημένο πάνω στο υπολογιστή σας; Τι; έχει σβηστεί από το αυτοκόλλητο ή δεν είναι ο ίδιος κωδικός με αυτόν που υπάρχει στα εγκατεστημένα Windows σας; Ασφαλώς το γνωρίζετε ότι μπορείτε να τον βρείτε χρησιμοποιώντας κάποιο πρόγραμμα τρίτου κατασκευαστή.

Όμως μερικοί χρήστες δεν θέλουν να τρέχουν για αυτή την κρίσιμη εργασία λογισμικά τρίτων προφανώς γιατί δεν τους εμπιστεύονται. Εμείς στο iGuRu.gr σήμερα θα σας δείξουμε μία απλή λύση για να βρείτε το κλειδί σας από το λειτουργικό σύστημα που είναι εγκατεστημένο στον υπολογιστή σας χωρίς να χρησιμοποιήσετε κάποιο λογισμικό.

1. Ανοίξτε το Σημειωματάριο ή το Notepad ή το Notepad++ για όσους το έχουν ήδη εγκαταστήσει

2. Αντιγράψτε και επικολλήστε το ακόλουθο κείμενο

function Get-WindowsKey {
    ## function to retrieve the Windows Product Key from any PC
    ## by Jakob Bindslet (jakob@bindslet.dk)
    param ($targets = ".")
    $hklm = 2147483650
    $regPath = "Software\Microsoft\Windows NT\CurrentVersion"
    $regValue = "DigitalProductId"
    Foreach ($target in $targets) {
        $productKey = $null
        $win32os = $null
        $wmi = [WMIClass]"\\$target\root\default:stdRegProv"
        $data = $wmi.GetBinaryValue($hklm,$regPath,$regValue)
        $binArray = ($data.uValue)[52..66]
        $charsArray = "B","C","D","F","G","H","J","K","M","P","Q","R","T","V","W","X","Y","2","3","4","6","7","8","9"
        ## decrypt base24 encoded binary data
        For ($i = 24; $i -ge 0; $i--) {
            $k = 0
            For ($j = 14; $j -ge 0; $j--) {
                $k = $k * 256 -bxor $binArray[$j]
                $binArray[$j] = [math]::truncate($k / 24)
                $k = $k % 24
            }
            $productKey = $charsArray[$k] + $productKey
            If (($i % 5 -eq 0) -and ($i -ne 0)) {
                $productKey = "-" + $productKey
            }
        }
        $win32os = Get-WmiObject Win32_OperatingSystem -computer $target
        $obj = New-Object Object
        $obj | Add-Member Noteproperty Computer -value $target
        $obj | Add-Member Noteproperty Caption -value $win32os.Caption
        $obj | Add-Member Noteproperty CSDVersion -value $win32os.CSDVersion
        $obj | Add-Member Noteproperty OSArch -value $win32os.OSArchitecture
        $obj | Add-Member Noteproperty BuildNumber -value $win32os.BuildNumber
        $obj | Add-Member Noteproperty RegisteredTo -value $win32os.RegisteredUser
        $obj | Add-Member Noteproperty ProductID -value $win32os.SerialNumber
        $obj | Add-Member Noteproperty ProductKey -value $productkey
        $obj
    }
}

3. Αποθηκεύστε το παραπάνω κείμενο σε ένα αρχείο με κατάληξη «. Ps1″ οπουδήποτε στο σκληρό σας δίσκο.
Επαλήθευση: Για να βεβαιωθείτε ότι μπορείτε να αποθηκεύσετε το αρχείο με την κατάληξη «.ps1″, μπορείτε να πληκτρολογήσετε το όνομα του μέσα σε διπλά εισαγωγικά , για παράδειγμα, «kleidi-windows.ps1″ .

4. Ανοίξτε την κονσόλα Powershell ως διαχειριστής πληκτρολογώντας » powershell » στο πεδίο αναζήτησης του μενού Έναρξης ή για τα Windows 8 πατώντας τα πλήκτρα Win + R και γράφοντας στο νέο παράθυρο τη λέξη powershell. Λογικά θα ανοίξει το παράθυρο Powershell.

5. Ενεργοποιήστε την εκτέλεση των τοπικών αρχείων που δεν έχουν ψηφιακή υπογραφή . Αυτό μπορεί να γίνει με την ακόλουθη εντολή :

Set-ExecutionPolicy RemoteSigned

6. Πατήστε το πλήκτρο Enter για να επιτρέψετε την πολιτική εκτέλεσης εντολών που πρέπει να αλλάξει.

7. Τώρα θα πρέπει να πληκτρολογήσετε την ακόλουθη εντολή :

Import-Module C:\iguru\kleidi-windows.ps1; Get-WindowsKey

Σημείωση : Αλλάξτε τη διαδρομή προς το αρχείο kleidi-windows.ps1 στην παραπάνω εντολή, ανάλογα με την τοποθεσία όπου το έχετε αποθηκεύσει .

Και ορίστε!!! , έχετε το κλειδί προϊόντος που τώρα εμφανίζεται στην οθόνη σας!

Update: Ο χρήστης Giorgos Koliou είχε μία διαφορετική πρόταση, η οποία εργάζεται κανονικά, και σας την παραθέτουμε. Ευχαριστούμε θερμά τον φίλο μας για τα σχόλιά του.

Απλά κοπιάρετε αυτό σε ένα notepad++ με κατάληξη «.vbs», τρέξτε το και τέλος, έχετε τον κωδικό!

Set WshShell = CreateObject("WScript.Shell")
MsgBox ConvertToKey(WshShell.RegRead("HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\DigitalProductId"))

Function ConvertToKey(Key)
Const KeyOffset = 52
i = 28
Chars = "BCDFGHJKMPQRTVWXY2346789"
Do
Cur = 0
x = 14
Do
Cur = Cur * 256
Cur = Key(x + KeyOffset) + Cur
Key(x + KeyOffset) = (Cur \ 24) And 255
Cur = Cur Mod 24
x = x -1
Loop While x >= 0
i = i -1
KeyOutput = Mid(Chars, Cur + 1, 1) & KeyOutput
If (((29 - i) Mod 6) = 0) And (i <> -1) Then
i = i -1
KeyOutput = "-" & KeyOutput
End If
Loop While i >= 0
ConvertToKey = KeyOutput
End Function

3D Subscription Box Widget For Blogger

noreply@blogger.com (Anonymous) — Fri, 14 Feb 2014 02:58:00 +0000

I created this subscription widget using CSS Facebook login form, which is available to preview or download here. It look's great and sleek. You can also use this widget on yourwordpress blog or on a static HTML page.

It's coded with pure CSS, no images were harmed during creation process. Don't removecredits, and you're free to use or share this widget.

Add This Widget To Blogger:

Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

Paste following code:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login">
<h1>Subscribe To Us</h1>
<input type="hidden" value="YOURFEEDID" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit">
<p class="login-help"><a href="http://www.bwidgets.com?src=fbform" rel="nofollow">Powered By: BWidgets</a></p>
</form>

<style>
::-moz-focus-inner {
padding: 0;
border: 0;
}

:-moz-placeholder {
color: #bcc0c8 !important;
}

::-webkit-input-placeholder {
color: #bcc0c8;
}

:-ms-input-placeholder {
color: #bcc0c8 !important;
}

.input {
font: 12px/20px "Lucida Grande", Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}

.input {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.login {
padding: 18px 20px;
width: 200px;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
margin-bottom: 20px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.login-input {
display: block;
width: 90%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}

.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}

.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
</style>

Customizations:

In above code replace YOURFEEDID with your FeedBurner feed id. Also, you can change width of this widget by changing width: 200px; with your preferred width.

HOW TO ADD FLOATING WIDGET TO BLOGGER BLOG FOR ADS

noreply@blogger.com (Anonymous) — Thu, 06 Feb 2014 19:46:00 +0000

Many bloggers have approval adsense account or other, but they don't get enough clicks, so they always think some tricks of floating widget for place adsense ads or other ads,

For visitors eye attraction. So someone introduce floating widget for blogger blog that anyone can place adsense ads, affiliate ads or other ads. This trick generate more click on adsense or other ads. But my dear friends i am not sure that if you place adsense ads or other ads on floating widget then they banned on your account or not, So must read carefully respected advertising network company agreement.

HOW TO ADD THIS WIDGET TO BLOGGER

Go to Your Blogger Account.
Click on Layout.
Now Click on Add a Gadget (anywhere).
Then HTML/JavaScript .
And add the following code.

<style>

#AlamLife {

height:30px;

width:auto;

background: #005094 url('..');

background-repeat:repeat-x;

text-align:left;

padding-top:4px;

}

#adsground {

height:251px;

margin:0 auto;

width: 250px;

background:#fff;

border-bottom:2px #005094 solid;

border-right:2px #005094 solid;

border-left:2px #005094 solid;

text-align:center;

padding:4px;

}

#headlineatas {

opacity:1.0;

height:auto;

width:auto;

position:fixed;

top:65px;

left:10px;

border-bottom:1px #005094 solid;

border-bottom:0px blue solid;

color:#333;

padding:0px;

z-index:1001;

font-size:13px;}

</style>

function getValue()

{

document.getElementById("headlineatas").style.display = 'none';

}

</script>

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.alamlife.com/2013/08/how-to-add-floating-widget-to-blogger.html" target="_blank" onclick="getValue()">close(x)</a></span>

</div>

<h3>

</h3>

<h3>

</h3>

</p>

<p>

your Ads code here

</div>

CUSTOMIZE

Replace "your Ads code here" with your own adsense or other ads code .
You can change height and width by replacing its value 251px and 250px into your own .
If you want to float on the right side then find the following code by pressing ( Ctrl + F ) on keyword .
Find code left:10px;
And replace with right:10px;
Now you have done ! .

LavaLamp - Fancy Css3 Menu for Blogger (5 colors).

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 14:58:00 +0000

1. Go to blogger dashboard --> Template --> Edit Html (Tick expand widget template option).

2. Find(Ctrl+F) for closing header tag and opening outer tag, i.e.,

<div id='outer

or
search for the word Outer and you will notice any of the above two codes.

3. Paste the following bulk code just above it.

<style>
/*LAVALAMP CSS3 Menu By BloggerTricks.Biz*/
.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;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}
.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;
}
.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;
}
.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;
}
.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;
}
.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
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;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
/*LAVALAMP CSS3 Menu By BloggerTricks.Biz*/
</style>
<script src='http://yourjavascript.com/3131111161/jquery-1.4.1.min.js'/>
<script src='http://yourjavascript.com/1414311106/lavalamp.js'/>
<div class='lavalamp'><ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='YOUR-LINK-HERE'>Link 1</a></li>
<li><a href='YOUR-LINK-HERE'>Link 2</a></li>
<li><a href='YOUR-LINK-HERE'>Link 3</a></li>
<li><a href='YOUR-LINK-HERE'>Link 4</a></li>
<li><a href='YOUR-LINK-HERE'>Link 5</a></li></ul>
<div class='floatr'/>
</div>

Customization:

Replace YOUR LINK HERE with your links.
Replace Link 1/2/3/4/5 with your menu elements.

Note:-
Replace <div class='lavalamp'> with

<div class='lavalamp orange'>
<div class='lavalamp yellow'>
<div class='lavalamp cyan'>
<div class='lavalamp magenta'>
<div class='lavalamp dark'>

Depending on your choice. . Lavalamp css3 menu with each of these colors are showcased in the Demo given above.

4. Finally save the Template.

Now you can notice Lavalamp Css3 menu working perfect in between the header and the post body of your blog as shown in the below demo.

DEMO

Hope you enjoyed this menu. Please take some time to share this tutorial with your friends. Kindly give your feedback about this in the comment section below.

Jquery Featured Social Slider Widget

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 14:50:00 +0000

DEMO

Jquery Featured Social Slider Widget for Blogger

1. Go to blogger dashboard --> Template --> Edit Html.

2. Find(Ctrl+F) for <body> tag and Paste the following peace of code just below it.

<div class='clear'/>
<style>
/*Social Sharing Top Slider WIdget By BloggerTricks.Biz*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxIrAC8GkNZOxOkYTx2lQ9UDmoDwVUFdhVqBGBWbJ4u_aOFsWMZ_k9g5Rizbduk3i_oGVu_FrZqUAP4MDiBUcVq3KeOcPyPol5x2RQHF4KGL25lxxwuoYKeXP6pAibJ4Uid9on1pO3-YE/s1600/%5Bbloggertricksdotbiz%5DFACEBOOK.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiK2JMlCc7JJ-Zx3fkAAFGJUXJETparW-Ooq2Ck9VOkxQuk1zIet4W69VjctdnVvGw9U3Wn9ZhC3TKrCVNGBxW_6rdIFOmnjRShATKzxAE8QtB_eKIvxq7L4cgnZk27evKaJj0QOwrRA/s1600/%5Bbloggertricksdotbiz%5DTWITTER.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LmWAhZXvBEhjhwur_dd1_E1v-aVAbPNyvswXyCE4jmc7VFzgi64MoVRbtn3qQv3ncalnjoYNzbNXmeT3XPDs4nC3q8_9s7qL0wcTmkX-w9diqNvXVdssP7v24A97cM7b-iYnm6T4dZs/s1600/%5Bbloggertricksdotbiz%5Dgplus.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdlND69fRkDnlTa1WrZ9PI-MLx1Vl5o5kEB0rwT7jxrWyEeLX8Cqc4ufD9hFCt5s0p8KSvCcbRU04tEOgddKsPm1mc5LeX-OlSL_THY-F296LZy_9u8vaNfiR15M1MM0tqYQzYLLTbIs8/s1600/%5Bbloggertricksdotbiz%5DRSS.png);
}
ul#navigation .Contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNGQ8JR0mNw9zO8uGAXx7AT4sBBmC3WtYhc6QLMkSzKi6m3ECdZQ8AX45xJHNMxJy0GlfyCQjXvRZbhKfuQfe2i6abOt4KImzVEreJbIG0OIQOl697bXbvWNdQPBie06ueVGaE2CFnEI/s1600/%5Bbloggertricksdotbiz%5Dcontact.png);
}
/*Social Sharing Top Slider Widget Style End By BloggerTricks.Biz*/
</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id='navigation'>
<li class='facebook'><a href='http://facebook.com/bloggertricksdotbiz'>Facebook</a></li>
<li class='twitter'><a href='http://twitter.com/jackievijay143'>Twitter</a></li>
<li class='googleplus'><a href='https://plus.google.com/110100302012846213219'>Google+</a></li>
<li class='rss'><a href='http://feeds.feedburner.com/bloggertricks/BTVJ'>RSS</a></li>
<li class='Contact'><a href='http://www.bloggertricks.biz/p/contact-us.html'>Contact Us</a></li></ul>

3.Save the Template.

Customizations:

Replace http://facebook.com/bloggertricksdotbiz with your Facebook Page Url.
Replace http://twitter.com/jackievijay143 with your Twitter Profile Url.
Replace https://plus.google.com/110100302012846213219 with your Google Plus Url.
Replace http://feeds.feedburner.com/bloggertricks/BTVJ with your RSS Feed Url.
Replace http://www.bloggertricks.biz/p/contact-us.html with your Contact Us Page Url.

Finally, View Your Blog and There Comes the elegant Jquery social slider at the top right of your blog.

Kindly let me know your feedback and difficulties in adding the widget on your blog in the comment section below. Stay updated with the blog for further spicy updates. Take care pals. .

Spinning 3D Social Media Icons

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 14:42:00 +0000

Spinning 3D Social Media Icons

1. Go to blogger dashboard --> layout --> Add a gadget ( Html / JavaScriptgadget ).

Spinning 3D Social Icons 64*64

<style>p#hb_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNuA4_3IgG3pocqTM2lOBPgCGKASyr8_D_JKWrrXhuhRBxIWjMsrad5KKzQCZ87L8IsMXeMkTGPS0OYOhHeJqJHZWSvJwhcBjtJpJJjogKRpZCrK0ukLU1ZG_ogqUvGAWWgb-jHqBvd0c/s1600/
bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/110100302012846213219">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUgwIJvBcOwq86SYOIhKxOXGK1Vni1F0dwjiH68ZNxU7nHVzyGEqyK_q6mpTlX4QaFDraBNNEMivJaStl4yXGhUvqJZ9VXfdXTCDCtVckQC_SvPyr4Dhwh2mGxd9n_ZRhUd3OXPze448I/s1600/
bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9idxKMEQSGbgQ5MF5A0NafE5DD9WTYe-g3OER4xbIV3nUsmrNegogUwy0UtSzqu7kFHmB5YEYgycUwx4pdh9rvCUW4BQFFGRh0ez-DiQF2aoeqL0ywIr_MyFZMUBCyR9J-lIK0p36Bs/s1600/
bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/jackievijay143">
<img border="0" src=" http://3.bp.blogspot.com/-Npr8b-w9EDw/UCM9Itv5_cI/AAAAAAAABhk/8ejVQgh4k7w/s1600/
bloggertricksdotbizPT.png " /></a>
<a href="http://www.feeds.feedburner.com/bloggertricks/btvj">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LC2NenFpT-wTh5u5K5Qd_6TbW1GHb300f5BbYcDTb4XvAHxIqatwuNLChTxWip2Rh9RAsXWwpdEebV3dV6Ke3OVaDw4iTXAWBW599hEDGrBngpVcNH2XWilgou_MNI0NjtYC_UfqlWI/s1600/
bloggertricksdotbizRSS.png" /></a>
</p></center>

The above script is for 64*64 dimension icons.

Spinning 3D Social Icons 48*48

<style>p#hb_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66EQcckF8xgtE66bYJNHwjhyphenhyphen1vK3lEmMum4hb0teS0HoorvVb5zGLI5-FbvLXMt15ZSuRR0pK1c4Hb3tLsCjKKlJsGhH-QlVki7JgXXbuhCWmzX6W0QoyVkcYIj9blOp76bWQYcF6ef4/s1600/bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/110100302012846213219">
<img border="0" src=" http://2.bp.blogspot.com/-88F1IMlPog0/UCM_cDdjh5I/
AAAAAAAABiE/vexbC6LvSe8/s1600/bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcL8LGooFT09bXfQ8eFN3bQx-wTxmN-VLPBay0Lrt4qwtgprEyXCdQHxhqKhEG_ehbkE0kx2CNYiwhGPcqABWjbzGfyj3zXyyBQOhdKjeFz0mKemCugpYf6R-pWyUf_gE9ldWjLFrrxE/s1600/
bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/jackievijay143">
<img border="0" src=" http://1.bp.blogspot.com/-9xEgooMeW3I/UCM_hw_I8uI/
AAAAAAAABiM/Hc7FJplcwjY/s1600/bloggertricksdotbizPT.png " /></a>
<a href="http://www.feeds.feedburner.com/bloggertricks/btvj">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04Eknsns4kOv5WF6-5aAiGx2j4lTU1_z064WJUBgpRhvseJiMYc8ro-O0HoWeH7LVbQ-0yalQSvC-0VozqNoZnDjzfTj_btKhy63LPOLAbxK1fZHBnVHfAs3COeS73Eo0oq9_pco5xr4/s1600/
bloggertricksdotbizRSS.png" /></a>
</p></center>

The above script is for 48*48 dimension icons.

Note:-
Replace the social links with your respective social links.

2. Copy the widget script given above depending on your own desired dimension.

3. Paste the copied script inside your Html/JavaScript gadget and Save the Gadget.

4. Save the Layout.

Fix:-
The paragraph style of your sidebar may override this widget and make the icons to appear in 2 lines, in such case kindly feel free to ask me and I will help you fix it to make it appear in a single row.

That's all pals. . Now view your blog to feel the power of spinning 3D icons. :)

Black Beauty - Social Subscription widget

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 14:06:00 +0000

I had previously shared the BT style social subscription widgetuniquely created by Me. So far i didn't got time to create further widgets for blogger. Today i have come up with another eye catchingsocial subscription widget for blogger blogs which can definitely attract each and every bloggers. This widget is uniquely created by Me and the credit of the 3D icons used in this goes toPaul Crowe. As you can notice, I have implemented a smooth and sleekEmail subscribing box and spinning 3D social icons in this widget that made me to get love on this widget. Black Beauty social subscription widget takes a single step to get it placed on your blog within seconds.

DEMO

1. Go to blogger dashboard --> Layout --> Add a Gadget ( Html / JavaScriptgadget).

2. Paste the following peace of code inside it.

Black Beauty widget code

<style>
#BTsub{
width:280px;
padding:70px 10px 25px 10px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN69pvd5tuJF_7nTfKpwWG1Lw747IjEB2KkMe2ynCzG9pzR_InJ9l9DkCULEgwI2a_PRKuYikpvqz2ZOUAXfR05AJQTbhh9SCxtHkTQY7VDuwDK3T7smr5iprJzhN22COp-kO5TUskIe8/s1600/bloggertricksdotbizemailbg.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
p#BT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#BT_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
BTform.emailout{
margin:20px;
display:block;
clear:both;
padding:20px;
float:right;
}
.BTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLj9OuOWWURVZnKhyphenhyphen59tR-QLIHRicOGrHEAphrzp08PQjBn7K65kWnDj41d42FThMlJYjnG2PCAAupNgWuvfU-ZrbtAlyIhchDQeKWbVLzN1zn_42ag6tyYvqfnVMF0-qr1L-tECRHS9E/s1600/BTMAIL.png) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:130px;
height:20px;
}
.BTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id="BTsub">
<center><p id="BT_socialicons">
<a href="http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66EQcckF8xgtE66bYJNHwjhyphenhyphen1vK3lEmMum4hb0teS0HoorvVb5zGLI5-FbvLXMt15ZSuRR0pK1c4Hb3tLsCjKKlJsGhH-QlVki7JgXXbuhCWmzX6W0QoyVkcYIj9blOp76bWQYcF6ef4/s1600/bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/110100302012846213219">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf3jrTefKy9JlFuKfTA9NN8HjmveZ26uli79YaVJ81d8hZRqaHiEEserg3csSGMKbKfDWemfuQylnWrzoC9eF4-mvYmxUBEM-XjHBq82wEy3Gt3eM4ZLODlMQWqbGRqCG0WInWqIQQXY/s1600/bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcL8LGooFT09bXfQ8eFN3bQx-wTxmN-VLPBay0Lrt4qwtgprEyXCdQHxhqKhEG_ehbkE0kx2CNYiwhGPcqABWjbzGfyj3zXyyBQOhdKjeFz0mKemCugpYf6R-pWyUf_gE9ldWjLFrrxE/s1600/bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MFcZ9MKYwtZC86osMP0cTp77Uzo374t5jLo1ZLHplmGCIwl1ScZTQDpemkUVH52dfzm-oZVEe5CtDikFimTHe45AIpTMboJDiFIwbEtKZNGMWwzrqNnd2a0mMzQB738iq_mX02diERU/s1600/bloggertricksdotbizPT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your Email To Receive Quality Updates Directly Into Your Inbox FREE!!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertricks/BTVJ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Bloggertricks/BTVJ'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='BTtextbox' 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='BTbutton' title='' type='submit' value='Submit'/>
</form>
<p style='float:right; color:#000; font-size:10px;'><a href="http://www.bloggertricks.biz/2012/08/black-beauty-social-widget.html" target="_blank">|Grab This|</a></p>
</div>

Customize

Replace the social links highlighted with your corresponding social profile links.
Replace Bloggertricks/BTVJ with your Feedburner Id.

3. Save the gadget.

4. Save Your Layout.

"Simple Clean White" Blogger Template

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 13:29:00 +0000

Every blogger wants his blog to be different from others,that's why he/she always try to make something different than others including their template.Today I am sharing an amazing blogger template which is named as "Simple Clean White" blogger template.It is neat,clean and simple blogger template containing a pure CSS3 multi level drop down menu.This blogger template is designed by Dadang Herdiana,now lets see some major features of this template.

Pure CSS3 Multi Level Drop Down Menu
Auto Read More hack
3 Coloumn Footer
Simple and Clean Design

Click On Image To Enlarge

Preview Template Download Template

Jquery Multi Level Drop Down Menu To Blogge

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 13:21:00 +0000

Drop down menus helps your readers and visitors to easily navigate through your blog's important links or categories.I hope this drop down menu will surely help you to organize your links,categories and sub-categories easily.This script for this menu was taken from dynamicdrive and bloggerized by Helper Blogger.In order to create smooth hover effect this use jQuery. The arrange of HTML is damn easy so that you can customize this menu very easily.

Play With Menu

How To Add This Menu To Blogger?

Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout) Click on add a gadget link just below of Header (see image below)

Paste below code and save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.helperblogger.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
 
  </ul>
</li>
<li><a href="http://www.helperblogger.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

Customizations

To change background of menu find this #414141 code tow times and replace this code two times. To change font size and font family fing this code font: bold 12px Verdana; To add a link in menu use <li> To add a sub-link use <ul>. Replace the # symbols with page links Replace the Sub Item 1.1 with Page Titles.

Beautiful Drop Down Navigation Menu To Blogger Blog

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 12:15:00 +0000

In this post I am going to share with a beautiful grey dropdown menu created with CSS & JavaScript. I am also using this menu on our blog. Drop down menus provide easy and neat navigation by organizing and featuring important category links of your blog. With increased use of categories and tags, organizing links in a simple menu is difficult therefore the menu that we share today provides you with easy control over its column and rows display. The top bar menu instruction below are for blogger users only. So Read All Step Carefully Dropdown menu work Perfect. See Live Demo on our demo blog and check it our Drop Down Animated Effect.

1. Add Drop Down Menu Style Sheet.

2. Add JavaScript in Head Section.

3. Final Add HTML Code For Links.

That’s it in three steps you are done.

Always Remember Before Editing Your Template Make a Template Backup (how to make a template backup)

1. Go to your blogger Dashboard>> Template>> Proceed Press CTRL+F and the following code in your template. (how to find code using search bar)

]]></b:skin>

2. and paste the following code before/above “]]></b :skin>”

/*Start Drop Down CSS by http://bl0gger-tricks.blogspot.com*/
.nav{
width:100%;
height:36px;
background:#f9f9f9;
border-top:1px solid #e4e4e4;
border-bottom:1px solid #e4e4e4;
box-shadow: 0 2px 2px #eee;
z-index:1;
}

.menu{
width:1050px;
list-style:none;
font:16px Source Sans Pro,Arial,Verdana;
font-weight: normal;
text-align:center;
margin:0 auto;
}

.menu a{
float:left;
color:#000000;
text-decoration:none;
width:100px;
line-height:36px;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
transition:.2s linear;
-o-transition:.2s linear;
}

.menu a:hover,li.menuhover a{
color:#111;
background:#efefef;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
transition:.2s linear;
-o-transition:.2s linear;
}

.menu li,.menu li span{
position:relative;
float:left;
width:100px;
z-index:2;
border-left:1px solid #e3e3e3;
}

.menu li span{
border-right:1px solid #e3e3e3;
border-left:none;
}

.menu ul{
display:none;
position:absolute;
font:normal 16px Source Sans Pro,Arial,Verdana;
font-weight: normal;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
box-shadow:0 2px 3px #ccc;
}

.menu ul li{
float:none;
border-top:1px solid #ccc;
width:150px;
}

.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
width:137px;
text-align:left;
padding-left:10px;
color:#444;
}

.menu ul li a:hover{
background:#fbfbfb;
color:#000000;
border-left:5px solid #088A4B;
-webkit-transition:ease-in 0.15s all;
-moz-transition:ease-in 0.15s all;
-o-transition:ease-in 0.15s all;
-ms-transition:ease-in 0.15s all;
transition:ease-in 0.15s all;
text-shadow:0 1px 0 #fefefe
}
/*End Drop Down CSS*/

Note:- in CSS Section you can edit Font-size , Font Style, Font Color, Background, and Also Edit Hover Effect. if you want to edit leave your comment below.

3. Find The Following Code in your template.

</head>

4. Paste the Following Script before/above “</head>”

<script type='text/javascript'>
//<![CDATA[
var dropd={};function T$(i){return document.getElementById(i)}function T$$(e,p){return 

p.getElementsByTagName(e)}dropd.dropdown=function(){var p=

{fade:1,slide:1,active:0,timeout:200},init=function(n,o){for(s in o){p[s]=o[s]}

p.n=n;this.build()};init.prototype.build=function(){this.h=[];this.c=[];this.z=1000;var s=T$

$('ul',T$(p.id)),l=s.length,i=0;p.speed=p.speed?p.speed*.1:.5;for(i;i<l;i++){var h=s

[i].parentNode;this.h[i]=h;this.c[i]=s[i];h.onmouseover=new Function(p.n+'.show('+i

+',1)');h.onmouseout=new Function(p.n+'.show('+i+')')}};init.prototype.show=function(x,d){var 

c=this.c[x],h=this.h[x];clearInterval(c.t);clearInterval(c.i);c.style.overflow='hidden';if(d)

{if(p.active&&h.className.indexOf(p.active)==-1){h.className+=' '+p.active}if(p.fade||p.slide)

{c.style.display='block';if(!c.m){if(p.slide)

{c.style.visibility='hidden';c.m=c.offsetHeight;c.style.height='0';c.style.visibility=''}else

{c.m=100;c.style.opacity=0;c.style.filter='alpha(opacity=0)'}c.v=0}if(p.slide){if(c.m==c.v)

{c.style.overflow='visible'}else{c.style.zIndex=this.z;this.z++;c.i=setInterval(function()

{slide(c,c.m,1)},20)}}else{c.style.zIndex=this.z;this.z++;c.i=setInterval(function(){slide

(c,c.m,1)},20)}}else{c.style.zIndex=this.z;c.style.display='block'}}else{c.t=setTimeout

(function(){hide(c,p.fade||p.slide?1:0,h,p.active)},p.timeout)}};function hide(c,t,h,s){if(s)

{h.className=h.className.replace(s,'')}if(t){c.i=setInterval(function(){slide(c,0,-1)},20)}

else{c.style.display='none'}}function slide(c,t,d){if(c.v==t){clearInterval(c.i);c.i=0;if

(d==1){if(p.fade){c.style.filter='';c.style.opacity=1}c.style.overflow='visible'}}else{c.v=(t-

Math.floor(Math.abs(t-c.v)*p.speed)*d);if(p.slide){c.style.height=c.v+'px'}if(p.fade){var 

o=c.v/c.m;c.style.opacity=o;c.style.filter='alpha(opacity='+(o*100)+')'}}}return{init:init}}();
//]]>
</script>

and click on preview and all things working fine then click on save and your template editing for dropdown is done. now time to add links below header.

5. and finally add HTML Code Where you Want To show your Navigation Menu if you are already using drop down menu replace the HTML code with below html code.

<!-- Start - Navigation Menu  -->
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#>Blogger</a></li>
<li><a href='#>Adsense</a></li>
<li><a href='#>SEO Tips</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>Widgtes</a></li>
<li><a href='#>Downloads</a></li>
<li><a href='#'>Tools&#187;</a>
<ul>
<li><a href='#>HTML Editor</a></li>
<li><a href='#>Escape Tool</a></li>
<li><a href='#>ParseTool</a></li>
<li><a href='#>Color Code</a></li>
</ul>
</li>
</ul>
</div>
<!-- End - Navigation Menu -->
<script type='text/javascript'>
var dropdown=new dropd.dropdown.init(&quot;dropdown&quot;, {id:&#39;menu&#39;,
active:&#39;menuhover&#39;});
</script>

That’s it you are done. The widget is extremely easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign “#” with respective links.

click view blog and check it out your new dropdown menu..

MintShare – Pure CSS & HTML Based Social Share Widget

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 12:04:00 +0000

Hundreds of social bookmarking plugins / widgets available on the Internet. So you may ask, why do we need another. Ok, let me tell you why we made MintShare in a simple way. Mint Share is one of the few CSS and HTML based widget. At our Bloggermint lab, we spend good time to come up with this widget. Made based on CSS & HTML without using any Javascripts, these buttons are really fast-loading and small in size. Thanks to Paul Robert Lloyd for the beautiful social media icons.

We’ve used some CSS3 effects such as border-radius, box-shadow and transition. These CSS3 effects are only visible in Mozilla Firefox, Google Chrome, Safari and other CSS3 supporting browsers except IEs and the transition/animation effect is only visible in Webkit browsers.

View Live demo

For Blogger

1. Sign into Blogger > Design > Edit HTML. Check or tick [/] the ‘Expand Widget Templates‘ at top right corner of editor.

2. Click on any of the ‘CSS‘ link below to get the CSS code of the button that you wish to use. Copy the CSS code and paste it just before </b:skin> closing tag in your Blogger Template.

3. Copy the HTML code of the button you wish to use by clicking on the ‘HTML‘ link placed next to ‘CSS’ link.

4. Now, search for <data:post.body/> using CTRL+F. Paste that HTML code immediately after <data:post.body/> tag and click ‘Save’.

For WordPress

Click the button below to download the WordPress Post Share URLs ready source file.

Download Now

For HTML Websites

Click the button below to download the Post Share URLs ready source file.

Download Now

Don’t forget to share your thoughts about our work!

Replace Older, Newer And Home Text With Image Or Text

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 12:00:00 +0000

In this post I am gonna show you how replace older post, newer post and home text with Images. I have 100 images for this tips which I share in my download section you download it from our download section in free of cost. These links are shown at the bottom of your post body. if you do not want to display these links I will tell you in my next post how to remove these links. you can also change these words with your own words for example “oldre posts” to “Past” “Home” to Present” and “Newer Posts” to “Furure” you may substitute the Older posts with other words like previous Article, Yesterday’s Article or anything you want. I am also making video tutorial for this tricks see video End of this Article. So Lets Start the tutorial.

1. How To Replace With Your Own Words.

Always Remember Before Editing Your Template Make a Template Backup (how to make a template backup)

1. Go to your blogger Dashboard>> Template >> Proceed and click on expand widgets box.

Press CTRL+F and Find The Following Code in you template. ( how to find code using search bar)

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' 
expr:id='data:widget.instanceId + "_blog-pager-newer-link"' 
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' 
expr:id='data:widget.instanceId + "_blog-pager-older-link"' 
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>

and change the following four lines with your Words.

1. <data:newerPageTitle/> to Future

2. <data:newerPagetitle/> to Past and

3. <data:homeMsg/> to Home or

You can of course replace these with other words. For example, you may substitute the Older Posts with other words like Previous Rants, Yesterday's words, Lost Files or anything you like.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>Future</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>Past</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</b:if>
</b:if>
</div>

Final Text Look Like This..

That’s it you are done click on preview button and check all things working fine then click on save.

2. How Replace Older Newer Home Links With Images

1. Go to your blogger Dashboard>> Template>> Proceed>> and Click on Expand Widget Box.

Press CTRL+F and find the following code.

<data:newerPageTitle/>

2. and replace above code with the following code.

<img border="0" height="50"
src=http://4.bp.blogspot.com/-5KhhMJZ7N5A/T2TpPgm7kuI/AAAAAAAAA0Y/9X4ITsILU_U/s200/Previous+Icon.png 
width="50" />

3. Find The Following Code.

<data:olderPageTitle/>

4. and replace with these lines.

<img border="0" height="50" 
src="http://4.bp.blogspot.com/-eHAvMF8QzMo/T2TpOpHsrBI/AAAAAAAAA0Q/RWR2MurGnJQ/s200/Next+Icon.png" 
width="50" />

5. And finally find the following Code. in template you have found two lines like this code.

<data:homeMsg/>

6. Replace above code with this. you have found 1 of 2. Replace 1 of 2 codes with this code.

<img border="0" height="50" 
src="http://2.bp.blogspot.com/-PJ9bQIARuyc/T2TpNnibfJI/AAAAAAAAA0M/cRHTnOFbbAk/s200/Home+Icon.png" 
width="50" />

That’s it click on preview and finally click on save. your done. you can also use your own images in my next post I am share with lots of images for this tricks so stay connected with social network or subscribe me on our blog. and your can also use these images.

<img border="0" height="30" 
src="http://4.bp.blogspot.com/-mRF8lPfU1e4/T2WkxZH5YxI/AAAAAAAAA2g/fW1F0ppqoUQ/s320/Previous+Arrow.png" 
width="150" />
<img border="0" height="30" 
src="http://3.bp.blogspot.com/--uKj9JEjmy8/T2WkuSzKdbI/AAAAAAAAA2Q/4VoxSrp_zxw/s320/Home.png" 
width="150" />
<img border="0" height="30" 
src="http://2.bp.blogspot.com/-Y966w-pt7Rs/T2WkvevjEYI/AAAAAAAAA2Y/VcTd9dHImpo/s320/Next+Arrow.png" 
width="150" />

Need Help!……

This Tricks would work just fine if all the above steps are carefully followed. The steps are extremely easy to try. I just hope you find it worth using. If you ran into any technical problem just feel confident to leave your comments. I would love to help you out. Wishing you all the best of life buddies.

Awesome CSS 3 Dropdown Menu–Without JavaScript

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 11:07:00 +0000

In this post I will share with you great beautiful and ready to use Css3 Dropdown. This Widget is Simple, Cool & The Main Part is that It Doesn’t Needs Any JQUERY or JavaScript. It uses no images at all and load fast. This Beautiful drop down menu is created by Catalin Rosu and uses no images or scripts at all! We will be sharing a modified version which work perfectly with Blogger. In this Post you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool CSS3 Features. Code implementation is very simple & easy. if you have any trouble feel free to post any query you may have I will loved reply back as soon as time allow.

Live Preview

How To Add Css3 Drop Down Menu

For Further Help See Video Tutorial

1. Go to your Blogger Dashboard>> Layout >> and click on add a gadget

2. Choose HTML/JAVASCRIPT Widget

3. and paste the following inside content are.

<style>
/*-- CSS3 Drop Down Menu By Blogger Tricks http://.bl0gger-tricks.blogspot.com-----*/

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 960px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu"> 
<li><a href="#">Home</a></li> 
<li> 
<a href="#">Categories</a> 
<ul> 
<li><a href="#">CSS</a></li> 
<li><a href="#">HTML</a></li> 
<li><a href="#">Jquery</a></li> 
<li><a href="#">Blogger Tips</a></li> 
</ul> 
</li> 
<li><a href="#">Free Vector</a>
<ul>
<li><a href="#">Social Icon</a></li> 
<li><a href="#">Website Icon</a></li>
</ul>
</li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Tools</a>
<ul>
<li><a href="#">Parser Tool</a></li> 
<li><a href="#">Escape Tool</a></li>
</ul>
</li> 
</ul>

The widget is easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign # with Your Pages links. Click save and Done.

if you have any problem post your comments below in comment section.

Ornamented Slide Open Social Sharing To Blogger

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 11:01:00 +0000

n my previous Posts i have written a few Tutorials on Share this socialBookmarking Gadgets. Today i going to Share a beautiful ornament style sharing widget. This Ornamented Sharing widget Showing at Bottom Right Corner of your blog with Social Bookmarking options for your blog Readers. When Readers mouse hover the ornamented slides open with Sharing Buttons for FaceBook, Twitter, Pintrest, StumbleUpon, Google Plus & ETC. Check Out The Demo Link Below.

Live Preview

Add It To Blogger

Note:- Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)
1. Go To Your Blogger Dashboard>> Template>> Proceed.
2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)

</head>

3. Paste The Following Code Above/Before </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;1cce35ce-6744-4bac-9fa5-8f17a67a6fa6&quot;, onhover:false});</script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Next Find the following piece of code.

</body>

5. and paste the following code before/above “</body>.”

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisOrnament'/><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisOrnament&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;pinterest&#39;,&#39;stumbleupon&#39;,&#39;linkedin&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39;
<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;holiday&#39;});</script></div>

Click To Save your Template & You’re Done! Also Check out Our Previous Posts onSocial Bookmarking.
If you face any trouble while installing the Gadget then please let us know. I am always open to curious and delicious questions so never hesitate asking for help.

Beautiful Open Heart Slide Social Sharing Gadget For Blogger

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:57:00 +0000

Firstly Open Your Blogger Dashboard >> Then Open Template

Now Click on Edit HTML

Then Search For Code which look likes </head>

Then Paste the below code Just Above/Before the </head>


<!-- Social Bookmarking Gadget By www.SafeTricks.Net start-->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Social Bookmarking Gadget By www.SafeTricks.Net end-->

After Pasting Above Code now Search for another code which looks like </body>

Then Paste Below code Just Before/Above </body>


<div style='position: fixed; bottom: 3%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/></div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script>

After Pasting both code Save Your Template Settings.

Now Refresh Your Blog and See this amazing widget on you Blog.

Slide Open Egg Social Bookmarking Gadget For Blogger

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:52:00 +0000

Add The Share This Egg To Your Blog.

Step 1. In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose "Edit Html" > Then Proceed, as shown in the video below.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>

Important, Move The Position Of The Gadget :

The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.

Step 6. Save Your Template.

That's it the gadget has been added to your blog.Make sure to check out more of our Blog Gadgets andSocial Bookmarking Gadgets.

Drop Your Comments And Questions Below.

Remember Always Back Up Your Template Before You

Make Changes...

Black CSS3 Drop Down Menu To Blogger

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:31:00 +0000

Previously i wrote a tutorial on add Css3 NavigationMenu to blogger blog. it is always fun to learn and explore the new standards introduced for CSS. With growing Development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. It is compatible with all major browsers like Firefox, Chrome and safari. Today in this post i will share with you great beautiful and ready to use CSS3 Dropdown Menu. This Navigation is Simple Cool & The main Part is that it doesn’t need any JQUERY or JavaScript. it uses not image or scripts at all! We can build an awesome CSS3 animated Drop Down Navigation Menu some of these cool CSS3 Features. So Lets Start The Tutorial.

Add It To Blogger Blog

Note:- Make Sure Before Editing Template Make a Template

1. Go To your Blogger Dashboard>> Template>> Click Edit HTML

2. Search for </b:skin>. Click the black arrow to expand the code.

3. Paste the Following Style just above </b:skin>

#Black_menu {
background:#333333;
width: 100%;
margin:0px;
padding:0px;
font-size: 13px; 
font-family:arial;
font-weight:bold;
}

#Black_menu ul {
height:41px;
list-style:none;
margin:0;
padding:0px;
}

#Black_menu li{
float:left;
padding:0px;
}

#Black_menu li a {
background:#333;
color:#cccccc;
display:block;
font-weight:bold;
line-height:41px;
border-right: 1px solid #444444;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

#Black_menu li a:hover, #Black_menu ul li:hover a {
background: #444;
color:#FFFFFF;
text-decoration:none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

#Black_menu li ul {
background:#333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}

#Black_menu li:hover ul {
display:block;
}

#Black_menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

#Black_menu li:hover li a {
background:none;
}

#Black_menu li ul a {
display:block;
height:41px;
font-size:13px;
font-style:normal;
border-bottom: 1px solid #444;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

#Black_menu li ul a:hover, #Black_menu li ul li:hover a {
background:#444; 
border:0px;
color:#FFF;
border-bottom: 1px solid #444;
text-decoration:none;
margin-left: 5px;
padding:0px 10px 0px 15px;
}

4. and paste the following HTML Code where you want to show Navigation menu.

<div id='Black_menu'>
<ul>

<li class='active '><a href='#'><span>Home</span></a></li>

<li class='sub '><a href='#'><span>Blogger</span></a>

<ul>

<li><a href='#'><span>SEO</span></a></li>

<li><a href='#'><span>Template</span></a></li>

<li><a href='#'><span>Widgets</span></a></li>

<li><a href='#'><span>Plugins</span></a></li>

</ul>

</li>

<li><a href='#'><span>Applicatoin</span></a>

<ul>

<li><a href='#'><span>HTML Encoder</span></a></li>

<li><a href='#'><span>HTML Editor</span></a></li>

</ul></li>

<li><a href='#'><span>Tools &#187</span></a>

<ul>

<li><a href='#'><span>Online HTML Editor</span></a></li>

<li><a href='#'><span>Color Code</span></a></li>

<li><a href='#'><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href='#'><span>Color Code</span></a></li>

</ul>

 </div>

The widget is extremely easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign (#) with respective links.

and you are done…!!!! Don’t Forget To check our previous Menus.

Subscription Box For Blogger

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:29:00 +0000

Have you ever thought of combining all Social Subscription Buttons into one Cute little Widget? The main idea behind adding all the Social Buttons into one widget is to give multiple options to the users so, they can subscribe to your site with their personal favorite social platform. The Idea of joining Social Buttons into one gadget is not different because there are lots of Subscriptions widgets that work in the same fashion. However, they are not flexible enough to support all foremost Social Platforms. For that reason, we have designed a brilliant Social Subscription widget. It has all the key Social Platforms that are essential for a website. Today, in this article, we will Learn How to Add Advance Social Subscription Widget in Blogger. This social subscription will enable users to like/follow your visitors on the social networks such as Facebook, Twitter, Google Plus, Pinterest and subscribe your Email feeds using the built-in feedburner email subscription widget.

Live Demo

Update:- 06-01-2013 Fix Style Issue for IE7..

Add It To Blogger

1. Go to your Blogger Dashboard>> Layout>>

2. Click Add a Gadget>> Choose HTML/JavaScript

3. and paste the following code in HTML Area (Title Area Leave blank)

<style>

.subscribebtrix {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#d3dde3));
background: -moz-linear-gradient(top, #f5f5f5, #d3dde3);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
display:inline-block; /* IE is so silly */
border: 0px solid #000000;
border-radius: 5px;
padding: 0px 10px 10px 10px;
width: 310px;
}
.subscribebtrix img {
border: none;
}

.tbimailbox {
width: 270px;
color: #666;
font: 16px 'Trebuchet Ms', Sans-Serif;
padding: 10px 15px;
border: 1px solid #D3D3D3;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.button {
   width: 300px;
   border-top: 1px solid #96d1f8;
   background: #0571e6;
   background: -webkit-gradient(linear, left top, left bottom, from(#123d60), to(#0571e6));
   background: -webkit-linear-gradient(top, #123d60, #0571e6);
   background: -moz-linear-gradient(top, #123d60, #0571e6);
   background: -ms-linear-gradient(top, #123d60, #0571e6);
   background: -o-linear-gradient(top, #123d60, #0571e6);
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
   display:inline-block; /* IE is so silly */
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: "Verdana", sans-serif;
   font-weight: bold;
   text-decoration: none;
   vertical-align: middle;
   }

.button:hover {
   background: #123d60;
   color: #ccc;
   }

.button:active {
   border-top-color: #123d60;
   background: #123d60;
   }

</style>

<br />
<div class='subscribebtrix'>
<div align='center' style='color: #333; font: 22px Verdana; font-weight: bold;  margin: 0px 0px 15px 0px; padding: 10px 0 10px;'>
Stay Connected</div>
<br />
<br />
<center>
<div style='margin: -30px 0 20px 0;'>
<a href='http://www.facebook.com/bloggertrix' target='_blank' title='Join us on Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIImzXYDk7jnS-hZgP4xtP-1zOcqGC00ZYYQEGKmho4ritnoeJPpuSQYEhWup-pq6EQQp4pfVMyubH-IP3yes5tlAAJUKNOWE_UN8152anu-hbIq-MLMavj1pguDlDm15vtuzQoFhEmEnY/s1600/facebookicon.png' /></a>
<a href='http://www.twitter.com/bloggertrix' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEa4ZtL6ig0fNTn0eAc_V6QaLxVgWOtJ64HOZ24xl1blqfZjV2PF4NJbELgq8bw_brjTH0Oum6qSRSAOYxL9emLCfABVduiEC7btNjTY2z8WzGmsdHqJJgq4p4yiGIT0_7YiefSarwcjM/s1600/twitter.png' /></a>
<a href='https://plus.google.com/UserId' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBID5cX0kqChSFpC2w9VXibYnCn4nJwc9pwsvaxLheGFSvs4ppyUTlD2nvnt2KURoxIRuvJveFYkT8TAYQWikuXPUoQCa1vRXMXTelBt5xHOSpQoR-zOiLdmZJyB8tOLnRycQRlixdbYdd/s1600/google-plus-icon.png' /></a>
<a href='http://www.pinterest.com/bloggertrix' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6eBULA5ux8aP8q8OCXOI8_RMNF4TbsR2InKyRf8VTkM_n7VZ9K_cuJ4ccOZRhmtHIzNp1pwKot1CIbuhbHrYljobmnuDqoVn0wSGWZbS4TKa3onFItMyS018IuBGdAqqYgXDaH6UYla3/s1600/pinteresticon.png' /></a>
<a href='http://feeds2.feedburner.com/bloggertrix' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0hobNOQ5Il_ax6gaeLv_lIlv_L4gu_p0YcF1VTYk-eqVuv9_TsXOZL5LJjP4nvsZEXTU5OOOmlYXmsYJIm-KRospGFthozd59Zv2dvCltVe5YsFQz0BhNm4dXWh4SmtMWCn-1xmqiDbfD/s1600/rssicon.png' /></a>
</div>
</center>
<div align='center'>
<a href='http://feeds.feedburner.com/bloggertrix'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=123D60&amp;fg=ffffff&amp;anim=1' style='border: 0;' width='88' /></a></div>
<div style='margin: 10px 0 0 6px;'>
<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='bloggertrix' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...' />
<input alt='' class='button' title='' type='submit' value='Subscribe' />
</form>
</div>
</div>

4. Click on save and view your blog..

If you wish to increase or decrease the width. Change the width in line 3, line 11 and also line 36 Also.

You may also customize the look and feel of this widget. The CSS style rules are given with the code above enclosed in the <style>….</style> tag. But if you don't have proper knowledge of HTML/CSS then I strongly recommend you to stick with the same code and do not try to modify it.

If you have any questions then please do not hesitate to let me know. I hope with this new Subscription box, your readers would enjoy and would stay in touch more time on your Profiles.

How To Add Subscription Widget Below Post To Blogger

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:22:00 +0000

A subscription box usually contains a link to your RSS feeds and a Email Form where visitors can submit their Email ID to receive updates from your blog. Blog without a subscription form makes no sense. Subscribers are the backbone of any successful blog. The more readership you have the stronger you get. People subscribe to your Feeds only when you publish quality content. Therefore it is very important that you may try every possible means of increasing the number of subscribers to your blog whether you are a Wordpress user or Blogger user. Adding aemail subscription box to blogger or wordpress blogs is very simple. You may need to follow the simple steps below to create an email subscription box for your blog using Some CSS3 Codes. Previously i wrote a tutorial on New Stay Connected Subscription Widget. it is always fun to learn and explore the new standards introduced for CSS. One basic and most important thing to do is to add a subscription box widget to your blog and position it near the top area of your blog just below header. Always keep subscription box to the top right or left position of your sidebars to attract as many people as possible. This subscription widget also optimized for IE7. So let’s start Tutorial. View Live Demo Below.

Add It To Blogger Blog.

1. Go to your Blogger Dashboard>> Template>> Edit HTML

2. and find the following code.

<data:post.body/>

3. and paste the following code after/below <data:post.body/>

<style>
#bt-subs-box {
background: #F1F1F1;
margin: 0 auto;
padding: 10px;
border: none;
border-radius: 10px;
width:350px;
height:270px;
}

#bt-subs-box h2 {
font-size: 27px!important;
text-align:center;
font-style: italic;
font-variant: small-caps;
}

#bt-subs-box h3 {
font-size: 15px;
font-family: arial, sans-serif;
text-align:center;
font-style: italic;
font-variant: small-caps;
}

#bt-subs-box div.row {
text-align:center;
margin-bottom:10px;
}

#bt-subs-box img{
display:inline-block;
border:none;
}

#bt-subs-box .email {
clear:none;

}

.email {
clear: both;
width: 100%;
margin: 10px 0;
}

.emailform {
position: relative;
width: 300px;
background:#FFF;
margin: 0 auto;
-webkit-box-shadow: 1px 1px 2px #dfdfdf;
-moz-box-shadow: 1px 1px 2px #dfdfdf;
box-shadow: 1px 1px 2px #dfdfdf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}



.emailinput {
height:30px;
margin: 0 auto;
padding: 8px 40px 8px 10px;
border:none;
background: none;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #666;
}

.emailinput {
padding-right: 30px !important;
width: 260px !important;
}

.emailbutton {
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-top-right: 4px;
-moz-border-radius-bottom-right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-top-left: 0px;
-moz-border-radius-bottom-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 9px;
position: absolute;
right: -3px;
top: -1px;
bottom: -1px;
display:block;
line-height:16px;
}

.emailbutton {
padding: 14px !important;
}


.emailbutton, .formbutton {
background: #f7f8f9;
background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9", 
endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 6px 12px;
margin:0;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton:hover, .formbutton:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1", 
endColorstr="#e0e0e0",GradientType=0 );
text-decoration:none !important;
}
</style>



<div id='bt-subs-box'>
<h2>Do you Like this Article</h2>
<div class='row'>
<div class='fb-like' data-href='http://www.facebook.com/pages/Blogger-Tricks/448418608553191' data-send='true' data-width='300' data-show-faces='false'></div>
</div>
<div class='row'>
<a href="http://feeds.feedburner.com/bl0ggertricks" title="Suscribe to RSS feed"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_PmTxDqqbAhjBf72eB2TaKSn63T4PoCk6PbnncNpCkLHAFwfqZn5yPqSsKGelxRC2_3X804qNVszqwVc-9uJBQJszC7554yT4Smky9oN_-r-0OA_mHdtkSXJ-xOX9nKOc0L24DlsIaMpa/s40/w2bRSS+.png" alt='rss'/></a>
<a href="http://twitter.com/bloggertricks" title="Follow me on Twitter"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKF0K8Trvi14hEqwg3Ka73NzjxI_wXmNMFDJfZFDLKFoGIdwmmrogKinEPcTW70Q0qGX1DndxBpMyQBB5VcX7o_2Cx0FnNerVAIaemuOnJB_OIEc2cPWdo_pEOMSkniMTgFoWwtJrELV72/s40/w2bTwitter.png" alt='twitter'/></a>

<a href="http://www.facebook.com/blogger-tricks/448418608553191" title="Became Fan on Facebook"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIJLBVfPVNyidtYgNhbKjytkRC6iU8BS898m912re2PgC7sRFeN95Z5gti8rGyVaFYuZzqLIOTCuWZgLCBja53_76qxUUIneYjeVP4In2zTH5TFKjelreEIAzCB-a-Hq49eZh3i9ddggI/s40/w2bFaceBook.png" alt='facebook'/></a>

<a href="http://www.stumbleupon.com/stumbler/bl0ggertricks/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZzOBkhZAReMbQanH8LD17PevRAeUhUHvE6gqKgdqbRv7jM-F8dzgU6gd_mp_zQqmqMkBt6rEkdYspCt4QRSGQ9Zl4K9KUAcSg6UDRgc01Ghf2dSvREoQLfo29AI1Ib2ElEbCU16p45Qm/s40/w2bStumbled.png"alt='stumbleupon'/></a>
</div>

<div class='row'>
<h3>Get Subscribe to Free Email Updates!!</h3>
</div>

<div class='row'>
<div class='email'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' class='emailform'>

<input type='hidden' value='bl0ggertricks' name='uri' />
							
<input type='hidden' name='loc' value='en_US' />
							
<input type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' value='Enter your email...' name='email' class='emailinput' />
							
<input type='submit' class='emailbutton' value='SignUp' title=""/>
						
</form>
</div>
</div>
</div>

4. save the template and you’re done!

How To Style And Edit The Widget?

Follow these,

If you wish to increase or decrease the width. Change the width section in css code.

Replce “http://www.facebook.com/pages/Blogger-Tricks/448418608553191”
Replace “http://feeds.feedburner.com/bl0ggertricks” with your feedburner RSS Feed link.
Replace “http://twitter.com/bl0ggertricks with your twitter profile link
Replace “http://www.facebook.com/pages/Blogger-Tricks with your Facebook profile Link
Replace “http://www.stumbleupon.com/stumbler/bl0ggertricks/” with your sumbleupon profile link

For Email Singup Change the following Below link

Replace “http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks” with your feedburner RSS Email Link
Replace value="bl0ggertricks" with your feed burner username

I would be really pleased to hear about your suggestions and feedback. If you faced any trouble then do not panic and let me know about your feed back below in comments box. stay updated by subscribing our email or like us our page on facebook, Google, or follow me on twitter.. thanks for reading our post.

CSS3 Multi Level Dropdown Menu For Blogger Blog

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:18:00 +0000

What a dropdown menu provides is a hierarchical overview of the subsections contained within the menu item that spawned it. Basically, it lists all the subsections within a section of a site when you hover your mouse cursor over it. They are extremely useful in showing what a section of a site contains, and allowing you to access it from anyway else in that site, whether that be the parent page of that subsection, or a page in a different section altogether. Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work! you View live demo by follow below link. menu stand at the bottom of this blog.

View Live Preview

Add It To Blogger

It is compatible with all major browsers like Firefox, Chrome and Safari. Since IE7+ always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have found solution on the internet how to render rounded border in IE7. I have kept the installation extremely easy. You just need to copy and paste the code.

1. Go To Your Blogger Dashboard>> Layout>>

2. Click on Add a Gadget..

3. Find HTML/JavaScript Gadget.

4. Finally Paste Following code in HTML Area (Leave Title Area Blank)

<style>
#bt-menu ul,
#bt-menu li,
#bt-menu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#bt-menu {
  height: 49px;
  background: #123D60;
  background: -moz-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0077D7), color-stop(100%, #123D60));
  background: -webkit-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -o-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -ms-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: linear-gradient(to bottom, #0077D7 0%, #123D60 100%);
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);
   /* IE is so silly */
   border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-bottom: 4px solid #002A4C;
}

#bt-menu span { 
  margin: 0;
  padding: 0;
  position: relative;
}
#bt-menu:after,
#bt-menu ul:after {
  content: "";
  display: block;
  clear: both;
}
#bt-menu a {
  color: #ffffff;
  display: inline-block;
  font-family: Trebuchet MS, Arial, Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 49px;
  padding: 0 25px;
  border-right: 1px solid #123D60;
  text-decoration: none;
}
#bt-menu ul {
  list-style: none;
  }
#bt-menu > ul {
  float: left;
    }
#bt-menu > ul > li {
  float: left;
  
  }
#bt-menu > ul > li:hover:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: -10px;
  
}

#bt-menu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#bt-menu > ul > li:last-child > a {
  border-radius: 0 0px 0 0;
  -moz-border-radius: 0 0px 0 0;
  -webkit-border-radius: 0 0px 0 0;
}
#bt-menu > ul > li.active > a {
background: #004074;
 
}
#bt-menu > ul > li:hover > a {
  background: #004074;
}
#bt-menu .has-sub {
  z-index: 1;
}
#bt-menu .sub:hover > ul {
  display: block;
}
#bt-menu .sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#bt-menu .sub ul li {
  *margin-bottom: -px;

}
#bt-menu .sub ul li a {
  background: #047DCB;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 14px;
  font-weight: bold;
  display: block;
  line-height: 120%;
  padding: 10px;
  text-shadow:1px 1px 3px #333;
}
#bt-menu .sub ul li:hover a {
  background: #009BFF;
  text-shadow:1px 2px 1px #000;
}
#bt-menu .sub .sub:hover > ul {
  display: block;
}
#bt-menu .sub .sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  }
#bt-menu .sub .sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
    
}
#bt-menu .sub .sub ul li a:hover {
  background: #095c80;
}
</style>
<div id='bt-menu'>

<ul>
<li class='active'><a href='http://bl0gger-tricks.blogspot.com'><span>Home</span></a></li>
<li class='sub'><a href='#'><span>Application</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li><a href='URL'><span>HTML Encoder</span></a></li>
<li><a href='URL'><span>HTML Encoder</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
</ul>
</li>  
<li class='sub'><a href='#'><span>Tools</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li> <a href='URL'><span>Sub Item 1</span></a></li>
<li> <a href='URL'><span>Sub Item 2</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Page Rank Checker</span></a></li>
<li class='sub'><a href='URL'><span>Color Code</span></a></li>
</ul>
</li>
<li><a href='#'><span>Faqs</span></a></li>
<li><a href='#'><span>Advertise</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

The widget is extremely easy to be edited. To change links title simply replaced the text (In Span Tag) with your page titles and replace the hash sign (#) with respective links.

Note:- If in your template b:skin section have already same ids or Classes like “#BT-menu” “sub” “first-child” last-child” this drop down menu doesn’t working fine..

If you need extra help in removing rows or columns then please feel free to post your questions. Tell me the specific row and column so that I could share your preferred code in the comments. You can discus it as much with me as possible. This will help others to better understand on how to make further changes.

Stay tuned by subscribing our email feed or follow me on social networks. thanks for reading our post. happy blogging….

How To Make Widget Or Element Sticky In Your Blogger Blog.

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:15:00 +0000

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” widgets that stick to your screen as you scroll and tend to have a higher click through rate. The main idea here is that these sticky elements/widget need to be contained in some way. Obviously, when scrolling up a page, the sticky element needs to stop sticking when it returns to its original position. But I would argue that almost equally important is having a bottom boundary on the page where the sticky element will stop sticking so that it doesn't spill into the footer or even outside of the page itself. This works very well with all kinds of Elements present in your blogger blog page. You can use it for Events, Popular Posts, Updates and everything that you want make a sticky.

Now Time To Make Widget Sticky

1. Go To blogger dashboard>>template>>edit html

2. paste the below jquery script before/above </body> tag.

   <script>
/*<![CDATA[*/
// Sticky Plugin
// =============
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
              var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mbtsticky").sticky({topSpacing:0});
   });
</script>

Now If you want to make blogger official widgets sticky you need to edit widget code in your blogger template. For example. we add blogger official follow me by email widget and make this widget sticky. Follow the steps below.

1. Go to your blogger>> dashboard>> layout and select Follow By Email Gadget.

2. and click on save. widget is added successfully.

3. Go to your blogger dashboard>> template>> edit html and find the following text ( your widget title)

4. in our case we find “Follow by email” our widget code look like this.

<b:widget id="FollowByEmail1" locked="false" title="Follow by Email" type="FollowByEmail"> <b:includable id="main"> <b:if cond="data:title != """><h2 class="title"><data:title/></h2></b:if> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" expr:onsubmit=""window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"" method="post" target="popupwindow"> <table width="100%"> <tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text"/> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit"/> </td> </tr> </table> <input expr:value="data:feedPath" name="uri" type="hidden"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div> <span class="item-control blog-admin"> <b:include name="quickedit"/> </span> </b:includable> </b:widget>

5. add div tag with your sticky id. final code look like this.

<b:widget id="FollowByEmail1" locked="false" title="Follow by Email" type="FollowByEmail"> <b:includable id="main"> <div id='mbtsticky'> <b:if cond="data:title != """><h2 class="title"><data:title/></h2></b:if> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" expr:onsubmit=""window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"" method="post" target="popupwindow"> <table width="100%"> <tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text"/> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit"/> </td> </tr> </table> <input expr:value="data:feedPath" name="uri" type="hidden"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div> </div> <span class="item-control blog-admin"> <b:include name="quickedit"/> </span> </b:includable>

6. That’s it your done!! save it and take a new look of your blog.

7. If you want to make any other widget or element use id “mbtsticky” with div.

<div id=”mbtsticky”>

Your widget code goes here.

</div>

Remember: The ID of your widget should be unique. For example, if you are usingid='followbyemail' in any of your widget then you cannot use the same ID for others.

Sticky sidebar Elements, widget can bring a lot of growth Making Your subscribers. They help in increasing user engagement. You can also use multiple sticky widgets in sidebar. However, this act might Aggravate your Readers. Make sure you have a equal design, so that it don't Irritate your Readers.

Please let us know of your precious views so that we could improve it further if needed. Peace and blessings buddies. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post.

Animated Drop Down Menu To Your Blogger Blog

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:12:00 +0000

This is one of the few Drop Down Menu Widget that took a lot of my time in designing it. You have seen the trend of Animated Drop Down Menu on popular blogs. You can find a lot of different menu styles on the web. similarly designers and developers are often more then happy to share their techniques with the world and through these tutorials new blogger users can learn about trends and how to build websites and blog semantically. Drop down menu help users to navigate your website or blog effortlessly. make sure which navigation you are using for your blog It is user friendly. Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly blog. but the problem is that blogger is not providing this type of menu to there user but we can indirectly add this drop down menus to blogger by adding certain html/css codes. It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features. animation effect tested with ie10, firefox and chrome 100 percent working..

Live Preview

Add It To Blogger Blog

1. Go to your blogger dashboard>> template>>edit html

2. Press Ctrl+F and find the following code.

]]></b:skin>

3. and paste following css code before above ]]></b:skin>

#mbt_menu {
    background: #656870;
    width: 100%;
    margin: 0px;
    height: 60px;
    padding: 0px;
    font-size: 13px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: normal;
    word-spacing: 2;
    -webkit-font-smoothing: antialiased;
}

#mbt_menu li.home a {
    padding: 0px 30px;
}

#mbt_menu li.home img {
    vertical-align: middle;
}

#mbt_menu ul {
    height: 60px;
    list-style: none;
    margin: 0;
    padding: 0px;
}

#mbt_menu li {
    float: left;
    padding: 0px;
}

#mbt_menu li a {
    background: #656870;
    color: #CCC;
    display: block;
    font-weight: bold;
    line-height: 60px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li a:hover, #mbt_menu ul li:hover a {
    background: #46484E;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li ul {
    background: #656870;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/;
}

#mbt_menu li:hover ul {
    display: block;
}

#mbt_menu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 225px;
}

#mbt_menu li:hover li a {
    background: none;
    color: #979EAF;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#mbt_menu li ul a {
    display: block;
    height: 60px;
    font-size: 13px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

#mbt_menu> ul > li ul li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-transition: color ease 0.3s;
    -moz-transition: color ease 0.3s;
    -ms-transition: color ease 0.3s;
    -o-transition: color ease 0.3s;
}

#mbt_menu li ul a:hover, #mbt_menu li ul li:hover a {
    background: #46484E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #FFF;
    text-decoration: none;
    padding: 0px 10px 0px 15px;
}

4. save it.

5. again go to blogger dashboard>>layout>>

6. click on add a gadget link

7. In Add A Gadget window, select HTML/Javascript .

8. Copy the code below and paste it inside the content box. (Title Section Leave Blank)

<div id="MBT_menu">
<ul>

<li class="home"><a href="http://www.myblogger-tricks.com/" title="Home Page"><img alt="Home" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lWNzFRiV77sjzLRP8fSrNbHNnoDjGS5s9lOgbFfVK1IayoyhNHpEAuU57u9WmRJ06SFSm3SLWgvqC5uflmb10xIpSZwJW5k8md0KqRmTazy3NS1e48GkHtHcHfYwS3mWysaLTZGXWAUx/s1600/Very- Basic-Home-icon.png"/></a></li>

<li class="sub "><a href="#"><span>Blogger</span></a>

<ul>

<li><a href="#"><span>SEO</span></a></li>

<li><a href="#"><span>Template</span></a></li>

<li><a href="#"><span>Widgets</span></a></li>

<li><a href="#"><span>Plugins</span></a></li>

</ul>

</li>

<li><a href="#"><span>Applicatoin</span></a>

<ul>

<li><a href="#"><span>HTML Encoder</span></a></li>

<li><a href="#"><span>HTML Editor</span></a></li>

</ul></li>

<li><a href="#"><span>Tools &#187</span></a>

<ul>

<li><a href="#"><span>Online HTML Editor</span></a></li>

<li><a href="#"><span>Color Code</span></a></li>

<li><a href="#"><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href="#"><span>Faqs</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>

</ul>

 </div>

The widget is exceptionally easy to be edited. To change links title simply replaced the text (under span tag) with your page titles and replace the hash sign (#) with relevant links.

5. Click save and Done! :)

Remember: The ID of your menu should be unique. For example, if you are usingid='mbt_menu” in any of your menu or navigation then you cannot use the same ID for others.

For any further help please feel free to post your queries in the comment box below. Its Very Handy, Light weight and Professional navigation Which you all can use to get rid of scripts and bulky menus that uses images and takes a lot of time to load. Peace and blessings buddies. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post.

Awesome Navigation Or Tabs Menu In Blogger Blog (10 colors).

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 10:07:00 +0000

A navigation or menu bar is a bar made up of tabs. “Behind” each of those tabs is a link -to a post page, a static page, a label page, to another website etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal. While links are arranged vertically, navigation tabs are usually arranged horizontally. In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML. But in order to do that, the template must have an Add A Gadget link thingy or widget container as I would call it, at that particular location. The is no such element. What do we do then? We create it. In our next tutorial we will learn how create Element just below header.

Update:- 11 November 2013… Version 2.0 Available.

Live Preview

Add It To Blogger

1. Go to your Blogger Dashboard>> Layout>> and click on add a gadget (Just Below Header Like Screen Shot.)

2. Click Add A Gadget link below the header.
3. Scroll down the Add A Gadget window and select HTML/JavaScript.
4. Leave the title box empty.
5. Copy and paste the HTML code below into the content box.

<style>

#tab_menu {
	background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9yuXlu0qa9kVm0G36F5UPLqQwN5PUAc_g1kR9mDbVs7DTvowiCfDrqq3fNVpYyHwzOuR9hkDer608j9iFWxN-23lDAeyxT8dJjrgWp0c14j9hPwaBIMOVS8oLjfMrnxZ0CA0p0oxh1O3/s1600/menu_bg.png) no-repeat;
	height:50px;
	width:960px;
	line-height:50px;
	list-style:none;
	margin-top:10px;
	font-size:14px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	overflow:hidden;
}

#tab_menu li {
	float:left;
	border-right:1px solid #FFA722;
	border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
	border-left:none;
}

#tab_menu li:last-child {
	border-right:none;
}

#tab_menu li a{
	text-decoration:none;
	float:left;
	display:block;
	height:50px;
	padding:0 20px;
	color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
	color:#622900;
	text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
	color:#000;
	text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Replace “#” with the URL of your destination page or blog.

7. You can get the URL of a page by copying the content of your browser’s address/URL bar while you are on that page.
8. To show all posts under a label (category), you need to link to the label’s page.

9. To change the width of the menu edit width: 960px.

Update:- 20-06-2013 Background Option Added

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhzpjncOidplTtvbZdohqbnDrt8gZeKjfnVk3O_-xGhtoDS654bn92KgEYyQwllcuft7aO-QyAt2hAdlxsH_cp9dX8vHtoQtFOQ4KrfHvkpqHpKu07IaQQTYUzDEjaW2kAmM-XPDNESv14/s1600/menu_bg_1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-pyg5ND509Jo-VMbxvdYYi2ZUi2A6mCKbtAyADMB6dIfHA9EHFpQv_wOEuU05aPMIxBK44PkC_O2zBJs8_g10zEytC_nZfob4pNBb7xRF_Z5un5Qb_YOtZ458Q4f1yst4kpoPQ1o-JjvZ/s1600/menu_bg_2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyWjAJrUELLattCkdGRY7NHgHpup-p1DuMtdNf-k0HrcmaSTHGXM7Uth0FRHDQDMiJFPAIgz_9DppcUU8mO3BaEJg976hnlgjrvm5EpaPBHALya6z9S4UMtReijpIE6YTkHOCLL_L-hQJr/s1600/menu_bg_3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNORm7HEwGntU9D8KpGpHflG-_YtN6sbCOdPbGmpDarBBBqE3hxRuHXmJLsMUYhv8xz5J8oJ5JkIiGW1E5HXq0JI97t6qzctA_SIKaq1zP_Bf33hphMv4xFG0YS9uxptIZtcawQSDdSUxZ/s1600/menu_bg_4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtllej90dQ5Nq6XPH8O8Iub0_U-qYs37wlUZnVabErb8VlhqlCHbgmsPWqnUiV0xAIA7PaNR9glY8Yx_a-ncIheZpAfb8LFdgeeMKpThT6PCnJ5AW5LBH3cZ1yrUk1lKu7xahZNd7eHD-_/s1600/menu_bg_5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYb7nKbYEfQHysfwnmmpRcEqCWSpQFnhs8nDrH5LaDFePlXepPZAntfdixt5f2HTNr2zzsoJ9VsvtJP0C45AMOhvBTl5nsaSVPlUHwq-cqizhOh9cjJ_GEsB2ApVBo6JYxcK-FbBVC1C3/s1600/menu_bg_6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQVs3MRvdUJ2Rgdli_68ajwGYhi-aDmHOwUHhLkvYRX9ERx0-gCM6XR38Q62rAuqAJ4zPgrRPUzXaCA7SE_9Z_JeLRncwpsF3zRojAg9gNSyswfnMuXS2Np4HeIEEQ5w_ZN1nc8F1q1U2C/s1600/menu_bg_7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Xj3g1TFArtYckj5Y50em20bBpVwWfIQEou6Ia2ofDBzuSNA_zdDIjdW9CCLLfwH_0LEZRWny6mAbX2oDMyXluHVLrkgoanUCZW2ZcAOKB0lFY96KFoMENGjNxNqIyvX7qbjLlZVnvn6R/s1600/menu_bg_8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ux7uujMja1TJ7eCvgI75nsFuASqHH5rDzag5v_q3wDyOBOe10jZ4XyoBZ88_4ZBT0TiOTB3G53Lus-lX-BvUnFde-48dvxvQ9Nuj7zE82qZxyhi2q7a7H7NKtk6J3Owpj7W0kVX4j8B3/s1600/menu_bg_9.png

10.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfO8VnOit8CfCDi6NRTQGryhtbAe9wnsIWXWvZBDPhg3wY93GaCdMwumjMEKV0NUytB938B9hLhQJyYECF40sqLLdc3dVd1be8jPnSV0uymXvPOdzDVanvd7FeXRz4gwHUosmfaZ42pU9n/s1600/menu_bg_10.png

Just Replace highlighted background URL with any background which you want to add in menu.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9yuXlu0qa9kVm0G36F5UPLqQwN5PUAc_g1kR9mDbVs7DTvowiCfDrqq3fNVpYyHwzOuR9hkDer608j9iFWxN-23lDAeyxT8dJjrgWp0c14j9hPwaBIMOVS8oLjfMrnxZ0CA0p0oxh1O3/s1600/menu_bg.png) no-repeat;

For any further help please feel free to post your queries in the comment box below. Please do not hesitate to ask questions, we love responding! Its Very Handy, Light weight and Professional Tab Menu. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates.

Enjoy!

Premium Blogger Template Free Download (n2)

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 09:59:00 +0000

Free Premium Blogger Template from http://Bl0gger-tricks.blogspot.com I used this blogger template for Bl0gger-tricks.blogspot.com. So many of our readers requested the Bl0gger-tricks Old blogger template. and Now it is here toDownload for Free!!!. It was actually created on December 13, 2012 and I modified and tweaked today. Before i coded the template with Hard-coded, That’s means i edit the template and addmenu links. Now i added the Secondary and page-lists widgets to easy customization. It took me around one week to craft, slice and then finally hard code a carefully structured Blogger template for the blogging community. The name chosen this time is "Blogger Template". Below is Customization Detail For blogger Template.

Update:- 03-08-2013

Download Link is Updated

Read More Button Issue Resolved and also added 2 New Feature.

3 Column Footer
Related Post Text Widget
Improved SEO Tags

Live Demo…!!!!

Click On image for Live Demo

SEO

Data Variables for Titles and Post Pages already swapped
The clean HTML structure would make it fairly easy for search robots to crawl and index the pages easily without useless scripts block access.
Entire structure follows a hierarchal flow of Heading tags as per Search Robot requirements. H1 for Blog title, H2 for post & sidebar titles and H3 for sub-headings
Labels, Comments, Archive Links and Archive Pages are well optimized by setting robot entries
Commenting system is well shielded from spammers.
Load Time has been kept in mind as per Google Webmasters latest Page speed requirements
In short this template is a repository of all SEO features that a blogspot blog can contain!

Feature

In this template my main focus on Increasing blog loading time so You can check live demo and check loading speed…

This Template is Absolutely Free!!

Download Now

How To Upload The Blogger Template

1. Go to Blogger Dashboard > Locate your Blog if you have more then one blog.
2. Click on More Options Drop Down and choose Template
3. Click on the Backup/Restore button on Top Right Corner
4. Click on Download Full Template button to backup your Old template for safety
5. Click the Browse button and locate way2blogging’s blogger template
Click on the Upload Button. And you are Done!

CUSTOMIZATION

Basic Steps:This basic steps you need to follow for each customization.

On New Blogger Dashboard Go to Template > Edit HTML Button.

Customize Menu Links

1. Search For These Line <div class='Bt-nav'>

and you will code look like This.

<div class='Bt-nav'>     <div id='menu_wrap'>         <div id='menu'>           <ul>             <li>               <a class='current' href='http://bl0gger- tricks.blogspot.com/'> Home</a>
 
</li>             <li><a href='http://bl0gger- tricks.blogspot.com/search/label/Blogger'> Blogger</a></li>

<li><a href='http://bl0gger- tricks.blogspot.com/search/label/Adsense'> Adsense</a></li>
<li><a href='http://bl0gger-tricks.blogspot.com/search/label/Make%20Money %20Online'> Make Money</a></li>             <li><a href='http://bl0gger- tricks.blogspot.com/search/label/S.E.O'>SEO</a></li>

<li><a href='http://bl0gger-tricks.blogspot.com/search/label/Blogger %20Widget'>Widgets</a></li>             <li><a href='http://bl0gger- tricks.blogspot.com/search/label/Apps'>Application</a></li>             </ul>
</div>       </div>       <!-- End - Navigation Menu  -->       


<!--Start Secondary Menu -->

<div id='secondary-Menu'>         <div style='float:left;'>           <ul id='secondary- nav'>             <li><a href='http://bl0gger-tricks.blogspot.com/p/guest- post.html'> Guest Post </a></li>             <li><a href='http://bl0gger-tricks.blogspot.com/p/blog- page.html'>Downloads</a></li>             <li><a href='#'>Templates </a></li>
<li><a href='#'>FAQ</a></li>             <li><a href='https://plus.google.com/103598710564060829080'>About</a></li>
<li><a href='http://bl0gger-tricks.blogspot.com/p/required- field.html'>Contact</a></li>             <li> <a href='#'>Advertise</a></li>             <li><a style='cursor:pointer;'>Tools &#187;</a>
<ul>
<li><a href='http://bl0gger- tricks.blogspot.com/p/html-editor.html'>HTML Editor</a></li>                 <li><a href='http://bl0gger- tricks.blogspot.com/2013/03/HTML-EnCoder-Desktop- Application.html'>Encode HTML Characters</a></li>                <li><a href='http://bl0gger- tricks.blogspot.com/p/free-google-page-rank- checker.html'>Page Rank Checker</a></li>                 <li><a href='http://bl0gger- tricks.blogspot.com/2012/11/two-color-code-generator- tools.html'> Color Code Generator</a></li>               </ul>             </li>           </ul>         </div>       </div>

Replace Title with your title and link with your blog links.

One Little Issue In This Template

~~When you are writing a post you need to add <!—more—> where you want to add Read More Button..~~ You can Also See Video For This Tip…

you can get further help from Comments. Please leave your Comments and share this Template with your friends. Thanks.

NOTE: -Please do not re-share or Host this blogger template any where. !

Premium Blogger Template Free Download

noreply@blogger.com (Anonymous) — Sat, 01 Feb 2014 09:53:00 +0000

Blogger templates design and development of 2013! With the powerful of amazing templates, you can make your blog look exactly what you like. The design of any blog is one of the key factors to its success. For your browsing and inspirational delight, here is our awesome Blogger, Blog spot template for 2013. The have been selected because of their outstanding quality, attention to detail, super cool layout and feature-rich design. To keep the healthy tradition alive, we would love to gift all our loyal and million dollar worth readers a memorable gift. It took me around one week to Design, slice and then finally hard code a carefully structured Blogger template for the blogging community. Feel free to share your opinions and comments with us via comment section below.

Live Preview

Features

Nice and Elegant Template.
Fixed Width.
Adsense Optimized.
SEO Optimized.
2 Navigation Menus.
3 Column Footer Widgets.
Header banner Ads.
Infinite Scroll.
Custom Social Sharing Widget.
like This Article Widget.
Related Post Text Links.
Supports Default and Threaded Comments.
Cross Column Widget sections at top and bottom.
Default Jump Breaks for Post excerpts.
Breadcrumbs.

Download My Blogger Tricks Template

NOTE: Please do not re-share or Host this blogger template any where. !

Download

Uploading Template On Blogger Blog

Go to Blogger Dashboard > Locate your Blog if you have more then one blog.
Click on More Options Drop Down and choose Template
Click on the Backup/Restore button on Top Right Corner
Click on Download Full Template button to backup your Old template for safety
Click the Browse button and locate My Blogger Tricks blogger template
Click on the Upload Button. And you are Done!

CUSTOMIZATION

Basic Steps:This basic steps you need to follow for each customization.

On New Blogger Dashboard Go to Template > Edit HTML Button

Header Logo

We are added default logo you change it with your own blog log.

by uploading in blogger Default (Header) widget. Go to layout and edit header widget. header widget showing in layout look like this.

and upload you blog logo. logo size must be 350px X 80 px.

Customizing Top Navigation Menu

Search for the tag.

To change links title simply replaced the text with your page titles and replace the hash sign (#) with respective links.

Customizing Bottom Navigation Menu

Search For the Tag

<!—Start Bottom Menu-->

To change links title simply replaced the text with your page titles and replace the hash sign (#) with respective links.

Infinite Scroll

If you wish to remove auto scroll Feature just remove infinite scroll script.

Search for this tag

and remove jquery plus scroll script for body section and save it. done!!!..

CUSTOMIZING ADSENSE ADS

ADSENSE BELOW POST TITLE

Adsense Ad Dimensions: 336px X 280px
Search for the tag

Put your Adsense Code just after the it.
PS: Encode the Adsense code before pasting into the Template using the HTML Encoder

Adsense post for post bottom end

Adsense Ad Dimensions: 336px X 280px
Search for the tag 
After this Tag you will find the Default Adsense Code, Replace it with your Adsense Code.
PS: Encode the Adsense code before pasting into the Template using the HTML Encoder

CUSTOMIZING THE DO YOU LIKE THIS ARTICLE BOX

CUSTOMIZE SOCIAL ICONS

Search for  code.
After the code, you will find the social links, Change the URLs of Rss, Twitter, Facebook links respectively.
and also In the email form change the bl0ggertricks feedburner Id in Two places.

Customizing Stay Connected Widget

Go to Blogger Dashboard > Locate your Blog if you have more then one blog.
Layout>> Add A Gadget. and paste the following code in gadget content area.

<div class="mbtstaycon">
    <ul>
        <li class="mbtrss"><a href="http://feeds.feedburner.com/bl0ggertricks">RSS</a></li>
        <li class="mbtmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks" >Email</a></li>
        <li class="mbttwitter"><a href="http://twitter.com/bl0ggertricks">Twitter</a></li>
        <li class="mbtfacebook"><a href="http://www.facebook.com/pages/Blogger-Tricks/448418608553191">Facebook</a></li>
                <li class="mbtgoogleplus"><a href="https://plus.google.com/103598710564060829080">Google +</a></li>
                <li class="mbtpinterest"><a href="pinterest.com/mybloggertrickx">Pinterest</a></li>
    </ul>
</div>

<div style="float: left; margin-right: 15px; margin-top: -4px;">
<a href="https://twitter.com/bl0ggertricks" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @BloggerTricks</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<a href='http://feeds.feedburner.com/bl0ggertricks'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=088A4B&fg=444444&anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a>

change all links with your own social media and feed burner links.

For Further Help

You can also get further help from comments. please feel free to post your queries in the comment box below. Its Very Handy, Light weight and Professional Template.

Copyright

Bloggers and developers are hereby advised not to sell or redistribute the Template codes. You are also instructed not to remove My Blogger Tricks Credits from the Footer. Removing the Credit links will break the Template URL of your blog, leaving all your efforts in futile.

Premium version includes no watermarks. If you wish to buy the widget for Wordpress, Joomla or even Blogger Blogs, then you may kindly contact us via our ourContact Us Page.

Hellas Web Bloggers

Πώς να ανακαλύψετε το κλειδί των Windows χωρίς κάποιο λογισμικό

3D Subscription Box Widget For Blogger

HOW TO ADD FLOATING WIDGET TO BLOGGER BLOG FOR ADS

HOW TO ADD THIS WIDGET TO BLOGGER

CUSTOMIZE

LavaLamp - Fancy Css3 Menu for Blogger (5 colors).

Customization:

Jquery Featured Social Slider Widget

Jquery Featured Social Slider Widget for Blogger

Customizations:

Spinning 3D Social Media Icons

Spinning 3D Social Media Icons

Spinning 3D Social Icons 64*64

Spinning 3D Social Icons 48*48

Black Beauty - Social Subscription widget

Black Beauty widget code

Customize

"Simple Clean White" Blogger Template

Jquery Multi Level Drop Down Menu To Blogge

Beautiful Drop Down Navigation Menu To Blogger Blog

MintShare – Pure CSS & HTML Based Social Share Widget

For Blogger

MintShare Mini

MintShare Compact

MintShare Classic Float Left

MintShare Classic Float Top

MintShare Compact Float Top

For WordPress

For HTML Websites

Replace Older, Newer And Home Text With Image Or Text

1. How To Replace With Your Own Words.

2. How Replace Older Newer Home Links With Images

Awesome CSS 3 Dropdown Menu–Without JavaScript

How To Add Css3 Drop Down Menu

Ornamented Slide Open Social Sharing To Blogger

Add It To Blogger

Beautiful Open Heart Slide Social Sharing Gadget For Blogger

Slide Open Egg Social Bookmarking Gadget For Blogger

Add The Share This Egg To Your Blog.

Black CSS3 Drop Down Menu To Blogger

Add It To Blogger Blog

Subscription Box For Blogger

Add It To Blogger

How To Add Subscription Widget Below Post To Blogger

Add It To Blogger Blog.

How To Style And Edit The Widget?

CSS3 Multi Level Dropdown Menu For Blogger Blog

Add It To Blogger

How To Make Widget Or Element Sticky In Your Blogger Blog.

Now Time To Make Widget Sticky

Animated Drop Down Menu To Your Blogger Blog

Add It To Blogger Blog

Awesome Navigation Or Tabs Menu In Blogger Blog (10 colors).

Add It To Blogger

Update:- 20-06-2013 Background Option Added

Premium Blogger Template Free Download (n2)

Live Demo…!!!!

SEO

Feature

How To Upload The Blogger Template

CUSTOMIZATION

Customize Menu Links

One Little Issue In This Template

Premium Blogger Template Free Download

Features

Download My Blogger Tricks Template

Uploading Template On Blogger Blog

CUSTOMIZATION

Header Logo

Customizing Top Navigation Menu

Customizing Bottom Navigation Menu

Infinite Scroll

CUSTOMIZING ADSENSE ADS

CUSTOMIZING THE DO YOU LIKE THIS ARTICLE BOX

Customizing Stay Connected Widget

For Further Help

Copyright