Home Posts filed under Widget
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Wednesday, December 27, 2017

Cara Membuat 5 Style Subscribe Box dibawah Postingan Blogger

Comment
Membuat 3 Style Subscribe Box dibawah Postingan Blog



Subscribe Box atau biasa kita sebut juga kotak berlangganan, biasanya dipasang di pop up ataupun di sidebar website.

Nah kali ini saya akan membagikan tutorial membuat sebuah kotak berlangganan dibawah postingan blog...

....Kan biasanya subscribe box ini diletakkan di sidebar, tapi lain yang ini.

Untuk fitur widget ini saya bagikan 3 jenis style dan silahkan pilih yang menurut anda cocok untuk dipasang di blog anda.









Membuat Subscribe Box dibawah Postingan Blog


  • Login ke Blogger.com
  • Masuk ke menu Tema > Edit HTML
  • Cari </head>, paste kode CSS dibawah ini tepat diatasnya, pilih salah satu ya sob


Style 1 

<style type='text/css'>
/* Subscribe Box */
#subscribe-box{background-color:#ffe4ad;margin:20px 0 0 0;padding:20px;overflow:hidden;border:8px solid #ebd099}
#subscribe-box h4{color:#827459;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}
#subscribe-box .emailfield{margin:auto;text-align:center;}
#subscribe-box .emailfield form {margin:0;}
#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px}
#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}
#subscribe-box .emailfield .submitbutton{background-color:#f8695f;color:#fff;margin:0;font-size:14px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e0594f;color:#fff;}
</style>


Style 2 

<style type='text/css'>
/* Subscribe Box */
#subscribe-css {margin:0;padding:0;display:block;position:relative;}
.subscribe-wrapper {background:#4b5f65;width:520px;height:180px;color:#fff;font-size:14px;font-family:&#39;Open Sans&#39;;line-height:20px;padding:20px 20px 10px 20px;text-align:center;border-radius:3px;}
.subscribe-wrapper p {margin:0;margin-bottom:30px;}
.subscribe-form {clear:both;display:block;margin:10px 0;overflow:hidden;}
form.subscribe-form {clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden;}
.subscribe-css-email-field {background:#39484d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyEuj4PBmymFcGQXfgYhQ5icB8IfVZSMnLf6P89Do_u49EhVbnsIZh4-c8Jp8N522vdcj_df_l20TmK06e3uA3OCSlJ9GGbAn9VE7S63-DE_gyd6Vq7hEAM1cvijQl0DagFG3E25VHAtW/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}
.subscribe-css-email-button {background:#30abd5;color:#fff;cursor:pointer;font-weight:700;
padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;}
.subscribe-css-email-button:hover {background:#0099cc;color:#fff;}
</style>


Style 3 
<style type='text/css'>
/* Subscribe Box */
#subscribe-box{background:#f4f5f6;display:block;overflow:hidden;margin:auto 20px;padding:30px 20px;border-radius:3px}
#subscribe-box p{font-size:15px;margin:0 auto 20px auto;color:rgba(255,255,255,.7);padding:0;text-align:center}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield form{margin:0}
#subscribe-box .emailfield input{background:#fff;padding:12px;color:#7f8c8d;font-size:14px;width:70%;float:left;text-indent:10px;border:0;border-radius:3px}
#subscribe-box .emailfield input:focus{color:#222;outline:none;}
#subscribe-box .emailfield .submitbutton{background:#e74c3c;color:#fff;width:28.1%;margin:0 0 0 10px;font-size:14px;letter-spacing:.5px;cursor:pointer;border:0;text-indent:initial;text-transform:uppercase;border-radius:3px;transition:all .3s}
#subscribe-box .emailfield .submitbutton:focus,#subscribe-box .emailfield .submitbutton:hover{background:#c0392b;color:#fff;}
@media screen and (max-width:640px){
#subscribe-box .emailfield input{width:100%;float:none;text-indent:10px;}
#subscribe-box .emailfield .submitbutton{width:100%;margin:15px auto 0 auto;}}
</style>


Style 4 

<style type='text/css'>#material-subscribe:hover{opacity:1}#material-subscribe:hover{box-shadow:0 6px 20px #AFAFAF}#material-subscribe{transition:all .4s ease-in-out;padding:20px 30px 30px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:auto;max-width:400px}
.buttonx{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}
.buttonx:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.buttonx.red{background: #d21919;width: auto;font-size: large;}
a:active{color:#22A65A;text-decoration:none;transition: all 0.25s linear;}a:hover{color:#444;text-decoration:none;transition: all 0.5s ease}
input.inputfield,.input-field textare{background-color:transparent;border:none;border-bottom:1px solid  #000000;border-radius:0;outline:none;height:3rem;width:100%;font-size:1rem;margin:0 0 15px 0;padding:0;box-shadow:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;transition:all .3s}
.input-field input:focus,.input-field textarea:focus{border-bottom:1px solid #d21919;box-shadow:0 1px 0 0 #2DCC70}
.input-field{position:relative;margin-top:1rem}
.input-field label{color:#9e9e9e;position:absolute;top:0.8rem;left:0;font-size:1rem;cursor:text;-webkit-transition:.2s ease-out;-moz-transition:.2s ease-out;-o-transition:.2s ease-out;-ms-transition:.2s ease-out;transition:.2s ease-out}
.input-field label.active{color:#d21919;font-size:0.8rem;-webkit-transform:translateY(-140%);-moz-transform:translateY(-140%);-ms-transform:translateY(-140%);-o-transform:translateY(-140%);transform:translateY(-140%)}
@media screen and (max-width:684px){
.buttonx.red {    width: auto;}
#material-subscribe{auto}}
</style>


Style 5 

<style type='text/css'>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#039;&#039;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
</style>


Sekarang kalian tinggal masukkan HTML ini kedalam postingan, caranya :
  • Cari kode ini <data:post.body/>
  • Bisa juga dibawah iklan, sesuaikan dengan kondisi template anda
  • Letakkan Html dibawah ini tepat dibawah kode tadi

Style 1 

<div id='subscribe-box'>
<h4>Berlangganan via email</h4>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='IDFeedAnda'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
<div style='clear:both;'/>


Style 2 

<div id='subscribe-css'>
<div class='subscribe-wrapper'>
<p>Sign up here with your email</p>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=UrlAnda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='IDFeedAnda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe Now'/></form>
</div>
</div>
</div>
Style 3 

<div id='subscribe-box'>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}' onfocus='if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}' type='text' value='Email address'/>
  <input name='uri' type='hidden' value='IDFeedAnda'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>

Style 4 

<div id='material-subscribe'>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="input-field">
<input class="inputfield" name="email" type="email" required="" class="validate"/> <label for="email" data-error="wrong" data-success="right">Email</label> <input type="hidden" value="IDFeedAnda" name="uri"/><input type="hidden" name="loc" value="en_US"/> <button class="buttonx red waves-effect waves-light" type="submit"/><i class="fa fa-envelope"></i> Subscribe</button> </div>
</form>
</div>
<div style='clear: both;'/>
Ganti Feed anda dengan url Feedburner blog anda.


Style 5 

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='IDFeedAnda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>


  • Save Template


Cukup sekian tutorialnya dan terima kasih, semoga bermanfaat dan bisa work tentunya di blog sobat...

Sunday, December 24, 2017

Memasang Syntax Higlighter/Kotak Script di Blogger

Comment
Memasang Syntax HIglighter/Kotak Script di Blogger


Di post ketiga ini akan berbagi tutorial cara memasang syntax highlighter di postingan blogger, kalau bingung biasanya disebut kotak kode atau sering disebut juga dengan syntax highlighting, prism syntax highlighter, pre code parse atau pre code seleksi.

Nah fungsinya fitur ini yang pastinya agar kode terlihat jelas dalam postingan dan tentunya agar dapat memudahkan pencopyan kode.

Syntax Highlighter ini cocok buat anda yang suka berbagi kode program


Memasang Syntax Highlighter


  • Login ke Blogger.com
  • Pilih Menu Template > Edit HTML, Kemudian
  • Cari kode "" ]]></b:skin>> "" atau "" </style> ""
  • Setelah ketemu, copy dan pastekan kode Css dibawah ini tepat diatas kode yang tadi dicari


/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}


  • Sekarang Save Template


Kemudian bagaimana penerapan syntax highlighter ini???


<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
Kode anda disini......</code></pre>


<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kode anda disini......
</code></pre>


<pre data-codetype="JavaScriptku" title="JavaScript"><code class="language-markup">Kode anda disini......
</code></pre>



<pre data-codetype="JQueryku" title="JQuery"><code class="language-markup">
Kode anda disini......
</code></pre>

  • Silahkan masuk ke postingan baru
  • Sekarang tinggal Masuk ke tab HTML pada postingannya
  • Selanjutnya Paste HTML pembungkus scriptnya
  • Jangan lupa untuk memilih salah satu pembungkus sesuai dengan kode isinya

Ingat!!parse kode terlebih dahulu agar kode bisa tampil dengan rapih

Oke cukup tutorial kali ini, kalau bingung bisa tanya dikolom komentar, semoga tutorial ini dapat bermanfaat..

Happy Blogging....

Saturday, December 23, 2017

Membuat Lightbox Image Tanpa Jquery(CSS Only)

Comment
Membuat Lightbox Image Tanpa Jquery(CSS Only)


Yeah akhirnya post yang kedua juga setelah kemarin postingan pertama saya di blog ini.

Oke, nah post kedua ini agak bingung nyari ide untuk postingan tapi saya pilih lightbox saja karena kemarin baru saya pasang lightbox di template ini dan rasanya tambah cool gitu deh...

Nah LightBox ini tanpa Jquery, Ingat!! tanpa Jquery. Jadi yang saya pakai ini hanya memakai CSS saja tanpa javascript atau lainya.

Silahkan Masuk ke Dashboard Blogger, pilih menu Template > Edit HTML

Cari kode "" .post-body img "" dengan tekan Ctrl + F, biasanya ada lebih dari 1 yang menurut anda benar letaknya




Dan paste kode ini didalam

user-select: none;pointer-events: none;background: #fff;height: auto;max-width: 98%;margin-bottom: 2px;padding: 10px!important;box-shadow: 0 0 0 1px rgba(0,0,0,0.030), 0 7px 20px 1px rgba(0,0,0,0.10);

.post-body img{paste disini}
jadinya seperti ini 

.post-body img {user-select: none;pointer-events: none;background: #fff;height: auto;max-width: 98%;margin-bottom: 2px;padding: 10px!important;box-shadow: 0 0 0 1px rgba(0,0,0,0.030), 0 7px 20px 1px rgba(0,0,0,0.10);}


Lalu simpan template

Untuk melihat hasil, buka salah satu postingan anda, perhatikan di pinggiran image atau gambar terdapat shadow atau bayangan dari gambar, dan gambar terlihat lebih rapi.

Terima kasih, Good Luck!!

Subscribe to: Posts (Atom)