IT Knowledge School: 2016

Making text area in blog Post or blog page

Essential Channel Saturday, May 21, 2016 Blog Post Tools

A little review of the text area. Text area is a box that contains html code or script code that was used to put the code in order to exchange the links in the copy by visitors and save space. Function text area not only that but it can also to put the writing etc.. To create a text area can be quite easy to say and do not require a lot of code and complex. If my friend wanted to make this area please text my friend just copy and paste the code below:

<p align="center"><textarea name="code" rows="5" cols="25"> Write a text or code here, this is the writing that appears in the text area </textarea></p<

Example from text area:

Rows="5" --> Height from text area.
Cols="25" --> Width from text area.

Text Area with HighLight

Key areas highlighted in the text so that the text function is easier to copy the whole with no one left, because by pressing the button once, the entire text or code in the text area will be highlighted and copied it to stay on. This facility is very, very useful when the text or code that is given very much and reduce the risk of a text or code behind when the copy. To create a text area to highlight please copy code below:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"></div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">

Put text here, this is the writing or the code that is displayed and ready for the copy </textarea></p></div></form>

Example the text area with highlight:



Elemen Highlight
<div align="center"> --> This is the element code highlighted, the word "center" shows the position in the middle button, if you want the button on the left side, replace it with "left." And if you want on the right, replace it with "right."
<input onclick="javascript:this.form.txt. focus();this.form.txt.selec()"> -->This code shows the highlight button is clicked, all text or code in it will be in highligt.
Value="Highlight All" --> This word appears in the button, can be changed at will.

Element text area :
<p align="center"> --> this code so that text area in the middle, if you want the left instead with"left", and if you want the right change "right".
<text style="width: 300px"> --> "width:300px" With from text area.
"height: 144px" --> Height from text area.

Good luck.

Read More »

Post Boundery

Essential Channel Saturday, May 21, 2016 Blog Post Tools

প্রথমে পোষ্ট লিখতে হবে , তার পর HTML এ Click করতে হবে । তারপর সকল কোডের উপরে নিচের কোডগুলো Paste করতে হবে ।

Read More »

How to Make a Sticky Post in Blogger

Essential Channel Saturday, May 21, 2016 Blog Post Tools

After writing your post click on "HTML".

2 Select all of the HTML code and copy it.

3Close the HTML.

You will turn to the main screen. On your dashboard click "Layout".

Click "Add a Gadget".

In the opening screen, scroll down and click "HTML/Java Script".

Right click and paste the HTML you copied before.

Enter your post title.

Click "Save".

You will return to Layout screen. Notice the title you typed in Step 8 on the "Add a Gadget" tab. Now click on the left end of this tab and while holding your mouse button and drag it downward a little.

It should look like the picture below.

Click "Save Arrangement".

Read More »

ব্লগারে একটি আকর্ষণীয় HTML Sitemap Page তৈরী করে নিন

Essential Channel Friday, May 20, 2016 Blog Site Developer

1st Option

যে ভাবে ব্লগে যুক্ত করবেনঃ

প্রথমে আপনার ব্লগে লগইন করুন।
তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
এখন Create a New Page এ ক্লিক করুন।
এরপর পেজটির HTML এ ক্লিক করুন।
নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।

এখন whhelpdesk.blogspot.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
========================================================

2nd Option
যে ভাবে ব্লগে যুক্ত করবেনঃ

প্রথমে আপনার ব্লগে লগইন করুন।
তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
এখন Create a New Page এ ক্লিক করুন।
এরপর পেজটির HTML এ ক্লিক করুন।
নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।

<style type="text/css">
#sitemap {width:100%;
margin:5px auto;
margin-left: 4px;
border:1px solid #23A839;
border-top:0px solid #2D96DF;}.label {color:#FF5F00;
font-weight:bold;
margin: -16px -1px 0px;
padding:1px 0 2px 11px;
background: -webkit-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right, #6DFC85 0%, #23A839 40%); /* Standard syntax */
border:1px solid #23A839;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
display:block;}.label a {color:#fff;}.label:first-letter {text-transform:uppercase;}.new {color:#FF5F00;
font-weight:bold;
font-style:italic;}.postname {font-weight:normal;
background: -webkit-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right, #6DFC85 0%, #FFF 40%); /* Standard syntax */}.postname li {border-bottom: #DDD 1px dotted;
margin-right:5px}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
</style><div id="sitemap">
<script type="text/javascript" src="https://cdn.rawgit.com/prozokti/rashid/master/sitemap.js"></script>
<script src="https://24gdbd.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadsitemap"></script>
</div>

এখন 24gdbd.blogspot.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
সবশেষে Publish বাটনে ক্লিক করলেই কাজ শেষ।

পূর্বে প্রকাশিতঃ 24worldtips.ml এখানে

3rd Option

যে ভাবে ব্লগে যুক্ত করবেনঃ

প্রথমে আপনার ব্লগে লগইন করুন।
তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
এখন Create a New Page এ ক্লিক করুন।
এরপর পেজটির HTML এ ক্লিক করুন।
নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।

এখন http://helplogger.blogspot.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
সবশেষে Publish বাটনে ক্লিক করলেই কাজ শেষ।

==============================================
সহজ ভাষায় বলা যায় সাইটম্যাপ হচ্ছে আপনার ওয়েবসাইটের সমুদয় পোষ্ট এর সারসংক্ষেপ। সাইটম্যাপের মাধ্যমে Search Engine সহজে বুঝে নিতে পারে যে, আপনার ব্লগে/ওয়েবসাইটে কতগুলো পোষ্ট রয়েছে। যার ফলশ্রুতিতে যে কোন সার্চ ইঞ্জিন আপনার সাইটের কনটেন্ট গুলি Index করে সার্চ রেজাল্টে নিয়ে আসে। এটি হচ্ছে বিভিন্ন সার্চ ইঞ্জিনে আপনার ব্লগ/ওয়েবসাইট সাবমিটের পদ্ধতী। কিন্তু আমি যে HTML Sitemap Page টি তৈরী করা দেখাবো এটি হচ্ছে আপনার পাঠকের জন্য। যার মাধ্যমে পাঠকরা জানতে পারবে আপনার ব্লগে কতগুলি পোষ্ট রয়েছে। এ ছাড়াও আর সুবিধা হচ্ছে যে, এই HTML Sitemap Page টি প্রত্যেকটি Label-কে আলাদা আলাদাভাবে দেখাবে। যার ফলে ভিজিটররা সহজে তাদের পছন্দমত লিংকগুলি ভিজিট করতে পারবে। তাছাড়া নতুন পোষ্টগুলি অটোমেটিকভাবে Indicate করবে যে, কোন গুলি নতুন পোষ্ট। এই পোষ্টটি হয়ত বিভিন্ন ব্লগে অনেকবার করা হয়েছে। তার পরও নতুন করে শেয়ার করছি, কারণ আমি এটিতে নতুন কিছু ফিচার যুক্ত করার পাশাাপাশি সব ধরনের Browsers Compatibility করেছি। যা এটিকে আরও আকর্ষণীয় করে তুলবে। তাছাড়া বাংলা ব্লগের জন্য ফন্টের কিছু সমস্যা ছিল, তা Solve করেছি। আশা করি আপনাদের ভাল লাগবে। এখান থেকে ডেমো দেখে আসতে পারেন।

যে ভাবে ব্লগে যুক্ত করবেনঃ

প্রথমে আপনার ব্লগে লগইন করুন।
তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
এখন Create a New Page এ ক্লিক করুন।
এরপর পেজটির HTML এ ক্লিক করুন।
নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।

এখন www.prozokti.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
সবশেষে Publish বাটনে ক্লিক করলেই কাজ শেষ।

Read More »

Blogger label widget / blogger label widget style

Essential Channel Friday, May 20, 2016 Blog Site Decoration

First you need to add the label gadget by using the following method.

1) Add the label Gadget
2) Add Label Style (CSS Style)
3) Label Theme

Add the label Gadget

Step 1:
After login and enter your post Click Layout.

Step 2:
From right hand side find the Add Gadget button,

Step3:
After press the "Add a Gadget" link button a popup window is display and some option is there, scroll down and find the Labels gadget and press the "+" symbol.

Add Label Gadget from blogger default gadget

Step 4:
The label configuration window is displaying you can adjust the default settings.

Step 5:
The gadget is added and you can move it to your favorite place, like below image.

Move blogger gadget to your favorite Place

Now you can see the label you added, but it don't have any style just show a link button, you can apply style by following methods.

Add Label Style (CSS)

Step 1:
Click template and Edit HTML.

Step 2:

After clicking the "Edit HTML" you will see like below image.

Step 3:

Press ctrl+F and find the name using </head>.

Step 4:

Just add any one of the following code above the </head> tag.

Leaf Theme With Hover Effect

<style>
.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}



.Label li:hover {



    transform: rotate(5deg);



}




.Label li {



    float: left;

    font-size: 116%;

    list-style: none outside none;

    transition: all 0.3s ease 0s;



}

</style>

Skeleton Label Theme

<style>
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #000;
    text-decoration: none;
}
</style>

Skeleton With Background Color Label Theme

<style>
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
    .Label li:hover {
        transform: rotate(5deg);
    }
.Label a {
    color: #fff;
    text-decoration: none;
}
</style>

Arrow Label Theme

<style>
 .Label li:before {
        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);
        border-bottom: 1px solid #145091;
        border-left: 1px solid #145091;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #3F6893;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #B5D8FF;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);
        border-bottom: 1px solid #145091;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #145091;
        border-top: 1px solid #145091;
        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    }
</style>

Rotate Blogger Label Theme

<style>
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}
.Label a {
    color: #fff;
    text-decoration: none;
}
</style>