delete cung cấp bởi blogger

Để ẩn dòng chữ “Cung cấp bởi blogger”

I. Các bạn làm như sau:

1. Đăng nhập vào blog → thiết kế →chỉnh sửa HTML → Mở rộng mẫu tiện ích.

2. Ở đây bạn ấn cặp phím Ctrl + F → gõ dòng chữ Attribution

- Sẽ hiển thị tương tự như hình dưới:

3. Tiếp theo các bạn xóa dòng <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> rồi lưu mẫu. - Sẽ hiện ra bảng như hình dưới:

- Các bạn chọn dòng “xóa tiện ích”

II. Ngoài ra những template khác không xoá được như cách trên và bạn có thể xoá theo cách dưới đây.

1. Đăng nhập vào blog → thiết kế →chỉnh sửa HTML → Mở rộng mẫu tiện ích.

2. Ở đây bạn ấn cặp phím Ctrl + F → gõ dòng chữ Attribution

Bạn nhìn kỹ sẽ thấy đoạn code như sau:

<b:section class='foot' id='footer-3' showaddelement='no'>

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

<b:includable id='main'>

<b:if cond='data:feedbackSurveyLink'>

<div class='mobile-survey-link' style='text-align: center;'>

<data:feedbackSurveyLink/>

</div>

</b:if>

<div class='widget-content' style='text-align: center;'>

<b:if cond='data:attribution != ""'>

<data:attribution/>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

3. Tiếp theo bạn sửa chữ :

no thành yes

true thành false
tiếp theo bạn save template lại

tiếp sau đó bạn nhấp vào trang chủ và kéo xuống cuối trang và nhấp vô biểu tượng cài đặt và chọn xóa bỏ

Chúc các bạn thành công.

Button Hỗ trợ Skype Online cho Blog /website

Hiện nay nhu cầu hỗ trợ trực tuyến trên mạng rất phổ biến. Blog của bạn sẽ có thêm một lượng lớn độc giả nếu dịch vụ hỗ trợ và chăm sóc khách hàng thường xuyên hơn.Cách đơn giản nhất mà không mất phí đó là dùng các mạng xã hội như Skype, facebook, yahoo. Bài viết này mình sẽ hướng dẫn các bạn code để giúp độc giả khi truy cập blog có thể biết được bạn đang online bằng tài khoản Skype hay khong để chat trực tuyến và yêu cầu hỗ trợ online mà không cần phải gọi điện thoại hỏi trước.

» Cách tạo Button Hỗ trợ Skype Online cho Blog /website

l. Đăng nhập vào blog

2. Chọn Bố cục (layout)

3. Chọn thêm tiện ích (Add widget) » Chọn HTML/Javascripts và dán code bên dưới vào nha.

<a href="Skype:YOUR-ID-SKYPE?chat"> <img src="http://mystatus.skype.com/bigclassic/YOUR-ID-SKYPE" title="Liên hệ với nhóm tác giả để được trợ giúp trực tuyến qua Skyper" width="120" height="30" alt=""> </a>

» Trong đó:

YOUR-ID-SKYPE là id trang Skype của bạn, có 2 lần thay trong code trên.
width="120" là chiều rộng của hình ảnh button
height="30" là chiều cao của hình ảnh button
bigclassic là hình ảnh của button sẽ hiển thị phần này bạn có thể thay đổi thành cách hình khác như phần nâng cao ở cuối bài viết này.

» Một số hình ảnh hỗ trợ Skype bạn có thể chọn

Nếu thích hình nào trong các hình bên dưới bạn chỉ cần thay giá trị bigclassic thành từ bên dưới theo ý thích của bạn nha.

mediumicon

bigclassic

smallclassic

balloon

» Tùy biến sáng xanh khi có người online

1. Truy cập vào trang tùy biến của Skype : https://dev.skype.com/skype-uri/generator
2. Điền thông tin mà họ yêu cầu sau đó copy code bạn lấy được về dán vào blog của bạn nha,

Đổ bóng tiêu đề bài viết

Heading Tag với hiệu ứng đổ bóng và dê chuột Hover

Blogger blog cho phép chỉnh sửa stylesheet. Bạn có thể tùy chỉnh các mã để blog như ý muốn. Bài trước, Namkna đã chia sẻ nhiều cách khác nhau tùy biến các thẻ tiêu đề, tức là H3. Namkna sử dụng thẻ H3 bên trong mỗi bài viết. Thẻ tiêu đề (heading tag) được xem là phần quan trọng nhất với Seo. Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo ra một tiêu đề tùy chỉnh và sẽ thay đổi màu sắc khi chuột di chuột. Namkna sẽ sử dụng CSS3 hiệu ứng để tạo ra một hiệu ứng đổ bóng cùng với hiệu ứng hover khi dê chuột lên tiêu đề đó. Điều này sẽ cung cấp cho tiêu đề của bạn một cái nhìn mới hơn. Vì vậy, hãy làm điều đó!

Demo chính là các tiêu đề con trong bài viết này!

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin> (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ ]]></b:skin> (Ứng với mỗi một mẫu là tiêu đề minh họa ngay trên nó).

/*------http://namkna.blogspot.com/--------*/
h3{
font-family:veranda !important;
font-style:italic !important;
}

.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}

.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Lưu ý: Hãy xóa tất cả những thẻ trong blog của bạn bắt đầu bằng thẻ CSS dạng:
.post h3 {...}
.post h3:hover {...}
.post h3 span  {...}
....

Tùy chỉnh đoạn code trên:

Để thay đổi chỉnh sửa kiểu font Verdana hãy thay thế nó với bất kỳ kiểu font bạn muốn.
Để thay đổi chữ in nghiêng hãy thay thế (italic) với một trong hai loại là bình thường (normal) hoặc đậm (norma)
Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi chưadê chuột lên, Hãy thay đổi mã màu #666 thành mã màu lựa chọn của bạn.
Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi đã dê chuột lên, Hãy thay đổi mã màu #FF33F thành mã màu lựa chọn của bạn.
Để thay đổi màu đổ bóng của hộp trong chế độ hoạt động khi chưa dê chuột, hãy thay đổi mã màu #666 thành mã màu lựa chọn của bạn.
Để thay đổi màu đổ bóng của hộp trong chế độ hoạt động khi chưa dê chuột, hãy thay đổi mã màu #FF133F thành mã màu lựa chọn của bạn.

6- Lưu mẫu của bạn lại!

Cách sử dụng khi đăng bài?

1- Tạo một bài đăng mới.
2- Check vào tab HTML và sử dụng đoạn code sau:

<h3> Tiêu đề bài viết của bạn ở đây </h3>

Xem ảnh minh họa để tháy ró hơn.

3- Sau khi bạn xuất bản bài đăng, bạn sẽ thấy tác dụng của thủ thuật.

Tôi hy vọng mẹo nhỏ này sẽ giúp bạn tạo các bài viết có chất lượng tốt hơn bằng văn bản. Hãy cho namkna biết nếu bạn cần bất kỳ sự giúp đỡ nào.

Tự động chèn link cho bài viết

Tự động chèn link cho từ khóa trong bài viết của blogspot

Bình thường để chèn link vào một từ khóa trong bài viết bạn phải thực hiện thủ công. Như vậy với bài viết có nhiều từ khóa xẽ rất bất tiện. Bài viết này namkna sẽ hướng dẫn các bạn cách đểtự động chèn liên kết (link) vào các từ khóa (keywork) nằm trong bài viết của bạn mà không phải vất vả thêm thủ công từng link bằng tay...

Ảnh minh họa:

Tự động chèn link cho từ khóa trong bài viết của blogspot - Auto add link to keywork of post blogspot

» Bắt đầu thủ thuật "tự động thêm link vào từ khóa của bài viết."

1. Đăng nhập vào tài khoản Blogger

2. Vào Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chọn một trong 2 đoạn code bên dưới và chèn nó ngay trước thẻ </head>
(Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này):
- Đoạn 1: Các liên kết mở ngay tại trang bạn đang xem:

<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>

- Đoạn 2: Các link mở ra trong tab mới khi click chuột vào thì hãy dùng đoạn code bên dưới:

<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'" target="_blank">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>

5. Tìm đoạn code sau:

<data:post.body/>

- Thay thế nó thành:

<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 3',true,'Link từ khóa 3','summary<data:post.id/>');
</script>

Lưu ý: Mỗi blog thường có từ 2 đến 4 đoạn code <data:post.body/> như trên. Các bạn phải chèn đúng vị trí mới hiển thị.

¤ Trong đó:

Thay Từ khóa 1,2,3 thành các từ khóa bạn hay sử dụng trong blog.
Thay Link từ khóa 1,2,3 thành link tương ứng với các từ khóa.
Để thâm một từ khóa mới bạn chỉ cần thêm đoạn mã bên dưới vào trước thẻ </script>của đoạn code trên.
```
highlightSearchTerms('Từ khóa n',true,'Link từ khóa n','summary<data:post.id/>');
```

6. Lưu mẫu lại.

- Giờ hãy tạo một bài viết mới chứa các từ khóa như bạn đx thiết lập ở đoạn scripts trong bước 6 rồi xuát bản và xem kết quả nha.

Flying Drop Down Menubar

Css3 Flying Drop Down Menubar cho Blogger

Với mẫu dropdown fly menu sử hiệu ứng bay từ CSS3 blog của bạn sẽ đặc biệt hơn, và sẽ không lo tốc độ vì tất cả đều là CSS3. Các menu con sẽ bay khi dê chuột vào menu chính. Menu hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi, opera,.... Các bạn có thể xem ảnh minh họa hoặc demo.

VIEW DEMO

» Cách tiến hành:

1. Đăng nhập vào blog

2. Chọn Bố cục (lsyout)

3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscipts và dán đoạn code bên dưới và dán vào.

/* Flying Css3 menu http://namkna.blogspot.com/*/

#flyingmenubt,#flyingmenubt ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#flyingmenubt {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#flyingmenubt ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#flyingmenubt li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#flyingmenubt li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#flyingmenubt li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
    z-index: 4;
}
#flyingmenubt li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#flyingmenubt ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}</style>
<ul id="flyingmenubt">
    <li><a href="http://namkna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="http://namkna.blogspot.com/">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Back</a></li>
</ul>

» Tùy chỉnh:

Sửa margin: 40px auto; nếu menu có khoảng cách với phần trên và dưới, Có thể đổi thành margin: 0 auto; là tốt nhất,
width: 980px; là chiều rộng của menu. hãy chỉnh lại cho phù hợp với độ rộng blog của bạn.
width: 105px; là chiều rộng menu con. hãy thay đổi nếu tiêu đề menu quá dài.
width: 150px; là chiều rộng tiêu đề khi dê chuột vào menu,
height: 36px; là chiều cao của menu chính.
Thay dấu thăng màu đỏ (#) là liên kết tới bài viết, trang, hoặc nhãn của bạn.
Thay màu xanh là tên bài viết, trang, hoặc nhãn tương ứng với link màu đỏ. nên là từ khố không nên quá dài sẽ sấu menu.

Dropmenu Đơn giản

CSS Dropdown menu đơn giản cho blogspot

Bài viết này namkna sẽ hướng đẫn các bạn thiết kế một mẫu menu đơn giản để đặt trên sidebar hoặc header, Menu hoạt động dựa trên các thuộc tính CSS để góp phần làm giảm tới mức thấp nhất thời gian load trang: Về kiểu dáng menu này chỉ có một tiêu đề duy nhất và nó sẽ được mở rộng ra thêm các menu con khi bạn dê chuột lên phần tiêu đề đó.

Các bạn có thể xem hình minh họa ngay bên cạnh tiêu đề bài viết này:

☼ Cách thêm CSS Dropdown menu dơn giản cho blogspot:

1- Đăng nhập vào Blog

2- Vào Bố cục (Layout)

3- Bấm vào thêm tiện ích => Chọn HTML/Javascripts và dán code bên dưới vào.

<style>nav.drop-menu {
  position:relative;
  padding:10px 15px;
  background:#6D92A5;
  width:200px;
  font:bold 12px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#eee;
}

nav.drop-menu:after {
  content:"";
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#fff;
  position:absolute;
  top:16px;
  right:14px;
}

nav.drop-menu ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  text-transform:none;
  margin:0px;
  padding:0px;
  background:#6D92A5;
  width:100%;
  font-weight:normal;
  display:none;
}

nav.drop-menu li {
  list-style:none;
  margin:0px;
  padding:0px;
}

nav.drop-menu li a {
  display:block;
  margin:0px;
  padding:7px 15px;
  text-decoration:none;
  color:#ccc;
}

nav.drop-menu li a:hover {
  background:#74838F;
  padding-left:19px;
}

nav.drop-menu:hover ul {
  display:block;
}</style>
<nav class='drop-menu'>
Drop Down Menu
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Portfolio</a></li>
        <li><a href='#'>Contact</a></li>
        <li><a href='#'>Archive</a></li>
        <li><a href='#'>Search</a></li>
        <li><a href='#'>Company</a></li>
    </ul>
</nav>