Add Stylish News Ticker With Clock in Blogger
Hello Guys Welcome to my Blog , Today In this Tutorial we learn how to Add News Ticker like ( News Channel , Geo News ,Samaa News ) with Clock Widget. make your blog attractive for Visitors.So let's Start.
Follow these Steps
1.go to blogger.com
2.click tap click layout
3.click on Add Gadget
4.click HTML/JavaScript
5.copy and paste code below down
Copy & Paste This code:
</marquee><style>
.blue {
background: #ff8c00;
}
.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 10px 10px rgba(0,0,0,0.5);
width: 1000px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 1px;
-webkit-user-select: none;
}
.news span {
float: right;
color: #fff;
padding: 12px;
position: relative;
top: 1%;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 19px 'Raleway', Helvetica, JameelKhushkhatLRegular, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer;
}
.text1{
box-shadow:none !important;
width: 780px;
}
</style>
<div class="news blue">
<span>Hashim Tech</span><span class="text1" ><marquee>Welcome to My Blog </marquee></span>
</div>
Paste this Code in HTML/JavaScript box and save it .
Replace text <marquee>Welcome to My Blog </marquee> with your text.
If you want to Add Clock (Time&Date) with News Ticker following these Steps
Clock HTML Code: Copy this code below
iframe src="https://free.timeanddate.com/clock/i8m7xh9g/n2135/fs12/fcf90/tc000/ftb/pa8/tt0/tw1/th2/tb4" frameborder="0" width="160" height="44"></iframe>
And just paste This code between <span></span>Paste Clock Code Here <span
<div class="news blue">
<span>Hashim Tech</span> <iframe src="https://free.timeanddate.com/clock/i8m7xh9g/n2135/fs12/fcf90/tc000/ftb/pa8/tt0/tw1/th2/tb4" frameborder="0" width="160" height="44"></iframe>
<span class="text1" ><marquee>Welcome to My Blog </marquee></span>
</div>
also add Scroll Image in News Ticker :
Follow these steps, Copy the Image Code below and paste it before
</marquee><style> tag mean paste it before News Ticker code
Code here Copy it and Paste
<marquee behavior="scroll" direction="Right">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhIEvsKvn_w8hKWk3afKpmbi6E1asbTA-vhADBkRmqqeBY5L8oy2CL_vKhDOhDVeJs3_gBJx4E0daYeqagqI5kMv8yAndcST7x1fc298hryy4Sb5PmA6gfsw3UGo2wFIOVrKNOGdvEVwlgY9gh0XcWwCQnRCh31lca_S76TUbJV3sknFYDaMwpMrDsH=s1024" width="80" height="50" alt="Ali Hashim Tarar"/>
Replace Image URL with your desire URL
Download News Tikcer Full Code Script ,Click on Download Button Below
