Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. 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 4, 2019

- October 04, 2019

Cara Membuat Scrollbar di Blog Dengan Mudah

Membuat Scrollbar di Blog

Memperindah scrollbar di blog mempunyai daya tarik tersendiri selain berfungsi sebagai hiasan yang dapat mempercantik tampilan blog anda dengan menambahkan effect-effect ini dapat membuat ciri khas dari blog kita sehingga pengunjung blog dapat menjadi tertarik dengan blog anda.

Membuat scrollbar effect di blog ini juga tidak terlalu sulit dan terbilang sangat mudah selain itu juga anda bisa merubah warna dari effect dengan kode warna yang sudah tersedia di internet, atau kode di bawah sesuai selera masing-masing bila anda berminat memasang nya di blognya.

Jadi untuk menerapkan cara tersebut cukup dengan menggunakan kode HTML ke template blog yang saya akan uraikan lebih detail dibawah beserta dengan tutorialnya anda hanya simak dan salin kode tersebut ke blog nya nanti setelah di paparkan berikut ini.

Cara Membuat Scrollbar di Blog

1. Masuk di Dasbor Blogger 
2. Buka halaman Template lalu pilih menu Tema
3. Klik pada tombol Edit HTML
4. Klik di mana saja di area kode
5. Tekan tombol [Control + F] atau [Command + F] untuk membuka kotak pencarian di sudut kanan atas jendela kode, kemudian tuliskan kode ]]></b:skin>
6. Tekan tombol Enter untuk mencari, jika sudah anda menemukan kode ]]></b:skin> kemudian salin dan tempelkan kode HTML berikut dibawah tepat di atas kode ]]></b:skin>

/* scrollbar effect */
::-webkit-scrollbar {
width:15px; height:7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba( 106, 53, 42 );
background:#FFE5CC;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba( 205, 59, 28 );
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba( 238, 180, 168 );
7. Kemudian Save Template
Keterangan:
Anda bisa ganti #FFE5CC dengan kode warna yang anda inginkan.
Untuk ukuran ganti lebar scrollbar rubah angka yang sudah di beritanda warna merah width:15px; height:7px

Demikian cara membuat scrollbar di blog dengan mudah. semoga bermanfaat dan terimakasih atas kunjungannya. dan bisa anda memberikan komentarnya dibawah postingan ini. mohon dipahami jikalau ada salah eja dari isi artikel singkat nya wasalam salam blogger.

Tuesday, August 20, 2019

- August 20, 2019

Cara Tambah Widget Komentar Terbaru Pada Sidebar

Tambah Widget Komentar Terbaru Pada Sidebar

Para pemilik blog pasti sudah tidak asing lagi dengan widget yang satu ini. Seperti apakah widget yang di maksud? yaitu widget recent comments (widget komentar terbaru), fungsi dari widget ini adalah menampilkan aktivitas komentar terbaru dari pengunjung yang mengomentari postingan artikel pada situs blog dan bisa di tampilkan pada widget sidebar.

Walaupun demikian, masih banyak yang belum tahu bagaimana caranya agar bisa menampilkanya ke sidebar blognya, bagi yang belum tau cara pasang nya maka dalam artikel ini saya akan membagikan beberapa langkah dan cara agar blog anda mempunyai widget recent comments, Caranya mudah hanya menambahkan kode HTML Java script pada template blog.

Berikut adalah Cara Memasang Kode Widget Komentar Terbaru:
1. Masuk ke akun Blogger
2. Pilih menu Tema
3. Lalu Klik Edit HTML
4. Cari kode </head> untuk memudahkan nya tekan CTRL F Bersamaan
5. Lalu salin dan tempelkan kode HTML Java script dibawah tepat diatas kode </head>

<script type='text/javascript'> //<![CDATA[ function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}} //]]> </script>

6. Lalu simpan Tema dan agar bisa tampil widget komentar terbaru ke sidebar blog blogger Anda, langkah selanjutnya adalah pergi ke "Tata Letak " halaman blog Anda lalu "tambahkan gadget " pada bagian sidebar atau yang lain di mana Anda ingin munculkan widget komentar terbaru.

7. Pilih "HTML/JavaScript " pada widget
8. Dan salin kode di bawah ini ke dalam "HTML/JavaScript " widgetnya.

<script>var a_rc = 5; var m_rc = false; var n_rc = true; var o_rc = 100;</script> <script src="https://www.iyaseo.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Catatan:
Ganti url blog yang diberi tanda warna merah dengan url blog milik anda dan anda juga dapat mengubah angka 5 berapa banyak komentar yang harus tampilkan dalam widget komentar terbaru atau sesuaikan setelannya sesuai yang anda inginkan.

9. Langkah terakhir simpan dan muat ulang situsblog Anda. dan lihat apakah widget Komentar terbaru ini bisa berfungsi pada situsblog anda.




Demikian sudah Cara Tambah Widget Komentar Terbaru Pada Sidebar. Jika tidak berhasil silahkan sampaikan di kolom komentar di bawah, ya. Nanti bisa di bantu sampai bisa.

Friday, August 2, 2019

- August 02, 2019

Cara Mudah Membuat Widget Label Posts Keren

label posts blog blogger


Sahabat blogger artikel kali ini saya akan berbagi tentang bagaimana cara membuat widget label post yang keren di sidebar blog blogger. Sebenarnya widget label ini sudah banyak pengguna blogger yang menggunakanya dan juga sudah banyak postingan artikel blog tentang widget label posts, namun saya juga ingin memposting artikel terkait dengan widget label tersebut agar blog ini bisa seperti mereka dan khususnya bisa berada di pencariaan google.

Karena hari ini admin baru sempat memposting artikel disebabkan oleh keterbatasan waktu sebab kebelakangan ini hanya menghabiskan waktu dan aktivitas mengotak-atik template blog ini agar bisa tampilan nya seperti sekarang ini itupun masih ada yang kurang entar kapan-kapan di refisi lagi, dan barulah hari ini saya admin bisa berbagi tentang hal ini kepada sahabat blogger semuanya.

Sebenarnya cara membuat widget label posts keren disidebar blog sangatlah mudah, semudah pada saat membuat popular post di blog yang sempat kemarin saya bahas dalam artikel blog ini. Pada dasarnya widgets label posts ini sudah ada semenjak kita mulai membuat blog blogger(default).

Widgets label posts bisa dibuat dengan menggunakan berbagai macam kode-kode, diantara nya CSS HTML Javascript. Namun untuk pengguna blogger yang belum mengerti cara menerapkan CSS HTML Javascript dan masih tetap memakai atau menggunakan widget label standar blogger.

Dan jika ingin membuat tampilan widget label posts nya lebih keren lagi di blognya, maka sahabat blogger yang masih baru tidak perlu khawatir karena masih banyak jalan untuk belajar dan solusinya di bawah ini adalah salah satu cara membuat widgets label posts yang keren yang nantinya bisa anda terapkan di blog bloggernya.

Berikut Cara Memasang Widget Label Posts di Blog Blogger;


1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.label-size {background:#fff;display:block;float:left;margin:0 4px 4px 0;color:#999;font-size:11px;line-height:1.2;}
.label-size a,.label-size span{display:inline-block;color:#666;padding:6px 10px}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;color:#999;}
.label-count:hover {color:#5e94ef;}
.label-size{position:relative;border:0;display:block;float:left;color:#fff;font-size:12px;margin:0 4px 4px 0;}
.label-size a{background:#fff;display:inline-block;color:#fff;border-radius:3px;border-bottom: 1px dotted #ddd;}
.label-size a:hover {background:#4267b2;color:#fff}
.label-size a:hover,.label-size span::hover{background:#4aa3df}


Langkah selanjutnya, klik Simpan dan lihat hasilnya.


OK..Nah..bagaimana tertarik bukan? Sebenarnya masih banyak lagi yang keren-keren sahabat blogger bisa nambah ilmunya di searching google disana nantinya bisa anda temukan widget yang lebih keren dari artikel ini,memasang banyak widget di blog juga akan membuat loading blog pun terasa lama dan berat. Oleh karena itu bagi sahabat blogger yang masih baru jika ingin menambah widget di blog blogger saya sarankan agar jangan terlalu berlebihan sama halnya seperti yang sudah admin sampaikan pada pembahasan artikel sebelumnya.

Selamat mencoba dan Semoga tutorial dan Cara Mudah Membuat Widget Label Posts Keren Di Sidebar ini bermanfaat. Salam Bloggers...
- August 02, 2019

Membuat Widget Popular Posts Di Sidebar

Cara Membuat Widget Popular Posts Di Sidebar

Setiap pengguna blogger sudah pasti sering menambah atau mengedit template blognya agar melihat tampilannya lebih keren dan juga lebih profesional dan pada saat untuk menambahkan kode kodenya masih bingung dalam menerapkan nya ke template blognya tersebut.

Misalnya widget yang berada di sidebar yang kurang menarik dengan tampilan yang diinginkan atau widget dari sidebar template tersebut masih belum cukup dan masih perlu atau ada yang ingin di tambahkan.

Artikel kali ini saya akan berbagi tips blog tentang bagaimana cara menambah atau menerapkan widget pada sidebar template blog yaitu widget popular posts yang keren dan profesional. Untuk menambah atau menerapkan widget popular posts ini pada sidebar template blog terbilang sangatlah mudah.

Tips ini juga bisa anda gunakan sebagai referensi untuk menambah tampilan template blognya menjadi lebih enak dipandang ketika ada pembaca dan pengunjung situsblog milik anda yang terdapat pada widget di sidebar.

Di dalam menerapkan widget popular posts ini adalah pada penempatan dari kode CSS yang harus tepat perhatikan langkah dan caranya berikut ini;

Berikut Cara Memasang Widget Popular Posts di Blog Blogger;


1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>
/* 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;}



Berikut ilustrasi dalam gambar contoh penerapan di dalam template Blog di bawah ini;

Membuat Widget Popular Posts Di Sidebar

Membuat Widget Popular Posts Di Sidebar



Langkah selanjutnya, klik Simpan dan lihat hasilnya.

Selamat mencoba dan Semoga tutorial dan Cara Membuat Widget Popular Posts Di Sidebar ini bermanfaat. Salam Bloggers...

Monday, June 24, 2019

- June 24, 2019

Cara Mudah Membuat Widget Headline di Blog

Cara Mudah Membuat Widget Headline di Blog Blogger


Jika Anda tidak sudah terbiasa dengan Model tampilan halaman depan Home atau beranda situsblog nya hanya itu-itu saja maka beralih lah ke tampilan yang lebih keren dan juga lebih profesional, sama halnya dengan widget.

Headline untuk memperindah gaya desain tampilan tema blog dengan berupa foto atau gambar dan text yang dapat dipasang untuk blog blogger Anda. Anggap saja seperti Featured Posts dan Popular Posts yang berada di sidebar Blog Blogger.

Dengan mengembangkan desain template cukup sederhana untuk melakukan satu hal dan melakukannya dengan sangat baik. Headline telah menjadi salah satu widgets yang paling menonjol pada desain template blog yang anda bisa terapkan dengan gaya atau tampilan berfoto grid di halaman pages home blog blogger anda nantinya.

Hal yang paling besar tentang menggunakan atau memasang widgets Headline adalah bahwa itu bukan hanya untuk semata hiasan saja. Konten blog atau Artikel blog bisa muncul dan tampil bersama widgets headline di beranda blog dengan memanfaatkan fitur ini tentunya akan memberikan dampak positif dan baik terhadap blog karena kabar terbaru dalam postingan artikel bisa di tampilkan agar mereka yang mengunjungi situs blog terkesan dalam hati untuk membaca keseluruhan isi konten blog dan bisa berlangganan artikel blog atau mendesain ulang template blog pengunjung dan pembaca.

Pengunjung dan pembaca beraktifitas ke blog akan mempunyai trafik kunjungan yang berjumlah cukup banyak dari pengguna blogger yang aktif lainnya per harinya, dan apa lagi mempunyai postingan terbaru setiap harinya. Itu adalah jumlah yang menguntungkan bagi blog yang menyediakan fitur headline bagi blog Anda untuk membuat dengan menambahkan headline di Blogger sebagai widget.

Anda dapat menerapkan fitur headline untuk kabar terbaru dari situsblog dan memungkinkan pengunjung untuk mengunjungi blog anda membaca artikel di tab perhalamannya.

Dengan mempunyai tampilan unik dan keren untuk widgets blog yang di pasang disekitaran pada template blog blogger Anda akan memberi keunikan tersendiri ke manapun Anda memakai dan di pasang ke template blog miliknya, Anda dapat membuat dan menampilkan gambar grid dengan menerapkan kode CSS/HTML dan memasang kode-kode nya dengan mengedit Edit HTML ke Tema Blog Anda. dari dalam template blog.

Kode CSS widget yang sudah dirancang khusus oleh pengembang desain template blog untuk Widgets Headline di Blogger yang akan menampilkan bentuk desain gambar grid di situsblog Anda. Bahkan pengunjung yang bukan pengguna Blogger dapat memperoleh manfaat dari artikel postingan tersebut.

Kode CSS HTML yang akan saya share dalam artikel postingan ini yaitu cara mudah dan siapapun dapat dengan mudah menggunakannya.

Hanya memasang kode CSS headline pada template blog milik anda dan sangat menarik yang dapat anda terapkan dan disesuaikan dengan design situsblog. Ada beberapa kode CSS HTML yang bisa digunakan di blogger.

 Berikut Cara Memasang kode dengan mengedit Edit HTML template Langkah yang dilakukan:

Masuk ke Dasbor Blogger anda 
Klik Tema > Lalu Edit HTML 
Tambahkan kode Salin (Copy) kode CSS dibawah ini;

#Headline {background:#ececec}
.repost1 {background: #fff;margin:0;padding:0;display: block;border-top:1px solid #fff}
.repost1 h2 {color: #fff;font-size: 16px;margin: 10px 0 0 0;padding: 0;text-transform: uppercase;}
.repost1 .wrapper {display: block;float: left;margin: 10px 20px 20px 0;width: 198px;position: relative;}
.repost1 .wrapper img {height: 130px;width: 100%;}
.repost h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover{color:#0d68b1}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {line-height: normal;color:#fff;text-shadow:none}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover hover{color:#fff}
.repost1 .wrapper .reposth, .repost1 .wrapper .reposth a {display:none;color: #fff;font-size: 12px;text-transform: capitalize;}
.repost1 .wrapper .reposth a:hover {color: #fff;}
.repost1 .wrapper:nth-child(4) {margin-right: 0 !important;}
@media screen and (max-width:603px) {
.repost1 .wrapper {width:31%;}
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width: 480ppx) {
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width:600px) {
.repost1 .wrapper {width: 30.8%;}
}
@media screen and (max-width: 480px) {
.repost1 .wrapper {width:100%;margin:0 0 15px;}
.repost1 .wrapper img { height:auto; }
.repost1 .wrapper .reposth{position:relative;top:-6px;}
}


Kemudian cari kode dibawah  Lalu letakan tepat dibawa kode berikut ini;






</style>
<b:if cond='data:view.isHomepage'>
<style>

Contoh dalam bentuk gambar untuk menerapkan kode CSS nya di bawah sebagai berikut;

Cara Mudah Membuat Widget Headline di Blog Blogger


Untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya Klik simpan pada tema Selesai.


Selanjutnya Jika sudah Untuk mengaktifkan headline gambar grid nya atau menampilkan Fitur ini ke halaman depan home blog maka kembali Masuk ke Dasbor Blogger anda Klik Tata Letak > Tambahkan Gadget>Lalu Tambahkan kode Salin (Copy) kode CSS dibawah ini;

<script src='/feeds/posts/summary?orderby=published&amp;max-results=3&amp;alt=json-in-script&amp;callback=repost1'/></script>



Nah Itulah Cara Mudah Membuat Widget Headline di Blog Blogger semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

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

Monday, June 10, 2019

- June 10, 2019

Manfaat Dan Fungsi Widgets Blog Blogger

Manfaat Dan Fungsi Widgets Blog Blogger

Widgets yang bisa kita pasang di blog blogger itu sangatlah banyak sekali jenis nya sehingga kita harus memilih yang mana diantara widgets-widgets tersebut , jika sahabat memilih widgets blog blogger  tentulah yang lebih menarik untuk di pasang di blognya selain menarik dan juga keren namun sahabat harus menyelektif widgets widgets nya bukan sekedar menarik dan keren saja tetapi ada manfaat dan dapat memberikan konstribusi terhadap kemajuan kinerja blog yang anda miliki ke arah yang lebih baik sehingga pengunjung dan pembaca sering mampir atau singgah lebih lama pada blognya.

Di dalam blog widgets merupakan fitur blog yang sangat penting, karena tanpa ada widgets yang  terpasang dalam blog maka tidaklah lengkap rasanya tampilan pada sebuah blog ,karena widgets juga mempunyai fungsi yang bermacam-macam ,jika pengunjung dan pembaca pasti tidak akan melihat isi postingan artikel saja mereka akan lebih tertarik ketika melirik pada widgets yang berada pada sidebar maupun sekeliling blog.

Memasang widgets berlebihan di dalam blog akan membuat blog menjadi berat didalam waktu pemuatan sebuah tab halaman diblog, jadi saya sarankan jika memasang widgets sesuaikan saja dengan tampilan template yang simple agar pemuatan halaman blog menjadi ringan,sahabat bisa mencari template blogger yang lebih ringan di sugeng.id arlinadesign.com contohblog.com masih banyak para desain template blogger yang tidak saya sebutkan di postingan artikel ini ya sahabat blogger.

Berikut fungsi dan penjelasan widgets-widgets yang bisa sahabat pasang pada sebuah blog blogger di bawah ini;

Widget Header pada sebuah blog merupakan widgets yang menampilkan nama atau judul dengan deskripsi pada blog tersebut,sehingga berfungsi sebagai indentitas pada sebuah blog agar pengunjung dan pembaca mengetahui maksud dan tujuan isi artikel dari sebuah blog.Header juga bisa di pasangkan berupa gambar logo tentang blog

Widgets Search merupakan fitur yang berfungsi agar pengunjung dengan mudah melakukan pencarian sebuah postingan artikel yang mereka inginkan pada blog milik kita,anda bisa pasang widget ini pada sidebar atas kanan maupun kiri di dalam blognya.

Widgets Popular posts merupakan widgets yang paling di andalkan para blogger karena berfungsi untuk menampilkan hasil secara otomatis dari halaman postingan dalam widgets ini,widget popular posts berguna agar pengunjung blog bisa mengetahui artikel mana yang paling populer dalam postingan blog tersebut,widget ini tidak bisa di pisahkan dalam sebuah blog.

Widgets recent posts merupakan widgets yang menampilkan artikel postingan terbaru pada sebuah blog,ketika memposting sebuah artikel pada blog maka widget ini berguna menampilkan artikel terbaru,kalau sahabat sudah memasang widgets ini berarti pengunjung dengan mudah mengetahui kabar terbaru dari blog yang anda miliki.

Widgets Label merupakan kategori dari sebuah blog berfungsi sebagai label dan sekaligus sebagai kategori dari postingan artikel pada blog agar pengunjung dengan mudah mendapatkan isi dari pada ketegori artikel postingan blog tersebut,jika sahabat memberikan label pada artikel blog  harus menyesuaikan dengan isi pada kategori artikel didalam postingan blognya.

Widgets Arsip Blog merupakan arsip blog yang berfungsi untuk menampilkan susunan waktu postingan artikel ketika memposting pada halaman blog lengkap dengan jumlah artikel postingan pada waktu tanggal bulan dan tahun,sehingga pengunjung dan pembaca mengetahui  kapan artikel nya di publisasikan pada blog.

Widgets Related Posts merupakan widgets yang berfungsi menampilkan beberapa postingan artikel dengan muncul disetiap halaman postingan artikel yang terkait dengan artikel yang di baca oleh pengunjung blog,related posts juga bisa di katakan artikel terkait.

Widgets Subscribe Merupakan salah satu widget yang sangat penting buat situsblog karena bisa digunakan untuk berlangganan artikel postingan sebuah blog melalui kiriman email otomatis dari situsblog yang kita kelola ke pengunjung blog yang sudah mengikuti lewat email berlangganan di widgets ini, atau semua postingan artikel apdate terbaru akan secara otomatis dikirim ke email pengunjung blog anda,Widget Subscribe pada sebuah blog juga berfungsi agar pengunjung yang menyukai blog anda mudah untuk mengetahui artikel baru diblog anda dengan cara berlangganan. Dengan adanya widget subscribe ini, pengunjung blog juga akan selalu akan normal.

Widget Komentar Merupakan Widget yang sangat penting agar pembaca blog bisa berkomentar atau memberikan saran kepada admin atau pemilik blog. Dengan widget komentar ini juga dapat menjalin silahturahim sesama blog dan sekaligus bisa berkomunikasi dengan para pembaca agar mereka semakin menyukai blog yang kita kelola. bukan itu saja, dengan adanya kritik dan saran dari pengunjung maupun pembaca juga dapat menambah keseriusan untuk terus berkarya melalui tulisan yang dipublisasikan ke blog agar bisa bermanfaat bagi para pembaca dan pengunjungblog. Sahabat juga bisa memasang widget recent comment pada blognya agar para pembaca juga mengetahui komentar terbaru dari postingan artikel yang sedang mereka baca. Widget Recent comment juga sangat berfungsi untuk mengingatkan sahabat bila ada pengunjung memberikan komentarnya atau mkmentar barunya pada sebuah postingan artikel sehingga komentar tersebut bisa langsung membalasnya.


Baiklah, itulah pembahasan artikel nya kali ini, semoga artikel ini dapat memberikan manfaat dan informasi kepada anda. Pembahasan diatas merupakan Manfaat Dan Fungsi Widgets Blog Blogger semoga anda sukses.


Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini Dengan Menekan atau Klik Tombol Show Comments yang Berwarna Biru Di Bawah Postingan Ini...



Salam Blogger: https://www.iyaseo.id/

Sunday, June 9, 2019

- June 09, 2019

Cara Pasang Multi Tab Widgets Popular Post Recent Post dan Label di Blog Blogger

Cara Pasang Multi Tab Widgets Popular Post Recent Post dan Label di Blog Blogger

Untuk memasang widgets diblog itu sangat mudah bagi yang sudah lama mengelola blog namun pada kesempatan kali ini akan membagikan cara memasang widgets multi tab popular post,recent post dan label ke pada blogger pemula dimana fungsi dari widgets ini sama pada widgets yang standar cuman ini ada perbedaan dari tampilan nya saja.

Jadi mari disimak cara mudah pemasangan widgets multi tab di sidebar blog blogger dengan tampilan lebih dari satu dalam satu tab menu dengan tiga fungsi widget yang berbeda berikut di bawah ini;

Langkah 1. Masuk ke Dasbor Blogger
Langkah 2. Pilih Tema >Edit HTML
Langkah 3. Copy Kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>

#sidebar-tab h2{display:none;} #select-tab{margin:0 auto 10px} #select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden} #select-tab li{float:left;width:33.3%;text-align:center} #select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none} #select-tab .selected a,#select-tab a:hover{background-color:#48d} #sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0} #sidebar-main{overflow:hidden}
Langkah 4. Masukan kode HTML di bawah ini di bawah kode berikut : <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>


<div id='sidebar-tab'> <div id='tab'> <div class='tab-widget-menu clear'> <ul id='select-tab'> <li class='tab1'><a href='#tab1'>Popular Posts</a></li> <li class='tab2'><a href='#tab2'>Latest Posts</a></li> <li class='tab3'><a href='#tab3'>Labels</a></li> </ul> </div> <div id='sidebar-main'> <div class='widget1' id='tab1'> <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'> </b:section> </div> <div class='widget1' id='tab2'> <b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'> </b:section> </div> <div class='widget1' id='tab3'> <b:section class='sidebar' id='tab3-labels' showaddelement='yes'> </b:section> </div> </div> </div> <script type='text/javascript'> //<![CDATA[ $(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function() {$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})}); //]]> </script> </div>

Selanjutnya Simpan Tema

Kemudian buka Tata Letak > maka akan muncul 3 tab dan Masukan tab yang pertama add widget > Popular post tab 2 add recent post dan yang ke 3 add labels Nah. Selesai

Selamat mencoba dan semoga bermanfaat, trimakasih.

Thursday, June 6, 2019

- June 06, 2019

Cara Mudah Memasang Widgets Jejaring Sosial Di Blog Blogger

Cara Mudah Memasang Widgets Jejaring Sosial Di Blog Blogger



Sahabat blogger apa kabar? Semoga baik-baik saja dan masih setia mengunjungi blog iyaseo.id dalam kesempatan ini saya ingin berbagi dengan sahabat semua tentang widgets jejaring sosial barangkali anda semua sudah lama berselancar di dunia maya tentunya pasti anda sudah tau mengenai jejaring sosial seperti facebook,instagram,twitter,youtube dan lain-lainya.

Mungkin di antara sahabat blogger belum memasang widget jejaring sosial di dalam blognya jika sudah pasti berbeda dengan apa yang saya bagikan di postingan artikel ini,ok nanti simak saja di bawah seperti apa ya.

Namun dalam kesempatan ini saya tidak akan menjelaskan tentang mengapa harus memasang widgets jejaring sosial pada blog karena pada postingan sebelumnya saya sudah menjelaskan tentang pentingnya kita memasang widgets popular post,widgets lates posts,widgets label post dan yang lainya.

Menempatkan widgets jejaring sosial di blog,bagi sebagian pengguna blogger adalah sesuatu di anggap mudah,tetapi tidak bagi pengguna blogger yang masih baru (pemula).

Untuk sahabat blogger yang masih baru pasti masih bingung seperti apa sih cara yang di maksud,caranya sangat mudah dan simple serta sangat mudah di mengerti dengan adanya kode CSS HTML sahabat sudah bisa anda pasang di blognya

Anda tinggal memilih sesuai selera dengan kemauan yang ingin di tambahkan di blog yang sahabat kelola.

Berikut cara memasang widgets jejaring sosial di blog di bawah ini;


Langkah 1.Masuk ke Dasbor Blogger

Langkah 2.Pilih Tab Menu "Tata Letak"

Langkah 3.Jika sudah muncul halaman "Tata Letak" di dalam dasbor blogger langsung menuju ke pilihan "Tambahkan Gadget"

Langkah 4.Lalu Masukan kode CSS HTML/Java Script dibawah ini;

<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix"><li><a href="#!" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li><li><a href="#!" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li><li><a href="#!" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li><li><a href="#!" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li></ul></div>
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
background:#f8f8f8;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}
</style>



Cara Mudah Memasang Widgets Jejaring Sosial Di Blog Blogger


Jangan lupa di ganti dengan URL jejaring sosial milik sahabat " #!"yang berwarna Merah dalam kode tersebut jika sudah maka Save atau Simpan dan lihat hasilnya.





Demikian informasi tentang Cara Mudah Memasang Widgets Jejaring Sosial Di Blog Blogger versi iyaseo.id, silahkan langsung saja praktekan dan pastikan anda menerapkan semua tips yang sudah ada dalam artikel di postingan ini. Terimakasih dan selamat mencoba.

Wednesday, June 5, 2019

- June 05, 2019

Cara Mudah Memasang Tombol Widgets Follow Blog di Blogger

Cara Mudah Memasang Tombol Widgets Follow Blog di Blogger



Tombol widgets follow atau ikuti sangatlah memainkan peranan penting dan sangat bermanfaat bagi situsblog.Selain meningkatkan trafik anda juga harus menyediakan widget followers di blog anda agar para pengunjung dengan mudah mengikuti blog dan mengetahui jumlah dari followers anda.


Memasang widget Tombol Follow atau Ikuti di Blog adalah cara yang paling mudah dan baik digunakan untuk memperbanyak followers pada sebuah blog widgets tombol follow atau ikuti ini sebaiknya anda memasangnya di situsblog agar pengguna blog blogger yang lain dengan mudah mengikuti blog yang kita kelola hanya dengan mengklik tombol ikuti maka blog tersebut otomatis bertambah followersnya.


Untuk tampilanya sendiri, bisa di sesuaikan anda bisa meletakannya disidebar maupun dibawa postingan artikelnya sesuai seleranya masing-masing dan pengunjung bebas menentukan pilihanya untuk mengikuti blog yang sahabat miliki.

Berikut Cara untuk memasang widgets Follow di Blog di bawah ini;


Masuk ke akun Blog Blogger sahabat.

Pada bagian Tata Letak, klik Tambahkan Gadget di posisi mana pun.




Pilih Mode HTML/Javascript dan masukan script di bawah ini;


<a href="http://www.blogger.com/follow-blog.g?blogID=8443148820067718922">
<img src="https://3.bp.blogspot.com/-ZUZD90mOFPM/XPhief-HMnI/AAAAAAAAAGc/p9psiQHzs6ozy696C2XbwHxr72IzL_UcgCK4BGAYYCw/s1600/tombol%2Bfollow%2Bblogger.png"/></a>




Dan berikut contoh gambar cara penerapan kode HTML/Javascript dibawah;


Cara Mudah Memasang Tombol Widgets Follow Blog di Blogger


Jangan lupa di ganti dengan ID blognya yang berwarna Merah dalam kode tersebut jika sudah maka Save atau Simpan dan lihat hasilnya.





Demikian informasi tentang Cara Mudah Memasang Tombol Widgets Follow Blog di Blogger versi iyaseo.id, silahkan langsung saja praktekan dan pastikan anda menerapkan semua tips yang sudah ada dalam artikel di postingan ini. Terimakasih dan selamat mencoba.

Friday, May 31, 2019

- May 31, 2019

Cara Memasang Widget Jejaring Sosial Keren di Blog Blogger

Cara Memasang Widget Jejaring Sosial Keren di Blog Blogger


Widget dapat mempercantik sebuah situsblog untuk itu saya akan membagikan Widget Jejaring Sosial Untuk Blog.Jejaring Sosial seperti youtube facebook,instagram,twitter dan lain-lainya sangatlah populer dikalangan penngguna internet,sehingga situs blog pun bisa kita pasangkan widgets ini agar lebih mudah berinteraksi dengan jejaring sosial tersebut.
Banyak sekali kita jumpai widgets ini dipasang di setiap situsblog.mungkin rata-rata semua blog memakai widget Jejaring Sosial ini, itu dikarenakan widget Jejaring Sosial ini sangat berperan penting juga pada sebuah blog.

Untuk itulah saya menyarankan anda untuk memasang widgets Jejaring Sosial ini pada situsblog anda.Widget Jejaring Sosial Keren untuk blog. anda dapat memasangnya pada situsblog anda, karena widget Jejaring Sosial yang satu ini sangatlah keren dengan tampilannya yang memukau mata,memandangnya para pengunjung saat melihatnya.
Widgets Jejaring Sosial ini tidaklah begitu sulit untuk memasangnya hanya dengan bantuan kode  CSS/HTML Javascript yang akan di share di dalam artikel blog di bawah beserta cara pemasangannya berikut ini;


Cara Pasang Widget Jejaring Sosial Keren di Blog Blogger
Berikut langkah-langkah cara membuat widget Jejaring Sosial keren.
Masuk ke blogger dan login dengan akun blogger Anda
Pilih menu Tata Letak > Setelah itu copy kode dibawah lalu > Tambahkan Gadget > lalu pilih HTML/Java Script

<div id='socialcounterx'>
<ul class='social-counter'>
<li class='social_item-wrapper'><a class='social_item social_facebook' href='#' rel='nofollow noopener' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook social_icon'></i><span class='social_num'>Facebook</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_twitter' href='#' rel='nofollow noopener' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter social_icon'></i><span class='social_num'>Twitter</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_youtube' href='https://www.youtube.com/channel/UCPr9WULPBi1CU3mNuSh4g9w' rel='nofollow noopener' target='_blank' title='Subscribe to Our Channel'><i class='fa fa-youtube social_icon'></i><span class='social_num'>Youtube</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow noopener' target='_blank' title='Follow Our Instagram'><i class='fa fa-instagram social_icon'></i><span class='social_num'>Instagram</span></a>
</li>
</ul>
</div>


















Save atau simpan


Itulah artikel tentang Cara Memasang Widget Jejaring Sosial Keren di Blog Blogger, semoga artikel ini bermanfaat untuk blog Anda dan menjadikan blog Anda menjadi lebih keren dan cantik.

Thursday, May 30, 2019

- May 30, 2019

Cara Mudah Memasang Gambar Animasi Bergerak di Situsblog Blogger

Cara Mudah Memasang  Gambar Animasi Bergerak di Situsblog Blogger


Membuat situsblog lebih keren itu bagaimanakah? Blog menjadi keren dengan gaya yang berbeda dari situsblog lain seharusnya mecari ide atau mengunjungi blog blogger yang sudah lama dalam dunia blogging. Dimanakah harus menemukan situs blog tersebut? Yah tentunya dengan melakukan aktifitas di Google pencarian(searching google).agar menemukan sample sebagai bahan untuk merubah tampilan blog dengan gaya yang berbeda .

“Agar situsblog menjadi keren tentunya harus membuat tampilan blog dengan menambahkan hiasan di dalam maupun di sekelilingnya, dengan menggunakan kode CSS/HTML dan Javascript ataupun semacamnya karena tanpa kode kode tersebut tidak akan berfungsi di tampilan situsblog.”

Tidaklah sedikit seorang blog blogger di dunia ini maka kita sebagai pemula atau masih baru mengenal dalam kegiatan blogging dan sering-seringlah menggunakan ponsel maupun semacamnya,untuk melakukan aktifitas di internet melalui Google search dalam artian bahwa segala informasi dan pembelajaran semua ada di google search untuk menambah pengalaman dan juga pengetahuan.

Jika ingin situs blog menjadi keren dan bergaya maka saya akan membagikan dalam artikel postingan ini dengan cara memasang dan sekaligus menshare kode kode CSS/HTML ,Javascript nya dibawah sehingga situs blog anda menjadi berbeda dari tampilan defaultnya dengan menerapkan kode-kode nya.

Segala macam cara untuk membuat situsblog semakin keren dan bergaya, dengan menggunakan gambar animasi bergerak yang dipadukan dengan kode-kode yang dimaksud diatas dari poin paragraf kedua dengan meletakan nya disidebar maupun halaman postingan artikel dan sekelilingnya sehingga dapat bekerja gambar animasi dan sekaligus bergerak dengan hiasan ini sehingga blog terlihat menarik,keren dan bergaya begitukan.

Sahabat blogger kode-kode ini bukan hasil kariya dari admin,saya hanya share dan membagi kan kesahabat semua sahabat blogger yang baik hati.

Bila kode nya tidak berfungsi mungkin tidak cocok dengan template milik anda supaya jangan penasaran berikut penjelasan cara mudah memasang gambar animasi bergerak di situsblog Blogger:


Cara Memasang Gambar Animasi Bergerak di Blogger dengan mudah 



1. Masuk ke Akun Blogger Nya (dasbor blogger)

2. Pilih Tata Letak & Klik Tambahkan Gadget

3. Pilih Gadget HTML/Java Script

4. Paste Kode gambar animasinya yang sahabat inginkan dibawah berikut ini:

5. Jikakalau sudah Klik SIMPAN


Cara Mudah Memasang  Gambar Animasi Bergerak di Situsblog Blogger

Cara Mudah Memasang  Gambar Animasi Bergerak di Situsblog Blogger


Gambar Animasi Bergerak Boneka




<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Monyet Lompat





<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href=" https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Bola


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>



Gambar Animasi Bergerak Naruto





<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Panda



<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Spongebob





<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Doraemon



<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Senyum


<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id /" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Monyet




<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Babi




<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://iyaseo.id /" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Gajah lompat





Script:
<div style="position: fixed; top: 80px; left: 20px;width:120px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Selamat Datang " /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Boring




Script :
<div style="position: fixed; top: 80px; left: 20px;width:80px;height:120px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Tuyul ketawa





Script:
<div style="position: fixed; bottom: 80px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Boneka Joget





Script :
<div style="position: fixed; top: 80px; left: 20px;width:82px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Panda Main Bola





Script :
<div style="position: fixed; top: 80px; right: 30px;width:160px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Tuyul Baring





Script :
<div style="position: fixed; top: 80px; left: 20px;width:120px;height:100px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Selamat Datang." /></a><small><center><a href="https://iyaseo.id /" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Panda Biru





Script
<div style="position: fixed; top: 80px; left: 20px;width:100px;height:100px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Memanah






Script:
<div style="position: fixed; top: 80px; left: 10px;width:210px;height:120px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Bunga







Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:100px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Selamat Datang." /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Anjing Laut





Script:
<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Lumba-Lumba






Script :
<div style="position: fixed; top: 80px; left: 10px;width:110px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>



Gambar Animasi Bergerak Kucing Tidur





Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:140px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Kelinci





Script :<div style="position: fixed; bottom: 80px; left: 10px;width:125px;height:160px;"><a href=" https://iyaseo.id /2019/05/ cara-mudah-memasang-gambar-animasi-bergerak- di -situsblog-Blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Selamat Datang." /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Dragon





Script:
<div style="position: fixed; top: 80px; right: 10px;width:150px;height:130px;"><a href="https://www.iyaseo.id/2019/05/cara-mudah-memasang-gambar-animasi-bergerak-di-situsblog-blogger.html " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id /" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Ikan




Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:100px;height:130px;"><a href="https://www.iyaseo.id/2019/05/cara-mudah-memasang-gambar-animasi-bergerak-di-situsblog-blogger.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id /" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Pinguin





Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:130px;"><a href=" https://www.iyaseo.id/2019/05/cara-mudah-memasang-gambar-animasi-bergerak-di-situsblog-blogger.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Selamat Datang." /></a><small><center><a href="https://iyaseo.id/" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Helikopter







Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:130px;"><a href=" https://www.iyaseo.id/2019/05/cara-mudah-memasang-gambar-animasi-bergerak-di-situsblog-blogger.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Selamat Datang" /></a><small><center><a href="https://iyaseo.id /" target="_blank">Tutorial Blog</a></center></small></div>



NB; Ganti Url blog ini di setiap kode CSS/HTM dan Javascripct di atas tersbut  dengan Url blog yang anda miliki wasallam terimakasih banyak ,selamat membaca dan berkunjung.

Sampai disini cara mudah memasang  gambar animasi bergerak di situsblog Blogger - bagaimana apakah sudah mengerti  jika iya diatas banyak pilihan? tinggal anda pasang  semoga bermanfaat. Salam blogger.

Tuesday, May 28, 2019

- May 28, 2019

List Daftar Nama Situs Penyedia Widgets Untuk Blog

List Daftar Nama Situs Penyedia Widgets Untuk Blog


Widgets adalah alat atau fitur tambahan yang bisa dipasang ke blog blogger selain konten postingan artikel untuk memudahkan kita di dalam Bernavigasi ke blog atau keterangan yang ada pada blog itu sendiri sehingga pengunjung situsblog dapat lebih mudah mengerti dan mengenali isi dari situsblog yang kita miliki. Artikel kali ini akan mengenalkan untuk sahabat blogger yang belum tau dan kepingin mengetahui yang bagaimanakah? widgets yang ada dan bisa di pasang ke situsblog,ada banyak widget yang disediakan oleh blogger maupun dari luar blogger dengan berbagai macam fitur dan kegunaannya. Sahabat tinggal memilih diantara yang akan saya share di bawah, sesuai dengan kebutuhan yang ingin anda ditambahkan pada situsblog yang di miliki.

Berikut daftar nama penyedia Wigets Blog.

Free Hit Counter ( Situs Web http://freelogs.com/ )
Widget sederhana ini berfungsi menghitung semua pengunjung yang masuk ke blog kita, untuk mengunakannya teman-teman harus registrasi dulu.

Histats ( Situs Web http://www.histats.com/ )
Pasilitas yang disediakan dari widget ini cukup lengkap, Histats mampu mendeteksi jumlah pengunjung yang masuk, pengunjung yang sedang online, jumlah halaman yang dibuka, browser dan OS yang digunakan, asal pengunjung yang datang apakah dari mesin pencari atau dari web lain berikut kata kunci yang digunakan untuk masuk ke blog kita dan masih banyak lagi. Yang paling menarik dari histats yaitu dapat menampilkan grafik pengunjung secara harian dan bulanan.

Flag Counter ( Situs Web http://flagcounter.com/index.html )
Sesuai dengan namanya flag counter berfungsi menghitung jumlah bendera atau negara yang berkunjung ke blog kita.

Feedjit ( Situs Web http://feedjit.com/ )Feedjit akan menampilkan traffic pengunjung yang datang secara real time mulai dari negara asal pengunjung, browser dan OS yang digunakan, kata kunci yang digunakan untuk menemukan blog kita.Namun sayang pemasangan widget ini sedikit menyita ruang di dalam blog karena ukurannya yang lumayan panjang.

Widgeo ( Situs Web http://www.widgeo.net/ )
Pasilitas dan tampilannya sangat keren dan disertai dengan animasi yang menarik, bisa menampilkan semua pengunjung yang masuk dari berbagai penjuru dunia secara real time, termasuk yang sedang online. Sayang pemasangan widget ini harus dibayar dengan munculnya berbagai macam jendela popup yang sangat mengganggu.

Whos.amung.us ( Situs Web http://whos.amung.us/ )
Jumlah pengunjung yang sedang online di blog teman-teman bisa diketahui dengan memasang widget ini, tanda ada yang online yaitu berupa angka yang menunjukan jumlah pengunjung.

Revolver maps ( Situs Web http://www.revolvermaps.com )
Revolver maps berbentuk peta dunia 2D dan 3D yang disertai animasi, bila ada yang sedang online. revolver maps menandainya dengan animasi air beriak dari posisi si pengunjung berada yang dilengkapi dengan label daerahnya masing-masing.

Geovisit ( Situs Web http://www.geovisite.com/en/ )
Geovisit menyediakan berbagai macam widget yang serbaguna seperti geochat, geoToolBar, GeoMap, GeoGlobe, GeoClock,GeoCounter, dan lain-lain

Wibiya ( Situs Web http://www.wibiya.com/?ref=L )
Sama halnya dengan Geovisit Wibiya juga menyediakan macam-macam aplikasi yang atraktif untuk blog atau web teman-teman seperti web toolbar, notifications, real time stats, youtube video galery, share ke situs jejaring sosial, dan masih banyak lagi.

Cbox ( Situs Web http://cbox.ws/ )
Chat Box (Cbox) biasanya banyak digunakan oleh para blogger untuk saling berkunjung (Blowalking) dengan sesama blogger lainnya

ShoutMix ( Situs Web http://www.shoutmix.com/ )
Fungsinya sama dengan Cbox namun menurut saya kelemahan SoutMix tidak bisa mengubah nama usermenjadi link, sehingga agak susah untuk melakukan blogwalking jadi saya sarankan menggunakan Cbox.

Jam dan Kalender
Untuk memasang jam dan kalender pada blog, teman-teman bisa mengunjungi beberapa situs-situs penyedia layanan ini diantaranya http://www.clocklink.com/index.php ,http://widgia.com/category/calendars/ , http://www.free-blog-content.com/ , dan masih banyak lagi situs-situs lainnya.

maaf lupa nama situs dimana saya menyalin daftar nama situs ini

Monday, May 27, 2019

- May 27, 2019

Cara Memasang Terjemahan Google dengan Mudah di Blog Blogger

cara memasang terjemahan google dengan mudah di blog blogger


Bagaimanakah?,agar pengunjung situsblog yang kita kelola bersal dari Negara Lain Bisa memahami isi dari artikel postingan blog,tentunya bisalah karena ada yang namanya terjemahan google,namun di postingan ini saya mau membahas cara memasang Google Translate penerjemahan bahasa di blog Blogger?. Mudah dan singkat, lho?,Secara Default memang ada google translate di sebuah blog jika kita menambahkan gadget atau widget di sidebar situsblog blogger,tapi disini penerapanya berbeda dengan cara tersebut yaitu menambahkan kode CSS/HTML.

Siapa tau ada pengunjung dari luar negara kita tercinta Indonesia, menemukan situsblog anda dan tertarik untuk pingin tahu mengenai arti dari artikel postingnya,Bukankah tidak ada satupun batasan yang melingkupi dunia maya ini. Segala hal yang kita tidak terbayangkan akan dengan mudah terjadi begitu saja tanpa kita sadari oleh karena itu saya berikan saran kepada sahabat memberikan sebuah "widget Google Translate."

Agar pengunjung blog yang masih diluar negeri sana bisa menemukan secara tidak sengaja kepingin membuka dan membaca isi artikel di setiap tab halaman,dan jika sudah sempat membuka situsblog anda mengurungkan niatnya untuk menutup blog yang karena tidak mengerti,maka dengan adanya widgets "translate google" akan menarik minatnya untuk mencoba mengerti apa maksud postingan artikel anda "yang berbahasa Indonesia tersebut"?

Pada inti nya Blogger memang (the best) memiliki fitur terjemahan bahasa secara otomatis bisa di pasang lewat menambahkan widgets maupun kode CSS/HTML dan kode Java Script sesukanya termasuk kode google translate (penerjemah bahasa).

Cara Pasang Widget Google Translate di Blog

1.Masuk ke Blogger.
2.Buka halaman Dasbor
3.Klik Tata Letak
4.Pilih dan klik Tambakan Gadget Tunggu beberapa saat akan dialihkan ketab halaman baru.
5.Pilih dan klik widget HTML/Javascript.
-Copy dan pastekan javascript dalam kotak tambahkan Gadget.
-Dan Klik SIMPAN
Berikut kode CSS/HTML Java Script di bawah in;




<div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'id',

includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi'

}, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

6.Nah,,,Selesai! Silahkan buka blog dan coba untuk terjemahkan blog ke bahasa yang tersedia!

Sekarang sahabat sudah mempunyai Terjemahan Google,di blog sahabat Demikian, Cara Memasang Terjemahan Google dengan Mudah di Blog Blogger kali ini, semoga bermanfaat buat sahabat semua.



Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini.



Salam Blogger!; https://iyaseo.id/

- May 27, 2019

Cara Memasang Efek Loading Mudah Diblog Blogger

Cara Memasang Efek Loading Mudah Diblog Blogger

Animasi efek loading ini berfungsi ketika sebuah situsblog dibuka dan gambar giftnya bekerja saat proses memuat halaman di blog, Bagaimanakah? cara agar animasi efek loading ini bisa di pasang ke situsblog? ok, agar efek animasi loading ini berfungsi maka dengan mudah di blog Blogger dengan bantuan kode CSS.

Didalam postingan artikel ini admin akan membagikan cara bagaimana efek loading terpasang dengan mudah dan mengatur efek pemuatan di halaman dengan gaya di blog blogger blognya dengan bantuan beberapa kode CSS. Efek animasi loading bekerja dalam proses pemuatan halaman ini sepenuhnya berdasarkan pada gambar ".gif". 

Kode dan Script CSS ini yang akan menunjukkan efek animasi memuat pada setip kali pengunjung mengklik tautan di dalam situsblog anda. jadi sebelum sahabat menambahkan efek animasi loading ini di blog anda sendiri, pastikan untuk melihat contoh demo di blog ini.

Jika sahabat ingin memasang kode animasi loading di blognya, ikuti langkah-langkah mudah dan singkat di bawah ini,dengan hati-hati untuk menambahkan Efek animasi Pemuat Halaman CSS ini ke blog bloggernya ya sahabat.

langkah pertama Kunjungi DasborBlogger Anda, Sekarang buka bagian "Tema" dan kemudian klik tombol "Edit HTML". Dalam templat, editor menemukan kode di bawah ini dengan menekan tombol "Ctrl + F" bersamaan dari keyboard Anda. Lalu cari tulisan </body> Setelah itu salin kode di bawah ini dan tempelkan tepat sebelum </body>



<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url(&#39;https://lh3.googleusercontent.com/-w0k9WLYgI4E/VtV1Nimf30I/AAAAAAAAER4/PqMxsluu_-A/s500-Ic42/4f432d9234988a5f33b26e0ba06bc6fe.gif&#39;) no-repeat 50% 50%;

display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>


Dan ok Sekarang klik pada tombol Simpan Tema untuk menerapkan perubahan.sahabat dapat mengubah URL gambar yang disorot dengan URL gambar apa gift apapun sesuai selera masing-masing,berikut gambar gift lain nya;

  1. https://2.bp.blogspot.com/-qDdhR_GsgIc/VsXER4QHbXI/AAAAAAAAAKM/vGBuCifoo6E/s1600/Preloader_4.gif
  2. https://4.bp.blogspot.com/-La49jB3eAaY/VsXERZVHZiI/AAAAAAAAAKI/C0flV0p8RhQ/s1600/Preloader_1.gif
  3. https://2.bp.blogspot.com/-yIGhPxzyKTI/VsXERGuO2vI/AAAAAAAAAKE/whhuzUfbK2Q/s1600/Preloader_3.gif
  4. https://2.bp.blogspot.com/-qDdhR_GsgIc/VsXER4QHbXI/AAAAAAAAAKM/vGBuCifoo6E/s1600/Preloader_4.gif
  5. https://4.bp.blogspot.com/-ewy07BU111Q/VsXESP6DMwI/AAAAAAAAAKU/VHakurICkW8/s1600/Preloader_6.gif






Itulah Cara Memasang Efek Loading Mudah Diblog Blogger Semoga artikel ini dapat bermanfaat bagi sahabat semua. Sekian dan terima kasih...



Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini.



Salam Blogger; https://iyaseo.id/

Sunday, May 26, 2019

- May 26, 2019

Cara Pasang Widgets Label Posts di Blogger

Cara Memasang Widgets Label Postingan Artikel Blog


Widgets untuk di pasang di blog itu dimanakah tempatnya? "Ya tentunya yang paling menarik untuk pemasanganya di situsblog adalah tepatnya di sidebar kanan maupun sampingkiri tergantung dari desain tema blognya" sesuai dengan selera masing-masing, sahabat sudah punya widgets label yang keren.? kalau belum admin mau bagi ke sahabat semua,bahwa ada widgets label keren untuk bisa sahabat semua pasang di sidebar blog bloggernya agar lebih keren tampilan situsblog nya sahabat semua.

Anda pilih widgets yang menarik.namun harus selektif dalam memilih Widgets bukan sekedar menarik,tapi juga dapat memberikan konstribusi terhadap kemajuan situsblog anda kedepannya.artinya situsblog milik sahabat tentunya bisa membuat para pengunjung betah di halaman postingan artikel blognya, jadi saya sarankan widgets yang bisa anda terapkan di blognya agar ada tujuan dan bukan sekedar hiasan saja ok. ini Widgets label yang keren dan sangat penting untu di pasang di situsblog miliknya seperti di bawah lengkap dengan cara pemasangannya. 

Tentunya sahabat sudah tau cara memasang Widgets label di blog Blogger Nah ini saya akan share dalam postingan artikel ini, widgets label yang sering di pasang oleh para master blogger terkenal agar lebih profesional, ayo simak berikut;

Buka >> Dasbor Blogger>> "Pilih Tema">> Lalu Pilih Lagi >> "Edit HTML">> Cari tulisan kode "</head>"dengan menggunakan tombol "Ctrl + F" bersamaan dari keyboard pc/laptop anda Baru salin dan tempel kode di bawah ini sebelum </head> berikut di bawah ini;



<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><style type='text/css'>/* Recent Post by Label */.newsmartpiklabel1 ul,.newsmartpiklabel2 ul{list-style:none;margin:0;padding:0}.newsmartpiklabel1 li,.newsmartpiklabel2 li{margin:0;padding:0;}.newsmartpiklabel1 .widget,.newsmartpiklabel2 .widget{margin:0;padding:0}.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2,.newsmartpiklabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}.newsmartpiklabel2 h2,.newsmartpiklabel3 h2{margin:20px 0 0 0;}.newsmartpiklabel1 h2:before,.newsmartpiklabel2 h2:before,.newsmartpiklabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}.newsmartpiklabel2 h2:before{content:&#39;\f10b&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}.newsmartpiklabel3 h2:before{content:&#39;\f143&#39;;}.newsmartpiklabel1 .index,.newsmartpiklabel2 .index{font-size:10px;float:right;font-weight:400;}.newsmartpiklabel1 .index a,.newsmartpiklabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}.newsmartpiklabel2 .index a{color:#ef6c00;border-color:#ffa726}.newsmartpiklabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}.newsmartpiklabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}.newsmartpiklabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}.newsmartpiklabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}.newsmartpiklabel2 span.newsmartpik_meta_comment a:hover{color:#38761d!important}.newsmartpiklabel2 ul.newsmartpik_thumbs li a:hover,.newsmartpiklabel2 ul.newsmartpik_thumbs2 li a:hover{color:#ff675c;text-decoration:none}.newsmartpik_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}.newsmartpik_right{width:250px;width:47.5%;float:right;margin:0;padding:0}ul.newsmartpik_thumbs{margin:0;padding:0}ul.newsmartpik_thumbs li,ul.newsmartpik_thumbs2{margin:0;padding:0}ul.newsmartpik_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}ul.newsmartpik_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}ul.newsmartpik_thumbs .cat_thumb img:hover{opacity:.9;}ul.newsmartpik_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9;min-height:110px;}ul.newsmartpik_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}ul.newsmartpik_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:100px;height:100px;overflow:hidden}ul.newsmartpik_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}ul.newsmartpik_thumbs2 .cat_thumb2 img:hover{opacity:.9;}span.newsmartpik_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}span.newsmartpik_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}span.newsmartpik_title a{color:#333}span.newsmartpik_title a:hover{color:#ff675c;text-decoration:none}span.newsmartpik_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}span.newsmartpik_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}span.newsmartpik_meta a{color:#aaa;display:inline-block}span.newsmartpik_meta_date,span.newsmartpik_meta_comment,span.newsmartpik_meta_more{display:inline-block;margin-right:10px}span.newsmartpik_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}span.newsmartpik_meta_comment a:hover{color:#ff675c!important}span.newsmartpik_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}ul.newsmartpik_thumbs2 li a:hover,ul.newsmartpik_thumbs li a:hover{color:#ff675c;text-decoration:none}@media screen and (max-width:1024px) {.newsmartpiklabel1 .widget-content, .newsmartpiklabel2 .widget-content {padding:20px 25px;}.newsmartpik_left {width:50%;float:left;margin:0;padding:0;border-right:none}.newsmartpik_right {width:46%;float:right;margin:0;padding:0;}ul.newsmartpik_thumbs .cat_thumb {width:100%;height:auto;}ul.newsmartpik_thumbs .cat_thumb img {width:100%;height:auto;}ul.newsmartpik_thumbs li {margin:0;padding:0;}span.newsmartpik_title2 {font-size:20px;line-height:1.2em;}span.newsmartpik_summary {font-size:14px;}}@media only screen and (max-width:768px){.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px 20px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs2 li{border-bottom:0}span.newsmartpik_summary,.newsmartpik_left{display:none}span.newsmartpik_title{margin:0 0 5px}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}@media only screen and (max-width:480px){#newsmartpiklabel1-wrapper,#newsmartpiklabel2-wrapper{display:none}}@media only screen and (max-width:320px){.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px 20px}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2{padding:10px 20px 1px 20px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}@media screen and (max-width:260px) {.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2{padding:10px 10px 1px 10px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}</style></b:if></b:if>




Juga, salin dan tempel kode di bawah ini sebelum "</head>"

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newsmartpik_left">'),document.write('<ul class="newsmartpik_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newsmartpik_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newsmartpik_meta">'),1==showpostdate&&(v=v+'<span class="newsmartpik_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newsmartpik_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newsmartpik_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newsmartpik_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newsmartpik_right">'),document.write('<ul class="newsmartpik_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newsmartpik_title newsmartpik_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newsmartpik_meta newsmartpik_meta2">'),1==showpostdate2&&(v=v+'<span class="newsmartpik_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newsmartpik_meta_comment newsmartpik_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newsmartpik_meta_more newsmartpik_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=4,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=75,thumb_width=280,thumb_height=200,thumb_width2=100,thumb_height2=100,no_thumb=&quot; https://lh3.googleusercontent.com/-htHpxFoFKFU/VtfvuTf4DwI/AAAAAAAAEVM/nJicgrZGWlk/s340-Ic42/newsmartpik_thumb.png&quot;,no_thumb2=&quot; https://lh3.googleusercontent.com/-v1FrVSrWAI4/VtfvuOMgx0I/AAAAAAAAEVI/dF8p7IUnk1k/s100-Ic42/newsmartpikthumb_small.png&quot;;
</script>
</b:if>
</b:if>

Selanjutnya cari lagi kode di bawah ini dengan menggunakan tombol "Ctrl + F" bersama-sama dari keyboard pc/laptop nya ya;

<b:section class='main' id='main' showaddelement='no'>

Kemudian, salin dan tempel kode di bawah ini sebelum kode di atas

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newsmartpiklabel1-wrapper'>
<b:section class='newsmartpiklabel1' id='newsmartpiklabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Gadgets' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Label?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newsmartpiklabel2-wrapper'>
<b:section class='newsmartpiklabel2' id='newsmartpiklabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Mobile' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Label?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
Lalu Simpan Tema, bila sudah selesai simpan maka sekarang menuju ke Tata Letak> Klik edit widget yang telah ditambahkan sebelumnya> Isi dengan nama Label situsblog nya.


Nah, itulah Cara Pasang Widgets Label Posts di Blogger Semoga artikel ini dapat bermanfaat bagi sahabat semua. Sekian dan terima kasih...



Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini.



Salam Blogger; https://iyaseo.id/