BLog: CSS

Showing posts with label CSS. Show all posts

Monday, March 11, 2019

Sekilas Isu Trik Menciptakan Popular Post Anggun Warna Warni

Cara Membuat Popular Post Keren Warna-warni - Kali ini Blog Espada akan menawarkan tutorial nih, yang dikhususkan bagi yang ingin menciptakan Widget popular post menjadi lebih menarik berwarna-warni ibarat template Premium Evomagz, Tampilanya ibarat dibawah ini!

Popular post merupakan suatu widget yang menampilkan daftar isi dari Blog yang paling banyak dilihat oleh pengunjung Blog. Widget ini juga bermanfaat untuk menambah page view dari Artikel yang masuk dalam popular post yang bisanya di pasang di sidebar,

Dengan menciptakan widget popular ibarat diatas sanggup menciptakan blog anda lebih menarik dengan tampilan warna-warni dan agar aja sanggup lebih menarik perhatian dari pengunjung Blog anda.

Bila anda tidak percaya dengan Tampilan widget popular Post diatas, atau anda menerka itu Hoax silahkan Live demo di template blog ini. Ok pribadi aja kalau anda ingin membuat Widget Popular Post warna-warni di Blog anda dan Bisa anda sesuaikan warnanya sendiri sesuai selera anda.

Cara Membuat widget Popular Post warna warni

Silahkan anda Login ke akun Blogger anda
Kemudian pilih Template dan Edit HTML
Kemudian Copy Code CSS di bawah ini dan Paste diatas ]]></b:skin> atau </style>

/*Widget Popular post by */
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin: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}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!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;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:#A51A5D}.PopularPosts ul li:nth-child(2){background-color:#F53477}.PopularPosts ul li:nth-child(3){background-color:#FD7FAA}.PopularPosts ul li:nth-child(4){background-color:#FF9201}.PopularPosts ul li:nth-child(5){background-color:#FDCB01}.PopularPosts ul li:nth-child(6){background-color:#DEDB00}.PopularPosts ul li:nth-child(7){background-color:#89C237}.PopularPosts ul li:nth-child(8){background-color:#44CCF2}.PopularPosts ul li:nth-child(9){background-color:#01ACE2}.PopularPosts ul li:nth-child(10){background-color:#94368E}.cloud-label-widget-content{text-align:left}.label-size{display:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px}.label-size:hover{border:1px solid #000;color:#000!important}.label-size a:hover{color:#000!important}

Silahkan Ganti kode warna diatas sesuai impian anda

Simpan Template dan lihat hasilnya

Demikian artikel Cara Desain widget Popular Post warna Warni, Sekian yang sanggup saya bagikan kurang lebihnya saya mohon maaf dan Terima Kasih

Sekilas Gosip Trik Mengembalikan Blogspot.Co.Id Menjadi [Dot]Com

Cara mengganti domain Blogspot.co.id menjadi Blogspot.com - Sejak tanggal 3 September 2015 pihak Blogger sudah memberlakukan domain blogspot.co.id di indonesia, Sebenarnya perpindahan domain Blogspot [Dot] Com ke [Dot] Co.id ini sudah dibahas semenjak 2012 kemudian oleh pihak Blogger namun gres sanggup terealisasi pada hari (3/9/2015).

Kenapa sih domain Blogspot [Dot] com harus di ganti ke domain [Dot] co.id? Sama halnya ibarat di negara lain ibarat Jepang yang memakai [Dot] jp atau [Dot] co.uk di inggris, dan domain Blogspot [Dot] com hanya akan dipakai di Amerika serikat saja.

Dikarenakan Google akan menyesuaikan akun Blogger kita dimana pengunjung mengakses Blog kita, Misalnya jikalau pengunjung dari indonesia mengakses blog kita Maka domain blogspot menjadi.co.id, sama halnya jikalau orang dari inggris mengakses blog kita maka domainnya menjelma Blogspot.co.uk. Namun itu tidak akan besar lengan berkuasa jikalau pengunjung memakai pengubah alamat Ip Browser misalnya Ekstensi Anonymox.

Dengan bergantinyaa domain Blogspot[Dot]com menjadi Blogspot[Dot]co.id di indonesia menjadikan blog menyebabkan beberapa duduk kasus diantaranya :

Permasalahan Iklan Google Adsense tidak muncuk
Turunnya Alexa Rank
Memiliki duduk kasus jikalau anda memakai menggunakan Comment Disqus atau Facebook di Blog
Menimbulkan beberapa duduk kasus di Webmaster, Bing, dll.

Khusus untuk mengatasi permasalahan di Webmaster, Bing dll. anda sanggup tetap mempertahankan domain Blogspot.com jikalau sebelumnya anda mendaftarkannya dengan Domain Blogspot[DOT]Com, Namun jikalau anda mendaftarkannya dengan domain Blogspot[DOT]Co.id maka tidak perlu melaksanakan cara ini.

Akan Tetapi jikalau anda Kurang suka dengan Domain .co.id anda masih sanggup mengembalikannya menjadi .com, Silahkan ikuti langkah-langkah di bawah ini!

Cara Merubah domain Blogspot[dot]co.id menjadi [dot]com

Silahkan masuk ke akun Blogger anda
Kemudian pilih Template dan klik Edit HTML
Selanjutnya silahkan Copy code dibawah ini dan Paste dibawah <head>

<script type="text/javascript">
var blog = document.location.href.toLowerCase();
if (!blog.match(/\.blogspot\.com/)) {
blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");
window.location.replace(blog);
}
</script>

Terakhir Simpan Template
Selesai

Silahkan Cek apakah domain Blog anda masih blogspot[Dot]co.id atau sudah menjelma Blogspot[Dot]com, kalau sudah berganti maka domain Blogspot.com anda sanggup dilihat di negara manapun. Sekian yang sanggup saya bagikan, Semoga bermanfaat dan Terima Kasih

Sunday, March 10, 2019

Sekilas Gosip [Update] Trik Buat Tombol Share Di Blog Ala Evo Magz

Cara menciptakan dan memasang tombol share sosial media di Blog Seperti Evo Magz - Memasang tombol share sosial media di Blog merupakan salah satu cara yang sanggup meningkatkan jumlah pengunjung di blog, Sebagai referensi bila ada pengunjung yang mengunjungi salah satu artikel blog anda dan pengunjung tersebut membagikan/menshare artikel tersebut, maka otomatis salah satu artikel yang di share tadi bila menarik perhatian orang lain akan di Klik/dikunjungi. Itulah manfaat memasang tombol share di Blog, Oleh alasannya yakni itu kali ini aku akan membagikan Cara menciptakan atau memasang Tombol share di bawah postingan blog.

Bukan hanya Tombol share biasa, yang aku share ini yakni Tombol Share media umum karya Mas Sugeng yang di pasang di template Evo Magz (template Blog terbaik buatan mas sugeng)

Tertarik memasang Tombol share media umum ibarat diatas, Jangan khawatir bila tidak sesuai dengan template yang anda gunakan, ditutorial ini akan aku jelaskan cara menyesuaikannya. Ok pribadi aja.

Cara Membuat Tombol Share media umum Seperti Evo Magz.

Pertama silahkan masuk ke Akun Blogger anda dan plih Template - Edit HTML
Setelah itu cari kode ]]</b:skin> atau </style> (Untuk mempercepat pencarian silahkan, CTRL+F pada keyboard)
Jika sudah ketemu silahkan copy code CSS dibawah ini dan paste di atasnya

/* Social Share Buttons ala Evo Magz*/
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVONaJc6k2xzVANAjufgI4bQk8VZPDmwA2xoUoFcGXJhiguB6UGOfpk2mssCdfgWCYkkRVASsyb_sAhQcpGwZ8UbApThoyycwTxpKzCJideLU6AXpaS06oew2VnHM-gJn4X6_iddJWId/s1600/share.png) no-repeat 330px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

Kemudian cari Code <data:post.body/> (Biasannya isyarat tersebut ada lebih dari satu, Silahkan anda pilih code yang terakhir atau sanggup anda sesuaikan sendiri nantinnya)
Dan Copy code CSS di bawah ini, kemudian paste sempurna dibawah code <data:post.body/>

<div class='social-buttons-box'>
<div class='social-buttons'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
<div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
</div>
</div>

Terakhir Simpan Template

Keterangan : Silahkan ganti warna Biru diatas dengan URL Gambar lain, bila gambar sharenya terlalu besar atau bila anda tidak menyukainnya, dan Ganti warna Merah untuk menyesuaikan gambar pada postingan

Bisa anda ganti gambar diatas dengan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zXk2NC6MKX1pHtqXipSemdAxygVYcklzNh5sq63yJoe-9WU5JIdQ91w69Ai9moAZKT0dqpsRTeOyHG47sudhZcgP9i0uk9t4IUT__MjZ7IM-TGLhffu1n6VwzInoXPgpKxDMs8C4D31r/s1600/rect3799.png
Maka tampilannya ibarat dibawah ini! atau pribadi Live demo di template ini!

Demikian artikel wacana cara menciptakan Tomboh share media umum ala Evo Magz, Jika anda kesulitan sanggup anda tannyakan di kommentar. Semoga berhasil dan Terima kasih!

Sekilas Gosip Trik Menciptakan Border Warna-Warni Di Sajian Navigasi

Cara Membuat Border Warna-warni di Navigasi Menu ala Evo Magz - Ok pada postingan kali ini Blog Espada akan membahas bagaimana menciptakan border warna-warni, Buat anda yang pernah melihat template Evo Magz niscaya anda menemukan ada Istimewa dari sajian navigasinya, yap.., pada sajian navigasi pada Template Evo Magz memakai Border warna-warni, yang menciptakan sajian navigasi-nya terlihat lebih bagus dan cantik.

Cara tersebut juga saya gunakan pada template Blog saya ini, Berawal dari saya yang tertarik ingin menciptakan sajian navigasi menyerupai mirip Evo Magz, Namun tidak membuahkan hasil ketika membuatnya, itupun juga Googling dari di Internet, Kemudian saya berinisiatif untuk memasang bordernya saja pada template ini dan ternyata berhasil 100%.

Tertarik ingin menyebabkan Border Navigasi pada template blog anda menyerupai diatas, Jika tertarik silahkan ikuti tutorial dibawah ini, mungkin caranya agak ribet namun nanti sanggup anda sesuakian sendiri nantinya. OK Langsung aja

Cara Membuat Border Menu Navigasi ala Evo Magz

Seperti biasa silahkan anda login ke akun blogger - Template - Edit HTML
Jika sudah cari Kode sajian Navigasi, Code-nya kira-kira menyerupai dibawah ini!

#navitions{font:normal bold 14px Arial, sans-serif;background-repeat:repeat-x;background-position:Bottom center;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}
.menu,.menu *{margin:0;padding:0;list-style:none}
.menu li{position:relative}

Kira-kira codenya menyerupai diatas, biasanya Kodenya berbeda-beda pada setiap template. Kalau kesulitan mencarinya silahkan cari aba-aba nav (Kode tersebut niscaya terdapat pada aba-aba Menu Navigasi)
Jika sudah ketemu, Langkah selanjutnya ialah menambahkan Code border. Caranya silahkan Copy code CSS di Bawah ini dan paste di antara Kode Navigasi.
Contohnya jikalau Code Menu navigasi anda menyerupai ini!

#navitions{background-color:#2C2C2C;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}

Maka tinggal menambahkan aba-aba ini!

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjam8m3A9ZindWCbhUhueP75nTZtiYhNTUPeJvKwlGZADgKKTIjX5K74c0hoVqWr0H_pNvvz8V9HGLlQeohuDcKIme4LPP3gmS9vUHhS-WmRo7t5QgnBIqCZTYcB6ao0LNneVb7PqSDGdIJ/s1600/line.png); background-repeat:repeat-x;background-position:Bottom center;

Maka kesudahannya menyerupai di bawah ini!

#navitions{background-color:#2C2C2C;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjam8m3A9ZindWCbhUhueP75nTZtiYhNTUPeJvKwlGZADgKKTIjX5K74c0hoVqWr0H_pNvvz8V9HGLlQeohuDcKIme4LPP3gmS9vUHhS-WmRo7t5QgnBIqCZTYcB6ao0LNneVb7PqSDGdIJ/s1600/line.png);
background-repeat:repeat-x;background-position:Bottom center;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}

Silahkan ganti bottom dengan Top jikalau ingin border ada di atas Navigasi
Simpan Template dan Lihat hasilnnya, Biasanya border belum sesuai dengan Menu Navigasi di template anda.
Untuk mengatasinya silahkan Ubah sedikit Ukuran navigasi anda, sanggup dikurangi maupun ditambah menyerupai ukuran 50px diatas dan sanggup anda sesuaikan sendiri
Semoga berhasil

Demikian artikel perihal Cara menambah Border Warna-warni di Menu Navigasi, Sekian yang sanggup saya bagikan dan biar Berhasil.

Sekilas Gosip Trik Mempercantik Tampilan Heading, Subheading Dan Minor

Cara Memberikan gambar/ikon di samping goresan pena H1, H2, H3 dsb. - Ok kali ini Blog Espada akan membahas salah satu cara untuk memperindah atau mempercantik tampilan Blog yaitu memberi Icon di samping goresan pena yang di beri ukuran karakter Heading, Subheading dan Minor heading atau lebih tepatnya H1 to H6.

Biasanya Heading di pakai supaya goresan pena menjadi lebih tebal dan besar yang dimaksudkan supaya pengunjung sanggup mengetahui apa yang dimaksudkan diblog atau Judul. Namun dengan mempercantik tampilan Heading akan menciptakan artikel anda semakin yummy untuk dipandang dan banyak blog yang mempunyai tampilan bagus memberi headingnya ikon. Ok pribadi aja bila ingin demo tampilannnya menyerupai dibawah ini.

Cara Memperindah tampilan Heading

1. Pertama silahkan masuk ke akun blogger anda - Template dan Edit HTML.
2. Kemudian silahkan cari Kode h1, h2, h3,h4,h5,h6, sebagai pola menyerupai dibawah ini.

h1,h2,h3,h4,h5,h6{font-family:'Oswald',sans-serif;font-weight:400;line-height:1.1;margin:0 0 0.5em}
h1{font-size:160%}
h2{font-size:150%}
h3{font-size:140%}
h4{font-size:130%;}
h5{font-size:100%}
h6{font-size:80%}
dl,ol,ul{margin-left:20px}

3. Sebagian besar template mempunyai Kode menyerupai diatas, namun mungkin saja sedikit berbeda, silahkan cari saja dan kalau sudah ketemu hapus isyarat didalam kurung dan ganti dengan isyarat CSS dibawah ini.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOATc8zcYTdtiSp4aNObiZjVcSVT6zCpHqhANEXFBuu-sxlLNw5AdVFFs5Hb2iMDgZPp2id9n4jeYJExNBE77RonNanq0Ly5qzAjtFENa1vsH-PxV3U73GRyYLAjwpLdMK4fPZub-6oN4/s22/seocipsh3.png) no-repeat 5px 9px;font-size:140%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;

4. Maka Hasilnya menyerupai dibawah ini.

h1,h2,h3,h4,h5,h6{font-family:'Oswald',sans-serif;font-weight:400;line-height:1.1;margin:0 0 0.5em}
h1{font-size:160%}
h2{font-size:150%}
h3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOATc8zcYTdtiSp4aNObiZjVcSVT6zCpHqhANEXFBuu-sxlLNw5AdVFFs5Hb2iMDgZPp2id9n4jeYJExNBE77RonNanq0Ly5qzAjtFENa1vsH-PxV3U73GRyYLAjwpLdMK4fPZub-6oN4/s22/seocipsh3.png) no-repeat 5px 9px;font-size:140%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;}
h4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOATc8zcYTdtiSp4aNObiZjVcSVT6zCpHqhANEXFBuu-sxlLNw5AdVFFs5Hb2iMDgZPp2id9n4jeYJExNBE77RonNanq0Ly5qzAjtFENa1vsH-PxV3U73GRyYLAjwpLdMK4fPZub-6oN4/s22/seocipsh3.png) no-repeat 5px 7px;font-size:130%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;}
h5{font-size:100%}
h6{font-size:80%}
dl,ol,ul{margin-left:20px}

Note : Silahkan ganti heading yang sering dipakai saja, biasanya Heading yakni H2, Subheading : H3 dan Minor Heading : H4. Jangan anda pasang kesemua heading, sebab nantinya judulpun akan ada ikonnya. Terakhir silahkan ganti angka didalam kolom Heading dengan angka lain untuk menyesuaikan ikon kalau perlu. Dan silahkan bereksperimen sendiri.

Demikian artikel wacana Cara Mempercantik heading dengan menambahkan ikon atau logo. sekian yang sanggup saya bagikan dan Terima kasih.

Tuesday, March 5, 2019

Sekilas Informasi Trik Pasang Klasemen Sepakbola Whatsthescore Di Blog

Cara Memasang Widget Klasemen liga Inggris, Itali, Sanyol dan Bundes Liga dari Whatsthescore.com di Blog.

EspadaBlog,- Klasemen Sepakbola merupakan daerah ukur atau peringkat yang memilih suatu kehebatan dari sebuah Klub sepakbola yang berlaga disebuah liga, semakin teratas maka semakin baik klub tersebut.

Sepakbola ialah olahraga no 1 didunia, oleh sebab itu banyak web atau blog yang membahas sepakbola mulai dari Jadwal pertandingan, Hasil, Score, Highlights dan lain sebagainya, Namun tahukah anda biasanya Web atau Blog tersebut memiliki widget yang cukup anggun yaitu widget klasemen sepakbola.

Nah jikalau anda memiliki blog/web sepakbola dan ingin memasang klasemen sepakbola, namun tidak tahu caranya. Disini saya akan membagikan Cara memasang Widget Sepakbola yang sanggup dibilang sanagt anggun widgetnya dari WhatstheScore.com, Tampilan widgetnya ibarat diatas. Ok pribadi aja berikut tutorialnya.

Cara Memasang Widget Klasemen Sepakbola di Blog.

1. Pertama silahkan masuk ke akun Blogger anda.
2. Kemudian masuk ke Tata Letak - klik Tambahkan Gadget dan Pilih HTML/Java Script
3. Selanjutnya silahkan Copy code dibawah ini dan paste di kolom konten.

<div class='widget-content'>
<div class="widget"><div class="inner"> <div class="textwidget"><div data-type="standing" data-id="63152" id="wgt-63152" class="tap-sport-tools" style="width:300px; height:auto;"></div>
<div id="wgt-ft-63152" style="width:296px;"><p>Standings provided by <a href="http://www.whatsthescore.com" target="_blank" rel="nofollow"><img src="http://medias.whatsthescore.com/upload/logo-s.png" alt="Cara Memasang Widget Klasemen liga Inggris Sekilas Info Trik Pasang Klasemen Sepakbola Whatsthescore di Blog" /></a></p></div><style type="text/css">#wgt-ft-63152 {background:#FFFFFF !important;color:#484848 !important;text-decoration:none !important;padding:4px 2px !important;margin:0 !important;}#wgt-ft-63152 * {font:10px Arial !important;}#wgt-ft-63152 a {color:#484848 !important;}#wgt-ft-63152 img {vertical-align:bottom !important;height:15px !important;}</style><script type="text/javascript" src="http://tools.whatsthescore.com/load.min.js?242"></script></div></div></div>
</div>
<div class='widget HTML' data-version='1' id='HTML5'></div>

4. Terakhir tinggal kasih judul dan Simpan.
5. Selesai.

Nah kini blog/web anda sudah terdapat widget klasemen sepakbola, dan kini pengunjung sudah sanggup melihat klasemen sepakbola favoritnya dengan mudah. sekian yang sanggup saya bagikan dan Terima kasih.

Monday, March 4, 2019

Sekilas Informasi Trik Menciptakan Kotak Subsribe Di Blog Menyerupai Evo Magz

Cara Membuat Subscribe atau Artiel Berlangganan Seperti EVO Magz,- Pada postingan sebelumnya aku pernah membagikan Cara menciptakan Tombol share media umum ala EVO Magz dan kali ini aku akan membagikan tutorial yang juga terkait template EVO Magz ialah Cara menciptakan Subscribe atau artikel berlangganan menyerupai EVO Magz.

Berbicara mengenai template evo magz tidak ada habisnya, banyak blogger yang ingin memiliki template evo magz namun apa daya kalau tidak memiliki uang untuk membelinya, Template Premium buatan Mas Sugeng ini merupakan template yang paling SEO dan meiliki tampilan yang sangat cantik dan rata-rata yang memakai template EVO Mgaz ini niscaya berada di halaman pertama search Google.

Nah pada kesempatan kali ini aku akan membagikan bagi anda yang menginginkan salah satu fitur dari Template EVO Magz ialah Tombol Subscribe atau artikel berlanganan. dengan Tombol subscribe akan memudahkan pengunjung untuk berlangganan artikel dari Blo anda. Ok tanpa berlama-lama silahkan ikuti saja tutorial dibawah ini.

Cara Buat Tombol Subscribe Seperti EVO Magz

1. Pertama anda harus memiliki ID Feedburner, Jika belum punya silahkan Cara mendaftarkan Blog di Feedburner Terbaru

2. Jika Sudah Punya Catat ID-nya Contoh feeds.feedburner.com/Lirik-Lagu-For-You, yang berwarna merah merupakan ID Feedburner

3. Untuk Pemasangannya silahkan Login ke Blogger - Template dan Edit HTML. Kemudian Cari ]]></b:skin> dan Pastekan Kode CSS dibawah ini sempurna diatas ]]></b:skin>

/* SUBSCRIBER BOX Ala EVO MAGZ by */
.berlangganan-box {
border: 1px solid #f0f0f0;
padding: 15px;
margin: 0 0 20px;
text-align:center;
}
.berlangganan-box input.email-address[type="text"] {
width:60%;
padding:10px;
border:1px solid #ddd;
text-align:center;
border-radius: 4px;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"] {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
padding:10px 15px;
background:#07ACEC;
border-radius: 3px;
color:#fff;
border:none;
font-weight:bold;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background:#0D9AD0;
cursor:pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #f9f2a5;
}

4. Kemudian Cari Lagi Kode Related Post, Contoh Kodenya menyerupai berikut <div class='related-post' id='related-post'>

5. Jika Sudah Ketemu silahkan Pastekan Kode CSS dibawah ini Tepat diatas Kode Tersebut.

<div class='berlangganan-box'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Lirik-Lagu-For-You', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<p>Subscribe to receive free email updates:</p><p><input class='email-address' name='email' placeholder='Your email address...' type='text'/></p><input name='uri' type='hidden' value='Lirik-Lagu-For-You'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Subscribe'/></p>
</form>
</div>

6. Keterangan: Silahkan Ganti Kode berwarna Merah Lirik-Lagu-For-You dengan ID Feedburner anda.

7. Jika sudah Simpan dan Lihat Hasilnya

Itulah Cara Membuat Subscribe atau Artikel Berlangganan Seperti EVO Magz, Demikian Artikel mengenai Cara menciptakan Subscribe ala Template EVO Magz, Sekian dan Selamat Mencoba.

Sekilas Informasi Trik Memasang Like Box Fanspage Facebook Di Blog

Cara Memasang Fanspage Facebook di Blog,- Bagi kebanyakan orang yang sering berkecimpung di Facebook niscaya tidak gila mendengar kata Fanspage, Karena fanspage merupakan halaman khusus yang disediakan oleh pihak Facebook untuk para pengguna facebook, biar sanggup memperlihatkan info dengan mudah. Namun untuk mendapat info pengunjung atau pengguna facebook lain harus Follow atau mengikuti fanspage tersebut.

Fanspage kini ini tidak hanya dipakai sebagai halaman penyedia informasi, namun banyak yang mengakibatkan Fanpage untuk media menghasilkan uang. mulai dari penjualan, Forum untuk sebuah perusahaan dan masih banyak lagi. dengan memiliki Fanspage kita akan dengan gampang memperlihatkan info atau apa saja kepada pengguna facebook lainnya.

Manfaat fan page facebook lainya yaitu sanggup menaikan visitor, visitor yang dimaksud yaitu pengunjung Blog, jikalau kita sudah banyak memiliki Follower di fanspage dan memasang fan page di blog maka kita akan sanggup mendapat suplemen visitor dari fanspage tersebut. Namun terlebih dahulu harus memiliki follower yang banyak. untuk menciptakan suatu fanspage sangat gampang semudah menciptakan Akun Facebook. Nah untuk tutorialnya sanggup di lihat dibawah ini.

Cara Membuat Fanspage Facebook

Sebelum memasang fanspage kita di facebook pastinya kita harus memiliki sebuah fanspage. Untuk membuatnya sudah aku jelaskan dalam postingan selanjutnya, Namun bila anda sudah memiliki Fanspage Silahkan Ikuti saja tutorial memasang Fanspage di Blog dibawah ini.

Baca: Cara Praktis Membuat Fanspage Facebook Terbaru

Cara Memasang Fanspage Facebook di Blog

Untuk memasang Fanspage di facebook kita tidak perlu susah-susah menciptakan Kode HTMLnya alasannya yaitu pihak facebook sudah menyediakan layanan menciptakan Halaman fanspage berukuran kecil yang sanggup di pasang di Blog.

1. Pertama silahkan kunjungi https://developers.facebook.com/docs/plugins/page-plugin
2. Kemudian Silahkan Masukkan URL Fanspage Anda pada Kolom "URL Halaman Facebook", Contoh Disini aku akan memasukan fanspage , berikut URLnya: https://www.facebook.com/Blogespada
3. Selanjutkan Sesuaikan lebarnya dengan widget di Blog anda dan Atur lainya sesuai selera anda.

4. Jika sudah Yakin dengan Contoh Fanspage yang dibentuk selanjutnya Klik Dapatkan Kode
5. Setelah itu silahkan Copy Kode CSS pada kolom kedua dan Paste di Blogger - Tata Letak - Tambahkan Gadget - HTML/Javascript

6. Terakhir Tinggal Simpan dan Lihat hasilnya

Di tahun 2016 Developer.facebook sedikit merubah cara menciptakan Fanspage, namun cara diatas yaitu cara Terbaru. Semoga bermanfaat.

Sekilas Isu Trik Menyembunyikan Widget Tertentu Di Halaman Utama Blog

Cara Menyembunyikan Widget Blog di Halaman Utama,- Widget Blog yaitu sebuah layanan yang diberikan oleh blogger untuk memudahkan pemilik Blog dalam memasang Kode HTML di Template Blog. dengan menciptakan blog memakai platform Blogger, pemilik Blog sanggup dengan gampang memasukkan dan memasang Script, arahan css atau yang lainya di template blog dengan mudah, namun hanya sanggup ditempatkan sesuai struktur widget di tata letak.

Dengan fasilitas memasang Widget di Blog menciptakan para blogger pemula atau yang sudah professional banyak menambahkan widget supaya pengunjung sanggup menentukan artikel lain atau memakai layanan dari widget tersebut. namun biasanya kalau banyak memasang widget menciptakan tampilan di home sedikit acak-acakan menyerupai yang banyak terjadi yaitu dihalaman home atau halaman utama menjadi panjang kebawah karena, widget di sidebar kebanyakan.

Sebenarnya untuk mengatasi problem tersebut sangatlah gampang yaitu dengan cara menyembunyikan widget tertentu dari Halaman utama, supaya widget di sidebar tidak terlalu panjang. bila anda mengalami problem tersebut dan ingin menyembunykan sebagaian widget di home, silahkan ikuti tutorial dibawah ini.

Cara Menyembunyikan Widget Tertentu di Halaman Utama

1. Pertama silahkan anda Login ke Akun Blogget - Template dan Edit HTML
2. Kemudian Cari Kode ]]></b:skin>
3. Jika sudah Ketemu Silakan anda tambahkan Kode CSS dibawah ini Tepat dibawah arahan ]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>
<style>
#HTML7,#HTML8{display:none;}
</style>
</b:if>

4. Silahkan Ganti #HTML7 dengan Kode Widget yang ingin disembunyikan dan kalau ada lebih dari satu widget yang ingin disembunyikan silahkan ganti juga #HTML8 dan sanggup ditambah lagi dengan syarat terdapat jeda koma (,) dan pagar #
5. Simpan dan Lihat Hasilnya

Itulah cara gampang untuk menyembunyikan widget tertentu di Halaman Utama (Home). Sekian tutorial yang sanggup aku bagikan dan Semoga Bermanfaat.

Sekilas Isu Trik Memasang Random Post Responsive Di Blog

Cara Pasang Widget Random Post Responsive di Blog,- Bagi para pemilik Blog khususnya yang berplatform Blogger, adanya widget sangat membantu pemilik Blog untuk menambahkan Java Script atau instruksi CSS pihak ketiga dengan mudah, penggunaanya juga tidak terlalu sulit tanggal pilih Tata letak, Tambahkan Gadget kemudian pilih HTML/Java Scipt. cara ini sangat gampang jikalau dibandingkan dengan Edit HTML ditemplate yang sangat rumit.

Bagi Pemilik Blog yang sudah memiliki Banyak Postingan, Namun memiliki permasalahan page View sedikit. Hal ini dikarenakan pengunjung hanya mengunjungi artikel yang di ingin dilihat saja, tanpa melihat artikel lainnya. permasalahan ini sering dikeluhkan oleh para pemilik Blogger alasannya yakni kurangnya page view di Blog. Namun sebetulnya ada cara untuk meningkatkan Page View Blog menyerupai memasang widget Popular Post, Recent Post dan Random Post, dengan memasang widget tersebut pengunjung akan dengan gampang melihat artikel lain yang sekiranya menarik dari blog anda yang tentunya akan meningkatkan PageViews Blog.

Namun dari ketiga Widget yang aku sebutkan diatas yaitu Popular Post, Recent Post dan Random Post, yang mungkin akan paling banyak meningkatkan page View yakni Random Post atau Artikel Acak. Karena Random Post akan menampilkan Postingan anda secara acak, yang memungkinkan menarik perhatian dari pengunjung untuk melihat salah satu artikel usang atau gres di Blog anda.

Oleh alasannya yakni itu silahkan pasang Random Post atau Artikel Acak untuk meningkatkan Page View dari Blog anda, Namun kebanyakan Random post tidak Responsive atau hanya muncul beberapa saja padahal yang ditampilkan cukup banyak, Hal ini sangat merugikan alasannya yakni bukan hanya artikel yang ditampilkan di random post tidak muncul, melainkan sanggup saja script random post akan memberatkan loading Blog.

Oleh Karena Itu Disini aku akan membagikan Cara Memasang Random Post di Blog melalui Widget yang dijamin Responsive dan semua Judul postingan akan muncul. Untuk Caranya Bisa dilihat dibawah ini.

Cara Memasang Widget Random Post Responsive di Blog

1. Pertama silahkan masuk ke Dasboard Blogger - Tata Letak - Tambahkan Gadget dan Pilih Menu HTML/Java Script

2. Kemudian Silahkan Kasih Judul, sanggup Random Post, Artikel Acak atau Terserah anda. Dan Pada bab Kolom Bawah Silahkan Isi dengan Kode CSS dibawah ini.

<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://blogespada.blogspot.com/",
numPosts = 7;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="Sekilas Info Trik Memasang Random Post Responsive di Blog" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

Pengaturan :

Ganti var homePage: Dengan URL blog anda
Ganti numPosts: Dengan Jumlah Artikel yang ingin ditampilkan

3. Terakhir Tinggal Simpan dan Lihat Hasilnya. Untuk Demonya silahkan lihat di Blog ini pada bab Footer.

Demikian Artikel Mengenai Cara Memasang Widget Artikel Random di Blog Responsive. Sekian Tutorial Blog yang sanggup aku bagikan dan Semoga Bermanfaat.

Sekilas Gosip Trik Memasang Widget Artikel Terbaru Responsive Di Blog

Cara Pasang Recent Post/Artikel Terbaru di Blog Responsive,- Widget Recent Post atau Artikel Terbaru yaitu Sebuah Widget yang sanggup dipasang oleh pemilik Blog yang bermanfaat untuk memberitahukan kepada pengunjung mengenai artikel terbaru atau artikel yang gres di Update. Ada aneka macam Blog diluar sana yang membagikan Cara Memasang Artikel Terbaru ini. dan Kali ini aku juga akan membagikannya.

Widget Recent Post atau Artikel Terbaru terdapat dua Jenis. yaitu yang pertama dengan memakai gambar atau Thumbnail dan yang kedua hanya judul saja. Kedua jenis Recent post ini sama saja, namun kalau anda menginginkan yang responsive atau fast Loading sanggup memakai yang judul saja. alasannya tidak memakai gambar widget ini sangat responsive.

Dan Kali ini aku akan membagikan Cara memasang widget artikel terbaru memakai Judul saja. yang akan menciptakan Loading Blog tidak terlalu berat serta sangat responsive. untuk tutorialnya sanggup anda ikuti dibawah ini.

Cara Memasang Artikel Terbaru Responsive di Blog

1. Pertama Silahkan Masuk Dasboard - Tata Letak - Tambahkan Gadget dan Pilih Menu HTML/Java Script

2. Kemudian Silahkan Judul Widget Bisa Recent Post, Artikel Terbaru atau Terserah anda. Selanjutnya pada kolom bawah silahkan Isi dengan Kode CSS dibawah ini.

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://blogespada.blogspot.com/",
numPosts = 7;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="Sekilas Info Trik Memasang Widget Artikel Terbaru Responsive di Blog" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Pengaturan

Ganti var homePage: Dengan URL Blog anda
Ganti numPosts: Dengan Jumlah Artikel yang ingin ditampilkan

3. Terakhir Tinggal Simpan dan Lihat Hasilnya.

Baca: Cara Memasang Random Post Responsive di Blog

Demikian Artikel Mengenai Cara Pasang Artikel Terbaru Responsive di Blog, Sekian Tutorial Blog yang sanggup aku bagikan dan Semoga Bermanfaat.

Sekilas Gosip Trik Menyembunyikan Judul Dan Deskripsi Di Header Blog

Cara Menghilangkan dan menyembunyikan header blog,- Sebuah judul dalam sebuah blog sanggup dikatakan sangat penting, lantaran dengan menciptakan judul blog yang baik mengakibatkan blog tersebut gampang untuk dikenali, semisal kalau seorang pengunjung mengunjungi blog anda dan lalu pengunjung tersebut kembali lagi ke blog anda namun beda yang dicari, maka dengan melihat judul saja pengunjung akan dengan mdah mengetahui bahwa sebelumny pernah mengunjungi blog anda.

Namun tidak semua pemilik blog menyukai adanya judul di blog mereka, yang mungkin saja disebabkan oleh judul default tidak cantik atau tidak sanggup menciptakan logo sama sekali. oleh lantaran itu banyak yang menghilangkan judul blog mereka. menghilangkan judul blog juga sudah banyak dilakukan oleh blogger lain serta dengan menghilangkan judul blog juga sanggup menciptakan blog terlihat lebih professional lantaran dibagian atas hanya ada hidangan navigasi tanpa adanya judul.

Nah buat anda-anda semua yang ingin sekali menghilangkan judul dan deskripsi di blog, disini saya akan membagikan tutorialnya dan tutorial ini saya khususkan buat yang masih pemula/newbie, lantaran yang pro niscaya sudah sanggup mengotak-atik template. ok pribadi saha berikut tutorialnya:

Cara Meyembunyikan Judul di Header Blog

1. Pertama silahkan masuk ke akun Blogger - Template dan Edit HTML.

2. Kemudian silahkan cari arahan bagikan "header", setiap template mungkin berbeda-beda namun kebanyakan bertuliskan #header atau #header-Wrapper.

3. Selanjutnya Tambahkan Kode display:none; pada arahan header tersebut, Contohnya:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;
}

Kemudian tambahkan arahan display:none; maka kodenya menjadi menyerupai berikut:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;display:none;}

4. Terakhir tinggal Simpan template dan lihat hasilnya.

Dengan menambahkan arahan display:none menciptakan header beserta judul akan tersembunyi dan tidak hilang, untuk memunculkanya kembali tinggal hapus arahan display:none tersebut. Sekian tips blog yang sanggup saya bagikan dan Semoga bermanfaat.

Sekilas Isu Trik Memasang Kotak Pencarian (Search Box) Di Blog

Cara Memasang Search Box atau Kotak Pencarian di Blog,- Kotak Pecarian atau Search Box yakni sebuah kotak yang dipakai untuk mencari gosip atau artikel lain pada sebuah Wesite atau Blog. Kotak ini sangat bermanfaat pada blog atau Website yang mempunyai banyak artikel sebab mungkin gosip yang diperlukan pengunjung terdapat di blog tersebut. oleh sebab itu Search Box sangat mempunyai kegunaan di sebuah Blog/Website.

Search Box Sendiri tidak semua template mempunyainya, sebab biasanya banyak template yang kita download dari internet atau dari bawaan blogger tidak eksklusif ada. namun sebetulnya blog berplatform blogger sudah menyediakanya tinggal kita cari dan pasang pada sajian Tata letak. walaupun sudah disediakan, banyak blogger yang kurang menyukainya sebab tampilanya yang kurang bagus. oleh sebab itu banyak yang mencari instruksi pemasangan dari internet.

Nah bekerjasama dengan Search Box atau Kotak Pencarian, disini aku juga akan membagikan tutorial mengenai memasang Search Box di blog. yang aku khususkan bagi anda-anda semua yang ingin memasang kotak pencarian di blog anda yang masih belum ada Search Box. Ok eksklusif saja berikut Tutorialnya,

Cara Memasang Kotak Pencarian (Search Box) di Blog

1. Pertama silahkan Masuk ke Akun Blogger - Template dan Edit HTML

2. Kemudian Silahkan cari instruksi ]]</b:skin>, Gunakan CTRL+F untuk mempermudah pencarian.

3. JJika sudah ketemu selanjutnya silahkan Copy instruksi CSS dibawah ini dan Paste sempurna diatas kode ]]</b:skin>.

/* Search Box by
----------------------------------------------- */
#search-box{
position: relative;
border: 1px solid #ddd;
margin: 5px auto;
}
#search-form{
height: 30px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
overflow: hidden;
}
#search-text{
color: #ccc;
border-width: 0;
}
#search-box input[type="text"]{
width: 100%;
padding: 7px 0 7px 7px;
outline: none;
}
#search-button{
position: absolute;
top: 0;
right: 0;
height: 30px;
margin: 0;
text-align: center;
line-height: 0;
border-width: 0;
background: whitesmoke;
cursor: pointer;
font-size: 12px;
font-weight: bold
}

4. Terakhir Simpan Template.

Langkah selanjutnya yakni memunculkan Kotak Pencarian (Search Box) di Widget Blog, untuk caranya sanggup dilihat dibawah ini.

5. Selanjutnya Masuk ke Tata Letak - Tambahkan Gadget kemudian Pilih HTML/Java Script.

6. Selanjutnya silahkan kasih judul atau tidak dikasih juga tidak apa-apa kemudian masukkan instruksi CSS dibawah ini pada pecahan kolom HTML.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<button id='search-button' type='submit'>GO</button>
</form>
</div>

7. Terakhir Tinggal Simpan.

Panjang Search Box di atas akan menyesuaikan ukuran widget pada blog anda, oh ya hampir lupa search box diatas kodenya aku ambil dari Template Premium Speed up. sekian tutorial blog yang sanggup aku bagikan dan Terima kasih.

Sekilas Isu Trik Menciptakan Widget Footer 3 Kolom Di Blog

Cara memasang sajian widget footer 3 kolom di blog,- Bagi anda sebagai pemilik sebuah blog niscaya tahu apa yang dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yang berplatform blogger. dengan widget ini kita dengan gampang menambah aneka macam macam fitur template serta menambah isyarat HTML/Java Script pihak ketiga. letak penambahan widget pada suatu blog tergantung dari letak widget yang berada pada tata letak template yang digunakan.

Tak jarang pemilik blog yang ingin menambah widget pada penggalan tertentu pada blognya mencari cara semoga sanggup menciptakan sebuah daerah widget menyerupai yang di inginkan. mungkin yang banyak dicari ialah memasang sebuah sajian widget pada penggalan footer. kebanyakan widget di penggalan footer ini banyak digunakan oleh situs/blog bergaya magazine atau berita. nah oleh sebab itu banyak blogger lain yang ingin sekali memasang widget di penggalan footer blog mereka.

Widget dibagian footer sendiri yang niscaya tidak cuman satu melainkan ada beberapa sekaligus, menyerupai yang paling banyak 3 kolom sampai 4 kolom. Nah buat anda yang ingin sekali menciptakan widget di penggalan footer dengan sajian widget 3 kolom sanggup mengikuti cara yang aku berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog

1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke sajian Template - Edit HTML

3. Setelah itu cari kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), Jika sudah ketemu copy isyarat CSS dibawah ini kemudian paste sempurna diatas isyarat tersebut.

/* Footer 3 Coloum by
----------------------------------- */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#07ACEC;bottom:-2px}

4. Langkah selanjutnya ialah memunculkan widget pada footer caranya silahkan copy isyarat dibawah ini dan paste sempurna diatas isyarat <footer>

<footer id="footer-wrapper">
<b:section class='left section' id='left' preferred='yes'>
</b:section>
<b:section class='center section' id='center' preferred='yes'>
</b:section>
<b:section class='right section' id='right' preferred='yes'>
</b:section>
</footer>

5. Sebenarnya pada proses ini footer 3 kolom sudah muncul dan siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tidak acak-acakan silahkan tambahkan isyarat CSS Media Screen dibawah ini sempurna diatas </style>.

@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

6. Terakhir simpan template dan lihat hasilnya.

Dengan begitu anda sudah sanggup memasang widget pada footer di tata letak dan lihat hasilnya, sekian tips blog yang sanggup aku bagikan dan selamat mencoba.

Sekilas Isu Trik Memasang Anti Copy Paste (Copas) Di Blog

Cara Memasang Anti Copas (Copy Paste) di Blog,- Bagi sebagian blogger menulis artikel postingan sangatlah membosankan, mungkin alasan diantaranya ialah sulit menciptakan penjelasan, malas menciptakan goresan pena artikel dan lain-lain. yang ujung-ujungnya akan melaksanakan Copas artikel postingan blog lain. namun dikala ini problem copy paste artikel sudah sangat biasa alasannya semakin malasnya orang untuk menulis artikel postingan.

Walaupun sudah biasa namun banyak blogger lain yang mengeluhkan cara cepat saji ini, alasannya cara ini dianggap sebagai pelanggaran hak cipta. bagaimana tidak bila seorang susah payah menciptakan suatu artikel postingan kemudian blog lain hanya mengcopy tanpa izin atau meletakan sumber, itu sudah sanggup di anggap sebagai pelanggaran hak cipta.

Untuk mengatasi problem tersebut sebetulnya kita sanggup melaporkannya ke DMCA, Namun apa daya kalau yang copas lebih dari satu mungkin kita akan susah sendiri. Nah cara lain yang sanggup dibilang cukup ampuh untuk mengusir pencuri artikel ialah Memasang Kode anti Copy paste di blog. yang dimana pencuri tersebut tidak akan sanggup mencopy artikel yang sudah di lindungi anti-Copas. untuk tutorialnya sanggup dilihat di bawah ini.

Cara Memasang Anti Copy Paste di Blog

Nah Sebelum itu disini aku tidak menciptakan Kode Anti Copy Paste ini, yang menciptakan Kodenya ialah Seocips.com, dan aku disini hanya membagikanya saja. OK Berikut Kode Anti Copy paste-nya.

1. Pertama silahkan Login ke Akun Blogger anda.

2. Kemudian silahkan pilih Menu Template dan pilih Edit HTML.

3. Selanjutnya silahkan Cari Kode </head>, gunakan Ctrl+F untuk mempermudah pencarian.

4. Jika sudah ketemu silakan Copy arahan Kode Script di bawah ini dan Paste dibawah arahan </head>

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >

5. Terakhir Tinggal Simpan Template.

Dengan Begitu postingan anda akan kondusif dari para pencuri artikel, Sekain Tips Blog yang sanggup aku bagikan dan Semoga bermanfaat.

Sekilas Isu Trik Gampang Memasang Aba-Aba Histats Di Footer Blog

Cara memasang Histats di Footer Blog,- Bagi anda selaku pemilik blog tentunya anda ingin meningkatkan pengunjung/visitor blog anda, alasannya suksesnya sebuah blog tergantung dari berapa banyak visitor blog tersebut. untuk mengetahui pengunjung blog biasanya kita akan melihat pada statistik pada sajian blogger, namun itu hanya total page today saja melainkan buka visitor. untuk mengetahui jumlah visitor blog secara detail kita sanggup memakai fitur dari Histats.

Yang belum tahu mengenai situs Histats akan saya coba jelaskan, Histats sendiri ialah sebuah situs yang sanggup kita gunakan untuk memantau jumlah visitor, jumlah page, user online. namun syaratnya kita harus menciptakan akun di histats kemudian mendaftarkan blog ke histats dan terakhir kita diharuskan menempelkan pluigin/kode histats di blog. dengan begitu kita akan sanggup mengetahui segala sesuatu yang berafiliasi dengan pengunjung yang mengunjungi blog kita.

Untuk memasang instruksi histats ke blog terdapat dua cara yaitu kita sanggup memakai widget tata letak dan pribadi memasangnya di template. kalau anda memasangnya di widget tata letak maka letak histats tersebut akan menyesuaikan struktur widget tata letak blog anda, namun bila memasangnya pribadi di template kita sanggup memasangnya ditempat yang kita inginkan.

Salah satu yang mungkin banyak dilakukan oleh blog lain ialah memasang histats di bab footer, berdasarkan saya dengan memasang pada footer blog akan menciptakan tampilan blog lebih professional dengan histats di footer. nah bila anda memasang instruksi histats di footer diharuskan memparse dulu instruksi tersebut, alasannya kalau tidak kita tidak akan sanggup menyimpan tempate. ok pribadi saja berikut tutorialnya.

Cara Memasang Kode Histats di Footer Blog

1. Pertama silahkan daftar dan menciptakan instruksi histats, untuk tutorialnya sanggup baca: Cara daftar dan memasang instruksi Histats di blog.

2. Kemudian ketika menentukan instruksi silahkan pilih yang standart, silahkan copy instruksi tersebut.

3. Selanjutnya kita akan memparse instruksi histats tersebut semoga sanggup disimpan pada template, caranya silahkan masuk ke situs www.freeformatter.com/html-escape.html

4. Setelah itu masukkan instruksi yang sudah dicopy sebemunya ke kotak yang sudah disediakan kemudian klik Escape

5. Kemudian copy lagi instruksi yang sudah di parse tadi, kemudian masuk ke akun blogger - template dan edit html.

6. kemudian cari instruksi </footer> gunakan (Ctrl+F) untuk mempermudah, kalau sudah ketemu paste instruksi yang sudah di parse tadi sempurna diatas instruksi </footer> dengan menambahkan instruksi dibawah ini.

<div>
Kode Histats yang sudah diparse </div>

7. Terakhir tinggal simpan template dan lihat hasilnya.

Untuk demonya sanggup dilihat pribadi di blog ini, Sekian tips mengenai cara memasang instruksi histats footer di blog, semoga berhasil.

Sunday, March 3, 2019

Sekilas Isu Trik Menciptakan Sajian Navigasi Tetap Walaupun Di Scroll

Cara Membuat Menu Navigasi Statis atau Sticky di Blog,- Template yakni sebuah elemen dasar yang membangun sebuah blog atau web yang berisi dari semua fitur menyerupai Sidebar, Header, Post, footer dan lain-lain. atau sanggup dikatekan bahwa template yakni sebuah wadah untuk eleman lain dari blog serta sebagai tampilan sebuah website.atau blog.

Template blog juga sangat mempengaruhi kesuksesan sebuah blog, kesudahannya silahkan pilih template yang sudah terbukti Seo friendly atau disukai mesin penelusuran google. namun dari semua elemen yang membangun template menyerupai sidebar, Header, Footer dan lain-lain. disini aku akan membagikan sedikit tutorial yang mungkin bermanfaat untuk anda yaitu Cara menciptakan sajian navigasi tetap walaupun di scroll kebawah.

Sebenarnya tutorial ini aku peruntukan bagi yang ingin sekali menciptakan sajian navigasi sticky menyerupai blog lain yang menggunakan, dan cara ini sanggup dibilang sedikit rumit, oleh sebab itu silahkan di simak baik-baik. berikut tutrialnya:

Cara Membuat Menu Navigasi Tetap walaupun di Scroll

1. Pertama silahkan masuk ke Blogger - Template - Edit Html.

2. Kemudian Silahkan cari isyarat Menu navigasi, pada setiap blog kodenya berbeda-beda namun yang niscaya terdapat isyarat (nav), sebagai rujukan isyarat blog aku yakni #navitions.

3. Silahkan catat atau hafalkan isyarat tersebut, lalu silahkan cari isyarat </body>, kalau sudah ketemu copy isyarat dibawah ini dan paste diatas isyarat </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

4. Selanjutnya ganti isyarat #nav diatas dengan isyarat sajian navigasi yang sebelumnya ada hafalkan atau catat.

5. Biasanya sajian tersebut akan berantakan, untuk mengatasinya silahkan ganti width:100%; yang ada pada isyarat sajian menyerupai langkah no 2, dengan width:950px; atau kalau tidak ada silahkan tambahkan sendiri. dan untuk menyesuaikanya dengan template anda sanggup diganti 950px dengan ukuran lain.

Itulah cara menciptakan sajian navigasi tetap walaupun di scroll kebawah, sekian tips blog yang sanggup aku bagikan dan Semoga berhasil.

Sekilas Gosip Trik Menyembunyikan Judul Dan Deskripsi Di Header Blog

Cara Meyembunyikan Judul di Header Blog

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;
}

Kemudian tambahkan arahan display:none; maka kodenya menjadi menyerupai berikut:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;display:none;}

Sekilas Isu Trik Menciptakan Subscribe Box Keren Di Blog

Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog,- Sebelumnya saya pernah membagikan cara menciptakan Kotak Subscribe Box di Blog Seperti EVO Magz dan kali ini saya masih akan menawarkan mengenai cara menciptakan subscribe box di blog ibarat template arlina design. dimana subscribe box tersebut sangat anggun dan keren berdasarkan saya makanya disini saya akan membagikanya.

Subscribe BOX atau Kotak berlangganan yakni sebuah kotak dipakai untuk memasukan email yang biasanya terdapat pada sebuah web atau blog yang bertujuan semoga pengunjung sanggup mengetahui update artikel melalui email mereka. ibarat halnya tombol Subscribe pada situs youtube subscribe box juga mempunyai cara yang sama namun disini kita perlu memasukan email kemudian submit untuk berlanggan artikel dari sebuah web/blog.

Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, alasannya yakni sudah banyak blog yangmemasang kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yang memasangnya namun setiap kotak tampilanya berbeda-beda. yah itu juga tergantung modifikasi ang dilakukan oleh pemilik blog.

Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, alasannya yakni jikalau pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu jikalau ada artikel gres dari blog anda dan otomatis juga akan menambah visitor blog. Namun sebelum memasang subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner gres sanggup memasang ID tersebut ke Subscribe Box.

Nah buat tampilan Subscribe Box pada tutorial kali ini ibarat gambar diatas, dan kotak berlangganan tersebut saya pasang pada footer. jikalau anda tertarik dengan Subscribe BOX ibarat gambar diatas sanggup pribadi ikuti cara dibawah ini.

Cara Memasang Subscribe Box keren di Blog

1. Pertama silahkan masuk ke Blogger - Template dan Edit HTML

2. Kemudian Cari kode ]]></b:skin> gunakan (Ctrl+F) untuk mempermudah pencarian, jikalau sudah ketemu silahkan copy instruksi dibawah ini dan paste di atas instruksi tersebut.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#444;overflow:hidden;border-top:4px solid #eee:none}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#555;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#E73037;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#E73037;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Selanjutnya silahkan copy instruksi CSS dibawah ini kemudian paste ditempat yang anda inginkan semisal jikalau ingin memasang diatas footer paste diatas instruksi <footer>

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='EspadaBlog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>

Note: Silahkan ganti EspadaBlog dengan ID feedburner blog anda.

4. Dan terakhir supaya subscribe box lebih responsive pada tampilan mobile silahkan tambahkan instruksi CSS media screen dibawah ini sempurna diatas instruksi </style>

@media screen and (max-width:768px){
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}

5. Terakhir tinggal simpan template dan lihat hasilnya.

Dan itulah cara menciptakan Subscribe Box di blog keren ibarat blog arline design, untuk warna sekaligus tampilanya sanggup anda sesuaikan sendiri. sekian tips blogging yang sanggup saya bagikan dan selamat mencoba.

Sekilas Informasi Trik Memasang Tombol Share Medsos Responsive Di Blog

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

Baca: Cara Buat Tombol Share di Blog ala EVO Magz

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

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

Cara Memasang Share Media Sosial Responsive di Blog

1. Pertama yang niscaya anda harus masuk ke Blogger.
2. Kemudian masuk ke hidangan Template - Edit HTML
3. Selanjutnya silahkan cari kode ]]</b:skin> pada template anda, gunakan (CTRL+F) untuk mempermudah pencarian.
4. Setelah itu copy arahan 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/AVvXsEjeYx-6z7pHCtr_u2MdcvyiqvLgqYKVFqTnIeVN9dPKAMWIFR7Qv1oCQ9hwp4p5wnEW7yRQRg7cvmsdg9gimL2tHzBwufDYbZZ-Q4pVwFw6nOWhLfnvHOsd5vUm-J39Fmc2vBDBKFcOz2k/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 arahan berikut <data:post.body/>, biasanya arahan tersebut terdapat lebih dari satu silahkan pilih arahan yang terakhir kemudian copy arahan CSS dibawah ini dan paste dibawah arahan tersebut.

<div class='article-share'>
<div class='article-share-fb-cont'>
<a class='article-share-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='article-share-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://plus.google.com/share?url=" + 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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='article-share-gp-label' expr:href='"https://plus.google.com/share?url=" + 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='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='padding-top:12px;'/>
</div>
</div>

6. Terakhir tinggal simpan template dan lihat hasilnya.

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