Athharkautsar: widget

Showing posts with label widget. Show all posts

Friday, July 21, 2017

Cara Membuat Tombol Demo dan Download di Blogger

Athhar Kautsar 7/21/2017

Mengingat kematiannya chester bennington yang baru saja terjadi maka saya akan membagikan tombol demo dan download pada artikel ini. //ganyambung ih

Memasang tombol demo dan download yang digunakan pada blog ini sangatlah mudah. Kalian tinggal simpan kode css diatas tag ]]></b:skin> atau </style> dan untuk memanggilnya kalian tinggal gunakan kode html yang nanti saya berikan. Desain tombol ini juga sangatlah simpel. Untuk demonya akan saya berikan dibagian bawah artikel ini.

Cara Membuat Tombol Demo dan Download di Blogger

Tombol ini menggunakan Font Awesome. Jika kalian belum memasang link Font Awesome silahkan simpan kode dibawah ini diatas tag </head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

1. Masuk ke Blogger > Tema > Edit HTML

2. Simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>

/*Button CSS*/
.post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}
.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}
.post-body .button li a{position:relative;display:block;padding:15px;margin:5px;color:#fff;text-align:center;text-transform:uppercase;border-radius:3px}
.post-body .button li a.demo{background:#dda245;}.post-body .button li a.demo:hover{background:#c18e3d;}
.post-body .button li a.download{background:#529cce;}.post-body .button li a.download:hover{background:#4686b0;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

3. Klik simpan template.

Jika kalian ingin menggunakan tombol ini cukup gunakan kode dibawah ini di mode HTML

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#">DEMO</a></li>
<li><a class="download" href="#">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear">
</div>

Jika kalian hanya ingin menggunakan tombol demo saja, kalian tinggal hapus baris kode dibawah ini.

<li><a class="download" href="#">DOWNLOAD</a></li>

Jika kalian hanya ingin menggunakan tombol download saja, kalian tinggal hapus baris kode dibawah ini.

<li><a class="demo" href="#">DEMO</a></li>

DEMO TOMBOL DEMO DAN DOWNLOAD

Jika kalian memiliki permasalahan atau pertanyaan dalam pemasangan widget ini, silahkan berikan komentar di artikel ini. Terimakasih.

Thursday, July 20, 2017

blogger widget

Memasang Search Form di Blogger

Athhar Kautsar 7/20/2017

Pada kesempatan kali ini saya akan berbagi cara memasang search form di blogger. Search form ini sangatlah penting untuk blog, karena jika tidak ada search form pengunjung tidak akan bisa mencari artikel di blog kita. Search Form ini juga sangatlah ringan, jadi kalian tidak perlu khawatir blognya akan menjadi berat. Nah jika kalian ingin melihat demo search form ini silahkan klik tombol dibawah ini.

DEMO

Memasang Search Form di Blogger

1. Masuk ke Blogger > Tema > Edit HTML.
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>

 /*Simple Search Form*/
#searchbtn {background:#0099ff;color:white;padding:10px 20px;border-radius:0 5px 5px 0;border:0 none;font-weight:bold;}
#searchbtn:hover{cursor:pointer}
#searchbox {background: #eee;padding:10px; border-radius:5px 0 0 5px;border:0 none;width:160px;}
#searchbox:focus{outline:none}

3. Silahkan simpan kode HTML dibawah ini dinavbar atau disidebar blog kalian.

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="30" type="text" placeholder="Search"/>
<input id="searchbtn" value="Go" type="submit"/>
</form>

4. Klik simpan temlate!

Jika kalian kesulitan atau mempunyai pertanyaan dalam pemasangan search form ini silahkan berikan komentar di artikel ini, Jika sempat akan saya bantu / balas. Terimakasih.

Wednesday, July 19, 2017

blogger widget

Simple Subscription Widget

Athhar Kautsar 7/19/2017

Pada artikel kali ini saya akan berbagi widget yang sama dengan kemarin, yaitu subscription box atau kotak berlangganan, hanya saja berbeda style-nya. Widget subscription box yang satu ini memiliki style yang sangat simple hanya ada kata pengantar dan form berlangganan.Widget ini direquest oleh salah satu sobat blogger. Jika kalian ingin memasang widget ini silahkan ikuti langkah-langkah dibawah ini. Untuk demonya kalian bisa klik tombol dibawah ini.

DEMO

Simple Subscription Widget

1. Masuk ke Blogger > Tema > Edit HTML
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>

/* Subscribe Box */
.subscribe-wrapper{background:#34495e;color:#fff;margin:0;padding:20px;text-align:center}
.subscribe-wrapper p{margin:0;text-align:left;}
.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:#fff;color:#95a5a6;margin:0 0 15px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:13px}
.subscribe-css-button{background:#43a1a0!important;color:#fff;cursor:pointer;padding:7px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .1s}
.subscribe-css-button:hover{background:#2c3e50!important}

3. Klik simpan template.
4. Masuk ke bagian Tata Letak > Tambah widget di sidebar > Pilih HTML/Javascript
5. Salin lagi kode dibawah ini dan simpan dikolom konten.

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>Jika Anda menyukai Artikel di blog ini, Silakan berlangganan gratis via email.</p>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="YOUR-USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div>

6. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.

Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini. Terimakasih.

Tuesday, July 18, 2017

blogger widget

Membuat Subscription Box Seperti Template eL diablo

Athhar Kautsar 7/18/2017

Pada artikel kali ini saya akan membagikan widget subscription box atau widget kotak berlangganan seperti template eL diablo, untuk demonya kalian bisa lihat di blog demo template eldiablo atau kalian bisa klik tombol demo dibawah ini.

DEMO

Nah jika kalian tertarik untuk memasang widget ini di sidebar blog kalian silahkan ikuti langkah-langkah dibawah ini.

Membuat Subscription Box Seperti Template eL diablo

1. Masuk ke Blogger > Tema > Edit HTML

2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>

/*Subscribe Box*/
  #subscribebox{background:#F8F8F8;padding:20px;}
  .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
  #subscribebox p{color:#888;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:#212121}
  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(0,0,0,0.01);text-align:center;color:rgba(0,0,0,0.4);font-weight:bold}
  .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:#888;-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:#999}
  .subscribe-button:focus{outline:0}

3. Masuk kebagian Tata Letak > Tambah widget di sidebar > Pilih Menu HTML/Javascript.
4. Salin kode dibawah ini dan simpan diatas kolom konten.

<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=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &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>

5. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.

Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini.
Demikianlah tutorial tentang Membuat Subscription Box Seperti Template eL diablo sampai ketemu lagi di artikel selanjutnya.

Tuesday, July 4, 2017

blogger widget

Cara Mengatasi Widget Popular Post Yang Tidak Muncul Atau Error

Athhar Kautsar 7/04/2017

Baru-baru ini saya mengganti template blog saya dengan template Cangcimen (kuaci) dari SeniKode.com, waktu pertama kali pasang, saya merasa sedikit aneh, karena kok ga ada popular post ya dibagian atas?, setelah itu saya otak atik sendiri si widget popular post ini, bahkan saya otak atik template ini sampe berantakan, hehe..

Nah bagi kalian yang mempunyai masalah yang sama dengan saya, yaitu Widget Popular Post yang Tidak Muncul Atau Error saya punya solusinya..

Cara untuk memperbaikinya sangatlah mudah..
Kalian tinggal atur Di menu Paling Banyak Dikunjungi jadi 7 Hari.
Contohnya seperti dibawah ini.

Cara diatas merupakan salah satu cara untuk mengatasi error tersebut, tetapi setelah saya mencari digoogle saya ketemu sama artikelnya mbak lina.

Cara dari mbak lina hanya menambahkan properti CSS kedalam kode ]]></b:skin> atau </style>
dan kode CSSnya bisa dilihat dibawah ini.

CSS.PopularPosts ul li:nth-child(n+4){display:none;}

Kode CSS diatas akan memunculkan 3 entri. Jika kalian mau memunculkan 5 entri, ganti angka 3 tersebut menjadi angka 6. Kuncinya terdapat di atribut :nth-child(n+NOMOR). NOMOR adalah batasan entri yang akan dihilangkan.

Keuntungan memakai cara dari mbaklina adalah kita bisa bebas menentukan menu Paling Banyak Dikunjungi semau kita, menu tersebut bisa diubah jadi 30 hari terakhir, Tahun lalu, dan Semua.

Friday, June 23, 2017

blogger widget

Memasang Widget Social Media Tanpa Font Awesome

Athhar Kautsar 6/23/2017

Di artikel saya yang memasang widget social media ada yang meminta dibuatkan widget social media yang lebih simple atau tidak memakai font-awesome. Jadi pada artikel kali ini saya akan share widget social media tanpa font awesome. //as your wish

Widget ini saya berikan efek hover yang bergerak ke kanan dan kekiri saat mouse berada diatas logo sosial media tersebut (facebook, instagram, twitter, google plus)

Untuk lebih jelasnya silahkan kalian lihat demonya di link yang sudah saya sediakan di bagian bawah artikel.

Tapi saya lebih menyarankan kalian memakai widget sosial media yang memakai font awesome, karena widget tersebut lebih ringan daripada widget sosial media yang tidak menggunakan font awesome

Memasang Widget Social Media Tanpa Font Awesome

1. Masuk ke blogger > Tema > Edit HTML, salinlah kode dibawah dan simpan diatas kode </style> atau ]]></b:skin>

CSS/* CSS SOCMED BY ATHHARKAUTSAR.COM */
.socmed{margin:5px auto;width:255px}
.aa-fb, .aa-tw, .aa-ig, .aa-gp{width:50px;height: auto;background: #fff;border-radius:50%;box-shadow:0px 0px 5px #888888;}
.socmed a{ margin:5px;display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);}
.socmed a:hover, .socmed a:focus, .socmed a:active{-webkit-animation-name: hvr-buzz-out;animation-name: hvr-buzz-out;-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

2. Masuk ke bagian Tata Letak > Tambah Gadget > HTML/Javascript lalu salin dan simpan kode dibawah ini didalam kolom konten.

HTML<div class='socmed'>
  <a title='Facebook' target="_blank" href="#"><img class='aa-fb' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vuS41IrlZrIAzV00d6e9gCOwDuKZlhC01pBDg6-F6lpyNFdkDnkyBLI4AQjZKJ5OjldXRjo1_BmtI-8NxMUOhvTn8scWlYcdkpjKcWsxjvQrD5P2wCDHMeZn9AkS5K07SJNrJ_98LmCS/s1600/fb.png" alt="Facebook" /></a>
  <a title='Twitter' target="_blank" href="#"><img class='aa-tw' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaUFDCRybxgUUQ7RFcX9N0eZ6J8zSBZPIytVpCof-IJ69V2_VI1afLgJg1r8se7ThApeNsPgR6i2NzhwsEPv-mn5cX4WuxMD6y1YQkTBdbtiR22uByqekmei3o8K9FWAD_sb_4eV4f8yH/s1600/twitter.png" alt="Twitter" /></a>
  <a title='Instagram' target="_blank" href="#"><img class='aa-ig' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34bMkY2T7e4ANK3BtnYbyW-UajfOAokUPB8GoSH-7lquOI44TJgm8X9Zs0Ea0u9_ivHNdNpmU2zZImoc_NjVqBZJ5Q4Dxf55Tlsf4Ft2XreemYs08siJ8VZCJqWSPUBl9wEMAUO4pYz7S/s1600/instagram.png" alt="Instagram" /></a>
  <a title='Google Plus' target="_blank" href="#"><img class='aa-gp' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFXDDFSapSIXsc8NV1CnLNypRAPE8UnIPrPhITr_NXl0WvoLgFlEd9_i7ErPfzgSp7AzI2-rDdI4fmU9TdsWiiSO1eNvSuc4c8NaFkZrgAP2bYWm9eSIqXJt6RXtuVLT5No2nIUxiiBbO/s1600/google%252B.png" alt="Google Plus" /></a>
</div>

3. Klik simpan dan lihat hasilnya..

Catatan:
Jangan lupa ganti tanda # dengan link sosmed kalian!

Demo: https://codepen.io/athharkautsar/full/oweEXd/

Cukup sekian, Sampai berjumpa lagi di artikel berikutnya.

Athharkautsar

Friday, July 21, 2017

Cara Membuat Tombol Demo dan Download di Blogger

Cara Membuat Tombol Demo dan Download di Blogger

Thursday, July 20, 2017

Memasang Search Form di Blogger

Memasang Search Form di Blogger

Wednesday, July 19, 2017

Simple Subscription Widget

Simple Subscription Widget

Tuesday, July 18, 2017

Membuat Subscription Box Seperti Template eL diablo

Membuat Subscription Box Seperti Template eL diablo

Tuesday, July 4, 2017

Cara Mengatasi Widget Popular Post Yang Tidak Muncul Atau Error

Friday, June 23, 2017

Memasang Widget Social Media Tanpa Font Awesome

Memasang Widget Social Media Tanpa Font Awesome

Latest Posts

Categories

Popular Posts