inisiteku

Showing posts with label widget blogger. Show all posts

Cara memasang ShareThis button di posting blogger

Assalamualaikum.

Beberapa saat yang lalu saya sudah share cara membuat share button radiculously responsive dibawah postingan blog.Di kesempatan kali ini saya akan share cara membuat share button dari situs sharethis yang memiliki style yang berbeda dari share button lainnya.

Fungsi dari pemasangan sharethis button ini ialah untuk menggantikan fungsi share buton bawaan blogger,karena share button bawaan blogger dinilai memiliki beberapa kekurangan dari segi style dan fungsi.

Untuk mendapatkan sharethis button secara aman ialah dengan mengunjungi situsnya terlebih dahulu untuk mendapatkan kode,lalu kode tersebut di masukkan kedalam template blogger.

Bagi anda yang ingin sekali memasang sharethis button di blog anda namun belum mengerti caranya,berikut langkah-langkahnya.

A.Cara mendapatkan kode sharethis button

1.Silahkan anda kunjungi situs www.sharethis.com,lalu lakukanlah registrasi,agar lebih cepat anda dapat menggunakan akun facebook dan google plus untuk masuk.

2.Dihalaman homepage sharethis.com,silahkan anda klik Get Tools,seperti contoh gambar dibawah ini.

3.Berikutnya anda akan diminta untuk memilih platform yang di gunakan,karena platform blogger disitu tidak ada maka silahkan anda pilih dan klik www (website),seperti contoh gambar dibawah ini.

4..Berikutnya akan muncul style share button yang sudah tersedia,silahkan anda pilih yang kira-kira anda sukai seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda lakukan kostumisasi share button yang akan anda gunakan,seperti contoh gambar dibawah ini.

Coba anda perhatikan gambar diatas,di halaman tersebut ada beberapa opsi yang cukup menarik,diantaranya adalah:

Selected Service,memungkinkan kita memilih dan menghapus layanan share button ke media sosial yang akan kita gunakan,kita dapat menggantinya sesuai dengan selera kita.
Sharing button,adalah layanan share button ke media sosial yang sudah disediakan oleh pihak sharethis,kita dapat memilih dan memindahkannya ke Selected Service.
Button Size,adalah ukuran dari share button yang akan kita gunakan,disana terdapat 2 size yaitu 16x16 (kecil) dan 32x32(besar).

6.Jika anda telah selesai mengedit? berikutnya silahkan anda klik Get Code.

7.Nanti akan muncul kode seperi contoh gambar dibawah ini.

Coba anda perhatikan gambar diatas.

Untuk nomor 1,silahkan anda pilih website tipe,http atau https,karena pada umumnya blogger menggunakan http,maka pilihlah yang http.
Untuk Nomor 2,adalah kode HTML yang berfungsi sebagai pemanggil script yang dapat dipasang dibagian blog seperti bagian posting dan sidebar.
Untuk Nomor 3,adalah kode script yang biasanya dipasang dibagian atas kode </head> pada template blogger.

B.Cara memasang ShareThis button di blogger

1.Silahkan buka tab baru pada browser,lalu login ke blogger.com seperti biasa.

2.Berikutnya silahkan anda klik Template > Edit HTML.

3.Seperti yang kita ketahui bahwa kode yang kita dapat di situs sharethis adalah seperti contoh gambar dibawah ini (harap perhatikan baik-baik!).

4.Silahkan anda masukkan kode nomor 3 diatas kode

</head>

5.Lalu masukkan kode nomor 2 dibawah kode

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-2'>

atau

<data:post.body/>

(jika anda ingin meletakkan share button dibawah posting).
Jika anda ingin meletakkan share button diatas posting blog,maka silahkan anda letakkan kode tersebut dibawah kode

<div class='post-header'>

atau dibawah kode

<div class='post-header-line-1'/>

6.Berikutnya silahkan anda klik Save untuk menyimpan perubahan.

Silahkan anda kinjungi blog anda,maka sharethis button telah muncul di halaman posting blog anda.

Bagaimana? Cukup mudah bukan?

Demikianlah cara memasang sharethis button di posting blogger,semoga mudah anda fahami dan bermanfaat.

Terimakasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢

Cara memasang share button radiculously responsive

Assalamualaikum,

Share button (tombol berbagi) merupakan salah satu widget penting didalam sebuah blog,dimana keberadaannya yang selain berfungsi sebagai jalan utuk sharing posting ke media sosial,juga keberadaan share button ini dapat membuat tampilan lebih menarik,apalagi jika tampilannya responsive.

Sebenarnya ada banyak share button responsive yang dapat dipasang di blog,namun dari sekian banyak share button,menurut saya share button radiculously lah yang lumayan paling baik dari segi tampilan dan fungsi.

Bagi anda yang ingin sekali memasang share button ini maka dikesempatan kali ini saya akan share caranya.

Cara memasang share button radiculously responsive

1.Pertama-tama silahkan anda hapus terlebih dahulu share button bawaan blogger,caranya dapat anda baca disini.Skip langkah ini apabila anda menginginkan share button bawaan blogger tetap ada.

2.Silahkan anda login ke blogger.com.

3.Berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda cari kode

</head>

6.Berikutnya silahkan anda copy dan paste CSS berikut ini diatas kode </head> tersebut.

<!-- RRSSB Share Button Responsive -->
<link href='https://googledrive.com/host/0B6pfV4RtjIP-UFlraU1XTHZJdjQ' rel='stylesheet' type='text/css'/>

7.Berikutnya anda silahkan anda cari kode

</body>

8.Berikutnya anda copy dan paste JQuery,script berikut ini diatas kode </body> tersebut

<!-- RRSSB Share Button Responsive -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script>window.jQuery || document.write(&#39;&lt;script src=&quot;js/vendor/jquery.1.10.2.min.js&quot;&gt;&lt;\/script&gt;&#39;)</script> <script src='https://googledrive.com/host/0B6pfV4RtjIP-RmRycmhfTDFDeXM' type='text/javascript'/>

9.Berikutnya silahkan anda copy kode berikut ini.

<!-- RRSSB Buttons START -->
      <ul class='rrssb-buttons clearfix'>
        <li class='rrssb-facebook'>
          <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'>
            <span class='rrssb-icon'>
              <svg height='29' preserveAspectRatio='xMidYMid' viewBox='0 0 29 29' width='29' xmlns='http://www.w3.org/2000/svg'>
                <path class='cls-2' d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z' fill-rule='evenodd'/>
              </svg>
            </span>
            <span class='rrssb-text'>facebook</span>
          </a>
        </li>
        <li class='rrssb-linkedin'>
          <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/>
              </svg>
            </span>
            <span class='rrssb-text'>linkedin</span>
          </a>
        </li>
        <li class='rrssb-twitter'>
          <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z'/>
              </svg>
            </span>
            <span class='rrssb-text'>twitter</span>
          </a>
        </li>
        <li class='rrssb-googleplus'>
          <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.703 15.854l-1.22-.948c-.37-.308-.88-.715-.88-1.46 0-.747.51-1.222.95-1.662 1.42-1.12 2.84-2.31 2.84-4.817 0-2.58-1.62-3.937-2.4-4.58h2.098l2.203-1.384h-6.67c-1.83 0-4.467.433-6.398 2.027C3.768 4.287 3.06 6.018 3.06 7.576c0 2.634 2.02 5.328 5.603 5.328.34 0 .71-.033 1.083-.068-.167.408-.336.748-.336 1.324 0 1.04.55 1.685 1.01 2.297-1.523.104-4.37.273-6.466 1.562-1.998 1.187-2.605 2.915-2.605 4.136 0 2.512 2.357 4.84 7.288 4.84 5.822 0 8.904-3.223 8.904-6.41.008-2.327-1.36-3.49-2.83-4.73h-.01zM10.27 11.95c-2.913 0-4.232-3.764-4.232-6.036 0-.884.168-1.797.744-2.51.543-.68 1.49-1.12 2.372-1.12 2.807 0 4.256 3.797 4.256 6.24 0 .613-.067 1.695-.845 2.48-.537.55-1.438.947-2.295.95v-.003zm.032 13.66c-3.62 0-5.957-1.733-5.957-4.143 0-2.408 2.165-3.223 2.91-3.492 1.422-.48 3.25-.545 3.556-.545.34 0 .52 0 .767.034 2.574 1.838 3.706 2.757 3.706 4.48-.002 2.072-1.736 3.664-4.982 3.648l.002.017zM23.254 11.89V8.52H21.57v3.37H18.2v1.714h3.367v3.4h1.684v-3.4h3.4V11.89'/>
              </svg>
            </span>
            <span class='rrssb-text'>google+</span>
          </a>
        </li>
        <li class='rrssb-pinterest'>
          <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/>
              </svg>
            </span>
            <span class='rrssb-text'>pinterest</span>
          </a>
        </li>
      </ul>
<!-- RRSSB Buttons END -->

10.Berikutnya silahkan anda paste kode yang saya berikan pada langkah nomor 9 dibawah kode

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-2'>

atau

<data:post.body/>

(jika anda ingin meltakkan share button dibawah posting).

Jika anda ingin meletakkan share button diatas posting blog,maka silahkan anda letakkan kode tersebut dibawah kode

<div class='post-header'>

atau dibawah kode

<div class='post-header-line-1'/>

11.Jika sudah selesai? silahkan anda klik save untuk menyimpan perubahan.

Silahkan kunjungi blog anda untuk melihat hasilnya.

Demikianlah cara memasang share buttom radiculously responsive pada blogger,semoga bermanfaat.

Terimkasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢

Cara membuat recent post di sidebar blogger

Assalamualaikum.
Recent post adalah sebuah widget artikel terbaru atau posting yang baru diterbitkan di suatu blog,untuk itu keberadaan recent post ini juga dinilai penting.Kenapa? Agar posting yang baru saja terbitkan tersebut mendapat traffic pengunjung yang cukup baik dan tidak kalah dengan artikel atau posting yang lama.

Recent post ini biasanya di letakkan di bagian sidebar blog dengan bentuk mirip popular post,namun ada juga recent post yang dibuat dibagian croscoll (antara header dan posting) dan ada juga recent post yang diletakkan dibagian atas header blog yang bentuknya mirip headline dengan teks/link yang

bergerak.

Bagaimana cara membuat recent post di sidebar blogger?

Karena judul dari tutorial ini adalah cara membuat recent post di sidebar blogger,maka mohon maaf disini saya akan share cara membuat recent post di bagian sidebar blogger saja.

CARA MEMBUAT RECENT POST DI SIDEBAR BLOGGER

1.Pertama-tama silahkan anda login ke blogger.com.

2.Berikutnya silahkan anda klik tata letak,seperti contoh gambar dibawah ini.

3.Berikutnya silahkan anda klik add gadget pada bagian layout sidebar,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda pilih HTML/Javascript seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda masukkan kata artikel terbaru atau terserah anda (pada bagian kolom judul),lalu masukkan kode berikut pada bagian konten.

<style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRcmlNOHhtaDNNMjA'></script><script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;

 var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/>

Sehingga hasilnya akan seperti contoh gambar dibawah ini.

6.Jika sudah? berikutnya silahkan anda klik simpan.

Silahkan anda kunjungi blog anda maka widget recent post akan muncul di bagian sidebar blog anda,

Demikianlah cara membuat widget recent post di sidebar blogger,smoga bermanfaat dan terimakasih atas kunjungan anda.

Assalamualaikum.

Selengkapnya ➢

Cara menghilangkan See More At saat copy paste

Assalamualaikum.
Posting ini saya share bagi anda yang senang menulis tutorial dan berbagi ilmu mengenai blogging dan kode-kode yang dapat di copy-paste oleh orang lain.
Jika anda,menemukan tulisan See More At saat copy-paste di bagian text area postingan anda padahal sebelumnya tidak muncul hal demikian,mungkin anda harus mengecek kembali template anda.
Biasanya tulisan See More At ini muncul karena anda memasang widget share button dari share this,yang biasanya berbentuk script yang harus dipasang di bagian atas kode </head> dan kode HTML yang harus anda pasang di bagian post footer pada template blog.Untuk cara memasang sharethis button di posting blogger,anda bisa baca tutorialnya disini.
Lalu bagaimanakah cara menghilangkan tulisan See more At di blog yang anda miliki?
Sebelum anda menghilangkan tulisan tersebut,ada baiknya anda mengetahui fungsinya terlebih dahulu,karena ini akan menjadi pertimbangan bagi anda sendiri.Tulisan See More At ini berfungsi untuk mengantisipasi copy-paste artikel di blog,karena jika ada seseorang yang mengcopy artikel anda maka hasil copy paste biasanya akan disertai tulisan See More At http://link URL postingan anda.
Jika anda senang menulis hal-hal yang berhubungan dengan kode-kode dan blogging,mungkin anda akan merasa sedikit terganggu karena anda tentunya ingin berbagi konten berupa kode-kode secara utuh.Jika di blog anda sudah terpasang widget share button dari share this,lantas anda ingin menghilangkan tulisan See More At tanpa menghapus share button maka berikut caranya.

Cara menghilangkan See More At saat copy paste
1.Silahkan anda login ke blogger.com seperti biasa.
2.Berikutnya anda klik Template > Edit HTML.
3.Berikutnya anda cari kode seperti berikut ini.

<script type="text/javascript">stLight.options({publisher: "hnnmxxxxxx3m34mm", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

4.Berikutnya silahkan anda ganti kode tersebut dengan kode berikut ini.

<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

5.Berikutnya anda klik save atau simpan untuk menyimpan perubahan.

Silahkan anda kunjungi blog anda dan lakukan copy paste salah satu artikel di blog anda maka tulisan See At More akan menghilang.
Demikianlah cara menghilangkan See At More At saat copy-paste di blog anda.
Semoga bermanfaat,terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Cara memasang badges profile facebook di blogger

Assalamualaikum.
Bagi anda yang sebagian menggunakan blog di blogger.com,tentunya anda ingin sekali mendapatkan banyak teman yang berasal dari pengunjung blog anda yang juga sama-sama menyukai dibidang apa yang anda posting.Jika anda ingin mendapatkan banyak teman dari pengunjung blog yang anda miliki maka ada baiknya anda memasang badges profil akun media sosial yang anda miliki.
Selain dapat menambah teman,pemasangan badges profil sosial media ini juga bermanfaat untuk mempercantik blog dan juga sebagai identitas anda sebagai penulis itu kelihatan.
Untuk saat ini anda tentunya tahu bahwa perkembangan media sosial saat ini semakin pesat,namun dari sekian banyak media sosial yang sering digunakan oleh banyak orang ternyata facebook masih menjadi media sosial yang paling banyak digunakan karena mempunyai banyak sekali kelebihan dibandingkan media sosial lainnya.Maka dikesempatan kali ini saya akan share cara memasang badges profile facebook di blogger,com (blogspot).

CARA MEMASANG BADGES PROFILE FACEBOOK DI BLOGGER (BLOGSPOT)
1.Pertama-tama yang anda harus lakukan adalah login ke akun facebook yang anda miliki lalu kunjungi halaman profile anda.
2.Di halaman profile,silahkan anda klik add a badges to your site,yang letaknya di sebelah tombol view activy log.Contoh seperti gambar dibawah ini.

3.Anda akan dibawa menuju halaman badges profile facebook yang anda miliki,silahkan anda edit layout beserta informasi badges profile facebook tersebut (jika diperlukan).Berikutnya silahkan anda klik other,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda copy kode HTML yang muncul dibawahnya,seperti contoh gambar dibawah ini.

5.Berikutnya kita akan memasang badges tersebut di blog,silahkan buka tab baru pada browser lalu masuk ke akun blogger anda masing-masing.

6.Di halaman dashboard blogger,silahkan anda klik Tata letak > Add gadget pada bagian sidebar,seperti contoh gambar dibawah ini.

7.Berikutnya akan muncul banyak gadget,silahkan anda pilih atau klik HTML&JavaScript,seperti contoh gambar dibawah ini.

8.Nanti akan muncul form input kode,silahkan anda paste kode badges profile yang anda copy dari facebook,seperti contoh gambar dibawah ini.

9.Terakhir,silahkan anda klik save untuk menyimpan perubahan.

Silahkan nada kunjungi blog anda maka badges profile facebook anda kini telah muncul di blog anda.
Demikianlah cara memasang badges profile facebook di blogger,untuk pemasangan badges profile sosial media lainnya akan saya share insyaallah jika masih ada waktu dan kesempatan.
Termiakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Cara mengetahui ID widget blogger

Assalamualaikum.
Widget di blogger merupakan suatu hal penting,dimana keberadaannya cukup membantu kita untuk mengelola konten apa saja yang akan kita tampilkan di blog entah itu label,arsip,popular post,daftar link,pemasangan widget eksternal dengan javascript dan lain sebagainya.
Selain itu keberadaan widget di blogger akan membuat blog kita jauh lebih menarik apabila widget tersebut kita modifikasi sedemikian rupa.
Bagi anda yang saat ini sedang memodifikasi sebuah widget blogger,entah itu label,arsip,popular post dan widget lainnya mungkin anda akan sedikit bingung mencari ID dari setiap widget tersebut,dimana jika anda akan memodifikasi sebuah widget di blogger anda harus mengetahui ID dari setiap widget yang ada di blog anda yang tentunya ada di halaman edit HTML template.
Untuk itu di kesempatan kali saya akan berbagi sebuah cara atau tips mudah dalam mencari ID dari sebuah widget di blogger yang semoga mudah difahami.Untuk mengetahui semua ID dari widget blogger caranya adalah sama,oleh karena itu disini saya akan mengambil 1 contoh saja yaitu cara mengetahui ID widget label.

Berikut cara mengetahui ID widget blogger.
1.Silahkan login ke blogger.com.
2.Berikutnya silahkan anda klik tata letak lalu klik tambahkan gadget,seperti contoh gambar dibawah ini.

3.Berikutnya,silahkan anda pilih widget label,seperti contoh gambar dibawah ini.

4.Berikutnya anda akan diminta untuk mengkonfigurasikan widget label tersebut,silahkan masukkan judul dari widget label tersebut,misal : Label Saya,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.
6.Berikutnya,silahkan anda klik template > Edit HTML.
7.Di halaman edit HTML,silahkan anda cari kode dengan keyword dari judul widget label yang baru anda buat,karena tadi anda menamai widget tersebut dengan nama Label Saya,maka silahkan anda cari kode dengan keyword Label Saya.Untuk lebih mudahnya silahkan anda gunakan CTRL+F jika anda menggunakan komputer.seperti contoh gambar dibawah ini.

8.Jika sudah ketemu,maka anda akan menemukan kode seperti,contoh gambar dibawah ini.

Coba anda perhatikan contoh kode dari gambar diatas,ada 2 kode yang saya beri lingkaran berwarna.

Kode yang saya lingkari berwarna biru adalah kode dari judul widget label yaitu label saya.
Kode yang saya lingkari berwarna merah yaitu kode id='Label2' adalah kode ID dari widget label saya.

Dengan begitu anda sudah dapat mengetahui sebuah ID dari widget label dan untuk mengetahui ID dari widget lainnya seperti popular post,arsip maka caranya adalah sama seperti contoh yang saya berikan diatas.
Lantas bagaimana jika widget di blog kita sudah ada? seperti popular post dengan judul posting terbaik? caranya mudah,yang hanya kita perlukan disini adalah klik template > edit HTML,masukkan keyword posting terbaik maka akan muncul ID dari widget tersebut.
Kenapa judul widget yang harus menjadi keyword? karena setiap ID di sebuah template itu berbeda-beda apalagi jika blog yang anda miliki mempunyai sebuah widget ganda dengan fitur yang sama.

Demikianlah caranya,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Membuat Label Cloud Bergerak di blogger.com

Assalamualaikum.

Bagi anda yang sudah terbiasa memodifikasi template blogger,anda tentunya sudah mengenal apa itu Label yang biasanya terletak dibagian sidebar blog.

Bagi anda yang ingin memodifikasi widget Label menjadi lebih menarik mungkin ada baiknya anda mencoba memodifikasi dengan tampilan cloud bergerak.Contoh tampilannya seperti contoh gambar dibawah ini.

Jika label yang tersentuh oleh kursor maka secara otomatis label tersebut akan bergerak memutar beberapa derajat dan berganti warna.

Anda sudah tidak sabar lagi untuk mencobanya?

Oke,Berikut cara membuat label cloud bergerak.
1.Langkah pertama yang anda harus lakukan adalah login ke blogger.com
2.Berikutnya silahkan anda klik Template > Edit HTML.
3.Berikutnya silahkan anda copy kode CSS dibawah ini.

/* Label style cloud ----------------------------------------------- */ .label-size { margin:0 2px 6px 0; padding:3px; text-transform:uppercase; border:solid 1px #C6C6C6; border-radius:3px; float:left; text-decoration:none; font-size:10px; color:#666 } .label-size:hover { border:1px solid #6BB5FF; text-decoration:none; -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; -webkit-transition:all .5s ease-out; -ms-transition:all .5s ease-out; transition:all .5s ease-out; -moz-transform:rotate(7deg); -o-transform:rotate(7deg); -webkit-transform:rotate(7deg); -ms-transform:rotate(7deg); transform:rotate(7deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand'); zoom:1 } .label-size a { text-transform:uppercase; float:left; text-decoration:none } .label-size a:hover { text-decoration:none }

4.Berikutnya silahkan anda paste kode yang saya berikan diatas tepat diatas kode ]]></b:skin>.
5.Silahkan anda klik save untuk menyimpan pengaturan.

Apakah sudah selesai? belum!
Langkah berikutnya adalah mengganti pengaturan style widget label blogger menjadi style cloud,caranya:
1.Kembali ke dashboard blogger,selanjutnya anda klik tata letak.
2.Di halaman tata letak silahkan anda klik edit pada widget label,seperti contoh gambar dibawah ini.

3.Berikutnya silahkan anda pilih style yang cloud,jika sudah sudah silahkan anda klik simpan,seperti contoh gambar dibawah ini.

Silahkan anda kunjungi blog anda,maka anda akan melihat widget label di blog anda kini telah berubah.
Bagaimana? cukup menarik bukan?
Demikianlah cara membuat label cloud bergerak di blogger.com.
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Menghapus link test this stream di blog

Assalamualaikum.
Bagi anda yang gemar blogging,anda tentunya pernah melihat link berupa logo test this stream didalam halaman blog anda.Jika di klik maka anda akan diarahkan menuju ke alamat streamtest.net yang tentunya membuat loading blog anda akan menjadi sedikit berat.
Link test this stream ini muncul akibat dari kita memasang badges DMCA di blog yang kita miliki.Apa itu DMCA dan bagaimana cara memasangnya di blog berplatform blogger?Anda bisa membaca selengkapnya disini.
Lalu bagaimana caranya menghapus link test this stream tanpa harus menghapus badges DMCA?
Pada dasarnya ketika mengcopy kode HTML untuk badges di situs DMCA,secara default di kode tersebut telah ditanamkan link test this stream dari streamtest.net.Untuk menghapus link test this stream,kita hanya perlu menghapus kode link streamtest.net nya saja.
Bagi anda yang sudah terlanjur memasang badges DMCA,anda tidak perlu khawatir karena anda tinggal menghapusnya saja.

Berikut cara menghapus link test this stream di blog.
1.Pertama-tama yang harus anda adalah login di www.blogger.com dengan menggunakan akun yang anda miliki.
2.Di halaman dashboard,silahkan anda klik salah satu nama blog yang anda miliki (apabila blog yang anda miliki di blogger.com lebih dari 1).Contoh seperti gambar dibawah ini.

.
3.Di halaman berikutnya,silahkan anda klik tata letak,seperti contoh gambar dibawah ini.

4.Jika anda telah memasuki halaman pengaturan tata letak (layout),silahkan anda cari dan klik widget dari DMCA,seperti contoh gambar dibawah ini.

5.Nanti akan muncul kode HTML yang badges dari situs DMCA yang pernah anda copy,seperti contoh gambar dibawah ini.

6.Kode yang saya beri garis kotak warna pada gambar di langkah nomor 5 adalah kode untuk menampilkan link dari streamtest.net,kira-kira kodenya seperti ini.

<script src="https://streamtest.github.io/badges/streamtest.js" type="text/javascript"></script>

7.Silahkan anda hapus kode tersebut.
8.Terakhir,silahkan anda klik simpan.

Silahkan anda kunjungi blog yang anda miliki,maka link test this stream dari streamtest.net sudah tidak muncul lagi,dan loading blog anda akan terasa lebih cepat.
Demikianlah cara menghapus link test this stream di blog.Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

membuat label cloud berwarna di blogger

Assalamualaikum.

Bagi anda yang sedang memodifikasi sebuah template blogger baik itu versi lama maupun versi baru tentunya anda juga menginginkan tampilan blog anda nampak berbeda dari yang biasanya agar terlihat tidak begitu membosankan bagi diri anda sendiri juga pengunjung.

Di tutorial ini saya akan share cara membuat label berwarna pada mode cloud (link label berbaris dari kiri ke kanan).Tujuannya agar terlihat lebih menarik dan tidak begitu memakan tempat di area sidebar blog.

Berikut cara membuat label cloud berwarna di blogger

1.Login seperti biasa ke blogger.com.

2.Berikutnya silahkan anda klik tata letak > add gadgetdibagian layout sidebar lalu anda pilih label.

3.Nanti anda akan diberi 2 buah pilihan tampilan label yaitu daftar dan cloud.Karena kita akan membuat label cloud berwarna,maka silahkan anda pilih cloud lalu klik simpan,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda klik template > edit html seperti biasa.

5.Di halaman pengeditan HTML,silahkan anda cari kode

]]></b:skin>

(untuk memudahkan pencarian silahkan gunakan tombol CTRL+F jika anda menggunakan laptop atau komputer).

6.Berikutnya,letakkan kode CSS berikut ini diatas kode ]]></b:skin>

/* Label Warna ----------------------------------------------- */
#Label1 .cloud-label-widget-content{text-align:center;font-weight:700;padding:5px 0}
#Label1 .cloud-label-widget-content span{display:inline-table;line-height:1.2}
#Label1 .cloud-label-widget-content span a{padding:4px 5px;color:#fff}
#Label1 .label-size{margin:4px 0}
#Label1 .label-size span{background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a{background:#64A071;font-size:15px}
#Label1 .label-size-2 a{background:#5cc9cd;font-size:15px}
#Label1 .label-size-3 a{background:#e24f4f;font-size:15px}
#Label1 .label-size-4 a{background:#f568dc;font-size:15px}
#Label1 .label-size-5 a{background:#38a3ee;font-size:15px}
#Label1 .cloud-label-widget-content span a:hover{background:#007abe}

keterangan:

Teks yang saya beri warna merah adalah kode untuk warna,anda dapat menggantinya sesuai selera anda,untuk mencari kode warna silahkan klik disini.

7.Jika sudah,silahkan anda klik save atau simpan.

Silahkan anda kunjungi blog anda,maka label di blog anda akan terlihat berwarna-warni dan lebih menarik.

Bagaimana? cukup mudah bukan?

Demikianlah cara membuat label\

Selengkapnya ➢

membuat popular post warna-warni v.2

Assalamualaikum.

Beberapa saat yang lalu saya sudah share cara membuat widget popular post warna-warni di bagian sidebar blog.Di tutorial kali ini saya akan share cara membuat popular post warna-warni dengan style yang berbeda,caranya sama namun kode nya saja yang agak sedikit berbeda dan cara ini pun berlaku bagi anda yang menggunakan template default simple blogger baru maupun template blogger lama.

Berikut cara membuat popular post dengan background warna-warni v.2 .

A.Langkah pertama.

Langkah pertama adalah menambahkan widget popular post di bagian sidebar blog,caranya adalah sebagai berikut.

1.Silahkan anda login ke www.blogger.com.

2.Setelah anda berhasil masuk ke halaman dashboard,silahkan klik nama blog yang akan anda pasangi popular post (apabila blog anda lebih dari 1).Contoh seperti gambar dibawah ini.

3.Di halaman berikutnya silahkan anda klik tata letak,seperti contoh gambar dibawah ini.

4.Di halaman pengaturan tata letak,Silahkan anda klik add gadget di bagian layout sidebar,seperti contoh gambar dibawah ini.

5.Nanti akan muncul tab baru berisi berbagai gadget yang bisa kita terapkan di blog,silahkan anda pilih atau klik entri populer,seperti contoh gambar dibawah ini.

6.Berikutnya,silahkan anda hilangkan cecklist atau tanda centang pada bagian tumbnail gambar dan cuplikan,lalu klik simpan.Contoh seperti gambar dibawah ini.

B.Langkah kedua.

Langkah kedua yaitu menambahkan kode css pada bagian template blog.Caranya adalah sebagai berikut.

1.Pertama,silahkan anda klik template,seperti contoh gambar dibawah ini.

2.Di halaman pengaturan template silahkan anda klik edit HTML,seperti contoh gambar dibawah ini.

3.Berikutnya anda akan melihat kode-kode yang membentuk struktur halaman blog anda,silahkan anda cari kode ]]></b:skin>,untuk memudahkan pencarian,silahkan anda gunakan CTRL+F (jika anda menggunakan komputer)

4.Berikutnya silahkan anda masukkan kode berikut ini tepat diatas kode ]]></b:skin> tadi.

/*Popular Post Color 2*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!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;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}
/* Color Style */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

5.Berikutnya,silahkan anda klik simpan.

Terakhir,silahkan anda kunjungi blog yang anda miliki,lihatlah kini tampilan background dan style popular post di blog anda berubah menjadi warna-warni.

Bagaimana? Cukup menarik bukan?

Demikianlah cara membuat popular post warna-warni di blog,semoga bermanfaat dan terimakasih atas waktu anda untuk mebaca tutorial dari saya.

Assalamualaikum.

Selengkapnya ➢

memasang follow button di sidebar blog

Assalamualaikum.

Jika anda sedang membangun sebuah blog di blogger.com atau sekedar mengotak-atiknya sebaiknya anda juga memperhatikan keberadaan follow button.Disamping dapat membuat tampilan blog menjadi lebih baik,social follow button juga mempermudah pembaca blog untuk mengikuti update terbaru blog yang kita miliki di social akun social media yang mereka miliki,maupun melalui rss.

Pemasangan follow button pada umumnya terletak di bagian menu,bawah postingan,pop-up dan sidebar.Cara yang paling mudah adalah memasangnya dibagian sidebar blog,karena kita hanya perlu memasukkan sedikit kode HTML di pada menu tata letak blog.

Bagi anda yang ingin memasang follow button di bagian sidebar blog,baiklah karena di tutorial kali ini saya akan share caranya.

Berikut cara memasang follow button di sidebar blog.

1.Pertama-tama yang harus anda adalah login di www.blogger.com dengan menggunakan akun yang anda miliki.

2.Di halaman dashboard,silahkan anda klik salah satu nama blog yang anda miliki (apabila blog yang anda miliki di blogger.com lebih dari 1).Contoh seperti gambar dibawah ini.

3.Di halaman berikutnya,silahkan anda klik tata letak,seperti contoh gambar dibawah ini.

4.Jika anda telah memasuki halaman pengaturan tata letak (layout),silahkan anda klik tambah gadget pada bagian layout sidebar,seperti contoh gambar dibawah ini.

5.Nanti akan muncul tab kecil yang didalamnya berisi gadget yang dapat dipasang di blog,silahkan anda cari dan klik gadget HTML/JavaScript,seperti contoh gambar dibawah ini.

6.Berikutnya silahkan anda masukkan kode HTML dibawah ini.

<center><a href="http://www.facebook.com/inisiteku" imageanchor="1" style="margin-left: 0em; margin-right: 0.5em;"><img border="0" src="https://lh3.googleusercontent.com/-Wb05KXG3Wd0/VTQ52CBsiKI/AAAAAAAABCk/bpDPUvUEoPg/s32/facebook32x32.png" /></a><a href="http://twitter.com/inisiteku" imageanchor="1" style="margin-left: 0em; margin-right: 0.5em;"><img border="0" src="https://lh3.googleusercontent.com/-L1gmKGdsn3A/VTQ52nMd0UI/AAAAAAAABCo/BUTcZPbV-uo/s32/twitter32x32.png" /></a><a href="https://plus.google.com/101445120067001544041" imageanchor="1" style="margin-left: 0em; margin-right: 0.5em;"><img border="0" src="https://lh3.googleusercontent.com/-gY_ZNIHFFJ8/VTQ517UjOYI/AAAAAAAABCc/aMa31PBBc0U/s32/plus32x32.png" /></a><a href="http://feeds.feedburner.com/inisitekucom" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="https://lh3.googleusercontent.com/-qSPWElCO6KU/VTQ51470j_I/AAAAAAAABCY/navRZA-EAaY/s32/rss32x32.png" /></a></center>

Keterangan:

Teks yang saya beri warna merah adalah ID dari fecebook,twitter,google plus,rss feed,silahkan anda ganti dengan ID anda masing-masing,

7.Jika sudah,berikutnya silahkan anda klik save atau simpan.

Silahkan anda kunjungi blog yang anda miliki,maka follow button telah muncul di bagian sidebar blog yang anda miliki.

Jika anda terbiasa dengan kode-kode,maka anda akan dapat langsung memodifikasi kode yang sudah saya berikan diatas diantaranya adalah mengganti icon dan masih banyak lagi yang lainnya,karena saya yakin anda pasti lebih kreatif daripada saya.

Bagaimana? menarik bukan?

Terimkasih telah berkunjung dan semoga bermanfaat.

Assalamualaikum.

Selengkapnya ➢