The Social Networks Worth to Sign In

Social Networks Sign In Plan

10. Habbo

Habbo is a social networking site that encourages you to meet new people by mixing gaming and chat rooms. Geared toward teens, Habbo is not like your typical social networking site. When you register with Habbo you create an avatar and are assigned your room. From there you can go into various Public rooms and chat with other people on the Internet.


While you do create a profile you can’t post photographs of yourself or blog like with most social networking sites. The profile revolves around your avatar and their friends, groups and songs. The Habbo Hotel and various rooms act like virtual chat rooms. You can walk into a public room and just talk to whomever is there or if you already have a well established network of friends you can create a private room that allows people by invitation only.


The minimum age to join Habbo is 13. You can set your profile to be visible to everyone or invisible to everyone. We would have liked a few more customized privacy settings. However, since your real photograph and personal information like age, or location aren’t available to other users we still felt secure with our profile open publicly to other Habbo members.


Habbo also encourages users to purchase furniture for your room, clothes for additional personalization and profile upgrades. You do this by purchasing coins, 25 coins cost about $5. To play games in Habbo you have to purchase coins, and then get game tickets.


We felt completely safe using Habbo. With just a little Internet savvy young teens could have a lot of fun using this site. It’s just a bit non-traditional and not exactly what one thinks of when looking for a social network to sign up with.


We did find Habbo needed an additional Shockwave download in order to open rooms. Shockwave is a free program and not difficult to download. Also, we did have difficulty using Habbo in a FireFox browser but it worked fine in Internet Explorer.


9. Netlog

Netlog is a European social networking site with more than 35 million user and is relatively unknown in the United States. Here you can set up a profile, add pictures join clans (groups), upload videos and listen to music all while networking with your friends. We particularly liked that the site is completely advertisement free.


The minimum age to join Netlog is 13. You can adjust your profile’s security settings to be as open or private as you want. You can adjust if your profile can be found using a simple search, or who specifically can access your profile, or if only people in your age range and location can contact you. You can also use the Netlog whitelists and blacklists to accept or block specific users.


We found that Netlog is not an advocate of meeting and networking with people you don’t already know. However, this makes things a little difficult when searching for friends as well. Netlog encourages you to upload your email address books and they will find your friends for you. You can also do a search using the keyword box, although we found that method to be terribly inefficient.


The currency of Netlog is credits. You can purchase credits and use them inside the service for additional features like putting aspects of your profile in the spotlight. You also get free credits when your friends register with Netlog based on your invite or when you participate in various Netlog activities.


Netlog also offers a free download of their Netlog 24 toolbar that alerts you when you have a message or new friend request without being signed into the Netlog website.


Additionally, you can change your profile by adjusting colors and background or you can chose from a selection of pre-made skins. Unlike MySpace, you cannot add HTML or CSS code to farther customize your profile.


Netlog’s networking features are typical of a social networking site including blogs and personal videos. You can join clans which act like groups, but we felt they were a little unusual and organized poorly. The categories are very general and there is no “drill down” method. For example, when we selected the Sports clan there were just pages and pages of groups. We would have liked the ability to narrow or filter our search specifically for Soccer or Baseball, and then by specific teams.


Additionally, we would have liked to see the implementation of applications, which are becoming a social networking necessity.


8. Zorpia

Zorpia.com is the largest social network you’ve never heard of. Zorpia has a large international community; its features include profile customization, a fair selection of networking features and an incredibly detailed search. On the whole, Zorpia is your typical social network.


Zorpia has an impressive music section featuring popular artists like Ashlee Simpson, Vanessa Hudgens, Alanis Morissette and more. You can also go to the artist’s profile page, leave messages or join their friend list. The Video section consists of a variety of videos uploaded by users. Some videos are originals submitted directly by users, but we found the vast majority of videos were taken from YouTube.


The groups section includes about 11 categories of topic with groups created by users. Although we found the group options to be broad and eclectic they mostly felt like forums. Most just seemed like a threat of comments prompted by one question or random topic of conversation. But they are interesting nonetheless.


You can purchase a Royal Membership for extra networking options such as an ad–free profile, extra profile design features and unlimited messaging. The membership costs $8.95 for 3 months, $13.95 for 6 months and $17.95 for 12 months.


Zorpia has a number of security features that allow you to keep your profile and personal information private. You can restrict who sees your profile and who sends you messages. You can restrict it to friends only or Zorpians in your Country. You can also select who views your photo albums, journals, video collections and more.


For testing purposes we left our profile public and placed very few restrictions to help determine the quality of the social network site. We were a little unnerved at the number of unsolicited messages we received from random strangers. It’s understandable to get a few messages here and there from people you don’t know, just about every day we got at least one or two messages or instant message prompts from a stranger looking to chat or exchange email addresses. Meeting new people occasionally can be fun and interesting, but eventually it just became creepy.


7. PerfSpot

Compared to some of the other social networking sites in our review, PerfSpot is a relatively new kid on the block. Like most social networking sites PerfSpot offers videos, music, customizable profiles, applications and groups. You can even open your own Internet store.


Although PerfSpot allows users as young as 13 to join, the site is aimed at college students and young professionals providing a more adult atmosphere. That’s not to say the site is adult oriented, but sections like “PerfNights” is a section dedicated to pictures of people drinking and partying. The profiles of users under the age of 18 do not appear in a general search.


A unique feature to PerfSpot is the ability to set up an Internet store using PerfSpot at your host. It’s your own little ecommerce site. All you need is a PayPal account and some stuff to sell. They also offer free online storage. You can upload an unlimited number of documents and files to your PerfSpot account. You can upload homework, PDF files, data reports and more from a wide variety of extension options.


PerfSpot also has videos from most of the major networks and Hulu. There are music videos, television shows, movies and more. There is also a substantial music section that lets you to listen to thousands of songs and add them to your profile playlist. However, we noticed you do not have the ability to upload your own videos to the site.


We liked that PerfSpot has an eclectic collection more than 100 groups to join and you could customize your profile using they’re profile editor. Although you can’t place your own code in like MySpace, you can choose a color scheme pick from one of their pre-made skins and themes.


We felt that PerfSpot’s interface was clean and easy to navigate. Privacy settings were easy to find and easy to set up. Various sections of your profile could be set to different security levels and you can limit from which countries your friend requests come from.


Although PerSpot is a secure site we felt that there wasn’t enough attention or focus geared toward networking with people you already know. Instead during the course of our evaluation there were more than a half dozen strangers from all over the world asking for friend requests. Although this is less likely to happen if our profile was set with stricter privacy settings, we wanted to see what happens when you keep your profile as public as possible.


We were also a little surprised to find that although PerfSpot has a section about online safety and concerns there was no link for general help. Through the Contact Us link we found some email addresses, phone numbers and online help (which never seemed to be available), but we would have settled for a selection of FAQs.


6. Orkut

Orkut is Google’s attempt at social networking. Already popular in Brazil and India Orkut is struggling to make headway in the United States. In order to register for an Orkut account you must have a Gmail account and all your Orkut updates, messages and friend requests will be forwarded to your Gmail account.


Orkut is your typical social networking site still in infancy. You create your profile filling in your likes and interests. However, Orkut has seemed to take a page from Facebook and does not have any customization options. You can upload photos, create albums and add apps.


You can also add scraps which includes things like YouTube URLs, widgets, photos, podcasts and more. It is specifically for friends. Other people just browsing your account won’t be able to see it. We found that most people use the scraps like comments.


We felt like it was really hard to search for and find friends using Orkut. You can import your address book using a .CSV file or place your email contacts into the system one by one looking for possible contacts. You can also look for contacts using keywords in the search box in the upper right-hand corner of the site. However, there is no way to narrow your search by location or age or school.


We liked the specifics of Orkut’s privacy options. You can specify which sections of your profile are visible instead of the usual “blanket” approach of everyone or just friends. You also have the ability to block users, report spam and report abuse. Additionally, you must be 18 to open an Orkut account. Although we didn’t encounter any explicit material while surfing the site.


Orkut includes a fun “ask a friend” feature that allows you to post a question and get responses from your friends. It’s like your own mini poll.


The help section includes a getting started guide, FAQs and forums run mostly by other users. As a whole, the help section is well done; however, we would have like to see an email contact just in case.


5. Hi5

Give yourself a virtual high–five when you join the global social networking website hi5. Don’t limit your circle of friends to people you know from school or your neighborhood; with more than 70 million members, explore the unlimited possibilities of connecting with people all over the world for free. Additionally, we noticed hi5 is completely advertisement free.


hi5 offers profile customization, security options and apps. A few of the things keeping hi5 out of our top three is the difficult search options, their sad help and support section and dependency on apps.


4. Friendster

Friendster is one of the most popular social networking sites in Asia. Now, it is starting to make an impact in the United States. Friendster provides plenty of networking features, the ability to customize your personal profile and to get you on your way to establishing a large network of friends.


Discover other avenues of expression by posting blogs and joining forums. You can choose from a variety of extra features like videos and groups. Friendster tries to cater to a slightly older crowd requiring users to be at least 16 to join.


3. Bebo

Bought by AOL, this social network service has been gaining ground in the United States, it’s been nothing but good news and consistent growth. Extraordinarily popular in the UK, Bebo is beginning to give some of the other social networking sites a real run for their money. Like other sites you can personalize your profile, add apps, set privacy settings and join groups.


However, we found that navigation and friend finding on Bebo to be a bit difficult, and although they take great pride in their security settings, we found that it was a little overboard.


2. MySpace

MySpace is extremely popular and receives a lot of traffic, but is not for the serious blogger.


The advantages to MySpace include the ability to upload and share video, audio and image files as well as a blog. But blogging is not the main business of MySpace, MySpace’s central focus is social networking.


One of the problems we have with MySpace in terms of blogging, is not many people would want to send their business associates or family to a site that displays the kind of material MySpace users post. MySpace does give you a link to your blog, so you could send your direct link to someone, but if they had to search for your blog it is nearly impossible to find. For example, in order to find work–friendly blogs, we tried to find blogs on cars and dogs; we were given a list of blogs that had more to do with sex than cars or dogs.


If your primary interest is social networking and non–professional blogging, then MySpace will work for you, otherwise try WordPress.


1. Facebook

It’s nearly impossible in this day and age not to know about Facebook. Facebook is a social network site that started out strictly for college students and was available by invitation only. Now, it is a cultural phenomenon stretching across the globe. With more worldwide users than MySpace, Facebook has taken hold as undisputable leader amongst social networking sites.


READ MORE - The Social Networks Worth to Sign In

Add Your Latest Pinstagram Pins to Sidebar Blogger / Wordpress

Add Your Latest Pinstagram Pins to Sidebar   Blogger/Wordpress


I think you all know by now that Pinterest is the hottest social
network around! And as bloggers it is imperative that we jump on board
and utilise it to its full potential. Pinterest can be a great source of
traffic and you should be pinning your own posts as well as posts from
other people. WordPress has a multitude of plugins that help you display
your latest pins but of course Blogger lags behind in that respect. I’m
trying hard to really minimise how many plugins I use as they slow down
your site so I’ve compiled some code that will work for both wordpress
and blogger users.


First of all you’ll need to log into your Blogger or WordPress
dashboard. Navigate to the layout page in Blogger or the Widgets page in
WordPress. Then click on add a gadget then HTML/Javascript (or text
widget in WordPress).


Visit this link http://nicstestsite1.blogspot.co.uk/p/pinterest.html and copy the code on it


Replace the bolded username with your own Pinterest
username. Hit save. You should now have something that looks a bit like
this:


Add Your Latest Pinstagram Pins to Sidebar   Blogger/Wordpress


Don’t forget to link your blogs in the comments area if you use this tutorial Add Your Latest Pinstagram Pins to Sidebar   Blogger/Wordpress

READ MORE - Add Your Latest Pinstagram Pins to Sidebar Blogger / Wordpress

Add Follow Links to Bottom of Posts

I recently added links to the
bottom of my posts reminding readers that they can follow this blog via
Bloglovin, RSS Feed, Twitter etc. Within 24 hours of adding this
function to my blog I gained 100 feed subscribers – impressive huh! So
today I will show you Blogger users how to add follow links to the
bottom of your own posts.


So let’s get started:


First off you’ll need to log into Blogger and navigate to the
template page. Click on Edit HTML>Proceed>Expand widget template.


Find:


<data:post.body/>


Add the following code below:


Subscribe via <a href=”http://girldoesgeek.com/feed“>RSS Feed</a>, Follow us via <a href=”http://www.bloglovin.com/en/blog/3325413/girl-does-geek/follow“>Bloglovin</a> or <a href=”http://www.google.com/friendconnect/settings/edit?smpl=true&st=e%3DAOG8GaCUqF%252Bwn%252FQmICo8vozqd%252Bz4nbCCNxrppW%252B04ZbcHfcMeG%252BMR89vjXUGZmc8B57ae3p6NH4%252Fj8xuoXvmo8KSdqpn0r9MRqNlIbjt2CvjwQ39nKbENAC0kXdFt4RljddaoM%252FuhHv%252FPkxQI1rTQd6GIHpZ%252F9lUjrCnQgvYgOWW1EuQHpHUzLvg1O9bXEL1bu2eiSk0hRn3Ls%252Bjzzt0Su1dMeql0i%252BG%252Fed55uOisi7ZknEsoYt%252BG%252BzGdYJt6aQQhWe2QZJw0qYb%26c%3Dpeoplesense“>Google Friend Connect</a>, Like us on <a href=”http://www.facebook.com/pages/Girl-does-Geek/283373921710733“>Facebook</a>, Add us to a circle on <a href=”https://plus.google.com/115639686051747826824/posts“>Google+<a href=> or Come say hi on <a href=”https://twitter.com/#!/fayemarieblogs“>Twitter</a>


See the bolded text, these are the links for the various ways to
follow, of course you’ll need to replace these with your own links.


Link 1=RSS Feed Link


Link 2 = Bloglovin


Link 3 = GFC


Link 4 = Facebook


Link 5 = Google+


Link 6 = Twitter


 


After you’ve changed the links. Click save.


That’s all there is to it. I hope you all find it useful.

READ MORE - Add Follow Links to Bottom of Posts

Adding Border to Content Areas

Coding for Beginners–Adding Border to Content Areas


 


I put a call out on Twitter recently asking my followers what they’d
like to see on the blog and one request was for how to add border to
different areas of your blog. So today I’ll show you how to do this to
the different areas of the blog design.


So first let me explain the code behind adding borders. The HTML code for borders is actually really simple.


Border: 1px solid #000;


So to break this down it is Border: width style colour.


The width can be anything you want. 1px would be a very thin border and 5px would be a much wider border.


The style can be solid, dotted, dashed or double. These styles are pretty self explanatory.


The colour can be anything you desire #000=black #fff=white #999=dark
grey #ddd=light grey. There are 1000s of colour codes out there for
every desired shade and there are many sites online that can provide
these codes for you. Just google HTML color codes to find the colour
code you need.


Using the attribute border adds a border all the way around the area
you’re applying it too but maybe you’d just like a top, bottom, left or
right border. Well that is easy to do too. Instead of writing ‘border:
width style color’ write ‘border-left: width style color’ (or right,
top, bottom depending on where you’d like the border applied)


Now that you know the code behind applying borders, lets examine some areas we could apply it too.


Header


Maybe you’d like to apply a border around your header. The code for
the header area is: #header-wrapper. So to add a header border we’d add
the following code to the Add CSS box in Blogger’s template designer.


#header-wrapper {


Border: width style color;


}


To add borders to other areas of your design just
replace the bolded area in the code above with any of the following (the
code part is bolded) .


.sidebar – sidebar


.main-inner – to add border around the content area which includes the post and sidebar areas


.post-body – adds border to the body of your post but doesn’t included the date and comment/meta area


h3.post-title – add border around your post titles only


.date-header span – adds border around the date


h2 – adds border to date and sidebar titles


.tabs-inner  – adds border to your pages widget


So there’s a little guide to adding borders to content
areas for you guys and like always just drop me a comment if there is
anything you don’t understand or need clarification on.

READ MORE - Adding Border to Content Areas

Customize The Top Tabbed Nav Menu on Blogger

Blogger’s Template Designer is a great resource for editing your
blogs design and the addition of custom fonts is a welcome one. But it
does have its limitations. So today I’ll be showing you how to customise
your navigation menu using the add CSS function that is available in
the template designer.


By default Blogger adds a border to the whole navigation menu and
grey background to the active link. So i’ll be sharing some code that
will enable you to remove the borders and background among other things.


 


How To..... Customise the Top Tabbed Nav Menu on Blogger


 


Remove All Borders


How To..... Customise the Top Tabbed Nav Menu on Blogger


.tabs-inner .section:first-child ul {

border-left: 0 solid #DDDDDD;

border-right: 0 solid #DDDDDD;

border-top: 0 solid #DDDDDD;

margin-top: -1px;

}


.tabs-inner .widget ul {

background: none repeat-x scroll 0 -800px transparent;

border-bottom: 0 solid #DDDDDD;

margin-left: -30px;

margin-right: -30px;

margin-top: 0;

}


.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

background-color: #EEEEEE;

color: #000000;

text-decoration: none;

}


.tabs-inner .widget li:first-child a {

border-left: medium none;

}


.tabs-inner .widget li a {

border-left: 0 solid #FFFFFF;

border-right: 0 solid #DDDDDD;

color: #000000;

display: inline-block;

font: 12px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif;

padding: 0.6em 1em;

}


 


Remove Grey Background on Active Link


How To..... Customise the Top Tabbed Nav Menu on Blogger


.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {


background-color: transparent;

color: #000000;

text-decoration: none;

}


 


Add Background Colour to Whole Navigation Menu


How To..... Customise the Top Tabbed Nav Menu on Blogger


 


.tabs-inner .section:first-child ul {

background: none repeat scroll 0 0 #DDDDDD;

margin-top: -1px;

}


Change #DDDDDD to the colour code of your choice. #FFFFFF = white, #000000 = black, #DDDDDD = Light Grey, #999999 = Dark Grey.


 


Add Solid Border to Navigation Menu


How To..... Customise the Top Tabbed Nav Menu on Blogger


 


.tabs-inner .section:first-child ul {

background: none repeat scroll 0 0 #DDDDDD;

border: 2px solid #999999;

margin-top: -1px;

}


This code will add a dark grey border to your navigation menu. Like
before just change #999999 to the colour code of your choice. To add a
dotted or dashed border replace ‘solid’ with ‘dotted’ or ‘dashed’.


 


Separate Tabs and Add Background Colour


 


How To..... Customise the Top Tabbed Nav Menu on Blogger







.tabs-inner .widget li a {



    background: none repeat scroll 0 0 #DDDDDD;

    border-left: 0 solid #FFFFFF;

    border-right: 0 solid #DDDDDD;

    color: #000000;

    display: inline-block;

    font: 12px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif;

    padding: 0.6em 1em;



}




.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

background-color: #DDDDDD;

color: #000000;

margin-right: 20px;

text-decoration: none;

}


 









To Move Nav Menu to the Right







.tabs-inner .section:first-child ul {



    background: none repeat scroll 0 0 #FFFFFF;

    border-left: 0 solid #DDDDDD;

    border-right: 0 solid #DDDDDD;

    border-top: 0 solid #DDDDDD;

    margin-left: 100px;

    margin-top: -1px;



}







Adjust the 100px value to get the desired result. Increase the
amount to move the menu further to the right and lessen the amount for
the opposite effect.



I hope that this guide will be a good starting point in customising
your menu. But if you need to know anything particular just let me know
in the comments!
source : http://girldoesgeek.com/2012/05/how-to-customise-the-top-tabbed-nav-menu-on-blogger.html
READ MORE - Customize The Top Tabbed Nav Menu on Blogger

Add Related Posts Widget to Bottom of Posts Blogger

Add Related Posts Widget to Bottom of Posts   Blogger


 


It is well known that adding a related posts widget to the bottom of
your posts increases pageviews and lowers your bounce rate. Link Within
is great for this as it adds a thumbnail and is super easy to add to
your blog. So today I’m going to show all you Blogger users how to add
it to your blog.


First of all navigate to http://linkwithin.com


Fill in your blog details on the front page.


Add Related Posts Widget to Bottom of Posts   Blogger


Then click on Get Widget.


On the next page click on Install Widget.


It will now take you into Blogger. On this screen choose your blog if
you have multiple ones on your account then click on Add Widget.


 


Add Related Posts Widget to Bottom of Posts   Blogger


Your Linked In widget has now been added to your layout. All that is
left to do is drag the widget from the top of your sidebar to the
bottom.


 


Add Related Posts Widget to Bottom of Posts   Blogger


 


Voila. That is all there is to it. Now all your posts will have a related posts widget at the bottom.

source : http://girldoesgeek.com/2012/02/add-related-posts-widget-to-bottom-of-posts-blogger.html

READ MORE - Add Related Posts Widget to Bottom of Posts Blogger

Recent Post with Thumbnail Widget on Blogspot ; lang=id

Recent Posts With Thumbnail. Recent posts atau postingan terakhir alias
last posts memang perlu juga di tampilkan, gunanya selain mempercantik
blog atau mengisi kekosongan widget adalah menginformasikan kepada
visitor tentang perkembangan artikel terbaru pada blog tersebut melalui
menu pada blog itu.

Jadi setiap ada update postingan terbaru maka secara otomatis akan tampil di menu Recent Posts tersebut.



Bagaimana jika Recent Posts tersebut disertai juga dengan gambar/image,
pasti asik juga kelihatannya. contohnya ada di sidebar blog ini.

Berikut script recent posts disertai gambar untuk blogspot.



Recent Post With Thumbnail Widget :



<script language="JavaScript">

imgr = new Array();



imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNEZCp8OXtAUaw_G1_L_UjtzuVXZrY1EIofGWaycDam4S_BZov7uS_fEtIe2cU1skUks7-nJkXFgmzd7fSmJhZBaxYOdbBtmDuDZgLIX23f22PsV5lNjvKOctxuIpMsi4niawGTZWBo_A/s1600/img1.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizK-bKsDbQeRFKGFKUACrnkd9iU5L4d_YZUC0kJGEIRfR7lTMRYoEh54szA0w6iGxxI7xVXviRGUlg8HyRK577p_yuGUKWPZKOWKP6tvSmMoR_g4fUDrsRj009AiKd-LSxS1UrA2tRviY/s1600/img2.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuoCN6Rz1wDxGI6Q3ZNkS08KhREDeGQcr59U21NyF70-ncavD6gZRrn628qpg1rr8i06ZkfWVU6jwufCbCrtinA2u7LVEolKKRmZvPjqW9lqnku15Lmd2G1qfonNYa0ncGJNKv38w-v9k/s1600/img3.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6lM9s2Dewb5feHJ-A8NC4XuxQrMuAWE8cE28NUGDvicnJSCT6ipBzWvEchWBHXtvtsWWPpKBFz21f-LMuxSABPay0ZB1zyMAm8fdFZw-qSsi1GTa9yIXvlgMsSAe81td5u3qC_pXcDuA/s1600/img4.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjSU2cabyM97_orwGX7I3Yh1PSvAHGCmIs8CVketQyL-rUj_a4rFHuAxkFzyg4mkGrVWMaeSzDrQdFN2IKtUj2PrFAvmltExy66yB0xh9wQOyLZNiLgSZcobPDD4fKLGYt4G4DvUi3VU/s1600/img5.jpg";



showRandomImg = true;



tablewidth = 360;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#ffffff";



imgwidth = 40;

imgheight = 40;



fntsize = 12;

acolor = "#000";

aBold = true;

icon = " ";



text = "";

fsize= "11";



showPostDate = true;



summaryPost = 60;

summaryFontsize = 11;

summaryColor = "#666";

icon2 = " ";



numposts = 5;



home_page ="http://hansenpunya.blogspot.com/";

</script>

<script type="text/javascript" src="http://www.weebly.com/uploads/3/9/3/0/3930875/recentposts.js"></script>


Keterangan:

tablewidth = 360 "menunjukan ukuran lebar widget".

imgwidth = 40 "adalah lebar gambar".

imgheight = 40 "tinggi gambar".

summaryPost = 60 "panjang karakter yg akan tampil".

numposts = 5 "jumlah postingan".
READ MORE - Recent Post with Thumbnail Widget on Blogspot ; lang=id

Add Post Slide Out to Blogger


  1. Login to your Blogger Dashboard.
  2. Go to Design / Page Element.
  3. Click "Add a gadget" from sidebar.
  4. Choose HTML / JavaScript.
 blogger Design Edit HTML page element
  1. Paste the following code inside it.                           
<div><div id="bpslidein" style="display:none;">  <div class="help">?</div> <div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location. href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined') var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded =false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function') {function bp_async_loader(src,callback,id) {var script=document.createElement('script'); script.type="text/javascript" ;script.async=true;script.src=src;script.id=id; var previous_script=document.getElementById(id); if(previous_script)if(previous_script.readyS tate=="loaded"||previous_script.readyState=="complete") {callback();return}else{script=previous_script}if(script.onload!=null) previous_callback=script.onload;script.onload=script. onreadystatechange=function(){var newcallback; if(previous_script&&previous_callback)newcallback=function() {previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded) {newcallback()}else bp_onload_queue.push(newcallback);script.onload=null; script.onreadystatechange=null}; var head=document.getElementsByTagName('head')[0];if(!previous_script )head.appendChild(script)}}if(typeof bp_domLoaded!='function') function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue. length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded(); bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js",function(){bp_async_loader ("http://recommended-slide-out-for-blogger.googlecode.com /svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script></div>
  1. Hit "Save" button.
  2. Now Go to Design / Edit HTML.
  3. Download the full template Before making any changes in it.
  4. Click "Expand Widget Template".
  5. Find ( CTRL+F) following piece of code in template.
<data:post.body/>
or
<div class='post-footer'> 
  1. Paste the following code just below it.
<span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><script>var bpslidein_custom_css=true;</script></span><b:if cond='data:blog.pageType == "item" '> <div style='display:none' id='bpslidein_place_holder'></div> </b:if>
  1. And Paste the following code just above the ]]>.
<span id="summary5487934719045884650"><pre class="code">#bpslidein{z-index:5;width:400px;height:100px;padding:10px;
background-color:<span style="color: magenta;">#fff</span>;
border-top:3px solid #1616F5;
position:fixed;right:-430px;bottom:0;
-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px 
 
#aaa;box-shadow:-2px 0 5px 
#aaa;font-family:Arial, Helvetica, sans-serif;} #bpslidein p{font-size:11px;text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:<span style="color: lime;">#555;</span>font-weight:700;font-size:16px;
margin:10px 20px 10px 0;} #bpslidein a,#bpslidein 
a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;} #bpslidein .close,#bpslidein .expand,#bpslidein .help
{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;
height:15px;padding:2px 0 0 5px;position:absolute;right:10px;
font-size:17px;font-weight:700;
font-family:Arial, Helvetica, sans-serif;font-size:12px;} #bpslidein .help{right:35px;} #bpslidein_title,#bpslidein_image{float:left;width:80px;} #bpslidein_title{width:290px;}
  1. Finally save the template and see the result.
 Note:-
  • If you find <data:post.body> or <div class='post-footer'> in more than one position then add the above code everywhere you find.
  • For changing the background color simply change background-color: #fff; to any desired value.     
  • Or you can change the title color by changing color:#555; to any desired value.
 I make its installation as easy as I can by adopting so much steps. So it is a time to apply this tricks on Blog.If you find any difficulty in doing this process then comments always open for that.
READ MORE - Add Post Slide Out to Blogger

Add Sharing Widget To Blog

You can
simply integrate this widget with your blog by adopting following
procedure. So lets see how to add this widget on the blog ?  

How to Add Sharing Widget To Blog:-

  1. Login to Blogger Dashboard.
  2. Go to Design /  Edit HTML.
  3. Click "Expand Widget Templates".
  4. Take Backup of your blog template, it is very necessary (More info). 
  5. Find following piece of code in blogger template.
<data:post.body/>
  1. Add
    the following code just below it. If you find <data:post.body/>
    code in more than one position then add the following code just below
    the <data:post.body/> on everywhere you find.
<!Widget on www.internetricks4u.blogspot.in --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #E0E0E0;width:100%;position:relative;margin-top:13px;'> </div>
<div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#FF3030;position:relative;top:12px;'><center>If you enjoyed this article then kindly take 5 seconds to share it!!</center></div>

<table align='center' cellpadding='8' cellspacing='1' id='myshare'>

<tr>

<td>

<a target="_blank" class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtJ4hLjLMFf1qexEJ14OYRmSm-cWOzKPtdGpNnQKje6Hjngbve8L_H6WxROBXPAHOaTxQqyAdbNcD_Jb2-YR3QQXqyiULVvYqKn9tbfAwESa3Z94kf1Ue906T9cHAeUU6XnfDFkChoV0/h120/1.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9GHAdObg1M32rU1bkujkx8BPzPFW0gCYRQsDd6b9ZWN_VXjevt8gaY-kGhNPwBWOqZP0DERhL8yucEA2afH-b2ORhXPIFbJS9h6wOx9XULEpNiriNLC6OkWMbtQWPq-argoIdT4uS2U/h120/6.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlyWhbhPW3eQWME4JqdQOLDw3K2yMfiZdinqjY5aDTLje0PDuzEsXXxXMGm_0qDiSRQaIWvi7JXmtwphYQttsRmLiiPr-kw7FrdFfJuojJ40dgyZJuauO7UINHXwrW_cZ1MnociSbCJk/h120/5.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiib7_KGK2LITPNHaEGcuDFwnhzHGiBRGk-ZSrkDGEAuyRrPss4kUOTXuhd32lfutMpvICQKSKNb1yXunj0W6KLHs7HOFrgkHMcfFTbZnl8S65easB0WpHFfRULIiaRjMi5vJS2Qrnfctk/h120/3.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKBng6g2wbMPL8C6QIIdlQcB8jQDW_1ojzroviNNM9TG2RyhLBtnd1F01zWyWF8NhUWB79UZrh5JgqMvhEeATWCEZD0jITdWx3D7gDeCFp7j5fmkaM6bhMMRZa5kRyLis0i2Kynoi2bc/h120/2.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypvZHZRVmNQlpczTRDg0HfQmYGWII58j5aot1XI9Zd6UyDVZjHu8hCSlOxLwYzjlafEozZgjeM0OAok_RVbuJnShZJsa_eFTVsQtyWIC2oiAI449u-JOHDXHWHDqedggU6a4xX-6COuQ/h120/4.PNG'/></a></td>

<td><a target="_blank" class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkW9zR7CzAnP_S4-7n3w_KPvmvRuCcsmsVMxqdJNYM4m-rLd9TTlZ045Pmy9kQaLqSVuqSqMdpeYHtAZao-7TH9oOYIY0RW7z5PjFpVwgMw9I-gqBsonIZRSDARVXYfSpOGPARiSspyE/h120/7.PNG'/></a></td>

</tr>

</table>

</div></b:if>
  1. Now search the following section in the template.
]]></b:skin>
  1. Add the following CSS code just above it.
#myshare

{width:100%px;

height:50px;

border:0px solid red;

position:relative;

}

#myshare tr td img

{width:50px;

height:50px;

position:relative;

}
  1. Finally save your template and see the result.
If anyone find difficulty in placing the above code then comments
are always open for that. If you like the above article then don't
forget to subscribe it for latest updates.
READ MORE - Add Sharing Widget To Blog

Improve Comment Box with Disqus

Disqus is a global community that improves the discussion on the
websites and connects people across the Internet. You can easily update
your Blogger comment box to Disqus. It makes commenting easier in your
blog and can be implemented into your blog very smoothly by following
steps.

                          1.Firstly,login to your Blogger Dashboard.

                          2.After that open Disqus in new window without closing the Blogger.

                          3.Click "Sign Up".

                          4.Fill all the details and click "Continue". 





 
                             5.Choose your Platform i.e blogger,wordpress.







                              6.At last click "ADD WIDGET".

source : http://internetricks4u.blogspot.in/2011/09/improve-comment-box-with-disqus.html
READ MORE - Improve Comment Box with Disqus

Add Meta Descripttion to Blogger Post


Blogger_meta_tag_seo

Blogger has now become more friendly with its new updated features. Blogger now finally introduced most awaited SEO
features for Google hosted blogspot blog. Blogger team is trying to get
closer to its biggest competitor Wordpress. Now you have no need to
hack template for adding meta tags.
You can easily add meta description, meta tag to not only for your Blog
homepage but also for individual posts or static pages. So lets see
learn the tutorial.





How to Add Meta Tag And Description:-


  1. Login to Blogger Dashboard.
  2. Go to Design /  Edit HTML.
  3. Download the full template before making any changes in it.( More Info
  4. Find following piece of code in blogger template.( say code 1)

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

  1. If you find the above code then there is no modification needed in
    template but if you don't find this code then search for another code (
    say code 2).

<meta expr:content='data:blog.metaDescription' name='description'/>

  1. If you find code 2 then replace it with code 1 but if you don't find code 2 also then add code 1 just below the <head> section of template and save the template.





Add Meta Description To Blog:-


Go to Settings /  Search preferences, Under Meta tag /  Description, click "Edit" and select "Yes" , Now write a meta description about your blog in space provide.


blogger_meta_tag_path









Add Description To Your Post:-


While writing a new post in blogger post editor then you will find a
new option called "Search Description" under "Post Settings", where you
can add a short description of your individual post.


Blogger_meta_tag_post



Finally I want to say that if you find difficulty in adding meta
description then you can drop your comment below regarding your problem.

More article from the same author Improved
READ MORE - Add Meta Descripttion to Blogger Post

Pre Tag As Syntax Highlighter

syntax
Syntax
highlighter are generally used for those blogs, which have scripting
tutorials. There are large number of powerful syntax highlighter tool
exist over the Internet (Add syntax highlighter with jQuery).
Through which you can make your code more readable to the user. It not
only highlight the script but also gives the clear idea, how the script
is formulated. But the main disadvantage in using them are they effect
the page loading time as they uses powerful jQuery script. So in this
tutorial I will tell you to add Syntax highlighter without any jQuery
script.

How to Add Syntax Highlighter To Blog:-

  1. Login to Blogger Dashboard.
  2. Go to Design /  Edit HTML.
  3. Find following piece of code in blogger template.
]]></b:skin>
  1. Choose your favorite syntax highlighter code from the list below and paste it just above the ]]></b:skin> 
  2. And save the template.
/* Code written on internetricks4u.blogspot.in */
#mypretag
{
-moz-border-radius: 0px 25px 0px 25px;
white-space:pre-line;
background-color: <span style="color: lime;">#e3e3e3</span>;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
white-space:pre-line;
width: 100%;
}


/* Code written on internetricks4u.blogspot.in */
#mypretag
{
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 25px 25px 25px 25px;
background-color:<span style="color: lime;"> #e3e3e3</span>;
padding: 15px 5px 15px;
white-space: pre-line;
-moz-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
width: 100%;
height: auto;
min-height: 100%;
}


/* Code written on internetricks4u.blogspot.in */
#mypretag  {
border-left: 8px solid <span style="color: blue;">#1C86EE</span>;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
-o-border-radius: 25px 25px 25px 25px;
white-space: pre-line;
background-color: <span style="color: lime;">#e3e3e3</span>;
padding: 15px 5px 15px;
width: 100%;
border-radius: 25px 25px 25px 25px;
height: auto;
min-height: 100%;
}


/* Code written on internetricks4u.blogspot.in */
#mypretag  {
border-left: 8px solid <span style="color: blue;">#1C86EE</span>;
background-color: <span style="color: lime;">#e3e3e3</span>;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
white-space: pre-line;
width: 100%;
}


/* Code written on internetricks4u.blogspot.in */
#mypretag { 
color: white;
border-left: 8px solid <span style="color: blue;">#e3e3e3</span>;
white-space: pre-line;
background-color: <span style="color: lime;">#262626</span>;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
width: 100%;
}


/* Code written on internetricks4u.blogspot.in */
#mypretag {  

color:black;
border-left: 8px solid <span style="color: blue;">#8B0000</span>;
background-color: <span style="color: lime;">#EEE685</span>;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
white-space: pre-line;
width: 100%;
}


/* Code written on internetricks4u.blogspot.in */
#mypretag {   
color:black;
border-left: 16px solid <span style="color: blue;">#FFFF00</span>;
white-space: pre-line;
height: auto;
min-height: 100%;
background-color:<span style="color: lime;">#c5c1aa</span>;
padding: 15px 5px 15px;
width: 100%;
-moz-border-radius:30px;
border-radius:30px;
-o-border-radius:30px;
-webkit-border-radius:30px;
}


Note:Make The Following Modification:-

  • To change background color simply change #262626 to any desired value.
  •  To change the border color simply change #fff000 to any desired value.

How To Use These Code:-

  1. Click Posting /  New Post.
  2. Click "Edit HTML" in post editor of your post.
  3. And paste the following in it.
<pre id="<span style="color: blue;">mypretag</span>"><span style="color: red;">...Your Code Here...</span></pre>
Pre tag syntax highlighter


  1. Good luck to your post.

Note:

The changes made by us will not shows up in compose tag whereas it shows when post will published.



Finally I want to say that I give my best to produce this article if any
one find difficulty in doing this process then comment are always open
for that or if you like the above article then don't forget to subscribe
it for latest updates.



More Article From The Same Author
READ MORE - Pre Tag As Syntax Highlighter

Make Over The 'pre' tags

Styling preformatted text blocks is one of the more difficult tasks
when customizing a blog. In truth, many bloggers may never need to use
preformatted text at all, but if you plan on posting code snipits, using
this technique is a must.


When you post large blocks of code on your blog you will probably be
using the <pre>,<code>, your code
</code>,</pre>, format. By doing so you are turning the code
block into monospaced type with the code tag, and wrapping the entire block in a command to maintain its preformatted state. This technique, in combination with a code snippet plugin like Code Autoescape will deliver a functional, though at times, unattractive result. How to style those pre tags?


When you keep the preformatting of a block of code, you are in effect
keeping all of the white-space and line-break formatting intact. This
means that, while your blog’s content area may be 500px across, if the
line of code runs to 800px your theme will likely break, or the code
will overlap your sidebar. This is absolutely devastating to the clean
lines and careful detail you have put into your blog’s custom look.


Many WordPress themes, in fact many website designs, use overflow-x:scroll;
to add a horizontal scroll bar to the preformatted text area. This, by
the way, is what I did on both the Slate and Paisley themes. It works
fine, and with made for release themes, I think it’s the best option.
That doesn’t mean that there aren’t any options to spiff up the look of
these snipits. Let’s take a look at some way to do it.


This is the stylesheet code from the Slate theme.


<code>pre {

height: auto;

overflow-x:scroll;

}</code>

With the pre tag styled in this way we get a preformatted text area that looks like this:

pre_tag-wordpress1



Let’s replace overflow-x:scroll; with some white-space and word-wrap values.


<code>pre {

height: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;

}</code>

The pre-wrap value and the variations included in this
stylesheet block specify that lines of code should break as necessary to
fit within the containing element. In addition, the word-wrap value break-word
specifies that, when necessary, unbreakable words may be broken so the
text will fit in the box. Now we have everything fitting within our
content area. Unfortunately, it looks a lot like the paragraph text:

pre_tag-wordpress-21



To fix this, let’s add a background color, padding, and change the
font around. With the Slate theme, we need to make a few changes to the
style sheet. We are going to add padding and a background to the pre tag like this:


<code>pre {

height: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
padding:15px;
background: #459dcb;
}</code>

Additionally, let’s specify the code tag font when its wrapped in the pre tag:


<code>pre code{
font:16px Monaco, 'andale mono', 'lucida console', monospace;
color:#373737;
}</code>

Finally, we need to specify what our code tag font is, when it’s included in a paragraph:


<code>code{
font:14px Monaco, 'andale mono', 'lucida console', monospace;
}</code>

This is the final result:

pre_tag-wordpress-3



You might notice in the image that WordPress in the first line is wrapped with a code tag to show the code style when used in a paragraph.


Depending on the look you are going for, you might try stripping out
the background color all together and enlarging the font, or try messing
with the background color. There are endless possibilities.


source : http://www.arsgrafik.com/text-break-pre-tags/

READ MORE - Make Over The 'pre' tags

Pre Tag Code for Blogspot Example

CSS Only, Zebra Striped PRE Tag

<code class="css" style="color: rgb(131, 148, 150); font-family: Monaco, 'Courier New', Courier, monospace; font-size: 12px; display: block; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; letter-spacing: 0px; white-space: pre; "><span class="tag" style="color: rgb(133, 153, 0); ">pre</span> <span class="rules">{
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">display</span>:<span class="value">block</span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">font</span>:<span class="value">normal <span class="number" style="color: rgb(42, 161, 152); ">12</span>px/<span class="number" style="color: rgb(42, 161, 152); ">22</span>px Monaco,Monospace <span class="important" style="color: rgb(203, 75, 22); ">!important</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">color</span>:<span class="value"><span class="hexcolor" style="color: rgb(42, 161, 152); ">#CFDBEC</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-color</span>:<span class="value"><span class="number" style="color: rgb(42, 161, 152); ">#2f2f2f</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-webkit-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-moz-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-ms-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-o-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">padding</span>:<span class="value"><span class="number" style="color: rgb(42, 161, 152); ">0</span>em <span class="number" style="color: rgb(42, 161, 152); ">1</span>em</span>;</span>
<span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">overflow</span>:<span class="value">auto</span>;</span>
<span class="rule">}</span></span></code>
iklan
READ MORE - Pre Tag Code for Blogspot Example

5 Steps to Write Effective Articles in Less Time


This is a guest post by Ramkarthik. You can read more of his tips on blogging and making money online onBlogging Tune.

1. Close Every Other Application

2. Do Research Before Writting

3. Prepare in Schedule

4. Proof Read at Least Once

5. Do Editing till You Satisfied

Do you sit in front of computer for a long time to create a single blog post or article? Does it take too much thinking for you to come up with an effective article? If your answer was ‘yes’ to any of these questions, you should continue to read the post. Whether you are a blogger or a freelance writer or an article marketer, you need to write effective articles quickly. If you are doing one of those as a full time job, you must really use your time properly and try to write more articles in less time. Here are few things you should do when you sit to write an article or blog post.

1. Close Every Other Application

Ever installed any software? Few of them ask you to close other applications when installing it. The same should be followed when you sit to write an article. Close the chat client first. This is probably the one which eats up most of your time. Next, close your email client. Don’t have any other application open, other than your writing software. You should not open any of the applications when you are writing the article. You can open your browser when you want to look for some reference, but close it again as soon as you are done. Don’t check your blog traffic stats, AdSense earnings or anything else as well.

2. Do Research Before Writing

It is always better to do a little research before writing the article. This will help you to write an effective article. The quality of the article will show clearly that you have researched. Almost every blog post that hits the front page of social bookmarking sites is well researched and structured. By doing research, you also make your article longer and in depth.

3. Prepare a Schedule

Preparing a schedule will help you in saving time. Set a time for each and everything you do for the article. You can allocate 30 minutes or whatever you are comfortable with, for writing the article itself. Set 5 minutes for selecting an image. Also have 10-15 minutes for collecting references and coming up with a catchy headline. Within an hour, you should be able to create some top notch content.

4. Proof Read At Least Once

This is very important and most people skip this due to lack of time (or patience). This will prove to be costly when you are writing for some other person or for a client. Once you finish writing the post, read it once. If you have written many articles and don’t have time to proof read all of them, hire a person to do the work for you.

5. Do the Editing Till You Are Satisfied

Once you have completed writing the article, do the formatting works. Place the image at the right place. Give credit to the image author if needed. Preview the article. If it is what you wanted, publish the article. If not, continue with your editing and formatting. Add quotes to the post to make it more effective. Tie any loose ends.

Writing quality articles in short time is not an easy task, but if you prepare yourself and use a structured process soon you will be cranking paragraphs like there is no tomorrow!

READ MORE - 5 Steps to Write Effective Articles in Less Time

4 Steps to Increase Your Blog Traffic

 

One of the most common complaints that I hear from bloggers is the fact that no matter how hard they try, they can’t grow their blogs past 100 or so daily page vies. Those early days are indeed the hardest, because you need to put hard work in without the certainty of achieving results.

If you are in that same situation, here is a simple strategy that will certainly increase your blog traffic and make you break the 1,000 daily page views mark. In fact, the strategy could be used even if your are already over that number but have reached a traffic plateau lately.

Just make sure to execute the 4 steps as planned and to spend the two hours and a half every day (obviously if you have more time available you can expand the time spent on each of the four steps proportionally).

First Step: Killer Articles (1 hour per day)

Spend one hour brainstorming, researching and writing killer articles (also called linkbaits, pillar articles and so on).

Notice that your goal is to release one killer article every week. If that is not possible aim for one every 15 days. So the one hour that you will spend every day will be dedicated to the same piece. In other words, expect killers articles to take from 5 up to 10 hours of work.

If you are not familiar with the term, a killer article is nothing more than a long and structured article that has the goal of delivering a huge amount of value to potential visitors. If you have a web design blog, for example, you could write an article with “100 Free Resources for Designers”. Here are some ideas for killer articles:

  • create a giant list of resources,
  • write a detailed tutorial teaching people how to do something,
  • find a solution for a common problem in your niche and write about it, or
  • write a deep analysis on a topic where people have only talked superficially

When visitors come across your killer article, you want them to have the following reaction: “Holy crap! This is awesome. I better bookmark it. Heck, I better even mention this on my site and on my Twitter account, to let my readers and friends know about it.”

Second Step: Networking (30 minutes per day)

Networking is essential, especially when you are just getting started. The 30 minutes that you will dedicate to it every day could be split among:

  • commenting on other blogs in your niche,
  • linking to the posts of bloggers in your niche, and
  • interacting with the bloggers in your niche via email, IM or Twitter.

Remember that your goal is to build genuine relationships, so don’t approach people just because you think they can help to promote your blog. Approach them because you respect their work and because you think the two of you could grow together.

Third Step: Promotion (30 minutes per day)

The first activity here is the promotion of your killer articles. Whenever you publish one of them, you should push it in any way you can. Examples include:

  • letting the people in your network know about it (don’t beg for a link though),
  • letting bloggers and webmasters in relevant niches know about it,
  • getting some friends to submit the article to social bookmarking sites,
  • getting some friends to Twitter the article, and
  • posting about the article in online forums and/or newsgroups.

If there is time left, spend it with search engine optimization, social media marketing and activities to promote your blog as whole. Those can range from keyword research to promoting your blog on Facebook and guest blogging.

Fourth Step: Normal Posts (30 minutes per day)

Just like a man does not live by bread alone, a blog does not live by killer articles alone. Normal posts are the ones that you will publish routinely in your blog, between the killer articles. For example, you could publish a killer article every Monday and normal posts from Tuesday through Friday. Here are some ideas for normal posts:

  • a post linking to an article on another blog and containing your opinion about it
  • a post informing your readers about a news in your niche
  • a post asking a question to your readers and aiming to initiate a discussion
  • a post highlighting a new resource or trick that you discovered and that would be useful to your readers

While killers articles are essential to promote your blog and bring new readers aboard, normal posts are the ones that will create diversity in your content and keep your readers engaged.

READ MORE - 4 Steps to Increase Your Blog Traffic