Blogspot সাইটের জন্য News Feed Ticker - নতুন CSS3 animated ডিজাইন

আসসালামু আলাইকুম,
আপনাদের ব্লগস্পট সাইটের জন্য আজ নিয়ে এলাম আরেকটা উইজেট। এটা ৭০ শতাংশ আমার ডিজাইন করা।
এখানে আপনি টিকার হেডার এবং স্টাইল চেঞ্জ করতে পারবেন।
হোভার অ্যানিমেশন আছে। ট্রাঞ্জিশন ইফেক্টের জন্য আরও সুন্দর দেখায়।
বুলেট ক্যারেক্টারে একটা ছোট ইমেজ আছে, সেখানে আপনার সাইটের লোগোর লিঙ্ক দিয়ে দেবেন।

হোভার

নরমাল

কোডঃ

<style>
table.tickeer{
border-radius: 5px;
background: limegreen;
width: 70%;
box-shadow: 2px 2px 2px black;
text-align: center;
transition: 3s;
}
table:hover.tickeer{
background: white;
transition: 0.96s;
}
td.tuppp{
border-radius: 5px;
font-family: calibri;
color: white;
width: 20%;
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
background-color: lime;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#7aeb0c, #529d09);
border: 0 none;
text-shadow: 0 -1px 0 #000;
cursor: pointer;
text-shadow: 2px 2px 2px black;
text-decoration: none;
transition: 2s;
}
td:hover.tuppp{
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
transition: 2s;
}
.news {
width:100%;
margin:0 auto;
padding:0 2px;
line-height: 1.4em;
text-align:left;
font:normal 580px siyam rupali;
color:#ff0000;
overflow:hidden;
clear:both;
}
.news a:link, .news a:visited{
color:#ff0000;
text-decoration:none;
}
.news a:hover {
color:#000000;
text-decoration:underline;
}
</style>
<center>
<table class="tickeer">
<tr>
<td class="tuppp">GR+ News Update</td>
<marque>
<td>
<script type='text/javascript'>
var nMaxPosts = 30;
var nWidth = 100;
var nScrollDelay = 20;
var sDirection = "left";
var sOpenLinkLocation= "newtab" ;
var sBulletChar = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwjIv7-cCe0QQF4ZfKFeEBM1W9IJgB813YtH_lJwdhnRp7L17docgcxYrDpc03db9DCVd_XEVputRnRB_xQfdOgA27l3IdRI4rV-kwHTcTGs7c3vXT_nISKxIqGZ4PUF365SMx4voVtmV/s1600/Green+Ranzers+Plus+Stylish.png' height='25px' width='30px' >";
</script>
<script type='text/javascript' src="https://googledrive.com/host/0Bz8X6FgnifH3VEZTNjJ2YXpkS28">
</script>
<script type="text/javascript" src="http://grplusbd.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=30 " ></script>
</td>
</marque></tr>
</table>
</center>

ডেমোঃ

GR+

Related Posts