Showing posts with label Blog accessories. Show all posts
Showing posts with label Blog accessories. Show all posts

Add Comment Rules in Comment Form of Blogspot and Wordpress Blog

3 comments
Blogwalking and leave comments in other blog has been the popular ways to promote website/blog and get free backlink. Usually, Bloggers commenting and leave site link in comment body, then ask the blog owner to visit and comment back in their blog. Though some bloggers consider it is spam comments because there are site link in comment body. But, this is make good relationship inter blogger if the blog owner respond it. So blogging is not only for do each of purpose, but for friendship and helping each other.
However, there are always bloggers who blogwalking to do the irresponsible thing : Spamming. They visit and leave comments in blog, But that's not qualified. They are commenting with anonymously and just promote their blog, without meaningful response to the articles which commented.
I have said in previous article : Please, Don't spamming, that i very hate spamming. In this blog, spamming is violated and blocked by me. But still, till now there are many spam comment submitted and i block that. I use auto detect spam service by blogger/blogspot. That's useful service. Apparently, Blogger was took serious step to eradicate spammer.
Besides spamming, Other thing which frequently did by irresponsible bloggers is use harsh words in comment. Usually, That is happen in controversial blog contents. However, still it is not good. Though we are not agree to the others statement, We must to use good words to reject that, surely, accompanied by obvious reason.
There are still many kind of irresponsible commenting in blogging culture. Intolerance racial, violation of law and sexual harassment is something which sometime happen in commenting.
Therefore, to avoid something that i talked about above, needed a comment regulation for our blog. This rules is for remind commenter to don't do something which forbidden and violate the laws. The rules must placed in effective position. One of effective position is above of comment input box. This is will seen by commenters when they write comments.
You can see my comment regulation as the example below. Are you interested ? If you want to add that in your blog, just follow the tutorial below :

syakirurahman comment regulations

How to Add Comment rules/Text Message in blogger/blogspot comment box

1. Log in to Dashboard
2. Select the blog you will add the comment rules.
3. Go to "Template" Menu
4. Click "EDIT HTML". *tips : backup your template before you editing HTML of blog.
5. Find this code : <h4 id='comment-post-message'><data:postCommentMsg/></h4>. *click CTRL + F to search.
6. Then, Put the following codes below it :

<div class="rule">
<h5>Comment Rules</h5>
<li>Don't spam here</li>
<li>Use good speaking</li>
<li>Your other rules</li>
<li>Your other rules</li>
</div>


*modify the red codes as you like
7. Save and finish. Comment Rules added.

How to Add Comment rules/Text message in wordpress comment box

1. Log in to administrator
2. Go to "Appearance" Menu, => Editor.

go appearence > editor

3. In Editor page, See to the right sidebar and you will find the list of php file.

edit comments.php in wordpress


4. Choose and Click Comments.php file.
5. In comments.php editor, Find this code : <h3 class="the-comments"> <?php comment_form_title(__('<span>Add</span> Yours','grid'), __('Your Comment to %s','grid') ); ?> </h3> or the similar code like that. *click CTRL + F to search.
6. Then, Put the following codes below it :

<div class="rule">
<h5>Comment Rules</h5>
<li>Don't spam here</li>
<li>Use good speaking</li>
<li>Your other rules</li>
<li>Your other rules</li>
</div>


*modify the red codes as you like
7. Click "Update file" below code editor to finish.

exampe comment regulation in wordpress
example comment regulation in wordpress


You comment rules has been added. But, maybe its style is too simple. So, if you want to stylify your comment rules, you can use the styles codes below.

Style 1 :

.rule {
background:#fafafa;
Padding:7px;
Font-size:15px;
color:red;
position:relative;
list-style:visible;
}
.rule >h5 {
font-weight:bold;
text-transform:uppercase;
font-size:17px;
}


Style 2 :

.rule {
background:#d2d2d2;
Padding:7px;
Font-size:15px;
color:White;
position:relative;
list-style:visible;
text-transform:uppercase;
}
.rule >h5 {
text-decoration:underline;
text-transform:uppercase;
font-size:17px;
}


I just provide two style.. Just stylify your regulation as you like.
- For blogger, Go to "EDIT HTML" again. Then put the one of the style codes below <b:skin><![CDATA[  or above ]]></b:skin>.   (between <b:skin><![CDATA[ and </b:skin>)

- For wordpress, See the styles file in themes editor pages. Styles file list located below list of php file. Scroll your browser and you will find it at bottom right corner.

edit stylesheet


Then, Choose and click 'Stylesheet' file (style.css). After that, Put the one of style codes to style.css editor above 'body {' code. Click update file to finish.

Well, That's from me. Hope by the regulation, spam and forbidden comment can be prevented and reduced. If you have any question, Don't hesitate to ask me. Hope this useful for you.
Happy Blogging :)

Muhammad syakirurohman with his young spirit.

Read More...

How to Set or Change Website/Blog Favicon

Leave a Comment

what is favicon
Favicon(small icon image beside website/blog title) is an important thing you must consider. This is related with your website/blog identity. Usually, Favicon is logo of website. So, If you are not have yet favicon for your site or your favicon is still default, immediately change it. That's your website merk.
To set the favicon for your site, just follow the steps below :

The way 1 :
This way is apply with all kind of website. This is very simple.

1. Log in to website administrator.
2. Go to The HTML editor of that site.
3. Then, Put the following codes above </head> tag code.

<link rel="shortcut icon" href= "image location/URL">

4. Save it and finish.

The way 2 :
This way is for blogger/blogspot blog. Actually, you can do the way 1 in blogger (dashboard>template>edit HTML). But if you don't want to make yourself confuse by source code, you can do this way.
1. Log in to your Dashboard.
2. Go to "Layout" menu.
3. See the gadget of favicon (usually place at top left corner).

favicon in blogger


4. Click edit and configure your favicon.

configure favicon in blogspot blog

5. after that, click save and the favicon was set.

that's it. Happy Blogging :)

Read More...

How to Create Screen Saver/Energy Saving Mode For Your Blog

2 comments
Energy Saving Mode For Blogs or WebsitesOkay, this time, i will give you a blog tutorial about how to create energy saving mode for your blog. This is a kind of screen saver or standby screen which will work if the blog readers visit your blog but they are do nothing (silent without any activity). Your blog will very interesting and interactive if this is installed in your blog. Just follow the steps below to install energy saving mode in your blog :

1. Log in to your dashboard.
2. Go to "Template" menu
3. Click "EDIT HTML".
4. Proceed. *tips : backup your template before you editing HTML of template.
5. Find the </head> code.*click CTRL + F to search. Put the following codes above </head> (before head code).

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>


This standby engine uses the jQuery Javascript library, so if you are using other Javascript libraries or code, add below code instead of above code :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

<script>jQuery.noConflict();</script>


You can also set how long time your readers have to be inactive, so the screen saver work.  Add ?time=X which X should be replaced with the number of seconds you would like to define the time interval. An example could be:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>


You can also set the language of screen saver. Add ?lang=code, which code is one of the language short codes below.

ak - Akan
da - Danish
de - German
en - English
es - Spanish
fr - French
fi - Filipino
gr - Greek
hr - Croatian
id - Indonesian
jp - Japanese
it - Italian
nl - Dutch
pl - Polish
pt - Portuguese
bpt - Brazilian Portuguese
ro - Romanian
sl - Slovenian
se - Swedish
sk - Slovak
sw - Swahili
tr - Turkish
vi - Vietnamese

The following example will be using Indonesian for the standby screen:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=id"></script>


6. Well, after you set as you like. Just click save and the screen saver installed in your site.

*If you are using WordPress, just download the plugin, activate it and everything should work instantly.

Okay. That's all. If you have any question, don't hesitate to ask. Happy Blogging :)

Source of codes/plugin
Read More...

How to add stars effect on links

Leave a Comment
stars effect on links in your blog will make seen interesting. This effect is animation. okay, i will not elaborate. if you want to add this effect to your blog. just follow the step below :

1. Log in to your Dashboard.
2. go to "template" menu
3. choose Edit HTML > Proceed
4. find the css code a:hover  and put the code below.

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHS-FT0sEI8pK6o5MG4HqUlo_W5L7tNqxoZrpoDewvqP5UQYoosysonjiAFwDae2bdlEnWyLAtnxr07NOZ6T0i5tbd3ywdfm4dzJDI6mO-dW_dcn6Itze3J8SoYxV1EnDjG9ETJ5u2orU/s1600/stars.gif);

so, the code become :

a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHS-FT0sEI8pK6o5MG4HqUlo_W5L7tNqxoZrpoDewvqP5UQYoosysonjiAFwDae2bdlEnWyLAtnxr07NOZ6T0i5tbd3ywdfm4dzJDI6mO-dW_dcn6Itze3J8SoYxV1EnDjG9ETJ5u2orU/s1600/stars.gif);}

*if there are no a:hover code.. so, you just put the code above between code <b:skin><![CDATA[ and ]]></b:skin>
*find the code by click CTRL + F to search



Read More...

How to modify "newer/older Posts" navigation become page numbers

1 comment
as default, pages move navigation in blogger use link by anchor "older posts" or "newer posts". it is not like wordpress that use page number to move to other pages so allows the visitors to jump to other pages either newer or older without need pass pages one by one. surely, it is less interesting. but, i have a tricks to modify "newer/older posts" navigation become page numbers like wordpress.

pages number

that is simple. you only must to follow and practice the steps below :

1. log in to your dashboard
2. go to "template" menu
3. choose "edit html" >> Proceed
4. find </body> code and place the code below before it.


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


5. to style, you can use css code below. place it on before of  ]]></b:skin> code..


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


*you can modify css/style code up to you.

6. Save and Finish. Just see the result.

That's it. if you have any problems. just ask me on the comment box below. hope useful and happy Blogging :)

reference : http://trik-tips.blogspot.com
Read More...

How to Make Spoiler in Your Blog post

6 comments
spoiler
make Spoiler will make your post interesting and shorten the length of post. spoiler usually used for hide the codes, photos or sentences. the ways to make it is also easy.
you just add the code on your "edit HTML" of post to hide the codes. see the steps below :

*create a new post
*choose the "edit HTML" option that place on top left corner.
*insert the code below :

<div style="margin: 5px;">
<div style="margin-bottom: 2px;">
<span style="font-weight: bold;">Kode</span>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText
= ''; this.value = 'Hide'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 2px;">
<div style="display: none;">
This is the codes/images/sentences you hide</div>
</div>
</div>

* the red code is the codes or images or sentences that will you hide. modify it as you need.
*that's all. happy to try :)

This is demo :
Kode
asdasdasasdasas


Read More...

How to make Breadcrumb on your blog.

Leave a Comment

breadcrumb
Breadcrumb is an important navigation that must you set on your blog. breadcrumb will ease your visitors to know  on the page  where they were. in addition, breadcrumb also good for your SEO. Search engines like the sites that have breadcrumb. so, why your blog no set a breadcrumb ?.
okay.. let to set breadcrumb on your blog by the steps below :

1. Log in to your Blogger dashboard.
2. go to "template" menu, and choose edit HTML. *before you edit HTML, get used to backup your templates.
3. check the expand widget templates.
4.  find the code below :

<b:if cond='data:post.title'>

5. then, put the following code under it

<b:if cond='data:blog.pageType == "item"'>
<a href='http://syakirurahman.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
<hr>
</b:if>

*don’t forget to modify the red code to be your blog url.

6. save it. and finish

that's all, and now, just see the result. if there are any errors or you have any questions, you can ask me on the comment box below. okay that's it from me, hope useful for you. Happy Blogging :)
Read More...

How to create Light random post widget on your blog.

Leave a Comment
example of random post
this time, syakirurahman will tell you about a Blog tutorial again. now, it is about random post widget. random post widget is important enough to make your blog navigation be easy. random post widget will display your older blog post that maybe your visitors never read it. so this widget will very useful to add on your blog.

well, this is the tutorial to make random post widget on blog :

1. Log in to your Dashboard
2. go to "lay out" menu
3. add "HTML/javascript " gadget.
4. paste the codes below :



<!-- Start Random Post -->
<script type='text/javascript'>
aa_r_post_number = 10; //jumlah tampilan
aa_style = 2; // style : 0, 1 ,2 ,3
aa_url = 'www.blogberbagi.com'; // Your Blog URL Without HTTP://
</script>
<script type="text/javascript" src="http://zona_widgets_1.xtgem.com/2_random_post_style"></script>
<!-- End Random Post -->



*number 10 on aa_r_post_number = 10 is the number of post will display on this widget, you can modify it as you need.

okay, that's all from me. if you don't understand, you can ask me on the comments below. i waiting for your response. Happy Blogging :)
Read More...

How to make cursor blog with falling stars effect

1 comment


hi.. i will share the tutorial how to decorate your blog again. in this turn, i will post about "how to decorate your blog cursor with falling stars effect", for more details, see the image below :


cursor with falling stars effect


this blog accessories will make your blog seen more interesting and relax. okay, let follow the steps below :

1. log in to your dashboard
2. go to "lay out/design" menu.
3. add gadget with "html/javascript" type.
4. put the code below :

<script src="http://blogtegal.googlecode.com/files/cursor_merah.js" type="text/javascript"/>

*this code is for falling stars effect with red colour(like on the image)

<script src="http://blogtegal.googlecode.com/files/cursor_hijau.js" type="text/javascript"/>

*this code is for falling stars effect with green colour

<script src="http://blogtegal.googlecode.com/files/cursor_biru.js" type="text/javascript"/>

*this code is for falling stars effect with blue colour

<script src="http://blogtegal.googlecode.com/files/cursor_ungu.js" type="text/javascript"/>

*this code is for falling stars effect with purple colour

<script src="http://blogtegal.googlecode.com/files/cursor_putih.js" type="text/javascript"/>

*this code is for falling stars effect with white colour

5. then save it.

that's it. if you have any questions, just ask it on the comment box below. may useful for you, and happy blogging :)

*site reference :blogtegal.com(indonesia)

Read More...

How to make falling snow effect on your blog

1 comment

okay, This time, i will post about how to make your blog interesting by add falling snow effect on your blog. this is similar with falling leaves effect that i have been post before. it is will make your blog more interesting and nice to seen. if you like to add this effect to your blog, just follow the step below :

1. log in to your dashboard
2. go to "layout/design" menu
3. add gadget with "HTML/javascript" type.
4. then, paste the code below :

<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>
<script type="text/javascript">

snowStorm.snowColor = 'white'; // <--this code is code for snow with white color, if you want snow with other color, you can modify 'white' code with other color you like, it is can modified by color html code too, e.g #fff for white)

snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>

5. save it, and finish.

*remember, adjust this effect with your blog background in order to seen interesting.

okay, that's all from me, if you have any question, you can ask on comment box. i looking forward for your response.
Happy Blogging :)
Read More...

how to create clock accessories for your blog

Leave a Comment

  sample clock from clocklink.com 


hi bloggers, in this time i will give you a tutorial about  to decorate your blog with clock accessories. this clock accessories is will make your blog more interesting and tell your visitors about the time when they visit your blog. the visitors will made easy to manage their time to access your blog if them have the limited time.
this accessories can obtained free of charge. okay.. follow the steps below :

1. visit this site > www.clocklink.com

2. choose the available clock model like analog, animal, animation, digital, etc. (look at left sidebar)

3. click "view HTML tag" located the below of clock you chosen, then click "accept"

4. select your time zone for your territory

5. manage the size of the clock as you like, the copy it HTML codes.

(the steps on clocklink.com is finished)

but, it is not finish yet completely. follow again the steps below :

6. log in to your dashboard

7. go to "layout/design" menu.

8. add gadget with "HTML/javascript" type

9. then, paste the HTML codes of the clock.

10. save it , and finish

good luck and may useful for you :) ask me if you have a question on the comment box
Read More...

how to make The falling leaves effect on your blog

Leave a Comment
after i have been post about How to make your blog title on titlebar runs, i will post about 'how to decorate your blog in order seen interesting' again. on this turn i will give you a tutorial about how to decorate your blog by the falling leaves effect.

this effect will make your blog seen very interesting if comply with your blog template and your niche. so i don't recommend you to use this decoration if your blog template and niche is about mechanic or the other topics that isn’t related. this decoration is recommended for the blog niche and template about nature, environment, botanical, scenery, and others that related.

well, i give the example of use this effect. look the image below :


falling leaves effect for the blogs


if you interested and like to use this decoration, just follow the steps below :

1. log in  to your dashboard

2. go to "layout/ design" menu

3. add gadget with the type of "HTML/Javascript"

4. then, put the the code below :

<script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>

5. then, save it. and finish :)

okay, that's all from me, you can ask me if you have a problem
in the comments box below.
hopefully useful for you. Happy blogging :)
Read More...