AlamOfficial: Javascript

Showing posts with label Javascript. Show all posts

Monday, October 17, 2016

Blog এর CopyNShare dpuf url Disable করুন

আমরা Blog এ যখন Css Html javascript সহ ইত্যাদি Code নিয়ে Post করি তখন আমাদের syntax-code-highlighter Box এর মাধ্যমে Css Html javascript সহ ইত্যাদি Code গুলো Share করতে হয়।
এ ক্ষেত্রে অধিকাংশ Blog এ syntax-code-highlighter Box থেকে Css Html javascript ইত্যাদি Code গুলো Copy করলে- code গুলোর সঙ্গে অতিরিক্ত একটা ঐ Post এর সাথে সম্পৃক্ত Url অথ্যাৎ লিস্কস: Copy হয় যাহার শেষের Extension .dpuf হয়ে তাকে। যাহা খুবই বিরক্তিকর।

0 লেবেল: Blog Design, Javascript, Posts

Blog এর post copy করা Disable করে দিন

আমাদের অনেক কষ্টে করা Blog এর Post গুলো Blog থেকে প্রতিনিয়ত চুরি হয়ে যাচ্ছে Copy Paste এর মাধ্যমে-অতএব আমাদের দরকার Blog এর Post যেন সহজে যে কেউ Copy Paste করতে না পারে সে কৌশল প্রয়োগ করা !

চলুন দেখি কিভাবে Copy বন্ধ করা যায় ।

✯ প্রথমে ব্লগে Login করুন।

✯ তারপর ব্লগার dashboard হতে Layout > Add a Gadget>HTML/JavaScript বাটনে ক্লিক করুন।

0 লেবেল: Javascript

Animated Demo and Download Buttons যুক্ত করুন ব্লগস্পটে

আপনাদের জন্য নিয়ে আসলাম Animated Demo and Download Buttons যখন ব্লগের পোষ্টে ডাউনলোড লিংক দেয়ার প্রয়োজন হয়, Animated Demo and Download Buttons ব্যবহার করার ফলে ব্লগের পোষ্ট আরও আকর্ষণীয় হয়ে উঠে।বাটনগুলি আমি ইতি পূর্বেও শেয়ার করে ছিলাম।পূর্বের শেয়ার করা Buttons গুলো অনেকটা বড় ছিল কাষ্টোমাইজ করে অনেকাংশ পরিবর্তন করেছেন। মোঃ হারুন-অর-রশিদ তাই Buttons গুলো আরও আকর্ষণীয় হয়েছে।

আশা করি আপনাদের ভাল লাগবে

যেভাবে ব্লগস্পটে যুক্ত করবেন।

✯ প্রথমে ব্লগে Login করুন।

✯ তারপর ব্লগার dashboard হতে Template > Edit Html বাটনে ক্লিক করুন।

✯ কিবোর্ড হতে Ctrl+F চেপে </head> কোডটি সার্চ করুন।

✯ সার্চ করে পাওয়া </head> এর আগে নিচের javascript কোড টি পেষ্ট করুন।

 <link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

✯ কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> কোডটি সার্চ করুন।

✯ সার্চ করে পাওয়া ]]></b:skin> উপরে নিচের CSS কোড টি পেষ্ট করুন।

 #pro-buttons {margin:20px auto; text-align:center;}
#pro-buttons br {display: none;}
.pro-down, .pro-demo {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 100px;
    line-height: 30px;
    padding: 0;
    border-radius: 5px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.pro-demo {border: 2px solid #fe6d4c;}

.pro-down:hover {background-color: #0099cc;}
.pro-demo:hover {background-color: #fe6d4c;}

.pro-down span.circle, .pro-demo span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 21px;
    height: 20px;
    width: 20px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.pro-demo span.circle2 {background-color: #fe6d4c;}

.pro-down:hover span.circle, .pro-demo:hover span.circle2 {
    left: 100%;
    margin-left: -25px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.pro-demo:hover span.circle2 {color: #fe6d4c;}
.pro-down span.title, .pro-down span.title-hover,
.pro-demo span.title2, .pro-demo span.title-hover2 {
    position: absolute;
    left: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.pro-demo span.title2, .pro-demo span.title-hover2 {color:#fe6d4c; left:35px;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {left:20px; opacity:0;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {color: #fff;}
.pro-down:hover span.title, .pro-demo:hover span.title2 {left:20px; opacity:0;}
.pro-down:hover span.title-hover, .pro-demo:hover span.title-hover2 {opacity:1; left:10px;}

✯ Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন।

যখন ব্লগের পোষ্টে ডাউনলোড লিংক দেয়ার প্রয়োজন হবে।
তখন পোষ্ট এর HTML Editor এ যাবেন এবং সেখানে নিচের HTML কোড গুলো পেষ্ট করে সেভ করুন।

 <div id="pro-buttons">
 <a class="pro-down" href="#" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="pro-demo" href="#" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

✯ উপরের HTML কোডের # এর স্থলে Demo এবং Download লিংক দেবেন।

0 লেবেল: Blog Design, CSS, HTML, Javascript

breaking news ticker যুক্ত করুন ব্লগে

আশা করি সকলে'ই ভাল আছেন|অনেকে'ই চান নিজের ব্লগস্পট সাইড টা একটু সাজ সজ্জা করতে-তাই আমি শেয়ার করলাম ব্রেকিং নিউজ টিকার আশা করি আপনাদের ভাল লাগবে

যেভাবে ব্লগস্পটে যুক্ত করবেন।

✯ কিবোর্ড হতে Ctrl+F চেপে </style> কোডটি সার্চ করুন।

✯ সার্চ করে পাওয়া </style> এর আগে নিচের CSS কোড গুলো পেষ্ট করুন।

#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

✯ কিবোর্ড হতে Ctrl+F চেপে </body> কোডটি সার্চ করুন।

✯ সার্চ করে পাওয়া </body> কোড এর আগে নিচের javascript কোড গুলো পেষ্ট করুন।

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {

var url_blog = 'http://www.visitortunes.com/', //replace with your Domain
numpostx = 10; //Posts want to display

$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',

type: 'get',
dataType: "jsonp",
success: function(data) {

var posturl, posttitle, skeleton = '',
entry = data.feed.entry;

if (entry !== undefined) {
skeleton = "<ul>";

for (var i = 0; i < entry.length; i++) {

for (var j=0; j < entry[i].link.length; j++)

{
if (entry[i].link[j].rel == "alternate")

{
posturl = entry[i].link[j].href;

break;
}
} posttitle = entry[i].title.$t;

skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';

}
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);

// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });

}
setInterval(function(){ tick () }, 5000);

} else {
$('#recentpostbreaking').html('<span>No result!</span>');

}
},
error: function() {

$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
}

});
});
//]]>
</script>

✯ বিঃদ্রঃ: উপরের javascript কোডের "http://www.visitortunes.com" এর জায়গায় আপনার সাইডের Home লিস্কস: দিন
এবং Template টি সেভ করুন

✯ এবার ব্রেকিং নিউজ টিকার দেখানোর জন্য dashboard > Layout এ গিয়ে একটি HTML/Javascript

দ্বারা Gadget তৈরী করে নিচের HTML কোড গুলো পেষ্ট করে সেভ করুন।

অথবা আপনার HTML নিয়ে যদি ভাল জ্ঞান থাকে তাহলে Template > Edit Html সেকশনে ও এড করতে পারেন।

<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
<div id='recentpostbreaking'>Loading...</div>
</div>

এখন আপনার সাইডে দেখুন ব্রেকিং নিউজ টিকার যোগ হয়ে গেছে-কোন সমস্যা হলে অবশ্যই মন্তব্য জানাবেন-টিউনটি ভাল লাগলে শেযার করতে ভূলবেন না।

0 লেবেল: Blog Design, CSS, HTML, Javascript

Saturday, June 20, 2015

ব্লগস্পটে Multi Tab সিস্টেম কমেন্ট বক্স যুক্ত করবেন যেভাবে

আসসালামু আলাইকুম,আশা করি সবাই ভাল আছেন,যারা ব্লগিং করেন,তাদের পোষ্ট করা কিছুটা স্বার্থক হয় তখন,যখন কোন ভিসিটর ঐ পোষ্টে কমেন্ট করেন,মানুষের যেমন একটা প্রাণ আছে,ঠিক তেমন পোষ্টের প্রাণ হল কমেন্ট,তবে এ কমেন্ট গুলো পেতে আমাদের কিছুটা কাজ করতে হবে,যেমন ব্লগস্পটে স্বাভাবিক ভাবে ফেইসবুক কমেন্ট বক্স থাকেনা যার ফলে কেউ চাইলে ফেইসবুক দিয়ে কমেন্ট করতে পারেনা,আজকে আমরা ব্লগার ও ফেইসবুক Multi Tab সিস্টেম কমেন্ট বক্স যুক্ত করব,এটি যুক্ত করার ফলে ব্লগার ও ফেইসবুক দু প্রকারে কমেন্ট করতে পারবেন ভিসিটর এরা ,একসাথে Facebook এবং Blogger দুটি কমেন্ট বক্স ব্যবহারের ফলে আপনার ভিজিটররা সহজে বুঝতে পারবে আপনার পোষ্টটির কোন ট্যাবে কতটি কমেন্ট করা হয়েছে নিচের ছবিতে দেখুন

আপনার ব্লগার একাউন্টে লগইন করুন।

এরপর Template > Edit Html এ ক্লিক করুন।

তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।

এখন নিচের কোডগুলি </head> ট্যাগের উপরে পেষ্ট করুন।

এবার </head> সার্চ করে ঠিক তার উপরে নিচের কোডগুলি পেষ্ট করুন।

<style>
/*--- Tabbed Facebook Comments By VisitorTunes.com ----*/
.comments-page {background-color:#FFF; border:15px;border: 1px solid #d1d8f0;}
#blogger-comments-page {padding:0px 5px; display:none;}
.comments-tab {float:left; padding:5px; margin-right:3px; cursor:pointer; background-color:#b5e5fa;border-radius: 2px;}
.comments-tab-icon {height:14px; width:auto; margin-right:3px;}
.comments-tab:hover {background-color:#eeeeee;}
.inactive-select-tab {background-color:#d1d1d1;}
</style>

এবার <div class='comments' id='comments'> সার্চ করে ঠিক তার নিচে নিচের কোডগুলি পেষ্ট করুন।

<b:if cond='data:blog.pageType == "item"'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFH4crFKFt2R-9aARewiujjYZHwXqJSD44PkHC-l9g2NvDgwAOL_UF8Q4o1xHPRL3Jhn1uLmxzrOU8luD1WF43Bgd1_LoNkm0Pr3kl0JqW7abvzKPCPaRi5whhmWcdUwkKHIcoaVUDpaf/s1600/FB.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div></b:if><div class='clear'/></div>
<b:if cond='data:blog.pageType == "item"'>
<div class='comments-page' id='fb-comments-page'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='600'/>
</div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>

ফেইসবুক কমেন্ট বক্সের width='600 কমাতে ও বাড়াতে পারেন

এরপর Save Template এ ক্লিক করলেই কাজ OK ভাল লাগলে কমেন্ট করতে ভুলবেন না

0 লেবেল: Blog Design, CSS, Javascript

Saturday, March 14, 2015

আপনার ব্লগের মাউসের তীরের পেছনে ঘুরন্ত লেজ তৈরি করুন

আসসালামালাইকুম।সবাই কেমন আছেন ? আশা করি ভালোই আছেন।

আমিও আপনাদের দোয়ায় ভালোই আছি।একটি মজার পোস্ট নিয়ে ফিরে এলাম,

আসুন তাহলে এবার আমরা শুরু করি।

ব্লগস্পট ব্লগে মাউসের লেজ তৈরি করার উপায় :

প্রথমে আপনার ব্লগে লগ ইন করে

Deshboard >>> Layout >>> Add A Gadget >> HTML/JavaScript এ ক্লিক করে

নিচের কোড গুলো সম্পূর্ণ কপি করে যুক্ত করুন

যদি কেউ না বুঝে থাকেন কমেন্ট করতে ভুলবেন না

5 লেবেল: Blog Design, Javascript

AlamOfficial