Category Archives: Uncategorized

How to add Demo and Download Button in Blogger Post

How to add Demo and Download Button in Blogger Post

Most times the need to add demo or download button to your blog post may arise. Especially in times of sharing a software or a blog template with your cherished readers. It is appropriate to have a download button which makes it easy for the readers to download whichever material you want being downloaded.
Today I’m going to show you how to add an eye catching demo and download button to your blogger post.

Demo and Download Button

Now here we go…
1. Go To Blogger Dashboard > Template > Edit HTML
2. Backup your template before editing.
3. Click the “Expand Widgets Template” box
4. Search for this, ]]> . before it paste the following CSS Code.

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url(“http://www.zurb.com/images/overlay-button.png”) repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

5. Save your template.

Now whenever you want to add the demo or download button you only need to add the following code in the “EDIT HTML” section of your Blogger Editor

For DEMO Button

 YOUR DEMO LINK HERE” rel=”nofollow” style=”float: left;” target=”_blank”>Live Demo

For DOWNLOAD Button

YOUR DOWNLOAD LINK HERE” rel=”nofollow” style=”float: left;” target=”_blank”>Download

Replace YOUR LINK HERE with your DEMO or DOWNLOAD LINK , That’s all.

Cheers!!!

– See more at: http://www.talky-tech.com/2014/06/how-to-add-demo-and-download-button-in.html#sthash.qmYiCHjP.dpuf

Beautiful CSS Email Subscription Widget For Blogger/Blogspot

By 
http://www.facebook.com/plugins/like.php?app_id=&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FDU1Ia251o0y.js%3Fversion%3D41%23cb%3Df3b2c7ecac%26domain%3Dwww.gobloggertricks.com%26origin%3Dhttp%253A%252F%252Fwww.gobloggertricks.com%252Ff153273a3c%26relation%3Dparent.parent&href=http%3A%2F%2Fwww.gobloggertricks.com%2F2014%2F07%2Fbeautiful-css-email-subscription-widget.html&layout=button_count&locale=en_US&sdk=joey&send=false&show_faces=false&width=450http://platform.twitter.com/widgets/tweet_button.67ae45a68af44ab435dd5797206058d3.en.html#_=1422600694131&count=horizontal&dnt=false&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwww.gobloggertricks.com%2F2014%2F07%2Fbeautiful-css-email-subscription-widget.html&size=m&text=Beautiful%20CSS%20Email%20Subscription%20Widget%20for%20Blogger%2FBlogspot&url=http%3A%2F%2Fwww.gobloggertricks.com%2F2014%2F07%2Fbeautiful-css-email-subscription-widget.html

 
The Best Way to Reach your Audience is Making Email-Subsciption. You can Automatically Send All your Updates Via Email By Email Subscription Widget.Its Very Easy All you have to do is You have to Make the Visitors to Subscribe to your blog/website. You can make it Simple by Adding Beautiful Email-Subscription Widget on your blog/Website. Here is a Step to Add the Email Subscription widget for your blog/Website.

Step 1: Goto Blogger Dashboard
Step 2: Layout —> Add a Gadget —-> HTML/JavaScript.
Step 3: Copy and Paste the Below Code On HTML/JavaScript.
Code:


     #blogolect_Subscriber_name{
background: #ddd url(http://4.bp.blogspot.com/-25QiFr2GTeE/UuftiCdKHvI/AAAAAAAAD1M/0777CPDD-p4/s1600/name+icon.png) no-repeat center right;}
     #blogolect_Subscriber_email{
background: #ddd url(http://4.bp.blogspot.com/-s3Npo9Hn7Co/UuftiHPE5AI/AAAAAAAAD1I/HyfucVkukcY/s1600/email+icon.png) no-repeat center right;}
     #bgt-emailsubs {
      width: 300px;
      height: 265px;
      border: 2px solid #ddd;
      border-radius: 5px 5px 1px 1px;
     }
     #bgt-emailsubs .header {
     background: none ;
     color: #a3a3a3;
     font-size: 28px;
     line-height: 36px;
     padding: 15px 25px;
     font-weight: 700;
     font-family: open sans;
     text-align: center;

     }
   #bgt-emailsubs p {
    font-family: open sans;
    line-height: 26px;
    font-size: 13px;
    color:#333;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #bgt-emailsubs .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #bgt-emailsubs .emailsub .button {
    background: #2aa4cf;
    color: #ddd!important;
    font-weight: bold;
    margin-right: 5%;
    width: 100%;
    border:none;
    outline: none;
    border-bottom: 3px solid #99E4FE;
    transition:background .3s linear;
    cursor:pointer;
   }
   #bgt-emailsubs .emailsub input {
    color: #333;
    width: 92%;
    padding: 10px;
    margin-top: 10px;
    font-family: open sans;
    font-size: 15px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #bgt-emailsubs .emailsub input:focus {
    outline: none;
    box-shadow: 0 0 3px 1px #2aa4cf;
   }
   #bgt-emailsubs .emailsub .button:hover{
background: #1D7290;
   }

    


           


            Subscribe Now!
           

    
           


            <form action='http://feedburner.google.com/fb/a/mailverify&#039; method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=gobloggertricks‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
         



            <input type="hidden" value="gobloggertricks” name=”uri”/>
           
                       

           
           


Step 4: Now Replace gobloggertricks With your Feedburner Username.

Step 5: Click “Save”.

Now You Are Done. Visit your Blog/Website to See your Email Subscription Widget.

If you Have Any Problem in Installing this Widget Please Comment Below or Contact Us at:contact@gobloggertricks.com .

Coca Cola style email subscription box widget for blogger above comments, Below is method for how to add This professional and beautiful gadget to blogger blog.

Coca Cola Email Subscription Box Widget For Blogger Above Comments
Coca Cola Email Subscription Box Widget For Blogger Above Comments
An email subscription box widget is the key of success in blogging era just like other widgets which helps you to achieve complete success in blogging. A complete success means awesome traffic, handsome money and loyal readers. The success of a blog is measured by its loyal readers which is indirectly a permanent traffic. A large group of people and readers who are interested in your blog and visit daily to your blog. But do you know how do you get such visitors or how to give them a chance to join your website or become a member of your blog so that when you publish a new post all of your readers will be informed and they will have access to visit your blog directly from their Inbox. To execute this you need an email subscription box widget. Here I will describe how to add an email subscription box widget for bloggers.

Best Position for email subscription box widget in blogger

There are various positions where you can add an email subscription box widget in blogger like in the sidebar, below the post title and above comments. So the best position from my point of view and my experience is above comment box because this is the position where your reader’s cursor will come when he finishes reading the article. It is very obvious that most of the people become member or subscribe to your blog when they find something unique in your blog. So our aim should be to increase the number of blogger subscribers because more subscriber means more page-views. So below is the best and simple code to add the email subscription box widget to blogger above comment box to increase your subscriber and loyal readers.

How to add the email subscription box widget to blogger above comment.

Go to blogger dashboard.
Click on template.
In new blogger template click on edit template
Now Hit format template.
Now Hit CTRL+F , A search box will appear.
Type ]]></b:skin> in search box.
And just above this code copy and paste the below code.
<b:if cond=’data:blog.pageType == &quot;item"’> #avdhootblogger{clear:both;background-image:url(‘http://3.bp.blogspot.com/-XojZlfFPHi8/UWW-jnmfb2I/AAAAAAAAAhk/l5NS3vO4QIA/s320/new+border.png&#8217;);color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#avdhootblogger
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#avdhootblogger input[type=&quot;email"],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#avdhootblogger
form{text-align:center;padding:20px
90px}#avdhootblogger input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#avdhootblogger
.counter{margin:0
0 25px}#avdhootblogger.efooter{background:none}#avdhootblogger.efooter
form{text-align:left;padding:0}#avdhootblogger.efooter input[type="submit"],#avdhootblogger.efooter input[type="email"],.wg_in_mail{padding:10px;letter-spacing:0px}#avdhootblogger.efooter.sidebar{background:#3C3C33;padding:20px}#avdhootblogger.efooter.sidebar
form{text-align:center}
Now it’s time to add this coca cola email subscription box widget to above comments so here is the HTML part.
Now again find this piece of code.
<div class=’post-footer-line post-footer-line-3′>
Now when you have found this one line piece of code , Copy the below code and paste it below the above one line code.
<div id=’avdhootblogger’><form action=’http://feedburner.google.com/fb/a/mailverify&#8217; method=’post’ onsubmit=’window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=WidgetsForBloggerbloggerGadgetsbloggingTipsseoTipsbloggerWidget‘, &apos;popupwindow’, &apos;scrollbars=yes,width=550,height=520′);return true’ target=’popupwindow’>

Email Newsletter

<div class=’counter’>Join with Thousands Of Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox </div><input name='uri' type='hidden' value='WidgetsForBloggerbloggerGadgetsbloggingTipsseoTipsbloggerWidget‘/>

When signing up you will initially receive a confirmation email requiring your approval to complete the subscription.</small>

</div></b:if>

Customization

Insert your Feedburner id in highlighted red color.

I Hope you liked this coca cola email subscription box widget for blogger above comments, feel free to comment and share.

Add a Stylish Numbered Pagination in Your Blogger

Are you still wondering that how most of the famous blogs are using numbered pagination, instead of displaying older and new post buttons at the bottom of every Blogger archive page? Recently, one of our users asked us, How to add Numeric Pagination in Your Blogger Blog? We have been using number pagination on MyBloggerLab for quite a while now, and from our experience it gives you 10 times better pageviews than the older and newer post button. It is more user friendly, attractive, and SEO friendly. Most of the advance Blogger templates like Templateism comes with builtin Numeric pagination. In this article, we will show you how to add numbered pagination in your blogger blog?

What is Numbered Pagination?

Numbered pagination is a numeric navigation menu which is usually present at the bottom of the archive pages. It divides your whole blog into different pages, just like the pages of a book. Users can simply navigate through page 1, 2, 3, 4 and etc . We have attached a screenshot below, so that users can easily understand our words.

Enable Content Selection On Only Blockquote Using CSS in Blogger

I have already written this tutorial on my previous blog which is now no longer active so I’ve decided to write it all over again on this new blog because this one is very useful for those bloggers who writes each and every word all by themselves and some copy bloggers steals it within seconds. I think you have already got the clue what this post is all about. Still let me clear it to you that here, I will let you know how you can disable content selection of your whole blog except the <blockquote> area.





 I’ve excluded blockquote because there are some blogs which shares tutorials on coding “like mine” where the visitors might have to copy the codes so that they can use it or else, they will have to write it down all by themselves. One more thing you should know is that for disabling, we are going to use pure CSS3 which is a better option than JavaScript because CSS will not affect your page load time.

How to add CSS code in Blog

  • Go to your Blogger Blog
  • Click on Template
  • Now click on Customize
  • Then click on Advanced, select CSS
  • Paste the below code in CSS section
  • After paste the code apply to Blog
Below is the CSS code to disable content selection except blockquote


body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;}
blockquote {-webkit-touch-callout: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
-webkit-user-select: text;}




Also, if you don’t want to exclude even the blockquote area, then use the below code instead-


body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;}



That would be enough to protect your blog from 90% content thieves

It’s better to stay protected even if you see that no one is copying from your blog because at some point, your blog will definitely catch the eye of copy bloggers.
ENJOY….

How to Remove Shadows and Border on Blogger


A quick and easy tutorial on how to remove shadows and borders from your blog that are found on some of blogger’s templates. The shadow effect can be great when used sparely, but on blogger templates it can seem a little overdone. This post will show you how to remove the shadow from your blog posts, images and headers. Hope you find it useful.




DOWNLOAD A BACKUP OF YOUR TEMPLATE BEFORE ATTEMPTING TO EDIT THE CODE IN ANY WAY


Remove Shadow From Text Header on Blogger

  • Go to Design > Template > Customize >
  •  Advanced > Add Css & add the code below to the box to your css.

.Header h1 {
/* remove borders by xomisse */
text-shadow:none;
}

Remove Shadows From Images-Post,Sidebar & Profile

  • Go to Design > Template > Customize >
  •  Advanced > Add Css & add the code below to the box to your css.


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {

/* remove borders by xomisse */
-moz-box-shadow: none !important;
-goog-ms-box-shadow: none !important;
-webkit-box-shadow:none !important;
box-shadow:none;
}


Remove Shadow From Blog Post/Content


  • Go to Design > Template > Customize >
  •  Advanced > Add Css & add the code below to the box to your css.
  •  This will add it above ]]> in your HTML code.



.content-outer, .main-inner .widget, .date-outer {

/* remove borders by xomisse */
-moz-box-shadow: none !important;
-goog-ms-box-shadow: none !important;
-webkit-box-shadow:none !important;
box-shadow:none !important;
}


Alternatively,
You need to firstly access your code so go to Design > Template > Edit HTML and Search (CTRL F/CMD F) for .content-outer. You should see the something similar to the following code, it may look a little different depending on what template you are using. You’ll want to carefully remove the code within the brackets to remove the shadow effect.


.content-outer{

-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
 }


Remove Border and Shadows From Images

  • Go to your Blogger Template > Customize
  • Advanced > Add Css & add the following code

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
/* remove borders by xomisse */
padding: none !important;
border: none !important;
background: none !important;
-goog-ms-box-shadow: 0px 0px 0px transparent !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}


If there is something with a shadow on your blog that you wish to get rid of and I didn’t mention it above, simply look for the element in your code, find box-shadow and change it to 0px , that should solve the problem. If not, leave me a comment and I’ll help you in whatever way I can.