Welcome to the tech blog copacopi

Showing posts with label blog design. Show all posts
Showing posts with label blog design. Show all posts

Free Online Wordpress Theme Generator


If you plan to start a new Wordpress blog, or you are going to refresh design for your existing blog, you may be looking for the nice template, which may fit your format, color scheme, design, and structure. No problem, if you have knowledge and experience on the web development, and you can make template for your blog exactly as you want. If you are not proficient on web design, or you have no time or interest in doing that yourself, there are multiple readymade templates on the Web, both free and commercial. But any template you find has limited set of the adjustments and changes you can make, so it is quite possible that your blog appearance will look similar to thousands other blogs, using the same template.

In this post, I would like to present free online services from Lubith.com, offering Wordpress themes creator.

Image and video hosting by TinyPic

Main Features

  • Intuitive interface. Move and resize the theme elements just by dragging the two knobs.
  • No code required. You can design, edit and use your theme without needing to write a single line of code.
  • Every theme is being kept on server for 7 days after your last save and then it will be erased. So, you can get back and make adjustments to the theme you have initially generated.
  • You cannot work on several themes in parallel. If you reset the theme, the previous layout will be lost.

Installing your Theme in WordPress

  • From WordPress admin panel, go to the Appearance ->Themes.
  • Click the Install Themes tab (at the top).
  • Click the Upload link.
  • Browse for the zip file downloaded from Lubith and click Install Now button.
  • Click the Activate theme link to activate the theme.


Read More

How to make links open in new windows for Blogger blog?

If you design your blogs with lots of links to other blogs and web sites, you probably like to make the links to the other blogs and web sites open in a new browser tab or window (depending upon reader preference). That helps with reader retention (for you), and increases convenience (for your readers).

Image and video hosting by TinyPic

Unfortunately, in all of the Blogger GUIs, there's no selection for "Make links open in new window". If you want all links in your blog to open in a new window, you can do this with a simple template change as described below. If you want specific links to open in a new window, you will have to manually code each link individually.

To make all links open in new window is amazingly simple. Just sign into Blogger DASHBOARD > DESIGN > EDIT HTML to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line
<base target='_blank' />

so that it become

<head>
<base target='_blank' />


Save the edited template and all links in your blog will now open in new tabs or windows.

If you prefer selective links not to open in new window/tab but to open in the same window, as you have now, add the attribute target="_self" for those links you want to open in the same window/tab.

Blogger who have multiple internal links, might not find the presented solution as acceptable since they might not like the idea to open ALL links in a new window, or to edit each link manually. The target is open in the new window just external links from your blog (what happens if the user clicks on your archives, or on the title, or on comment links, or on a javascript link?)
Here is a vanilla javascript solution, that you want to paste into your template just before the end of the body (if you're old-style template), or paste into a javascript widget:

Replace XXXXXX with the appropriate URL prefix.

<!-- code for turning all non-blog links to new page links -->
<script type="text/javascript" language="javascript">
   var arr = document.getElementsByTagName("a");  //get all links in the page
   for(var i = 0; i < arr.length; i++)
   {
      if(arr[i].href.indexOf("XXXXXX.blogspot") < 0 //not links that are 'inside' blog
         && arr[i].href.indexOf("javascript:") < 0) //not javascript links
         arr[i].target = "_blank";
   } 




Read More

Big Collection of Free Blogger Templates with Reviews and Ratings

If you are building your blogs on free Blogger platform, you noticed that the new options significantly improved your capabilities to use customized templates from extensive choice of options. However, if you cannot find a suitable design, you may look for alternative sources to find a suitable template.

There are many websites offering Blogger templates collection, so there is not so difficult to find one you really like. In this post, I would like to present one of the sites – Blogger Styles. They provide thousands of template downloads and ratings on each of the blogger templates.

Samples:


Image and video hosting by TinyPic

Image and video hosting by TinyPic


If you are designer, who would like to share your personally created template, you can submit it to the site for review and posting.

Read More

How to Add Element under Header in Blogger Blog

Usually, when you are new to the World of Blogging, you start from scratch. You use on of the default templates offered by Blogger on their site. Little-by-little, you realize that there are so many blogs in blogospere that look like yours, and you want to distinguish you blog from others. You can choose one of the free or paid templates available online to change the blog interface. Later on, you can experiment even more, tweaking the GUI to your particular needs. The following simple tweak will show you how to add an extra element under your blog Header in 9 steps. The credit goes to BlogSpotTutorial:

1. Login to Blogger with your ID.
2. Click Layout.
3. Click tab Edit HTML.
4. Click sentence Download Full Template, it is very important for you to backup this!
5. Copy the code below, then paste it before code ]]></b:skin>

#under_header{ margin:10px 0; padding:1%; width:98%; }
6. Find out code which look exactly like this :
<div id=’header-wrapper’> <b:section class=’header’ id=’header’ maxwidget="1" showaddelement="no"> <b:widget id=’Header1’ locked=’true’ title=’test (Header)’ type=’Header’/> </b:section> </div>

7. Copy the code below, and paste it exactly after that code :
<div id="under_header"> <b:section class=’header’ id=’underheader’ preferred=’yes’/> </div>

8. Click SAVE TEMPLATE buttons, and wait until your template saved.
9. Now you already have an element which placed exactly below your header. Feel free to add any elements do you wanted to. Want some Google Advertise, or maybe some photos, it’s all up to you!
Read More

How to Put a Widget on a Specific Page of your Blogger Blog



Widgets are short and handy small computer programs that can add more functionality to any Blog platform. In Blogger, where standard set of features and embedded plugins is rather limited, adding extended capabilities with third-party widget might help to spice up your blog and increase its attractiveness. It can be added as an extra code behind the new Page Elements through the Page Elements subtab of the Template tab.

In brief, to add widget or page elements to your blog login at Blogger.com and click on Layout link on Dashboard. Then click the Add Page Element link in the sidebar.

After adding a Page Element to your blog it can be seen on all your blog pages by default, unless you wrap the widget in conditional tags. In this publication, we will present you the way on how to put selectively widgets on particular blog pages. You really can decide on which pages or a single pagethe widget should appear.

WIDGET ON POST PAGES ONLY

If you want to put the widget only on the post (item) pages then paste this line :

<b:if cond=’data:blog.pageType == "item"’>

immediately after the main includable line of code in the widget :

<b:includable id=’main’ var=’top’>

For this login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Put a check in the Expand Wdgets Template checkbox at the top of the Template code box and scroll down to the widget code. Lastly in the widget code add a </b:if> before the immediate next </b:includable>. This is how the whole widget code will look like after the change :

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == "item"’>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>

This widget will only appear on the Post Pages.

WIDGET ON MAIN PAGE ONLY

If you want the widget to appear only on the Main Page of the blog use the code below :

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>

This widget will appear only on the Main Page.

WIDGET ON SPECIFIC BLOG PAGE

There are some cases in which you may want the widget to appear only on a specific page of your blog. For example, there might be some pages on your blog with heavy traffic where you plan to put some special ads or particular content. Create the widget by pasting the HTML in the new widget. Then modify the code as shown below :

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == "BLOG_PAGE_URL"’>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>


Replace the CAPS : BLOG_PAGE_URL with the permalink of your post.

WIDGET ON SPECIFIC LABEL PAGE

You can specify a widget to appear only on specific label pages. This is useful when you want to represent your labels with icons. For example, you may have posts on books and when the label books are clicked in your blog the sidebar will show a book icon. For such widgets, you can use the following code:

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"’>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>


Replace BLOG_NAME and LABEL_NAME with actual.
Source: http://betabloggerfordummies.blogspot.com/2007/12/put-widget-on-specific-page-or-url.html
Read More

Disabling Right Click in Blogger Blog

Have you noticed, that some web sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.

Provided cross browser DHTML script from dynamicdrive will help you achieving the same result on your own blog, preventing default right menu from popping up when right mouse is clicked. There are actually two options for this script are provided: Alert Option and Non-alert Option. If the Alert Script is enabled, if someone tries to execute Right click on the blog, then a Message, which can be customized per your desire, appears. If the Non-alert script is activated, then no message is displayed.

To setup this tool in your blog Copy the Following code and paste it to your blog by adding a new page element.

Message Alert Script:

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>


Message Non-Alert Script:

<script language=JavaScript>
<!--

//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com

var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
</script>
Read More

© Copacopi, AllRightsReserved.