TechPlus24: Blog| Blogger,YouTube Tips Tricks

Customize Change Blogger BlockQuote Style

Posted By Saumen Posted on 14:12 with No comments

This tutorial specially for all my blogger lover,well today we will learn how to customize blogger blog block quote with stylish css effect notepad style quote. If you don't know what is block quote, where can we use quote? etc. well the answer is, some time we use some code like HTML, CSS, JavaScript in blogger post then we put the code in Blockquote its a style.
You can use many different quote style as you like you will just need source code. Here is a notepad style quote code, you can use it if you like. Take a look

Blogger BlockQuote Style

How to customize Blockquote in blogger blog

Go to Blogger dashboard > Template> Edit HTML
Search .blockquote Or .blockquote p or any more just Delete it.
Now Search ]]></b:skin>
Copy below code and paste it ]]></b:skin>
Save your template.

.code2{overflow:auto;width:500px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 60px;clear:both;color:#000;list-style-type:none;background:#f5f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWX6nSswmAY0s0BcFTeh39RTMM8DAd8gFEN6lFHzrsyKD5e4Kta5C58uDJ3yFRk6Ix-WTHC3CLpP5JQKyYjvOFLT4xo_y6voxka9QTVqYr1Wil-q28-IEAYbxXtjdFrDPBqD07UgwcjkD/s1600/notepad1.gif) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}.code2:hover{overflow:auto;width:500px;height:auto;background:#f5f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWX6nSswmAY0s0BcFTeh39RTMM8DAd8gFEN6lFHzrsyKD5e4Kta5C58uDJ3yFRk6Ix-WTHC3CLpP5JQKyYjvOFLT4xo_y6voxka9QTVqYr1Wil-q28-IEAYbxXtjdFrDPBqD07UgwcjkD/s1600/notepad1.gif) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.1);-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}

Now create a new post in HTML
Use this tag <div class="code2"> YOUR TEXT/CODE HERE </div>
Publish your post and visit your blog to see the changes.

Customize

You can change quote box width you just need to change the size width:500px as you like ,recommended set size same as your blog post body size. if your post body size width:600px then set the quote box width size 500px its look perfect. Any kind of problem please leave a comment.

How to add Blogger Blog Default Recent Comment Gadget

Posted By Saumen Posted on 00:19 with No comments

Take a look all recent comment on your blogger blog its help your blog visitors to know what commenting others visitors. In this post we will learn how to add default blogger recent comment gadget using default blog feeds comment. its very easy to setup and no need to add extra JavaScript code.
also see How to Customize blogger label

Blog Default Recent Comment Gadget

Go to blogger dashboard> Layout> Add A Gadget> Select Feed
Noe past below URL in to feed box

http://techwap.net/feeds/comments/default

Blog Default Recent Comment Gadget

Setup same as below picture

Blog Default Recent Comment Gadget

Save your gadget. Done!

Visit your blog to see the changes. Is my post helpful for my visitors ? any problem please leave a comment.

Pop Up Facebook Like Box Gadget For Blogger Blog

Posted By Saumen Posted on 23:37 with No comments

Facebook is the most popular social network its causes we can get huge blog traffic from Facebook. Hope that everyone manage a Facebook fan page for your blog, now you can get more facebook fan page like just add this pop up like box gadget in to your blog. In this blogger tutorial we will learn how to add a pop out Facebook like box gadget for blogger blog. Take a look..

Pop Up Facebook Like Box

Go to blogger Dashboard> Layout> Select HTML/JavaScript
Copy below code and paste it to HTML/JavaScript box
Save your gadget done!
Visit your blog to see the changes

<script type="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/cb.js"></script><script type="text/javascript">function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}; r(function(){new ConversionsBox("TYPE YOUR MESSAGE)","http://www.facebook.com/YOUR FB PAGE ID");});</script>

Replace your message and your Facebook page id.

If you fetch any problem please leave a comment.

Add a Colorful Blogger Label Widget

Posted By Saumen Posted on 22:51 with No comments

All my blogger lover here is another beautiful Gadget for you. Spicy your blog template by add this colorful gadget. In this tutorial we will learn how to customize blogger label and add a beautiful label gadget. Take a Look Techwap hope you like it. Easy to setup and fast loading .

Customize Blogger Label

Blogger Label Widget

Go to blogger dashboard>Template> Edit HTML
Find out ]]></b:skin>
Copy bellow code and paste it to above ]]></b:skin>

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

Now go to layout> add a gadget>select label
Setup Label same as the picture.

Customize Blogger Label

Save your gadget. almost done!

Visit your blog to see the changes. Any kind of problem please leave a comment.

Top 5 Seo Friendly Premium Blogger Template Free Download

Posted By Saumen Posted on 11:47 with No comments

Most creative top 5 Seo Friendly Premium Blogger Template for all my blogger lover spicy your blog now. All template are premium quality ,responsive design. Excellent layout for blogs about Technology,Magazine, fashion, Movies, photography .
Check out Social media Blogger Widget with hover effect

Template Features

Seo Friendly.
Ads Ready.
Responsive Layout.
Sidebars
Footer columns.
social bookmarking icons.
Posts thumbnails.
Drop down menu.
Related posts
Recent post Slide

RoadRunner Blogger Templates

RoadRunner

2. Point Blogger Template

Point Blogger Template

3. Responsy Blogger Template

Responsy Blogger Template

4. TruePixel Blogger Template

TruePixel Blogger Template

5. WordPlus Blogger Template

WordPlus Blogger Template

6. Headlines Blogger Template

7. CHANEL PRO Blogger Template

8. Daily 2.0 Blogger Template

9. Fresh Life Blogger Template

How to apply Template

Go to blogger Dashboard.
Template
Click Backup/Restore.
Upload your xml template save it Done!

Any kind of Problem please leave a comment.

GoDaddy Coupon Promo Code Generator Buy Domain Free or Lowest Cost Only $1

Posted By Saumen Posted on 20:29 with No comments

GoDaddy is the biggest and most popular domain sell provider, everyone want to buy domain from GoDaddy because they are largest domain provider and very good customer support. But main problem is their domain cost very high .COM 13$-14$/year. Sometime we can save few by coupon code but not recommended. If you want to buy domain @lowest cost then you can see the exclusive post only for you.Today I'll show you a great tricks GoDaddy Coupon Promo Code Generator. Here is more than 25+ coupon code apply your demand.
Lets Start...