Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts
Sunday, August 6, 2017
Cara Pasang Widget Alexa Rank Dengan Mudah
Cara Pasang Widget Alexa Rank Dengan Mudah
Cara Pasang Widget Alexa Rank Dengan Mudah
masih ada blogger yang bingung bagaimana cara mendapatkan widget alexa ? memang sekarang alexa merubah desainnya jadi widgetnya susah di dapatnya.
Tapi sekarang akan membagikan jalan pintas untuk mendapatkan widget alexa dengan menklik link dibawah gambar ini
 | ||||
| Klik disini untuk mendapatkan Widget Alexa |
nah udah pada tahukan Cara Pasang Widget Alexa Rank Dengan Mudah demikianlah sya bahas alexa ini sampai ketemu lagi..
download file now
Sunday, March 26, 2017
Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobile
Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobile
Tutorial Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobil
Widget yang tidak bisa di sembunyikan di Blog versi Mobile biasanya seperti Widget penghitung jumlah Online pengunjung, tombol Share dan masih banyak lagi.
Biasanya ini terjadi pada Template yang tidak Resvonsipe. Jadi jika di sembunyikan dengan kode "mobile=yes/no" maka tidak akan berhasil, dan yang ada akan menjadikan Template menjadi error saat disimpan.
Berikut Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobile dibawah ini:
- Copy kode dibawah ini
- Setelah itu Login ke Blogger.com, langsung menuju menu Template/Edit HTML, cari kode JavaScript yang tidak bisa disembunyikan sebelumnya.
- Jika sudah menemukan kodenya, langsung pastekan.
Contoh:
Available link for download
Wednesday, March 1, 2017
Widget Popular Post Untuk Blogger
Widget Popular Post Untuk Blogger
Popular post merupakan suatu widget pada blog untuk mengetahui post mana yang paling sering di kunjungi terbanyak,jika kalian berkunjung ke blog,biasanya terdapat popuar post di pinggir atau di bawah post. Maka dari itu saya akan membagikan cara untuk menambah atau pun mengganti widget popular post.
> Menambah Widget Popular Post
- Masuk ke Blog - Tata letak - Tambah Gadget/Widget - Entri Popular - Save.
- Masuk menu blog lagi - Template - Edit HTML
Pilih dulu salah satu style yang kalian suka
STYLE 1
- Letakkan script/Kode dibawah ini diatas Kode
</body>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js/>
<script type=text/javascript>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,'...'));
});
</script>
- Masukan css ini kedalam template, misalnya di atas
]]></b:skin> atau diatas</style> .
.sidebar .PopularPosts ul { padding:0; margin:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }
.sidebar .PopularPosts .item-thumbnail { width:130px; height:130px; border-right:5px solid #fff; margin:0 10px 0 0 !important; position:relative; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts ul li { float:left; margin-bottom:5px; max-height:130px; min-width:250px; overflow:hidden; }
.sidebar .PopularPosts ul li:first-child { background:#D9EDF7; }
.sidebar .PopularPosts ul li:first-child + li { background:#F2DEDE; }
.sidebar .PopularPosts ul li:first-child + li + li { background:#DFF0D8; }
.sidebar .PopularPosts ul li:first-child + li + li + li { background:#FFEEBC; }
.sidebar .PopularPosts ul li:first-child + li + li + li + li { background:#E0E0E0; }
.sidebar .PopularPosts .item-title { font:13px ' Oswald' ,sans-serif; text-transform:uppercase; padding:10px 5px 10px; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { font:13px " Times New Roman" ,Times,FreeSerif,serif; padding-right:5px; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
- Save template.
- Letakkan script/Kode dibawah ini diatas Kode
</body>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js/>
<script type=text/javascript>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,'...'));
});
</script>
- Masukan css ini kedalam template, misalnya di atas
]]></b:skin> atau diatas</style> .
.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; }
.sidebar .PopularPosts ul li { float:left; max-height:130px; min-width:250px; position:relative; }
.sidebar .PopularPosts .item-thumbnail::after { color:rgba(255,255,255,0.63); content:counter(popularcount,decimal); counter-increment:popularcount; font:70px ' Oswald' ,sans-serif; list-style-type:none; position:absolute; left:5px; top:-5px; z-index:4; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0.3); bottom:0; content:" " ; height:100px; width:100px; left:0; right:0; margin:0 auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }
.sidebar .PopularPosts .item-thumbnail { width:100px; height:100px; margin:0 10px 0 0 !important; position:relative; }
.sidebar .PopularPosts .item-thumbnail:hover:before { display:none; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; padding-right:0 !important; height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:13px ' Oswald' ,sans-serif; text-transform:uppercase; padding:0 5px 10px; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { font:13px " Times New Roman" ,Times,FreeSerif,serif; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
.sidebar .PopularPosts .item-content { padding:5px 0; border-bottom:1px dotted #dedede; overflow:hidden; height:100px; position:relative; }
- Save template
Available link for download
Monday, February 27, 2017
Custom Popular Post Widget Counter
Custom Popular Post Widget Counter
Custom Popular Post Widget Counter
This popular post widget will make your blog look nice wed help vistors easily navigate you posts.
Login to your blogger Dashboard>>click on Template>>>Edit Html.
On the blog Template click on it and click ctrl+f on windows and cmd+f on Mac
First step=Adding javascrip to before </bod> tag.
Copy the code below, and paste it before the </body> tag in your template.
<script src=http://ift.tt/nkWzpa
ajax/libs/jquery/1.7.1/jquery.min.js
type=text/javascript/>
<script type=text/javascript>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$(#PopularPosts1).find(img).each
(function(n, image){
var image = $(image);
image.attr({src : image.attr(src).replace
(/sBd{2,4}/,s + tbn)});
image.attr(width,tbn);
image.attr(height,tbn);
});
});
ajax/libs/jquery/1.7.1/jquery.min.js
type=text/javascript/>
<script type=text/javascript>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$(#PopularPosts1).find(img).each
(function(n, image){
var image = $(image);
image.attr({src : image.attr(src).replace
(/sBd{2,4}/,s + tbn)});
image.attr(width,tbn);
image.attr(height,tbn);
});
});
//]]></script>
Note : Back up your blog template first.
Customizing the thumbnail size.
Simply change the highlited digit 150, to any number of your choice.
In this, our thumbnail size will be 150x150px.
Step two adding the css style code.
Simply chose any of your choice style code and paste it before the ]]></b:skin>
Style One
/***** Sidebar Popular Posts *****/
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family: "Oswald",sans-serif;
height: 130px;
font-weight: bold;
list-style: none !important;
overflow: hidden;
padding: 0px !important;
position: relative;
margin: 2px;
border: 0;
width: 100%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
line-height: normal;
font-family: "Oswald",sans-serif;
padding: 10px 0px 5px 10px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family: "Oswald",sans-serif;
height: 130px;
font-weight: bold;
list-style: none !important;
overflow: hidden;
padding: 0px !important;
position: relative;
margin: 2px;
border: 0;
width: 100%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
line-height: normal;
font-family: "Oswald",sans-serif;
padding: 10px 0px 5px 10px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;
Style Two
/***** Sidebar Popular Posts - Style 1 *****/
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family:Oswald,Open
Sans,Helvetica Neue,Arial,Tahoma,sans-
serif;
height: 130px;
list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 48%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family:Oswald,Open
Sans,Helvetica Neue,Arial,Tahoma,sans-
serif;
height: 130px;
list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 48%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;
}
Now got to your blog Layout and change you popular post settings according to the Image Below.
Tags: WMF
October 30, 2016 at 06:55PM
Open in Evernote
Available link for download
Sunday, February 26, 2017
Add Floating Email Subscription Widget to Your Blog
Add Floating Email Subscription Widget to Your Blog
Email Subscription Widget Blogger.
Get more Email subscribers to your blog, with this stylish Emails subscription widget made with pure css code.
This will help increase your blog load speed.
1. Login to your blogger account.
Click on Template, Edit Html, click on the blog Template, click on the ctrl+f key on you keyboard for windows and cmd+f on Mac.
Features Of The Sidebar Subscription Box.
1) Fully Responsive Design.
2) simple and Super easy to customize the colors and text content.
3) Social Profiles Links in the bottom.
4) Beautifu hover effect, with font awesome icons.
5) Loads faster, because it is made up of pure CSS code.
Now search for the <head> rage and paste the font awesome code below it.
<link href=http://
http://ift.tt/YLkwbr
awesome/4.3.0/css/font-awesome.css
http://ift.tt/YLkwbr
awesome/4.3.0/css/font-awesome.css
rel=stylesheet/>
Save your template and go to layout click on the Add Gadget option. A new pop up window will appear, click on the + sign on the right side of add a HTML code.
Copy the code below and paste it inside the box that appear, leave the title box at the top empty.
Dont click on the save button yet
<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://
www.TwistBlogger.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 26px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: normal;
color: #FFF;
text-align: center;
border: 0;
background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#twist-blogger-sbox-v2 p {
font-size: 15px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#twist-blogger-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform
.button:hover {
background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
background: #FF5959;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy {
background: url
(http://ift.tt/Pr3JSs
kYVqV9JYDHY/VPMC8jPKTGI/
AAAAAAAAA28/zxv0TYRIZe4/s1600/
Lock-twistblogger.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#twist-blogger-sbox-v2 .social_profiles
a:hover {
color: #FFF;
background-color: #FF5959;
border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
color: #000000;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #FFFFFF;
border-radius: 50px;
border: 2px solid #2D2D2D;
width: 15px;
height: 15px;
line-height: 0;
font-size: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline"> Join Our
Newsletter</div><div
class="email_icon"><i class="fa fa-
envelope"></i></div>
<p> Get All The Latest Updates
Delivered Straight Into Your Inbox For
Free!</p>
<div class="rssform">
<form action="http://
http://ift.tt/ttr54b"
method="post" target="popupwindow"
onsubmit="window.open(http://
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://
www.TwistBlogger.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 26px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: normal;
color: #FFF;
text-align: center;
border: 0;
background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#twist-blogger-sbox-v2 p {
font-size: 15px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#twist-blogger-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform
.button:hover {
background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
background: #FF5959;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy {
background: url
(http://ift.tt/Pr3JSs
kYVqV9JYDHY/VPMC8jPKTGI/
AAAAAAAAA28/zxv0TYRIZe4/s1600/
Lock-twistblogger.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#twist-blogger-sbox-v2 .social_profiles
a:hover {
color: #FFF;
background-color: #FF5959;
border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
color: #000000;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #FFFFFF;
border-radius: 50px;
border: 2px solid #2D2D2D;
width: 15px;
height: 15px;
line-height: 0;
font-size: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline"> Join Our
Newsletter</div><div
class="email_icon"><i class="fa fa-
envelope"></i></div>
<p> Get All The Latest Updates
Delivered Straight Into Your Inbox For
Free!</p>
<div class="rssform">
<form action="http://
http://ift.tt/ttr54b"
method="post" target="popupwindow"
onsubmit="window.open(http://
http://ift.tt/ttr54b?
uri=legendyechny.blogspot, popupwindow,
scrollbars=yes,width=550,height=520);ret
urn true">
<input type="text" name="email"
placeholder="Enter your email address...">
urn true">
<input type="text" name="email"
placeholder="Enter your email address...">
<input type="hidden"
value=" legendtechny.blogspot" name="uri">
<input type="hidden" name="loc"
value="en_US">
<input value="Join Now"
class="button" type="submit">
</form>
</div>
value="en_US">
<input value="Join Now"
class="button" type="submit">
</form>
</div>
<div class="bottom_lock_policy">We
Respect Your Privacy | <a href="http://ift.tt/2eoQuT6">Get This Widget</a> </
div>
<div class="social_profiles">
<div class="social_profiles">
<a href=" http://ift.tt/eIlFV0
Legendtechny.blogspot " target=_blank rel=nofollow
title="Join on Facebook"><i class="fa fa-
facebook"></i></a>
facebook"></i></a>
<a href=" http://www.twitter.com/
Chi_obinna" target=_blank rel=nofollow
title="Follow on Twitter"><i class="fa fa-
twitter"></i></a>
twitter"></i></a>
<a href=" http://plus.google.com/
+ostani " target=_blank rel=nofollow
title="Follow on Google+"><i class="fa fa-
google-plus"></i></a>
google-plus"></i></a>
#FF5959
title="Follow on Pinterest"><i class="fa fa-
pinterest"></i></a>
</div>
pinterest"></i></a>
</div>
</div>
How to customize the css code.
1. Change this 3 highlighted #FF5959 color code to any code of your choice.
2. Change the three highlited social profile URL to your own URL.
<a href=" http://plus.google.com/
+ostani " target=_blank rel=nofollow
<a href=" http://www.twitter.com/
Chi_obinna
<a href=" http://ift.tt/eIlFV0
Legendtechny.blogspot
3. Edit the bold highlited texts with any text of your choice, except my blog name replace it with your blog name.
...After Customizing The CSS Code, Now Click On Save Button.
Tags: WMF
October 30, 2016 at 08:15PM
Open in Evernote
Available link for download
Friday, February 24, 2017
Cara Membuat Widget Berdasarkan Label di Blog
Cara Membuat Widget Berdasarkan Label di Blog
Tutorial Cara Membuat Widget Berdasarkan Label di Blogger
Widget berdasarkan label memang sangat penting untuk suatu Blog, apalagi Blog khusus share Game Android, tentu sangat dibutuhkan.
Biasanya Blog khusus Game Android akan menyediakan label posting khusus "Game Android Paling di Cari, Game Android Terpopuler" dan masih banyak lagi.
Untuk Blog yang bukan khusus share game juga bisa, terserah bebas mau Blog yang tidak berkategori seperti Blog saya saat ini juga sangat bisa.
Cara Memasang Widget Berdasarkan Label di Blogspot dibawah ini:
- Copy terlebih dahulu kode Widget dibawah ini
Ganti "k0k0h" dengan alamat Blog kalian masing-masing.
Ganti "Game%20Android%20Terpopuler" dengan nama label/kategori kalian (jangan dihapus %20 jika nama label kalian hanya satu kata).
"var numposts = 5" adalah jumlah posting yang ditampilkan, jadi ganti no 5-nya saja.
- Kemudian menuju menu Tata Letak.
- Klik Tambahkan Gadget.
- Setelah itu tambahkan HTML/JavaScript.
- Terakhir pastekan kode Widget yang kalian copy diatas tadi didalam kolom yang sudah disediakan, klik Simpan.
Available link for download
Thursday, February 23, 2017
Related Post Widget Blogger
Related Post Widget Blogger
Related Post Widget Blogger
The related post widget helps, you display your old blog post just under the footer of any of your new blog post, helping Reader read your old and important articles with was.
Dont want to right a book down here, lets get to Bussiness.
Read the instructions below to begin.
Login to your blogger account>> click on Template>>Edit Html.
Using your key board press ctrl+f to search for the </head> tag, copy and past the code below above it.
<!-- Related Posts widget with Thumbnails Code Before Head Start--> <b:if cond=data:blog.pageType =="item"> <script type=text/javascript> //<![CDATA[ var borelatedTitles=new Array();varrboTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];borelatedTitles[rboTitlesNum]=entry.title.$t;try{thumburl[rboTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[rboTitlesNum]=d}else thumburl[rboTitlesNum]=thumburl[rboTitlesNum]=http://ift.tt/2foojrg}if(borelatedTitles[rboTitlesNum].length>35)borelatedTitles[rboTitlesNum]=borelatedTitles[rboTitlesNum].substring(0,45)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==alternate){relatedUrls[rboTitlesNum]=entry.link[k].href;rboTitlesNum++}}}}function removeDuplicate_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=borelatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}borelatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabel_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==findcurrentposturl)||(!(borelatedTitles[i]))){relatedUrls.splice(i,1);borelatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((borelatedTitles.length-1)*Math.random());var i=0;if(borelatedTitles.length>0)document.write(<h4><span>+titleofrelatedpost+</span></h4>);document.write(<sl class="related-posts-list">);while(i<borelatedTitles.length&&i<20&&i<maxpost){document.write(<ci><a href="+relatedUrls[r]+"><span class="rthumb"><img class="related_img" src="+thumburl[r]+"/></span><p><span class="related-title">+borelatedTitles[r]+</span></p></a></ci>);if(r<borelatedTitles.length-1){r++}else{r=0}i++}document.write(</sl>);relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);borelatedTitles.splice(0,borelatedTitles.length)}//]]></script> </b:if> <!-- Related Posts widget with Thumbnails Code Before Head Ends-->
Now search for <div class=post-footer>, copy the code below and paste it right above this line.
<!-- Related Posts widget with Thumbnails Code Before Post Footer Start--> <b:if cond=data:blog.pageType =="item"> <div id=related-posts> <b:loop values=data:post.labels var=label> <b:if cond=data:label.isLast !="true"> </b:if> <script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7" type=text/javascript/> </b:loop> <script type=text/javascript> var findcurrentposturl="<data:http://ift.tt/2fc04cM var maxpost=6; var titleofrelatedpost="<b>Related Posts</b>"; removeDuplicate_thumbs(); printRelatedLabel_thumbs(); </script> </div> </b:if> <!-- Related Posts widget with Thumbnails Code Before Post Footer Ends-->
How to customize the above code.
Use any text to replace the highlited Related posts text.
Change the highlited number 6, to the number of Post you want it to appear on the widget.
Adding the css part of the code
Search for <b:skin>…. </b:skin> and click on the right pointing arrow to expand, scroll down to locate ]]></b:skin>, paste the below code before or above this code. Hen click on the save button.
/* CSS For related post widget ----------------------------------------------- */#related-posts {float:left;width:101%;}#related-posts sl{margin:0!important;padding:0!important;} #related-posts h4{text-align:center;margin:10px 0px 20px;font:18px Oswald;color:#696868;text-transform:uppercase} .related-posts-list ci{background-color:#fff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:27%;float:left;position:relative;margin:0 3% 3% 0;padding:2%;} .related-posts-list ci:nth-child(3n){margin-right:0 !important;} #related-posts a{color:#696868;font:400 12px Oswald,sans-serif;text-decoration:none;} #related-posts sl ci p{margin-bottom:0;padding-top:1px;}#related-posts.related_img{height:64px;margin-bottom:0;width:64px;object-fit:cover;} .related-title{text-align:center;padding:5px 0px;}.rthumb{float:left;margin-right:10px;}
Nice!!, you have added the related post widget to your blog.
Tags: CH
October 30, 2016 at 10:51PM
Open in Evernote
Available link for download
Friday, February 17, 2017
Cara Menampilkan Dan Menyembunyikan Widget di Blog Versi Mobile
Cara Menampilkan Dan Menyembunyikan Widget di Blog Versi Mobile
Tutorial Cara Menampilkan Dan Menyembunyikan Widget di Template Blog Versi Mobile
Untuk Blog versi Mobile diusahakan jangan terlalu banyak menampilkan Widget-Widget, apalagi Widget itu tidak terlalu penting, karena akan membuat loading dari Blog tersebut akan sangat lama. Jadi berhati-hatilah.
Tapi bukan berarti Widget untuk Template Blog versi Mobile harus tidak ditampilkan sama sekali. Widget yang penting untuk Template Blog versi Mobile menurut saya sendiri adalah, Popular Posts, Recent Post, Random Post dan Widget-Widget yang menampilkan postingan, tapi ingat! Jangan berlebihan.
Maka dari itu saya akan share Tutorial Cara Menampilkan Dan Menyembunyikan Widget di Blog Versi Mobile
Berikut Cara Menampilkan Dan Menyembunyikan Widget di Template Blog Versi Mobile dibawah ini:
- Buka menu Tempalte/Edit HTML
- Cari widget yang mau di sembunyikan atau di tampilkan di versi Mobile, untuk mempermudah pencarian gunakan CTRL F.
- Kemudian copy kode dibawah ini, pastekan di Widget di yang ingin di tampilkan atau di sembunyikan.
Menampilkan
mobile=yes
Menyembunyikan
mobile=no
Contoh:
Untuk menampilkan Widget Blog versi Mobile
Untuk menyembunyikan Widget Blog versi Mobile
Jadi untuk menampilkan dan menyembunyikan Widget di Template Blog versi Mobile adalah hanya dengan menambahkan kode mobile=yes untuk menampilkan dan untuk menyembunyikan ganti yes ke no.
Available link for download
Cara Membuat Widget Tombol Share Melayang di Samping Blog
Cara Membuat Widget Tombol Share Melayang di Samping Blog
Tutorial Cara Membuat Widget Tombol Share Melayang di Samping Blog
Sepertinya saya share postingan Cara Membuat Widget Tombol Share Melayang di Samping Blog ini sudah sangat terlambat, karena di mesin pencari Google sudah sangat banyak, tetapi tidak apa-apa karena disini saya hanya melengkapi postingan saya saja.
Berikut Cara Memasang Widget Tombol Share Melayang di Samping Blog dibawah ini:
- Pertama-tama login ke Blogger.com
- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"
- Copy kode dibawah ini
- Ganti "k0k0h" dengan alamat Blog kalian
- Pastekan didalam kolom yang sudah di sediakan.
- Terakhir klik Simpan.
Available link for download
Saturday, February 11, 2017
Widget Fanspage Facebook Melayang Di Blog
Widget Fanspage Facebook Melayang Di Blog
Menambah widget Like Fanspage facebook tidak lah susah. Hanya beutuh 5 menit untuk menambahkannya. Kalian ingin coba? Tujuannya agar fanspage kita banyak orang yang like. Karena Fanspage kalian nanti akan di tampilkan di blog anda.
Langkah :
> Buka Blog anda.
> Masuk tata letak.
> Tambah gadget/widget.
> HTML/Javascript.
> Copy kode di bawah ini ke Konten. Judul bebas.
<script src=//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslqJVxLDqv_0lelrI5vJmd1WY1UX_W8MDT7Z9mbmc61N9lGOTKxYbIelisA7Be4lmQIcQ4R71cebYmLyxZwqPV24PcHKDQgW85HO-jCO4WyVk5gYHy0HDWfExAtdxe0c7zjW-pFh2uuZ-/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type=text/javascript>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === number) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), =,
options.raw ? value : encodeURIComponent(value),
options.expires ? ; expires= + options.expires.toUTCString() : , // use expires attribute, max-age is not supported by IE
options.path ? ; path= + options.path : ,
options.domain ? ; domain= + options.domain : ,
options.secure ? ; secure :
].join());
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp((?:^|; ) + encodeURIComponent(key) + =([^;]*)).exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type=text/javascript>
jQuery(document).ready(function($){
if($.cookie(popup_facebook_like) != yes){
$(#fanback).delay(7000).fadeIn(medium);
$(#fanclose, #fan-exit).click(function(){
$(#fanback).stop().fadeOut(medium);
});
}
$.cookie(popup_facebook_like, yes, { path: /, expires: 1 });
});
</script>
<div id=fanback>
<div id=fan-exit></div>
<div id=fanbox>
<div id=fanclose></div>
<div class=remove-borda></div>
<iframe allowtransparency=true frameborder=0 scrolling=no src=//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Media-Pengetahuan-235669190196809&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false style=border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;></iframe>
</div>
</div>
Ket : Ganti Tulisan bewarna Merah dengan URL fanspage facebook kalian
> Save
Keyword
- Cara membuat widget Fanspage Facebook
- Cara menambah widget Fanspage Like keren
Available link for download
Sunday, January 22, 2017
Cara Memasang Widget Pengikut di Blog
Cara Memasang Widget Pengikut di Blog
Tutorial Cara Memasang Widget Pengikut di Blog
Karena saya tidak suka basa-basi alias berbicara panjang lebar, jadi langsung saja menuju tutorial Cara Memasang Widget Pengikut di Blog
- Login ke akun blogger.com terlebih dahulu
- Buka Tata Letak
- Klik TAMBAHKAN GADGET
- Klik GADGET LAINNYA
- Klik PENGIKUT
- Atur sesuai selera kalian
- Klik SIMPAN
Available link for download
Subscribe to:
Posts (Atom)