However, it misses a search function, as well as a import/export option. Of course it would have been awesome for it to be able to store the snippets on the web so that they would be accessible for you by using an account or such. Unfortunately it lacks the HTML syntax coloring. Of course there is a lot of work on it still but thankfully it is out there for us to enjoy so let’s be patient with the developers.

Oh, and by the way, to make up for that import/export thing you could do it manually by following the path to the SQLite database file:

“C:\Users\Username\AppData\Roaming\com.snippely.xxx\Local Store\application.db”. And there you have it; you can now be assured that your precious snippets won’t be lost if you decide to work on another computer or any other scenario.

Here are some screenshots to help you make an impression:

Download: http://code.google.com/p/snippely/downloads/list

If you want to integrate ads into your posts here’s what you need to do. First of all let’s begin with defining the CSS class we’ll be using.
The following code is for right-orientated ads (like the ones i use on my blog).

1
2
3
4
5

.ad-right {
display:block;
float:right;
margin: 0px 0px 5px 10px;
}

The next code is for left-orientated ads.

1
2
3
4
5

.ad-left {
display:block;
float:left;
margin: 5px 10px 0px 0px;
}

As you can see, the differences between the two classes are not so big. Feel free to play with them until you get the desired effect or if you don’t have any CSS knowledge at all you can use them as given. After you decide which class you will use, copy the code into your style.css. Thats it for the CSS part.

Let’s move along and edit our theme files. Whether you want to show your ads on the index page or the page containing just the article you will need to look for the following code:

<?php the_content(...

By default any wordpress theme will have that code in it’s template file and it doesn’t matter what’s after it because many themes use custom and different code. After you located the code be sure to add the following lines exactly before it:

1
2
3

<div class="ad-right">
////Replace me with your ad code////
</div>

Replace the line that says so with your ad code. Notice the class that is used. You might want to change that with ad-left as i told you before.
Ok, so now you have in-content ads.

Now lets move forward and add some ads between your posts on the index page.
In your index page template find the following code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Again bare in mind that you may not find the exact code. If you don’t have that exact code just make sure you find the have_posts() function. Add the following code exactly before it:

1
2
3
4
5
6

<?php
$post = 1;
$ad1 = 1;
$ad2 = 3;
$ad3 = 5;
?>

The above code uses the $ad1, $ad2, $ad3 variables to define after which posts the ads will be shown. The variable $post stores the post number and will be incremented later.
Now before the closing of the div that marks the ending of the post content (something like this < / div > < ! -- End of Post -- >) add the following lines:

1
2
3
4
5
6

<?php if ($post == $ad1 || $post == $ad2 || $post == $ad3) { ?>
<p><center>
////Replace me with your ad code////
</center></p>
<?php }
$post++; ?>

As you can see at the end of the code we incremented the post variable.

If you want to know how to display ads from multiple advertising companies using the same code just drop me a comment and i will explain how to achieve that.

I’ve tested this method with ads from AdSense, BidVertiser, WidgetBucks, BlgAds, Chitika and AdBrite. The reason i’m not writing a tutorial for each of them is because all you need to do is to paste your ad code in the upper mentioned spot.

Instead of overwriting the declarations in the js generated by MyBlogLog i advise you to strip the code by deleting the variables related to colors:

• c_color_bottom_bg
• c_color_link
• c_color_link_bg
• c_color_heading
• c_color_heading_bg

I’m not going to explain which variable does what because that’s irrelevant and anyway we will remove them from the js. It’s not a secret that you can do very little customization with them. Below you can see the original code and the stripped one:

1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=000000&amp;c_color_heading=FFFFFF&amp;c_color_link_bg=FFFFFF&amp;c_color_link=FFFFFF&amp;c_color_bottom_bg=000000" type="text/javascript"></script>

1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;" type="text/javascript"></script>

You can see that my c_heading_text variable is empty as i don’t have a header text for my widget. Now here comes the actual customization process. I tried to make it as simple to understand as i possibly could and made a few comments on the code so that you can figure out which class is for what. There are a few declarations that i left out because they don’t really help much as their properties are inherited from the really important declarations that are listed below. The following code must be added in your style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

/* start images related  */
body table#MBL_COMM img
{
border:1px solid black;
float:left;
height:24px;
padding:0px;
position:relative;
width:24px;
z-index:999;
}
body table#MBL_COMM td.mbl_join_img
{
background-color:black;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop images related  */
 
/* start of "You!" link */
body table#MBL_COMM td.mbl_join 
{
background-color:BLACK;
border-bottom:0pt none;
color:white;
cursor:pointer;
font-size:11px;
margin:0pt;
padding:2px;
text-align:left;
}
/* stop of "You!" link */
 
/* start the whole widget */
body table#MBL_COMM
{
background-color:black;
border:1px solid black;
font-family:Verdana,Arial,Sans-Serif;
font-style:normal;
font-weight:normal;
line-height:12px;
width:270px;
}
/* stop the whole widget */
 
/* start of the tds wrapping the images */
body table#MBL_COMM td.mbl_img
{
background-color:black;
border-top:0pt none;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop of the tds wrapping the images */
 
/* start of the three trs wrapping the bottom links */
body table#MBL_COMM td.mbl_fo_hidden 
{
background-color: black;
color:white;
cursor:pointer;
font-size:10px;
padding:2px;
text-align:center;
}
/* stop of the three table rows wrapping the three bottom links */
 
/* start of "Join My Community" link */
 body table#MBL_COMM td.mbl_join a
{
	color: white;
}
body table#MBL_COMM td.mbl_join a:hover
{
	color:#6C6C6C;
}
/* end of "Join My Community" link */ 
 
/* start of "Join This Commnunity" link */
body table#MBL_COMM td.mbl_fo_hidden a
  {
   color:white;
	}
body table#MBL_COMM td.mbl_fo_hidden a:hover
 {
	color:#6C6C6C;
}
/* end of "Join This Commnunity" link */
 
/* start of "View Reader Commnunity" and "Provided by MyBlogLog" links*/
body table#MBL_COMM td.mbl_fo_hidden a:visited
{
	color: white;
}
body table#MBL_COMM td.mbl_fo_hidden a:visited:hover
{
	color: #6C6C6C;
}
/* end of "View Reader Commnunity" and "Provided by MyBlogLog" links*/

That all. Refresh the page and voila ! You can see the outcome in my footer. Of course i used colors to best fit my blog design but feel free to play with the code until you get what you want.