Include the source URL of each copy paste web article

This article will try to include the source URL when someone copies and pastes content on the website.

Article theft without responsibility is sometimes annoying, for people who are tired of thinking about what content is good for their website, tired of writing it, then easily and without guilt other people copy and paste it into their website and post it directly as their own. This is annoying sometimes.

The article is actually to be read and studied, not to be copied and pasted and posted on its own website without any credit to the original author.

There need to be preventive ways to overcome this problem, in the previous article tutorial-webdesign.com has tried to prevent the theft of web articles with css. This time we try another method, namely by including the source URL of the article every time someone does a copy paste.

To do that we need Javascript, because it seems only javascript can do that to the client (client site scripting).

Other Uses
There’s always a good side and a bad side to something, for those who like copy and paste this can be annoying, but for people who care about copyright then this is very helpful. Why?
Sometimes because there are too many copy-pastes, a person who is working on a scientific paper forgets where he/she took/quotes the writing from. This can help them because it is easy to find out where they are copying and pasting from. There are other uses for sure for SEO, but we won’t go into more detail, we’ll just put it into practice.

Steps.

  1. Here we only need to register on the Tynt website (http://www.tynt.com) by entering your email and personal data.
  2. Then later we will be given a code that we can take. Example Code
  1. Copy the code and place it at the top of the web, right before the /head tag;
  2. If you have registered, there will be guidelines there, both for personal websites, WordPress, Blogger or others.
  3. If it has been placed above the /head tag, then run the website again, and try to copy your website articles. Then the result will look like this image.

Copy Paste
Example of pasting an article into Microsoft Word

I applied it on this website, and I tried to paste it in Microsoft word. The result will be the same as the image above if you paste it in a web editor, or code editor or anywhere else.

So many tricks this time, hopefully useful for you.

Making Breadcrumbs in WordPress

In this article we will try to make breadcrumbs in wordpress, before that did you know what is meant by breadcrumbs?

If you don’t know, please read the following explanation from the wikipedia website.

If you are a wordpress theme developer / theme maker, you should definitely think about including breadcrumbs in the templates you create. Since this is an important element in a website, it is also very important for SEO.

Breadcrumbs usually appear horizontally at the top of a web page, often below the title bar or header. Which is useful for making it easier for website visitors in terms of navigation when a website has a lot of sub menu depth. With the breadcrumb the user will not be confused about what menu he has opened before he arrives at a page, so he can easily return to previous pages.

Breadcrumbs use a single line of text to show a page’s location in the site hierarchy. While secondary, this navigation technique is beneficial to users โ€“ Jacob Nielsen.

Examples of Breadcrumb Forms:

Home page > Section page > Subsection page > Sub Subsection page

Or

Home page : Section page : Subsection page : Sub Subsection page

Please adjust the shape of the separator according to your website design, but generally the separator used is in the form of an arrow >

The apple.com website is very famous for its breadcrumbs, often used as a reference

Apple Breadcrumb
Apple Breadcrumb

Breadcrumbs in WordPress
Well this time we will try to make breadcrumbs in wordpress, this function is very good and easy to edit.

First create a breadcrumb() function in the functions.php file in your template folder. The contents are as follows:

WordPress โ€“ Sorting Categories By Category

Sorting categories in wordpress is not difficult, because the parameters are already available in the wp_list_categories() function, with that function we can sort categories by ID, name, slug, count or term_group, but there are times when we are asked to sort based on the last post we made . This is a bit difficult. For example, the last post is about the economy, so the categories that appear start from the economy.

The main logic if you want to sort like that means we have to query the posts first, after that only the mapping category.

Cekidot, hope it helps your problem.

<?php
$cat_array = array();
$args=array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => 25,
‘caller_get_posts’=> 1
);

}
if ($cat_array) {
  foreach($cat_array as $cat) {
    $category = get_term_by('ID',$cat, 'category');
    echo '&lt;a href=&quot;' . esc_attr(get_term_link($category, 'category')) . '&quot; title=&quot;' . sprintf( __( &quot;View all posts in %s&quot; ), $category-&gt;name ) . '&quot; ' . '&gt;' . $category-&gt;name.'&lt;/a&gt;'.'&lt;br /&gt;';
  }
}
wp_reset_query();

?>
Ref: Dynamic WP

Create Instagram-style photos in wordpress with vintagejs

Since it first appeared on the iPhone, Instagram has made people fall in love, there are many fans right away, there are even people who are willing to buy an iPhone which is quite expensive just to be able to upload photos and give effects on Instagram, seems very exclusive, feels like a reliable photographer. But lately Instagram has also appeared on Android, fans and users are also increasing, until finally Instagram was acquired by Facebook at a fantastic price, 9.1 Trillion. Wow, very expensive, especially considering that Instagram was previously only managed by a dozen people, you could say that it was a very successful sale.

Talking about Instagram, in the world of websites we can also make photos with vintage effects (old school) like those on Instagram, we can apply them on our website. Standard photos, we can give the effect to make it look more dramatic.

Is Vintage.js, a jQuery plugin that can turn ordinary photos into vintage or retro styles by using the html5 canvas element. Sophisticated, you can try the demo directly by uploading your photos on the website, namely: http://vintagejs.com/

Vintagejs on WordPress
We can also apply vintagejs on the wordpress website/blog that we use, just download and install the Vintagejs plugin as usual, just like any other wordpress plugin. Then activate the plugin, then when you upload a photo, there will be options like the following in your popup window.

Then the resulting photo on your website page will look like the following image after publishing.

Vintagejs Result

Please try it yourself on your wordpress blog, if there are difficulties, don’t hesitate to ask and leave comments.

Thank you, greetings Indonesian web design

5 WordPress Plugins To Watermark Photos

Preventing the theft of photos on a website by providing a watermark so that it is not easy to be recognized as belonging to the thief is the topic of our discussion this time.

A digital watermark is a kind of marker covertly embedded in a noise-tolerant signal such as audio or image data. It is typically used to identify ownership of the copyright of such signal.
โ€“ Wikipedia

Preventing the theft of images on a website is quite important, especially if the website is a website owned by a professional photographer, this can be a must, although not all of them are like that, because many photographers also allow other people to use their photos to capture images. used by others.

In addition to the photographer’s website, a website that is devoted to buying and selling photos also definitely requires methods like this.

Not only for professionals, amateur photographers can also prevent their pictures from being taken and recognized by others by giving a watermark, in this paper, especially for those of you who have a wordpress-based website, you can easily apply this method.

Instead of having to mark each image using software such as Adobe Photoshop, it seems this method is quite effective in saving your time.

Related Posts

Prevent Web Article Theft With CSS
Include the source URL of each copy paste web article
The following tutorial-webdesign.com will show some wordpress plugins that are quite useful for protecting photos on the website from being stolen or recognized by others and used carelessly.

  1. Bulk Watermark Plugin
    Bulk Watermark
    Bulk Watermark

With this plugin you can add text in the image section as a sign that this is owned by the person who gave the sign, if you have a logo or image of your identity you also include the image in certain parts of the photo.

  1. Transparent Image Watermark
    Transparent Image Watermark
    Transparent Image Watermark

This plugin will automatically give a mark in the form of text / PNG images that have been previously set on all photos in the WP Media Library, this plugin also allows us to test the results (preview) first.

  1. Scissors and Watermark WordPress Plugin
    Scissors and Watermark WordPress Plugin
    Scissors and Watermark WordPress Plugin

If the previous two plugins we can use to give watermarks or marks on images, this plugin has other advantages, where we can do Croping, Rotating, Resizing, and other standard image editing facilities.

  1. Watermark My Image
    Watermark My Image

Watermark My Image

This plugin allows you to watermark your images, by placing a simple, but highly customizable watermark below the original image (very similar to the one 9GAG uses).

  1. Easy Watermark
    Easy Watermark
    Easy Watermark

This wordpress plugin automatically adds a watermark for images when they are uploaded to the WordPress Media Library.

That’s it.

Before using any wordpress plugin, our advice is to try it on a local computer first to get the plugins that your website really needs.

Hopefully these 5 plugins are useful for those of you whose images do not want to be recognized by others.

This method is not the only way, there are many other ways that you can use, but this method is quite useful.

May we not be stingy people.

Greetings Indonesian web design.

A Peek at WordPress’ New Features

WordPress is said to be releasing version 3.6 soon, the newest version in May, the world’s most popular CMS and Blogging Platform, of course, has prepared many new features or other changes.

In this article we will discuss some of these new features, for those of you who have a website with wordpress you should take a moment to see what’s new from wordpress 3.6. Checkidot.

Updated August 2, 2013:
WordPress 3.6 was launched yesterday, August 1, 2013, the new features are as below, to download please check the official website.

  1. Post Formats.
    WordPress will increase the functionality of the Post Format, this feature has actually been in wordpress before, but this feature is still hidden, not everyone knows this, only developers or themes developers understand. Reportedly in version 3.6 this feature will be easier to use.

Post Format New Look
Post Format New Look

Post Format will have its own UI if enabled by the template creator.

So WordPress will be more and more similar to Tumblr, where we can post things of various types, for example images, Gallery, Links, Videos, Audio, Chat, Status, Quotes, Aside, etc.

2.New Templates
After the previous version there was a default template like Tweenty Twelve, then in WordPress 3.6 there will be another new template named Twenty Thirteen, this display is made with a Flat Design model.

WordPress 3.6 Theme Twenty Thirteen
WordPress 3.6 Theme Twenty Thirteen

  1. Post Locking.
    This feature is a new feature of wordpress 3.6, it is likely to be more useful for blogs that have many authors (multi author) such as tutorial-webdesign.com.

Post Lock
Post Lock

Its usefulness is that this feature will notify us if this post is locked because someone is making changes, thus avoiding 2 people editing the post at the same time. If in the previous version we were only given a yellow notification at the top of the editor, in this version the display is made more attractive, we can determine actions against people who are making these changes, we can kick them if we want (that’s according to wordpress in the news) ๐Ÿ™‚

  1. Autosaving Feature Update.
    Posts are now automatically saved locally. If your computer crashes, or your computer suddenly shuts down, you won’t lose your post.
  2. Improvement of Revision Management Features.
    WordPress automatically saves the changes we make to a post, so if we have finished editing a post and want to go back to the previous edit then we can go back again easily. In the latest version, this feature is being maximized and the appearance is slightly changed, so there will be a timeline of revisions that we can use. WordPress is increasingly concerned with content quality.

Display features revision wordpress 3.6
Display features revision wordpress 3.6

  1. Better Menu Manager Features.
    Admin Menu
    Admin Menu

What is certain is that wordpress updates the menu management feature or creates a menu that we want to display, with this of course managing the menu will be better and easier.

  1. Audio/Video
    audio-video

WordPress 3.6 lets you easily embed videos from various websites like Youtube.

so much

Those are some of the changes that will be made in wordpress version 3.6 which is likely to be launched next month (in May). If you can’t wait to try it, you can download WordPress 3.6 Beta here.

Greetings Indonesian web design.

Share To Social Media

5 Free and Responsive WordPress Templates

We present a free and responsive WordPress theme in this article. On this occasion we will provide a list of free wordpress templates with good enough quality and already responsive for the purposes of working on your website or for use on a personal blog.

All of these wordpress templates are responsive so they can be opened on all today’s sophisticated devices such as (Tablet PCs and Smartphones).

We hope you are happy with the list of templates that we present, we also intend to continuously provide a list of good quality templates that can support your work, so keep updating the tutorial-webdesign.com website through our Facebook and Twitter.

  1. Playbook
    This template can be used for news websites.

playbook
playbook

Demo | Download

  1. Portal
    This WordPress template can be used for news portals.

Portal-WordPress-Theme
Portal-WordPress-Theme

Demo | Download

  1. GreenChile
    Great template to use on a personal blog or news website.

GreenChilli-WordPerss-Theme
GreenChilli-WordPerss-Theme

Demo | Download

  1. DailyPost
    From the name alone, we can already know that this website is designed for a news website that is always updated

Demo | Download

  1. Clippy
    This template is good enough for those of you who want to make your website look like Tumblr, commonly called Tumblr Design.

Creating Different Post Views in WordPress Blogazine Style

Creating different layouts for articles or posts on wordpress like blogazine lovers do is quite interesting to try, although tutorial-webdesign.com is not a blogazine follower, but this time we will discuss a little about the basics of making it.

Different Layout Visualization
Image by Pingv

As you can see, the appearance of the article you are reading is different from the appearance of other articles on this website.

Try to compare with this: Making Youtube Videos as Website Background.

The differences are:

No header (logo)
The position of the content that is usually in the middle is now on the left, while the sidebar on the left moves to the middle.
The color of the top menu changes.
The sidebar color has also changed.
So how to make it? there are many ways to make it like that, some use plugins and some add or create their own scripts.

Start

On this occasion we will try manually, by adding a script, for that you need to change the function.php file a little in your wordpress theme folder.

Add the following script in wp-content/themes/theme_name/functions.php

add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
function custom_css_hooks() {
add_meta_box(‘custom_css’, ‘CSS For Post’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_css’, ‘CSS For Page’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_css_input() {
global $post;
echo ”;
echo ”.get_post_meta($post->ID,’_custom_css’,true) .”;
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST[‘custom_css’];
update_post_meta($post_id, ‘_custom_css’, $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ”;
endwhile; endif;
rewind_posts();
}
}
The script consists of 4 functions, of which 3 functions will be used to interact with the wordpress core, the function which we declare with add_action.

add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
custom_css_hooks & custom_css_input : to declare and add a metabox, here is a textarea with the name (CSS For Post) which will appear in every Post creation and (CSS For Post) which will appear in every Page creation.

save_custom_css: for the action of saving the results to the database.

insert_custom_css: to write the CSS that is inputted into the website header so that the display can change.

Results
The result is that a textarea will appear at the bottom when you write a post or page.

Textarea Image
The โ€œCSS for Postโ€ text area has appeared

How to use.

Please enter the css script to change your website in the CSS for Post or CSS for Pages, to change it, of course you must know what ID and Class are in the template used.

There we removed the header by adding display:none for the header
sidebar moves to the right by changing the float to float:right, while the content is added float:left.
And other settings, please explore yourself

firebug
firebug

To find out you can open the script in the template or use firebug to find out the ID or Class name used.

Other Feedback

to make the display 100% updated this way, and you have the intention to actually implement blogazine, you can clear the css for the purposes of setting up articles in style.css, and write the appearance for each post through the css column created (But yeah it takes time and effort).
Compress the css that will be entered first to reduce website speed.
Articles that can be used as references: The death of the boring blog post?
Hopefully useful, hopefully can eliminate boredom when blogging, greetings web development Indonesia.

4 Ways to Validate a WordPress Theme

Whether you are a designer or developer or just a person who downloads a wordpress theme for your website, maybe you want to check the integrity of the theme, control the quality, and so on. Here are 3 ways that are used to validate your wordpress theme before you use it or before publishing it to others.

themecheck.org
Theme Check

If you don’t have a plugin installed to check, you can use Themecheck.org to check your theme, just upload the theme and you will be given a score after you press the submit button, besides the score, you will also be given some important notes and some warnings if something goes wrong.

Theme check plugins
This is a fairly simple plugin that can be used to check your wordpress theme with the latest/updated version of the WordPress Theme Guidelines. This Theme Check plugin will check for unimportant weaknesses of a custom theme, of course this will be very useful.

Theme Authenticity Checker
WordPress Theme Authenticity Checker

This WordPress Theme Authenticity Checker plugin is not a developer problem like the two we mentioned above, but it can be very useful if you want to install a theme that you have downloaded from sources outside the official wordpress.org site.

W3 Validator
To improve, finally you might need to check with the markup with the W3 Validator to find out which part of the HTML tags of the theme is the problem.

so..

Hopefully useful for those of you who use a theme or those of you who are developing a wordpress theme.

Greetings Indonesian Web Design

Tutorial How to Create Widgets in WordPress

In WordPress, of course, there are many widgets created by developers. For those who are old in wordpress, making a widget is not difficult, but maybe many beginners are wondering how to make a widget in wordpress??

Well, here I will explain how to create a wordpress widget itself. For practice, we will create this widget in a plugin. Okay, for starters please create a new file in wp-content/plugin with the name widget_gue.php. Then fill it with this code:

/*
Plugin Name: My Widget
Plugin URI: http://www.domain.com
Description: A simple widget
Author: Nur Rohmat
Version: 1
Author URI: http://www.domain.com
*/
Next.. There are 3 main functions of a widget, namely:

function form()
update() function
widget() function
Basic Framework
The basic framework of a wordpress widget is actually very simple. Take a look at the code below:

class widget_gue extends WP_Widget{ //Example widget class
function widget_gue(){} //Widget settings (name, description, etc.)
function form(){} //form in admin page
function update(){} //function when widget is updated/saved
function widget(){} //view of a widget
}
add_action(‘widgets_init’, create_function(”, ‘return register_widget(“widget_gue”);’)); // function to load widget_gue
Step 1
We will wrap this widget in a class. The name of this class is very important. The class name and function name must be the same.

class widget_gue extends WP_Widget{}
Next we will give the identity of the widget. For example we will give the name .

function widget_gue(){
parent::WP_Widget(false, $name=__(‘GUE Widget’,’wp_widget’));
}
Step 2 function form()
The next stage we will create a form on the admin page. For example we will add a text input (for the widget title) and a textarea (for the widget content).

function form($instance){
if ($instance){
$text=esc_attr($instance[‘text’]);
$content=esc_attr($instance[‘content’]);
}
else{
$text=”;
$content=”;
}
?>

get_field_id(‘text’); ?> value=”” />

<?php echo $ content;?>
<?php
}
Step 3 function update()
The update function is used to store data entered by the user into the form. The syntax is quite simple

function update($new_instance,$old_instance){
$instance=$old_instance;
$instance[‘text’]=strip_tags($new_instance[‘text’]);
$instance[‘content’]=strip_tags($new_instance[‘content’]);
return $instance;
}
Step 4 function widget()
The next step we will set the appearance of the widget that we created. We will display the title and other user-editable parameters in the widget menu. We’ll also add custom variables like $before_widget, $after_widget, $before_title, and $after_title.