Tricks Duniya

Showing posts sorted by date for query Blog trick. Sort by relevance Show all posts

How To Remove Hello Bar Logo From Blogger (Blog trick)

Hello bar is a sticky bar that displays announcement and important messages or link. Hello bar now a days becoming popular. But Hello bar H logo containing backlink, when a reader clicks on the logo, it redirects to hello bar homepage. A small CSS code will aid you to remove the Hellobar "H" logo

Removing Hello Bar logo From Wordpress

Now you have to add the following CSS code In header.php file

Open header.php file and add the following CSS code above </head>

<style type='text/css'>
a#hellobar-logo, a#hellobar-logo:link, a#hellobar-logo:visited {
display:none;
}
</style>

Now save the file and done

Removing Hello Bar logo From Blogger

Go to Blogger dashboard → Design → Edit html

Now add the following CSS code just above ]]></b:skin>

 a#hellobar-logo, a#hellobar-logo:link, a#hellobar-logo:visited {
display:none;
}

Now Save

I hope you all enjoyed the tutorial. Please share if you like

Custom CSS Heading Style For Blogger(Blog trick)

Heading tag especially <h2> is used for better search engine optimization tricks. Here is some CSS code which makes your heading awesome and nice looking. As example you can see i am using custom CSS heading tag

Go To Blogger Dashboard

Click on Design Tab

Now click on Edit HTML

Find the following code

]]></b:skin>

Now place the CSS code above the ]]></b:skin> as your choice

Style 1

.post h2
{
background: #FBFBEF;
font-size: 20px;
padding: 4px 10px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #01DF01;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height: 1;
}

Style 2

.post h2 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
}

Style 3

.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAs9XLMdEZksPm2frPWkc_Fx6eUAqyhPVPiyWU0eWjFvnSrgH8gfnDGHIfdPX4PB1r1XPwGoNDto6vb4cMx2DAnu97cukk-h9BciScws81uYU4q884vGk6eqkROXnykxRiiDc9qI56n4U/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}

Style 4

.post h2 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h2:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Style 5

.post h2
{
margin-top:10px;
    max-width:840px;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'georgia';
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #3873CC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h2:hover {
  border-left:10px solid#FF0000;
}

Different CSS code has different style. Choose any of them as your choice

Add Recommended Post Slide To Wordpress Instead Of Simplereach Slide (Wordpress trick)

Few months ago simplereach introduced a recommended post slide for both Blogger and wordpress. They stopped their service. They no longer offer to upload Blogger template to their server to show the slide. But This problem already fixed for blogger with the invention of a code, generated by bloggerplugin. I already posted on How To Add Recommended Post Slider To Blogger. The simplereach wordpress plugin is disable for new users. You cant make api key though simplereach now. Moreover it has some limitations also. New bloggers wishing to use simplereach slide, are not being able to taste the service to increase page view anymore, on wordpress. Only old member of simplereach are using this service. I was looking for an alternative of simplereach slide. And i am happy that i found it. It is nRelate Flyout. Actually the simplereach slide with facebook like button, twitter button and default beautiful CSS was great. As it is no more available so we have to move on new alternative like nRelate Flyout

Download the plugin

Recommended Post Slide To Wordpress And Blogger Instead Of Simplereach Slide

Advantages Of nRelate Flyout

1. Best Alternative Of Simplereach Slide

2.Increase Page view daily

3.Reduce Bounce Rate

4.Earning Offer By their Ad Network

5.Keep Your Smooth And Do Not Make Slow

6.Customization Options For Custom CSS

7.Adding Additional Thumbnail And Many More

Installation On Blogger

Go to partners.nrelate.com. Register there and Choose your blog’s platform as Blogger.

Installation On Wordpress

Download the plugin.[already given download link] and go to plugin settings from dashboard. Ok it's done
Now wait 10 minute and see the awesome recommended post slider

Please share with your friends if you like and thank you for reading the article

How To Make PHP Contact Form In Wordpress(Wordpress trick)

We can easily put contact form in wordpress using plugins. But plugins make your wordpress site loading slow and can lead to vulnerable .Its easy to make a custom PHP contact form. It is also very helpful on skill of

PHP learning. And I am using PHP contact form in my wordpress Blog :)

You have 2 files, 1 HTML file and 1 PHP file

First you will have to upload a PHP file In your web hosting.Here is the PHP file

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name n Message: $message";
$recipient = "Your Target Email Address";
$subject = "Contact Form";
$mailheader = "From: $email rn";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

 Open a notepad and save the code as mail.php
If you dont have a notepad download it From Here Its very useful software for programming learning
After that upload the mail.php file to your webhosting at public_html folder where you installed your wordpress
Then you will find a link like this http://www.yourwebsite.com/mail.php
Now Click on Add A Page . Give title "Contact Us" of the page and Paste the following HTML code

 <form action="http://www.yourwebsite.com/mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">

You only have to change the red colored text in the code. After that publish your contact form page.You are done
It will be difficult for newbies so comment here if getting problem
As we need your help so share our writings or website. Thank you

Tricks Duniya