Ide@Pelajar

Cara Membuat Tombol Sederhana Tapi Keren Pada Blog Dengan Button Click

Ideapelajar - Banyak cara untuk mendesain blog atau mendesain postingan agar terlihat menarik dan banyak diminati oleh pengunjung. Button Click ini sangat membantu sekali jika ingin membuat suatu artikel yang mengharuskan DEMO karena dengan Button Click ini juga bisa untuk mempercantik suatu artikel. Button Click ini juga memiliki berbagai warna dan berbagai bentu yang siap pakai.

Button Click atau Tombol ini memiliki beragam warna dan ukuran yang siap untuk menghiasi Postingan pada blogger agan. Ada tiga ukuran dalam Button Click ini , ukuran-ukuran tersebut  Big Size Buttons , Medium Size Button , dan Small Size Button. Dan juga , Button ini memiliki 5 warna yang menarik warna tersebut di antaranya Biru , Hijau , Merah , Ungu , Dan Green Sea.

Berikut adalah cara untuk Membuat Button Click atau Tombol pada Postingan Blogger :

Pastikan agan sudah login di blogger.com

• 1. Selanjutnya agan klik menu Template > Backup terlebih dahulu template anda jika ada kesalahan pada saat pemasangan Button Click.                                                                                      
• 2. Jika Sudah tinggal Edit HTML , lalu cari kode </head> ( Gunakan F3 atau CTRL + F untuk memudahkan pencarian )
• 3. Pastekan kode di bawah ini di atas </head>   

 <!-- Flat UI Buttons By Www.BloggerYard.Com Start -->

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,

600,700,800" rel="stylesheet" type="text/css"></link>

<style type="text/css">

.button {color:white!important; font-family:open sans; margin:10px 10px 

10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;

-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;

-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:

all .4s;-ms-transition:all .4s;-o-transition:all .4s;}

.blue {background: #3498db;border-bottom: 3px solid #226693;}

.blue:hover {background:#2980b9;}

.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}

.green:hover {background: #27ae60;}

.red {background: #e74c3c;border-bottom: 3px solid #922C20;}

.red:hover {background:#c0392b;}

.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}

.purple:hover {background:#8e44ad;}

.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}

.seagreen:hover {background: #16a085;}

.big {font-size:18px; padding:15px 20px;}

.medium {font-size:15px; padding: 10px 15px;}

.small {font-size:12px; padding:8px 10px;}

</style>

<!-- Flat UI Buttons By Www.BloggerYard.Com End -->

• 4. Lalu Klik Simpan Template

• 5. Panggil atau pasang Button Click pada postingan dengan cara  :
• Masuk ke postingan
• Pilih mode Tampilan HTML (bagian atas tampilan menulis/compose). Dan Pastekan kode berikut :

Big Size Button

<a class="button blue big" href="#">Blue Button</a>

<a class="button green big" href="#">Green Button</a>

<a class="button red big" href="#">Red Button</a>

<a class="button purple big" href="#">Purple Button</a>

<a class="button seagreen big" href="#">SeaGreen</a>

Medium Size Buttons

<a class="button blue medium" href="#">Blue Button</a>

<a class="button green medium" href="#">Green Button</a>

<a class="button red medium" href="#">Red Button</a>

<a class="button purple medium" href="#">Purple Button</a>

<a class="button seagreen medium" href="#">SeaGreen</a>

Small Size Buttons

<a class="button blue small" href="#">Blue Button</a>

<a class="button green small" href="#">Green Button</a>

<a class="button red small" href="#">Red Button</a>

<a class="button purple small" href="#">Purple Button</a>

<a class="button seagreen small" href="#">SeaGreen

</a>

• Lalu Klik Publikasikan dan langkah selanjutnya check postingan tersebut.
• Catatan :
• # ganti dengan URL yang ingin dituju
• Ganti TEXT yang berwarna sesuai dengan kebutuhan atau yang ingin agan sampaikan dalam Artikel
• Contoh penerapan pada Tombol Link Order WhatsApp

<div style="text-align: center;"><a class="button seagreen small" href="https://api.whatsapp.com/send?phone=6281329XXXXXX&amp;text= %0AAssalamu'alaikum.%20Halo%20Admin" target="_blank"><b>ORDER SEKARANG</b></a></div>

 

Read more » Label : Tips Ngblog

Cara Membuat Foto atau Gambar di Blogger Mobile Friendly

Langsung saja berikut caranya untuk mengubah tampilan foto / image pada Blogger agar mobile friendly dengan tetap mempertahankan tampilan desktop :

1. Buka Blogger.com, login dengan akun Blogger Teman-Teman dan meluncur ke Thema ya Teman-Teman

2. Pilih Edit Thema, eits, jangan lupa untuk lakukan Backup Thema ya, jaga-jaga kalau tidak berhasil,

kita bisa mengembalikan Thema ke posisi terakhir sebelum diubah-ubah untuk mengubah tampilan image / foto.

3. Cari dan temukan kode html

]]></b:skin>

untuk memudahkan pakai CTRL + F dan paste kode tersebut

4. Opsi Pertama Copy dan Paste Kode dibawah ini tepat sebelum kode html poin 3

.mobile.post-body img{width:100%!important;height:auto!important;}

5. Setelah itu Simpan Tema dan lihat perubahannya

Jika belum ada perubahan coba ke langkah Nomor 6

6. Opsi Kedua bisa jadi ada html lain yang fungsinya mirip dengan poin 4 (post body image), dan akhirnya logic di html nya menjadi bentrok, kita akan ubah fungsi Post Body Imagenya dengan cara di bawah ini

7. Cari dan temukan kode

.mobile.post-body img,

jika yang ditemukan

.mobile.post-body img {max-width:100%}

tidak apa-apa Teman-Teman, kita akan mengubah kode sumber yang ada di dalam tanda kurung kurawal, isi dari tanda kurung kurawal bisa jadi berbeda yang ditemukan oleh Teman-Teman, karena mungkin beda Tema beda juga kode sumbernya.

8. Ganti yang ada dalam tanda kurung kurawal dengan

width:100%!important;height:auto!important;

sehingga nanti menjadi

.mobile.post-body img{width:100%!important;height:auto!important;}

9. Lanjut pilih Simpan Tema, lalu cek foto pada post tertentu yang Teman-Teman punya apakah

sudah berhasil?

Sumber :
https://www.syaffi.com/2019/11/cara-mengubah-tampilan-foto-gambar-di-blog-agar-mobile-friendly-secara-otomatis.html

Read more » Label : blog, tips, Tips Ngblog, Tutorial

CARA KOLABORASI ADMIN ATAU PENULIS DI BLOGGER

Read more » Label : Tips Ngblog, Tutorial

Cara Membuat Laman Polos Tanpa Sidebar dan Footer di Blog

Memiliki laman atau pages tunggal pada blogspot kelihatannya sedikit sulit dan memang blogspot tidak menyediakan fungsi ini secara defult. Namun kita bisa membuatnya tanpa harus merubah kode HTML.

Sebelum kita buat. Mungkin ada yang bertanya, untuk apa laman atau halaman polos pada blog dibuat? Jawaban setiap orang pasti berbeda, namun pada dasarnya dengan laman polos tanpa sidebar dan footer di blogspot, akan memberi kita ruang berkreasi lebih jauh.

Gimana? Tertarik? Kita akan membuatnya dalam dua versi. Versi dari template bawaan blogger dan template dari Pihak ketiga atau Kostum Template. Template dari pihak ketiga kadang kala telah mengalami banyak perubahan, sehingga script yang kedua memungkinkan cara ini berfungsi.

Kita mulai saja. Silahkan dipilih mana yang sesuai dengan template Anda.

• 1. Script Buat Laman Polos Tanpa Sidebar dan Footer Untuk Template Blogger.
• <style type="text/css">
  /*satu halaman penuh dikostumisasi oleh blogoooblok.blogspot.com*/
  .column-left-outer{
  display: none !important;}
  .column-right-outer{
  display: none !important;}
  .fauxcolumn-inner{
  display:none !important;}
  .column-right-inner{
  display: none !important;}
  .footer-outer {
  display: none !important;}
  .blog-pager{
  display:none !important;}
  .post-footer{
  display:none !important;}
  .author{
  display:none !important;}
  .post-labels {
  display:none !important;}
  .feed-links{
  display:none !important;}
  .comments{
  display:none !important;}
  .column-center-outer {
  width:910px!important;}
  .column-center-inner {
  width:100%!important;}
  .blog-posts {
  width:100%!important;}
  </style>
• 2. Script Buat Laman Polos Tanda Sidebar dan Footer untuk Kostum Template.
• <style type="text/css">
  /*satu halaman penuh dikostumisasi oleh blogoooblok.blogspot.com*/
  #sidebar-wrapper {
  display: none !important;}
  #footer-wrapper {
  display: none !important;}
  .blog-pager{
  display:none !important;}
  .post-footer{
  display:none !important;}
  .author{
  display:none !important;}
  .post-labels {
  display:none !important;}
  .feed-links{
  display:none !important;}
  .comments{
  display:none !important;}
  .footer-outer {
  display:none !important;}
  #main-wrapper {
  width: 100%!important;
  float: left;
  margin: 0;
  .post {
  width:100%}
  </style>

Read more » Label : Tips Ngblog, Tutorial

Cara Menghilangkan Diberdayakan Oleh Blogger Dalam 1 Menit

Cara Menghapus Diberdayakan Oleh Blogger Dalam 1 Menit – Untuk blogger baru tentunya mengolah dan memahami fitur serta tampilan pada blog terutama untuk platform blogspot pasti belum maksimal karena pasti ada elemen yang tidak diinginkan seperti navigasi kurang lengkap, tampilan kurang menarik atau template yang tidak seo responsif.

Perlu diketahui jika anda memang memutuskan untuk terjun ke dunia blogger maka mau tidak mau anda harus memahami dunia blogger, contoh anda harus bisa mengolah artikel, memaksimalkan cara menjaring visitor, mengolah tampilan template seperti html, css, dan javascript.

Banyak kendala seorang blogger pemula yakni salah satunya tidak bisa mengedit tampilan dan template blog karena memang kode template sangat membingungkan bagi sebagian pemula. Untuk belajar mengedit template ini ada solusi memperbaiki template blog dengan inspect elemen.

Kadang ada tampilan template yang tidak sesuai dengan kemauan anda, contohnya yakni tulisan powered by blogger/diberdayakan oleh blogger. Memang rasanya jika ada tulisan tersebut blog kita terlihat tidak professional, maka dari itu sebagian blogger ingin menghapus kode tersebut agar terlihat lebih professional.

Kode powered by blogger ini biasanya terdapat dibawah halaman blog, didekat elemen rss atom dan kolom komentar. Nah untuk menghapus kode tersebut ada beberapa cara, terserah anda ingin memilih cara yang mana. Sudah dipastikan bahwa cara ini 100% work.

Cara Menghilangkan Diberdayakan Oleh Blogger
removed powered by blogger

Cara Pertama :

• Masuk ke dashboard blogger anda.
• Klik Menu “Template” dan klik edit html.
• Temukan dan cari kode ]]></b:skin> dengan ctrl+f (cari) pada template blog.
• Copy kode berikut #Attribution1 {height:0px;visibility:hidden;display:none} dan paste tepat di atas kode ]]></b:skin>.
• Kemudian simpan template dan lihat hasilnya dengan me refresh blog anda dan gulir kebawah, cari tulisan powered by blogger dan jika sudah tidak ada berarti kode tersebut telah hilang.

Cara Kedua :

• Klik menu “Template” dan klik lagi edit html.
• Cari kode <b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’> dengan ctrl+f.
• Nah, jika sudah ketemu pada ubah kode locked=’true’ menjadi locked=‘false’.
• Jika sudah maka kodenya akan jadi seperti ini <b:widget id=’Attribution1′ locked=‘false’ title=” type=’Attribution’>.
• Simpan template.
• Masuk ke menu “Tata Letak” kemudian hapus widget “atribusi powered by blogger”.
• Terakhir simpan tata letak kemudian lihat hasilnya dengan refresh blog anda. Jika hilang maka cara menghilangkan powered by blogger ini berhasil.

Cara Ketiga :

• Masuk ke menu “Template”.
• Kemudian cari di kolom pencarian (ctrl+f) “Attribution”.
• Klik enter
• Kemudian hapus kode dari <b:widget sampai </b:widget> 
• kemudian simpan template dan reload halaman blog anda dan cari kode tersebut. Jika sudah hilang berarti cara menghilangkan powered by blogger ini berhasil.

Cara Keempat

• Ini merupakan cara tergampang dari keempat cara yang saya tuliskan.
• Cukup ganti template bawaan blogger dengan template hasil download di sumber lain seperti gooyabitemplate, arlina, btemplates dan lain sebagainya.
• Jika sudah diganti reload halaman blog dan gulir kebawah maka tulisan powered by blogger akan hilang.
• Selesai.

Gampang kan?, saya aja bisa masak anda tidak bisa? Hehehe pilih cara yang menurut anda paling gampang.

Catatan : Jika ketiga cara diatas masih belum bisa menghilangkan kode atribusi powered by blogger mungkin itu tergantung template agan-agan. Biasanya kode tersebut ada pada template bawaan blogger saat anda baru pertama kalai membuat blog, ketika anda download template dari sumber lain dan kemudian anda memasangnya ke blog anda biasanya kode tersebut akan menghilang dengan sendirinya.

Dengan kata lain jika anda tidak ingin repot-repot menghapus atribusi powered by google, coba ganti template bawaan blogger dengan template dari sumber lain seperti gooyabitemplate dan btemplates maka saya jamin tulisan tersebut akan menghilang dan anda bisa ngeblog dengan lebih professional.

Itulah beberapa cara menghilangkan diberdayakan oleh blogger yang bisa anda lakukan untuk menghilangkan kode atribusi yang menggangu tersebut, semoga artikel ini bermanfaat untuk anda teman-teman blogger terutama blogger baru. Sekian, terima kasih atas kunjugannya.

Sumber : https://dewailmu.id/cara-menghilangkan-diberdayakan-oleh-blogger/ Read more » Label : Tips Ngblog, Tutorial

MEMBUAT MENU DROPDOWN MELAYANG DAN KEREN

Langsung saja pada langkah-langkah pembuatan MENU DROPDOWN KEREN otomatis ini :

• Langkah pertama, Anda mesti login ke blogger dengan akun Anda
• Pilih blog yang ingin anda modifikasi TAB MENU nya
• Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
• Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
• ----------------------------------------------- */
  #top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeMA5sP3AIecdEDnhZWSEqxZ92tEr_EQiTOV-roqzSa76U_lDli1VbKnbN7BHnH75D8GUJxEU_bzyIgGL7eaLQMXSINFYLwHNoh9B4hNOQPa3LzJjmDs30Pc_1eXTveJRshIH8rjRalnW/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
  #topbar{width:980px;height:40px;margin:0 auto}
  #top{width:100%}
  #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
  #top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
  #top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyIy3n10RlQpPIfC1UFwbYAY_mr9xYZaP_27aPa7sn6K_3dkPifGcAvBM9ppFSeTimcQdusgL9mazAtryHLtFA6n70dgbownUPBiU_kgs1vAtsA7-zPSGCo6uuEqAMllxm1e3rxHhdz1E/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
  #top li{float:left;position:static;width:auto}
  #top li ul,#top ul li{width:170px}
  #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
  #top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
  #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
  #top li:hover ul,#top li.hvr ul{display:block}
  #top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
  #top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
  #top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
  #top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
  #top li:hover a span,#top li:hover a.arrow span{color:#f1c822}
  
  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  .clearfix{display:inline-block}
  #inner{padding-top:40px;}
  #fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
  #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
  * html, * html body{overflow-y:hidden;height:100%;}
  * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
  * html #fixedinner{margin-right:17px;}
  * html #fixed {position:absolute;}
• Untuk mencoba-coba silakan atur warna dan ukuran Font atau hover sesuai keinginan pada element yang diblok warna biru, merah, hijau dan ungu diatas.
• Kemudian cari kode <div class='header-outer'> atau <div id='header-wrapper'> . Pilih salah satu
• jika sudah ketemu, pastekan kode di bawah ini di bawah kode  <div class='header-outer'> atau <div id='header-wrapper'> 
  <div id='fixed'>
  <div id='fixedinner'>
  <div id='top-wrapper'>
  <div id='topbar'>
  <ul id='top'>
  <li><a href=‘http://ideapelajar.blogspot.com/'><span>Welcome</span>Homepage</a></li>
  <li><a href=‘http://ideapelajar.blogspot.com/'><span>This is</span>About Us</a></li>
  
  
  <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
  <ul>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 1</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 2</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 3</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 4</a></li>
  </ul>
  </li>
  
  
  <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
  <ul>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 1</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 2</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 3</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 4</a></li>
  </ul>
  </li>
  
  
  <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
  <ul>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 1</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 2</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 3</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 4</a></li>
  <li class='hr'/>
  <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 5</a></li>
  </ul>
  </li>
  
  
  </ul>
  <br class='clearit'/>
  </div>
  <div style='clear:both;'/>
  </div>
  </div></div>   
   
•  Selanjutnya ganti warna biru sebagai link sobat, warna hijau sebagai Menu, warna orange sebagai keterangan menu dan warna merah sebagai sub menu.
•  Jika sudah, pratinjau dahulu. apabila sudah pas. klik simpan template
•  Selamat, blog agan memiliki menu dropdown yang keren. :D
•  Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :/* Horyzontal Droupdown menu

Read more » Label : Tips Ngblog