Showing posts with label Widgets Blogger. Show all posts
Showing posts with label Widgets Blogger. Show all posts

Wednesday, October 30, 2019

- October 30, 2019

Cara Mudah Menambahkan Widget Followers Blog

Widget Followers Blog Blogger

Widget Followers blog merupakan sebuah widget blog blogger yang di sediakan oleh google (blogger), dimana widget tersebut menampilkan profil atau identitas dari pemilik akun google. Pada widget ini mempunyai fitur yang anda bisa sesuaikan letak penempatanya pada situs blog anda sendiri, seperti halnya menambahkan widget pada sidebar blog maupun di footer blog dan lain sebagainya.

Dengan menambahkan widget atau plugin bawaan blogger tersebut tentu akan membuat situs blog anda menjadi mudah berinteraksi dengan pengikut blog atau penggemar blog yang anda kelola, Selain itu juga situs blog anda akan mendapatkan berbagai manfaat.

Apa saja yang dapat di peroleh dengan menambahkan widget followers?.

Manfaat memasang widget followers pada blog blogger

  • Menggunakan fitur ini dapat memberikan kemudahan yaitu dapat memungkinkan pengunjung pada situs blog anda terhubung langsung dengan anda sebagai admin situs blog tersebut.
  • Anda juga akan mendapatkan keuntungan untuk meningkatkan trafik dari hasil penayangan atau kunjungan pada situs blog anda.
  • Jika pengunjung blog anda menyukai konten maka mereka dapat mengikuti atau memfollow blog anda.
  • Dan memperindah tampilan situs blog

Jadi Penggunaan widget followers ini dapat memberikan kontribusi yang lebih bagi situs blog anda, maka pada kesempatan ini saya admin blog ini akan memberikan tips cara mudah menambahkan widget followers di blog blogger dan perhatikan tutorial singkatnya di bawah berikut ini;

Cara Membuat Widget Followers

1. Masuk ke dashboard blogger


2. Lalu pilih menu tata letak


3. Kemudian pilih dan tambahkan gadget


4. Selanjutnya akan muncul pop-up halaman jendela baru
5. Gulir ke bawah dan pilih gadget yang bertuliskan Pengikut


6. Bila anda sudah klik gadget widget nya maka akan muncul lagi pop-up halaman widget followersnya dan langsung saja klik menu tombol "simpan", Untuk lebih jelas penerapan nya perhatikan contoh gambar di bawah seperti berikut ini;


Nah, bagaimana,mudah bukan?? jika anda sudah lakukan seperti yang sudah di jelaskan diatas maka buka atau lihat blog dan lihat hasilnya.

Itulah penjelasan singkat dari tutorial cara mudah membuat ata menambahkan widget followers di blog blogger bila ada kekukarangan dalam penyajian tutorial artikel nya harap dimaklumi, kritik dan saranya silahkan sampaikan pada kolom komentar yang sudah tersedia dibawah artikel ini.

Semoga bisa bermanfaat selamat berkunjung salam blogger...

Friday, October 18, 2019

- October 18, 2019

Cara Mudah Menyembunyikan Widget Sidebar Blog

Seperti yang telah kita ketahui bersama bahwa banyak sekali situs yang menyediakan layanan untuk membuat blog gratis diantaranya adalah ada blogger(blogspot), wordpress, webly, dan yang lain lainya pokok nya banyak entar sahabat blogger cari di google penelusuran. Namun pada kesempatan kali ini, saya akan membahas bagaimana cara menyembunyikan widget sidebar blog khususnya blog blogger(blogspot).

 
Widget Sidebar Blog

Sebelum membahas lebih jauh tentang cara tersebut ada baiknya saya juga menjelaskan sedikit mengenai widget yang ada pada sidebar blog. Blog pada dasarnya tidaklah lengkap tanpa ada widget sidebar yang merupakan salah satu bagian dari blog blogger itu sendiri yang mana bisa menampilkan widget popular posts, label posts,latest posts,dan lain-lain sebagainya.Selain dari itu juga blog menjadi lebih menarik.

Namun hal demikian masih ada juga blog yang tidak menggunakan nya, malahan menghapus nya atau menyembunyikan agar tidak tampil di halaman beranda (home) blog nya dan halaman posts pages nya, maka selanjut nya akan saya share langkah dan tutorial menghilangkan nya ke sahabat blogger semua siapa tau ada yang ingin merubah tampilan blog nya menjadi berbeda dari tampilan awal template blog blogger milik anda.

Jadi untuk menerapkan kan nya ke blog sangat gampang dan mudah sekali, tinggal anda ikuti cara nya dengan tutorial lengkap dalam artikel ini yang akan saya paparkan di bawah secara singkat dan langkah-langkah nya sebagai berikut;

Cara Menyembunyikan Widget Sidebar Blog

1. Masuk ke dasbor blogger
2. Pilih menu tema
3. Klik tombol Edit HTML
4. Lalu klik dimana saja pada area kode dan tekan tombol Control + F atau Command + F pada keyboard pc(laptop) untuk membuka kotak pencarian di sudut kanan atas jendela kode dan tuliskan <div id='sidebar-wrapper'> kemudian tekan tombol Enter untuk mencari.

5. Jika sudah ketemu kode nya cari lagi kode <b:includable id='main'>
6. Salin dan tempelkan kode <b:widget cond='!data:view.isHomepage'id=HTML2' locked='false' title=" type='HTML'/></b:section></b:if>
7. Terakhir simpan tema dan lihat hasilnya

Keterangan:

Jikakalau widget nya masih muncul berarti cara yang saya bagikan di artikel ini tidak belaku lagi atau tidak berfungsi lagi namun anda bisa ulangi lagi dengan mencari <div id widget… pada sidebar seperti cara di atas kemungkinan akan hilang juga.


Nah..itulah tadi tutorial singkat yang bisa saya sampaikan kritik dan saran tinggalkan jejak untu berkomentar di bawah postingan artikel ini terimakasih banyak salam blogger.

Saturday, October 5, 2019

- October 05, 2019

Cara Membuat Persentase Scrollbar di Blog Blogger

Membuat Persentase Scrollbar

Bagi anda yang sudah mempunyai sebuah blog pastinya menginginkan tampilan blognya lebih indah lagi agar enak di pandang para pengunjung blog anda maupun anda sendiri.

Jadi dalam kesempatan kali ini saya akan menshare beberapa kode CSS dan HTML/Java Script yang bisa menjadikan scrollbar pada bilah samping kanan blog anda berbeda dengan sebelum nya.

Namun jika anda berminat menggunakan kode nya nanti setelah di uraikan atau di jelaskan langkah penerapan nya di bawah.

Nah sebelum melangkah lebih jauh lagi maka saya jelaskan sedikit tentang kode tersebut kalau kode nya sudah di pasang ke template blog dan fungsi dari kode itu adalah pada saat scroll di gulir ke atas ataupun kebawah maka akan muncul sebuah efek  yang di sebut persentase (persentase scrollbar).

Untuk lebih jelas mengenai cara membuatnya simak dan pahami langkah dan tutorial nya berikut ini;

Cara Membuat Persentase Scrollbar di Blog Blogger:

1. Masuk ke dasbor blogger
2. Pilih menu tema
3. Klik tombol Edit HTML
4. Lalu klik dimana saja pada area kode dan tekan tombol Control + F atau Command + F pada keyboard pc(laptop) untuk membuka kotak pencarian di sudut kanan atas jendela kode dan tuliskan ]]></b:skin> kemudian tekan tombol Enter untuk mencari.
5. Salin dan tempelkan kode CSS atau HTML/Java Script di bawah tepat diatas kode ]]></b:skin> berikut ini kodenya;

#scroll {
display: none;
position: fixed;
top: 0;
right: 17px;
z-index: 500;
padding: 3px 8px;
background-color: #2D2DFF;
color: #FFFFFF;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2D2DFF;
}
Keterangan;
  • Angka yang diberi tanda warna merah 17px ganti dan sesuaikan jarak antara efek presentase scrollbar dengan scrollbar bilah samping blog anda.
  • Kode warna yang diberi tanda warna blue(biru) #2D2DFF ganti sesuai selera warna favorit anda untuk efek scrollbar presentase nya.
  • Pada kode warna #FFFFFF anda ganti dengan warna sesuai pilihan hati untuk angka pada efek presentase scrollbar nya.
6. Langkah selanjutnya Kembali lagi ke kotak pencarian di sudut kanan atas jendela kode dan tuliskan </head> kemudian tekan tombol Enter untuk mencari jika sudah ketemu salin dan tempelkan kode <div id='scroll'></div> dibawah kode </head> nya.
7. Dan langkah terakhir kembali cari lagi kode </body> dan salin kode html/javascript dibawah lalu tempelkan tepat di atas kode </body> nah in kodenya;

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script>
8. Kemudian langsung simpan templatenya


Nah, itulah Cara Membuatnya. Semoga artikel ini dapat bermanfaat bagi sahabat semua. Selamat mencoba dan, Sekian dan terima kasih...

Saturday, September 14, 2019

- September 14, 2019

Belajar Cara Membuat Widget Popular Posts Blogger


Barangkali sahabat blogger mau memperindah tampilan widget yang ada di sidebar blog blogger nya, karena pada kesempatan kali ini kita akan belajar cara membuat widget popular posts dan widget ini sebenarnya sudah banyak yang menggunakan nya.

Tetapi saya share kembali siapa tau diantara sahabat blogger semua berminat ingin merapkan widget tersebut.untuk membuat sidebar blog yang lebih cantik atau keren maka dari itu simak dan pelajari langkah-langkah atau tutorial dibawah.

Agar anda bisa pahami cara penempatan dari kode widgetnya ke template blog milik anda nantinya, perhatikan penjelasan nya berikut ini;

Cara memasang kode widget popular posts blog blogger:

1. Masuk ke dasbor blogger
2. Pilih menu tema
3. Klik tombol Edit HTML
4. Lalu klik dimana saja pada area kode dan tekan tombol Control + F atau Command + F pada keyboard pc(laptop) untuk membuka kotak pencarian di sudut kanan atas jendela kode dan tuliskan ]]></b:skin> kemudian tekan tombol Enter untuk mencari.
5. Salin dan tempelkan kode CSS atau HTML di bawah tepat diatas kode ]]></b:skin> berikut kodenya;
.popular-posts ul{padding-left:0px;counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-right:15px;padding:0.2em 0.5em;counter-increment:popcount;content:counter(popcount);font-size:16px;background:#2b2b2b;color:#fff;position:relative;font-family:georgia;float:left;border:2px solid #ddd;border-radius:15px}.popular-posts ul li{border-bottom:1px dashed #ddd;height:28px}.popular-posts ul li:hover{padding-left:10px;border:2px solid #FFF;background:#FFF}.popular-posts ul li a{text-decoration:none;color:#5A5F63}.popular-posts ul li a:hover{text-decoration:none;text-decoration:none;color:#2b2b2b}.popular-posts .item-thumbnail img{border-radius:100px; border-radius:100px; border-radius:100px;list-style:none}.popular-posts .item-thumbnail img:hover{ border-radius:0px;list-style:none; border-radius:0px}
6. Simpan tema

Friday, September 6, 2019

- September 06, 2019

Belajar Membuat Widget Selamat Datang




Membuat Widget Selamat Datang Di Blog

Inovasi dan kreatif dari seorang design blog begitu banyak di internet salah satu nya widget blog blogger yang bisa kita gunakan untuk menyambut para pengunjung blog selain itu juga bisa memper indah tampilan blog dan biasanya orang menyebutnya widget tulisan selamat datang di blog. Dan seingat saya widget ini dulu sangat populer.

Namun sekarang ini sudah jarang yang menggunakan nya termasuk blog ini juga, itulah sebabnya dalam kesempatan ini saya akan publisasikan nya kembali pada artikel ini siapa tau diantara sahabat blogger semua ada yang berminat ingin memasang widget tersebut pada blog kesayangan nya.

Apakah anda berminat?. Jika iya maka selanjutnya kita akan belajar cara membuat nya dan ikuti tutorial dibawah supaya anda dengan mudah memahami langkah-langkah penerapanya di template blog milik anda sendiri, dan mengenai performa tidak akan membebankan pemuatan pada halaman situs blog anda nantinya karena kelebihan dari fitur nya responsif fast loading.

Berikut langkah dan cara membuat nya simak dan pahami lalu praktekan ke situsnya.

Cara Membuat Tulisan Selamat Datang di Blog Blogger

1. Masuk di Dasbor Blogger
2. Lalu buka halaman menu Tema
3. Kemudian Klik pada tombol Edit HTML
4. Selanjut Klik di mana saja di area kode Tekan tombol [Control + F] atau [Command + F] untuk membuka kotak pencarian di sudut kanan atas jendela kode. kemudian tuliskan kode </head>
5. Tekan tombol Enter untuk mencari, jika sudah menemukan kode </head> lalu salin dan tempel kan kode HTML Java Script di bawah tepat di atas kode </head> atau kode &lt;/head&gt;&lt;!--<head/>--&gt; karena masing-template blog berbeda kode strukturnya nah inilah kodenya;
<script type='text/javascript'>alert("Selamat Datang Di Blog Sederhana IYASEO ID")</script>

6. Jika anda sudah tempelkan kode HTML Java Script widget selamat datang di blog pada templatenya kemudian arahkan kursor mouse anda ke tombol Simpan tema di bagian diatas  dasbor blog blogger anda.

Untuk lebih jelas langkah penerapannya berikut contoh dalam bentuk gambar dibawah ini:





Keterangan;
Ganti tulisan "Selamat Datang Di Blog Sederhana IYASEO ID" dengan tulisan anda.

Nah sampai disini saja belajar membuat widget selamat datang untuk hari ni nanti di sambung lagi pada artikel selanjutnya semoga bisa bermanfaat bagi sahabat blogger semuanya salam blogger.

Wasallam...

Friday, June 21, 2019

- June 21, 2019

Cara Mudah Memasang Widgets Media Sosial Instagram

Cara Mudah Memasang Widgets Media Sosial Instagram

Membuat dan memasang widget media sosial di blog blogger bukanlah sesuatu hal yang sangat sulit. Blog dapat dijadikan salah satu alternatif jika Anda ingin membuat sebuah blog dengan tampilan widget yang keren. dengan adanya blogger anda dapat membuat situsblog sederhana sesuai dengan keinginan anda dengan mudah dan tentunya yang penting gaya dan tampilan yang lebih fresh dengan memasang widget media sosial atau nama popularnya medsos ini.

Tapi sebelunya mungkin anda juga ingin tahu bagaimanakah widget media sosial itu apa? Widget media sosial adalah salah satu fitur blog yang dapat dipasang dan di modifikasi di dalam halaman maupun sidebar sebuah blog.Widgets Khusus di rancang oleh penulis dan para desain blog itu sendiri dari hasil ide penulis blog berupa kode HTML atau CSS untuk widget situs blog.

Sebenarnya saat ini sudah Banyak widgets media sosial keren dan unik yang sering digunakan oleh para Blogger termasuk widget dari pihak ketiga untuk di pasang pada blog mereka, salah satunya yaitu widget media sosial instagram yang sangatlah populer di masa kini. Apa itu Instagram? instagram adalah media sosial yang dibuat oleh seorang pengembang dalam bentuk aplikasi untuk berbagi foto dan video dari ponsel pintar anda. mirip dengan Facebook atau Twitter, pada umumnya setiap orang yang membuat akun Instagram memiliki profil dan feed berita. 

Jika anda memposting foto atau video di instagram.otomatis akan tampil di profil akun instagram anda. Dan pengguna lain yang mengikutimu akan melihat posting tersebut di beranda mereka sendiri. demikian juga anda akan melihat postingan dari pengguna lain yang kamu ikuti. Instagram sekarang semakin hari semakin bertambah jumlah penggunanya apalagi yang suka foto selfie, jadi semakin banyak pula orang yang ingin mempublish hasil jepretannya ke media sosial instagram. 

Nah, sayang sekali jikalau sudah punya situsblog dan instagram alangkah baiknya jika memasang widget media sosial instagram di blog.Namun pada kesempatan kali ini saya akan share bagaimana cara mudah memasang widget media sosial instagram diblog dengan Blogspot (Blogger) karena saya rasa cara memasang dan membuat nya di Blogger lebih mudah dibandingkan dengan yang lainya. Ok sekarang kita langsung saja ke langkah langkah berikut ini; Langkah-langkah Cara Memasang Widget Media Sosial Instagram di Blog;

1. Buka Dasbor Blogger > Tata Letak > klik tombol > Tambahkan Gadget

2. Sekarang salin kode di bawah ini dan letakan tepat di kolom ke widget.

<div id='instafeed'/></div>
<div class='instatitle'><a href="https://www.instagram.com/iyaseo.id">My Instagram</a></div>
<script type='text/javascript'>//<![CDATA[
var feed = new Instafeed({
get: 'user',
userId: 12416933239,
limit:6,
sortBy:'random',
accessToken: '12416933239.8f4c5bf.6efa7f4d647f460b99cb001f06a98a1e',
template: '<li><a href="{{link}}" target="_blank"><img title="? {{likes}}" src="{{image}}" /></a></li>',
resolution: 'standard_resolution'
});
feed.run();
//]]></script>


Agar widget ini bisa menampilkan foto dari feed atau galeri pada akun instagram anda maka anda perlu memasukan kode token dari akun instagram milik anda sendiri bukan orang lain tentunya ya sahabat blogger cara untuk membuat token Akses Instagram Anda dengan mengeklik tombol tautan ini http://www.jetseotools.com/instagram-access-token

Note:
Ganti tulisan berwarna merah dengan kode token akun instagram anda,jika tidak bisa atau tidak berfungsi tutorial di atas setelah diterapkan di blognya maka anda bisa memberikan komentarnya dikolom komentar di bawah