Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Tutorial Memasang Tombol Share Medsos Responsive Di Blog

Cara Memasang Share Media Sosial Responsive di Blog,- Media sosial ialah sebuah media online yg sangat terkenal dimana penggunanya sanggup berinteraksi dengan pengguna jejaring lain. serta pengguna dengan gampang berpartisipasi, berbagi, serta membuat informasu mencakup blog, jejaring sosial, wiki, lembaga serta dunia virtual lainnya. media umum sendiri kini menso keperluan khusus yg harus dilakukan bagi sebagian orang, bagaimana tidak hampir semua lapisan masyarakat mempunyai media untuk melaksanakan medsos ibarat smartphone serta komputer/laptop.

Baca: Cara Buat Tombol Share di Blog ala EVO Magz

Karena banyaknya orang yg memakai media umum membuat pemilik blog atau web harus pintar-pintar memanfaatkan peluang tersebut dengan cara menempatkan share media umum di blog mereka, hal ini tidak lain ialah cara sempurna meningkatkan visitor blog. sebagai rujukan jika anda pengunjung yg membagikan artikel ke media umum mereka secara otomatis pengguna akun lain yg tertarik dengan artikel tersebut pastinya akan mengklik tautan tersebut yg sangat bermanfaat mendatangkan perhiasan visitor blog.


Nah untuk itu jangan hingga tidak menempatkan sahre media umum di blog anda alasannya tidak cuman akan menambah visitor namun pun akan membuat blog semakin professional dengan share media sosial. namun kebanyakan menempatkan share media umum di blog membuat loading blog menso usang alias tidak responsive. serta untuk itu saya disini akan membagikan cara menempatkan media umum di blog Responsive. untuk tutorial pemasanganya sanggup dilihat dibawah ini.

Cara Memasang Share Media Sosial Responsive di Blog


1. Pertama yg niscaya anda harus masuk ke Blogger.
2. Kemudian masuk ke sajian Template - Edit HTML
3. Selanjutnya silahkan cari kode ]]</b:skin> pada template anda, gunakan (CTRL+F) untuk mempermudah pencarian.
4. Setelah itu copy isyarat CSS dibawah ini kemudian paste sempurna diatas kode ]]</b:skin>

/* -- Tombol Share Medsos Responsive -- */
.article-share{
width: 100%;
display: block;
overflow: hidden;
}
.article-share-fb-cont, .article-share-other-cont {
float: left;
width: 114px;
padding: 5px;
height: 41px;
}
.article-share-tw-cont, .article-share-other-cont, .article-share-like-cont {
float: left;
width: 114px;
height: 41px;
padding: 5px;
}
.article-share-fb, .article-share-tw, .article-share-gp, .article-share-li, .article-share-pi {
float: left;
display: block;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMnbNYqiWFfO_bxwYKvZB4pdXb8G-pokiV-bCHjKhfSIDewCMMB2h1rPd5l0ntn4NXjKxrIInkpfE_JIcV-0mkU5AtW41zeMOe_vv9hrX3a82OJQHpxzkRmKvRfsPLcEXGI6EQ-xGt9E/s1600/share.png') no-repeat;
width: 42px;
height: 41px;
margin-right: 3px;
}
.article-share-fb-label {
color: #2d609b;
}
.article-share-fb-label, .article-share-tw-label, .article-share-gp-label {
float: left;
width: 58px;
height: inherit;
font-size: 12px;
font-family: 'Open Sans Bold', Arial, sans-serif;
line-height: 14px;
margin: 5px 0 0 4px;
}
.article-share-tw {
background-position: 0 -43px;
}
.article-share-tw-label {
color: #00c3f3;
}
.article-share-gp {
background-position: 0 -86px;
}
.article-share-gp-label {
color: #f00;
}


5. Langkah selanjutnya ialah memunculkan tombol share media umum tersebut di blog dengan cara cari isyarat berikut <data:post.body/>, biasanya isyarat tersebut terdapat lebih dari satu silahkan pilih isyarat yg terakhir kemudian copy isyarat CSS dibawah ini serta paste dibawah isyarat tersebut.

<div class='article-share'>
<div class='article-share-fb-cont'>
 <a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
   <a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='article-share-tw-cont'>
 <a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
 <a class='article-share-tw-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='article-share-other-cont'>
 <a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
          <a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='article-share-like-cont'>
 <iframe class='article-share-like' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='padding-top:12px;'/>
</div>
</div>

6. Terakhir tinggal simpan template serta lihat hasilnya.

Bila tombol share tidak muncul silahkan paste isyarat yg ada pada langkah no 5 dibawah isyarat "<data:post.body/>" yg lain. Sekain yg sanggup saya bagikan serta Good luck!

Tutorial Memasang Komentar Disqus Di Blog Responsive

Cara menciptakan kolom komentar disqus di blog,- Beberapa waktu kemudian saya pernah membagikan tutorial mengenai cara menempatkan komentar disqus di blog (blogger), namun alasannya yaitu tutorial tersebut berdampak besar bagi blog menyerupai loading usang serta memiliki dilema terlebih dahulu muncul kotak komentar blog sebelum komentar disqus. nah oleh alasannya yaitu itu saya disini kembali menunjukkan tutorial menempatkan komentar disqus diblog namun kali ini dengan cara eksklusif edit dari template yg akan bermanfaat menciptakan loading blog tidak terlalu lama.

Mungkin banyak dari anda yg pernah melihat komentar disqus di aneka macam blog besar menyerupai blog info atau blog yg menyediakan aneka macam informasi, jangan heran alasannya yaitu komentar disqus memang pilihan terbaik kalau ingin mengganti komentar pada blog. dimana disqus menyediakan layanan yg tidak ada pada jenis komentar lain semacam sanggup berkomentar selain dengan akun disqus menyerupai sanggup memakai akun facebook, twitter, google+. terlebih lagi disqus sanggup menautkan komentar yg ada diblog eksklusif dengan akun disqus.

Terlebih lagi banyak yg mengungkapkan kalau menempatkan komentar disqus di blog akan menciptakan blog semakin SEO yg sanggup menaikan visitor blog. plus kalau memakai komentar disqus pada blog akan menambah backlinks pada blog kalau ada yg klik link dari blog kita pada akun disqus.


Dari semua kelebihan yg jarang dimiliki oleh komentar lain mensokan disqus sebagai pilihan terbaik untuk pengganti komentar di blog, namun menyerupai yg saya katakan diatas kalau menempatkan komentar disqus diblog melalui pemasangan eksklusif dari situsnya menciptakan loading blog akan menso usang alasannya yaitu script komentar disqus dipasang melalui widget blog. nah untuk mengatasi komentar tersebut silahkan gunakan cara yg saya bagikan dibawah ini semoga komentar disqus diblog semakin fast loading serta responsive.

Cara Memasang Komentar Disqus Fast Loading (Responsive)


1. Pertama terlebih dahulu anda harus memiliki Akun Disqus serta memiliki ID disqus tersebut. untuk tutorial membuatnya sanggup baca: Cara daftar serta menempatkan komentar disqus di blog (ID Disqus sanggup anda lihat pada nomer 3 pada tutorial tersebut.

2. Kemudian sebelum menempatkan komentar disqus dengan tutorial ini terlebih dahulu anda harus menyembunyikan komentar bawaan blog, untuk tutorialnya sanggup baca: Cara udah menyembunyikan komentar di blog.

3. Jika semua sudah anda lakukan anda lakukan berikut caranya, silahkan cari kode <div class='comments' id='comments'> di blog anda, kalau sudah ketemu copy arahan CSS dibawah ini serta paste sempurna dibawah arahan tersebut.

<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 600px)&#39;);if (mql.matches){
                var disqus_shortname = &quot;ID DISQUS ANDA&quot;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
                    (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                })();
    var disqus_shortname = &#39;ID DISQUS ANDA&#39;;
    (function () {
        var s = document.createElement(&#39;script&#39;); s.async = true;
        s.type = &#39;text/javascript&#39;;
        s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
        (document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
    }());
}
                </script>


4. Silahkan ganti arahan yg saya beri warna diatas dengan arahan Disqus anda. Terakhir tinggal simpan template serta lihat hasilnya.

5. Untuk cara mengimpor komentar yg usang sudah saya jelaskan pada postingan sebelumnya.

Nah itulah cara menempatkan komentar disqus diblog fast loading (responsive), sekian tips yg sanggup saya bagikan serta good luck!

Tutorial Menciptakan Popular Post Keren Dengan Nomor

Cara Membuat Popular Post bagus dengan nomor,- Dulu di final tahun 2015 aku pernah membagikan tutorial menciptakan popular post anggun warna-warni di blog, nah kali ini aku kembali akan membagikan tutorial menciptakan popular post bagus di blog dengan desain yg aku buat sendiri, untuk demonya sanggup pribadi lihat di template ini. postingan ini aku bikin alasannya ada request dari salah satu pengunjung yg menginginkan gaya popular post dari template ini, alasannya sudah menciptakan kesepakatan makanya aku akan secepatnya menciptakan tutorialnya serta maaf sekali gres sanggup kini buatnya.

Sebelumya apa yg dimaksud dengan popular post? popular post sendiri ialah salah satu fitur yg ada pada sebuah blog yg menampilkan semua entri atau postingan yg paling banyak dilihat oleh pengunjung yg disokan dalam satu daftar widget. Jika anda pemilik blog berplatform blogger pastinya anda sangat mengetahui salah satu fitur popular post ini, alasannya ketika gres pertama kali menciptakan blog widget yg niscaya ada pertama kali ialah popular post. widget ini cukup bermanfaat alasannya tidak hanya menambah page view blog pun akan menciptakan artikel yg unggul tetap bertahan di search google. (ini sih pendapat saya).


Nah buat anda yg tertarik dengan popular post menyerupai di blog ini silahkan ikuti tutorial yg akan aku berikan, yg dimana popular post ini sudah aku kasih nomor yg akan menciptakan tampilan populat post semakin bagus alasannya sanggup dengan gampang melihat peringkat artikel paling popular tanpa menghitung peringkat. terlebih lagi popular post ini aku jamin responsive serta tanpa memberatkan loading blog. Ok pribadi saja berikut tutorialnya.

Cara menciptakan popular post menyerupai blog ini

1. Pertama silahkan masuk ke blogger.
2. Semudian masuk ke sajian template serta klik Edit HTML.
3. Setelah itu silahkan cari isyarat popular post, biasanya isyarat popular post menyerupai #PopularPosts atau .PopularPosts, kalau sudah ketemu silahkan hapus semua isyarat popular post tersebut serta ganti dengan isyarat popular post dibawah ini.

/*Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border-radius:10px;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{border-bottom:1px dashed #ddd;background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.0em .8em .0em!important;counter-increment:num;position:relative;}
.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#333!important}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;font-weight:bold !important;
display:block;
position:absolute;
bottom:0px;
right:0px;
border-radius:16px;
background-color:#555;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #07ACEC;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#fff}
.PopularPosts ul li:nth-child(2){background-color:#fff}
.PopularPosts ul li:nth-child(3){background-color:#fff}
.PopularPosts ul li:nth-child(4){background-color:#fff}
.PopularPosts ul li:nth-child(5){background-color:#fff}
.PopularPosts ul li:nth-child(6){background-color:#fff}
.PopularPosts ul li:nth-child(7){background-color:#fff}
.PopularPosts ul li:nth-child(8){background-color:#fff}
.PopularPosts ul li:nth-child(9){background-color:#fff}
.PopularPosts ul li:nth-child(10){background-color:#fff}

4. Terakhir tinggal simpan template serta lihat hasilnya.

Nah biasanya kalau anda memakai thumnail atau gambar akan menciptakan tampilan popular post kurang yummy dilihat, oleh alasannya itu silahkan nonaktifkan tampilan gambar serta deksripsi popular post. untuk caranya sanggup dilihat dibawah ini.

Cara menciptakan popular post responsive


1. Untuk caranya silahkan masuk ke sajian tata letak.
2. Kemudian klik "Edit" pada widget popular post.
3. Setelah itu pada bab tampilan silahkan hilangkan centang pada thumbnail gambar serta cuplikan.


4. Terakhir tinggal simpan.

Dengan begitu tamilan popular post blog anda hanya akan terdapat judul serta nomor saja, silahkan bereksperimen sendiri kalau tampilan popular post tersebut kurang memuaskan bagi anda. sekian tutorial blog yg sanggup aku share serta terima kasih.