Cara Mengubah Tampilan Judul Widget Sidebar Blog Menjadi Keren Simpel

Blogging

Cara Mengubah Tampilan Judul Widget Sidebar Blog Menjadi Keren Simpel

25 November 2021

Keindahan, keserasian, dan kerapian menjadi salah satu pertimbangan yang menentukan dalam seni mendesain blog. Oleh karenanya, beberapa blogger pun mendesain tampilan widget-widget di blog mereka agar tampak serasi dengan tampilan desain template dan background warna yang dipilih. Tidak perlu terlalu wah, cukup tampilan simpel tapi keren dengan satu atau dua warna dominan untuk tampilan tersebut.

Ketika membuat/menambahkan widget tertentu pada bagian sidebar, biasanya hasil yang kita dapatkan hanya berfungsi untuk mencipta pada tampilan isi widgetnya. Sementara judul widget biasanya akan tetap mengikuti tampilan default yang telah diatur oleh bawaan template blog kita. Maka tidak jarang kita agak kecewa karena tampilan widget yang baru dibuat tidak seperti dicontohkan oleh tutorial yang diikuti. Ya karena itu tadi, tutorial biasanya tidak termasuk mengubah tampilan judul widget. 

Lalu bagaimana jika kita hendak mengubah tampilan judul widget pada sidebar agar tampilannya sesuai kemauan kita?.

Pastinya kita harus mengubah sendiri kode CSS pengaturnya di template html blog kita. Jika anda suka berkreasi, anda mungkin bisa mengutak-atik sendiri kodenya untuk membuat tampilan seperti yang diinginkan. Tapi jika anda tidak mau repot, mungkin anda bisa ikuti tutorial dari Santos Blog di bawah ini untuk mengubah tampilan judul widget sidebar agar menjadi lebih keren. 

Cara Mengganti Tampilan Judul Widget Sidebar Blog

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Terlebih dahulu silahkan cari kode CSS pengatur judul widgetnya. Misal seperti di bawah ini:

#sidebar-wrapper h2 {........ 

Atau

.sidebar h2 {..... 

Silahkan hapus kode tersebut agar tidak bentrok dengan kode baru yang hendak anda tambahkan. 

4. Ada 3 tampilan judul widget sidebar simpel keren yang ingin saya bagikan. Silahkan pilih salah satu dari 3 pilihan berikut ini. 

Versi Pertama

Kode CSS:

#sidebar-wrapper h2{font-family: 'Oswald';font-size: 16px;font-weight: bold;color: #333;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;margin-left:2px;border-bottom:2px solid rgba(0,0,0,0.05);position:relative;color:#000}#sidebar-wrapper h2:after{content:"";position:absolute;bottom:-1px;left:0;width:60px;height:2px;background:#068488}

Versi Kedua

Kode CSS:

#sidebar-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 16px;font-weight: 500;color: #666;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}

#sidebar-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTUqxakRoDap9P9sOp2AXEFEt4s07hzsif1j2qZtWqTM8E2_x6BaZm93OGJ3K-TAUipMScGgZMCnCavHVm-mI8OSZu6qPJQycLsAtAhCh6o9PBoF4b2N7w1SF1xLkI3Hv69zP0kjqv9Ll/s1600/repeat-bg.png)repeat;}

Versi Ketiga

Kode CSS:

#sidebar-wrapper h2 {padding:10px;margin: 0px 0 0 0; background: #068488; font-family: 'Oswald';font-size: 16px;font-weight: 500;color:#eee;text-transform:uppercase;text-align:center;}

5. Silahkan copy paste salah satu kode di atas untuk menggantikan kode CSS yang anda sudah hapus sebelumnya. 

6. Simpan kembali template anda. 

Silahkan lihat hasilnya. Keren bukan?. Anda juga bisa mengedit lagi kodenya untuk menyelaraskan background warna, jenis font, dll agar sesuai dengan tampilan blog anda. Semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Featured Post Slider Manual Keren di Blog

Blogging

Cara Membuat Widget Featured Post Slider Manual Keren di Blog

13 November 2021

Beberapa waktu yang lalu, seseorang mengirimi pesan email kepada saya dan bertanya mengenai cara membuat widget slider seperti yang ada di blog saya ini. Saya sudah membalas email tersebut tapi mungkin kotak masuk (inbox) email orang tersebut penuh sehingga gagal terkirim (recipient inbox full). Jadi, postingan kali ini saya buat untuk pengirim email tersebut dan juga untuk anda yang mungkin membutuhkannya. 

Mengenai widget Featured Post Slider yang ada di blog ini, sebetulnya dulu saya sudah pernah membagikan tutorialnya. (Baca: Cara Membuat Slide Show Keren Manual di Blog). Hanya saja, tampilannya sedikit saya ubah jadi lebih minimalis tapi tetap terlihat keren. Selain tampilan cantik, kelebihan widget ini yaitu kita bisa memilih sendiri artikel-artikel yang hendak ditampilkan semau kita dengan mengaturnya secara manual. 

Jika anda ingin yang tampilannya sudah dimodifikasi seperti yang saya pasang di blog ini, silahkan ikuti langkah-langkah pemasangannya di bawah ini. 

Memasang Widget Featured Post Slider Keren di Blog

1. Buka akun blogger anda.

2. Pilih menu layout (tataletak) dan klik tambahkan gadget. Biasanya tempat strategis di atas Blog Post. 

 

3. Pilih html/javascript, kosongkan judul, kemudian copy pastekan kode di bawah ini.

<style>

.easyslider-wrapper{width:auto; float:left;position:relative; padding-right:2%; padding-top: 10px} .easyslider{overflow: hidden; position:relative; width:auto; height:350px; background:#eee;border-radius:5px;margin-bottom:10px;} .image_reel{position:absolute; top: 0; left: 0;} .image_reel img {float:left;width:20%; height: 350px;} .paging{background:none; position:absolute; bottom:0px; right:10px; padding:4px 0 2px; z-index: 100; display:none;} .paging a{margin:3px; background: #fff; width:10px; height:10px; border-radius:100%; display: inline-block; border:none; outline:none;} .paging a.active{ background:#15E3FF; border:1px solid #15E3FF;} .paging a:hover{ } .easytitledes{width:70%; display:none; position:absolute; bottom:0px;left:0px; z-index: 101; padding:10px 15px;} .easytitledes a{color:#15E3FF; font:16px 'Open Sans'; text-transform:capitalize; font-weight:bold;text-shadow: 1px 1px 0 #000;} .easytitledes a:hover{color:#29FF00}

@media screen and (max-width:800px){

.easyslider {margin-top:15px}} 

@media screen and (max-width:600px){

.easyslider {width:100%;margin-bottom:20px}} 

@media screen and (max-width:500px){

.easyslider {width:auto;height:300px;margin:4px;margin-bottom:10px}

.image_reel img {height:300px}

}

</style>

<div class='easyslider'> <div class='image_reel'> <a href='https://LinkPostingan1.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan1.jpg'/></a>  <a href='https://LinkPostingan2.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan2.jpg'/></a> <a href='https://LinkPostingan3.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan3.jpg'/></a> <a href='https://LinkPostingan4.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan4.jpg'/></a> <a href='https://LinkPostingan5.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan5.jpg'/></a> </div> <div class='descriptionslider'> <div class='easytitledes'><a href='https://LinkPostingan1.html'>Judul Postingan 1</a></div> <div class='easytitledes'><a href='https://LinkPostingan2.html'>Judul Postingan 2</a></div> <div class='easytitledes'><a href='https://LinkPostingan3.html'>Judul Postingan 3</a></div> <div class='easytitledes'><a href='https://LinkPostingan4.html'>Judul Postingan 4</a></div> <div class='easytitledes'><a href='https://LinkPostingan5.html'>Judul Postingan 5</a></div> </div> <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/> </a></a></a></a></a></div> </div>

Keterangan:

• Warna merah ganti dengan link postingan. 
• Warna hijau ganti dengan link gambar postingan. 
• Warna biru ganti dengan Judul Postingan. 
• Sesuaikan urutannya.

4. Klik Simpan. 

5. Buka menu thema dan klik edit html.

Agar widget slider (gambar geser) nya berfungsi, copy javascript di bawah ini dan letakkan di atas kode </body>

<script type='text/javascript'> /*<![CDATA[*/$(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 5000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); /*]]>*/</script>

6. Simpan template dan lihat hasilnya. 

Kalau masih belum berfungsi, berarti belum terpasang kode Jquery di template blog anda. Silahkan masuk edit html lagi, copy kode di bawah ini dan letakkan di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Terakhir, agar widget hanya tampil pada tampilan beranda (home), tambahkan tag kondisional pada html widget yang anda pasang ini. Sisipkan menjadi seperti berikut ini:

<b:widget cond='data:view.isHomepage' id='HTML3' locked='false' title='' type='HTML'>... 

Keterangan: kode berwarna merah adalah tag kondisional yang ditambahkan. 

Simpan kembali template dan lihat hasilnya. Demikianlah tutorial tentang cara memasang widget Featured Post Slider Keren di Blog. Semoga bermanfaat.

Selengkapnya

Cara Mengubah/Mengganti Jenis Font Tulisan di Blog

Blogging

Cara Mengubah/Mengganti Jenis Font Tulisan di Blog

21 Oktober 2021

Kata orang, jenis font tertentu bisa berpengaruh bagi setiap pembacanya. Begitu pula dalam seni mendesain web/ blog, pemilihan font yang tepat juga diyakini bisa membuat blog tersebut disukai oleh para pembaca setianya. Itulah yang disebut seni tipografi. Selain menjadi salah satu daya pikat blog, pemilihan font yang tepat juga akan membuat pengunjung merasa nyaman saat menjelajahi artikel-artikel di blog anda. 

Sebagai pemilik blog, kita memang bebas untuk memilih jenis font yang kita kehendaki untuk tampilan blog kita. Namun jangan lupa pula bahwa artikel-artikel kita juga ditujukan untuk banyak orang sehingga kita juga harus memperhatikan kenyamanan mereka saat membaca artikel-artikel kita. Agar artikel yang telah kita posting mendapat tingkat user experience yang tinggi, maka pilihlah jenis font terbaik yang mudah dibaca dan nyaman bagi pengunjung.

Untuk itu, pada postingan kali ini Santos Blog kembali ke hadapan anda untuk memberikan tutorial mengenai cara untuk mengatur/mengubah jenis font di blog. Silahkan simak penjelasan di bawah ini. 

Mengganti Jenis Font di Blogger

Ada beberapa cara yang bisa anda lakukan untuk mengubah atau mengatur jenis font untuk desain blog, baik itu untuk halaman artikel, widget, atau fitur-fitur lainnya. 

Cara pertama, 

Jika anda hendak mengubah font untuk halaman postingan, maka cara paling mudah yaitu gunakan fitur pengaturan yang telah tersedia di atas form untuk posting artikel. Tampilannya seperti di bawah ini. 

Silahkan klik segitiga kecil di samping simbol A kemudian pilih jenis font yang ingin digunakan untuk artikel anda. Ada beberapa pilihan font yang tersedia seperti Arial, Courier, Georgia, Helvetica, Times, Trebuchet, dan Verdana. Jika masih kurang, anda bisa tambahkan lagi jenis font lainnya dengan klik Add more fonts.

 

Jenis font yang anda pilih tersebut bisa diatur untuk keseluruhan isi artikel atau bisa juga diatur pada kalimat tertentu dengan menselect kalimatnya terlebih dahulu lalu pilih font yang diinginkan. 

Cara kedua, 

Untuk mengganti/ mengubah jenis font, kita juga bisa menggunakan kode CSS untuk mengaturnya. Adapun kodenya yaitu sebagai berikut:

font-family: Verdana;

Silahkan ganti Verdana dengan jenis font yang anda inginkan. Penambahan kode CSS ini bisa anda terapkan misal untuk mengatur font tulisan/kalimat pada widget, area sidebar, footer, dll.

Selain itu, cara ini juga bisa anda terapkan untuk font postingan dengan mengaturnya lewat edit template. Adapun langkah penerapannya yaitu silahkan pilih menu thema ➡ klik edit html ➡ cari kode: .post{  atau .post-body{

Setelah itu, letakkan kode CSS untuk jenis fontnya ke dalam kurung pada kode tersebut sehingga menjadi seperti berikut ini:

.post-body {font-family:Oswald; font-size:... } 

Cara Ketiga, 

Cara terakhir ini bisa anda terapkan misal anda hendak mengaturnya pada kalimat/tulisan/paragraf langsung lewat halaman html. Untuk mengatur jenis font yang diinginkan, anda bisa tambahkan tag <div> atau <span> atau <p> lalu kombinasikan dengan kode CSSnya. 

Contoh Penerapannya seperti berikut ini:

<div style="font-family:Arial">Kalimat yang hendak diatur fontnya</div>

Atau 

<span style="font-family:Oswald">Kalimat yang hendak diatur fontnya</span>

Atau 

<p style= "font-family:Verdana">Kalimat yang hendak diatur fontnya</p>

Demikianlah tadi tutorial singkat terutama bagi blogger pemula mengenai cara mengubah/ mengatur jenis font untuk desain blog. Semoga bermanfaat.

Selengkapnya

Cara Mengatur Kalimat dengan Huruf Tebal, Miring, dan Bergaris Bawah di Blog

Blogging

Cara Mengatur Kalimat dengan Huruf Tebal, Miring, dan Bergaris Bawah di Blog

12 Oktober 2021

Pada kesempatan kali ini, Santos Blog ingin berbagi tutorial khusus untuk blogger pemula yang mungkin masih asing terkait fitur-fitur dalam dunia blogging. Tutorial ini memang sangat mudah karena sebetulnya bisa dipelajari sendiri seiring waktu berjalan. Namun tidak ada salahnya untuk saya ulas agar anda lebih cepat paham terkait penerapannya. 

Saat mendesain tampilan blog, adakalanya kita perlu untuk memberikan suatu penekanan pada kalimat tertentu agar bisa dipahami dengan baik oleh pembacanya. Kita tentu familier dengan beberapa penulisan kata atau kalimat yang ditampilkan dengan gaya berhuruf tebal, huruf miring, atau huruf bergaris bawah. Nah, bagaimanakah cara untuk mengaturnya seperti itu?. 

Ada tiga cara yang bisa kita lakukan untuk mengatur penulisan kata atau kalimat dengan huruf tebal, miring, atau bergaris bawah. 

Cara pertama, 

Jika kalimat yang hendak diatur tersebut merupakan isi di dalam postingan, maka cara termudah yaitu gunakan fitur yang telah tersedia pada menu bar di atas halaman untuk posting artikel. Tampilannya seperti di bawah ini. 

Keterangan:

• Simbol B (bold) untuk mengatur huruf tebal. 
• Simbol I (italic) untuk mengatur huruf miring. 
• Simbol U (underline) untuk membuat kalimat bergaris bawah. 

Silahkan select terlebih dahulu kata/kalimat yang hendak anda atur, kemudian pilih salah satu dari ketiga pilihan settingan tersebut sesuai keinginan anda. Atau anda juga bisa memadukannya sesuai selera. Misal kalimat tebal + miring + bergaris bawah, dll. 

Cara kedua, 

Untuk membuat kalimat dengan huruf tebal, miring, atau bergaris bawah, kita juga bisa menggunakan kode CSS untuk mengaturnya. Adapun penulisan kodenya yaitu sebagai berikut. 

font-weight: bold ➡ untuk huruf tebal

font-style: italic ➡ untuk huruf miring

text-decoration: underline ➡ untuk huruf bergaris bawah

Penambahan kode CSS ini bisa anda terapkan misalnya jika anda hendak mengaturnya untuk font tulisan/kalimat pada widget, area sidebar, footer, dsb. 

Cara Ketiga, 

Cara terakhir ini cukup mudah dan bisa anda terapkan misal anda hendak mengaturnya pada kalimat lewat halaman html secara langsung. Agar font kalimatnya menggunakan huruf tebal, miring, atau bergaris bawah, silahkan bingkai kalimat tersebut dengan kode-kode di bawah ini:

<b> ....... </b> : agar berhuruf tebal. 

<i> ....... </i> : agar berhuruf miring. 

<u> ....... </u> : agar huruf bergaris bawah. 

Nah, Itulah tadi tutorial singkat bagi pemula mengenai cara mengatur kalimat/tulisan dengan huruf tebal, miring, dan bergaris bawah di Blog. Baca juga: Cara Memberi Warna Pada Tulisan di Postingan Blog.

Selengkapnya

Cara Membuat Efek Zoom (Membesar) Pada Gambar Postingan Ketika Disentuh

Blogging

Cara Membuat Efek Zoom (Membesar) Pada Gambar Postingan Ketika Disentuh

11 September 2021

Beberapa waktu yang lalu, Santos Blog pernah mengulas mengenai cara membuat efek goyang pada gambar postingan blog ketika disentuh. Jika anda sudah bosan, anda bisa menggantinya dengan efek lain pada gambar tersebut, salah satunya yaitu dengan memberi efek zoom (membesar) ketika gambar tersebut terkena kursor mouse (pada versi web) atau disentuh tangan (pada versi mobile). 

Selain membuat blog jadi tampak lebih unik, tampilan efek zoom ini juga memberi manfaat bagi pembacanya. Mereka jadi lebih mudah memahami maksudnya ketika mendapati gambar yang terlalu kecil. Efek ini juga memudahkan pembaca untuk melihat detail suatu gambar pada sebuah postingan tanpa harus mengkliknya. Sentuhan kursor mouse atau tangan yang mengarah pada gambar tersebut akan membuat gambar membesar sehingga gambar akan terlihat menjadi lebih jelas. 

Apakah cara penerapannya sulit?. Tenang saja, kita hanya akan menambahkan kode CSS pada html template blog. Lebih lanjut silahkan ikuti langkah-langkah di bawah ini. 

Cara Memberi Efek Zoom Pada Gambar Postingan Ketika Disentuh

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html.

3. Terlebih dulu cari kode ]]></b:skin> atau </style>

4. Kalau sudah ketemu, silahkan gunakan kode CSS di bawah ini:

.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}

Atau gunakan kode berikut ini:

.post img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }

Silahkan pilih salah satu dari kode di atas, terserah yang mana, kemudian letakkan kode tersebut di atas kode ]]></b:skin> atau </style>

5. Simpan kembali template anda.

Silahkan lihat dan tes hasilnya. Apakah gambar postingan ketika disentuh tiba-tiba membesar (zoom)?. 

Saya memang tidak memasangnya di blog ini, jadi anda bisa mencobanya sendiri di blog anda. Kalau tidak suka atau sudah bosan, anda tinggal hapus lagi saja kodenya. Demikian tutorial kali ini. Semoga bermanfaat.

Selengkapnya

Cara Memasang Ikon + Link Media Sosial Keren Menarik di Blog

Blogging

Cara Memasang Ikon + Link Media Sosial Keren Menarik di Blog

30 Agustus 2021

Memasang widget sosial media bisa menjadi suatu alternatif agar blog semakin dikenal oleh pengunjung setianya. Dengan menyertakan link menuju media sosial, pengunjung bisa lebih mudah untuk berinteraksi dengan pemilik blog tersebut. Hubungan pertemanan pun bisa menjadi lebih dekat dan akrab antara pemilik blog dengan para pembacanya. 

Nah, kali ini Santos blog ingin berbagi tutorial mengenai cara membuat widget media sosial keren di blog. Widget yang akan kita buat kali ini memiliki tampilan cukup keren dengan efek bisa berputar ketika disentuh. Ikon-ikon media sosialnya juga saya buat menggunakan ikon Svg sehingga tidak akan begitu mempengaruhi kecepatan loading blog. Anda juga bisa mengaturnya lagi sesuai kebutuhan. 

Widget media sosial ini bisa anda letakkan pada bagian manapun terserah anda. Bisa diletakkan pada bagian sidebar blog atau bisa juga di dalam area postingan. Atau bisa juga diletakkan pada area footer/ di atas kredit seperti beberapa blog pada masa kini. Adapun untuk langkah-langkah pemasangannya silahkan simak penjelasannya di bawah ini. 

Cara Membuat Widget Sosial Media Keren Bisa Berputar

1. Buka akun blogger anda.

2. Pilih menu layout (tataletak) dan klik tambahkan gadget.

3. Pilih html/ javascript. 

4. Silahkan beri judul atau kosongkan. Selanjutnya masukkan kode berikut ini ke dalam kotak di bawahnya.

<style>

.simplifymedsos a{display:inline-block;text-align:center;font-size:15px;margin-right:8px;color:#fff;border:1px solid #888;border-radius:4px;opacity:.9;transition:all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out;   -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out;}.simplifymedsos a svg{margin:5px;width:18px;height:18px}.simplifymedsos a svg path {fill:currentColor}.simplifymedsos a:hover{color:#fff;opacity:0.8; transform:rotate(360deg); -moz-transform: rotate(360deg);   -webkit-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg)}.simplifymedsos .facebook{background:#3b5998}.simplifymedsos .twitter{background:#00aced}.simplifymedsos .youtube{background:#dd4b39}.simplifymedsos .instagram{background:#dd2a7b}.simplifymedsos .LinkedIn{background:#007bb5}

</style>

<center>

<div class="simplifymedsos" style="margin: 5px;">

<a class="twitter" href="https://www.twitter.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />

</path></svg></a>

<a class="facebook" href="https://www.facebook.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></path></svg></a>

<a class="youtube" href="https://www.youtube.com/channel/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />

</path></svg></a>

<a class="instagram" href="https://www.instagram.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />

</path></svg></a>

<a class="LinkedIn" href="https://www.linkedIn.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />

</path></svg></a>

</div>

</center>

Keterangan:

• Sesuaikan yang ditandai warna merah dengan Url masing-masing media sosial milik anda.
• Anda juga bisa mengedit atau menambahkan media sosial lainnya sesuai kebutuhan. 

5. Simpan widget dan lihat hasilnya. 

Selain memasangnya lewat tambahkan gadget, anda juga bisa memasangnya ke dalam html template misal untuk pemasangan di area footer, dalam postingan, dan sebagainya. 

Demikianlah tutorial tentang cara membuat/ memasang Ikon + Link Sosial Media Keren di Blog. Semoga bermanfaat. Baca juga: Cara Membuat Tombol Share Keren Populer di Blog

 

Selengkapnya

Cara Memasang Kotak Penelusuran Sitelink di Blog

Blogging

Cara Memasang Kotak Penelusuran Sitelink di Blog

23 Agustus 2021

Sebelum mengetahui apa itu kotak penelusuran sitelink, terlebih dahulu coba anda ketikkan judul/nama Blog anda di mesin pencarian google. Setelah anda klik enter atau tombol pencarian, lihat bagaimana hasilnya?. Apa yang muncul di hasil pencarian google?. Selanjutnya coba ketikkan judul atau nama blog saya ini (Santos Blog) di mesin pencari google?. Apa yang muncul di bawah nama dan deskripsi blog saya?

Ya, tampilan bersusun dari hasil pencarian nama blog itulah yang biasa disebut dengan kotak penelusuran sitelink. Keberadaan kotak penelusuran sitelink ini cukup penting bagi pengoptimalan mesin pencari dalam meranking halaman blog kita. Pusat google penelusuran juga menyebutkan bahwa kotak penelusuran sitelink adalah cara cepat bagi orang-orang untuk menelusuri situs atau aplikasi kita di halaman hasil penelusuran. Kotak penelusuran ini menerapkan saran real-time dan fitur lainnya.

Pada dasarnya, Google Penelusuran dapat otomatis menampilkan kotak penelusuran yang dicakupkan ke situs kita saat situs muncul sebagai hasil penelusuran. Tampilannya bisa berbeda-beda pada tiap-tiap web/blog. Ada yang terdiri dari dua kolom, empat kolom, enam kolom, dst. Link-link yang muncul pada kolom tersebut biasanya bisa berupa halaman statis seperti about, kontak, sitemap, ataupun beberapa judul artikel populer yang terdapat di blog kita. 

Baca juga: Cara Mengaktifkan Deskripsi Penelusuran Agar Blog Lebih SEO

Biasanya, kotak penelusuran sitelink ini akan diberikan google kepada situs-situs web/blog yang telah memiliki satu atau beberapa artikel yang berhasil masuk halaman page one di hasil pencarian. Artinya, kita tidak perlu melakukan apa pun untuk mewujudkannya. Meskipun begitu, tampilan sitelink otomatis ini seiring waktu kadang bisa berubah-ubah jumlahnya, atau bahkan menghilang, namun kemudian di lain waktu bisa muncul lagi. 

Agar kotak penelusuran sitelink tetap muncul dan stabil jumlahnya, kita dapat secara eksplisit memberikan informasi dan mengontrol aspek tertentu dari kotak penelusuran sitelink dengan menambahkan data terstruktur WebSite. Tujuannya yaitu agar dapat membantu Google memahami situs kita dengan lebih baik. 

Cara Membuat dan Mengaktifkan Kotak Penelusuran Sitelink Blog

Untuk memasang Kotak Penelusuran Sitelink di Blog, kita bisa mengikuti panduan sebagaimana yang telah dijelaskan pada Pusat Google Penelusuran. Caranya yaitu dengan menambahkan beberapa kode ke dalam template blog untuk menambahkan data terstruktur WebSite. 

Atau, anda juga bisa menggunakan kode untuk sitelink seperti yang saya pasang di blog saya ini. Kodenya yaitu sebagai berikut:

<script type='application/ld+json'>

{

&quot;@context&quot;: &quot;https://schema.org&quot;,

&quot;@type&quot;: &quot;WebSite&quot;,

&quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;,

&quot;name&quot;: &quot;<data:blog.title/>&quot;,

&quot;alternateName&quot;: &quot;<data:blog.title/>&quot;,

&quot;potentialAction&quot;: {

&quot;@type&quot;: &quot;SearchAction&quot;,

&quot;target&quot;: &quot;<data:blog.homepageUrl/>search?q={search_term_string}&amp;max-results=8&quot;,

&quot;query-input&quot;: &quot;required name=search_term_string&quot;

}

}

</script>

Letakkan kode tersebut di bawah deretan kode <head> kemudian simpan kembali template anda. 

Setelah berhasil memasang dan mengaktifkan Kotak Penelusuran Sitelink, silahkan tunggu beberapa waktu agar google melakukan index ulang pada blog/website anda. Jika blog telah dinilai layak oleh google, maka tampilan Kotak Penelusuran Sitelink akan segera tampil di sana. Atau anda juga bisa mengeceknya lewat pengujian hasil kaya. Semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Featured Post Grid Responsive Keren 4 Artikel

Blogging

Cara Membuat Widget Featured Post Grid Responsive Keren 4 Artikel

30 Juni 2021

Selain menambahkannya lewat fitur tataletak (layout) blogger, kita juga bisa membuat widget featured post secara manual dengan meletakkan langsung kode-kode pembuatnya ke dalam html template. Ya, artikel kali ini saya ingin berbagi cara untuk membuat widget Featured Post keren berbentuk grid 4 artikel yang cocok untuk anda tampilkan di halaman beranda (home) blog kesayangan anda. 

Widget featured post biasanya digunakan untuk menampilkan satu atau beberapa artikel pilihan (unggulan), atau pun juga postingan tertentu yang berpotensi menarik perhatian pengunjung. Bagi anda yang membuka usaha jualan via online, widget ini juga cocok untuk menampilkan produk-produk tertentu yang ingin anda promosikan agar mudah terlihat oleh pengunjung.

Widget featured post ini sebetulnya fungsinya seperti widget slider yang pernah saya bagikan tutorialnya pada artikel terdahulu (baca: Cara Membuat Widget Slider Keren di Blog). Hanya saja, kali ini tampilan per item artikelnya memiliki bentuk grid statis alias tidak bergerak sehingga tampak seperti widget-widget yang ada pada situs-situs berita populer. Jumlahnya diatur 4 artikel saja agar tidak terlalu kebanyakan dan memberatkan loading blog. 

Perlu diketahui, widget ini sebetulnya saya modifikasi dari tutorial yang berasal dari blog Naminakiky untuk membuat tampilan bentuk grid seperti yang saya harapkan. Demo tampilannya seperti yang ada di blog saya ini (saat artikel ini ditulis). 

Apakah anda tertarik untuk memasangnya di blog anda?. Silahkan simak dan ikuti langkah-langkah pemasangannya di bawah ini. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode </head> dan letakkan kode berikut ini di atasnya. 

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

<style type='text/css'>

/* Featured Post by naminakiky.com */

*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_namiwrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:300px;margin-bottom:10px}.featured_namina{display:block;position:relative;float:left;overflow:hidden;height:300px}.featured_namina.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:25%;padding:1px}.featured_namina a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_namina a:before{width:100%;height:100%;position:absolute;content:&#39;&#39;;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}.featured_namina:hover a:before{opacity:1}.featured_namina a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;left:15px;right:15px;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_namiwrap span{color:#fff;padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.featured_namina.first span{background:#679e37}.featured_namina.second span{background:#f8a724}.featured_namina.third span{background:#029ae4}.featured_namina.fourth span{background:#e53935}.featured_namina a .blog_contents h3{color:#fff;margin-top:15px;font-size:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}.featured_namina a .blog_contents h3:hover{text-decoration:underline}.featured_namina .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_namina:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}

@media only screen and (max-width:800px){

.featured_namiwrap{max-height:initial}.featured_namina.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;height:310px;margin:0;margin-bottom:10px}.featured_namina a .blog_contents{left:15px;right:15px;bottom:10px}.featured_namina.first a .blog_contents h3,.featured_namina a .blog_contents h3{font-size:20px}}

@media only screen and (max-width:400px){

.featured_namiwrap{padding:2px;margin-bottom:-10px}}

</style>

<script type='text/javascript'>

//<![CDATA[

// Featured post by naminakiky.com

function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_namiwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_namina first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_namina second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_namina third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_namina fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;

//]]>

</script>

</b:if>

4. Selanjutnya silahkan cari kode <div id='wrapper'> atau <div id='content-wrapper'> atau kode sejenis kemudian letakkan kode berikut ini di bawahnya.

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

<div class='featured_naminaz' id='featured_namiwrap'>

<div class='ct-wrapper'>

<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

</script>

</div>

</div>

</b:if>

Keterangan:

• Anda bisa sesuaikan lagi pengaturan margin dan lainnya pada kode CSSnya jika ada yang masih perlu diperbaiki (kode yang atas). 
• Pengaturan di atas berfungsi layaknya widget Recent Posts. Jika ingin menampilkan artikel berdasarkan label tertentu silahkan ganti format feednya seperti berikut ini:
  
  /feeds/posts/default?
  
  Ganti menjadi:
  
  /feeds/posts/default/-/NAMA LABEL?

5. Simpan kembali template anda dan lihat hasilnya.

Demikian tutorial mengenai cara membuat Widget Featured Post Grid Responsive Keren 4 Artikel. Semoga bermanfaat.

Selengkapnya