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

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.

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/