Showing posts with label Design Blog. Show all posts
Showing posts with label Design Blog. Show all posts

Thursday, July 04, 2019

- 7/04/2019

Cara Mengganti Link Older Posts dan Newer Posts

Cara Mengganti Link Older Posts dan Newer Posts
Older Posts dan Newer Posts
Sahabat Blogger Semenjak anda pertama kali membuat blog di platform Blogger sudah pasti anda melihat tulisan berupa link Older Posts dan Newer Posts yang terletak di bawah postingan artikel blog atau di halaman beranda blog anda, karena Tulisan link Older Posts dan Newer Posts ini adalah tampilan default(bawaan) Blogger dan bisa juga diartikan sebagai posting lama dan posting baru pada halaman blog, Namun kalau anda sudah mengganti template blog nya dengan template hasil dowload alias gratis maupun dengan template SEO Friendly premium maka tulisan Older Posts dan Newer Posts tersebut akan otomatis tersembunyi atau tidak akan kelihatan lagi.

Jadi pada kesempan kali saya akan membahas cara belajar mengganti link Older Posts dan Newer Posts, padahal sudah banyak artikel tentang Older Posts dan Newer Posts ini di halaman searching google. Dalam hal ini saya juga ingin berbagi ke sahabat blogger semuanya sekaligus agar artikel blog ini bisa berada atau tampil di halaman penelusuran google seperti artikel blog blogger lainnya Ok.

Bagaimanakah cara? untuk mengganti Tulisan link Older Posts dan Newer Posts di Blog? dari pertanyaan tadi mungkin sebagian pengguna blogger sudah tau caranya seperti apa? dan apalagi yang sudah lama membuat blog dan aktif khususnya para desain template blog blogger, namun jika ada seorang pengguna baru blogger (pemula) yang ingin tau dan mau belajar untuk menerapkan ke blog milik mereka di blogger tentunya, Mungkin diantara mereka masih bingung mengenai cara mengganti tulisan tersebut di Blognya khususnya di blog blogger.

Dari sebagian para pengguna blogger yang mahir dalam mendesain template Blog untuk mengerjakan cara tersebut pasti sangatlah mudah karena mereka sudah mengetahui sepenuhnya tentang pengodean template situsblog yang berkaitan dengan kode CSS/HTML Java Script, tetapi lain pula dengan yang belum tau bagaima caranya, apalagi yang sama sekali belum pernah mengetahui Cara Menggantinya pada Blog di Blogger, jadi dalam hal ini maka dibawah saya akan berbagi tentang bagaimana cara mengganti dan memasang kode CSS/HTML Java Script yang mengganti link Older Posts dan Newer Posts atau postingan lama dan posting baru menjadi Angka pada halaman Home atau Beranda Blog khususnya pengguna blogger, adapun caranya adalah sebagai berikut :

Baiklah langsung saja bagaimana cara menerapkan cara tersebut :


1. Masuk ke dashboard Blogger
2. Pilih Tema
3. Pilih Edit html
4. Cari Kode ]]></b:skin> dan jika sudah menemukannya talu letakan kode CSS/HTML Java Script dibawah sebelum kode ]]></b:skin> atau tepat diatas kode ]]></b:skin>

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #FF6A00; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #FF6A00; background-color:#FF6A00; } .showpagePoint { color:#84d; text-decoration:none; border: 1px solid #FF6A00; background: #FF6A00; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #FF6A00; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#0094FF; }

5. Selanjutnya cari kode </body>Lalu letakan kode CSS/HTML Java Script dibawah sebelum kode </body> atau tepat diatas kode </body>

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='https://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->



6. Terakhir selesaikan dan Simpan Template nya!



Na...Mudah-mudahan tutorial tips trik blogger tersebut tentang Bagaimana Cara Mengganti Link Older Posts dan Newer Posts di Blogger Blogspot bisa mudah dipahami , dan untuk mempermudah mendesain blog nya saya sarankan jangan utak atik Kode Script HTML di Template Blog karena sangatlah berdampak sangat fatal tidak terindex mesin pencarian google dalam artian membutuhkan waktu yang cukup lama, Semoga postingan ini bermanfaat , terutama untuk sahabat blogger pengguna baru yang sedang belajar cara membuat blog dan mendesain template blognya.





Sekian Salam Blogger...

Wednesday, July 03, 2019

- 7/03/2019

Cara Memasang Menu Navigasi Blog Agar Responsif

Cara Memasang Menu Navigasi Blog Agar Responsif


Bagaimana cara untuk membuat atau memasang Menu Navigasi Blog agar Responsif? dari pertanyaan tersebut mungkin sebagian para blogger sudah pada tau apalagi yang sudah profesional seperti para pakar blogger khususnya deasain template blog blogger ya...pastilah sudah, namun bagaimana jika ada seorang pengguna baru blogger (pemula) yang baru mau belajar di blogger(blogspot), Mungkin diantara pengguna baru tersebut akan merasa bingung mengenai hal cara memasang dan membuat Menu Navigasi Blog agar Responsif khususnya di blog blogger(blogspot).




Dari sebagian para desainer template blog blogger profesional, untuk mengerjakan hal tersebut pasti sangatlah mudah karena mereka sudah mengetahui seluk beluk nya atau sepenuhnya tentang situsblog atau situsweb yang berkaitan dengan template dan kode-kode HTML nya, tetapi berbeda pula dengan yang belum tau bagaima membuatnya dan bagaimana caranya, apalagi yang sama sekali belum pernah mengetahui Cara Membuat Blog di Blogger(Blogspot), jadi dalam hal ini maka dibawah saya akan share tentang bagaimana cara membuat dan memasang Menu Navigasi Blog agar Responsif khususnya pengguna blogger, adapun caranya adalah sebagai berikut :

Baiklah langsung saja bagaimana cara menerapkan cara tersebut :


1. Masuk ke dashboard Blogger
2. Pilih Tema
3. Pilih Edit Html
4. Cari Kode ]]></b:skin> dan Copy kode di bawah ini lalu di letakan atas kode ]]></b:skin>

ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } }


5. Selanjutnya Cari Kode <body> Lalu Copy kode HTML di bawah lalu letakan kode HTMLnya di bawah kode <body>




<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>




6. Agar kode-kode HTML diatas bisa berfungsi sebagai Menu Navigasi blog responsif selanjutnya cari kode </body> lalu Copy kode JAVASCRIPT dibawah lalu letakan kode JAVASCRIPTnya tepat di atas kode </body>




<script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>




7. Terakhir selesaikan dan Simpan Template nya!




Info lebih jelas tentang kode-kode HTML untuk menu navigasi responsif blog blogger anda langsung ke ahlinya di CONTOHBLOG COM karena Sumber kode HTML yang saya paparkan di atas adalah dari Artikelnya,anda juga bisa membeli Template blog blogger responsif dan SEO Friendly disana Ok...




Mudah-mudahan tutorial tips trik blogger tersebut tentang Bagaimana cara membuat dan memasang Menu Navigasi Blog agar Responsif di Blogger Blogspot bisa mudah dipahami , dan untuk mempermudah mendesain blog nya saya sarankan jangan utak atik Kode Script HTML di Template Blog karena sangatlah berdampak sangat fatal tidak terindex mesin pencarian google dalam artian membutuhkan waktu yang cukup lama, Semoga postingan ini bermanfaat , terutama untuk sahabat blogger pengguna baru yang sedang belajar cara membuat blog dan mendesain template blognya.


Sekian Salam Blogger...

Wednesday, June 26, 2019

- 6/26/2019

Cara Mudah Memasang Breadcrumbs SEO Friendly

Cara mudah memasang breadcrumbs pada blog blogger


Memasang breadcrumbs di blog itu sangatlah penting dan berguna terhadap SEO blog Nah, untuk itu saya akan membahas cara membuat breadcrumbs.Namun sebelumnya saya mau bertanya Apakah? Anda Sudah Menerapkan Breadcrumbs Pada Situs Blognya dan Apa itu Breadcrumbs? Breadcrumbs merupakan Sebuah kode CSS/HTML yang dipasang di dalam template blog agar blog lebih SEO Friendly terutama pada tab navigasi menu agar supaya pengunjung dan pembaca mudah bernavigasi pada situsblog melalui aktifitasnya menelusuri setiap tab menu navigasi artikel postingan blog dan bisa kembali ke tab halaman awal bernavigasi dengan mudah. Breadcrumb biasanya berada di posisi atas tab halaman postingan.dan juga di bawah header.

Jika anda belum menggunakannya atau menerapkan ke blog milik anda, maka saya Sarankan untuk menggunakan Breadcrumbs. Oleh sebab itu dalam kesempatan kali ini saya akan berbagi cara membuat atau memasang Breadcrumbs simak langkah panduan Nya dibawah ini :

Berikut Cara Memasang Breadcrumbs SEO Friendly di Blog Blogger;

1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:‪#‎5f5f5f‬;border-bottom:1px dotted ‪#‎fff‬;}




5. Setelah selesai menyimpan kode di atas Selanjutnya cari lagi kode <b:includable id='main' var='top'> dan menggantikanya dengan kode CSS/HTML dibawah ini;

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v=' http://rdf.data- vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data: label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>




6. Nah Jika sudah Klik Simpan Tema dan Selesai





Breadcrumbs ini sangat bermanfaat bagi blog yang kita kelola dan para pengunjung termasuk tata letak struktur blog yang kita memiliki sehingga kelihatan rapih dan kinclong.

Menurut info yang saya baca di situs blog sebelah mengatakan bahwa, Google sangat menyukai situsblog yang mempunyai struktur blog yang rapih dan kelihatan cerah apa lagi warna nya putih, jika anda tidak percaya coba anda lihat website Google semua cerah berwarna putih, jadi anda sudah paham penting nya Breadcrumbs untuk sebuah blog.

Sekian artikel mengenai Cara Mudah Memasang Breadcrumbs Pada Blog. Kurang dan Lebihnya Mohon Maaf.dan jikat tata bahasa penulisa artikel nya tidak sessuai maka tolong berikan Saran Kritik di kolom komentar yang sudah di sediakan di bawah postingan artikel ini terimakasih sudah berkunjung.

Semoga Bermanfaat...

Monday, June 24, 2019

- 6/24/2019

Cara Mudah Membuat Widget Headline di Blog

Cara Mudah Membuat Widget Headline di Blog Blogger


Jika Anda tidak sudah terbiasa dengan Model tampilan halaman depan Home atau beranda situsblog nya hanya itu-itu saja maka beralih lah ke tampilan yang lebih keren dan juga lebih profesional, sama halnya dengan widget Headline untuk memperindah gaya desain tampilan tema blog dengan berupa foto atau gambar dan text yang dapat dipasang untuk blog blogger Anda. Anggap saja seperti Featured Posts dan Popular Posts yang berada di sidebar Blog Blogger. Dengan mengembangkan desain template cukup sederhana untuk melakukan satu hal dan melakukannya dengan sangat baik. Headline telah menjadi salah satu widgets yang paling menonjol pada desain template blog yang anda bisa terapkan dengan gaya atau tampilan berfoto grid di halaman pages home blog blogger anda nantinya.

Hal yang paling besar tentang menggunakan atau memasang widgets Headline adalah bahwa itu bukan hanya untuk semata hiasan saja. Konten blog atau Artikel blog bisa muncul dan tampil bersama widgets headline di beranda blog dengan memanfaatkan fitur ini tentunya akan memberikan dampak positif dan baik terhadap blog karena kabar terbaru dalam postingan artikel bisa di tampilkan agar mereka yang mengunjungi situs blog terkesan dalam hati untuk membaca keseluruhan isi konten blog dan bisa berlangganan artikel blog atau mendesain ulang template blog pengunjung dan pembaca.

Pengunjung dan pembaca beraktifitas ke blog akan mempunyai trafik kunjungan yang berjumlah cukup banyak dari pengguna blogger yang aktif lainnya per harinya, dan apa lagi mempunyai postingan terbaru setiap harinya. Itu adalah jumlah yang menguntungkan bagi blog yang menyediakan fitur headline bagi blog Anda untuk membuat dengan menambahkan headline di Blogger sebagai widget. Anda dapat menerapkan fitur headline untuk kabar terbaru dari situsblog dan memungkinkan pengunjung untuk mengunjungi blog anda membaca artikel di tab perhalamannya.

Dengan mempunyai tampilan unik dan keren untuk widgets blog yang di pasang disekitaran pada template blog blogger Anda akan memberi keunikan tersendiri ke manapun Anda memakai dan di pasang ke template blog miliknya, Anda dapat membuat dan menampilkan gambar grid dengan menerapkan kode CSS/HTML dan memasang kode-kode nya dengan mengedit Edit HTML ke Tema Blog Anda. Dari dalam template blog. Kode CSS widget yang sudah dirancang khusus oleh pengembang desain template blog untuk Widgets Headline di Blogger yang akan menampilkan bentuk desain gambar grid di situsblog Anda. Bahkan pengunjung yang bukan pengguna Blogger dapat memperoleh manfaat dari artikel postingan tersebut.

Kode CSS HTML yang akan saya share dalam artikel postingan ini yaitu cara mudah dan siapapun dapat dengan mudah menggunakannya. Hanya memasang kode CSS headline pada template blog milik anda dan sangat menarik yang dapat anda terapkan dan disesuaikan dengan design situsblog. Ada beberapa kode CSS HTML yang bisa digunakan di blogger.

 Berikut Cara Memasang kode dengan mengedit Edit HTML template Langkah yang dilakukan:

Masuk ke Dasbor Blogger anda 
Klik Tema > Lalu Edit HTML 
Tambahkan kode Salin (Copy) kode CSS dibawah ini;

#Headline {background:#ececec}
.repost1 {background: #fff;margin:0;padding:0;display: block;border-top:1px solid #fff}
.repost1 h2 {color: #fff;font-size: 16px;margin: 10px 0 0 0;padding: 0;text-transform: uppercase;}
.repost1 .wrapper {display: block;float: left;margin: 10px 20px 20px 0;width: 198px;position: relative;}
.repost1 .wrapper img {height: 130px;width: 100%;}
.repost h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover{color:#0d68b1}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {line-height: normal;color:#fff;text-shadow:none}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover hover{color:#fff}
.repost1 .wrapper .reposth, .repost1 .wrapper .reposth a {display:none;color: #fff;font-size: 12px;text-transform: capitalize;}
.repost1 .wrapper .reposth a:hover {color: #fff;}
.repost1 .wrapper:nth-child(4) {margin-right: 0 !important;}
@media screen and (max-width:603px) {
.repost1 .wrapper {width:31%;}
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width: 480ppx) {
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width:600px) {
.repost1 .wrapper {width: 30.8%;}
}
@media screen and (max-width: 480px) {
.repost1 .wrapper {width:100%;margin:0 0 15px;}
.repost1 .wrapper img { height:auto; }
.repost1 .wrapper .reposth{position:relative;top:-6px;}
}



Kemudian cari kode dibawah  Lalu letakan tepat dibawa kode berikut ini;




</style>
<b:if cond='data:view.isHomepage'>
<style> 


Contoh dalam bentuk gambar untuk menerapkan kode CSS nya di bawah sebagai berikut;

Cara Mudah Membuat Widget Headline di Blog Blogger


Untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya Klik simpan pada tema Selesai.


Selanjutnya Jika sudah Untuk mengaktifkan headline gambar grid nya atau menampilkan Fitur ini ke halaman depan home blog maka kembali Masuk ke Dasbor Blogger anda Klik Tata Letak > Tambahkan Gadget>Lalu Tambahkan kode Salin (Copy) kode CSS dibawah ini;

<script src='/feeds/posts/summary?orderby=published&amp;max-results=3&amp;alt=json-in-script&amp;callback=repost1'/></script>



Nah Itulah Cara Mudah Membuat Widget Headline di Blog Blogger semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

Saturday, June 22, 2019

- 6/22/2019

Cara Mudah Membuat Gambar Background Header Blog

Cara Mudah Membuat Gambar Background Header Blog


Di setiap dalam Mendeasin tampilan pada sebuah situsblog tidak lepas dengan nama header yang memiliki desain yang unik pasti menjadi ciri khas tersendiri di setiap para pengguna blogger. Logo blog biasanya ditampilkan pada bagian header yang berupa gambar dan gambar teks yang berisi nama atau slogan dari sebuah situsblog. Seorang blogger dapat dengan mudah membuat teks logo blog maupun gambar logo blog untuk header dengan baik dan keren.

Pada umumnya slogan atau logo blog dipakai untuk menggantikan teks pada bagian title dan deskripsi header. Dalam hal ini membuat logo pada blog walaupun hanya berupa gambar atau foto logo dan text bukanlah hal mudah bagi seorang pemula blogging. setidaknya dibutuhkan keahlian khusus untuk membuat gambar logo dan teks yang lebih unik dan keren dengan menggunakan alat pengeditan maupun kode-kode tertentu agar menghasilkan tampilan cantik dan juga keren.

Pada jaman Tekhnologi janggih seperti sekarang ini di internet cukup banyak layanan situs online untuk membuat logo secara gratis maupun pascbayar yang dapat dengan mudah di temukan dari hasil penelusuran mesin pencarian google atau ada pada sebuah iklan google yang tayang di situsblog seseorang pengguna blogger. Dengan memakai jasa online untuk pembuatan logo atau gambar text memudahkan kita untuk mengedit dan membuat logo untuk header blog.

Sama halnya dengan membuat background header selain menggunakan fitur yang disediakan blogger. pada umumnya penulis blog atau admin blog membuat background header melalui klik "EDIT" pada tab halaman "TATA LETAK"di Elemen Header blog jika anda akan lebih tertarik untuk membuatnya melalui kode CSS.

Kode CSS HTML Java Script yang akan saya paparkan dalam artikel postingan ini yaitu cara paling mudah dan siapapun dapat dengan mudah menggunakannya. Hanya memasang kode CSS logo atau gambar background header untuk pada template blog milik anda dan sangatvmenarik yang dapat anda terapkan dan disesuaikan dengan design situsblog.

Ada beberapa kode CSS HTML yang bisa digunakan di blogger pada bagian header ketika anda membuat background header melalui "Elemen Header" yang digunakan. Berikut Cara Memasang Gambar Header di edit HTML template

Langkah yang dilakukan ialah :

Masuk ke Dasbor Blogger anda

Klik Tema > Lalu Edit HTML

Tambahkan kode Salin (Copy) kode CSS dibawah ini

Kemudian cari kode ]]></b:skin> untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya

Klik simpan pada tema Selesai

*/---- Header Background----- */

#header-wrap { background:url(https://3.bp.blogspot.com/-eNwf1wENyU0/XQUuYDS7OwI/AAAAAAAAEJE/j1PCwTM0yL8Px05-cK1pHhmkshSNaA9sACK4BGAYYCw/s167/iyaseo%2Bid.png) no-repeat; width:770px; height:265px; float:left; } #header-inner { background-position:center center; margin-left:auto; margin-right:auto; } #header { float:right; width:500px; color:transparent; text-align:right; padding:100px 20px 0 0; } #header h1 { height:45px; font:italic bold 30px georgia; letter-spacing:0; margin:0; padding:10px 0px 0px 0px; text-transform:none; text-shadow: 2px 2px 2px color:transparent; } #header a { color:transparent; text-decoration:none; text-shadow: 2px 2px 2px color:transparent; } #header a:hover { color:transparent; } #header .description { height:16px; color:transparent; font:bold 13px arial; letter-spacing:0em; margin:0; padding:2px 0px 47px 0px; text-transform:none; text-shadow: 1px 1px 1px color:transparent; } #header img { margin-left:auto; margin-right:auto; }
#header{ display: none !important; }



Nah sudah selesai Jika anda mau lebih keren lagi untuk background nya maka tambahkan elemen tertentu seperti Navbar dan Footer yang lebih Trend masa kini menggunakan background warna gradient ini dapat dibuat dengan kode CSS yang memang fungsi utamanya ialah untuk style atau tampilan nya warna warni dan lebih unik dari biasa atau standar pada sebuah blog dengan pembungkus dari HTML. Oke dalam kesempatan kali ini saya share cara membuat background gradien berwarna diblog Blogger berikut klik disitusblog INI untuk cara penerapan kode dibawah ini karena sumber kode ini dari blog tersebut;

Kode CSS Untuk Background Gradien Warna :
@-webkit-keyframes Gradient { 0% { background-position: 0% 50%} 50% { background-position: 100% 50%} 100% { background-position: 0% 50%} } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } div.header{ color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; display: block; font-weight: bold; color: black; }


Itulah pengenalan singkat Cara Mudah Membuat Gambar Background Header Blog semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.
- 6/22/2019

Cara Mudah Merubah Author Name Blog Blogger

Cara Mudah Merubah Author Name Blog Blogger


Apa itu Author nama?. Author nama adalah nama admin atau penulis artikel postingan dalam sebuah situsblog dan merupakan fitur bawaan default dari platform blogger. Terkadang kita merasa bosan dengan tampilan nama author pada blog sehingga kita ingin mengganti author name disetiap blog kita yang telah kita buat apalagi kita membuat blog lebih dari satu jika setelah kita ganti nama authornya, semua blog ikut terganti author namenya sebenarnya untuk Mengganti Author Name di Blogspot Blogger.bisa kita merubah sesuai dengan keinginan kita dan disetiap blog itu pasti name author berbeda-beda dalam satu akun blogger.

Mengubah nama author komentar di blog juga akan memberikan kesan tersendiri bagi admin blog itu sendiri selagi masih aktif dalam mengelola sebuah blog, dengan cara ini anda dapat menampilkan nama yang keren di profil author blog baik itu nama yang unik ataupun keren, atau bahkan nama yang berbeda dengan nama author bawaan dari blogger sebagai nama tampilan profil blogger.

Nama author yang dapat anda ganti di halaman posting di bagian post footer yang terletak tepat di bawah artikel postingan, yang berbentuk kotak yang di dalamya juga berisi hari dan tanggal waktu artikel diposting di buat, serta daftar label postingan. dan akan terlihat di setiap ada aktifitas membalas setiap komentar yang diberikan oleh author blog blogger. areal posisinya tepat di sebelah kanan icon author comment.

Oke dalam kesmpatan kali ini saya akan memberikan cara untuk merubah nama author atau nama penulis dalam sebuah blog blogger di bawah dengan bantuan kode CSS berikut ini:

.blog-author a, .ss a, .fn,.fn a{ font-size:0

!important; padding-right:5px; padding-left:5px;

} .fn:before,.comment

.blog-author a:before{ font-size:11px

!important; content:"IYASEO.ID"; }

.comment .blog-author a:before{ font-size:13px

!important; }




Cara memasang kode di atas coba anda simak langkah-langkah berikut ini:
1. Login ke Akun Google Dasbor Blogger nya

2. Lalu pilih Tema

3. Baru lanjut ke Edit HTML

o Cari Kode : ]]></b:skin>

o Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.

o Copy dan paste-kan kode CSS di atas kode ]]></b:skin>
o Ganti "IYASEO.ID" dengan nama yang ingin anda tampilkan.

o Simpan Tema

4. Nah Selesai...

5. Terakhir Buka blog di tab halaman baru artikel postinganya, lalu lihat di bawah postingan (post footer), kemudian berikan sebuah komentar untuk melihat apakah nama author yang baru sudah berubah jika sudah berarti anda selamat menerapkan cara ini semoga berhasil dan salam blogger...

Friday, June 21, 2019

- 6/21/2019

Tempat Memilih Template Blog Lebih SEO Friendly

Tempat Memilih Template Blog Lebih SEO Friendly


Setiap permulaan dan langkah pembuatan sebuah blog juga harus memerlukan tampilan gaya yang lebih keren dan juga cerah agar kelihatan bersih sehingga pengunjung akan senang dan betah untuk berlama- lama melakukan aktifitas dalam membaca isi dari blog yang kita kelola maka dari itu sebelum melakukan aktifitas menulis artikel kedalam halaman blog persiapkan dulu masalah gaya dan tampilan nya. Bagaimanakah cara agar tampilan blog lebih keren ? Dan Apakah yang harus kita lakukan ? dalam hal pembuatan situs web maupun blog.

Jikalau sahabat mengunjungi salah satu situs blog melalui halaman mesin penelusuran google maka sekali menjumpai atau melihat blog yang sangat istimewa dan unik pasti akan ada rasa timbul di hati ingin memiliki blog seperti itu terlebih lagi kalau isi dari blog kita menarik dan bermutu. Ini akan sangat menguntungkan bagi perkembangan blog kita, apalagi kalau blog kita adalah blog yang membahas tentang dunia internet atau media tekhnologi lainnya seperti jejaring sosial. tentunya ini akan menciptakan peluang besar buat blog milik kita, peluang yang dimaksud di sini adalah mendapatkan trafik pengunjung yang sangat memuaskan.

Langkah seperti ini dapat kita tempuh dengan merubah tampilan pada situsblog milik kita dengan gaya tema atau template standar yang di sediakan oleh blogger atau bisa juga dengan mengganti template blog dari pihak ketiga dari para desain template blog blogger maupun website .Tentunya dalam hal memilih template pilihlah yang lebih SEO FRIENDLY.di sini saya akan memaparkan beberapa tema atau template blog blogger yang anda bisa miliki untuk merubah tampilan dan gaya tema standar blog ke template premium. agar dapat merubah tampilan blog anda dengan template SEO friendly blogger premium GREEN MAGZ tempat untuk mendapatkan dan memiliki nya yaitu dari situsblog CONTOHBLOG COM

Disamping memang kompatible dengan blogger template dari CONTOHBLOG COM lumayan bagus-bagus dan keren banyak sekali pilihannya, langsung saja anda bisa memilih dan cek demo info untuk membeli templatenya di CONTOHBLOG COM.




Tampilan halaman depan CONTOHBLOG COM


Selanjutnya anda bisa memilih Koleksi Template Blog SEO Friendly, Fast Loading, Responsive. Terbaru & Terbaik dari CB Blogger (Premium) yang mana yang anda suka, dan tentunya yang pas dan sesuai dengan isi dan tema blog anda, pemilihan template yang tepat akan mempengaruhi kualitas blog dan kemampuan si pemilik blog tersebut.

Setelah menemukan tempalte yang pas dan cocok di hati dan cocok buat blog kita, selanjutnya klik tulisan DEMO, Jika sudah melihat demo dan info dari template tersebut maka langsung hubungi Via Email resminya dan terus cek lagi cara untuk mendapatkanya yaitu dengan cara order dan sekaligus melakukan pembayaranya.


Setelah selesai melakukan pembayaran maka pemilik atau admin mengirim file template blogger seofriendly premium nya Via Email milik anda Buka Kotak masuk dan download failnya tadi, biasanya file di convert dalam bentuk rar, extrak dan cari file dengan extensi xml. lihat contoh saya order GREEN MAGZ seperti gambar dibawah ini.


Tempat Memilih Template Blog Lebih SEO Friendly

Tempat Memilih Template Blog Lebih SEO Friendly


Selanjutnya buka dashboard blog kita dan pilih tab tema, kemudian klik Edit HTML templatenya, ganti code template yang ada dengan code template anda dengan yang baru. Lihat contoh Template Green Magz New SEO Blogger Template di bawah ini .

Tempat Memilih Template Blog Lebih SEO Friendly


Tampilan halaman depan Green Magz New SEO Blogger Template DEMO


kemudian simpan template tadi dan liat hasilnya, sekarang tampilan blog anda berubah sperti yang anda inginkan.

Selamat mencoba semoga artikel tentang Tempat Memilih Template Blog Lebih SEO Friendly banyak pengunjung yang akan mengunjungi blog anda. Semoga bermanfaat.Anda juga dapat memanfaatkan blognya Demikian tadi beberapa tips yang anda dapat saya paparkan, jika ada kekeliruan dalam penyampaian tentang susunan penulisan konten artikelnya maklumi, saya pun dalam proses belajar, Semoga bermanfaat ya Sahabat Blogger...

Tuesday, June 18, 2019

- 6/18/2019

Cara Mudah Membuat Artikel Terkait atau Related Posts di Blog

Cara Mudah Membuat Artikel Terkait atau Related Posts di Blog





Apa tujuan nya memasang Artikel Terkait di blog?. Artikel Terkait adalah list judul postingan artikel terdahulu yang masih ada hubungan keterkaitannya dengan postingan artikel yang di baca para pengunjung dari pengguna internet, blogger lainya termasuk pengelola blog dalam melakukan aktifitas membaca pada setiap tab halaman postingan sebuah situsblog tersebut.

Artikel terkait juga bisa disebut dengan julukan Related Posts. semua pemilik situs web maupun blog terdahulu memasang fitur ini apa lagi kita yang masih baru sehingga memudahkan ber navigasi semua pengunjung yang ingin membaca postingan artikel yang berhubungan langsung dengan artikel yang sedang dibaca.

Apakah Manfaat dari Artikel Terkait atau Related Posts?. Artikel Terkait atau Related Posts ini adalah Jika sudah Mempunyai jumlah artikel yang cukup banyak pada sebuah blog maka akan meningkatkan perview dari halaman blog tersebut dari hasil kunjungan pengunjung dan pembaca. Artinya banyaknya page view pada posting artikel blog dan menjadi peranan penting bagi situs blog tersebut di mata mesin penelusur google.

Memasang Fitur Artikel Terkait pada blog bisa di tempat kan di mana saja pada artikel postingan maupun di bawah postingan situs blog yang masuk dalam kategori terkait ataupun related posts artikel yang masih ada hubungan dengan artikel-artikel dalam satu label atau kategori blog milik kita.

Oke, pada kesempatan kali ini saya akan berbagi cara mudah membuat artikel terkait atau related post di blog. Dengan bantuan kode CSS HTML yang akan di paparkan dibawah sebagai berikut;

Perhatikan caranya dan langkah-langkahnya di bawah ini:



  • 1. Masuk ke Dasbor Blogger
  • 2. Edit HTML Template.
  • 3 Caranya pilih tab menu Tema, kemudian pilih Edit HTML
  • 4. Copy paste kode berikut ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /* Related Post */ #related_posts{margin-top:15px} #related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:120%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;} #related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff} </style> <script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script> </b:if> 

  • 5. Copy paste kode berikut ini di bawah kode <data:post-body/> yang kedua atau di atas kode <div class='post-footer'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='clear:both;'/> <div id='related_posts'> <h4>Related Posts :</h4> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div> </b:if>

  • 6. Save atau Simpan Temanya!



Demikian sudah cara mudah membuat artikel terkait atau related post di blog. Jika tidak berhasil silahkan sampaikan di kolom komentar di bawah, ya. Nanti bisa di bantu sampai bisa. Cara ini sudah dicoba dan sukses seperti yang saya terapkan pula di blog ini.

Sunday, June 16, 2019

- 6/16/2019

Cara Buat Menu Navigasi Keren Warna Warni di Blog

Cara Buat Menu Navigasi Keren Warna Warni di Blog




Salah satu ciri khas blog yang disukai para pengguna internet terutama pembaca dan pengunjung adalah memiliki jumlah artikel postingan yang sangat berguna dan bermanfaat untuk blog mereka selain dari semua itu tentunya dengan tampilan dan gaya dari situsblog yang anda kunjungi akan lebih jauh berbeda dan juga menarik. Apa lagi dengan tampilan menu navigasi yang jelas dan keren sehingga anda tidak segera menutup blog dalam menelusuri halaman-halaman yang ada di blog tersebut.




Mempunyai sebuah blog yang enak di pandang tentunya akan membuat blog milik kita akan mendapatkan trafik atau kunjungan yang lebih dari sebelum nya. Bahkan jika blog anda lebih unik dan keren dari blog-blog lain maka akan memberikan kebanggaan tersendiri bagi diri dan situs blog ada.




Pada umumnya ada beberapa blog yang masih standar sebagian tidak dilengkapi dengan menu navigasi. Seperti Menu pada header yang ber warna warni dan Menu Navigasi. dengan menggunakan gradient colour fitur, ini cukup membuat tampilan blog menjadi unik dan keren Untuk demo contohnya bisa dilihat di blog seperti navigasi menu header pada blog template milik saya ini.




Pada artikel postingan kali ini saya akan membagikan cara membuat menu navigasi yang keren dengan memilih warna latar belakang gradient yang anda inginkan. Banyak cara untuk mempercantik blog milik kita bisa dengan menggunkan popular posts warna-warni dan lain sebagainya.




Blog menjadi keren dengan Style atau gaya menu warna-warni tersebut bisa dipasang sesuai dengan keinginan anda masing-masing. Jika anda menginginkan menu navigasi berubah menjadi warna warni seperti yang diterapkan ke template blog ini, anda bisa juga dapat melakukannya dengan mudah dengan bantuan kode CSS yang telah di share dibawah yang bervariasi warna warni bagaikan pelangi dan keren.




Untuk memasang menu navigasi keren warna-warni pada blog anda bisa mengikuti langkah-langkah berikut di bawah ini;




Langkah-langkah memasang menu navigasi warna warni keren di blog :

1. Login ke akun Dasbor Blogger

2. Klik Tema

3. Klik Edit HTML

4. Letakan kode  berikut tepat di belakang kode navigasi menu blognya :

{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #0d68b1);background-size: 400% 400%;-webkit-animation: Gradient 10s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 12s ease infinite;}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}



Berikut contoh dalam gambar sebagai berikut;

Cara Buat Menu Navigasi Keren Warna Warni di Blog







Kemudian Save Template. Selesai Demikian cara memasang menu navigasi keren warna-warni di blog. Semoga bermanfaat dan terimakasih atas kunjungannya.

Tuesday, May 28, 2019

- 5/28/2019

Cara Membuat Judul Postingan Artikel Blog Berada Di Tengah Dengan Mudah

Cara Membuat Judul Postingan Artikel Blog Berada Di Tengah Dengan Mudah


Sahabat Blogger Tentunya sudah tau bagaimana agar Judul Postingan blog berada ditengah, Kalau Belum berarti sama dengan saya karena masih baru di dunia blogging berkat ada nya Google searching akhirnya saya bisa temukan cara untuk membuat judul postingan artikel berada di tengah,ternyata ada cara tersebut ada di sebuah blog milik saudara blogger tetangga sebelah.

Kenapa harus membuat judul berada di tengah? bagi saya pribadi penting sekali karena saya menganggap bahwa blog yang kita kelola seharusnya lebih profesional lagi seperti mereka yang sudah lama bergelut di dunia maya terutamanya Blogger, pengguna blogger yang masih baru harus kiat dan rajinlah mencari sesuatu hal yang baru untuk kemajuan blog nya tentunya.

Pada mulanya Judul sebuah postingan artikel di blog secara default terletak di sebelah kiri. Oleh sebab itu maka saya akan berbagi ke sahabat semua bagaimana cara membuat judul postingan berada di tengah, jika sahabat kepingin membuat judul postingan menjadi rata tengah atau rata kanan, maka anda harus menambahkan kode CSS ke dalam template blog blogger sahabat. Pada postingan kali ini, saya akan share bagaima cara yang mudah untuk membuat judul postingan artikel berada tepatnya di tengah.

Berikut adalah Cara Membuat Judul Postingan Artikel Berada di Tengah: 
1. Buka Dasbor Blogger 
2. Pilih Tema >> Lalu Pilih >>Edit HTML 
3. Cari Kode ]]></b:skin> (Ctrl+F):
4. Tambahkan kode CSS dibawah sebelum kode ]]></b:skin> berikut ini;
/*judul postingan rata tengah*/ .post-title { text-align:center; }
5. Setelah Selesai, jangan lupa Simpan Tema nya, hasilnya coba sahabat liat judul postingan yang ada di situsblog ini.

Sekarang sahabat  sudah mempunyai judul postingan artikel berada di tengah, baik di halaman Beranda blog (halaman Home page) maupun di halaman postingan. Demikian, Cara Membuat Judul Postingan Artikel Blog Berada Di Tengah Dengan Mudah kali ini, semoga bermanfaat buat sahabat semua.



Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini.



Salam Blogger!; https://iyaseo.id/

- 5/28/2019

Cara Memasang Efek Loading Mudah Diblog Blogger

Cara Memasang Efek Loading Mudah Diblog Blogger

Animasi efek loading ini berfungsi ketika sebuah situsblog dibuka dan gambar giftnya bekerja saat proses memuat halaman di blog, Bagaimanakah? cara agar animasi efek loading ini bisa di pasang ke situsblog? ok, agar efek animasi loading ini berfungsi maka dengan mudah di blog Blogger dengan bantuan kode CSS.

Didalam postingan artikel ini admin akan membagikan cara bagaimana efek loading terpasang dengan mudah dan mengatur efek pemuatan di halaman dengan gaya di blog blogger blognya dengan bantuan beberapa kode CSS. Efek animasi loading bekerja dalam proses pemuatan halaman ini sepenuhnya berdasarkan pada gambar ".gif". 

Kode dan Script CSS ini yang akan menunjukkan efek animasi memuat pada setip kali pengunjung mengklik tautan di dalam situsblog anda. jadi sebelum sahabat menambahkan efek animasi loading ini di blog anda sendiri, pastikan untuk melihat contoh demo di blog ini.

Jika sahabat ingin memasang kode animasi loading di blognya, ikuti langkah-langkah mudah dan singkat di bawah ini,dengan hati-hati untuk menambahkan Efek animasi Pemuat Halaman CSS ini ke blog bloggernya ya sahabat.

langkah pertama Kunjungi DasborBlogger Anda, Sekarang buka bagian "Tema" dan kemudian klik tombol "Edit HTML". Dalam templat, editor menemukan kode di bawah ini dengan menekan tombol "Ctrl + F" bersamaan dari keyboard Anda. Lalu cari tulisan </body> Setelah itu salin kode di bawah ini dan tempelkan tepat sebelum </body>



<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url(&#39;https://lh3.googleusercontent.com/-w0k9WLYgI4E/VtV1Nimf30I/AAAAAAAAER4/PqMxsluu_-A/s500-Ic42/4f432d9234988a5f33b26e0ba06bc6fe.gif&#39;) no-repeat 50% 50%;

display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>


Dan ok Sekarang klik pada tombol Simpan Tema untuk menerapkan perubahan.sahabat dapat mengubah URL gambar yang disorot dengan URL gambar apa gift apapun sesuai selera masing-masing,berikut gambar gift lain nya;

  1. https://2.bp.blogspot.com/-qDdhR_GsgIc/VsXER4QHbXI/AAAAAAAAAKM/vGBuCifoo6E/s1600/Preloader_4.gif
  2. https://4.bp.blogspot.com/-La49jB3eAaY/VsXERZVHZiI/AAAAAAAAAKI/C0flV0p8RhQ/s1600/Preloader_1.gif
  3. https://2.bp.blogspot.com/-yIGhPxzyKTI/VsXERGuO2vI/AAAAAAAAAKE/whhuzUfbK2Q/s1600/Preloader_3.gif
  4. https://2.bp.blogspot.com/-qDdhR_GsgIc/VsXER4QHbXI/AAAAAAAAAKM/vGBuCifoo6E/s1600/Preloader_4.gif
  5. https://4.bp.blogspot.com/-ewy07BU111Q/VsXESP6DMwI/AAAAAAAAAKU/VHakurICkW8/s1600/Preloader_6.gif






Itulah Cara Memasang Efek Loading Mudah Diblog Blogger Semoga artikel ini dapat bermanfaat bagi sahabat semua. Sekian dan terima kasih...



Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini.



Salam Blogger; https://iyaseo.id/

Friday, May 24, 2019

- 5/24/2019

Widgets Recent Posts Keren Buat Blog Blogger

Widgets Recent Posts Keren Buat Blog Blogger

Widget Recent posts keren ini sebenar nya sangatlah popular pada masanya, sehingga sekarang pun masih banyak yang memakai widgets ini di situsblog mereka,walaupun widgets ini terlihat mudah untuk dipasang di blog namun kadang tidak bisa berfungsi,karena blog itu bermacam macam desain template, jadi tergantung dari cara penerapanya ke dalam template di situs blog,tetapi disini admin blog ini sudah melakukan exprimen disetiap kode CSS/HTML yang akan di share di dalam artikel postingan ini. Sebuah widget recent post untuk blogger itu sesungguhnya sudah ada semenjak situsblog pertamakali memposting sebuah artikel kedalam halaman blognya.dan kalau sudah menambahkan widgets ke sidebar blog akan otomatis mucul dengan sendirinya bilah samping kanan maupun kiri sidebar situblog.

Ketika menambahkan widget Recent Posts untuk Blog blogger akan membantu untuk mengurangi ketergantungan pada pemesaran email, karena sahabat tidak perlu mengirimkan email hanya untuk memberi tahu orang bahwa anda sudah membuat postingan artikel baru. Sebaliknya, itu sudah terupdate otomatis untuk semua pengguna yang melihat. sahabat kemudian bisa menggunakan informasi ini untuk membuat newsletter email yang dijadwalkan, dan mengambil keuntungan dari apa yang sering disebut sebagai 'Twitter effect' di mana pemirsa secara teratur akan memeriksa kembali di situsblog anda untuk kemungkinan bahwa postingan artikel baru yang tersedia. Tanpa ini, anda memaksa pengguna untuk melakukan pencarian mereka sendiri untuk informasi dan konten, meningkatkan kemungkinan bahwa mereka akan meninggalkan situsblog anda.

Setelah sahabat berhasil menarik pengunjung ke salah satu postingan artikel anda menggunakan recent posting baru widget untuk Blogger, itu akan terus bertindak sebagai sumber sekunder dapat diakses untuk menavigasi sekitar situsblog anda. Dengan cara itu, anda dapat menghindari pengguna memilah-milah konten lama yang mungkin usang. Jika sahabat lebih suka memamerkan beberapa artikel postingan terbaik anda, bukan tulisan terbaru anda, Anda bisa melakukan itu sebagai gantinya, atau menambahkan fitur ke sidebar hanya dengan beberapa perubahan. Terlepas dari tampilan besar dan mengambil ruang minimal, ada banyak manfaat bagi anda untuk tidak memiliki widget recent post untuk Blogger.

Bagian terbaik tentang kode CSS/HTML ini adalah bahwa sering ada dalam berbagai macam desain yang sesuai denga tema apapun. Jika sahabat tertarik untuk menambahkan widgets ke situsblog anda, di sini ada beberapa widgets Recent posts keren atau menjadi widgets popular posts, yang mungkin menarik buat sahabat dan pas di hati dengan template Blogger anda,berikut ini;

Design Widgets 1:


Widgets Recent Posts Keren Buat Blog Blogger

Design Widgets 2:


Widgets Recent Posts Keren Buat Blog Blogger

Design Widgets 3:


Widgets Recent Posts Keren Buat Blog Blogger

Code CSS/HTML Design 1;



<div class="recentpostarea">
<style type="text/css">
.recentpostarea {list-style-type: none;counter-reset: countposts;}
.recentpostarea a {text-decoration: none; color: #49A8D1;}
.recentpostarea a:hover {color: #000;}
.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}
li.r-p-title { padding: 5px 0px;}
.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}
.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style>
<script type = "text/JavaScript">
function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}
</script>
<script>
var posts_number = 9;
var posts_date = true;
var post_summary = true;
var summary_chars = 80;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
<noscript>Your browser does not support JavaScript!</noscript>
</div>




Code CSS/HTML Design 2;



<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Code CSS/HTML Design 3;



<style>
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 72;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Code CSS/HTML Design 4;




<style scoped="" type="text/css">
ul.borecentpost *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.borecentpost{font-size:11px}ul.borecentpost,ul.borecentpost li{margin:0;padding:0;list-style:none;position:relative }ul.borecentpost{width:100%;height:500px }ul.borecentpost li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.borecentpost li:nth-child(1),ul.borecentpost li:nth-child(2),ul.borecentpost li:nth-child(3),ul.borecentpost li:nth-child(4){display:block }ul.borecentpost img{border:0;width:100%;height:auto}ul.borecentpost li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.borecentpost li:nth-child(2){left:0;top:50% }ul.borecentpost li:nth-child(3){left:50.5%;top:50% }ul.borecentpost li:nth-child(4){width:100%;left:0;top:75% }ul.borecentpost .overlayx,ul.borecentpost li{transition:all .4s ease-in-out }ul.borecentpost .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.borecentpost .overlayx,ul.borecentpost img{margin:3px}ul.borecentpost li:nth-child(1).overlayx{background-position:50% 25% }ul.borecentpost .overlayx:hover{opacity:.1 }ul.borecentpost h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.borecentpost li:hover h4{bottom:30px}ul.borecentpost li:nth-child(1)h4,ul.borecentpost li:nth-child(4)h4{font-size:150% }ul.borecentpost .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.borecentpost li:hover .label_text{bottom:20px;opacity:1}ul.borecentpost li:nth-child(2).autname,ul.borecentpost li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostslider"></div>
<script type='text/javascript'>
function FeaturedPostSlider(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="borecentpost"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSlider({
blogURL: "https://www.iyaseo.id/",
MaxPost: 8,
idcontaint: "#featuredpostslider",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>


</script>



Bagaimana kah ? Cara Tambahkan Widget Recent Posts di Blogger
Ingin menambahkan salah satu widgets design di atas?
Cukup ikuti langkah-langkah berikut di bawah ini: 

Langkah 1. Masuk ke Draft Blogger Anda dan klik pada blog Anda.
Langkah 2. Pergi ke "Tata Letak" dan klik "Tambakan Gadgets" link di sisi kanan
Langkah 3. Dari pop-up jendela, gulir ke bawah dan pilih "HTML / JavaScript" gadget:


Widgets Recent Posts Keren Buat Blog Blogger




Langkah 4. Paste kode widget yang dipilih di widget HTML/JavaScript.
Langkah 5. Tekan Tombol "Simpan" ... dan selesai






Menggunakan Widget Recent Post keren untuk Blogger benar-benar dapat menguntungkan bagi anda dan meningkatkan keterampilan Anda sebagai seorang blogger. 

Seperti yang anda lihat, desain ini bisa terlihat bagus di situs Blogger,Posting ini akan secara otomatis diperbarui pada widget Anda dan pembaca dapat melihat informasi ini kapan pun mereka inginkan. Menambahkan widget recent post untuk Blogger di setiap halaman situsblog atau dalam template anda sehingga tulisan ini dapat mendorong orang lain untuk melanjutkan membaca, sehingga meningkatkan total waktu yang dihabiskan di situsblognya.
Demikian informasi yang bisa saya berikan kepada anda tentang Widgets Recent Posts Keren Buat Blog Blogger yang sudah anda kelola saat ini. Semoga informasi ini bisa memberikan banyak manfaat dan mudah untuk anda praktekkan. Sampai disini dulu artikelnya, terimakasih sudah membaca.

Wednesday, May 22, 2019

- 5/22/2019

Cara Singkat Membuat Contact Form Di Blogger

Cara Singkat Membuat Contact Form Di Blogger


Contact Form itu apa kegunaanya buat situsblog ? "Yah kalau menurut saya sangatlah berguna karena bila ada pengguna atau pengunjung yang ingin menghubungi pemilik blog tersebut tentunya harus mempunyai contact form".

Admin di sebuah situs blog Seharusnya memasang fitur contact Untuk situs Blog Blogger nya, bagi yang masih baru melakukan kegiatan blogging nya usahakanlah saat pertama kali mendesign tampilan blognya tentunya berkunjung lah dulu ke situs blog lain agar bisa mengetahui apa saja yang harus di isi buat situs blognya,karena blog-blog orang lain itu sudah lama menekuni bidang di dunia blogging, agar bisa menemukan ide-ide yang ingin di terapkan di blog yang anda kelola, misalkan seperti membuat halaman contact yang akan saya bagikan ke sahabat semuanya.

Sebelumnya sahabat harus tahu, bahwa untuk menampilkan contact form ini di halaman pages blognya, harus membuka setelan menu pada tab menu tema atau template blognya, halaman Contact ini cukup penting fungsinya, apabila kita akan fokus dalam dunia blogging, karena akan di gunakan melalui fitur ini bila ada keperluan yang sangat penting dari pengguna dan pengunjung, atau dari situsblog lain, kemudian berguna juga untuk memasang URL di Privacy Police dan Disclaimer Cara yang akan di lakukan adalah sebagai berikut:

1. Masuk Ke Draft blogger
2. Pilih > Halaman / Pages
3. Pilih Halaman Baru
4. Buka Format HTML dan Copas Script Berikut :

<style scoped="" type="text/css"> #comments,#sidebar-wrapper {display:none;} #post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;} </style>
<br />
<div style="text-align: center;">
<h3 style="text-align: left;">
<b>Silakan Isi Form Di Dawah Ini Untuk Menghubungi Admin IYASEO.ID Jika Tidak Ada Halangan dan Kesibukan Lainnya, Admin Akan Langsung Merespon Pesan Yang Anda Kirimkan.
</b></h3>
</div>
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Poppins';display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Poppins';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>


Cara Singkat Membuat Contact Form Di Blogger


• Selanjutnya Tuliskan Nama Halama/Pages di kolom Entri Dengan Contact dan publikasikan halaman baru tersebut
• Kemudian setelah selesai , kembali ke halaman/pages untuk melihatnya klik lihat di bawah laman contact, Seperti gambar berikut di bawah ini;


Cara Singkat Membuat Contact Form Di Blogger

Untuk melihat hasil contact from nya seperti ini

Baiklah, itulah pembahasan artikel nya kali ini, semoga artikel ini dapat memberikan manfaat dan informasi kepada anda. Pembahasan diatas merupakan Cara Singkat Membuat Contact Form Di Blogger Selamat mencoba, semoga anda sukses.


Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini Dengan Menekan atau Klik Tombol Show Comments yang Berwarna Biru Di Bawah Postingan Ini...



Salam Blogger: https://www.iyaseo.id/
- 5/22/2019

Cara Membuat Widgets Subscribe to Our Newsletter

Cara Membuat Widgets Subscribe to Our Newsletter

Sahabat blogger sudah tau Apakah tujuan ? dari widgets yang satu ini bisa dipasang di situsblog penasrankan. !!! ok, SUBSCRIBE to OUR NEWSLETTER Merupakan salah satu widget yang sangat penting buat situsblog karena bisa digunakan untuk berlangganan artikel postingan sebuah blog melalui kiriman email otomatis dari situsblog yang kita kelola ke pengunjung blog yang sudah mengikuti lewat email berlangganan di widgets ini, atau semua postingan artikel apdate terbaru akan secara otomatis dikirim ke email pengunjung blog anda. memang ini cara lama tapi masih bisa di gunakan istilahnya untuk pengumuman ke pengunjung blog setia anda untuk mengetahui postingan artikel terbaru,sahabat sudah mengerti.kan ada keuntungan nya juga untuk blog lho antara nya
bisa digunakan untuk mendapatkan backlink ke situblog anda, selain dari yang sudah di share ke jejaring sosial lainnya, selain dari pada itu juga bisa untuk mempercantik atau menambahkan widgets nya di template yang kita gunakan,dan cara membuat nya perhatikan dibawah ini:

Cara untuk membuatnya adalah seperti berikut:

1. Masuk Ke daraf Blogger
2. Pilih > Tema > Edit HTML
3. Copykan Code di bawah ini di atas code : ]]></b:skin> atau kode </style> bisa anda search terlebih dahulu dengan menekan Ctrl + F

/* Subscribe Box */ #subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;} .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:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0} .subscribe-css-email-button{background:#2BA6E1;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:#98DEFE;} #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%;}

4. kemudian cari code : <div id='footer'> Copy code CSS di bawah ini di bawahnya :
<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=IyaseoidId' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=IyaseoidId', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='IyaseoidId'/>
<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>
</div>

5. Dan terakhir Simpan Tema, dan lihat hasilnya.jika ngga berfungsi kode CSS nya bisa coment di bawah postingan ini terimakasih...


Perhatian: Tulisan Iyaseoid yang ada tanda berwarna Merah diganti dengan nama id feedbunner nya sahabat dan juga bisa merubah posisi atau tempat SUBSCRIBE to OUR NEWSLETTER bisa di bawah footer, di sidebar atau di bawah postingan bisa anda tentukan dengan paste code CSS ke-dua di atas di letak code CSS yang anda inginkan.


Baiklah, itulah pembahasan artikel nya kali ini, semoga artikel ini dapat memberikan manfaat dan informasi kepada anda. Pembahasan diatas merupakan Cara Membuat Widgets SUBSCRIBE to OUR NEWSLETTER Selamat mencoba, semoga anda sukses.


Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini Dengan Menekan atau Klik Tombol Show Comments yang Berwarna Biru Di Bawah Postingan Ini...



Salam Blogger: https://www.iyaseo.id/

Tuesday, May 21, 2019

- 5/21/2019

List Widgets Popular Posts Yang Menarik

List Widgets Popular Posts Yang Menarik


Widgets popular posts secara default sudah ada ketika sahabat membuat situsblog di platform blogger.Jika Anda masih menggunakan widgets default maka beralihlah ke widgets popular post dengan fitur yang menarik dan sederhana untuk memasang nya di situsblog cukup buka Blogger Draft dan sahabat dapat dengan mudah menambahkannya.

Widgets popular post default tidak terlalu menarik perhatian bagi pengunjung di situsblog. maka tepatnya anda meemilih widgets popular posts yang akan saya bagi ke semua pengunjung blog yang sederhana ini.

Sebelumnya saya telah menggunakan widgets popular posts blogger default dan tidak menerapkannya,Jadi saya sarankan ke pada sahabat semua untuk menambahkan widgets popular post ini ada beberapa list widget dengan fitur yang menarik berikut CSS stylesheet sesuai pilihan sahabat di bawah ini:

1. Widgets popular posts


.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }
.popular-posts ul li:hover {
    background:#FF8040;
    }
.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    } 

2. Widgets popular posts

.popular-posts ul
{
padding-left:0px;
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border: 1px solid #dcdcdc;
}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border-bottom:1px dashed #dcdcdc;
background:#ffffff;
}
.popular-posts ul li a
{
text-decoration:none;
font:16px georgia,verdana;
color:#3d87c4;
}
.popular-posts ul li a:hover {
text-decoration:none;
color:#333333;
}

 3. Widgets popular posts


.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }
    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }
.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
 
    }

4. Widgets popular posts

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}

Cara mudah untuk memasangnya di situsblog nya berikut saya akan membagikan cara pasang CSS popular posts seperti gambar di bawah ini :

Caranya Sebagai berikut :
1. Buka daraft Blogger > Pilih Tema > Edit HTML 
2. Copykan kode CSS di atas dan pilih salah kode lalu pastekan di atas  ]]></b:skin> 


List Widgets Popular Posts Yang Menarik


Nah, itulah List Widgets Popular Posts Yang Menarik. Semoga artikel ini dapat bermanfaat bagi sahabat semua. Sekian dan terima kasih...



Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini Dengan Menekan atau Klik Tombol Show Comments yang Berwarna Biru Di Bawah Postingan Ini...



Salam Blogger;https://www.iyaseo.id/