Cara Install App Tab Youtube Google+ Pinterest di Halaman Facebook

    Posted by Serba Serbi Bisa Posted on September 24, 2016

    Apa itu Tab App Facebook?
    Facebook adalah sebuah aplikasi sosial media yang begitu populer dan banyak digunakan di seluruh dunia dan sebagai alat komunikasi semua orang. selain bisa membuat akun Profil didalam facebook kita bisa membuat Group facebook dan Halaman atau Fanpage

    Group Facebook
    Biasa digunakan orang sebagai media komunitas, atau perkumpulan orang khusus dan umum yang bisa bersosialisasi didalamnya,

    Halam Facebook / Fanpage
    Biasa Digunakan sebagai website Halaman facebook. banyak difungsikan sebagai alat untuk promosi, produk, bisnis, merek, organisasi, bisnis dll yang didalamnya terdapat profil sebagai Pemilik dan pengelolanya.

    Tab App Facebook adalah sebuah menu tambahan yang terdapat pada halaman facebook berupa tab aplikasi, yang terdiri dari beberapa aplikasi yang bisa ditambahkan kedalam halaman facebook. tab aplikasi facebook ini diantaranya, tab app youtube, Tab App Google+, Tab App Pinterest, dan banyak lagi tab tab aplikasi facebook lainnya yang dapat di pasang di halaman facebook. contoh menu  Tab App yang ditambahan pada halaman facebook punya saya



     Cara Memasang Tab Applikasi di Facebook
    Pertama login facebook terlebih dahulu
    Kemudian ke Pengaturan - Kelola Halaman
    Pilih Halaman Yang anda kelola, jika belum punya halaman anda bisa membuat Halaman terlebih dahulu dengan menekan tombol +Buat halaman Pada facebook.
    Selanjutnya Jika Sudah Masuk di Beranda Halaman kemudian anda buat tab baru di browser dan dan masuk ke alamat https://fbapp.us/  untuk memasang dan memilih Tab applikasi Mana yang anda mau pasang di Halaman Facebook anda.
    Jika sudah Masuk ke https://fbapp.us/ maka tampilannya seperti ini


    Disana ada banyak pilihan tab app yang bisa di install di facebok tinggal klik tulisan Install pada tampilan menu yang tersedia. Jika anda ingin memasang Tab app youtube caranya seperti berikut

    Cara Memasang / Install Tab App Youtube di Facebook
    Pertama Klik Pilihan Install pada menu Facebook Your Apps for Pages. lihat gambar


    Maka akan menuju tanpilan seperti berikut Pilih halaman Facebook Untuk menambahkan Youtube Tab, Klik Tanda Panah kebawah untuk memilih halaman anda. kemudian tekan tombol Tambahkan Tab Halaman. lihat gambar untuk lebih jelasnya.


    Tunggu Beberapa detik untuk menuju halaman Aplikasi settings di facebook.
    Kemudian isilah data data di menu pengaturan Aplikasi settings tampilan nya seperti ini
    Keterangan:
    Pada bagian Youtube Channel ID or playlist ID: 
    Isi dengan ID Channel Youtube anda, untuk mengetahu ID channel youtube
    pertama login youtube menggunakan akun youtube anda kemudian klik ikon Gear yang ada disebelah tulisan Creator Studio pada gambar profil

    Kemudian Pilih Advanced maka disana akan terlihat ID User dan ID Channel youtube anda
    Nah Jika Sudah mengetahui id channel youtube, tinggal dimasukan ke dalam Aplikasi Setting nya

    Untuk mengisi Featured video ID: isi dengan id video yang telah di upload tujuannya untuk menampilkan Thumbnail Video di facebook nya.
    untuk mengisinya, lihat video youtube yang telah di upload, kemudia lihat bagian url nya

    Kemudian tempelkan di kolom Featured video ID nya  Kemudian Klik Save Setting Di bagian bawah. maka semua video yang ada di chanel youtube anda akan di tampilkan di tab Apps facebook ini.

    Untuk menambahkan menu tab apps yang lainnya seperti google+, Pinterest, dan yang lainnya caranya sama seperti diatas. tab apps tambahan ini sangat bermanfaat sekali buat meningkatkan dan trafik, memperbanyak like halaman facebook yang kita kelola, selain itu sebagai alat buat sebuah promosi video video kita di youtube, memperbanyak subscribe, follower google+ dan tentunya masih banyak lagi kegunaan dan manfaatnya. tergantung kita menggunakannya.

    Demikian Tutorial Cara Install App Tab Youtube Google+ Pinterest di Halaman Facebook yang dapat di berikan. dilain kesempatan saya akan memberikan tutorial - tutorial yang lebih menarik lainnya.

    Jika masih ada kesulitan dalam menggunakan Tab Apps ini, bisa hubungi saya atau sekedar bertanya dan diskusi dengan berkomentar di konten ini. silhakan baca - baca lagi artikel -artikel yang terkait sebagai panduan untuk belajar ngeblog anda.

    Semoga dapat membantu dan Semoga berhasil dalam mengikuti tutorial ini, mohon maaf jika ada kesalahan atau kurang jelas dalam pemberian materinya. harap dimaklum karena saya juga hanya seorang manusia biasa yang tak luput dari salah..... hehehe kaya lagu ya!
    Label: , ,

    Cara Membuat Blog Tidak Bisa di Copy Paste

    Posted by Serba Serbi Bisa Posted on September 15, 2016
    Sangat disayangkan jika artikel atau postingan kita di duplikat sama orang lain, istilah kerennya copas konten.. hehehe. Sudah cape - cape nulis artikel ketika sudah jadi tidak tahu diduplikat sama orang, kan bikin kita kesel..!
    cara membuat anti copy paste ini sudah banyak dibahas dibeberapa blog lain, tapi dalam hal ini tidak ada salahnya juga saya membuatnya dan memasangnya juga di blog saya sendiri, untuk sedikit melindungi dari para penduplikat konten/artikel sebuah postingan, karena menurut saya "artikel adalah suatu karya yang patut dilindungi" karena tidak gampang loh.. membuat arikel itu... korban waktu tenaga dan pikiran, jadi alangkah dan sebaiknya kita lindungi artikel - artikel kita ini dari tangan - tangan yang tidak bertanggung jawab, nyomot artikel tanpa izin dan basa basinya..

    Nah.. untuk mengantisipasi hal tersebut disini saya akan membagikan cara Membuat Blog Tidak Bisa di Copy Paste, tapi hanya bagian tertentu saja yang bisa di salin, sebagai contoh yang dapat di copas hanya bagian kode script html saja yang bisa di copy paste.

    Cara Membuat Blog Tidak Bisa di Copy Paste
    Pertama login blogger terus masuk ke tampilan pengeditan html atau editor template Edit HTML

    Cari kode ]]></b:skin> jika tidak ketemu cari kode </Style> Kemudian salin kode berikut dan tempelkan di bagian atas kode tersebut
    .post { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; }
    .post blockquote,.post pre,.post code { -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }
    Ilustrasi:

    Setelah itu Simpan Template anda dan preview untuk mengetesnya.
    Jika postingan anda sudah tidak bisa dicopy paste itu tandanya penempatan kode tadi sudah benar.
    Jika masih ada kesulitan silahkan hubungi saya atau bertanya di kolom komentar.
    Demikian tutorial Cara Membuat Blog Tidak Bisa di Copy Paste semoga bermanfaat
    NB:sumber kode:seocips.com

    Label: , , ,

    Cara Memasang Headline animator feedburner Di Blog

    Posted by Serba Serbi Bisa Posted on September 12, 2016
    sumber gambar : www.ndac.co.uk

    Headline animator adalah aplikasi widget yang disediakan feedburner yang berfungsi untuk menampilkan daftar postingan blog yang ditampilkan dengan slide animasi, headline animator bermanfaat sebagai pengganti untuk menampilkan konten dan artikel terbaru blog kita.
    selain untuk mempercantik blog headline animator feedburner bermanfaat bagi pengunjung untuk mempermudah menjelajahi sebuah blog yang dikunjunginya

    Artikel Lainnya
    untuk membuat Headline animator seperti ini sangat lah mudah
    pertama daftar feedburner jika belum terdaftar bisa langsung daftar ke feedburner.google.com
    jika sudah di halaman feedburner langsung aja ikuti seperti gambar dibawah
    Tentukan dan aktive kan tampilan Headline animator feedburner nya sesuai selera dan


    Selanjutnya pilih Option Choose One dan klik next untuk mendapatkan kodenya
    pilih just gimme the code lihat gambar untuk lebih jelasnya


    Copy paste seluruh kode yang didapat dan tempelkan di widget blog anda atur posisi letak gedget nya supaya lebih menarik


    untuk menambahkan widget headline animator di blog caranya seperti ini:
    buka blogger dan langsung ke tampilan Tataletak dan Tambahkan Gedget lalu pilih HTML/Javascrip, lihat contoh gambar berikut untuk menambahkan gedget di blog


    Selanjutnya Simpan dan lihat hasilnya Headline animator sudah terpasang,
    itulah cara memasang headline animator feedburner di blog, semoga bermanfaat

    Label:

    Cara Membuat Contact Form Yang Simpel

    Posted by Serba Serbi Bisa Posted on September 11, 2016
    Cara membuat kontak form di blog memang banyak caranya, jika anda tertarik dengan kontak form di blog ini cara nya gampang dan sederhanan sesuai dengan judul: cara membuat contact form yang simpel
    Pertama masuk blogger dan langsung ketampilan tata letak dan tambahkan gedget dimana saja terserah anda.
    ilustrasi:
    Jika sudah ditambahkan, Lalu Simpan Pengaturan, Lalu Edit Html dan cari kode sperti berikut

    <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
    Hapus Beberapa kode Hingga tampilan seperti ini
    </b:includable>
    </b:widget>
    </b:section>
    ilustrasi :
    setelah itu simpan template dan kembali ke Tata Letak dan buat entri atau Halaman Baru untuk membuat tampilan Form Kontak nya / untuk menampilkan contact form bisa dibuat didalam Postingan atau halaman. terserah mau dimana dipasangnya.
    copy-paste kode berikut di dalam halaman HTML anda
    NB: Jangan membuatnya di mode compose karena form contact akan berantakan
    <div class="kangobboy-contact-form">
    <div class="form">
    <!-- Custom Contact Form By kang obboy start -->
    <div class="kangobboy-contact-title">
    Contact Form
    </div>
    <form name="contact-form">
    <!-- Name Field -->
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <!-- Email ID Field -->
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>
    <!-- Message Field -->
    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <!-- Clear Button -->
    <input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
    <!-- Send Button -->
    <input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
    <p></p>
    <!-- Validation -->
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    <!-- End Custom Contact Form By kang obboy -->
    </div>
    </div>
    <style>
    .kangobboy-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
    .kangobboy-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #253685; background:#213077; }
    .contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
    .contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ8_OgP4iIrmQf-5eGSpHcE4cQPLnrW3KcPqy3FPqhqA1TSk1mSJzVAtO7n75Kp9zoJ-sh2vsb_Myk0zwwwhgS_xk0bf3VcwNVmFiTs3X6qZLzCdXWL7KsPLidoHKySzHSl-NGHuLdKx0/s320/name-form.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
    .contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSG8BGBNtaHr_Rp8o0GmEY0Z00xhO3LtxBY1Jrb1kJg8sfb_dLFHFhEoVGov7kblq0E7bLB1y5wLhe0jeSjv4u7kYGfnVQRAwKV1SIDlCOMjyapJ-uW_5cRtoMDYz4Gsh6VEeIUJbFEGX/s320/email-form.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
    .contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
    .contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
    .contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
    .contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
    .contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
    .contact-form-button:hover { text-decoration:none; }
    .contact-form-button:active { position:relative; top:1px; }
    .kangobboy-button-color { color:#bdc2da; border:solid 1px #213077; background:#253685; }
    .kangobboy-button-color:hover { background:#213077; }
    .kangobboy-button-color:active { color:#bdc2da; }
    .contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ8_OgP4iIrmQf-5eGSpHcE4cQPLnrW3KcPqy3FPqhqA1TSk1mSJzVAtO7n75Kp9zoJ-sh2vsb_Myk0zwwwhgS_xk0bf3VcwNVmFiTs3X6qZLzCdXWL7KsPLidoHKySzHSl-NGHuLdKx0/s320/name-form.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
    </style>
    Setelah dipasang di halaman atau postingan langsung saja klik Publikasikan.
    Demikian cara membuat contact form yang sederhana di blog. semoga bermanfaat.
    Label:

    Cara Membuat Daftar isi Otomatis Seperti Blog Ini

    Posted by Serba Serbi Bisa Posted on September 05, 2016
    Daftar isi dalam sebuah blog biasa juga disebut SITEMAP sangatlah penting buat sebuah blog untuk mempermudah penjelajahan seluruh isi blog itu sendiri, pada artikel sebelumnya saya sudah menulis artikel tentang Cara membuat Daftar isi secara manual 
    Baca disini : Cara membuat Daftar isi secara manual

    untuk artikel kali ini saya akan membuat Daftar isi Otomatis menggunakan kode javascript..
    tenang aja membuat daftar isi otomatis sangat lah mudah dan simple, contoh daftar isi seperti gambar di bawah ini tidaklah sesulit yang dibayangkan,

    caranya gampang
    pertama login blogger lalu buat halaman dengan mode html
    copy paste kode berikut kedalam halaman html anda.
    <style type="text/css">
    #toc{border-radius:4px;-moz-border-radius:4px;
    width:99%;
    margin:5px auto;
    border:3px solid #282828;
    -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
    -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
    box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
    }
    .labl{
    color:#444;
    font-weight:bold;
    margin:0 -5px;
    padding:1px 0 2px 11px;
    background:-moz-linear-gradient(right,#c1c1c1 0%,#282828 40%);
    background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#282828),color-stop(1,#c1c1c1));
    border:1px solid #c1c1c1;
    border-radius:4px;-moz-border-radius:4px;
    -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
    -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
    }
    .labl a{
    color:#fff;
    }
    .labl:first-letter{t
    ext-transform:uppercase;
    }
    .new{
    color:#2D96DF;
    font-weight:bold;
    font-style:italic;
    }
    .postname{
    font-weight:normal;
    background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
    background:-webkit-gradient(linear,center 60,right 10,color-stop(0.60,#fff),color-stop);
    }
    .postname li{
    border-bottom: #ddd 1px dotted;
    margin-right:5px
    }
    </style>
    <a href="http://kangobboy.blogspot.com" target="_blank">SiteMap By Kang Obboy</a></div>
    <div id="toc">
    <script src="https://yourjavascript.com/9515631132/your-script-sitemap.js" type="text/javascript"></script>
    <script src="https://kangobboy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script></div>
    Keterangan:
    Ganti url yang diberi warna biru dengan url alamat blog anda dan ganti SiteMap By Kang Obboy dengan tulisan yang anda inginkan
    Lalu publikasikan Halaman yang sudah anda buat tadi dan lihat hasilnya, gampang dan simpel kan cara membuat daftar isi secara otomatis.
    demikian cara membuat daftar isi secara otomatis di blogspot semoga bermanfaat

    Jika ada yang masih bingung bisa ditanyakan dengan berkomentar atau kirim email langsung
    terimakasih sudah berkunjung. selamat beraktivitas.

    Label: ,

    Cara Membuat Artikel terkait Dengan Gambar Di Blogspot

    Posted by Serba Serbi Bisa Posted on September 04, 2016
    Membuat Artikel terkait di bawah postingan dengan Thumbnail gambar sangat bermanfaat bagi sebuah blog untuk memudahkan pengunjung untuk menjelajahi srtikel di sebuah blog selain itu blog akan kelihatan meanrik dengan adanya Artikel terkait di bawah postingan blog

    Contoh untuk artikel terkait:


    Cara Membuat Artikel terkait Dengan Gambar Di Bawah Postingan Blogspot
    pertama login blogger dan masuk Dashboard
    Pilih Template dan Edit HTML
    Copy paste kode berikut di bawah kode </Head>
    <!-- Artikel Terkait kangobboy Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:90%;
    min-height:90%;
    padding-top:0px;
    padding-left:8px;
    }
    #related-posts h2{
    font-size: 1.0em;
    font-weight: bold;
    color: blue;
    font-family: Arial,Georgia,Serif;
    margin-bottom: 0.8em;
    margin-top:0em;
    padding-bottom:0em;
    }
    #related-posts a{
    color:blue;
    }
    #related-posts a:hover{
    color:black;
    }
    #related-posts a:hover {
    background-color:#444;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQHaVKzgssfEnTOPUWFaXxfmnmU3lHA3QbhjjZf2rulHy-Ciz_2dKx5AvmV7y_9_MNR0Kq9Zy4mKE6iGWIz2upyB_x9rZmwluMW49duKiOcTeqVQAIchxTNcXEzxh3P16az5X0sv53tTk/s1600/footer+bg.png&quot;;
    var maxresults=5;
    var splittercolor=&quot;#444444&quot;;
    var relatedpoststitle=&quot;ARTIKEL TERKAIT:&quot;;
    </script>
    <script src='http://yourjavascript.com/746349615/scriptobboy.js' type='text/javascript'/>
    </b:if>
    <!-- Artikel Terkait kangobboy End-->
    Kemudian cari kode <data:post.body/> dan copy paste kode berikut di bawah kode <data:post.body/>
    <!-- Artikel Terkait kangobboy Start--><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></div><div style='clear:both'/></b:if><!-- Artikel Terkait kangobboy End-->
     lihat contoh berikut:


    jika sudah simpan template dan coba lihat hasilnya, untuk merubah Tulisan anda bisa mengganti tulisan ARTIKEL TERKAIT dengan tulisan yang agan suka

    jika ada yang perlu ditanyakan silahkan berkomentar atau kirim pesan disini
    Kirim Pesan Anda

    Sekian tutorial Cara Membuat Artikel terkait di bawah postingan blog semoga bermanfaat dan menambah wawasan.


    Label:

    Cara Merubah Ukuran Posisi Postingan Sejajar Dengan header

    Posted by Serba Serbi Bisa Posted on August 25, 2016
    Untuk merubah ukuran template suatu blog setidaknya mengetahui bagian - bagian yang ada di dalam template yang diantaranya terdiri dari:
    Header 
    Main Wrapper
    Side Bar
    Tapi dalam artikel ini saya tidak akan membahas bagian bagian yang ada dalam template
    tapi langsung ketujuan nya yaitu cara merubah atau menambah ukuran posisi postingan agar sejajar dengan header

    untuk penjelasan bagian bagian template anda bisa membaca di disini
    bagian bagian tempalate blogspot
    contoh ilustrasi saya gambarkan dari blog saya sendiri

    nah dibagian itu yang diberi tanda garis merah yang saya maksud

    oke langsung ikuti langkah - langkah berikut
    Login Blogger
    Template
    dan Edit HTML

    Cari Kode berikut .post{
    dan tambahkan kode ini :
    width: 600px;
    padding: 15px;

     Contoh Seperti ini:

    /* Post */

    .post{

    width: 600px;

    padding: 15px;

    border: 1px solid #E0E0DE;

    background: #FFF;

    font-family: Helvetica, sans-serif;

    margin-bottom: 20px;

    }
    sesuaikan ukuran sesuai lebar header blog anda
    width: 600px; / ukuran lebar postingan
    padding: 15px; / ukuran batas sisi kiri postingan
    dan lakukan pratinjau terlebih dahulu untuk melihat pas dan tidaknya ukuran yang telah di rubah tersebut, jika sudah pas simpan template.

    Demikian tutorial ini semoga membantu dan bermanfaat


    Label:

    Cara membuat sosial Media Icon Yang Keren di Blog

    Posted by Serba Serbi Bisa Posted on August 21, 2016
    cara membuat sosial media icon Facebook, Twitter, youtube, dll sperti contoh dibawah sangat lah mudah ikuti langkah - langkah berikut:
    Twitter Facebook Google Plus LinkedIn Pinterest Instagram Youtube Channel

    1. Login Blogger / Dashboard anda 
    2. Pilih Tataletak dan 
    3. Tambahkan Gadget dan HTML/ Javascript 
    4. Copy paste kode berikut 

    <div id="top-social-profiles">
    <div dir="ltr" style="text-align: left;" trbidi="on">
    <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
    <tr><td style="text-align: center;"><a href="    http://www.twitter.com/kangobboy/" target="_blank"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9GzCLSMFxZcR_UcFJGdjVmzHWEjnX59yMTGqz25vb5EbGCor7FfxhT0WRKm1bFKIdqo6ufZIQGtqHqXRamxhxyIhLcBvTlNiwUKbQjQjO8QbHGNS2A6BL9DZAIYVGwTNDEn4ojzHDz_v/s34/twiter.png" title="Twitter" /></a>
    <a href="    http://www.facebook.com/kangobboy/" target="_blank"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64ZG8kYpYqCfzOL1twI-YkoKJWrE3RFyKaFQljUO5eN9UEV7ngORSZuunrGwvn39FeZuOWjJSY-VQyarqP67qRsQYsYJISLRtCGmPquxW-lhRc-Me9mhX7CyOeHZT8wbFSHuTuZh107Xx/s34/fb.png" title="Facebook" /></a>
    <a href="http://plus.google.com/117410149211688397255/" target="_blank"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPacJ78F_bfJAY9AQfSF-72Ol6bRRI5YZT4uWosHNaX9vP1-URs0PcfklXuRwbmTDSUe8UFcBSHZfldjzAj0ds341cUrU9rkR1x4do_xO96wLwiMb7tBm9TR74rbSyYTF5G4gsf-2Qx3tp/s34/gp.png" title="Google Plus" /></a>
    <a href="    http://www.linkedin.com/in/kangobboy" target="_blank"><img alt="LinkedIn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcPfJ216_EsnmMmY19Qh0YAKQkLT9bmQYUwaX60O3mWuXsxjhUBk8UC3G58N6RxqWbO_WP2o9B_ZlkFPJHOJKOtu63JZlAuaqptjs8ZKpDH4AlrleYGEvTH-Fp9NDigNqAbDz8Typl6Rz/s34/linked.png" title="LinkedIn" /></a>
    <a href="    http://www.pinterest.com/kangobboy/" target="_blank"><img alt="Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtP2XWOUHq-aj1ynSyMoVcD9Ua1fEq236-gowbC-tDqcHFYlBJqYyYDvJEDfG3R4F-udoqZ9jdifP3yc3epM3jeyf9TfMVOLbsxlu1QlrQR5hAPqdOlbJC44tujP0MmXJQZX8BvaPt52H/s34/Pinterest.png" title="Pinterest" /></a>
    <a href="    http://instagram.com/akangoboy" target="_blank"><img alt="Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-c0ixHW3P8mhkq0KSbesJvQVoCjNeHjJxcl-fa-b3Ae8hPNYFK6_qhWkLxlo2NrPW7Kwzo_k6Arbk4kyBEHCq3ODXGTqvWvz4_ymInFf3BcUaweagfVdep58cRUM_KU7G3gTFprGp6w1/s34/instagram.png" title="Instagram" /></a>
    <a href="    http://www.youtube.com/channel/UC8lNpfo1lrFjHt4HRv8EVrg" target="_blank"><img alt="Youtube Channel" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJN4umFl-Ulx1YEV4OoPyKWjQhxZHXZM4q2FqSDNo4U4YNovYOEJ5tJU0acUM0LovhktwkXSxEHcwvi3opaDptNHT8sM0cTtvFM-C6FaHixw66a2eZhq7TXWzSckiqp5NsSJQKr_JnK_P/s34/youtube.png" title="Youtube Channel" /></a>

    Dan Simpan Javascript
    Lihat hasil Sosial Media icon sudah terpasang di Blog anda

    Keterangan:

    • Ganti url dengan url akun media sosial anda
    • contoh url yang diberi warna Biru


    Demikian Cara membuat sosial Media Icon Yang Keren di Blog Semoda bermanfaat
    Label:

    Cara Membuat Menu Disertai dengan sosial Media Icon Di Blog

    Posted by Serba Serbi Bisa Posted on August 21, 2016

    Membuat Menubar dengan tombol sosial media seperti Facebook, Twitter, Youtube, Instagram, dll, di blog adalah salah satu kriteria untuk mempercantik sebuah blog selain itu sangat penting sebagai alat untuk mempermudah pengunjung dalam menjelajahi isi blog, mengarahkan link kesebuah artikel yang penting dan tentunya ada banyak manfaat yang bisa didapat dengan adanya Menubar dengan tombol sosial media ini. disamping itu blogger sendiri merekomendasikan untuk menambahkan navigasi menu ini didalam blog. untuk membuat menu dengan disertai sosial media acon memang sedikit rumit dan perlu ketelitan dalam penempatan script atau kode html nya. Jika sudah familiar dengan kode kode html atau lebih dikenal dengan sebutan javascript maka langkah membuat menubar seperti ini tidak akan sulit.

    Contoh menu bar yang akan dibuat adalah seperti gambar dibawah ini, jika anda tertarik untuk membuatnya silahkan ikuti langkah - langkah berikut ini


    Cara Membuat Menu Disertai Dengan Sosial Media Icon
    Pertama Login Blogger kemudian cari pengaturan Template dan Edit Html
    Pada tampilan Editor cari kode
    </Style>
    Salin kode dibawah ini dan letakan tepat di atas kode </Style>
    /* NAVIGATION MENU */
    .menu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}
    .nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
    .nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}
    .nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
    .nav-menu li a:hover{background:#f5f5f5}
    ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:right}
    ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
    ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}
    ul.nav-social li a i{line-height:38px}
    ul.nav-social li a:hover{color:#fff}
    ul.nav-social li a.fcb:hover{background:#3B5A9B}
    ul.nav-social li a.gpl:hover{background:#DD4B39}
    ul.nav-social li a.twt:hover{background:#1BB2E9}
    ul.nav-social li a.ytb:hover{background:#ED3F41}

    Setelah itu copy paste kode dibawah dan letakan di atas kode <div class='header-wrapper'>
    jika tidak menemukan kode tersebut cari kode yang <div id='header-wrapper'> atau <header id="header-wrapper">  kode tersebut tidak harus jadi patokan yang penting ketemu elemen Div header nya.
    <div id='nav-wrap'>
    <nav class='menu'>
    <!-- primary navigation menu start -->
    <ul class='nav-menu'>
    <li><a href='http://www.kangobboy.blogspot.com/p/about-me.html'>About me</a></li>
    <li><a href='http://www.kangobboy.blogspot.com/p/about-us.html'>Contact Us</a></li>
    <li><a href='http://www.kangobboy.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
    <li><a href='http://www.kangobboy.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
    </ul>
    <!-- primary navigation menu end -->
    <!-- social media button start -->
    <ul class='nav-social'>
    <li><a class='fcb' href='https://www.facebook.com/playpgi/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
    </li>
    <li><a class='gpl' href='https://plus.google.com/u/0/117410149211688397255' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
    </li>
    <li><a class='twt' href='https://twitter.com/kang_obboy' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
    </li>
    <li><a class='ytb' href='https://www.youtube.com/channel/UC8lNpfo1lrFjHt4HRv8EVrg' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
    </li>
    </ul>
    <!-- social media button end -->
    </nav>
    <div class='clear'/>
    </div>

    Selanjutnya langkah untuk menampilkan icon sosial medianya salin kode berikut dan letakan persis diatas kode </Head>
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
    Kemudian Simpan dan selalu lakukan pratinjau terlebih dahulu untuk melihat perubahan pada blog
    Jika tidak ada kesalahan di setiap langkah - langkah cara diatas seharusnya menu dengan media sosial icon sudah di blog anda sudah bisa ditampilkan. jika belum berhasil lakukan pengecekan dengan teliti dan lakukan "Ctrl + Z" pada keybboard untuk mengembalikan pengaturan kesebelumnya dan jangan lupa setiap mengedit template sebaiknya lakukan back up tempalte terlebih dahulu untuk menghindari kegagalan dalam pengaturan template.

    Demikian Cara Membuat Menu dengan sosial Media Widget di Atas Header Blog yang bisa diberikan semoga berhasil. Jika masih kesulitan segera hungungi saya atau bertanya di kolom komentar, terimakasih sudah berkunjung semoga bermanfaat.
    Label: ,

    Cara membuat daftar isi manual di blog

    Posted by Serba Serbi Bisa Posted on August 20, 2016
    www.tookatarh.com
    Fungsi daftar isi secara umum adalah untuk memudahkan pembaca untuk menemukan halaman dengan cepat sebagai bahan bacaan untuk dibacanya. Daftar isi pada blog tidak jauh beda kegunaannya yaitu untuk memudahkan pengunjung dalam pencarian konten untuk dibaca karean daftar isi yang lebih dikenal dengan sitemap ini sangat penting dan bermanfaat untuk pengunjung dalam menjelajahi isi blog, membuat daftar isi pada blog ada 2 cara yaitu dengan cara manual dan otomatis

    Cara membuat daftar isi secara Manual
    ilustrasi contoh daftar isi



    daftar isi seperti contoh diatas bisa dibuat dengan manual
    Login Blogger
    Rancangan/Design
    Buat Halaman/Page Baru
    pilih mode HTML
    dan Copy paste kode berikut:

    <style>
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ0H5Msns1C36YoyN6Na3tQUC6KhjUN5Bs7SGENCHKqyMSRVhjtv9KW9pMKOqeyaizo6KqgsEi4EvQdy1426HoUzs1OxkH77-yJUpI5Pp7M-1-pefyjuxdJFJgWkMgVXgokCktftotVW6d/") no-repeat left center;
    line-height:1.5em;
    padding:3px 0px 3px 20px;
    }
    </style>
    <div style="background-color: #FFFFFF; border: 0px solid rgb(68, 67, 67); height: 300px; margin: 0px; overflow: auto; padding: 3px; width: 450px;">
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/08/fuchsia-os-terbaru-dari-google.html">Fuchsia OS Terbaru Dari Google</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/08/6-alasan-sepele-malas-pergi-bekerja.html">6 Alasan Sepele Malas Pergi Bekerja</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/08/cara-menghapus-navbar-di-blogspot.html">Cara Menghapus Navbar Di Blogspot</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/08/cara-membuat-quete-pada-blogspot.html">Cara Membuat Quete Pada blogspot</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/08/cara-membuat-icon-blog-anda-sendiri.html">Cara Membuat Icon Blog anda sendiri</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/08/gaji-pas-pasan-punya-mobil-punya-rumah.html">Gaji pas pasan punya mobil punya rumah dan istri cantik</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/07/cara-instal-pokemon-go-di-laptop-dengan.html">Cara Instal Pokemon Go Di Laptop Dengan Bluestacks</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/07/pt-terasys-virtual.html">PT. Terasys Virtual</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/07/boyaa-inggris-texas-holdem-poker.html">Jual Beli Chip Boyaa Inggris (Texas Holdem Poker) 2016</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/07/mengatasi-problem-with-cooling-system.html">Mengatasi a problem with the cooling system has been detected</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/07/pokemon-go-indonesia.html">Pokemon Go Indonesia</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/06/cara-menebak-tulisan-yang-disamarkan.html">Cara Menebak Tulisan yang disamarkan pada Gambar</a></div>
    <div class="list">
    <a href="http://kangobboy.blogspot.co.id/2016/06/cara-memperbaiki-menu-sleep-tidak-aktif.html">Cara memperbaiki menu sleep tidak aktif di windows 7</a></div></div>
    membuat daftar isi secara manual memang sedikit ribet tapi kita bisa menentukan dan mengurutkan konten konten dengan keinginan kita sendiri. itulah keuntungan membuat daftar isi  dengan metode seperti ini, jika ingin membuat daftar isi secara otomatis anda bisa membaca di artikel yang lain, sudah saya siapkan bahannya silahkan baca juga tutorial cara membuat daftar isi secara otomatis selain ga ribet kita tidak perlu untuk memasukan link postingan kita lagi. silahkan klik link nya untuk menuju tutorial cara membuat daftar isi secara otomatis
    Demikian tutorial cara membuat daftar isi secara manual yang bisa saya sampaikan semoga berhasil dan bermanfaat.

    NB:
    • Ganti semua URL dengan alamat URL postingan blog anda contoh yang di beri warna biru 
    • Untuk merubah ukuran ganti bagian ini 
    height: 300px; margin: 0px; overflow: auto; padding: 3px; width: 450px
    • untuk : height: 300px dan width: 450px
    Label: ,

    Cara Menghapus Navbar Di Blogspot

    Posted by Serba Serbi Bisa Posted on August 15, 2016
    Apa itu Navbar?
    Navbar atau bisa disebut Blogger Navigation Bar adalah sebuah aplikasi bawaan blogger yang berupa frame yang berfungsi direct langsung ke blogger.com, kotak pencarian, share botton Google+
    yang bisa bermanfaat untuk para blogger untuk ngeblog
    Blogger Navigation Bar
    Terkadang Sebuah Navbar di blog kita kurang sedap di pandang tidak sedikit para blogger menghilangkan Blogger Navigation Bar ini.

    Untuk menghilakan navbar pada blog

    Untuk menghilangkan navbar blogger, dimulai dengan login ke Blogger. Silahkan ikuti langkah-langkah berikut ini : Untuk template klasik Sign in di blogger Klik menu Template Klik menu Edit HTML Copy seluruh kode yang ada lalu save di komputer sebagai backup Copy kode dibawah lalu paste di atas kode </style>
    /* hilangkan navbar kang.blogspot.com */
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }  

    Klik tombol Simpan Perubahan Template Selesai. Untuk template baru Sign in di blogger Klik menu Layout Klik menu Edit HTML Klik link bertuliskan Download Template Seluruhnya, lalu save sebagai backup. Copy kode berikut lalu paste di atas kode 
    <b>]]></b:skin>
    /* hilangkan navbar kang.blogspot.com*/
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }
    Klik tombol Simpan Template Selesai.
    Label:

    Cara Membuat Quete Pada blogspot

    Posted by Serba Serbi Bisa Posted on August 14, 2016
    Quete pada blog adalah sebuah kutipan yang berisi kata kata atau kode html supaya terlihat menonjol atau menarik para blogger sering menggunakan nya isi postingan berupa kode HTML dan kata kata penting atau kutipan..
    Tanda Quete

    nah untuk membuat quete itu sendiri bisa dilakukan dengan berbagai cara
    bloggspot sendiri sudah menyediakan fitur tersebut yaitu dengan mengklik tanda kutif dua di menu bar..

    untuk mepercantik quete dengan menggunakan kode sperti berikut

    <div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: #eeeeee none repeat scroll 0% 0%; border: 1px solid #dddddd; overflow: auto;"> <blockquote> Isi Text atau kode anda disini  </blockquote></div>

    Nah itulah cara membuat quete pada postingan blogspot

    semoga tutorial ini bisa membantu terimakasih..
    Label:

    Cara Membuat Icon Blog anda sendiri

    Posted by Serba Serbi Bisa Posted on August 14, 2016
    apa itu icon blog?
    icon blog

    icon blog atau favicon adalah sebuah logo atau gambar yang terletak di bagian atas browser di bar url
    jika anda ingin mengubah icon tersebut sangat mudah..

    Bagaimana cara mengubah icon tersebut?
    copy paste kode html berikut di setelah kode <Head>

    <link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
     kemudian ubah kode yang di beri warna merah dengan url image yang kamu punya
    bisa dari www.picasaweb.google.com
    http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon
    bagian kode ini yang harus anda ubah untuk mengganti icon blog anda sendiri

    demikian tutorial  Cara Membuat Icon Blog anda sendiri
    semoga dapat membantu...
    Label:

    Cara Menambahkan Join This site widget

    Posted by Serba Serbi Bisa Posted on June 12, 2016
    Join This Site adalah salah satu widget dari blogger yang berfungsi sebagai tombol pengikut sebuah blog dan memudahkan seorang pengunjung untuk mengikuti sebuah blog hanya dengan menekan tombol join this site
    tampilan widget join this site default ini lengkap dengan gambar foto pengikutnya
    untuk menambahkan widget caranya sangat gampang

    • Pertama Masuk Blogger pilih Tata Letak - Tambahkan Gadget
    jika blog sudah mempunyai pengikut maka foto pengikut akan di tampilkan seperti terlihat pada contoh gambar paling atas.

    Jika Hanya ingin menampilkan Tombol Join This site nya saja tanpa disertai Foto Pengikut caranya seperti berikut:



    • Pertama Masuk Blogger pilih Tata Letak - Tambahkan Gadget - Pilih Javascript
    • Copy kode berikut dan letakan di kolom javascript
    <a href="http://www.blogger.com/follow-blog.g?blogID=7181708905935705742"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BIBdLwuItZC9WI3UbATsoOp965JHPhIJ4GrdNA4mDAB5xXc9r4XPnNtJaK_40p3ZDD1vDrWP6tL78D9vAlsVqOqtkseeeAzvniR3Xg-y-ynkOe2Lfr8_mc7ugqsrque6dJwWMNQbhx-J/s1600/Join+this+site.png"/></a>

    • Ganti  kode ini 7181708905935705742 dengan Blog ID anda

    NB:
    Cara Mengetahui Blog ID adalah dengan masuk ke dasboard blog anda disitu akan terlihat Blog ID nya

    • Langkah Terakhir Adalah Klik Simpan
    • Dan Tombol This Site Sudah terpasang di blog anda tanpa disertai dengan Foto pengikutnya
    Itulah Cara Menambahkan Widget Join This Site Secara Deafult dan Hanya Menampilkan Tombol Join This Site nya Saja Semoga Bermanfaat.

    Tinggalkan Jejak anda Dengan Berkomentar. terimakasih
    Label:

    Cara Membuat tampilan popular post lebih ramping

    Posted by Serba Serbi Bisa Posted on June 12, 2016
    Popular Post adalah sebuah widget yang disediakan oleh blogger untuk mepercantik blog dan bisa meningkatkan page view sebuah blog dengan memasang widget ini bisa meningkatkan pengunjung blog untuk mengklik post kita sehingga page view blog jadi bertambah

    jika tidak tertarik dengan widget post popular bawaan blog yang bisa menyita page blog semakin luas atau semakin penuh dan sempit, nah untuk merampingkan widget ini ada caranya, jadi jangan khawatir dengan tampilan widget bawaan blogger yang kurang enak di lihat

    pengaturan nya tidak serumit apa yang kita pikirkan hanya dengan penambahan kode di CSS.
    Cara membuat tampilan Popular Post lebih ramping ini akan dibahas di blog ini


    ini contoh post popular
    • Login Blogger dan Masuk ke pengaturan Tata Letak - Tambahkan Widget - Pilih Entri Populer
    • Centang thumbnail gambar dan klik Simpan



    • Setelah widget di tambahkan sekarang mengatur tampilan widget Popular post agar menjadi Ramping di blog
    caranya adalah copy kode CSS berikut dan tambhahkan ke CSS blog anda


    /* Merampingkan Widget popular post by kangobboy.blogspot.com  */
    .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;
    font:normal normal 11px/1.4 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
    color:#666666;
    }
    .PopularPosts ul li img {
    display:block;
    margin:0 .5em 0 10%;
    width:35px;
    height:35px;
    float:left;
    }
    .PopularPosts ul li {
    background-color:#f3f3f3;
    margin:1% .5em -5% 0;
    padding:.5em 1.5em .5em .5em;
    position:relative;
    }
    .PopularPosts ul li:before,
    .PopularPosts ul li .item-title a {
    font-weight;
    font-size:120%;
    color:inherit;
    text-decoration:none;
    }
    • Masuk Dasboard Blogger pilih Template dan Klik Sesuaikan
    • Pilih Tingkat Lanjutan dan Tambahkan CSS Letakan kode script yang di paling bawah

    NB:
    Untuk mengganti warna background rubah kode yang berwarna merah dengan kode warna kesukaan
    .PopularPosts ul li {  background-color:#f3f3f3; << ganti kode warna merah dengan kode kesukaan
      margin:1% .5em -5% 0;  padding:.5em 1.5em .5em .5em;   position:relative;

    Untuk mencari kode warna anda kesini www.color-hex.com

    • kemudian Terapkan ke Blog anda jika sudah selasai dan tampilan widget Popular post anda sekarang jadi ramping
    Demikian Cara membuat tampilan Popular Post lebih ramping Semofa bermanfaat
    Jangan Lupa tinggalkan jejak anda dengan berkomentar
    Label:
    loading...
    | Serba Serbi Bisa © 2016-2017. All Rights Reserved.
    | Powered By Blogger