Learning, SEO and Earning - Best Findings

Add customize blockquote in blogger in CSS

2014-08-30T07:23:00.003-07:00

While designing a professional blogger blog, some bloggers specially take care of beautiful Navigation Bar, Header plus Footer design, Professional Sidebar design, a Customize Blockquote and also showing Customize Blogger Author Profile below each post.
In this post, you'll be able to add custom blockquote in blogger in CSS coding. so without further delay, here we go!

Adding Customize Blockquote in Blogger

Here are steps you need to follow to CSS coding of customizing blockquote in blogger, before we move to add coding, let us see what happens after adding CSS coding of blockquote in blogger.

Live preview of Blockquote in blogger

Step 1: Go blogger.com and sign in.

Step 2: Go to HTML setting in blogger.

Step 3: Press Ctrl+F and find ]]></b:skin>

Step 4: Past the following code above mention code

.post blockquote {
background: #f5f5f5 url(https://lh4.googleusercontent.com/-Lt62qtrIZBo/U-DukTYgUFI/AAAAAAAAC7U/96pfre00ZVA/w690-h33-no/blockquote-horizental-BF.jpg) no-repeat 0% 100%;
margin: 20px;
padding:10px 20px 40px;
word-wrap:break-word;
overflow:hidden;
border-top: 1px solid #DDD;
border-right: 1px solid #DDD;
border-left: 1px solid #DDD;
border-bottom: 0px solid #DDD;
font-size: 0.9em;
}
.post blockquote:hover {
background: #F2F1F1 url(https://lh4.googleusercontent.com/-Lt62qtrIZBo/U-DukTYgUFI/AAAAAAAAC7U/96pfre00ZVA/w690-h33-no/blockquote-horizental-BF.jpg) no-repeat 0% 100%;
margin: 20px;
padding:10px 20px 40px;
word-wrap:break-word;
overflow:hidden;
border-top: 1px solid #DDD;
border-right: 1px solid #DDD;
border-left: 1px solid #DDD;
border-bottom: 0px solid #DDD;
font-size: 0.9em;
}

Step 5: Save your blogger template.

NOTE: You can change BROWN colored text to change image of your choice.

NOTE: If the above CSS code is not working to show blockquote in blogger, kindly remove any other code of blockquote.

Design 2: Image at Vertical border to

Preview of another blockqoute design

Add Customize Blockquote in blogger:

Steps to follow to add another customize blockquote in blogger:

Step 1: Go HTML setting in blogger

Step 2: Find ]]></b:sking>

Step 3: Above it paste the following CSS code:

.post blockquote {
background: #ffffff url(https://lh4.googleusercontent.com/-sQDSgNFfvkk/U9yymga-vUI/AAAAAAAAC3s/1C-SwdZc99Q/w32-h166-no/blockquote-zohaib-jahan-blog.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote:hover {
background: #F7F7F7 url(https://lh4.googleusercontent.com/-sQDSgNFfvkk/U9yymga-vUI/AAAAAAAAC3s/1C-SwdZc99Q/w32-h166-no/blockquote-zohaib-jahan-blog.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
font-color:white;
}

Final words about adding Customize Blockquote in Blogging:

I hope you understand of how to add customize blockquote in blogger in CSS coding. Anyhow, tell me if you have any question about adding beautiful and customize blockquote in blogger. Keep visiting for Blogging, SEO tips and tricks. Also subscribe to be update with our blog.

How to Show beautiful custom author profile in blogger

2014-08-10T09:11:00.001-07:00

To SEO point of view, after each blogger posts showing attractive custom author profile is very important. Google facilitates to show Google Plus profile, you just need to enable it in post body setting of layout in blogger new interface.
But what if you want to show custom author profile? Stay with us to know how to do...
You just to add coding of HTML/CSS (Cascading Style Sheet) in html of your template. I'll guide you step by step.
Before we go to custom author profile, first we see how to show Google plus profile after every blogger post.

Show Google Plus Author profile:

Before we discuss custom author profile in blogger platform, we have to enable to show Google Plus author blogger.
Steps to follow:

Go to blogger.com and sign-in.
Open the "Layout" in blogger setting.
Open "Post body" section in blogger layout setting
As show in picture below, click "Show Author Profile Below Post"
And save it.

For Custom Author Profile kindly read carefully the rest part of the post.

How to make online radio | Sam Broadcaster setting | Tech-Shadow Premium Blogger template

Show Custom Author Profile:

I hope you enabled to Show Author Profile in blogger layout setting. Now you will how to show Custom Author Profile in blogger. Be with me, keep following below steps.

Demo of Author Profile

Here are the steps to follow and HTML/CSS code.

1. Go to Template setting in blogger

NOTE: before editing template in HTML, make sure that you have backup of the template.

2. Now, click "edit HTML"

3. Find the following code (Ctrl+F)

<div class='post-footer-line post-footer-line-1'/>

4. After that code, paste the following code.

<style>
.aboutauthor{
float:left;
width:720px;
padding:8px;
height: 90px;
border:1px solid #ccc;
margin-bottom:-5px;
margin-top:15px;
background:url(http://3.bp.blogspot.com/-cLApl8bnaIk/UcGnYZnnRmI/AAAAAAAAHN8/AuAmaNk_pU4/s1600/pattern-3.png);
color:#444444;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.aboutauthor h2
{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:5px; margin-top: -6px; }
.aboutauthor h2:hover
{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#ccffff 0px 1px 1px;font-size:28px;margin-bottom:5px; margin-top:-6px;}
.aboutauthor p
{margin-bottom:5px; margin-top: -6px;}
.aboutpic{
float:right;
margin:0;
}
.aboutpic img{
border:1px solid #999999;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}
.aboutpic img:hover{
background:#FFFFFF;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
width:80px;
height:85px;}
.aboutsoc img
{
height:35px;
margin-bottom: -7px;
}
.aboutsoc p
{
font:16px georgia;
font-weight: bold;
display:inline;
border-radius:5px;
padding:5px;
margin-right:10px;
}
.aboutsoc a
{color:#33ffff;}
.aboutsoc a:hover
{color:orange; font-size:20px; font-weight:bold;}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='aboutauthor'>
<div class='aboutpic'>
<img alt='Zohaib Jahan Blog' height='74' src='https://lh5.googleusercontent.com/-637rapoKfCc/U9tiG1IWyAI/AAAAAAAAC0w/aG2J0X7SjQQ/w80-h85-no/Zohaib-Jahan-author.jpg.jpg' title='Zohaib Jahan' width='70'/>
</div>
<h2>About Zohaib Jahan:</h2>
<p><font color='white'>He is a passionate blogger; providing SEO, Blogging, PDF stuff. As well as He Graduated in </font><font color='#33ffff'><b>BSc in Electronics Engineering </b></font><font color='white'>from</font><font color='#33ffff'><b> UET Taxila, Pakistan.</b></font><font color='white'> You can contact me via Email.</font></p>
<div class='aboutsoc'>
<p><font color='gray'>Catch me on Social Media:</font></p><a href='https://www.facebook.com/jahanzohaib'>Facebook</a> | <a href='https://twitter.com/zohaibjahan'>Twitter</a> | <a href='https://plus.google.com/+zohaibjahan?rel=author'>+Google</a> | <a href='http://pinterest.com/zjahan'>Pinterest</a></div>
</div>
</b:if>

5. Save the template, and you did it finally.

6. Change BLUE and BROWN text according your requirements.

NOTE: if you cannot find <div class='post-footer-line post-footer-line-1'/> in blogger HTML setting, then please find following similar codes:
<div class='post-footer-line post-footer-line-2'/>
or
<div class='post-footer-line post-footer-line-3'/>
and paste code below any of the above line.

Final words about author profile:

I hope that you follow my instructions, and now you are enjoying to show custom author profile below blogger posts. You can change the code if you know just ABC of HTML/CSS (Cascading Style Sheet). Anyhow, let me know if you have any question regarding showing custom author profile in blogger, it'll be an honor to answer your questions. Keep visiting our blog for more blogging and SEO (Search Engine Optimization) tips and tricks.

Top ten websites to find jobs in Pakistan

2014-07-23T08:57:00.000-07:00

Here I am going to share with you best job searching websites. To find jobs in Pakistan is inside a difficult job. Normally, Job ads are served by Daily Pakistani Urdu Newspapers or online job boards in Pakistan. Many people say that industries are preferring job websites for publishing their job ads in Pakistan as it is a cheap way of classifieds easy to collect data of candidates for themselves as well as these websites make easy for candidates to search jobs in Pakistan also easy to apply, even subscribed to get latest jobs published.

Recent published post:

How to make online radio | Sam Broadcaster setting part 2 | How to install windows 7, 8 from USB

Ranking criteria of Best Job Search Websites in Pakistan

Alexa Rank i.e. website traffic is main point that I chose while making this list and frequency of job updates on daily basis. Some websites even offer email subscriptions of a particular job category, and the facility of applying online that is my favorite thing that I love while exploring websites of jobs in Pakistan. So here we go !

Top ten Job Search Websites in Pakistan:

1. Rozee.Pk Alexa Rank in Pakistan: 49

Rozee.Pk is the best website that I have ever used to find jobs in Pakistani Industries. Rozee.Pk is linked with Industries, it collects companies data, serve job ads in Pakistan. While on the other hands, it provides job applicants a platform to make their CVs through which they apply online. Rozee.Pk also provides its premium services like professional CV writing, presenting applicant CVs on tops to increase their chances of hiring. Rozee.Pk is updated on daily basis and it provides applicants to get job alerts of one or particular categories of jobs in Pakistan.

2. Indeed.com.pk 290

Indeed.com.pk is actually not a job board but instead it is just like a search engine that collect job published on other websites like Rozee.pk, Mustaqbil.com, Nelaam.com, jobsnama.com, Brightspyre.com etc and share these latest jobs in Pakistan.

3. Mustakbil.com 155

4. Jobsnama.com 2700

5. Jobsalert.pk 419

6. PaperParho.com 2231

7. Nokri.pk Alexa Rank: n/a

8. Jobz.pk 372

9. Paperpkads.com 122

10. Bayrozgar.com 406

Other websites related to Jobs in Pakistan:

Top five websites to find international jobs in Pakistan:

Update: Alexa rank of these websites is updated on 7 July, 2014.

Read also: How to show Custom Author profile in Blogger

Final Wording about Best Job Websites in Pakistan:

These are the best website that I shared with you to find latest jobs in Pakistan and abroad specially Gulf counties related to Engineering, Medical, DAE, HR, Teaching, Abroad, labor, govt jobs published on Daily Pakistani newspapers or directly on these websites. And Important thing is that some websites like Haleeb, Fauji Fertilizer, Fatima-Group, Ericsson etc; they have their own setup of publishing jobs in Pakistan only on their websites.

I suggest you to drop your CV or resume to the industry related to your field by hand. Tell me if you got job by any of these listed websites.

Sam broadcaster setting - Online radio part-2

2014-07-20T23:12:00.000-07:00

Making a free Online Radio

Previously I published a post on making online radio in which I discussed Auto DJ, radio stream hosting, embed web player and last thing is Sam broadcaster settings. Online Radio is becoming more popular than FM radio as it is cheap, easy to install, maintenance. Moreover, FM radio stations are also being broadcasted through web player now a days.
Before we go into details of Sam broadcaster settings, briefly we list the things required:

Online Radio setup requires:

Stream Hosting
Broadcasting software like Sam Broadcaster
* Auto DJ
* Embed into a web player.

Remember that auto DJ and web player are of choice (not so important) for online radio setting. Anyhow, without further delay, let us discuss settings of Sam Broadcaster needed for making online radio.
First of all you must have installed Sam Broadcaster of 4 plus version, if you don't have then first Download it and after installing it, open the Sam Broadcaster.
A windows will appear similar as shown below. If doesn't appears, You can adjust these windows i.e. Queue, History, Encoders, Voice FX etc from Windows Menu in the Sam Broadcaster.

Recommended posts: How to show Custom Author Profile | Tech Shadow Free premium Blogger template

Steps Sam Broadcaster setting:

In Encoders Window, click plus sign to add new encoder setting, a window appear as show below.
In Format option of Converter sub-menu, you can adjust audio format, bit-rate, frequency and channel of your own choice, for example: mp3PRO, 64 kb/s, 44.1 kHz, Stereo.
And the most important setting of encoder is of Server Details in Sam Broadcaster, it supports Shoutcast, Live365 and Icecast type servers. We used Shoutcast Server type.
Then put Server IP, Server Port, Server password which you got from My Radio Stream website, for example s8.myradiostream.com, 4140.
Station Details are optional.
Press OK and the encoder setting is finished.

Audio files setting in Sam Broadcaster:

Add Audio files using Queue window, you can also add a playlist of audio files, double click will play the file you click.
In Voice FX window in Sam Broadcaster, you can adjust the volume of music as well as voice. Or simply turn ON mic and press Local talk button whenever you want to speak, it will automatically lowers music volume while raises your voice as well.
History window stores a list of audio files that are played.
Some external windows may appear in Sam Broadcaster named as Deck A, Deck B. Deck A is for current playing music file while Deck B waits to play next one and vice versa.

Final words for making Online Radio:

Finally, Making Online Radio tutorial is finished with Sam broadcaster setting. I hope you understand it and now you are able to make your own free online radio. Remember that this post is the part-2 of How to make online radio.
Note: You may have to purchase Sam Broadcaster to use its full functions.

How to make a free Online Radio

2014-07-03T01:19:00.000-07:00

Complete guide to set up a free Internet Radio

The world has become global village owing to internet and its wonderful services. Online radio has attracted the radio lovers to itself as Frequency Radio "FM" is expensive to setup, lots of staff and money required etc. On the other hand Online radio is easy to install, simple skills are needed and it is also cheap even free. Today, in this tutorial you are going to learn how to make online radio, set by step by simple guide. So here we go...

Part 1: Radio Stream hosting to make online radio
Part 2: Sam Broadcaster settings

Things required to make online radio:

Radio Stream Hosting
* Web-player
Broadcasting software
* Auto DJ

Auto DJ:

* Auto DJ is an optional thing for setting up online radio and it means you upload your music files on auto-dj website, the website provides you a playlist-code of the uploaded files and website may charge some money also. But RJ or DJ can also manage songs manually using a software like Sam Broadcaster and with the help of Mic, headphone and a PC having some songs.

Without wasting any time, we move to further details of steps required to set up online radio.

Recommended Posts to read: How to show Custom Author Profile below blogger posts.

Free Online Radio Stream Hosting:

Online radio stream hosting is almost the same thing as website hosting. Stream hosting means your audio e.g. music files are first uploaded to a stream hosting servers i.e. shoutcast servers then audio files are transmitted through web player.

There are many companies in race providing radio stream hosting i.e.

MyRadioStream
Caster.fm
Listen2myradio
Wavestreaming

In this tutorial, we'll discuss My Radio Stream only as it is free radio streaming plus it also provides a link to listen you streamed data. So first go to this website and sign up for free. After making account on my radio stream, you will see a settings on a web page like this:

Here is screen-short of my radio stream website. You just need to note three things in stream settings:

Stream Address

for example address as in picture is s8.myradiostream.com

Stream Password
And Port number

e.g. 4140 is port number as show in screen-short.

Both things are needed for broadcasting software like Sam Broadcaster.

NOTE: In free service of my radio stream, you are restricted to 192 kbps streaming speed and you have to start radio streaming when you want to broadcast.

Web Player:

* Web player is actually an interface through listeners can tune-in your online radio via web or it can also be downloaded as .pls or similar file to tune-in the radio from VLC, WinAmp like software. But interesting thing; it also an optional as free service of my radio stream provides a dedicated link for listening your radio.

Read also: How to install windows 7/8 from USB | Best Jobs searching websites in Pakistan

There are my websites providing radio direct tune-in services but I used Wavestreaming service. You can enjoy its free service of direct tune-in in the form a java-code by providing only;

Stream address
Port number

It also facilitates you different skins of online radio interface. This java code can inserted anywhere to direct tune-in your radio. Part-2 will be published soon, now tell me if you have any question...

Tech Shadow Premium blogger template free download

2014-02-18T15:24:00.000-08:00

Tech Shadow is a 2 Column with beautiful Navigation Bar, unique 3 column Footer Design, Socializer and awesome Subscription Box. Tech Shadow premium is basically designed by Muhammad Yaqoob (MybloggerLab), but thanks to Mr Yaqoob to release it as totally free.

Best blogger template Tech Shadow:

This is my first post on Best Findings blog, actually I'm dreaming of becoming a well-known blogger providing blogger templates, search engine optimization tips, ways of online earning etc.You can find many other well-known responsive templates but Tech Shadow is the best blogger responsive template I have found on the internet. The important point is that it's premium version is free and I hope You'll also love it by using it. So here we discuss it without further delay.

Tech Shodow Features:

SEO optimized template
Responsive navigation bar
A ad section of 468x60 is inserted in the header
300x250 ad can be placed in the right side bar
Subscription area below the navigation bar
Social media profiles icons
Socializer that includes:

Facebook like, Tweet, Google plus sharing button
Follow Us: Facebook fan page, Twitter profile
And sharing buttons of popular social media sites

How to show Custom Author Profile in Blogger | How to online radio | Sam Broadcaster setting

Screen shorts of Tech shadow

Header, Responsive menu bar

Subscription area , Social media fan pages

Socializer , Related posts

Footer

How to install:

Go to Blogger
Open 'Template' menu
Then download your current template theme as backup
And finally choose '.xml' file of tech-shadow template and simply click upload

That's it, congratulation you done it, enjoy. Dear let me tell if you face any problem while installing the template.

Tech shadow downloading Links:

Live Demo Download

Note: Skip Ad after 5 seconds to download

Final Words:

I try to describe all features of Tech shadow blogger template. Kindly tell me if link is not working. Also tell me if you need my help to edit the Tech shadow template. Keep smiling and visiting us for more Blogging, SEO tips and tricks.

How to install Windows 7 and 8 from USB Drive

2014-01-23T13:58:00.000-08:00

World is getting smart day by day. It is not the age of CD or DVD but the era of technology, internet and smart devices. Power ISO makes easy to run Windows setup from USB pen drive making it bootable. In this post, you'll be able to install Windows 7, 8 from Universal Serial Bus 'USB' using Power ISO software.

So here we go...!

Making USB bootable using Power ISO:

First Step: You must have installed Power ISO software (or similar of that) to initiate the process.

Step 2: Open Power ISO software by double clicking on its icon placed on destop.

NOTE: First you must have ISO of windows setup i.e. .iso file of windows. don't worry If you don't have, you can create iso file of setup from that software or iso creator easily.

Step 3: Go to tools menu (shortcut key: alt+t) in the toolbar menu of Power ISO.

Step 4: Select create bootable USB drive from tools menu.

Step 5: A window appears like that, browse windows ISO file as source image file.

Step 6: Select your destination USB drive in which you want to install.

Step 7: Select HDD as writing method in the opened window of Power ISO.

Final Step: Now click on start button at left-bottom, wait for its completion.

NOW, restart you PC and press F12, change BIOS setting; keep 'boot from USB drive' at number 1 and it starts to run windows 7, 8 setup.

Final words:

Congratulations you did it finally, I hope you understand the procedure of installing windows 7/8 from USB drive using Power ISO software. Anyhow, ask me friendly if you have any question.