GBLOGKRI

2 Style Subscribe Widget Yang Bagus Untuk Blogger

2016-10-26T20:30:00.002+09:00

Selamat malam kawan, Jumpa lagi dengan saya di GblogKri.
Kali ini saya akan membagikan sebuah Widget yang sangat bagus untuk anda yaitu Subscribe Widget.

Subscribe widget ini sangat cocok untuk blog anda yg memasang tema elgan atau minimalis, karena tampilan Subscribe Widget ini yang juga elegan dan minimalis sehingga enak untuk di pandang.

Oke langsung saja kita ke step-stepnya.

Style 1- Dark Background With Social Icon

VIEW DEMO

Masuk ke akun Blogger anda Blogger Dashboard Template Edit HTML

Cari Kode <head> Lalu Kopi pastekan kode di bawah ini setelah kode <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Cari Lagi Kode </style> Dan Kopy pasteka kode berikut tepat di atas kode </style>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Save Template.

Sekarang kita membuat widget dengan pergi ke Tataletak/Layout Add A Gadget Add Html/Javascript.

Kopi pastekan kode berikut di kotak Html.

<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>

</div>
</center>
<br/><br/><br/>

Note*
Ganti semua Tag # dengan url social media anda.
Ganti Your-User-Name dengan Username feedburner anda.
Lalu Save Widget Dan Lihat Hasilnya.

Style 2- Colorful Widget With Name Box

VIEW DEMO

Copy kode berikut di atas kode </style>

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
.creadit a{color: #A7A6A6; float: right; font-size: 8px

Save Template.

Buat Widget Seperti Step di atas tadi dan Pastekan kode berikut.

<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>

Note*

Ganti Semua Your Name dengan Name Feedburner anda.
Save Widget.

Selesai.

Oke sekian tutorial kali ini tentang 2 Style Subscribe Widget Yang Bagus Untuk Blogger semoga membuat blog anda semakin unik dan enak untuk di kunjungi, Happy Blogging.!

Cara Membuat Blogger Popular post dengan auto Numbering

2016-10-26T13:18:00.002+09:00

Selamat siang pengunjung GblogKri Semoga harimu menyenangkan. kali ini saya akan membagikan Cara Membuat Blogger Popular post dengan auto Numbering.

Blogger populer post widget adalah bagian paling penting dari sebuah blogger. Widget ini membantu pengunjung Anda untuk menemukan apa yang paling sering dilihat atau paling dibahas dalam blog anda. Dengan menggunakan widget ini Anda bisa membuat pengunjung anda suka akan blog anda.

DEMO

Sekarang mari kita lanjut ke step-stepnya.

Atur Widget Popular Post anda seperti gambar di bawah Ini.

Sekarang pergi ke Template>Edit HTML>Dan Cari Kode </style> Lalu kopi pastekan Kode Css di bawah ini Tepat Sebelum Kode </style>

/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

Simpan Template anda dan lihat Hasilnya.

Oke itulah tutorial kali ini yang berjudul Cara Membuat Blogger Popular post dengan auto Numbering Semoga bermanfaat bagi anda, sampai jumpa lagi di postingan berikutnya dan Happy Blogging.!

Cara Membuat Mashable Mashshare Social Sharing Widget Untuk Blogger

2016-10-25T21:02:00.001+09:00

Selamat Malam... Kini Telah hadir Mashable Mashshare Social Sharing Widget Untuk Blogger v2 dengan tampilan baru dan bergaya, dengan total shares counter - hal ini telah dimungkinkan berkat Sharrre , Anda dapat mengunjungi situs web mereka untuk lebih jelasnya.
Oke langsung saja ke step-stepnya...

Pergi ke Blogger »Template» dan Edit HTML

Cari Kode <div class='post-footer-line post-footer-line-1'> Lalu Copy kode di bawah ini tepat setelah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='social-div'><div id='sharrrrre'><div data-title='SHARES' id='shareme'/></div>
<div style='display: inline-block; margin-bottom: 20px;'>
<a class='mbafacebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'> <img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>Share on Facebook</a>
<a class='mbatwitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'> <img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>Share on Twitter</a></div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 mbagoogle-plus' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a>
<a class='socialshare2 mbalinkedin' data-title='Linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'></a>
<a class='socialshare2 mbastumbleupon' data-title='Stumble-Upon' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a>
<a class='socialshare2 mbapinterest' data-title='Pin it' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a></div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div></div></div></b:if>

Mungkin anda tidak dapat mencari Kode <div class='post-footer-line post-footer-line-1'> Jadi Carilah Yang Mirip Dengan itu,Dan juga anda bisa memasang Dimana Saja.

Cari Kode ]]> </ b: skin> Lalu Kopi Pastekan Kode berikut tepat di atasnya.

#sharrrrre{float:left;margin:-10px 5px 0 0;padding:15px 15px 15px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJc4GzUGhnPGJuFo8-lLxX2k4XseyEIUeNJJkXU6q6apqlXeqV5R5RNV51idkFuEmD9gNn7E3rGgXT3Hia-N_Cy9QVLX0N6QbK_rabHWcUaw5N8rewb7E6QHr3Qk6RuTa1pFeRIGW_8J4/s1600/diagonal.png) no-repeat 100% 50%}.sharrre .count,.sharrre .share{display:block;text-align:center;text-decoration:none;width:100px;padding:0}.sharrre .count{font-weight:700;position:relative;line-height:40px;color:#7fc04c;font-size:50px}.sharrre .share{color:#666;font-size:10px;height:10px}.social-div a{text-decoration:none!important;display:inline-block}.social-div a img{display:inline-block;width:auto;height:auto;margin:0 8px 0 -5px;vertical-align:middle}#socialshare,.share-toggle{display:inline-block;text-align:center}#socialshare{vertical-align:middle;font-size:16px;padding:14px 20px 15px;font-family:Raleway;margin-right:5px;-webkit-font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility}#socialshare:active{padding:15px 20px;margin-bottom:-1px}#socialshare:hover{opacity:.9}.share-toggle{position:relative;cursor:pointer;color:#fff}#socialshare,.share-toggle a{color:#fff;text-decoration:none}.share-toggle,.social-div{vertical-align:middle}#expand-social,#social-expand{display:inline-block;vertical-align:middle;position:relative}#expand-social{height:53px}#social-expand{top:0;left:0}.expand{box-shadow:0 3px 0 0 #c5bebe;background:#cdcccc;position:relative;width:40px;height:40px;line-height:40px;font-size:200%}.expand:active{box-shadow:0 1px 0 0 #c5bebe;height:41px;margin-bottom:-1px}.expand:hover{opacity:.9}.expand-minus{display:none}.socialshare2{width:50px;height:50px;display:inline-block}.socialshare2:active{height:51px;margin-bottom:-1px}.socialshare2:hover{opacity:.9}.mbafacebook{background:#507bbf;box-shadow:0 3px 0 0 #4671b5}.mbafacebook:active{box-shadow:0 1px 0 0 #4671b5}.mbatwitter{background:#63cef2;box-shadow:0 3px 0 0 #57c4e9}.mbatwitter:active{box-shadow:0 1px 0 0 #57c4e9}.mbagoogle-plus{box-shadow:0 3px 0 0 #43454c;background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzDUiqTssw3KnlwQqy0i_IJH8biR7WR4TaYIaDu4Ggpxei2OXmUEWulnfgJGB20yveFUR_UHpYuQmiS8blrNrtYd2HTuOXa7q7QNMXOOyybD32mCQLWIAKrTsa97mt5iiesEAoRj-Up4/s20/g+.png) no-repeat center}.mbagoogle-plus:active{box-shadow:0 1px 0 0 #43454c}.mbalinkedin{box-shadow:0 3px 0 0 #12a4db;background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibz7Sv3RSNlzFtDVhmbFOE_v1fu73F63Y_BA-1iL6yjjkU5PWoRhB8OPZH7xggBWfFxRq6zkM2pNGrFQfqnpQgJgIOJ0I9h0HmDl-jKbIUuzJfe0NI7VMNIBKky3n71ZQ3m3RBo30Uixw/s20/in.png) no-repeat center}.mbalinkedin:active{box-shadow:0 1px 0 0 #12a4db}.mbapinterest{box-shadow:0 3px 0 0 #e85756;background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1CsF1xTk48cLEZBXJA-uWuD8Jc2Q7i7qwK-zW2MqzhOP2wMpadaBtbf_Wi70FUafLWT9K15MTWNkWHYahOMIMm0Mn8IfHaH0_Ra2zVsDWQHbWZ28gYqudntiiZkhZOvn2BwOSrUxRgA/s20/pinterest.png) no-repeat center}.mbapinterest:active{box-shadow:0 1px 0 0 #e85756}.mbastumbleupon{box-shadow:0 3px 0 0 #f5a635;background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlKrYujMYf1tAEAMAVDG3Ji1BXIQSjcfCpK2YYSOzeRXFx57hR4ynCNbS7pukPLHOL-oo8TSvxZFTR5p2CpXxduqBZO96fX_rtdJL5gd-gtHAQbHb3hBx6j-8UkaEtZm10Gaeg1tptcM/s20/stumble.png) no-repeat center}.mbastumbleupon:active{box-shadow:0 1px 0 0 #f5a635}

Save Template Anda

Cari Lagi Kode </ body> Dan Kopi Pastekan Kode berikut Tepat di atas Kode </ body>

<script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
<script type='text/javascript'>
 $(function(){    
    $(&#39;#shareme&#39;).sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true,
    stumbleupon: true,
    linkedin: true,
    pinterest: true
  },
  enableTracking: true,
      enableHover: false,
});
  });
</script>
<script type='text/javascript'>
function toggle(d){$(&quot;#&quot; + d).animate({width:&#39;toggle&#39;},400);}
$(document).ready(function(){$(&quot;#social-expand&quot;).click(function(){$(&quot;.expand-plus&quot;).toggle();$(&quot;.expand-minus&quot;).toggle();});});
</script>

Save Template Anda Dan Lihat Hasilnya

Kata-kata akhir
Berharap Anda menyukainya. Dan Mengungkapkan pikiran Anda dengan meninggalkan komentar. Sampai Jumpa Di Postingan berikutnya, Terima kasih!

Social Content Locker Untuk Blogger

2016-10-24T23:16:00.001+09:00

Sebelum Anda melanjutkan untuk membuat kustomisasi,disarankan untuk backup template blog Anda jika ada yang tidak beres.

Pada kesempatan kali ini saya akan membagian bagaimana cara membuat Social Content Locker Untuk Blogger/website.
adapun nanti ada kesalahan pada saat mempraktekannya sebaiknya anda berkomentar agar bisa saya bantu.

DEMO

Oke langsung saja Ke step-stepnya.

Login ke akun Blogger Anda, pergi ke Blogger dashboard> Template > Edit HTML

Cari Kode <head> Dan Copy Pastekan kode di bawah ini di bawah kode <head> Atau di atas kode </head>

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

Cari Lagi Kode </head> Dan copy pastekan Kode di bawah ini di atas Kode </head>

<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style-ver2.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script-ver2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({

    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},

    twitter: {url:"http://twitter.com/menightfury"},
    facebook: {url:"https://www.facebook.com/bloganalyzer.nightfury"},
    google: {url:"https://plus.google.com/+BloganalyzerBlogspot"},

    text: {
      header: "Like us To Unlock This Content",
      message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
    },

    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

Selesai Klik Save Template.

Costumization

Ada tujuh tombol yang tersedia untuk mengunci konten,

Facebook Like : facebook-like
Facebook Share : facebook-share
Google Plus One : google-plus
Google Plus Share : google-share
Kericau : twitter-tweet
Twitter Follow :twitter-follow
Linkedin Berbagi : linkedin-share

Anda dapat menerapkan sejumlah tombol untuk blog Anda. Anda bahkan dapat mengubah urutan tombol ini di order:[] pilihan.

Pisahkan setiap tombol dengan koma (,).

Themes

Glass : Glass

Flat : Flat

Dandyish : Dandyish

Secrets : Secrets

Starter : Starter

Cara Penggunaan

Copy Kode di bawah ini ke dalam Mode HTML pada saat anda mau membuat artikel

<article class="socialLocker">
 <div class="to-lock" style="display:none;">

  -- Isi dengan kontent anda --

 </div>
</article>

Fitur Terbaru

Facebook Sharer

Untuk bisa menggunakan fitur ini anda harus punya App Id facebook anda.
saya anggap anda sudah punya ya.

kode facebook sharer :

facebook: {
  like:{
    url:"https://www.facebook.com/SopanKehidupan/" //ganti dengan url fanspage anda
  },
  share:{
    appId:1234567890, //ganti dengan app id anda,
    url:"http://gblogkri.blogspot.com/", //ganti dengan domain yg di daftarkan app id facebook
  },
},

Hapus Kode

like:{
    url:"https://www.facebook.com/bloganalyzer.nightfury/" //replace with your Facebook url
  },

Apabila tidak ingin menampilkan fb like.

Yap selamat mencoba, semoga sukses and Happy Blogging.!

Cara Membuat Google Custom Search Di Blogspot

2016-10-24T19:56:00.001+09:00

Selamat Sore Kawan, Kali ini saya akan membuat postingan yg berjudul "Cara Membuat Google Custom Search Di Blogspot" nah sesuai judul yaitu membuat GCSE tampil di dalam blog kita.
langsung saja simak tutorialnya.

Intro
Demo
Html
Css
Script
Finish

Penjelasan
Apa itu Google Custom Search Engine ?
Bagi yang belum tau akan saya beri penjelasan tentang pengertian atau arti dari Google Custom Search Engine.
Google Custom Search Engine atau Google CSE adalah search engine yang di program untuk sebuah situs atau blog.

Langsung Saja ke step-step pembuatan GCSE

Step 1 : Membuat Google Custom Search Engine

Buka Google Custom Search

Masuk akun Google Anda »Klik Search Engine Baru»isi formulir»Klik Create
Setelah Anda berhasil membuat GCSE Anda, Anda akhirnya dapat menambahkannya ke situs Anda dengan mengklik Get code

Selanjutnya, salin kode dan lanjutkan ke Step # 2

Step 2 : Menambahkan Kode ke blog anda.

Bualah Halaman Dengan Judul Search atau terserah anda, mau di beri judul apa.

Di tab Html Pastekan kode script anda yang didaptkan di step 1
Demo
Untuk Demo Anda Bisa coba menggunakan pencarian di blog ini.

Html

Seharusnya kode anda seperti ini.

<script>
  (function() {
    var cx = 'YOUR UNIQUE ID GIVEN BY GCSE';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'https:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Ganti Kode <gcse:search></gcse:search> Dengan <gcse:searchresults-only></gcse:searchresults-only>

Selanjutnya publikasikan halaman yg di buat. (pastikan urlnya seperti ini /p/search.html)

Selanjutnya ke blogger template » Edit HTML

Cari kode yang Mirip seperti kode di bawah ini

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

setelah ketemu, Ganti /search dengan url halaman anda (misal : /p/search.html)

Maka jadinya seperti ini :


<div id='search-box'>
<form action='/p/search.html' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Klik Save Template

Css
Tidak ada css diperlukan
Script
Tidak ada Script Di perlukan
Finish
Jika Anda Telah berhasil mengintegrasikan GCSE ke situs Anda, Anda akan melihat bahwa setiap kali Anda mencoba untuk mencari, Anda akan diarahkan ke Halaman Pencarian yang Anda buat. Itu dia!

Saya harap Anda dapat memahami artikel ini.
Silakan tinggalkan komentar! Jangan ragu untuk meminta bantuan jika Anda menghadapi masalah mengintegrasikan GCSE! Happy Blogging.

Pure CSS Pop Up Email Subscription Box Untuk Blogger

2016-10-24T07:39:00.000+09:00

Halo semua, ini adalah postingan pertama saya mengenai blogger, kali ini saya akan membagikan cara membuat Pure CSS Pop Up Email Subscription Box Untuk Blogger, Simak saja ya...

Intro
Demo
Html
Css
Script
Finish

Introduction
Ya, seperti judulnya itu adalah Pure CSS Pop Up Email Subscription Box tidak hanya untuk Blogger tetapi untuk hampir semua jenis platform selama Anda memiliki akses ke feedburner. widget ini adalah kombinasi dari kotak berlangganan posting email saya sebelumnya dan pop up widget sederhana dan Cool yg di buat dengan CSS. Pastikan untuk mengikuti langkah-langkah untuk membuatnya bekerja.

Features

Lightweight CSS

Improved HTML

Optimized Images

SEO friendly

Fully Customizable

Flat Design

Responsive

Requirements

FontAwesome (?)
Demo
Tidak Ada Demo

Html

Go to Blogger » Template » and Edit HTML
dan copy code di bawah ini sebelum code </body>

<div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>Subscribe to Newsletter</h3>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=GblogKri&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
<input name='uri' type='hidden' value='GblogKri'/>
</form></div></div></div></div>

Untuk Mengaktifkan widget ini, Anda perlu menambahkan code yang akan berfungsi sebagai tombol atau handler untuk popup.
Tambahkan kode berikut di mana saja Anda inginkan untuk ditampilkan. (Misalnya dalam menu nav Anda)

<a href='#signup'>Signup</a>

Css

Copy and paste Code di bawah ini sebelum atau di atas code ]]></b:skin>


.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block;line-height:50px;text-align:center;font-size:24px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uSsXhiSQKCSPdKaTzpFvzYSaiJqybUOUAXAHMka-tjnJdz8wLA05iLoAl0Gic_LY7lV9uJHRQzGbnkt7kQzAhRJ5NXkfmiIgZ_SoI2HdIAFggPOZOk27o0D_ECkj7tokUw-Npi5TjMU/s1600/bg.png) no-repeat;padding:20px;margin:0 -20px -20px;height:40px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}

Script
Tidak ada Script Di perlukan
Finish

Replace GblogKri with your feedburner url.

Dibutuhkan beberapa penyesuaiyan agar sesuai dengan kebutuhan anda.
Saya harap anda Menyukainya :)..Oke Until next time. Happy Blogging! :)

GBLOGKRI

2 Style Subscribe Widget Yang Bagus Untuk Blogger

Cara Membuat Blogger Popular post dengan auto Numbering

Cara Membuat Mashable Mashshare Social Sharing Widget Untuk Blogger

Social Content Locker Untuk Blogger

Cara Membuat Google Custom Search Di Blogspot

Penjelasan

Demo

Html

Css

Script

Finish

Pure CSS Pop Up Email Subscription Box Untuk Blogger

Introduction

Features

Requirements

Demo

Html

Css

Script

Finish